diff --git a/superset-frontend/packages/superset-ui-core/src/ui-overrides/ExtensionsRegistry.ts b/superset-frontend/packages/superset-ui-core/src/ui-overrides/ExtensionsRegistry.ts index d63052506..a411c41d0 100644 --- a/superset-frontend/packages/superset-ui-core/src/ui-overrides/ExtensionsRegistry.ts +++ b/superset-frontend/packages/superset-ui-core/src/ui-overrides/ExtensionsRegistry.ts @@ -49,6 +49,16 @@ interface MenuObjectChildProps { disable?: boolean; } +export interface SwitchProps { + isEditMode: boolean; + dbFetched: any; + disableSSHTunnelingForEngine?: boolean; + useSSHTunneling: boolean; + setUseSSHTunneling: React.Dispatch>; + setDB: React.Dispatch; + isSSHTunneling: boolean; +} + type ConfigDetailsProps = { embeddedId: string; }; @@ -69,6 +79,7 @@ export type Extensions = Partial<{ 'welcome.message': React.ComponentType; 'welcome.banner': React.ComponentType; 'welcome.main.replacement': React.ComponentType; + 'ssh_tunnel.form.switch': React.ComponentType; }>; /** 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 49dbc4e0e..6cc0312b5 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SSHTunnelForm.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SSHTunnelForm.tsx @@ -17,16 +17,13 @@ * under the License. */ import React, { EventHandler, ChangeEvent, useState } from 'react'; -import { t, SupersetTheme, styled } from '@superset-ui/core'; -import { AntdForm, AntdSwitch, Col, Row } from 'src/components'; -import InfoTooltip from 'src/components/InfoTooltip'; +import { t, styled } from '@superset-ui/core'; +import { AntdForm, Col, Row } from 'src/components'; import { Form, FormLabel } from 'src/components/Form'; import { Radio } from 'src/components/Radio'; import { Input, TextArea } from 'src/components/Input'; import { Input as AntdInput, Tooltip } from 'antd'; import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; -import { isEmpty } from 'lodash'; -import { infoTooltip, toggleStyle } from './styles'; import { DatabaseObject } from '../types'; import { AuthType } from '.'; @@ -54,79 +51,143 @@ const StyledInputPassword = styled(AntdInput.Password)` const SSHTunnelForm = ({ db, - dbFetched, - isEditMode, - isSSHTunneling, onSSHTunnelParametersChange, setSSHTunnelLoginMethod, - removeSSHTunnelConfig, }: { db: DatabaseObject | null; - dbFetched: DatabaseObject | null; - isEditMode: boolean; - isSSHTunneling: boolean; onSSHTunnelParametersChange: EventHandler< ChangeEvent >; setSSHTunnelLoginMethod: (method: AuthType) => void; - removeSSHTunnelConfig: () => void; }) => { - const [useSSHTunneling, setUseSSHTunneling] = useState( - !isEmpty(db?.ssh_tunnel), - ); const [usePassword, setUsePassword] = useState(AuthType.password); return (
-
infoTooltip(theme)}> - { - setUseSSHTunneling(changed); - if (!changed) removeSSHTunnelConfig(); - }} - data-test="ssh-tunnel-switch" - /> - SSH Tunnel - -
- {useSSHTunneling && ( + + + + + {t('SSH Host')} + + + + + + + + {t('SSH Port')} + + + + + + + + + + {t('Username')} + + + + + + + + + + {t('Login with')} + + + { + setUsePassword(value); + setSSHTunnelLoginMethod(value); + }} + > + + {t('Password')} + + + {t('Private Key & Password')} + + + + + + + {usePassword === AuthType.password && ( + + + + + {t('SSH Password')} + + + visible ? ( + + + + ) : ( + + + + ) + } + role="textbox" + /> + + + + )} + {usePassword === AuthType.privateKey && ( <> - + - - {t('SSH Host')} + + {t('Private Key')} - - - - - - - {t('SSH Port')} - - @@ -134,129 +195,31 @@ const SSHTunnelForm = ({ - - {t('Username')} + + {t('Private Key Password')} - + visible ? ( + + + + ) : ( + + + + ) + } + role="textbox" /> - - - - - {t('Login with')} - - - { - setUsePassword(value); - setSSHTunnelLoginMethod(value); - }} - > - - {t('Password')} - - - {t('Private Key & Password')} - - - - - - - {usePassword === AuthType.password && ( - - - - - {t('SSH Password')} - - - visible ? ( - - - - ) : ( - - - - ) - } - role="textbox" - /> - - - - )} - {usePassword === AuthType.privateKey && ( - <> - - - - - {t('Private Key')} - -