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

* fix(import): make to add the error alert

* fix(import): make to add licence

* fix(import): make to create ErrorAlert component and use errorMessage spelling

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

@@ -0,0 +1,63 @@
+/**
+ * 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 React, { FunctionComponent } from 'react';
+import { t, SupersetTheme } from '@superset-ui/core';
+
+import { getDatabaseDocumentationLinks } from 'src/views/CRUD/hooks';
+import Alert from 'src/components/Alert';
+import { antdWarningAlertStyles } from './styles';
+
+const supersetTextDocs = getDatabaseDocumentationLinks();
+export const DOCUMENTATION_LINK = supersetTextDocs
+  ? supersetTextDocs.support
+  : 'https://superset.apache.org/docs/databases/installing-database-drivers';
+
+export interface IProps {
+  errorMessage: string;
+}
+
+const ErrorAlert: FunctionComponent<IProps> = ({ errorMessage }) => (
+  <Alert
+    closable={false}
+    css={(theme: SupersetTheme) => antdWarningAlertStyles(theme)}
+    type="error"
+    showIcon
+    message={errorMessage}
+    description={
+      <>
+        <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>
+        .
+      </>
+    }
+  />
+);
+
+export default ErrorAlert;

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

@@ -25,6 +25,7 @@ import Modal from 'src/components/Modal';
 import { Upload } from 'src/components';
 import { useImportResource } from 'src/views/CRUD/hooks';
 import { ImportResourceName } from 'src/views/CRUD/types';
+import ErrorAlert from './ErrorAlert';
 
 const HelperMessage = styled.div`
   display: block;
@@ -116,7 +117,6 @@ const ImportModelsModal: FunctionComponent<ImportModelsModalProps> = ({
   resourceLabel,
   passwordsNeededMessage,
   confirmOverwriteMessage,
-  addDangerToast,
   onModelImport,
   show,
   onHide,
@@ -130,6 +130,7 @@ const ImportModelsModal: FunctionComponent<ImportModelsModalProps> = ({
   const [confirmedOverwrite, setConfirmedOverwrite] = useState<boolean>(false);
   const [fileList, setFileList] = useState<UploadFile[]>([]);
   const [importingModel, setImportingModel] = useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = useState<string>();
 
   const clearModal = () => {
     setFileList([]);
@@ -138,11 +139,11 @@ const ImportModelsModal: FunctionComponent<ImportModelsModalProps> = ({
     setNeedsOverwriteConfirm(false);
     setConfirmedOverwrite(false);
     setImportingModel(false);
+    setErrorMessage('');
   };
 
   const handleErrorMsg = (msg: string) => {
-    clearModal();
-    addDangerToast(msg);
+    setErrorMessage(msg);
   };
 
   const {
@@ -294,10 +295,12 @@ const ImportModelsModal: FunctionComponent<ImportModelsModalProps> = ({
           onRemove={removeFile}
           // upload is handled by hook
           customRequest={() => {}}
+          disabled={importingModel}
         >
           <Button loading={importingModel}>Select file</Button>
         </Upload>
       </StyledInputContainer>
+      {errorMessage && <ErrorAlert errorMessage={errorMessage} />}
       {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;
+    }
+  }
+`;