Merge branch 'master' into feat-control-panel-header

apache · Apr 19, 2022 · 70e4988 · 70e4988
2 parents 6d5748d + 594523e
commit 70e4988
Show file tree

Hide file tree

Showing 12 changed files with 637 additions and 369 deletions.
diff --git a/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts b/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts
@@ -121,14 +121,12 @@ describe('Test datatable', () => {
     cy.visitChartByName('Daily Totals');
   });
   it('Data Pane opens and loads results', () => {
-    cy.get('[data-test="data-tab"]').click();
+    cy.contains('Results').click();
     cy.get('[data-test="row-count-label"]').contains('26 rows retrieved');
-    cy.contains('View results');
     cy.get('.ant-empty-description').should('not.exist');
   });
   it('Datapane loads view samples', () => {
-    cy.get('[data-test="data-tab"]').click();
-    cy.contains('View samples').click();
+    cy.contains('Samples').click();
     cy.get('[data-test="row-count-label"]').contains('1k rows retrieved');
     cy.get('.ant-empty-description').should('not.exist');
   });

diff --git a/superset-frontend/src/components/ImportModal/ErrorAlert.tsx 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<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;
diff --git a/superset-frontend/src/components/ImportModal/index.tsx b/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>

diff --git a/superset-frontend/src/components/ImportModal/styles.ts b/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;
+    }
+  }
+`;
diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx
@@ -67,41 +67,56 @@ export const CopyButton = styled(Button)`
   }
 `;
 
-const CopyNode = (
-  <CopyButton buttonSize="xsmall" aria-label={t('Copy')}>
-    <i className="fa fa-clipboard" />
-  </CopyButton>
-);
-
 export const CopyToClipboardButton = ({
   data,
   columns,
 }: {
   data?: Record<string, any>;
   columns?: string[];
-}) => (
-  <CopyToClipboard
-    text={
-      data && columns ? prepareCopyToClipboardTabularData(data, columns) : ''
-    }
-    wrapped={false}
-    copyNode={CopyNode}
-  />
-);
+}) => {
+  const theme = useTheme();
+  return (
+    <CopyToClipboard
+      text={
+        data && columns ? prepareCopyToClipboardTabularData(data, columns) : ''
+      }
+      wrapped={false}
+      copyNode={
+        <Icons.CopyOutlined
+          iconColor={theme.colors.grayscale.base}
+          iconSize="l"
+          aria-label={t('Copy')}
+          role="button"
+          css={css`
+            &.anticon > * {
+              line-height: 0;
+            }
+          `}
+        />
+      }
+    />
+  );
+};
 
 export const FilterInput = ({
   onChangeHandler,
 }: {
   onChangeHandler(filterText: string): void;
 }) => {
+  const theme = useTheme();
   const debouncedChangeHandler = debounce(onChangeHandler, SLOW_DEBOUNCE);
   return (
     <Input
+      prefix={<Icons.Search iconColor={theme.colors.grayscale.base} />}
       placeholder={t('Search')}
       onChange={(event: any) => {
         const filterText = event.target.value;
         debouncedChangeHandler(filterText);
       }}
+      css={css`
+        width: 200px;
+        margin-right: ${theme.gridUnit * 2}px;
+      `}
     />
   );
 };
@@ -250,7 +265,9 @@ export const useFilteredTableData = (
   const rowsAsStrings = useMemo(
     () =>
       data?.map((row: Record<string, any>) =>
-        Object.values(row).map(value => value?.toString().toLowerCase()),
+        Object.values(row).map(value =>
+          value ? value.toString().toLowerCase() : t('N/A'),
+        ),
       ) ?? [],
     [data],
   );