feat(explore): Implement data table empty states (#18679)

* feat(explore): Implement explore data table empty states * Make empty state titles easier to translate
apache · Feb 14, 2022 · 42d97fb · 42d97fb
1 parent 8d6aff3
commit 42d97fb
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/superset-frontend/src/explore/components/DataTablesPane/index.tsx b/superset-frontend/src/explore/components/DataTablesPane/index.tsx
@@ -27,6 +27,7 @@ import {
 import Collapse from 'src/components/Collapse';
 import Tabs from 'src/components/Tabs';
 import Loading from 'src/components/Loading';
+import { EmptyStateMedium } from 'src/components/EmptyState';
 import TableView, { EmptyWrapperType } from 'src/components/TableView';
 import { getChartDataRequest } from 'src/chart/chartAction';
 import { getClientErrorObject } from 'src/utils/getClientErrorObject';
@@ -120,6 +121,7 @@ interface DataTableProps {
   isLoading: boolean;
   error: string | undefined;
   errorMessage: React.ReactElement | undefined;
+  type: 'results' | 'samples';
 }
 
 const DataTable = ({
@@ -132,6 +134,7 @@ const DataTable = ({
   isLoading,
   error,
   errorMessage,
+  type,
 }: DataTableProps) => {
   // this is to preserve the order of the columns, even if there are integer values,
   // while also only grabbing the first column's keys
@@ -152,14 +155,18 @@ const DataTable = ({
   }
   if (data) {
     if (data.length === 0) {
-      return <span>No data</span>;
+      const title =
+        type === 'samples'
+          ? t('No samples were returned for this query')
+          : t('No results were returned for this query');
+      return <EmptyStateMedium image="document.svg" title={title} />;
     }
     return (
       <TableView
         columns={columns}
         data={filteredData}
         pageSize={DATA_TABLE_PAGE_SIZE}
-        noDataText={t('No data')}
+        noDataText={t('No results')}
         emptyWrapperType={EmptyWrapperType.Small}
         className="table-condensed"
         isPaginationSticky
@@ -169,7 +176,11 @@ const DataTable = ({
     );
   }
   if (errorMessage) {
-    return <Error>{errorMessage}</Error>;
+    const title =
+      type === 'samples'
+        ? t('Run a query to display samples')
+        : t('Run a query to display results');
+    return <EmptyStateMedium image="document.svg" title={title} />;
   }
   return null;
 };
@@ -420,6 +431,7 @@ export const DataTablesPane = ({
                     filterText={filterText}
                     error={error[RESULT_TYPES.results]}
                     errorMessage={errorMessage}
+                    type={RESULT_TYPES.results}
                   />
                 </Tabs.TabPane>
                 <Tabs.TabPane
@@ -436,6 +448,7 @@ export const DataTablesPane = ({
                     filterText={filterText}
                     error={error[RESULT_TYPES.samples]}
                     errorMessage={errorMessage}
+                    type={RESULT_TYPES.samples}
                   />
                 </Tabs.TabPane>
               </Tabs>