feat: added alerts (#15103)

* added alerts * revisions
apache · Jun 11, 2021 · 5cb4871 · 5cb4871
1 parent 3105020
commit 5cb4871
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -41,6 +41,7 @@ import {
   useAvailableDatabases,
   useDatabaseValidation,
   getDatabaseImages,
+  getConnectionAlert,
 } from 'src/views/CRUD/hooks';
 import { useCommonConf } from 'src/views/CRUD/data/database/state';
 import {
@@ -208,6 +209,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const [isLoading, setLoading] = useState<boolean>(false);
   const conf = useCommonConf();
   const dbImages = getDatabaseImages();
+  const connectionAlert = getConnectionAlert();
   const isEditMode = !!databaseId;
   const sslForced = isFeatureEnabled(
     FeatureFlag.FORCE_DATABASE_CONNECTIONS_SSL,
@@ -358,6 +360,24 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           </Select.Option>
         ))}
       </Select>
+      <Alert
+        css={(theme: SupersetTheme) => antDAlertStyles(theme)}
+        type="info"
+        message={t('Want to add a new database?')}
+        description={
+          <>
+            Any databases that allow connetions via SQL Alchemy URIs can be
+            added. Learn about how to connect a database driver{' '}
+            <a
+              href={DOCUMENTATION_LINK}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              here.
+            </a>
+          </>
+        }
+      />
     </div>
   );
 
@@ -636,6 +656,14 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                   dbName={dbName}
                   dbModel={dbModel}
                 />
+                {connectionAlert && (
+                  <Alert
+                    css={(theme: SupersetTheme) => antDAlertStyles(theme)}
+                    type="info"
+                    message={t('Whitelisting IPs')}
+                    description={connectionAlert.WHITELISTED_IPS}
+                  />
+                )}
                 <DatabaseConnectionForm
                   db={db}
                   sslForced={sslForced}

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -127,7 +127,7 @@ export const antDModalStyles = (theme: SupersetTheme) => css`
 export const antDAlertStyles = (theme: SupersetTheme) => css`
   border: 1px solid ${theme.colors.info.base};
   padding: ${theme.gridUnit * 4}px;
-  margin: ${theme.gridUnit * 8}px 0 0;
+  margin: ${theme.gridUnit * 8}px ${theme.gridUnit * 3}px 0;
   .ant-alert-message {
     color: ${theme.colors.info.dark2};
     font-size: ${theme.typography.sizes.s + 1}px;

diff --git a/superset-frontend/src/views/CRUD/hooks.ts b/superset-frontend/src/views/CRUD/hooks.ts
@@ -598,6 +598,8 @@ export const copyQueryLink = (
 
 export const getDatabaseImages = () => SupersetText.DB_IMAGES;
 
+export const getConnectionAlert = () => SupersetText.DB_CONNECTION_ALERTS;
+
 export const testDatabaseConnection = (
   connection: DatabaseObject,
   handleErrorMsg: (errorMsg: string) => void,