From 480439cacbc1edcbee5465f7274d301b8ce5fd17 Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Fri, 11 Feb 2022 17:12:59 +0100
Subject: [PATCH 1/2] feat(explore): Implement explore data table empty states

---
 .../components/DataTablesPane/index.tsx       | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/explore/components/DataTablesPane/index.tsx b/superset-frontend/src/explore/components/DataTablesPane/index.tsx
index d6cfcc257e24..5a0a208072ab 100644
--- 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>

From b0b80ab2e88e8e1e038e3d0606d66ea7719b8a48 Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Mon, 14 Feb 2022 10:37:33 +0100
Subject: [PATCH 2/2] Make empty state titles easier to translate

---
 .../components/DataTablesPane/index.tsx       | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/superset-frontend/src/explore/components/DataTablesPane/index.tsx b/superset-frontend/src/explore/components/DataTablesPane/index.tsx
index 5a0a208072ab..99bd404a7e88 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/index.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/index.tsx
@@ -155,12 +155,11 @@ const DataTable = ({
   }
   if (data) {
     if (data.length === 0) {
-      return (
-        <EmptyStateMedium
-          image="document.svg"
-          title={t(`No ${type} were returned for this query`)}
-        />
-      );
+      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
@@ -177,12 +176,11 @@ const DataTable = ({
     );
   }
   if (errorMessage) {
-    return (
-      <EmptyStateMedium
-        image="document.svg"
-        title={t(`Run a query to display ${type}`)}
-      />
-    );
+    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;
 };