From bf0131e70f0520cd08d7cc226250ee53e9196b32 Mon Sep 17 00:00:00 2001
From: andrewbastian <andrewbastian@hosaka-deck.lan>
Date: Mon, 14 Jun 2021 20:25:54 -0700
Subject: [PATCH 01/18] Added tooltips. Still need to place in the right spot.

---
 .../DatabaseModal/DatabaseConnectionForm.tsx  | 97 ++++++++++++-------
 1 file changed, 61 insertions(+), 36 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 0906a6cf71914..6bef3f044cc9b 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -198,18 +198,29 @@ const databaseField = ({
   validationErrors,
   db,
 }: FieldPropTypes) => (
-  <ValidatedInput
-    id="database"
-    name="database"
-    required={required}
-    value={db?.parameters?.database}
-    validationMethods={{ onBlur: getValidation }}
-    errorMessage={validationErrors?.database}
-    placeholder="e.g. world_population"
-    label="Database name"
-    onChange={changeMethods.onParametersChange}
-    helpText="Copy the name of the  database you are trying to connect to."
-  />
+  <div
+    style={{ border: '2px solid red' }}
+    css={(theme: SupersetTheme) => infoTooltip(theme)}
+  >
+    <InfoTooltip
+      tooltip={t('Copy the name of the database you are trying to connect to.')}
+      placement="left"
+    />
+
+    <ValidatedInput
+      style={{ border: '2px solid green' }}
+      id="database"
+      name="database"
+      required={required}
+      value={db?.parameters?.database}
+      validationMethods={{ onBlur: getValidation }}
+      errorMessage={validationErrors?.database}
+      placeholder="e.g. world_population"
+      label="Database name"
+      onChange={changeMethods.onParametersChange}
+      helpText="Copy the name of the  database you are trying to connect to."
+    />
+  </div>
 );
 const usernameField = ({
   required,
@@ -257,18 +268,26 @@ const displayField = ({
   validationErrors,
   db,
 }: FieldPropTypes) => (
-  <ValidatedInput
-    id="database_name"
-    name="database_name"
-    required={required}
-    value={db?.database_name}
-    validationMethods={{ onBlur: getValidation }}
-    errorMessage={validationErrors?.database_name}
-    placeholder=""
-    label="Display Name"
-    onChange={changeMethods.onChange}
-    helpText="Pick a nickname for this database to display as in Superset."
-  />
+  <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
+    <InfoTooltip
+      tooltip={t(
+        'Pick a nickname for this database to display as in Superset.',
+      )}
+      placement="rightBottom"
+    />
+    <ValidatedInput
+      id="database_name"
+      name="database_name"
+      required={required}
+      value={db?.database_name}
+      validationMethods={{ onBlur: getValidation }}
+      errorMessage={validationErrors?.database_name}
+      placeholder=""
+      label="Display Name"
+      onChange={changeMethods.onChange}
+      helpText="Pick a nickname for this database to display as in Superset."
+    />
+  </div>
 );
 
 const queryField = ({
@@ -278,18 +297,24 @@ const queryField = ({
   validationErrors,
   db,
 }: FieldPropTypes) => (
-  <ValidatedInput
-    id="query"
-    name="query"
-    required={required}
-    value={db?.parameters?.query}
-    validationMethods={{ onBlur: getValidation }}
-    errorMessage={validationErrors?.query}
-    placeholder="e.g. additional parameters"
-    label="Additional Parameters"
-    onChange={changeMethods.onParametersChange}
-    helpText="Add additional custom parameters"
-  />
+  <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
+    <InfoTooltip
+      tooltip={t('Add additional custom parameters')}
+      placement="rightBottom"
+    />
+    <ValidatedInput
+      id="query"
+      name="query"
+      required={required}
+      value={db?.parameters?.query}
+      validationMethods={{ onBlur: getValidation }}
+      errorMessage={validationErrors?.query}
+      placeholder="e.g. additional parameters"
+      label="Additional Parameters"
+      onChange={changeMethods.onParametersChange}
+      helpText="Add additional custom parameters"
+    />
+  </div>
 );
 
 const forceSSLField = ({

From 69682a9642de03cfb6579b99d35efa08e7879e30 Mon Sep 17 00:00:00 2001
From: andrewbastian <andrewbastian@hosaka-deck.lan>
Date: Tue, 15 Jun 2021 10:43:09 -0700
Subject: [PATCH 02/18] Revert to where I started.

---
 .../DatabaseModal/DatabaseConnectionForm.tsx  | 97 +++++++------------
 1 file changed, 36 insertions(+), 61 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 6bef3f044cc9b..0906a6cf71914 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -198,29 +198,18 @@ const databaseField = ({
   validationErrors,
   db,
 }: FieldPropTypes) => (
-  <div
-    style={{ border: '2px solid red' }}
-    css={(theme: SupersetTheme) => infoTooltip(theme)}
-  >
-    <InfoTooltip
-      tooltip={t('Copy the name of the database you are trying to connect to.')}
-      placement="left"
-    />
-
-    <ValidatedInput
-      style={{ border: '2px solid green' }}
-      id="database"
-      name="database"
-      required={required}
-      value={db?.parameters?.database}
-      validationMethods={{ onBlur: getValidation }}
-      errorMessage={validationErrors?.database}
-      placeholder="e.g. world_population"
-      label="Database name"
-      onChange={changeMethods.onParametersChange}
-      helpText="Copy the name of the  database you are trying to connect to."
-    />
-  </div>
+  <ValidatedInput
+    id="database"
+    name="database"
+    required={required}
+    value={db?.parameters?.database}
+    validationMethods={{ onBlur: getValidation }}
+    errorMessage={validationErrors?.database}
+    placeholder="e.g. world_population"
+    label="Database name"
+    onChange={changeMethods.onParametersChange}
+    helpText="Copy the name of the  database you are trying to connect to."
+  />
 );
 const usernameField = ({
   required,
@@ -268,26 +257,18 @@ const displayField = ({
   validationErrors,
   db,
 }: FieldPropTypes) => (
-  <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
-    <InfoTooltip
-      tooltip={t(
-        'Pick a nickname for this database to display as in Superset.',
-      )}
-      placement="rightBottom"
-    />
-    <ValidatedInput
-      id="database_name"
-      name="database_name"
-      required={required}
-      value={db?.database_name}
-      validationMethods={{ onBlur: getValidation }}
-      errorMessage={validationErrors?.database_name}
-      placeholder=""
-      label="Display Name"
-      onChange={changeMethods.onChange}
-      helpText="Pick a nickname for this database to display as in Superset."
-    />
-  </div>
+  <ValidatedInput
+    id="database_name"
+    name="database_name"
+    required={required}
+    value={db?.database_name}
+    validationMethods={{ onBlur: getValidation }}
+    errorMessage={validationErrors?.database_name}
+    placeholder=""
+    label="Display Name"
+    onChange={changeMethods.onChange}
+    helpText="Pick a nickname for this database to display as in Superset."
+  />
 );
 
 const queryField = ({
@@ -297,24 +278,18 @@ const queryField = ({
   validationErrors,
   db,
 }: FieldPropTypes) => (
-  <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
-    <InfoTooltip
-      tooltip={t('Add additional custom parameters')}
-      placement="rightBottom"
-    />
-    <ValidatedInput
-      id="query"
-      name="query"
-      required={required}
-      value={db?.parameters?.query}
-      validationMethods={{ onBlur: getValidation }}
-      errorMessage={validationErrors?.query}
-      placeholder="e.g. additional parameters"
-      label="Additional Parameters"
-      onChange={changeMethods.onParametersChange}
-      helpText="Add additional custom parameters"
-    />
-  </div>
+  <ValidatedInput
+    id="query"
+    name="query"
+    required={required}
+    value={db?.parameters?.query}
+    validationMethods={{ onBlur: getValidation }}
+    errorMessage={validationErrors?.query}
+    placeholder="e.g. additional parameters"
+    label="Additional Parameters"
+    onChange={changeMethods.onParametersChange}
+    helpText="Add additional custom parameters"
+  />
 );
 
 const forceSSLField = ({

From dbf8770650ddcdfca481139b5ca7f9765b798d3c Mon Sep 17 00:00:00 2001
From: andrewbastian <andrew.bastian@gmail.com>
Date: Tue, 15 Jun 2021 12:54:10 -0700
Subject: [PATCH 03/18] Added 3 tooltips, 1 Button(need link config). BigQuery
 not added yet.

---
 .../DatabaseModal/DatabaseConnectionForm.tsx  |  2 +-
 .../database/DatabaseModal/SqlAlchemyForm.tsx | 27 +++++++++++-
 .../data/database/DatabaseModal/index.tsx     | 42 +++++++++++--------
 3 files changed, 52 insertions(+), 19 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 0906a6cf71914..5af1ebe4e067b 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -315,7 +315,7 @@ const forceSSLField = ({
     />
     <span css={toggleStyle}>SSL</span>
     <InfoTooltip
-      tooltip={t('SSL will be enabled in the database connection')}
+      tooltip={t('SSL Mode "require" will be used.')}
       placement="bottomRight"
     />
   </div>
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx
index 57105ebe89faa..38dfc3c8f0327 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx
@@ -19,7 +19,8 @@
 import React, { EventHandler, ChangeEvent, MouseEvent } from 'react';
 import { t, SupersetTheme } from '@superset-ui/core';
 import Button from 'src/components/Button';
-import { StyledInputContainer, wideButton } from './styles';
+import InfoTooltip from 'src/components/InfoTooltip'
+import { StyledInputContainer, wideButton, infoTooltip, buttonLinkStyles} from './styles';
 
 import { DatabaseObject } from '../types';
 
@@ -92,6 +93,30 @@ const SqlAlchemyTab = ({
     >
       {t('Test connection')}
     </Button>
+      {/*Button link needs config. Commented code taken from ./index.tsx */}
+      <div css={(theme: SupersetTheme)=> infoTooltip(theme)}>
+          <Button
+              buttonStyle="link"
+              onClick={() =>
+                alert('Fix this link and delete line 101 in ./SqlAlchemyForm.tsx')
+                  
+              //    setDB({
+              //        type: ActionType.configMethodChange,
+              //        payload: {
+              //            configuration_method:
+              //            CONFIGURATION_METHOD.????????????
+              //},
+              //})
+              
+              }
+              css={buttonLinkStyles}
+          >
+          Connect this database using the dynamic form instead 
+              <InfoTooltip
+                  tooltip={t('Click this link to switch to an alternate form that exposes only the required fields needed to connect this database.')}
+            />
+          </Button>
+      </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 157109d607b50..a1999ddbc9728 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -1,7 +1,7 @@
 /**
  * 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
+placement* 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
@@ -34,6 +34,7 @@ import { Alert, Select } from 'src/common/components';
 import Modal from 'src/components/Modal';
 import Button from 'src/components/Button';
 import IconButton from 'src/components/IconButton';
+import InfoTooltip from 'src/components/InfoTooltip';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 import {
   testDatabaseConnection,
@@ -63,6 +64,7 @@ import {
   formStyles,
   StyledBasicTab,
   SelectDatabaseStyles,
+  infoTooltip,
 } from './styles';
 import ModalHeader, { DOCUMENTATION_LINK } from './ModalHeader';
 
@@ -817,22 +819,28 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                   getValidation={() => getValidation(db)}
                   validationErrors={validationErrors}
                 />
-
-                <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>
+                <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
+                  <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
+                    <InfoTooltip
+                      tooltip={t(
+                        'Click this link to switch to an alternate form that allows you to input the SQLAlchemy URL for this database manually.',
+                      )}
+                    />
+                  </Button>
+                </div>
                 {/* Step 2 */}
               </>
             ))}

From fa6c2c5e5359b01ee6b8030069c78432f8b61cc5 Mon Sep 17 00:00:00 2001
From: andrewbastian <andrew.bastian@gmail.com>
Date: Wed, 16 Jun 2021 16:58:47 -0700
Subject: [PATCH 04/18] Added tooltip BigOuery modal. `span` above upload btn
 missing `*`

---
 .../DatabaseModal/DatabaseConnectionForm.tsx  | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 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 2952e5fc6fdec..74114fc7b0353 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -108,8 +108,23 @@ const CredentialsInfo = ({ changeMethods, isEditMode, db }: FieldPropTypes) => {
           </span>
         </div>
       ) : (
-        <div className="input-container">
-          <span className="label-select">Upload Credentials</span>
+        <div
+          className="input-container"
+          css={(theme: SupersetTheme) => infoTooltip(theme)}
+        >
+          {/*This is missing a reqired marker. Need clarification what element to add reqired to.*/}
+          <span
+            css={{ display: 'flex', alignItems: 'center' }}
+            className="label-select"
+          >
+            Upload Credentials{' '}
+            <InfoTooltip
+              tooltip={t(
+                'Use the JSON file you automatically downloaded when creating your service account in Google BigQuery.',
+              )}
+            />
+          </span>
+
           {!fileToUpload && (
             <Button
               className="input-upload-btn"

From aea590500509ca915aa35b01c4b60bf84db474fc Mon Sep 17 00:00:00 2001
From: andrewbastian <andrew.bastian@gmail.com>
Date: Wed, 16 Jun 2021 19:26:00 -0700
Subject: [PATCH 05/18] Added tooltip to `Host` field. Alignment needs to be
 fixed.

---
 .../DatabaseModal/DatabaseConnectionForm.tsx  | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 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 74114fc7b0353..ef40f0e110261 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -184,18 +184,26 @@ const hostField = ({
   validationErrors,
   db,
 }: FieldPropTypes) => (
-  <ValidatedInput
-    id="host"
-    name="host"
-    value={db?.parameters?.host}
-    required={required}
-    validationMethods={{ onBlur: getValidation }}
-    errorMessage={validationErrors?.host}
-    placeholder="e.g. 127.0.0.1"
-    className="form-group-w-50"
-    label="Host"
-    onChange={changeMethods.onParametersChange}
-  />
+    <div style={{border:'2px solid green'}} css={(theme: SupersetTheme) => infoTooltip(theme)}>
+    <ValidatedInput
+      id="host"
+      name="host"
+      value={db?.parameters?.host}
+      required={required}
+      validationMethods={{ onBlur: getValidation }}
+      errorMessage={validationErrors?.host}
+      placeholder="e.g. 127.0.0.1"
+      className="form-group-w-50"
+      label="Host"
+      onChange={changeMethods.onParametersChange}
+    />
+    <InfoTooltip
+      tooltip={t(
+        'This can be either an IP address (e.g. 127.0.0.1) or a domain name (e.g. mydatabase.com).',
+      )}
+        placement="topRight"
+    />
+  </div>
 );
 const portField = ({
   required,

From 2622bfe7817ec8427f941e0daf85eb011abd2410 Mon Sep 17 00:00:00 2001
From: andrewbastian <andrew.bastian@gmail.com>
Date: Thu, 17 Jun 2021 16:41:08 -0700
Subject: [PATCH 06/18] Stuck trying to add conditional render of tooltip to
 LabeledErrorBoundInput

---
 .../Form/LabeledErrorBoundInput.tsx           | 15 +++-
 .../DatabaseModal/DatabaseConnectionForm.tsx  | 25 ++++--
 .../database/DatabaseModal/SqlAlchemyForm.tsx | 27 +-----
 .../data/database/DatabaseModal/index.tsx     | 82 ++++++++++---------
 4 files changed, 75 insertions(+), 74 deletions(-)

diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
index f71df9d18ebae..42c5eabf7489b 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
@@ -19,6 +19,8 @@
 import React from 'react';
 import { Input } from 'antd';
 import { styled, css, SupersetTheme } from '@superset-ui/core';
+import InfoTooltip from 'src/components/InfoTooltip';
+import { infoTooltip } from 'src/views/CRUD/data/database/DatabaseModal/styles';
 import FormItem from './FormItem';
 import FormLabel from './FormLabel';
 
@@ -30,6 +32,8 @@ export interface LabeledErrorBoundInputProps {
   errorMessage: string | null;
   helpText?: string;
   required?: boolean;
+  hasTooltip?: boolean;
+  tooltipText?: string | null;
   id?: string;
   classname?: string;
   [x: string]: any;
@@ -79,14 +83,19 @@ const LabeledErrorBoundInput = ({
   errorMessage,
   helpText,
   required = false,
+  hasTooltip = false,
+  tooltipText,
   id,
   className,
   ...props
 }: LabeledErrorBoundInputProps) => (
   <StyledFormGroup className={className}>
-    <FormLabel htmlFor={id} required={required}>
-      {label}
-    </FormLabel>
+    <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
+      <FormLabel htmlFor={id} required={required}>
+        {label}
+        {hasTooltip && <InfoTooltip tooltip={`${tooltipText}`} />}
+      </FormLabel>
+    </div>
     <FormItem
       css={(theme: SupersetTheme) => alertIconStyles(theme, !!errorMessage)}
       validateTrigger={Object.keys(validationMethods)}
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 ef40f0e110261..88f6ab39f066b 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -53,6 +53,8 @@ const selectedFile = document.getElementById('selectedFile');
 
 interface FieldPropTypes {
   required: boolean;
+    hasTooltip: boolean;
+    tooltipText: (valuse: any) => string;
   onParametersChange: (value: any) => string;
   onParametersUploadFileChange: (value: any) => string;
   changeMethods: { onParametersChange: (value: any) => string } & {
@@ -182,14 +184,27 @@ const hostField = ({
   changeMethods,
   getValidation,
   validationErrors,
+    hasTooltip,
+    tooltipText,
   db,
 }: FieldPropTypes) => (
-    <div style={{border:'2px solid green'}} css={(theme: SupersetTheme) => infoTooltip(theme)}>
+  //<div
+  //  style={{ border: '2px solid green' }}
+  //  css={(theme: SupersetTheme) => infoTooltip(theme)}
+  //>
+  //  <InfoTooltip
+  //    tooltip={t(
+  //      'This can be either an IP address (e.g. 127.0.0.1) or a domain name (e.g. mydatabase.com).',
+  //    )}
+  //    placement="topRight"
+  //  />
     <ValidatedInput
       id="host"
       name="host"
       value={db?.parameters?.host}
       required={required}
+        hasTooltip={hasTooltip}
+        tooltipText = {t('This can be either an IP address (e.g. 127.0.0.1) or a domain name (e.g. mydatabase.com).')}
       validationMethods={{ onBlur: getValidation }}
       errorMessage={validationErrors?.host}
       placeholder="e.g. 127.0.0.1"
@@ -197,13 +212,7 @@ const hostField = ({
       label="Host"
       onChange={changeMethods.onParametersChange}
     />
-    <InfoTooltip
-      tooltip={t(
-        'This can be either an IP address (e.g. 127.0.0.1) or a domain name (e.g. mydatabase.com).',
-      )}
-        placement="topRight"
-    />
-  </div>
+  //</div>
 );
 const portField = ({
   required,
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx
index f4af830080e03..786aeaccd8f33 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/SqlAlchemyForm.tsx
@@ -19,8 +19,7 @@
 import React, { EventHandler, ChangeEvent, MouseEvent } from 'react';
 import { t, SupersetTheme } from '@superset-ui/core';
 import Button from 'src/components/Button';
-import InfoTooltip from 'src/components/InfoTooltip'
-import { StyledInputContainer, wideButton, infoTooltip, buttonLinkStyles} from './styles';
+import { StyledInputContainer, wideButton } from './styles';
 
 import { DatabaseObject } from '../types';
 
@@ -95,30 +94,6 @@ const SqlAlchemyTab = ({
     >
       {t('Test connection')}
     </Button>
-      {/*Button link needs config. Commented code taken from ./index.tsx */}
-      <div css={(theme: SupersetTheme)=> infoTooltip(theme)}>
-          <Button
-              buttonStyle="link"
-              onClick={() =>
-                alert('Fix this link and delete line 101 in ./SqlAlchemyForm.tsx')
-                  
-              //    setDB({
-              //        type: ActionType.configMethodChange,
-              //        payload: {
-              //            configuration_method:
-              //            CONFIGURATION_METHOD.????????????
-              //},
-              //})
-              
-              }
-              css={buttonLinkStyles}
-          >
-          Connect this database using the dynamic form instead 
-              <InfoTooltip
-                  tooltip={t('Click this link to switch to an alternate form that exposes only the required fields needed to connect this database.')}
-            />
-          </Button>
-      </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 c91f432505d0d..b7f72ed077b1e 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -663,22 +663,30 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 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>
+                <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
+                  <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
+                    <InfoTooltip
+                      tooltip={t(
+                        'Click this link to switch to an alternate form that exposes only the required fields needed to connect this database.',
+                      )}
+                    />
+                  </Button>
+                </div>
               )}
             </>
           ) : (
@@ -889,30 +897,30 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                   getValidation={() => getValidation(db)}
                   validationErrors={validationErrors}
                 />
-              <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
-                <Button
-                  buttonStyle="link"
-                  onClick={() =>
-                    setDB({
-                      type: ActionType.configMethodChange,
-                      payload: {
-                        engine: db.engine,
-                        configuration_method:
-                          CONFIGURATION_METHOD.SQLALCHEMY_URI,
-                        database_name: db.database_name,
-                      },
-                    })
-                  }
-                  css={buttonLinkStyles}
-                >
-                  Connect this database with a SQLAlchemy URI string instead
-                  <InfoTooltip
-                    tooltip={t(
+                <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
+                  <Button
+                    buttonStyle="link"
+                    onClick={() =>
+                      setDB({
+                        type: ActionType.configMethodChange,
+                        payload: {
+                          engine: db.engine,
+                          configuration_method:
+                            CONFIGURATION_METHOD.SQLALCHEMY_URI,
+                          database_name: db.database_name,
+                        },
+                      })
+                    }
+                    css={buttonLinkStyles}
+                  >
+                    Connect this database with a SQLAlchemy URI string instead
+                    <InfoTooltip
+                      tooltip={t(
                         'Click this link to switch to an alternate form that allows you to input the SQLAlchemy URL for this database manually.',
                       )}
                     />
-                </Button>
-               </div> 
+                  </Button>
+                </div>
                 {/* Step 2 */}
               </>
             ))}

From b73b40b7864c5b666245926708c662b2c1bb3ce1 Mon Sep 17 00:00:00 2001
From: andrewbastian <andrew.bastian@gmail.com>
Date: Thu, 17 Jun 2021 17:00:19 -0700
Subject: [PATCH 07/18] Clean commit for review

---
 .../Form/LabeledErrorBoundInput.tsx           |  2 +
 .../DatabaseModal/DatabaseConnectionForm.tsx  | 49 ++++++++-----------
 2 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
index 42c5eabf7489b..a8f7359080823 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
@@ -93,6 +93,8 @@ const LabeledErrorBoundInput = ({
     <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
       <FormLabel htmlFor={id} required={required}>
         {label}
+
+        {/*The params for this show up in storybook, but nothing changes when I toggle true/false */}
         {hasTooltip && <InfoTooltip tooltip={`${tooltipText}`} />}
       </FormLabel>
     </div>
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 88f6ab39f066b..d0e2af24fde63 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -53,8 +53,8 @@ const selectedFile = document.getElementById('selectedFile');
 
 interface FieldPropTypes {
   required: boolean;
-    hasTooltip: boolean;
-    tooltipText: (valuse: any) => string;
+  hasTooltip: boolean;
+  tooltipText: (valuse: any) => string;
   onParametersChange: (value: any) => string;
   onParametersUploadFileChange: (value: any) => string;
   changeMethods: { onParametersChange: (value: any) => string } & {
@@ -184,35 +184,26 @@ const hostField = ({
   changeMethods,
   getValidation,
   validationErrors,
-    hasTooltip,
-    tooltipText,
+  hasTooltip,
+  tooltipText,
   db,
 }: FieldPropTypes) => (
-  //<div
-  //  style={{ border: '2px solid green' }}
-  //  css={(theme: SupersetTheme) => infoTooltip(theme)}
-  //>
-  //  <InfoTooltip
-  //    tooltip={t(
-  //      'This can be either an IP address (e.g. 127.0.0.1) or a domain name (e.g. mydatabase.com).',
-  //    )}
-  //    placement="topRight"
-  //  />
-    <ValidatedInput
-      id="host"
-      name="host"
-      value={db?.parameters?.host}
-      required={required}
-        hasTooltip={hasTooltip}
-        tooltipText = {t('This can be either an IP address (e.g. 127.0.0.1) or a domain name (e.g. mydatabase.com).')}
-      validationMethods={{ onBlur: getValidation }}
-      errorMessage={validationErrors?.host}
-      placeholder="e.g. 127.0.0.1"
-      className="form-group-w-50"
-      label="Host"
-      onChange={changeMethods.onParametersChange}
-    />
-  //</div>
+  <ValidatedInput
+    id="host"
+    name="host"
+    value={db?.parameters?.host}
+    required={required}
+    hasTooltip={hasTooltip}
+    tooltipText={t(
+      'This can be either an IP address (e.g. 127.0.0.1) or a domain name (e.g. mydatabase.com).',
+    )}
+    validationMethods={{ onBlur: getValidation }}
+    errorMessage={validationErrors?.host}
+    placeholder="e.g. 127.0.0.1"
+    className="form-group-w-50"
+    label="Host"
+    onChange={changeMethods.onParametersChange}
+  />
 );
 const portField = ({
   required,

From a4654a3a25e9e4463ae8530af18ca17186c3d4e7 Mon Sep 17 00:00:00 2001
From: andrewbastian <andrew.bastian@gmail.com>
Date: Thu, 17 Jun 2021 21:36:54 -0700
Subject: [PATCH 08/18] Dynamic tooltip componet created. Needs alignment of
 SVG still.

---
 .../Form/LabeledErrorBoundInput.stories.tsx   | 10 +++---
 .../Form/LabeledErrorBoundInput.tsx           | 34 +++++++++++--------
 .../DatabaseModal/DatabaseConnectionForm.tsx  |  2 +-
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.stories.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.stories.tsx
index 6061848d85016..ce6a2c850c132 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.stories.tsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.stories.tsx
@@ -20,21 +20,19 @@ import React, { useState } from 'react';
 import LabeledErrorBoundInput, {
   LabeledErrorBoundInputProps,
 } from './LabeledErrorBoundInput';
-
 export default {
   title: 'LabeledErrorBoundInput',
   component: LabeledErrorBoundInput,
 };
-
 export const InteractiveLabeledErrorBoundInput = ({
   name,
   value,
   placeholder,
   type,
   id,
+  tooltipText,
 }: LabeledErrorBoundInputProps) => {
   const [currentValue, setCurrentValue] = useState(value);
-
   const validateFunctionality: (value: any) => string = value => {
     setCurrentValue(value.target.value);
     if (value.target.value.includes('success')) {
@@ -42,7 +40,6 @@ export const InteractiveLabeledErrorBoundInput = ({
     }
     return 'error';
   };
-
   return (
     <LabeledErrorBoundInput
       id={id}
@@ -58,16 +55,17 @@ export const InteractiveLabeledErrorBoundInput = ({
       placeholder={placeholder}
       type={type}
       required
+      hasTooltip
+      tooltipText={tooltipText}
     />
   );
 };
-
 InteractiveLabeledErrorBoundInput.args = {
   name: 'Username',
   placeholder: 'Example placeholder text...',
   id: 1,
+  tooltipText: 'This is a tooltip',
 };
-
 InteractiveLabeledErrorBoundInput.argTypes = {
   type: {
     defaultValue: 'textbox',
diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
index a8f7359080823..d36c1fe13c567 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
@@ -20,10 +20,8 @@ import React from 'react';
 import { Input } from 'antd';
 import { styled, css, SupersetTheme } from '@superset-ui/core';
 import InfoTooltip from 'src/components/InfoTooltip';
-import { infoTooltip } from 'src/views/CRUD/data/database/DatabaseModal/styles';
 import FormItem from './FormItem';
 import FormLabel from './FormLabel';
-
 export interface LabeledErrorBoundInputProps {
   label?: string;
   validationMethods:
@@ -38,11 +36,9 @@ export interface LabeledErrorBoundInputProps {
   classname?: string;
   [x: string]: any;
 }
-
 const StyledInput = styled(Input)`
   margin: ${({ theme }) => `${theme.gridUnit}px 0 ${theme.gridUnit * 2}px`};
 `;
-
 const alertIconStyles = (theme: SupersetTheme, hasError: boolean) => css`
   .ant-form-item-children-icon {
     display: none;
@@ -50,7 +46,6 @@ const alertIconStyles = (theme: SupersetTheme, hasError: boolean) => css`
   ${hasError &&
   `.ant-form-item-control-input-content {
       position: relative;
-
       &:after {
         content: ' ';
         display: inline-block;
@@ -76,7 +71,12 @@ const StyledFormGroup = styled('div')`
     margin-bottom: 0;
   }
 `;
-
+const infoTooltip = (theme: SupersetTheme) => css`
+  svg {
+    vertical-align: bottom;
+    margin-bottom: ${theme.gridUnit * 0.25}px;
+  }
+`;
 const LabeledErrorBoundInput = ({
   label,
   validationMethods,
@@ -90,14 +90,19 @@ const LabeledErrorBoundInput = ({
   ...props
 }: LabeledErrorBoundInputProps) => (
   <StyledFormGroup className={className}>
-    <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
-      <FormLabel htmlFor={id} required={required}>
-        {label}
-
-        {/*The params for this show up in storybook, but nothing changes when I toggle true/false */}
-        {hasTooltip && <InfoTooltip tooltip={`${tooltipText}`} />}
-      </FormLabel>
-    </div>
+    <FormLabel
+      htmlFor={id}
+      required={required}
+      css={(theme: SupersetTheme) => infoTooltip(theme)}
+    >
+      {label}
+    </FormLabel>
+    {hasTooltip && (
+      <span>
+        {' '}
+        <InfoTooltip tooltip={`${tooltipText}`} />
+      </span>
+    )}
     <FormItem
       css={(theme: SupersetTheme) => alertIconStyles(theme, !!errorMessage)}
       validateTrigger={Object.keys(validationMethods)}
@@ -109,5 +114,4 @@ const LabeledErrorBoundInput = ({
     </FormItem>
   </StyledFormGroup>
 );
-
 export default LabeledErrorBoundInput;
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 d0e2af24fde63..300e4e65c33ed 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -193,7 +193,7 @@ const hostField = ({
     name="host"
     value={db?.parameters?.host}
     required={required}
-    hasTooltip={hasTooltip}
+    hasTooltip={true}
     tooltipText={t(
       'This can be either an IP address (e.g. 127.0.0.1) or a domain name (e.g. mydatabase.com).',
     )}

From c1325ab85a252f9615873f2f7df6b1b7d6c1d6c6 Mon Sep 17 00:00:00 2001
From: andrewbastian <andrew.bastian@gmail.com>
Date: Thu, 17 Jun 2021 21:54:05 -0700
Subject: [PATCH 09/18] Fixed typo.

---
 .../src/views/CRUD/data/database/DatabaseModal/index.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 1a50c7e858438..a914f0dd2a7b4 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -1,7 +1,7 @@
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
-placement* distributed with this work for additional information
+ * placement 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

From 46ebb23358a2931d2f35136cf7d1af35d18fc5f4 Mon Sep 17 00:00:00 2001
From: andrewbastian <andrew.bastian@gmail.com>
Date: Fri, 18 Jun 2021 10:12:06 -0700
Subject: [PATCH 10/18] Added line spacing back in

---
 .../src/components/Form/LabeledErrorBoundInput.stories.tsx | 6 ++++++
 .../src/components/Form/LabeledErrorBoundInput.tsx         | 7 +++++++
 2 files changed, 13 insertions(+)

diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.stories.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.stories.tsx
index ce6a2c850c132..d1c81b9af3a6e 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.stories.tsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.stories.tsx
@@ -20,10 +20,12 @@ import React, { useState } from 'react';
 import LabeledErrorBoundInput, {
   LabeledErrorBoundInputProps,
 } from './LabeledErrorBoundInput';
+
 export default {
   title: 'LabeledErrorBoundInput',
   component: LabeledErrorBoundInput,
 };
+
 export const InteractiveLabeledErrorBoundInput = ({
   name,
   value,
@@ -33,6 +35,7 @@ export const InteractiveLabeledErrorBoundInput = ({
   tooltipText,
 }: LabeledErrorBoundInputProps) => {
   const [currentValue, setCurrentValue] = useState(value);
+
   const validateFunctionality: (value: any) => string = value => {
     setCurrentValue(value.target.value);
     if (value.target.value.includes('success')) {
@@ -40,6 +43,7 @@ export const InteractiveLabeledErrorBoundInput = ({
     }
     return 'error';
   };
+
   return (
     <LabeledErrorBoundInput
       id={id}
@@ -60,12 +64,14 @@ export const InteractiveLabeledErrorBoundInput = ({
     />
   );
 };
+
 InteractiveLabeledErrorBoundInput.args = {
   name: 'Username',
   placeholder: 'Example placeholder text...',
   id: 1,
   tooltipText: 'This is a tooltip',
 };
+
 InteractiveLabeledErrorBoundInput.argTypes = {
   type: {
     defaultValue: 'textbox',
diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
index d36c1fe13c567..e22f70b0bb917 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
@@ -22,6 +22,7 @@ import { styled, css, SupersetTheme } from '@superset-ui/core';
 import InfoTooltip from 'src/components/InfoTooltip';
 import FormItem from './FormItem';
 import FormLabel from './FormLabel';
+
 export interface LabeledErrorBoundInputProps {
   label?: string;
   validationMethods:
@@ -36,9 +37,11 @@ export interface LabeledErrorBoundInputProps {
   classname?: string;
   [x: string]: any;
 }
+
 const StyledInput = styled(Input)`
   margin: ${({ theme }) => `${theme.gridUnit}px 0 ${theme.gridUnit * 2}px`};
 `;
+
 const alertIconStyles = (theme: SupersetTheme, hasError: boolean) => css`
   .ant-form-item-children-icon {
     display: none;
@@ -60,6 +63,7 @@ const alertIconStyles = (theme: SupersetTheme, hasError: boolean) => css`
       }
     }`}
 `;
+
 const StyledFormGroup = styled('div')`
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
@@ -71,12 +75,14 @@ const StyledFormGroup = styled('div')`
     margin-bottom: 0;
   }
 `;
+
 const infoTooltip = (theme: SupersetTheme) => css`
   svg {
     vertical-align: bottom;
     margin-bottom: ${theme.gridUnit * 0.25}px;
   }
 `;
+
 const LabeledErrorBoundInput = ({
   label,
   validationMethods,
@@ -114,4 +120,5 @@ const LabeledErrorBoundInput = ({
     </FormItem>
   </StyledFormGroup>
 );
+
 export default LabeledErrorBoundInput;

From c8bbce0f580630fb092b4d6fb12957da87ed1ed3 Mon Sep 17 00:00:00 2001
From: andrewbastian <andrew.bastian@gmail.com>
Date: Fri, 18 Jun 2021 10:43:22 -0700
Subject: [PATCH 11/18] Changed required props to optional/Remove comment

---
 .../data/database/DatabaseModal/DatabaseConnectionForm.tsx   | 5 ++---
 1 file changed, 2 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 03dc78b1976ca..42cdaff562f91 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -51,8 +51,8 @@ export const FormFieldOrder = [
 
 interface FieldPropTypes {
   required: boolean;
-  hasTooltip: boolean;
-  tooltipText: (valuse: any) => string;
+  hasTooltip?: boolean;
+  tooltipText?: (valuse: any) => string;
   onParametersChange: (value: any) => string;
   onParametersUploadFileChange: (value: any) => string;
   changeMethods: { onParametersChange: (value: any) => string } & {
@@ -112,7 +112,6 @@ const CredentialsInfo = ({ changeMethods, isEditMode, db }: FieldPropTypes) => {
           className="input-container"
           css={(theme: SupersetTheme) => infoTooltip(theme)}
         >
-          {/*This is missing a reqired marker. Need clarification what element to add reqired to.*/}
           <span
             css={{ display: 'flex', alignItems: 'center' }}
             className="label-select"

From 49bafb3c8ea991a5c741a32c9c24186b89ae6f9f Mon Sep 17 00:00:00 2001
From: andrewbastian <andrew.bastian@gmail.com>
Date: Fri, 18 Jun 2021 12:54:58 -0700
Subject: [PATCH 12/18] Fixed alignment of tooltips & moved 2tooltips outside
 of Btn

---
 .../Form/LabeledErrorBoundInput.tsx           |  5 +---
 .../src/components/InfoTooltip/index.tsx      |  5 ++--
 .../DatabaseModal/DatabaseConnectionForm.tsx  |  2 +-
 .../data/database/DatabaseModal/index.tsx     | 24 ++++++++++---------
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
index e22f70b0bb917..1ae25c74265a2 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
@@ -104,10 +104,7 @@ const LabeledErrorBoundInput = ({
       {label}
     </FormLabel>
     {hasTooltip && (
-      <span>
-        {' '}
-        <InfoTooltip tooltip={`${tooltipText}`} />
-      </span>
+      <InfoTooltip tooltip={`${tooltipText}`} viewBox="0 -6 24 24" />
     )}
     <FormItem
       css={(theme: SupersetTheme) => alertIconStyles(theme, !!errorMessage)}
diff --git a/superset-frontend/src/components/InfoTooltip/index.tsx b/superset-frontend/src/components/InfoTooltip/index.tsx
index b3558593973f3..15f6eef1e9c21 100644
--- a/superset-frontend/src/components/InfoTooltip/index.tsx
+++ b/superset-frontend/src/components/InfoTooltip/index.tsx
@@ -42,11 +42,11 @@ export interface InfoTooltipProps {
   trigger?: string | Array<string>;
   overlayStyle?: any;
   bgColor?: string;
+  viewBox?: string;
 }
 
 const StyledTooltip = styled(Tooltip)`
   cursor: pointer;
-
   path:first-of-type {
     fill: #999999;
   }
@@ -65,6 +65,7 @@ export default function InfoTooltip({
   trigger = 'hover',
   overlayStyle = defaultOverlayStyle,
   bgColor = defaultColor,
+  viewBox,
 }: InfoTooltipProps) {
   return (
     <StyledTooltip
@@ -74,7 +75,7 @@ export default function InfoTooltip({
       overlayStyle={overlayStyle}
       color={bgColor}
     >
-      <Icon name="info-solid-small" />
+      <Icon name="info-solid-small" viewBox={viewBox} />
     </StyledTooltip>
   );
 }
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 42cdaff562f91..057933792f0dd 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -350,7 +350,7 @@ const forceSSLField = ({
     <span css={toggleStyle}>SSL</span>
     <InfoTooltip
       tooltip={t('SSL Mode "require" will be used.')}
-      placement="bottomRight"
+      placement="right"
     />
   </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 a914f0dd2a7b4..878472b58cc8e 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -299,7 +299,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const connectionAlert = getConnectionAlert();
   const isEditMode = !!databaseId;
   const sslForced = isFeatureEnabled(
-    FeatureFlag.FORCE_DATABASE_CONNECTIONS_SSL,
+    FeatureFlag.FORCE_DATABASE_CONNECTIONS_4SL,
   );
   const useSqlAlchemyForm =
     db?.configuration_method === CONFIGURATION_METHOD.SQLALCHEMY_URI;
@@ -689,12 +689,13 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                     css={theme => alchemyButtonLinkStyles(theme)}
                   >
                     Connect this database using the dynamic form instead
-                    <InfoTooltip
-                      tooltip={t(
-                        'Click this link to switch to an alternate form that exposes only the required fields needed to connect this database.',
-                      )}
-                    />
                   </Button>
+                  <InfoTooltip
+                    tooltip={t(
+                      'Click this link to switch to an alternate form that exposes only the required fields needed to connect this database.',
+                    )}
+                    viewBox="0 -3 24 24"
+                  />
                 </div>
               )}
             </>
@@ -923,12 +924,13 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                     css={buttonLinkStyles}
                   >
                     Connect this database with a SQLAlchemy URI string instead
-                    <InfoTooltip
-                      tooltip={t(
-                        'Click this link to switch to an alternate form that allows you to input the SQLAlchemy URL for this database manually.',
-                      )}
-                    />
                   </Button>
+                  <InfoTooltip
+                    tooltip={t(
+                      'Click this link to switch to an alternate form that allows you to input the SQLAlchemy URL for this database manually.',
+                    )}
+                    viewBox="6 3 24 24"
+                  />
                 </div>
                 {/* Step 2 */}
               </>

From 34d56a11e7552f0c3c304f176dd41146d3f6e61d Mon Sep 17 00:00:00 2001
From: andrewbastian <andrew.bastian@gmail.com>
Date: Fri, 18 Jun 2021 13:02:34 -0700
Subject: [PATCH 13/18] Added one more line space back in

---
 superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
index 1ae25c74265a2..d1a0bafafbc3c 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
@@ -49,6 +49,7 @@ const alertIconStyles = (theme: SupersetTheme, hasError: boolean) => css`
   ${hasError &&
   `.ant-form-item-control-input-content {
       position: relative;
+
       &:after {
         content: ' ';
         display: inline-block;

From c103c02e139980345d95b3f3ae7b66dac1b803de Mon Sep 17 00:00:00 2001
From: andrewbastian <andrew.bastian@gmail.com>
Date: Fri, 18 Jun 2021 13:07:21 -0700
Subject: [PATCH 14/18] Removed Typo

---
 .../src/views/CRUD/data/database/DatabaseModal/index.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 48557515e2880..69178d5d959ef 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -1,7 +1,7 @@
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
- * placement distributed with this work for additional information
+ * 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

From 23b5a1d44292ac6660f262fd21693c38cb337b29 Mon Sep 17 00:00:00 2001
From: andrewbastian <andrew.bastian@gmail.com>
Date: Fri, 18 Jun 2021 13:10:11 -0700
Subject: [PATCH 15/18] Removed another typo

---
 .../src/views/CRUD/data/database/DatabaseModal/index.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 69178d5d959ef..033130c0bbcac 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -304,7 +304,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const connectionAlert = getConnectionAlert();
   const isEditMode = !!databaseId;
   const sslForced = isFeatureEnabled(
-    FeatureFlag.FORCE_DATABASE_CONNECTIONS_4SL,
+    FeatureFlag.FORCE_DATABASE_CONNECTIONS_SSL,
   );
   const useSqlAlchemyForm =
     db?.configuration_method === CONFIGURATION_METHOD.SQLALCHEMY_URI;

From 2cdf91ac48e343f854cd40b1598369d436fed6ba Mon Sep 17 00:00:00 2001
From: andrewbastian <andrew.bastian@gmail.com>
Date: Fri, 18 Jun 2021 13:29:30 -0700
Subject: [PATCH 16/18] Flixed linter error

---
 .../data/database/DatabaseModal/DatabaseConnectionForm.tsx    | 4 +---
 1 file changed, 1 insertion(+), 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 c95e00662c8ad..c4f8e0379aafa 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -184,8 +184,6 @@ const hostField = ({
   changeMethods,
   getValidation,
   validationErrors,
-  hasTooltip,
-  tooltipText,
   db,
 }: FieldPropTypes) => (
   <ValidatedInput
@@ -193,7 +191,7 @@ const hostField = ({
     name="host"
     value={db?.parameters?.host}
     required={required}
-    hasTooltip={true}
+    hasTooltip
     tooltipText={t(
       'This can be either an IP address (e.g. 127.0.0.1) or a domain name (e.g. mydatabase.com).',
     )}

From 4a3974021ffea2e918d3c736a557b7961b65cec4 Mon Sep 17 00:00:00 2001
From: andrewbastian <andrew.bastian@gmail.com>
Date: Fri, 18 Jun 2021 14:25:58 -0700
Subject: [PATCH 17/18] Created test for tooltip.

---
 .../Form/LabeledErrorBoundInput.test.jsx         | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx
index 15f956fd5773a..99eaba59005c2 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, fireEvent, screen } from 'spec/helpers/testing-library';
 import LabeledErrorBoundInput from 'src/components/Form/LabeledErrorBoundInput';
 
 const defaultProps = {
@@ -27,6 +27,8 @@ const defaultProps = {
   validationMethods: () => {},
   errorMessage: '',
   helpText: 'This is a line of example help text',
+  hasTooltip: true,
+  tooltipText: 'This is a tooltip',
   value: '',
   placeholder: 'Example placeholder text...',
   type: 'textbox',
@@ -58,4 +60,16 @@ describe('LabeledErrorBoundInput', () => {
     expect(textboxInput).toBeVisible();
     expect(errorText).toBeVisible();
   });
+  it('renders a LabledErrorBoundInput with a InfoTooltip', async () => {
+    render(<LabeledErrorBoundInput {...defaultProps} />);
+
+    const label = screen.getByText(/username/i);
+    const textboxInput = screen.getByRole('textbox');
+
+    fireEvent.mouseOver(screen.getByTestId('info-solid-small'));
+
+    expect(label).toBeVisible();
+    expect(textboxInput).toBeVisible();
+    expect(await screen.findByText('This is a tooltip')).toBeInTheDocument();
+  });
 });

From b0de82a28a94b18fcc50cdee33c3047867859b8a Mon Sep 17 00:00:00 2001
From: andrewbastian <andrew.bastian@gmail.com>
Date: Fri, 18 Jun 2021 15:14:54 -0700
Subject: [PATCH 18/18] Added expectation for visible tooltipIcon

---
 .../src/components/Form/LabeledErrorBoundInput.test.jsx    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx
index 99eaba59005c2..86b6324daed50 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx
@@ -27,7 +27,7 @@ const defaultProps = {
   validationMethods: () => {},
   errorMessage: '',
   helpText: 'This is a line of example help text',
-  hasTooltip: true,
+  hasTooltip: false,
   tooltipText: 'This is a tooltip',
   value: '',
   placeholder: 'Example placeholder text...',
@@ -61,13 +61,16 @@ describe('LabeledErrorBoundInput', () => {
     expect(errorText).toBeVisible();
   });
   it('renders a LabledErrorBoundInput with a InfoTooltip', async () => {
+    defaultProps.hasTooltip = true;
     render(<LabeledErrorBoundInput {...defaultProps} />);
 
     const label = screen.getByText(/username/i);
     const textboxInput = screen.getByRole('textbox');
+    const tooltipIcon = screen.getByTestId('info-solid-small');
 
-    fireEvent.mouseOver(screen.getByTestId('info-solid-small'));
+    fireEvent.mouseOver(tooltipIcon);
 
+    expect(tooltipIcon).toBeVisible();
     expect(label).toBeVisible();
     expect(textboxInput).toBeVisible();
     expect(await screen.findByText('This is a tooltip')).toBeInTheDocument();