fix(sqllab): Missing empty query result state (#27313)

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;

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,

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