feat(explore): Implement explore data table empty states

apache · Feb 11, 2022 · 480439c · 480439c
1 parent a7d505d
commit 480439c
Showing 1 changed file with 18 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,19 @@ const DataTable = ({
  }
  if (data) {
  if (data.length === 0) {
- return <span>No data</span>;
+ return (
+ <EmptyStateMedium
+ image="document.svg"
+ title={t(`No ${type} were returned for this query`)}
+ />
+ );
  }
  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 +177,12 @@ const DataTable = ({
  );
  }
  if (errorMessage) {
- return <Error>{errorMessage}</Error>;
+ return (
+ <EmptyStateMedium
+ image="document.svg"
+ title={t(`Run a query to display ${type}`)}
+ />
+ );
  }
  return null;
 };
@@ -420,6 +433,7 @@ export const DataTablesPane = ({
  filterText={filterText}
  error={error[RESULT_TYPES.results]}
  errorMessage={errorMessage}
+ type={RESULT_TYPES.results}
  />
  </Tabs.TabPane>
  <Tabs.TabPane
@@ -436,6 +450,7 @@ export const DataTablesPane = ({
  filterText={filterText}
  error={error[RESULT_TYPES.samples]}
  errorMessage={errorMessage}
+ type={RESULT_TYPES.samples}
  />
  </Tabs.TabPane>
  </Tabs>