From eb53d28f6fa9e67996284d30c3f134f3819cb471 Mon Sep 17 00:00:00 2001
From: Arash <arash.afghahi@gmail.com>
Date: Tue, 8 Jun 2021 11:07:05 -0400
Subject: [PATCH 1/5] centralized headers with conditional logic

---
 .../DatabaseModal/DatabaseConnectionForm.tsx  | 198 ++++++++++--------
 .../data/database/DatabaseModal/index.tsx     | 161 +++++++++-----
 .../data/database/DatabaseModal/styles.ts     |   2 -
 3 files changed, 208 insertions(+), 153 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
index 1eac5de10e057..dba212f69376c 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -16,18 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { FormEvent, useEvent } from 'react';
+import React, { FormEvent } from 'react';
 import { SupersetTheme, JsonObject, t } from '@superset-ui/core';
 import { InputProps } from 'antd/lib/input';
 import { Switch, Select, Button } from 'src/common/components';
 import InfoTooltip from 'src/components/InfoTooltip';
 import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput';
 import { DeleteFilled } from '@ant-design/icons';
+import Label from 'src/components/Label';
 import {
   formScrollableStyles,
   validatedFormStyles,
   CredentialInfoForm,
-  StyledFormHeader,
   toggleStyle,
   infoTooltip,
 } from './styles';
@@ -49,8 +49,12 @@ export const FormFieldOrder = [
   'credentials_info',
 ];
 
+const selectedFile = document.getElementById('selectedFile');
+
 interface FieldPropTypes {
   required: boolean;
+  onParametersChange: (value: any) => string;
+  onParametersUploadFileChange: (value: any) => string;
   changeMethods: { onParametersChange: (value: any) => string } & {
     onChange: (value: any) => string;
   } & { onParametersUploadFileChange: (value: any) => string };
@@ -59,92 +63,96 @@ interface FieldPropTypes {
   db?: DatabaseObject;
   isEditMode?: boolean;
   sslForced?: boolean;
+  uploadOption?: string | null;
+  setUploadOption: (obj: any) => void;
+  fileToUpload?: string;
+  setFileToUpload: (obj: any) => void;
 }
 
 const credentialsInfo = ({
-  required,
   changeMethods,
-  getValidation,
-  validationErrors,
-}: FieldPropTypes) => {
-  const [uploadOption, setUploadOption] = useState<string>('upload');
-  const [fileToUpload, setFileToUpload] = useState<string>(null);
-  return (
-    <CredentialInfoForm>
-      <label className="label-select">
-        How do you want to enter service account credentials?
-      </label>
-      <Select
-        defaultValue={CredentialInfoOptions.jsonUpload}
-        style={{ width: '100%' }}
-        onChange={setUploadOption}
-      >
-        <Select.Option value={CredentialInfoOptions.jsonUpload}>
-          Upload JSON file
-        </Select.Option>
-        <Select.Option value={CredentialInfoOptions.copyPaste}>
-          Copy and Paste JSON credentials
-        </Select.Option>
-      </Select>
-      {uploadOption === 'paste' ? (
-        <div className="input-container" onChange={changeMethods.onChange}>
-          <span className="label-select">Service Account</span>
-          <textarea className="input-form" name="encrypted_extra" />
-          <span className="label-paste">
-            Copy and paste the entire service account .json file here
-          </span>
-        </div>
-      ) : (
-        <div className="input-container">
-          <span className="label-select">Upload Credentials</span>
-          {!fileToUpload && (
-            <Button
-              className="input-upload-btn"
-              onClick={() => document.getElementById('selectedFile').click()}
-            >
-              Choose File
-            </Button>
-          )}
-          {fileToUpload && (
-            <div className="input-upload-current">
-              {fileToUpload}
-              <DeleteFilled
-                onClick={() => {
-                  setFileToUpload(null);
-                  changeMethods.onParametersChange({
-                    target: {
-                      name: 'encrypted_extra',
-                      value: '',
-                    },
-                  });
-                }}
-              />
-            </div>
-          )}
+  uploadOption,
+  setUploadOption,
+  fileToUpload,
+  setFileToUpload,
+}: FieldPropTypes) => (
+  <CredentialInfoForm>
+    <Label className="label-select">
+      How do you want to enter service account credentials?
+    </Label>
+    <Select
+      defaultValue={CredentialInfoOptions.jsonUpload}
+      style={{ width: '100%' }}
+      onChange={setUploadOption}
+    >
+      <Select.Option value={CredentialInfoOptions.jsonUpload}>
+        Upload JSON file
+      </Select.Option>
+      <Select.Option value={CredentialInfoOptions.copyPaste}>
+        Copy and Paste JSON credentials
+      </Select.Option>
+    </Select>
+    {uploadOption === 'paste' ? (
+      <div className="input-container" onChange={changeMethods.onChange}>
+        <span className="label-select">Service Account</span>
+        <textarea className="input-form" name="encrypted_extra" />
+        <span className="label-paste">
+          Copy and paste the entire service account .json file here
+        </span>
+      </div>
+    ) : (
+      <div className="input-container">
+        <span className="label-select">Upload Credentials</span>
+        {!fileToUpload && (
+          <Button
+            className="input-upload-btn"
+            onClick={() => selectedFile?.click()}
+          >
+            Choose File
+          </Button>
+        )}
+        {fileToUpload && (
+          <div className="input-upload-current">
+            {fileToUpload}
+            <DeleteFilled
+              onClick={() => {
+                setFileToUpload(null);
+                changeMethods.onParametersChange({
+                  target: {
+                    name: 'encrypted_extra',
+                    value: '',
+                  },
+                });
+              }}
+            />
+          </div>
+        )}
 
-          <input
-            id="selectedFile"
-            className="input-upload"
-            type="file"
-            onChange={async event => {
-              const file = event?.target?.files[0];
-              setFileToUpload(file.name);
-              changeMethods.onParametersChange({
-                target: {
-                  type: null,
-                  name: 'encrypted_extra',
-                  value: await file.text(),
-                  checked: false,
-                },
-              });
-              document.getElementById('selectedFile').value = null;
-            }}
-          />
-        </div>
-      )}
-    </CredentialInfoForm>
-  );
-};
+        <input
+          id="selectedFile"
+          className="input-upload"
+          type="file"
+          onChange={async event => {
+            let file;
+            if (event.target.files) {
+              file = event.target.files[0];
+            }
+            setFileToUpload(file?.name);
+            changeMethods.onParametersChange({
+              target: {
+                type: null,
+                name: 'encrypted_extra',
+                value: await file?.text(),
+                checked: false,
+              },
+            });
+            (selectedFile as HTMLInputElement).value = '';
+          }}
+        />
+      </div>
+    )}
+  </CredentialInfoForm>
+);
 
 const hostField = ({
   required,
@@ -306,7 +314,7 @@ const FORM_FIELD_MAP = {
 };
 
 const DatabaseConnectionForm = ({
-  dbModel: { name, parameters },
+  dbModel: { parameters },
   onParametersChange,
   onChange,
   onParametersUploadFileChange,
@@ -315,7 +323,15 @@ const DatabaseConnectionForm = ({
   db,
   isEditMode = false,
   sslForced,
+  uploadOption,
+  setUploadOption,
+  fileToUpload,
+  setFileToUpload,
 }: {
+  uploadOption: string;
+  setUploadOption: (obj: string) => void;
+  fileToUpload: string | null;
+  setFileToUpload: (obj: string | null) => void;
   isEditMode?: boolean;
   sslForced: boolean;
   dbModel: DatabaseForm;
@@ -326,21 +342,13 @@ const DatabaseConnectionForm = ({
   onChange: (
     event: FormEvent<InputProps> | { target: HTMLInputElement },
   ) => void;
-  onParametersUploadFileChange: (
+  onParametersUploadFileChange?: (
     event: FormEvent<InputProps> | { target: HTMLInputElement },
   ) => void;
   validationErrors: JsonObject | null;
   getValidation: () => void;
 }) => (
   <>
-    {!isEditMode && (
-      <StyledFormHeader>
-        <h4>Enter the required {name} credentials</h4>
-        <p className="helper">
-          Need help? Learn more about connecting to {name}.
-        </p>
-      </StyledFormHeader>
-    )}
     <div
       // @ts-ignore
       css={(theme: SupersetTheme) => [
@@ -367,6 +375,10 @@ const DatabaseConnectionForm = ({
             key: field,
             isEditMode,
             sslForced,
+            uploadOption,
+            setUploadOption,
+            fileToUpload,
+            setFileToUpload,
           }),
         )}
     </div>
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 a3221f76750a1..b11b8683163f2 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -47,6 +47,7 @@ import {
   DatabaseForm,
   CONFIGURATION_METHOD,
 } from 'src/views/CRUD/data/database/types';
+import Label from 'src/components/Label';
 import ExtraOptions from './ExtraOptions';
 import SqlAlchemyForm from './SqlAlchemyForm';
 import DatabaseConnectionForm from './DatabaseConnectionForm';
@@ -232,6 +233,15 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     t('database'),
     addDangerToast,
   );
+  const [uploadOption, setUploadOption] = useState<string>('upload');
+  const [fileToUpload, setFileToUpload] = useState<string | null>(null);
+
+  const dbModel: DatabaseForm =
+    availableDbs?.databases?.find(
+      (available: { engine: string | undefined }) =>
+        // TODO: we need a centralized engine in one place
+        available.engine === db?.engine || db?.backend,
+    ) || {};
 
   // Test Connection logic
   const testConnection = () => {
@@ -365,6 +375,65 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     </div>
   );
 
+  const renderModalHeader = () => {
+    if (isEditMode) {
+      return (
+        <>
+          <EditHeaderTitle>{db?.backend}</EditHeaderTitle>
+          <EditHeaderSubtitle>{dbName}</EditHeaderSubtitle>
+        </>
+      );
+    }
+    if (useSqlAlchemyForm) {
+      return (
+        <>
+          <p className="helper"> Step 2 of 2 </p>
+          <CreateHeaderTitle>Enter Primary Credentials</CreateHeaderTitle>
+          <CreateHeaderSubtitle>
+            Need help? Learn how to connect your database{' '}
+            <a
+              href={DOCUMENTATION_LINK}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              here
+            </a>
+            .
+          </CreateHeaderSubtitle>
+        </>
+      );
+    }
+    if (!isLoading && !db) {
+      return (
+        <StyledFormHeader>
+          <div className="select-db">
+            <p className="helper"> Step 1 of 3 </p>
+            <h4>Select a database to connect</h4>
+          </div>
+        </StyledFormHeader>
+      );
+    }
+    if (!isEditMode && db && !isLoading && !hasConnectedDb) {
+      return (
+        <StyledFormHeader>
+          <p className="helper"> Step 2 of 3 </p>
+          <h4>Enter the required {dbModel.name} credentials</h4>
+          <p className="helper">
+            Need help? Learn more about connecting to {dbModel.name}.
+          </p>
+        </StyledFormHeader>
+      );
+    }
+    if (hasConnectedDb) {
+      return (
+        <StyledFormHeader>
+          <p className="helper"> Step 3 of 3 </p>
+        </StyledFormHeader>
+      );
+    }
+    return <></>;
+  };
+
   const renderModalFooter = () =>
     db // if db show back + connect
       ? [
@@ -419,13 +488,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     setTabKey(key);
   };
 
-  const dbModel: DatabaseForm =
-    availableDbs?.databases?.find(
-      (available: { engine: string | undefined }) =>
-        // TODO: we need a centralized engine in one place
-        available.engine === db?.engine || db?.backend,
-    ) || {};
-
   return useTabLayout ? (
     <Modal
       css={(theme: SupersetTheme) => [
@@ -447,31 +509,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       }
       footer={renderModalFooter()}
     >
-      {isEditMode && (
-        <TabHeader>
-          <EditHeaderTitle>{db?.backend}</EditHeaderTitle>
-          <EditHeaderSubtitle>{dbName}</EditHeaderSubtitle>
-        </TabHeader>
-      )}
-      {/* Show Legacy Header */}
-      {useSqlAlchemyForm && (
-        <TabHeader>
-          <p className="helper"> Step 2 of 2 </p>
-          <CreateHeaderTitle>Enter Primary Credentials</CreateHeaderTitle>
-          <CreateHeaderSubtitle>
-            Need help? Learn how to connect your database{' '}
-            <a
-              href={DOCUMENTATION_LINK}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              here
-            </a>
-            .
-          </CreateHeaderSubtitle>
-        </TabHeader>
-      )}
-      {/* Add styled header here when not in edit mode */}
+      <TabHeader>{renderModalHeader()}</TabHeader>
       <hr />
       <Tabs
         defaultActiveKey={DEFAULT_TAB_KEY}
@@ -516,6 +554,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               }
               getValidation={() => getValidation(db)}
               validationErrors={validationErrors}
+              uploadOption={uploadOption}
+              setUploadOption={setUploadOption}
+              fileToUpload={fileToUpload}
+              setFileToUpload={setFileToUpload}
             />
           )}
           {!isEditMode && (
@@ -585,37 +627,35 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       footer={renderModalFooter()}
     >
       {hasConnectedDb ? (
-        <ExtraOptions
-          db={db as DatabaseObject}
-          onInputChange={({ target }: { target: HTMLInputElement }) =>
-            onChange(ActionType.inputChange, {
-              type: target.type,
-              name: target.name,
-              checked: target.checked,
-              value: target.value,
-            })
-          }
-          onTextChange={({ target }: { target: HTMLTextAreaElement }) =>
-            onChange(ActionType.textChange, {
-              name: target.name,
-              value: target.value,
-            })
-          }
-          onEditorChange={(payload: { name: string; json: any }) =>
-            onChange(ActionType.editorChange, payload)
-          }
-        />
+        <>
+          {renderModalHeader()}
+          <ExtraOptions
+            db={db as DatabaseObject}
+            onInputChange={({ target }: { target: HTMLInputElement }) =>
+              onChange(ActionType.inputChange, {
+                type: target.type,
+                name: target.name,
+                checked: target.checked,
+                value: target.value,
+              })
+            }
+            onTextChange={({ target }: { target: HTMLTextAreaElement }) =>
+              onChange(ActionType.textChange, {
+                name: target.name,
+                value: target.value,
+              })
+            }
+            onEditorChange={(payload: { name: string; json: any }) =>
+              onChange(ActionType.editorChange, payload)
+            }
+          />
+        </>
       ) : (
         <>
           {/* Step 1 */}
           {!isLoading && !db && (
             <SelectDatabaseStyles>
-              <StyledFormHeader>
-                <div className="select-db">
-                  <p className="helper"> Step 1 of 3 </p>
-                  <h4>Select a database to connect</h4>
-                </div>
-              </StyledFormHeader>
+              {renderModalHeader()}
               {renderPreferredSelector()}
               {renderAvailableSelector()}
             </SelectDatabaseStyles>
@@ -625,6 +665,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           {/* Step 2 */}
           {!isLoading && db && (
             <>
+              {renderModalHeader()}
               <DatabaseConnectionForm
                 db={db}
                 sslForced={sslForced}
@@ -649,6 +690,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 }
                 getValidation={() => getValidation(db)}
                 validationErrors={validationErrors}
+                uploadOption={uploadOption}
+                setUploadOption={setUploadOption}
+                fileToUpload={fileToUpload}
+                setFileToUpload={setFileToUpload}
               />
 
               <Button
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
index a8fd9476a4558..65cccaaac676a 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -405,8 +405,6 @@ export const CredentialInfoForm = styled.div`
   }`;
 
 export const SelectDatabaseStyles = styled.div`
-  margin: 0 ${({ theme }) => theme.gridUnit * 8}px;
-
   .preferred {
     display: flex;
     flex-wrap: wrap;

From 08571d4dadb7e60bdc7caaeb858ae6c7ede773b3 Mon Sep 17 00:00:00 2001
From: Elizabeth Thompson <eschutho@gmail.com>
Date: Tue, 8 Jun 2021 19:39:54 -0700
Subject: [PATCH 2/5] move header to separate file

---
 .../database/DatabaseModal/ModalHeader.tsx    | 108 +++++++++
 .../data/database/DatabaseModal/index.tsx     | 223 ++++++++----------
 2 files changed, 203 insertions(+), 128 deletions(-)
 create mode 100644 superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
new file mode 100644
index 0000000000000..a052a9248f551
--- /dev/null
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
@@ -0,0 +1,108 @@
+/**
+ * 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 {
+  EditHeaderTitle,
+  EditHeaderSubtitle,
+  CreateHeaderTitle,
+  CreateHeaderSubtitle,
+  StyledFormHeader,
+} from './styles';
+import { DatabaseForm, DatabaseObject } from '../types';
+
+export const DOCUMENTATION_LINK =
+  'https://superset.apache.org/docs/databases/installing-database-drivers';
+
+const ModalHeader = ({
+  isLoading,
+  isEditMode,
+  useSqlAlchemyForm,
+  hasConnectedDb,
+  db,
+  dbName,
+  dbModel,
+}: {
+  isLoading: boolean;
+  isEditMode: boolean;
+  useSqlAlchemyForm: boolean;
+  hasConnectedDb: boolean;
+  db: Partial<DatabaseObject> | null;
+  dbName: string;
+  dbModel: DatabaseForm;
+}) => {
+  const isEditHeader = (
+    <>
+      <EditHeaderTitle>{db?.backend}</EditHeaderTitle>
+      <EditHeaderSubtitle>{dbName}</EditHeaderSubtitle>
+    </>
+  );
+  const useSqlAlchemyFormHeader = (
+    <>
+      <p className="helper"> Step 2 of 2 </p>
+      <CreateHeaderTitle>Enter Primary Credentials</CreateHeaderTitle>
+      <CreateHeaderSubtitle>
+        Need help? Learn how to connect your database{' '}
+        <a href={DOCUMENTATION_LINK} target="_blank" rel="noopener noreferrer">
+          here
+        </a>
+        .
+      </CreateHeaderSubtitle>
+    </>
+  );
+  const hasConnectedDbHeader = (
+    <StyledFormHeader>
+      <p className="helper"> Step 3 of 3 </p>
+    </StyledFormHeader>
+  );
+  const hasDbHeader = (
+    <StyledFormHeader>
+      <p className="helper"> Step 2 of 3 </p>
+      <h4>Enter the required {dbModel.name} credentials</h4>
+      <p className="helper">
+        Need help? Learn more about connecting to {dbModel.name}.
+      </p>
+    </StyledFormHeader>
+  );
+  const noDbHeader = (
+    <StyledFormHeader>
+      <div className="select-db">
+        <p className="helper"> Step 1 of 3 </p>
+        <h4>Select a database to connect</h4>
+      </div>
+    </StyledFormHeader>
+  );
+
+  if (isLoading) return <></>;
+  if (isEditMode) {
+    return isEditHeader;
+  }
+  if (useSqlAlchemyForm) {
+    return useSqlAlchemyFormHeader;
+  }
+  if (hasConnectedDb) {
+    return hasConnectedDbHeader;
+  }
+  if (db) {
+    return hasDbHeader;
+  }
+  return noDbHeader;
+};
+
+export default ModalHeader;
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 b11b8683163f2..fc039f25ed13f 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -58,19 +58,12 @@ import {
   antDTabsStyles,
   buttonLinkStyles,
   TabHeader,
-  CreateHeaderSubtitle,
-  CreateHeaderTitle,
-  EditHeaderSubtitle,
-  EditHeaderTitle,
   formHelperStyles,
   formStyles,
   StyledBasicTab,
   SelectDatabaseStyles,
-  StyledFormHeader,
 } from './styles';
-
-const DOCUMENTATION_LINK =
-  'https://superset.apache.org/docs/databases/installing-database-drivers';
+import ModalHeader, { DOCUMENTATION_LINK } from './ModalHeader';
 
 interface DatabaseModalProps {
   addDangerToast: (msg: string) => void;
@@ -375,65 +368,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     </div>
   );
 
-  const renderModalHeader = () => {
-    if (isEditMode) {
-      return (
-        <>
-          <EditHeaderTitle>{db?.backend}</EditHeaderTitle>
-          <EditHeaderSubtitle>{dbName}</EditHeaderSubtitle>
-        </>
-      );
-    }
-    if (useSqlAlchemyForm) {
-      return (
-        <>
-          <p className="helper"> Step 2 of 2 </p>
-          <CreateHeaderTitle>Enter Primary Credentials</CreateHeaderTitle>
-          <CreateHeaderSubtitle>
-            Need help? Learn how to connect your database{' '}
-            <a
-              href={DOCUMENTATION_LINK}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              here
-            </a>
-            .
-          </CreateHeaderSubtitle>
-        </>
-      );
-    }
-    if (!isLoading && !db) {
-      return (
-        <StyledFormHeader>
-          <div className="select-db">
-            <p className="helper"> Step 1 of 3 </p>
-            <h4>Select a database to connect</h4>
-          </div>
-        </StyledFormHeader>
-      );
-    }
-    if (!isEditMode && db && !isLoading && !hasConnectedDb) {
-      return (
-        <StyledFormHeader>
-          <p className="helper"> Step 2 of 3 </p>
-          <h4>Enter the required {dbModel.name} credentials</h4>
-          <p className="helper">
-            Need help? Learn more about connecting to {dbModel.name}.
-          </p>
-        </StyledFormHeader>
-      );
-    }
-    if (hasConnectedDb) {
-      return (
-        <StyledFormHeader>
-          <p className="helper"> Step 3 of 3 </p>
-        </StyledFormHeader>
-      );
-    }
-    return <></>;
-  };
-
   const renderModalFooter = () =>
     db // if db show back + connect
       ? [
@@ -509,7 +443,17 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       }
       footer={renderModalFooter()}
     >
-      <TabHeader>{renderModalHeader()}</TabHeader>
+      <TabHeader>
+        <ModalHeader
+          isLoading={isLoading}
+          isEditMode={isEditMode}
+          useSqlAlchemyForm={useSqlAlchemyForm}
+          hasConnectedDb={hasConnectedDb}
+          db={db}
+          dbName={dbName}
+          dbModel={dbModel}
+        />
+      </TabHeader>
       <hr />
       <Tabs
         defaultActiveKey={DEFAULT_TAB_KEY}
@@ -628,7 +572,16 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     >
       {hasConnectedDb ? (
         <>
-          {renderModalHeader()}
+          <ModalHeader
+            isLoading={isLoading}
+            isEditMode={isEditMode}
+            useSqlAlchemyForm={useSqlAlchemyForm}
+            hasConnectedDb={hasConnectedDb}
+            db={db}
+            dbName={dbName}
+            dbModel={dbModel}
+          />
+
           <ExtraOptions
             db={db as DatabaseObject}
             onInputChange={({ target }: { target: HTMLInputElement }) =>
@@ -653,66 +606,80 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       ) : (
         <>
           {/* Step 1 */}
-          {!isLoading && !db && (
-            <SelectDatabaseStyles>
-              {renderModalHeader()}
-              {renderPreferredSelector()}
-              {renderAvailableSelector()}
-            </SelectDatabaseStyles>
-          )}
-          {/* Step 1 */}
+          {!isLoading &&
+            (!db ? (
+              <SelectDatabaseStyles>
+                <ModalHeader
+                  isLoading={isLoading}
+                  isEditMode={isEditMode}
+                  useSqlAlchemyForm={useSqlAlchemyForm}
+                  hasConnectedDb={hasConnectedDb}
+                  db={db}
+                  dbName={dbName}
+                  dbModel={dbModel}
+                />
+                {renderPreferredSelector()}
+                {renderAvailableSelector()}
+              </SelectDatabaseStyles>
+            ) : (
+              <>
+                <ModalHeader
+                  isLoading={isLoading}
+                  isEditMode={isEditMode}
+                  useSqlAlchemyForm={useSqlAlchemyForm}
+                  hasConnectedDb={hasConnectedDb}
+                  db={db}
+                  dbName={dbName}
+                  dbModel={dbModel}
+                />
+                <DatabaseConnectionForm
+                  db={db}
+                  sslForced={sslForced}
+                  dbModel={dbModel}
+                  onParametersChange={({
+                    target,
+                  }: {
+                    target: HTMLInputElement;
+                  }) =>
+                    onChange(ActionType.parametersChange, {
+                      type: target.type,
+                      name: target.name,
+                      checked: target.checked,
+                      value: target.value,
+                    })
+                  }
+                  onChange={({ target }: { target: HTMLInputElement }) =>
+                    onChange(ActionType.textChange, {
+                      name: target.name,
+                      value: target.value,
+                    })
+                  }
+                  getValidation={() => getValidation(db)}
+                  validationErrors={validationErrors}
+                  uploadOption={uploadOption}
+                  setUploadOption={setUploadOption}
+                  fileToUpload={fileToUpload}
+                  setFileToUpload={setFileToUpload}
+                />
 
-          {/* Step 2 */}
-          {!isLoading && db && (
-            <>
-              {renderModalHeader()}
-              <DatabaseConnectionForm
-                db={db}
-                sslForced={sslForced}
-                dbModel={dbModel}
-                onParametersChange={({
-                  target,
-                }: {
-                  target: HTMLInputElement;
-                }) =>
-                  onChange(ActionType.parametersChange, {
-                    type: target.type,
-                    name: target.name,
-                    checked: target.checked,
-                    value: target.value,
-                  })
-                }
-                onChange={({ target }: { target: HTMLInputElement }) =>
-                  onChange(ActionType.textChange, {
-                    name: target.name,
-                    value: target.value,
-                  })
-                }
-                getValidation={() => getValidation(db)}
-                validationErrors={validationErrors}
-                uploadOption={uploadOption}
-                setUploadOption={setUploadOption}
-                fileToUpload={fileToUpload}
-                setFileToUpload={setFileToUpload}
-              />
-
-              <Button
-                buttonStyle="link"
-                onClick={() =>
-                  setDB({
-                    type: ActionType.configMethodChange,
-                    payload: {
-                      configuration_method: CONFIGURATION_METHOD.SQLALCHEMY_URI,
-                    },
-                  })
-                }
-                css={buttonLinkStyles}
-              >
-                Connect this database with a SQLAlchemy URI string instead
-              </Button>
-              {/* Step 2 */}
-            </>
-          )}
+                <Button
+                  buttonStyle="link"
+                  onClick={() =>
+                    setDB({
+                      type: ActionType.configMethodChange,
+                      payload: {
+                        configuration_method:
+                          CONFIGURATION_METHOD.SQLALCHEMY_URI,
+                      },
+                    })
+                  }
+                  css={buttonLinkStyles}
+                >
+                  Connect this database with a SQLAlchemy URI string instead
+                </Button>
+                {/* Step 2 */}
+              </>
+            ))}
         </>
       )}
     </Modal>

From 7e040bfec148f929354e8bf8b90df4988f7290b7 Mon Sep 17 00:00:00 2001
From: hughhhh <hughmil3s@gmail.com>
Date: Wed, 9 Jun 2021 15:44:08 -0400
Subject: [PATCH 3/5] working big query form with arash updates

---
 .../DatabaseModal/DatabaseConnectionForm.tsx       | 14 +++++++-------
 .../CRUD/data/database/DatabaseModal/index.tsx     |  1 -
 .../CRUD/data/database/DatabaseModal/styles.ts     |  2 +-
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
index 1b0a1f8f85789..1750c7ad90ff9 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -23,7 +23,7 @@ import { Switch, Select, Button } from 'src/common/components';
 import InfoTooltip from 'src/components/InfoTooltip';
 import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput';
 import { DeleteFilled } from '@ant-design/icons';
-import Label from 'src/components/Label';
+import { SelectValue } from 'src/filters/components/Select/types';
 import {
   formScrollableStyles,
   validatedFormStyles,
@@ -70,19 +70,19 @@ interface FieldPropTypes {
 }
 
 const CredentialsInfo = ({ changeMethods }: FieldPropTypes) => {
-  const [uploadOption, setUploadOption] = useState<string>('upload');
+  const [uploadOption, setUploadOption] = useState<SelectValue | number>(0);
   const [fileToUpload, setFileToUpload] = useState<string | null | undefined>(
     null,
   );
   return (
     <CredentialInfoForm>
-      <Label className="label-select">
+      <span className="label-select">
         How do you want to enter service account credentials?
-      </Label>
+      </span>
       <Select
         defaultValue={CredentialInfoOptions.jsonUpload}
         style={{ width: '100%' }}
-        onChange={setUploadOption}
+        onChange={option => setUploadOption(option)}
       >
         <Select.Option value={CredentialInfoOptions.jsonUpload}>
           Upload JSON file
@@ -91,7 +91,7 @@ const CredentialsInfo = ({ changeMethods }: FieldPropTypes) => {
           Copy and Paste JSON credentials
         </Select.Option>
       </Select>
-      {uploadOption === 'paste' ? (
+      {uploadOption === CredentialInfoOptions.copyPaste ? (
         <div className="input-container" onChange={changeMethods.onChange}>
           <span className="label-select">Service Account</span>
           <textarea className="input-form" name="encrypted_extra" />
@@ -105,7 +105,7 @@ const CredentialsInfo = ({ changeMethods }: FieldPropTypes) => {
           {!fileToUpload && (
             <Button
               className="input-upload-btn"
-              onClick={() => selectedFile?.click()}
+              onClick={() => document?.getElementById('selectedFile').click()}
             >
               Choose File
             </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 568f55731315b..db063772d4772 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -48,7 +48,6 @@ import {
   DatabaseForm,
   CONFIGURATION_METHOD,
 } from 'src/views/CRUD/data/database/types';
-import Label from 'src/components/Label';
 import ExtraOptions from './ExtraOptions';
 import SqlAlchemyForm from './SqlAlchemyForm';
 import DatabaseConnectionForm from './DatabaseConnectionForm';
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
index 65cccaaac676a..00badbb285927 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -369,7 +369,7 @@ export const CredentialInfoForm = styled.div`
     text-transform: uppercase;
     color: ${({ theme }) => theme.colors.grayscale.dark1};
     font-size: 11px;
-    margin: 0 0 ${({ theme }) => theme.gridUnit * 2}px;
+    margin: 0 5px ${({ theme }) => theme.gridUnit * 2}px;
   }
 
   .label-paste {

From bb6c981167e477057cb5fc2fb239ec86f0e3bd18 Mon Sep 17 00:00:00 2001
From: Arash <arash.afghahi@gmail.com>
Date: Wed, 9 Jun 2021 17:39:41 -0400
Subject: [PATCH 4/5] revisions

---
 .../DatabaseModal/DatabaseConnectionForm.tsx  |  9 ++-----
 .../database/DatabaseModal/ModalHeader.tsx    | 26 +++++++++++++++++++
 .../src/views/CRUD/data/database/types.ts     |  1 +
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
index 1750c7ad90ff9..b7b217db4482c 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -23,7 +23,6 @@ import { Switch, Select, Button } from 'src/common/components';
 import InfoTooltip from 'src/components/InfoTooltip';
 import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput';
 import { DeleteFilled } from '@ant-design/icons';
-import { SelectValue } from 'src/filters/components/Select/types';
 import {
   formScrollableStyles,
   validatedFormStyles,
@@ -63,14 +62,10 @@ interface FieldPropTypes {
   db?: DatabaseObject;
   isEditMode?: boolean;
   sslForced?: boolean;
-  uploadOption?: string | null;
-  setUploadOption: (obj: any) => void;
-  fileToUpload?: string;
-  setFileToUpload: (obj: any) => void;
 }
 
 const CredentialsInfo = ({ changeMethods }: FieldPropTypes) => {
-  const [uploadOption, setUploadOption] = useState<SelectValue | number>(0);
+  const [uploadOption, setUploadOption] = useState<number>(0);
   const [fileToUpload, setFileToUpload] = useState<string | null | undefined>(
     null,
   );
@@ -105,7 +100,7 @@ const CredentialsInfo = ({ changeMethods }: FieldPropTypes) => {
           {!fileToUpload && (
             <Button
               className="input-upload-btn"
-              onClick={() => document?.getElementById('selectedFile').click()}
+              onClick={() => document?.getElementById('selectedFile')?.click()}
             >
               Choose File
             </Button>
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
index a052a9248f551..ac8e2ad04d98a 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
@@ -30,6 +30,18 @@ import { DatabaseForm, DatabaseObject } from '../types';
 export const DOCUMENTATION_LINK =
   'https://superset.apache.org/docs/databases/installing-database-drivers';
 
+const irregularDocumentationLinks = {
+  postgresql: 'https://superset.apache.org/docs/databases/postgres',
+  mssql: 'https://superset.apache.org/docs/databases/sql-server',
+};
+
+const documentationLink = (engine: string | undefined) => {
+  if (!engine) return null;
+  if (!irregularDocumentationLinks[engine]) {
+    return `https://superset.apache.org/docs/databases/${engine}`;
+  }
+  return irregularDocumentationLinks[engine];
+};
 const ModalHeader = ({
   isLoading,
   isEditMode,
@@ -69,6 +81,20 @@ const ModalHeader = ({
   const hasConnectedDbHeader = (
     <StyledFormHeader>
       <p className="helper"> Step 3 of 3 </p>
+      <h4>
+        Your database was successfully connected! Here are some optional
+        settings for your database
+      </h4>
+      <p className="helper">
+        Need help? Learn more about{' '}
+        <a
+          href={documentationLink(db?.engine)}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          connecting to {dbModel.name}
+        </a>
+      </p>
     </StyledFormHeader>
   );
   const hasDbHeader = (
diff --git a/superset-frontend/src/views/CRUD/data/database/types.ts b/superset-frontend/src/views/CRUD/data/database/types.ts
index f611dd76cea97..8c0264116da17 100644
--- a/superset-frontend/src/views/CRUD/data/database/types.ts
+++ b/superset-frontend/src/views/CRUD/data/database/types.ts
@@ -38,6 +38,7 @@ export type DatabaseObject = {
     username?: string;
     password?: string;
     encryption?: boolean;
+    query?: string;
   };
   configuration_method: CONFIGURATION_METHOD;
   engine?: string;

From 9fb68e0c09dd97ae7ce795657db070d8d0fb78f8 Mon Sep 17 00:00:00 2001
From: Arash <arash.afghahi@gmail.com>
Date: Wed, 9 Jun 2021 20:48:30 -0400
Subject: [PATCH 5/5] merged pexdax and then pushed

---
 .../data/database/DatabaseModal/DatabaseConnectionForm.tsx    | 2 +-
 .../src/views/CRUD/data/database/DatabaseModal/index.tsx      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
index c331f28a7d169..0906a6cf71914 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -282,7 +282,7 @@ const queryField = ({
     id="query"
     name="query"
     required={required}
-    value={db?.query}
+    value={db?.parameters?.query}
     validationMethods={{ onBlur: getValidation }}
     errorMessage={validationErrors?.query}
     placeholder="e.g. additional parameters"
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 39aa0f1aef67f..de70d02b04c61 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -282,10 +282,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           credentials_info: JSON.parse(update.encrypted_extra),
         });
       }
-      if (update.parameters.query) {
+      if (update?.parameters?.query) {
         // convert query params into dictionary
         update.parameters.query = JSON.parse(
-          `{"${decodeURI(db.parameters.query || '')
+          `{"${decodeURI(db.parameters?.query || '')
             .replace(/"/g, '\\"')
             .replace(/&/g, '","')
             .replace(/=/g, '":"')}"}`,