[superset] 01/01: save this

[hu...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

hugh pushed a commit to branch hugh/update-credentials
in repository https://gitbox.apache.org/repos/asf/superset.git

commit b0750176c8e0d23c30bee337360cd5b8fdc29a1c
Author: hughhhh <hu...@gmail.com>
AuthorDate: Mon May 3 20:24:32 2021 -0400

    save this
---
 .../CRUD/data/database/DatabaseModal/index.tsx     | 65 ++++++++++++++++++++--
 1 file changed, 60 insertions(+), 5 deletions(-)

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 f927c59..70082c0 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 import React, {
   FunctionComponent,
   useEffect,
@@ -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,
@@ -125,6 +126,42 @@ function dbReducer(
 
 const DEFAULT_TAB_KEY = '1';
 
+const StyledDBModal = styled(StyledModal)`
+  .ant-alert {
+    margin-top: ${({ theme }) => theme.gridUnit * 4}px;
+    color: #325d7e;
+    border: 1px solid #66bcfe;
+    font-size: 13px;
+    padding: 15px;
+  }
+  .ant-alert-message {
+    color: #325d7e;
+    font-weight: bold;
+  }
+  .ant-modal-body {
+    padding-top: 0;
+  }
+`;
+
+const Header = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: ${({ theme }) => theme.gridUnit * 4}px;
+  margin-bottom: 16px;
+`;
+
+const HeaderTitle = styled.div`
+  color: ${({ theme }) => theme.colors.grayscale.dark1} !important;
+  font-weight: bold;
+  font-size: ${({ theme }) => theme.typography.sizes.l}px;
+`;
+
+const HeaderSubtitle = styled.div`
+  color: ${({ theme }) => theme.colors.grayscale.dark1} !important;
+  font-size: ${({ theme }) => theme.typography.sizes.s}px;
+`;
+
 const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   addDangerToast,
   addSuccessToast,
@@ -273,7 +310,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   };
 
   return isEditMode || useSqlAlchemyForm ? (
-    <StyledModal
+    <StyledDBModal
       name="database"
       className="database-modal"
       disablePrimaryButton={disableSave}
@@ -287,6 +324,18 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         <h4>{isEditMode ? t('Edit database') : t('Connect a database')}</h4>
       }
     >
+    {!isEditMode && (
+        <Header>
+          <HeaderTitle>Enter Primary Credentials</HeaderTitle>
+          <HeaderSubtitle>
+            Need help? Learn how to connect your database{' '}
+            <a href="https://superset.apache.org/docs/databases/installing-database-drivers">
+              here
+            </a>
+            .
+          </HeaderSubtitle>
+        </Header>
+      )}
       <Tabs
         defaultActiveKey={DEFAULT_TAB_KEY}
         activeKey={tabKey}
@@ -336,9 +385,15 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           />
         </Tabs.TabPane>
       </Tabs>
-    </StyledModal>
+      <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 here"
+        type="info"
+        showIcon
+      />
+    </StyledDBModal>
   ) : (
-    <StyledModal
+    <StyledDBModal
       name="database"
       className="database-modal"
       disablePrimaryButton={disableSave}
@@ -353,7 +408,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       <div>
         <p>TODO: db form</p>
       </div>
-    </StyledModal>
+    </StyledDBModal>
   );
 };