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
apache · Jun 22, 2021 · 5de931a · 5de931a
1 parent 7c42a7c
commit 5de931a
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 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
@@ -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
@@ -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
@@ -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;