[superset] branch hugh/update-credentials created (now b075017)

[hu...@apache.org]

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

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


      at b075017  save this

This branch includes the following new commits:

     new b075017  save this

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.

[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>
   );
 };