feat: Add headers for DatabaseModal (#14647)

* update styles sheets

* save this

* add backend

* update backend reference

* update styles

* my style updates

* sticky header

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

@@ -25,6 +25,7 @@ import React, {
   Reducer,
 } from 'react';
 import Tabs from 'src/components/Tabs';
+import { Alert } from 'src/common/components';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 import {
   testDatabaseConnection,
@@ -34,7 +35,20 @@ import { useCommonConf } from 'src/views/CRUD/data/database/state';
 import { DatabaseObject } from 'src/views/CRUD/data/database/types';
 import ExtraOptions from './ExtraOptions';
 import SqlAlchemyForm from './SqlAlchemyForm';
-import { StyledBasicTab, StyledModal } from './styles';
+import {
+  StyledBasicTab,
+  StyledModal,
+  EditHeader,
+  EditHeaderTitle,
+  EditHeaderSubtitle,
+  CreateHeader,
+  CreateHeaderSubtitle,
+  CreateHeaderTitle,
+  Divider,
+} from './styles';
+
+const DOCUMENTATION_LINK =
+  'https://superset.apache.org/docs/databases/installing-database-drivers';
 
 interface DatabaseModalProps {
   addDangerToast: (msg: string) => void;
@@ -267,6 +281,28 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         <h4>{isEditMode ? t('Edit database') : t('Connect a database')}</h4>
       }
     >
+      {isEditMode ? (
+        <EditHeader>
+          <EditHeaderTitle>{db?.backend}</EditHeaderTitle>
+          <EditHeaderSubtitle>{db?.database_name}</EditHeaderSubtitle>
+        </EditHeader>
+      ) : (
+        <CreateHeader>
+          <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>
+        </CreateHeader>
+      )}
+      <Divider />
       <Tabs
         defaultActiveKey={DEFAULT_TAB_KEY}
         activeKey={tabKey}
@@ -292,6 +328,26 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               <p>TODO: db form</p>
             </div>
           )}
+          <Alert
+            message="Additional fields may be required"
+            description={
+              <>
+                Select databases require additional fields to be completed in
+                the next step to successfully connect the database. Learn what
+                requirements your databases has{' '}
+                <a
+                  href={DOCUMENTATION_LINK}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  here
+                </a>
+                .
+              </>
+            }
+            type="info"
+            showIcon
+          />
         </StyledBasicTab>
         <Tabs.TabPane tab={<span>{t('Advanced')}</span>} key="2">
           <ExtraOptions

superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts

@@ -58,6 +58,7 @@ export const StyledModal = styled(Modal)`
   .ant-modal-body {
     padding-left: 0;
     padding-right: 0;
+    margin-bottom: 110px;
   }
   .ant-tabs-top > .ant-tabs-nav {
     margin-bottom: 0;
@@ -82,6 +83,29 @@ export const StyledModal = styled(Modal)`
   .ant-modal-title > h4 {
     font-weight: bold;
   }
+
+  .ant-alert {
+    color: ${({ theme }) => theme.colors.info.dark2};
+    border: 1px solid ${({ theme }) => theme.colors.info.base};
+    font-size: ${({ theme }) => theme.gridUnit * 3}px;
+    padding: ${({ theme }) => theme.gridUnit * 4}px;
+    margin: ${({ theme }) => theme.gridUnit * 4}px 0 0;
+  }
+  .ant-alert-with-description {
+    .ant-alert-message,
+    .alert-with-description {
+      color: ${({ theme }) => theme.colors.info.dark2};
+      font-weight: bold;
+    }
+  }
+  .ant-modal-body {
+    padding-top: 0;
+    margin-bottom: 0;
+  }
+  .ant-tabs-content-holder {
+    overflow: auto;
+    max-height: 475px;
+  }
 `;
 
 export const StyledInputContainer = styled.div`
@@ -148,10 +172,6 @@ export const StyledInputContainer = styled.div`
       flex: 0 1 auto;
       width: 40%;
     }
-
-    &[name='sqlalchemy_uri'] {
-      margin-right: ${({ theme }) => theme.gridUnit * 3}px;
-    }
   }
   &.expandable {
     height: 0;
@@ -201,3 +221,52 @@ export const StyledBasicTab = styled(Tabs.TabPane)`
   padding-right: ${({ theme }) => theme.gridUnit * 4}px;
   margin-top: ${({ theme }) => theme.gridUnit * 4}px;
 `;
+
+export const EditHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0px;
+  margin: ${({ theme }) => theme.gridUnit * 4}px
+    ${({ theme }) => theme.gridUnit * 4}px
+    ${({ theme }) => theme.gridUnit * 9}px;
+`;
+
+export const CreateHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0px;
+  margin: ${({ theme }) => theme.gridUnit * 4}px
+    ${({ theme }) => theme.gridUnit * 4}px
+    ${({ theme }) => theme.gridUnit * 9}px;
+`;
+
+export const CreateHeaderTitle = styled.div`
+  color: ${({ theme }) => theme.colors.grayscale.dark1};
+  font-weight: bold;
+  font-size: ${({ theme }) => theme.typography.sizes.l}px;
+  padding: ${({ theme }) => theme.gridUnit * 1}px;
+`;
+
+export const CreateHeaderSubtitle = styled.div`
+  color: ${({ theme }) => theme.colors.grayscale.dark1};
+  font-size: ${({ theme }) => theme.typography.sizes.s}px;
+  padding: ${({ theme }) => theme.gridUnit * 1}px;
+`;
+
+export const EditHeaderTitle = styled.div`
+  color: ${({ theme }) => theme.colors.grayscale.light1};
+  font-size: ${({ theme }) => theme.typography.sizes.s}px;
+  text-transform: uppercase;
+`;
+
+export const EditHeaderSubtitle = styled.div`
+  color: ${({ theme }) => theme.colors.grayscale.dark1};
+  font-size: ${({ theme }) => theme.typography.sizes.xl}px;
+  font-weight: bold;
+`;
+
+export const Divider = styled.hr`
+  border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light1};
+`;

superset/databases/api.py

@@ -108,6 +108,7 @@ class DatabaseRestApi(BaseSupersetModelRestApi):
         "allow_ctas",
         "allow_cvas",
         "allow_dml",
+        "backend",
         "force_ctas_schema",
         "allow_multi_schema_metadata_fetch",
         "impersonate_user",