feat: add ssh tunneling to dynamic form for Database Connection UI

superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.test.tsx

@@ -1198,6 +1198,42 @@ 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,
+            }),
+          );
+          screen.logTestingPlaygroundURL();
+          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', {

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,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         DB.backend === db?.engine || DB.engine === db?.engine,
     ) as DatabaseObject
   )?.engine_information?.allow_ssh_tunneling;
-  const sshTunneling = isFeatureEnabled(FeatureFlag.SSH_TUNNELING);
+  const sshTunneling =
+    isFeatureEnabled(FeatureFlag.SSH_TUNNELING) &&
+    engineAllowsSSHTunneling !== undefined &&
+    engineAllowsSSHTunneling;
   const hasAlert =
     connectionAlert || !!(db?.engine && engineSpecificAlertMapping[db.engine]);
   const useSqlAlchemyForm =
@@ -1287,6 +1296,37 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     });
   };
 
+  const renderSSHTunnelForm = () => (
+    <SSHTunnelForm
+      isEditMode={isEditMode}
+      sshTunneling={sshTunneling}
+      db={db as DatabaseObject}
+      dbFetched={dbFetched as DatabaseObject}
+      onSSHTunnelParametersChange={({
+        target,
+      }: {
+        target: HTMLInputElement | HTMLTextAreaElement;
+      }) =>
+        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 = () => (
     <StyledBtns>
       <Button
@@ -1493,36 +1533,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 testConnection={testConnection}
                 testInProgress={testInProgress}
               >
-                {sshTunneling && engineAllowsSSHTunneling && (
-                  <SSHTunnelForm
-                    isEditMode={isEditMode}
-                    sshTunneling={sshTunneling}
-                    db={db as DatabaseObject}
-                    dbFetched={dbFetched as DatabaseObject}
-                    onSSHTunnelParametersChange={({
-                      target,
-                    }: {
-                      target: HTMLInputElement | HTMLTextAreaElement;
-                    }) =>
-                      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,
-                      })
-                    }
-                  />
-                )}
+                {sshTunneling && renderSSHTunnelForm()}
               </SqlAlchemyForm>
               {isDynamic(db?.backend || db?.engine) && !isEditMode && (
                 <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
@@ -1796,6 +1807,11 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                   validationErrors={validationErrors}
                   getPlaceholder={getPlaceholder}
                 />
+                {sshTunneling && (
+                  <SSHTunnelContainer>
+                    {renderSSHTunnelForm()}
+                  </SSHTunnelContainer>
+                )}
                 <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
                   {dbModel.engine !== Engines.GSheet && (
                     <>