style: Database Modal UI Polish

superset-frontend/src/components/IconButton/index.tsx

@@ -133,6 +133,7 @@ const IconButton = styled(
     background-color: ${({ theme }) => theme.colors.grayscale.light5};
     color: ${({ theme }) => theme.colors.grayscale.dark2};
     border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+    box-shadow: 4px 4px 20px ${({ theme }) => theme.colors.grayscale.light2};
   }
 `;
 

superset-frontend/src/components/InfoTooltip/index.tsx

@@ -42,6 +42,7 @@ export interface InfoTooltipProps {
   trigger?: string | Array<string>;
   overlayStyle?: any;
   bgColor?: string;
+  viewBox?: string;
 }
 
 const StyledTooltip = styled(Tooltip)`
@@ -65,6 +66,7 @@ export default function InfoTooltip({
   trigger = 'hover',
   overlayStyle = defaultOverlayStyle,
   bgColor = defaultColor,
+  viewBox,
 }: InfoTooltipProps) {
   return (
     <StyledTooltip
@@ -74,7 +76,7 @@ export default function InfoTooltip({
       overlayStyle={overlayStyle}
       color={bgColor}
     >
-      <Icon name="info-solid-small" />
+      <Icon name="info-solid-small" viewBox={viewBox} />
     </StyledTooltip>
   );
 }

superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx

@@ -44,9 +44,9 @@ export const FormFieldOrder = [
   'username',
   'password',
   'database_name',
+  'encryption',
   'credentials_info',
   'query',
-  'encryption',
 ];
 
 interface FieldPropTypes {

superset-frontend/src/views/CRUD/data/database/DatabaseModal/ExtraOptions.tsx

@@ -77,6 +77,7 @@ const ExtraOptions = ({
             />
             <InfoTooltip
               tooltip={t('Allow this database to be queried in SQL Lab')}
+              viewBox="0 -2 24 24"
             />
           </div>
           <StyledExpandableForm
@@ -96,6 +97,7 @@ const ExtraOptions = ({
                 />
                 <InfoTooltip
                   tooltip={t('Allow creation of new tables based on queries')}
+                  viewBox="0 -2 24 24"
                 />
               </div>
             </StyledInputContainer>
@@ -110,6 +112,7 @@ const ExtraOptions = ({
                 />
                 <InfoTooltip
                   tooltip={t('Allow creation of new views based on queries')}
+                  viewBox="0 -2 24 24"
                 />
               </div>
               <StyledInputContainer
@@ -145,6 +148,7 @@ const ExtraOptions = ({
                   tooltip={t(
                     'Allow manipulation of the database using non-SELECT statements such as UPDATE, DELETE, CREATE, etc.',
                   )}
+                  viewBox="0 -2 24 24"
                 />
               </div>
             </StyledInputContainer>
@@ -163,6 +167,7 @@ const ExtraOptions = ({
                       'schemas. For large data warehouse with thousands of tables, this can be ' +
                       'expensive and put strain on the system.',
                   )}
+                  viewBox="0 -2 24 24"
                 />
               </div>
             </StyledInputContainer>
@@ -179,6 +184,7 @@ const ExtraOptions = ({
                   tooltip={t(
                     'For Presto and Postgres, shows a button to compute cost before running a query.',
                   )}
+                  viewBox="0 -2 24 24"
                 />
               </div>
             </StyledInputContainer>
@@ -195,6 +201,7 @@ const ExtraOptions = ({
                   tooltip={t(
                     'When enabled, users are able to visualize SQL Lab results in Explore.',
                   )}
+                  viewBox="0 -2 24 24"
                 />
               </div>
             </StyledInputContainer>
@@ -291,6 +298,7 @@ const ExtraOptions = ({
                   'This assumes that you have a Celery worker setup as well as a results ' +
                   'backend. Refer to the installation docs for more information.',
               )}
+              viewBox="0 -2 24 24"
             />
           </div>
         </StyledInputContainer>
@@ -341,10 +349,8 @@ const ExtraOptions = ({
           </div>
           <div className="helper">
             {t(
-              'JSON string containing additional connection configuration. ' +
-                'This is used to provide connection information for systems ' +
-                'like Hive, Presto and BigQuery whih do not conform to the ' +
-                'username:password syntax normally used by SQLAlchemy.',
+              'Optional CA_BUNDLE contents to validate HTTPS requests. Only ' +
+                'available on certain database engines.',
             )}
           </div>
         </StyledInputContainer>
@@ -382,6 +388,7 @@ const ExtraOptions = ({
                   'service account, but impersonate the currently logged on user via ' +
                   'hive.server2.proxy.user property.',
               )}
+              viewBox="0 -2 24 24"
             />
           </div>
         </StyledInputContainer>
@@ -398,6 +405,7 @@ const ExtraOptions = ({
               tooltip={t(
                 'If selected, please set the schemas allowed for data upload in Extra.',
               )}
+              viewBox="0 -2 24 24"
             />
           </div>
         </StyledInputContainer>

superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx

@@ -24,6 +24,7 @@ import {
   CreateHeaderTitle,
   CreateHeaderSubtitle,
   StyledFormHeader,
+  StyledStickyHeader,
 } from './styles';
 import { DatabaseForm, DatabaseObject } from '../types';
 
@@ -60,14 +61,14 @@ const ModalHeader = ({
   dbModel: DatabaseForm;
 }) => {
   const isEditHeader = (
-    <>
+    <StyledFormHeader>
       <EditHeaderTitle>{db?.backend}</EditHeaderTitle>
       <EditHeaderSubtitle>{dbName}</EditHeaderSubtitle>
-    </>
+    </StyledFormHeader>
   );
   const useSqlAlchemyFormHeader = (
-    <>
-      <p className="helper"> Step 2 of 2 </p>
+    <StyledFormHeader>
+      <p className="helper"> STEP 2 OF 2 </p>
       <CreateHeaderTitle>Enter Primary Credentials</CreateHeaderTitle>
       <CreateHeaderSubtitle>
         Need help? Learn how to connect your database{' '}
@@ -76,11 +77,11 @@ const ModalHeader = ({
         </a>
         .
       </CreateHeaderSubtitle>
-    </>
+    </StyledFormHeader>
   );
   const hasConnectedDbHeader = (
     <StyledFormHeader>
-      <p className="helper"> Step 3 of 3 </p>
+      <p className="helper"> STEP 3 OF 3 </p>
       <h4>
         Your database was successfully connected! Here are some optional
         settings for your database
@@ -98,18 +99,20 @@ const ModalHeader = ({
     </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>
+    <StyledStickyHeader>
+      <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>
+    </StyledStickyHeader>
   );
   const noDbHeader = (
     <StyledFormHeader>
       <div className="select-db">
-        <p className="helper"> Step 1 of 3 </p>
+        <p className="helper"> STEP 1 OF 3 </p>
         <h4>Select a database to connect</h4>
       </div>
     </StyledFormHeader>

superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx

@@ -30,7 +30,8 @@ import React, {
   Reducer,
 } from 'react';
 import Tabs from 'src/components/Tabs';
-import { Alert, Select } from 'src/common/components';
+import { Select } from 'src/common/components';
+import Alert from 'src/components/Alert';
 import Modal from 'src/components/Modal';
 import Button from 'src/components/Button';
 import IconButton from 'src/components/IconButton';
@@ -502,6 +503,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       </Select>
       <Alert
         showIcon
+        closable={false}
         css={(theme: SupersetTheme) => antDAlertStyles(theme)}
         type="info"
         message={t('Want to add a new database?')}
@@ -514,8 +516,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               target="_blank"
               rel="noopener noreferrer"
             >
-              here.
+              here
             </a>
+            .
           </>
         }
       />
@@ -653,7 +656,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           />
         </TabHeader>
       </StyledStickyHeader>
-      <hr />
       <Tabs
         defaultActiveKey={DEFAULT_TAB_KEY}
         activeKey={tabKey}
@@ -722,6 +724,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           )}
           {!isEditMode && (
             <Alert
+              closable={false}
               css={(theme: SupersetTheme) => antDAlertStyles(theme)}
               message="Additional fields may be required"
               showIcon
@@ -734,6 +737,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                     href={DOCUMENTATION_LINK}
                     target="_blank"
                     rel="noopener noreferrer"
+                    className="additional-fields-alert-description"
                   >
                     here
                   </a>
@@ -872,6 +876,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 />
                 {connectionAlert && (
                   <Alert
+                    closable={false}
                     css={(theme: SupersetTheme) => antDAlertStyles(theme)}
                     type="info"
                     showIcon