feat: Added Dynamic form link to SQL Alchemy Form (#15208)

* fix: add icons (#15122) * added alerts * revisions * added icon * added dynamic form link
apache · Jun 17, 2021 · 9cecb8b · 9cecb8b
1 parent c32a387
commit 9cecb8b
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 15 deletions.
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx
@@ -28,11 +28,13 @@ const SqlAlchemyTab = ({
   onInputChange,
   testConnection,
   conf,
+  isEditMode = false,
 }: {
   db: DatabaseObject | null;
   onInputChange: EventHandler<ChangeEvent<HTMLInputElement>>;
   testConnection: EventHandler<MouseEvent<HTMLElement>>;
   conf: { SQLALCHEMY_DOCS_URL: string; SQLALCHEMY_DISPLAY_TEXT: string };
+  isEditMode?: boolean;
 }) => (
   <>
     <StyledInputContainer>
@@ -45,7 +47,7 @@ const SqlAlchemyTab = ({
           type="text"
           name="database_name"
           data-test="database-name-input"
-          value={db?.database_name || ''}
+          value={isEditMode ? db?.database_name : ''}
           placeholder={t('Name your database')}
           onChange={onInputChange}
         />

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -58,6 +58,7 @@ import {
   antDModalStyles,
   antDTabsStyles,
   buttonLinkStyles,
+  alchemyButtonLinkStyles,
   TabHeader,
   formHelperStyles,
   formStyles,
@@ -126,7 +127,11 @@ type DBReducerActionType =
     }
   | {
       type: ActionType.configMethodChange;
-      payload: { configuration_method: CONFIGURATION_METHOD };
+      payload: {
+        database_name?: string;
+        engine?: string;
+        configuration_method: CONFIGURATION_METHOD;
+      };
     };
 
 function dbReducer(
@@ -594,6 +599,11 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     setTabKey(key);
   };
 
+  const isDynamic = (engine: string | undefined) =>
+    availableDbs?.databases.filter(
+      (DB: DatabaseObject) => DB.engine === engine,
+    )[0].parameters !== undefined;
+
   return useTabLayout ? (
     <Modal
       css={(theme: SupersetTheme) => [
@@ -635,19 +645,40 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       >
         <StyledBasicTab tab={<span>{t('Basic')}</span>} key="1">
           {useSqlAlchemyForm ? (
-            <SqlAlchemyForm
-              db={db as DatabaseObject}
-              onInputChange={({ target }: { target: HTMLInputElement }) =>
-                onChange(ActionType.inputChange, {
-                  type: target.type,
-                  name: target.name,
-                  checked: target.checked,
-                  value: target.value,
-                })
-              }
-              conf={conf}
-              testConnection={testConnection}
-            />
+            <>
+              <SqlAlchemyForm
+                db={db as DatabaseObject}
+                onInputChange={({ target }: { target: HTMLInputElement }) =>
+                  onChange(ActionType.inputChange, {
+                    type: target.type,
+                    name: target.name,
+                    checked: target.checked,
+                    value: target.value,
+                  })
+                }
+                conf={conf}
+                testConnection={testConnection}
+                isEditMode={isEditMode}
+              />
+              {isDynamic(db?.engine) && (
+                <Button
+                  buttonStyle="link"
+                  onClick={() =>
+                    setDB({
+                      type: ActionType.configMethodChange,
+                      payload: {
+                        database_name: db?.database_name,
+                        configuration_method: CONFIGURATION_METHOD.DYNAMIC_FORM,
+                        engine: db?.engine,
+                      },
+                    })
+                  }
+                  css={theme => alchemyButtonLinkStyles(theme)}
+                >
+                  Connect this database using the dynamic form instead
+                </Button>
+              )}
+            </>
           ) : (
             <DatabaseConnectionForm
               isEditMode
@@ -863,8 +894,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                     setDB({
                       type: ActionType.configMethodChange,
                       payload: {
+                        engine: db.engine,
                         configuration_method:
                           CONFIGURATION_METHOD.SQLALCHEMY_URI,
+                        database_name: db.database_name,
                       },
                     })
                   }

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -339,6 +339,13 @@ export const buttonLinkStyles = css`
   text-transform: initial;
 `;
 
+export const alchemyButtonLinkStyles = (theme: SupersetTheme) => css`
+  font-weight: 400;
+  text-transform: initial;
+  padding: ${theme.gridUnit * 8}px 0 0;
+  margin-left: 0px;
+`;
+
 export const TabHeader = styled.div`
   display: flex;
   flex-direction: column;