feat: Added error alert for DB connection Modal

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

@@ -54,6 +54,7 @@ import ExtraOptions from './ExtraOptions';
 import SqlAlchemyForm from './SqlAlchemyForm';
 import DatabaseConnectionForm from './DatabaseConnectionForm';
 import {
+  antDErrorAlertStyles,
   antDAlertStyles,
   antDModalNoPaddingStyles,
   antDModalStyles,
@@ -285,6 +286,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const [tabKey, setTabKey] = useState<string>(DEFAULT_TAB_KEY);
   const [availableDbs, getAvailableDbs] = useAvailableDatabases();
   const [validationErrors, getValidation] = useDatabaseValidation();
+  const [hasErrors, setHasErrors] = useState<boolean>(false);
   const [hasConnectedDb, setHasConnectedDb] = useState<boolean>(false);
   const [dbName, setDbName] = useState('');
   const [isLoading, setLoading] = useState<boolean>(false);
@@ -596,10 +598,32 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     }
   }, [availableDbs]);
 
+  useEffect(() => {
+    if (validationErrors) {
+      setHasErrors(true);
+    } else {
+      setHasErrors(false);
+    }
+  }, [validationErrors]);
+  // Used as componentDidMount
+
   const tabChange = (key: string) => {
     setTabKey(key);
   };
 
+  const errorAlert = () => {
+    const errors = validationErrors;
+    return (
+      <Alert
+        type="error"
+        css={(theme: SupersetTheme) => antDErrorAlertStyles(theme)}
+        message="Missing Required Fields"
+        description={errors ? errors.port : ''}
+        showIcon
+      />
+    );
+  };
+
   const isDynamic = (engine: string | undefined) =>
     availableDbs?.databases.filter(
       (DB: DatabaseObject) => DB.engine === engine,
@@ -763,6 +787,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               onChange(ActionType.extraEditorChange, payload);
             }}
           />
+          {hasErrors && errorAlert}
         </Tabs.TabPane>
       </Tabs>
     </Modal>
@@ -910,6 +935,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                   Connect this database with a SQLAlchemy URI string instead
                 </Button>
                 {/* Step 2 */}
+                {hasErrors && errorAlert()}
               </>
             ))}
         </>

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

@@ -161,6 +161,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;