fix(import): Add the error alert on failed database import

superset-frontend/src/components/ImportModal/index.tsx

@@ -18,14 +18,20 @@
  */
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { UploadChangeParam, UploadFile } from 'antd/lib/upload/interface';
-import { styled, t } from '@superset-ui/core';
+import { styled, t, SupersetTheme } from '@superset-ui/core';
 
+import Alert from 'src/components/Alert';
 import Button from 'src/components/Button';
 import Modal from 'src/components/Modal';
 import { Upload } from 'src/components';
-import { useImportResource } from 'src/views/CRUD/hooks';
+import {
+  useImportResource,
+  getDatabaseDocumentationLinks,
+} from 'src/views/CRUD/hooks';
 import { ImportResourceName } from 'src/views/CRUD/types';
 
+import { antdWarningAlertStyles } from './styles';
+
 const HelperMessage = styled.div`
   display: block;
   color: ${({ theme }) => theme.colors.grayscale.base};
@@ -97,6 +103,12 @@ const StyledInputContainer = styled.div`
   }
 `;
 
+const supersetTextDocs = getDatabaseDocumentationLinks();
+
+export const DOCUMENTATION_LINK = supersetTextDocs
+  ? supersetTextDocs.support
+  : 'https://superset.apache.org/docs/databases/installing-database-drivers';
+
 export interface ImportModelsModalProps {
   resourceName: ImportResourceName;
   resourceLabel: string;
@@ -116,7 +128,6 @@ const ImportModelsModal: FunctionComponent<ImportModelsModalProps> = ({
   resourceLabel,
   passwordsNeededMessage,
   confirmOverwriteMessage,
-  addDangerToast,
   onModelImport,
   show,
   onHide,
@@ -130,6 +141,7 @@ const ImportModelsModal: FunctionComponent<ImportModelsModalProps> = ({
   const [confirmedOverwrite, setConfirmedOverwrite] = useState<boolean>(false);
   const [fileList, setFileList] = useState<UploadFile[]>([]);
   const [importingModel, setImportingModel] = useState<boolean>(false);
+  const [errMsg, setErrMsg] = useState<string>();
 
   const clearModal = () => {
     setFileList([]);
@@ -142,7 +154,7 @@ const ImportModelsModal: FunctionComponent<ImportModelsModalProps> = ({
 
   const handleErrorMsg = (msg: string) => {
     clearModal();
-    addDangerToast(msg);
+    setErrMsg(msg);
   };
 
   const {
@@ -261,6 +273,34 @@ const ImportModelsModal: FunctionComponent<ImportModelsModalProps> = ({
     );
   };
 
+  const renderErrMsg = () => (
+    <Alert
+      closable={false}
+      css={(theme: SupersetTheme) => antdWarningAlertStyles(theme)}
+      type="error"
+      showIcon
+      message=""
+      description={
+        <>
+          {errMsg}.
+          <br />
+          {t(
+            'Database driver for importing maybe not installed. Visit the Superset documentation page for installation instructions:',
+          )}
+          <a
+            href={DOCUMENTATION_LINK}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="additional-fields-alert-description"
+          >
+            {t('here')}
+          </a>
+          .
+        </>
+      }
+    />
+  );
+
   // Show/hide
   if (isHidden && show) {
     setIsHidden(false);
@@ -298,6 +338,7 @@ const ImportModelsModal: FunctionComponent<ImportModelsModalProps> = ({
           <Button loading={importingModel}>Select file</Button>
         </Upload>
       </StyledInputContainer>
+      {errMsg && renderErrMsg()}
       {renderPasswordFields()}
       {renderOverwriteConfirmation()}
     </Modal>

superset-frontend/src/components/ImportModal/styles.ts

@@ -0,0 +1,43 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { css, SupersetTheme } from '@superset-ui/core';
+
+export const antdWarningAlertStyles = (theme: SupersetTheme) => css`
+  border: 1px solid ${theme.colors.warning.light1};
+  padding: ${theme.gridUnit * 4}px;
+  margin: ${theme.gridUnit * 4}px 0;
+  color: ${theme.colors.warning.dark2};
+
+  .ant-alert-message {
+    margin: 0;
+  }
+
+  .ant-alert-description {
+    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;
+    }
+  }
+`;