diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SSHTunnelForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SSHTunnelForm.tsx index d73c00265d0a4..a9b79a554fb4b 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SSHTunnelForm.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SSHTunnelForm.tsx @@ -56,7 +56,7 @@ const SSHTunnelForm = ({ db, dbFetched, isEditMode, - sshTunneling, + isSSHTunneling, onSSHTunnelParametersChange, setSSHTunnelLoginMethod, removeSSHTunnelConfig, @@ -64,7 +64,7 @@ const SSHTunnelForm = ({ db: DatabaseObject | null; dbFetched: DatabaseObject | null; isEditMode: boolean; - sshTunneling: boolean; + isSSHTunneling: boolean; onSSHTunnelParametersChange: EventHandler< ChangeEvent >; @@ -81,7 +81,7 @@ const SSHTunnelForm = ({
infoTooltip(theme)}> { diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.test.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.test.tsx index ebc20eb38896b..2b064f6c107d9 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.test.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.test.tsx @@ -1198,6 +1198,41 @@ describe('DatabaseModal', () => { }); describe('SSH Tunnel Form interaction', () => { + test('properly interacts with SSH Tunnel form textboxes for dynamic form', async () => { + userEvent.click( + screen.getByRole('button', { + name: /postgresql/i, + }), + ); + expect(await screen.findByText(/step 2 of 3/i)).toBeInTheDocument(); + const SSHTunnelingToggle = screen.getByTestId('ssh-tunnel-switch'); + userEvent.click(SSHTunnelingToggle); + const SSHTunnelServerAddressInput = screen.getByTestId( + 'ssh-tunnel-server_address-input', + ); + expect(SSHTunnelServerAddressInput).toHaveValue(''); + userEvent.type(SSHTunnelServerAddressInput, 'localhost'); + expect(SSHTunnelServerAddressInput).toHaveValue('localhost'); + const SSHTunnelServerPortInput = screen.getByTestId( + 'ssh-tunnel-server_port-input', + ); + expect(SSHTunnelServerPortInput).toHaveValue(''); + userEvent.type(SSHTunnelServerPortInput, '22'); + expect(SSHTunnelServerPortInput).toHaveValue('22'); + const SSHTunnelUsernameInput = screen.getByTestId( + 'ssh-tunnel-username-input', + ); + expect(SSHTunnelUsernameInput).toHaveValue(''); + userEvent.type(SSHTunnelUsernameInput, 'test'); + expect(SSHTunnelUsernameInput).toHaveValue('test'); + const SSHTunnelPasswordInput = screen.getByTestId( + 'ssh-tunnel-password-input', + ); + expect(SSHTunnelPasswordInput).toHaveValue(''); + userEvent.type(SSHTunnelPasswordInput, 'pass'); + expect(SSHTunnelPasswordInput).toHaveValue('pass'); + }); + test('properly interacts with SSH Tunnel form textboxes', async () => { userEvent.click( screen.getByRole('button', { diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx index 603f449fec711..d687d89e26fd9 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx @@ -122,6 +122,12 @@ const ErrorAlertContainer = styled.div` `}; `; +const SSHTunnelContainer = styled.div` + ${({ theme }) => ` + padding: 0px ${theme.gridUnit * 4}px; + `}; +`; + interface DatabaseModalProps { addDangerToast: (msg: string) => void; addSuccessToast: (msg: string) => void; @@ -549,7 +555,9 @@ const DatabaseModal: FunctionComponent = ({ DB.backend === db?.engine || DB.engine === db?.engine, ) as DatabaseObject )?.engine_information?.disable_ssh_tunneling; - const sshTunneling = isFeatureEnabled(FeatureFlag.SSH_TUNNELING); + const isSSHTunneling = + isFeatureEnabled(FeatureFlag.SSH_TUNNELING) && + disableSSHTunnelingForEngine !== undefined; const hasAlert = connectionAlert || !!(db?.engine && engineSpecificAlertMapping[db.engine]); const useSqlAlchemyForm = @@ -1287,6 +1295,37 @@ const DatabaseModal: FunctionComponent = ({ }); }; + const renderSSHTunnelForm = () => ( + + onChange(ActionType.parametersSSHTunnelChange, { + type: target.type, + name: target.name, + value: target.value, + }) + } + setSSHTunnelLoginMethod={(method: AuthType) => + setDB({ + type: ActionType.setSSHTunnelLoginMethod, + payload: { login_method: method }, + }) + } + removeSSHTunnelConfig={() => + setDB({ + type: ActionType.removeSSHTunnelConfig, + }) + } + /> + ); + const renderCTABtns = () => (