style: Database Modal UI Polish (#15234)

* Corrected polishing tasks from Clubhouse ticket * More UI polish * Added more polish * Moved encryption field and created constant value for viewBox in InfoToolTip
apache · Jun 22, 2021 · a64f1e7 · a64f1e7
1 parent b6138cf
commit a64f1e7
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 45 deletions.
diff --git a/superset-frontend/src/components/IconButton/index.tsx b/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};
   }
 `;
 

diff --git a/superset-frontend/src/components/InfoTooltip/index.tsx b/superset-frontend/src/components/InfoTooltip/index.tsx
@@ -65,7 +65,7 @@ export default function InfoTooltip({
   trigger = 'hover',
   overlayStyle = defaultOverlayStyle,
   bgColor = defaultColor,
-  viewBox,
+  viewBox = '0 -2 24 24',
 }: InfoTooltipProps) {
   return (
     <StyledTooltip

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ExtraOptions.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ExtraOptions.tsx
@@ -341,10 +341,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>

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx b/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';
 
@@ -62,14 +63,14 @@ const ModalHeader = ({
   editNewDb?: boolean;
 }) => {
   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{' '}
@@ -78,11 +79,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
@@ -100,25 +101,27 @@ 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{' '}
-        <a
-          href={documentationLink(db?.engine)}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          connecting to {dbModel.name}.
-        </a>
-      </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{' '}
+          <a
+            href={documentationLink(db?.engine)}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            connecting to {dbModel.name}.
+          </a>
+        </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>

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/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';
@@ -510,6 +511,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?')}
@@ -522,8 +524,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               target="_blank"
               rel="noopener noreferrer"
             >
-              here.
+              here
             </a>
+            .
           </>
         }
       />
@@ -740,7 +743,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           />
         </TabHeader>
       </StyledStickyHeader>
-      <hr />
       <Tabs
         defaultActiveKey={DEFAULT_TAB_KEY}
         activeKey={tabKey}
@@ -818,6 +820,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           )}
           {!isEditMode && (
             <Alert
+              closable={false}
               css={(theme: SupersetTheme) => antDAlertStyles(theme)}
               message="Additional fields may be required"
               showIcon
@@ -830,6 +833,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                     href={DOCUMENTATION_LINK}
                     target="_blank"
                     rel="noopener noreferrer"
+                    className="additional-fields-alert-description"
                   >
                     here
                   </a>
@@ -938,6 +942,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 />
                 {connectionAlert && (
                   <Alert
+                    closable={false}
                     css={(theme: SupersetTheme) => antDAlertStyles(theme)}
                     type="info"
                     showIcon

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -39,25 +39,30 @@ export const marginBottom = (theme: SupersetTheme) => css`
 export const StyledFormHeader = styled.header`
   border-bottom: ${({ theme }) => `${theme.gridUnit * 0.25}px solid
     ${theme.colors.grayscale.light2};`}
-  padding-left: ${({ theme }) => theme.gridUnit * 4}px;
-  padding-right: ${({ theme }) => theme.gridUnit * 4}px;
-  margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
+  padding: ${({ theme }) => theme.gridUnit * 2}px
+    ${({ theme }) => theme.gridUnit * 4}px
+    ${({ theme }) => theme.gridUnit * 4}px
+    ${({ theme }) => theme.gridUnit * 4}px;
+  line-height: ${({ theme }) => theme.gridUnit * 6}px;
   .helper {
     color: ${({ theme }) => theme.colors.grayscale.base};
     font-size: ${({ theme }) => theme.typography.sizes.s - 1}px;
+    margin: 0;
   }
   h4 {
     color: ${({ theme }) => theme.colors.grayscale.dark2};
     font-weight: bold;
     font-size: ${({ theme }) => theme.typography.sizes.l}px;
+    margin: 0;
+    padding: 0;
   }
 
   .select-db {
     .helper {
-      margin-top: 0;
+      margin: 0;
     }
     h4 {
-      margin: 0 0 29px;
+      margin: 0 0 ${({ theme }) => theme.gridUnit * 6}px;
     }
   }
 `;
@@ -87,6 +92,9 @@ export const antdCollapseStyles = (theme: SupersetTheme) => css`
 `;
 
 export const antDTabsStyles = css`
+  .ant-tabs-top {
+    margin-top: 0;
+  }
   .ant-tabs-top > .ant-tabs-nav {
     margin-bottom: 0;
   }
@@ -104,6 +112,7 @@ export const antDModalNoPaddingStyles = css`
 `;
 
 export const infoTooltip = (theme: SupersetTheme) => css`
+  margin-bottom: ${theme.gridUnit * 5}px;
   svg {
     vertical-align: bottom;
     margin-bottom: ${theme.gridUnit * 0.25}px;
@@ -115,11 +124,14 @@ export const toggleStyle = (theme: SupersetTheme) => css`
 `;
 
 export const formScrollableStyles = (theme: SupersetTheme) => css`
-  padding-left: ${theme.gridUnit * 4}px;
-  padding-right: ${theme.gridUnit * 4}px;
+  padding: ${theme.gridUnit * 4}px ${theme.gridUnit * 4}px 0;
 `;
 
 export const antDModalStyles = (theme: SupersetTheme) => css`
+  .ant-select-dropdown {
+    height: ${theme.gridUnit * 40}px;
+  }
+
   .ant-modal-header {
     padding: ${theme.gridUnit * 4.5}px ${theme.gridUnit * 4}px
       ${theme.gridUnit * 4}px;
@@ -142,16 +154,23 @@ export const antDModalStyles = (theme: SupersetTheme) => css`
 export const antDAlertStyles = (theme: SupersetTheme) => css`
   border: 1px solid ${theme.colors.info.base};
   padding: ${theme.gridUnit * 4}px;
-  margin: ${theme.gridUnit * 8}px 0 ${theme.gridUnit * 4}px;
+  margin: ${theme.gridUnit * 4}px 0;
+
   .ant-alert-message {
     color: ${theme.colors.info.dark2};
     font-size: ${theme.typography.sizes.s + 1}px;
     font-weight: bold;
   }
+
   .ant-alert-description {
     color: ${theme.colors.info.dark2};
     font-size: ${theme.typography.sizes.s + 1}px;
     line-height: ${theme.gridUnit * 4}px;
+
+    a {
+      text-decoration: underline;
+    }
+
     .ant-alert-icon {
       margin-right: ${theme.gridUnit * 2.5}px;
       font-size: ${theme.typography.sizes.l + 1}px;
@@ -195,6 +214,7 @@ export const formStyles = (theme: SupersetTheme) => css`
       width: ${`calc(50% - ${theme.gridUnit * 4}px)`};
       & + .form-group-w-50 {
         margin-left: ${theme.gridUnit * 8}px;
+        margin-bottom: ${theme.gridUnit * 10}px;
       }
     }
   }
@@ -330,8 +350,7 @@ export const StyledExpandableForm = styled.div`
 `;
 
 export const StyledBasicTab = styled(Tabs.TabPane)`
-  padding-left: ${({ theme }) => theme.gridUnit * 4}px;
-  padding-right: ${({ theme }) => theme.gridUnit * 4}px;
+  padding: 0 ${({ theme }) => theme.gridUnit * 4}px;
   margin-top: ${({ theme }) => theme.gridUnit * 6}px;
 `;
 
@@ -352,8 +371,6 @@ export const TabHeader = styled.div`
   flex-direction: column;
   justify-content: center;
   padding: 0px;
-  margin: 0 ${({ theme }) => theme.gridUnit * 4}px
-    ${({ theme }) => theme.gridUnit * 8}px;
 
   .helper {
     color: ${({ theme }) => theme.colors.grayscale.base};
@@ -366,7 +383,6 @@ export const CreateHeaderTitle = styled.div`
   color: ${({ theme }) => theme.colors.grayscale.dark2};
   font-weight: bold;
   font-size: ${({ theme }) => theme.typography.sizes.m}px;
-  padding: ${({ theme }) => theme.gridUnit * 1}px 0;
 `;
 
 export const CreateHeaderSubtitle = styled.div`
@@ -473,8 +489,6 @@ export const StyledFooterButton = styled(Button)`
 export const StyledStickyHeader = styled.div`
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: ${({ theme }) => theme.zIndex.max};
   background: ${({ theme }) => theme.colors.grayscale.light5};
-  padding: ${({ theme }) => theme.gridUnit * 4}px 0;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
 `;