SSH Tunnel UI:

- Simplify render of switch extension by making it an individual component
apache · Feb 3, 2023 · 4d9edb4 · 4d9edb4
1 parent a8a0f0d
commit 4d9edb4
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 61 deletions.
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
@@ -56,6 +56,7 @@ export interface SwitchProps {
  useSSHTunneling: boolean;
  setUseSSHTunneling: React.Dispatch<React.SetStateAction<boolean>>;
  setDB: React.Dispatch<any>;
+ isSSHTunneling: boolean;
 }
 
 type ConfigDetailsProps = {

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SSHTunnelSwitch.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SSHTunnelSwitch.tsx
@@ -0,0 +1,58 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { t, SupersetTheme, SwitchProps } from '@superset-ui/core';
+import { AntdSwitch } from 'src/components';
+import InfoTooltip from 'src/components/InfoTooltip';
+import { isEmpty } from 'lodash';
+import { ActionType } from '.';
+import { infoTooltip, toggleStyle } from './styles';
+
+const SSHTunnelSwitch = ({
+ isEditMode,
+ dbFetched,
+ useSSHTunneling,
+ setUseSSHTunneling,
+ setDB,
+ isSSHTunneling,
+}: SwitchProps) =>
+ isSSHTunneling ? (
+ <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
+ <AntdSwitch
+ disabled={isEditMode && !isEmpty(dbFetched?.ssh_tunnel)}
+ checked={useSSHTunneling}
+ onChange={changed => {
+ setUseSSHTunneling(changed);
+ if (!changed) {
+ setDB({
+ type: ActionType.removeSSHTunnelConfig,
+ });
+ }
+ }}
+ data-test="ssh-tunnel-switch"
+ />
+ <span css={toggleStyle}>{t('SSH Tunnel')}</span>
+ <InfoTooltip
+ tooltip={t('SSH Tunnel configuration parameters')}
+ placement="right"
+ viewBox="0 -5 24 24"
+ />
+ </div>
+ ) : null;
+export default SSHTunnelSwitch;
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -35,7 +35,7 @@ import React, {
 import { setItem, LocalStorageKeys } from 'src/utils/localStorageHelpers';
 import { UploadChangeParam, UploadFile } from 'antd/lib/upload/interface';
 import Tabs from 'src/components/Tabs';
-import { AntdSelect, AntdSwitch, Upload } from 'src/components';
+import { AntdSelect, Upload } from 'src/components';
 import Alert from 'src/components/Alert';
 import Modal from 'src/components/Modal';
 import Button from 'src/components/Button';
@@ -88,10 +88,10 @@ import {
  StyledStickyHeader,
  formScrollableStyles,
  StyledUploadWrapper,
- toggleStyle,
 } from './styles';
 import ModalHeader, { DOCUMENTATION_LINK } from './ModalHeader';
 import SSHTunnelForm from './SSHTunnelForm';
+import SSHTunnelSwitch from './SSHTunnelSwitch';
 
 const extensionsRegistry = getExtensionsRegistry();
 
@@ -561,9 +561,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
  const [importingErrorMessage, setImportingErrorMessage] = useState<string>();
  const [passwordFields, setPasswordFields] = useState<string[]>([]);
 
- const SSHTunnelSwitchExtension = extensionsRegistry.get(
- 'ssh_tunnel.form.switch',
- );
+ const SSHTunnelSwitchComponent =
+ extensionsRegistry.get('ssh_tunnel.form.switch') ?? SSHTunnelSwitch;
+
  const [useSSHTunneling, setUseSSHTunneling] = useState<boolean>(false);
 
  const conf = useCommonConf();
@@ -1360,30 +1360,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
  />
  );
 
- const renderDefaultSSHTunnelSwitch = () => (
- <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
- <AntdSwitch
- disabled={isEditMode && !isEmpty(dbFetched?.ssh_tunnel)}
- checked={useSSHTunneling}
- onChange={changed => {
- setUseSSHTunneling(changed);
- if (!changed) {
- setDB({
- type: ActionType.removeSSHTunnelConfig,
- });
- }
- }}
- data-test="ssh-tunnel-switch"
- />
- <span css={toggleStyle}>SSH Tunnel</span>
- <InfoTooltip
- tooltip={t('SSH Tunnel configuration parameters')}
- placement="right"
- viewBox="0 -5 24 24"
- />
- </div>
- );
-
  const renderCTABtns = () => (
  <StyledBtns>
  <Button
@@ -1588,18 +1564,15 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
  testConnection={testConnection}
  testInProgress={testInProgress}
  >
- {SSHTunnelSwitchExtension ? (
- <SSHTunnelSwitchExtension
- isEditMode={isEditMode}
- dbFetched={dbFetched}
- disableSSHTunnelingForEngine={disableSSHTunnelingForEngine}
- useSSHTunneling={useSSHTunneling}
- setUseSSHTunneling={setUseSSHTunneling}
- setDB={setDB}
- />
- ) : (
- isSSHTunneling && renderDefaultSSHTunnelSwitch()
- )}
+ <SSHTunnelSwitchComponent
+ isEditMode={isEditMode}
+ dbFetched={dbFetched}
+ disableSSHTunnelingForEngine={disableSSHTunnelingForEngine}
+ useSSHTunneling={useSSHTunneling}
+ setUseSSHTunneling={setUseSSHTunneling}
+ setDB={setDB}
+ isSSHTunneling={isSSHTunneling}
+ />
  {useSSHTunneling && renderSSHTunnelForm()}
  </SqlAlchemyForm>
  {isDynamic(db?.backend || db?.engine) && !isEditMode && (
@@ -1874,26 +1847,17 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
  validationErrors={validationErrors}
  getPlaceholder={getPlaceholder}
  />
- {SSHTunnelSwitchExtension ? (
- <SSHTunnelContainer>
- <SSHTunnelSwitchExtension
- isEditMode={isEditMode}
- dbFetched={dbFetched}
- disableSSHTunnelingForEngine={
- disableSSHTunnelingForEngine
- }
- useSSHTunneling={useSSHTunneling}
- setUseSSHTunneling={setUseSSHTunneling}
- setDB={setDB}
- />
- </SSHTunnelContainer>
- ) : (
- isSSHTunneling && (
- <SSHTunnelContainer>
- {renderDefaultSSHTunnelSwitch()}
- </SSHTunnelContainer>
- )
- )}
+ <SSHTunnelContainer>
+ <SSHTunnelSwitchComponent
+ isEditMode={isEditMode}
+ dbFetched={dbFetched}
+ disableSSHTunnelingForEngine={disableSSHTunnelingForEngine}
+ useSSHTunneling={useSSHTunneling}
+ setUseSSHTunneling={setUseSSHTunneling}
+ setDB={setDB}
+ isSSHTunneling={isSSHTunneling}
+ />
+ </SSHTunnelContainer>
  {useSSHTunneling && (
  <SSHTunnelContainer>
  {renderSSHTunnelForm()}