From 1d6857dc06390e06c399ed0835fbd89de5366068 Mon Sep 17 00:00:00 2001 From: Taylor Date: Tue, 12 Apr 2022 16:20:54 -0400 Subject: [PATCH 1/3] fix(import): make to add the error alert --- .../src/components/ImportModal/index.tsx | 49 +++++++++++++++++-- .../src/components/ImportModal/styles.ts | 24 +++++++++ 2 files changed, 69 insertions(+), 4 deletions(-) create mode 100644 superset-frontend/src/components/ImportModal/styles.ts diff --git a/superset-frontend/src/components/ImportModal/index.tsx b/superset-frontend/src/components/ImportModal/index.tsx index e8c29b94e9561..63c5a614b418e 100644 --- a/superset-frontend/src/components/ImportModal/index.tsx +++ b/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 = ({ resourceLabel, passwordsNeededMessage, confirmOverwriteMessage, - addDangerToast, onModelImport, show, onHide, @@ -130,6 +141,7 @@ const ImportModelsModal: FunctionComponent = ({ const [confirmedOverwrite, setConfirmedOverwrite] = useState(false); const [fileList, setFileList] = useState([]); const [importingModel, setImportingModel] = useState(false); + const [errMsg, setErrMsg] = useState(); const clearModal = () => { setFileList([]); @@ -142,7 +154,7 @@ const ImportModelsModal: FunctionComponent = ({ const handleErrorMsg = (msg: string) => { clearModal(); - addDangerToast(msg); + setErrMsg(msg); }; const { @@ -261,6 +273,34 @@ const ImportModelsModal: FunctionComponent = ({ ); }; + const renderErrMsg = () => ( + antdWarningAlertStyles(theme)} + type="error" + showIcon + message="" + description={ + <> + {errMsg}. +
+ {t( + 'Database driver for importing maybe not installed. Visit the Superset documentation page for installation instructions:', + )} + + {t('here')} + + . + + } + /> + ); + // Show/hide if (isHidden && show) { setIsHidden(false); @@ -298,6 +338,7 @@ const ImportModelsModal: FunctionComponent = ({ + {errMsg && renderErrMsg()} {renderPasswordFields()} {renderOverwriteConfirmation()} diff --git a/superset-frontend/src/components/ImportModal/styles.ts b/superset-frontend/src/components/ImportModal/styles.ts new file mode 100644 index 0000000000000..918473b76b729 --- /dev/null +++ b/superset-frontend/src/components/ImportModal/styles.ts @@ -0,0 +1,24 @@ +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; + } + } +`; From df0d147d77cc47dbd95d1e168a5eb9bd6806b508 Mon Sep 17 00:00:00 2001 From: Taylor Date: Tue, 12 Apr 2022 16:30:17 -0400 Subject: [PATCH 2/3] fix(import): make to add licence --- .../src/components/ImportModal/styles.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/superset-frontend/src/components/ImportModal/styles.ts b/superset-frontend/src/components/ImportModal/styles.ts index 918473b76b729..c73dc7c1ab277 100644 --- a/superset-frontend/src/components/ImportModal/styles.ts +++ b/superset-frontend/src/components/ImportModal/styles.ts @@ -1,3 +1,22 @@ +/** + * 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` From 738e9320c5f9338bdc4c5c6e451e8a15c9d2a99e Mon Sep 17 00:00:00 2001 From: Taylor Date: Thu, 14 Apr 2022 11:14:09 -0400 Subject: [PATCH 3/3] fix(import): make to create ErrorAlert component and use errorMessage spelling --- .../src/components/ImportModal/ErrorAlert.tsx | 63 +++++++++++++++++++ .../src/components/ImportModal/index.tsx | 54 +++------------- 2 files changed, 71 insertions(+), 46 deletions(-) create mode 100644 superset-frontend/src/components/ImportModal/ErrorAlert.tsx diff --git a/superset-frontend/src/components/ImportModal/ErrorAlert.tsx b/superset-frontend/src/components/ImportModal/ErrorAlert.tsx new file mode 100644 index 0000000000000..91ee6467f4f9a --- /dev/null +++ b/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 = ({ errorMessage }) => ( + antdWarningAlertStyles(theme)} + type="error" + showIcon + message={errorMessage} + description={ + <> +
+ {t( + 'Database driver for importing maybe not installed. Visit the Superset documentation page for installation instructions:', + )} + + {t('here')} + + . + + } + /> +); + +export default ErrorAlert; diff --git a/superset-frontend/src/components/ImportModal/index.tsx b/superset-frontend/src/components/ImportModal/index.tsx index 63c5a614b418e..c13546f7d3bff 100644 --- a/superset-frontend/src/components/ImportModal/index.tsx +++ b/superset-frontend/src/components/ImportModal/index.tsx @@ -18,19 +18,14 @@ */ import React, { FunctionComponent, useEffect, useState } from 'react'; import { UploadChangeParam, UploadFile } from 'antd/lib/upload/interface'; -import { styled, t, SupersetTheme } from '@superset-ui/core'; +import { styled, t } 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, - getDatabaseDocumentationLinks, -} from 'src/views/CRUD/hooks'; +import { useImportResource } from 'src/views/CRUD/hooks'; import { ImportResourceName } from 'src/views/CRUD/types'; - -import { antdWarningAlertStyles } from './styles'; +import ErrorAlert from './ErrorAlert'; const HelperMessage = styled.div` display: block; @@ -103,12 +98,6 @@ 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; @@ -141,7 +130,7 @@ const ImportModelsModal: FunctionComponent = ({ const [confirmedOverwrite, setConfirmedOverwrite] = useState(false); const [fileList, setFileList] = useState([]); const [importingModel, setImportingModel] = useState(false); - const [errMsg, setErrMsg] = useState(); + const [errorMessage, setErrorMessage] = useState(); const clearModal = () => { setFileList([]); @@ -150,11 +139,11 @@ const ImportModelsModal: FunctionComponent = ({ setNeedsOverwriteConfirm(false); setConfirmedOverwrite(false); setImportingModel(false); + setErrorMessage(''); }; const handleErrorMsg = (msg: string) => { - clearModal(); - setErrMsg(msg); + setErrorMessage(msg); }; const { @@ -273,34 +262,6 @@ const ImportModelsModal: FunctionComponent = ({ ); }; - const renderErrMsg = () => ( - antdWarningAlertStyles(theme)} - type="error" - showIcon - message="" - description={ - <> - {errMsg}. -
- {t( - 'Database driver for importing maybe not installed. Visit the Superset documentation page for installation instructions:', - )} - - {t('here')} - - . - - } - /> - ); - // Show/hide if (isHidden && show) { setIsHidden(false); @@ -334,11 +295,12 @@ const ImportModelsModal: FunctionComponent = ({ onRemove={removeFile} // upload is handled by hook customRequest={() => {}} + disabled={importingModel} > - {errMsg && renderErrMsg()} + {errorMessage && } {renderPasswordFields()} {renderOverwriteConfirmation()}