fix(sqllab): Updated blank states for query results and query history (#19111)

* Empty states updated on result tab and query history tab

* Testing on query history blank state

* Testing on result tab with empty state

* Forgot to remove a comment

* Corrected empty state image size and centered with drag bar

* Centered blank states vertically

superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx

@@ -0,0 +1,50 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import QueryHistory from 'src/SqlLab/components/QueryHistory';
+
+const NOOP = () => {};
+const mockedProps = {
+  queries: [],
+  actions: {
+    queryEditorSetSql: NOOP,
+    cloneQueryToNewTab: NOOP,
+    fetchQueryResults: NOOP,
+    clearQueryResults: NOOP,
+    removeQuery: NOOP,
+  },
+  displayLimit: 1000,
+};
+
+const setup = (overrides = {}) => (
+  <QueryHistory {...mockedProps} {...overrides} />
+);
+
+describe('QueryHistory', () => {
+  it('Renders an empty state for query history', () => {
+    render(setup());
+
+    const emptyStateText = screen.getByText(
+      /run a query to display query history/i,
+    );
+
+    expect(emptyStateText).toBeVisible();
+  });
+});

superset-frontend/src/SqlLab/components/QueryHistory/index.tsx

@@ -17,8 +17,8 @@
  * under the License.
  */
 import React from 'react';
-import Alert from 'src/components/Alert';
-import { t } from '@superset-ui/core';
+import { EmptyStateMedium } from 'src/components/EmptyState';
+import { t, styled } from '@superset-ui/core';
 import { Query } from 'src/SqlLab/types';
 import QueryTable from 'src/SqlLab/components/QueryTable';
 
@@ -34,6 +34,17 @@ interface QueryHistoryProps {
   displayLimit: number;
 }
 
+const StyledEmptyStateWrapper = styled.div`
+  height: 100%;
+  .ant-empty-image img {
+    margin-right: 28px;
+  }
+
+  p {
+    margin-right: 28px;
+  }
+`;
+
 const QueryHistory = ({ queries, actions, displayLimit }: QueryHistoryProps) =>
   queries.length > 0 ? (
     <QueryTable
@@ -52,7 +63,12 @@ const QueryHistory = ({ queries, actions, displayLimit }: QueryHistoryProps) =>
       displayLimit={displayLimit}
     />
   ) : (
-    <Alert type="info" message={t('No query history yet...')} />
+    <StyledEmptyStateWrapper>
+      <EmptyStateMedium
+        title={t('Run a query to display query history')}
+        image="document.svg"
+      />
+    </StyledEmptyStateWrapper>
   );
 
 export default QueryHistory;

superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.jsx

@@ -20,11 +20,15 @@ import React from 'react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { styledShallow as shallow } from 'spec/helpers/theming';
+import { render, screen, act } from 'spec/helpers/testing-library';
 import SouthPaneContainer from 'src/SqlLab/components/SouthPane/state';
 import ResultSet from 'src/SqlLab/components/ResultSet';
 import '@testing-library/jest-dom/extend-expect';
 import { STATUS_OPTIONS } from 'src/SqlLab/constants';
 import { initialState } from 'src/SqlLab/fixtures';
+import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
+
+const NOOP = () => {};
 
 const mockedProps = {
   editorQueries: [
@@ -71,13 +75,36 @@ const mockedProps = {
   offline: false,
 };
 
+const mockedEmptyProps = {
+  editorQueries: [],
+  latestQueryId: '',
+  dataPreviewQueries: [],
+  actions: {
+    queryEditorSetSql: NOOP,
+    cloneQueryToNewTab: NOOP,
+    fetchQueryResults: NOOP,
+    clearQueryResults: NOOP,
+    removeQuery: NOOP,
+    setActiveSouthPaneTab: NOOP,
+  },
+  activeSouthPaneTab: '',
+  height: 100,
+  databases: '',
+  offline: false,
+  displayLimit: 100,
+  user: UserWithPermissionsAndRoles,
+  defaultQueryLimit: 100,
+};
+
 const middlewares = [thunk];
 const mockStore = configureStore(middlewares);
 const store = mockStore(initialState);
+const setup = (overrides = {}) => (
+  <SouthPaneContainer store={store} {...mockedProps} {...overrides} />
+);
 
-describe('SouthPane', () => {
-  const getWrapper = () =>
-    shallow(<SouthPaneContainer store={store} {...mockedProps} />).dive();
+describe('SouthPane - Enzyme', () => {
+  const getWrapper = () => shallow(setup()).dive();
 
   let wrapper;
 
@@ -95,3 +122,20 @@ describe('SouthPane', () => {
     );
   });
 });
+
+describe('SouthPane - RTL', () => {
+  const renderAndWait = overrides => {
+    const mounted = act(async () => {
+      render(setup(overrides));
+    });
+
+    return mounted;
+  };
+  it('Renders an empty state for results', async () => {
+    await renderAndWait(mockedEmptyProps);
+
+    const emptyStateText = screen.getByText(/run a query to display results/i);
+
+    expect(emptyStateText).toBeVisible();
+  });
+});

superset-frontend/src/SqlLab/components/SouthPane/index.tsx

@@ -20,6 +20,7 @@ import React, { createRef } from 'react';
 import shortid from 'shortid';
 import Alert from 'src/components/Alert';
 import Tabs from 'src/components/Tabs';
+import { EmptyStateMedium } from 'src/components/EmptyState';
 import { t, styled } from '@superset-ui/core';
 
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
@@ -93,6 +94,17 @@ const StyledPane = styled.div`
   }
 `;
 
+const StyledEmptyStateWrapper = styled.div`
+  height: 100%;
+  .ant-empty-image img {
+    margin-right: 28px;
+  }
+
+  p {
+    margin-right: 28px;
+  }
+`;
+
 export default function SouthPane({
   editorQueries,
   latestQueryId,
@@ -161,7 +173,12 @@ export default function SouthPane({
       }
     } else {
       results = (
-        <Alert type="info" message={t('Run a query to display results here')} />
+        <StyledEmptyStateWrapper>
+          <EmptyStateMedium
+            title={t('Run a query to display results')}
+            image="document.svg"
+          />
+        </StyledEmptyStateWrapper>
       );
     }
     return results;