From a0f25005852a6b4d794fbef75a5dc53c4c70a56c Mon Sep 17 00:00:00 2001
From: "JUST.in DO IT" <justin.park@airbnb.com>
Date: Fri, 1 Mar 2024 10:08:07 -0800
Subject: [PATCH] fix(sqllab): Missing empty query result state (#27313)

---
 .../src/SqlLab/components/SouthPane/Results.tsx    |  2 +-
 .../SqlLab/components/SouthPane/SouthPane.test.tsx | 13 +++++++++++++
 .../src/SqlLab/components/SouthPane/index.tsx      | 14 ++++++--------
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SouthPane/Results.tsx b/superset-frontend/src/SqlLab/components/SouthPane/Results.tsx
index b5167be61f4bf..44e92ceaf91cb 100644
--- a/superset-frontend/src/SqlLab/components/SouthPane/Results.tsx
+++ b/superset-frontend/src/SqlLab/components/SouthPane/Results.tsx
@@ -29,7 +29,7 @@ import { LOCALSTORAGE_MAX_QUERY_AGE_MS } from '../../constants';
 const EXTRA_HEIGHT_RESULTS = 8; // we need extra height in RESULTS tab. because the height from props was calculated based on PREVIEW tab.
 
 type Props = {
-  latestQueryId: string;
+  latestQueryId?: string;
   height: number;
   displayLimit: number;
   defaultQueryLimit: number;
diff --git a/superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.tsx b/superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.tsx
index c978a4ca3233b..2e66c2f33c3ad 100644
--- a/superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.tsx
+++ b/superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.tsx
@@ -123,6 +123,19 @@ test('should render offline when the state is offline', async () => {
   expect(getByText(STATUS_OPTIONS.offline)).toBeVisible();
 });
 
+test('should render empty result state when latestQuery is empty', () => {
+  const { getAllByRole } = render(
+    <SouthPane {...mockedProps} latestQueryId={undefined} />,
+    {
+      useRedux: true,
+      initialState: mockState,
+    },
+  );
+
+  const resultPanel = getAllByRole('tabpanel')[0];
+  expect(resultPanel).toHaveTextContent('Run a query to display results');
+});
+
 test('should render tabs for table preview queries', () => {
   const { getAllByRole } = render(<SouthPane {...mockedProps} />, {
     useRedux: true,
diff --git a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx b/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
index 0bbce99b1c43e..941f0f7523c6b 100644
--- a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
@@ -144,14 +144,12 @@ const SouthPane = ({
         animated={false}
       >
         <Tabs.TabPane tab={t('Results')} key="Results">
-          {latestQueryId && (
-            <Results
-              height={innerTabContentHeight}
-              latestQueryId={latestQueryId}
-              displayLimit={displayLimit}
-              defaultQueryLimit={defaultQueryLimit}
-            />
-          )}
+          <Results
+            height={innerTabContentHeight}
+            latestQueryId={latestQueryId}
+            displayLimit={displayLimit}
+            defaultQueryLimit={defaultQueryLimit}
+          />
         </Tabs.TabPane>
         <Tabs.TabPane tab={t('Query history')} key="History">
           <QueryHistory