From 5de931ac6d8396080939413102e3c9476d5a9ad4 Mon Sep 17 00:00:00 2001
From: AAfghahi <48933336+AAfghahi@users.noreply.github.com>
Date: Tue, 22 Jun 2021 18:43:56 -0400
Subject: [PATCH] feat: Added error alert for DB connection Modal  (#15242)

* fix: add icons (#15122)

* added alerts

* revisions

* added icon

* spinner

* added errorAlert

* added revisions

* current work

* revisions
---
 .../DatabaseModal/DatabaseConnectionForm.tsx  | 28 ++++++++++---------
 .../data/database/DatabaseModal/index.tsx     | 15 +++++++++-
 .../data/database/DatabaseModal/styles.ts     | 21 ++++++++++++++
 3 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
index c4f8e0379aafa..5b9c57a463876 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -210,19 +210,21 @@ const portField = ({
   validationErrors,
   db,
 }: FieldPropTypes) => (
-  <ValidatedInput
-    id="port"
-    name="port"
-    type="number"
-    required={required}
-    value={db?.parameters?.port}
-    validationMethods={{ onBlur: getValidation }}
-    errorMessage={validationErrors?.port}
-    placeholder="e.g. 5432"
-    className="form-group-w-50"
-    label="Port"
-    onChange={changeMethods.onParametersChange}
-  />
+  <>
+    <ValidatedInput
+      id="port"
+      name="port"
+      type="number"
+      required={required}
+      value={db?.parameters?.port as number}
+      validationMethods={{ onBlur: getValidation }}
+      errorMessage={validationErrors?.port}
+      placeholder="e.g. 5432"
+      className="form-group-w-50"
+      label="Port"
+      onChange={changeMethods.onParametersChange}
+    />
+  </>
 );
 const databaseField = ({
   required,
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 832cf03510771..6f106198676c5 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -56,6 +56,7 @@ import ExtraOptions from './ExtraOptions';
 import SqlAlchemyForm from './SqlAlchemyForm';
 import DatabaseConnectionForm from './DatabaseConnectionForm';
 import {
+  antDErrorAlertStyles,
   antDAlertStyles,
   antDModalNoPaddingStyles,
   antDModalStyles,
@@ -314,7 +315,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
 
   // Database fetch logic
   const {
-    state: { loading: dbLoading, resource: dbFetched },
+    state: { loading: dbLoading, resource: dbFetched, error: dbError },
     fetchResource,
     createResource,
     updateResource,
@@ -641,6 +642,16 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     setTabKey(key);
   };
 
+  const errorAlert = () => (
+    <Alert
+      type="error"
+      css={(theme: SupersetTheme) => antDErrorAlertStyles(theme)}
+      message="Missing Required Fields"
+      description="Please complete all required fields."
+      showIcon
+    />
+  );
+
   const renderFinishState = () => {
     if (!editNewDb) {
       return (
@@ -876,6 +887,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               onChange(ActionType.extraEditorChange, payload);
             }}
           />
+          {dbError && errorAlert()}
         </Tabs.TabPane>
       </Tabs>
     </Modal>
@@ -1001,6 +1013,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                   />
                 </div>
                 {/* Step 2 */}
+                {dbError && errorAlert()}
               </>
             ))}
         </>
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
index ca1f8e0342daf..e784bf84b88be 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -180,6 +180,27 @@ export const antDAlertStyles = (theme: SupersetTheme) => css`
   }
 `;
 
+export const antDErrorAlertStyles = (theme: SupersetTheme) => css`
+  padding: ${theme.gridUnit * 4}px;
+  margin: ${theme.gridUnit * 8}px ${theme.gridUnit * 4}px;
+  .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;
+    .ant-alert-icon {
+      margin-right: ${theme.gridUnit * 2.5}px;
+      font-size: ${theme.typography.sizes.l + 1}px;
+      position: relative;
+      top: ${theme.gridUnit / 4}px;
+    }
+  }
+`;
+
 export const formHelperStyles = (theme: SupersetTheme) => css`
   .required {
     margin-left: ${theme.gridUnit / 2}px;