chore: Empty state refactor (#31860)

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

@@ -20,7 +20,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import { useInView } from 'react-intersection-observer';
 import { omit } from 'lodash';
-import { EmptyStateMedium } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import {
   t,
   styled,
@@ -143,8 +143,9 @@ const QueryHistory = ({
     </>
   ) : (
     <StyledEmptyStateWrapper>
-      <EmptyStateMedium
+      <EmptyState
         title={t('Run a query to display query history')}
+        size="medium"
         image="document.svg"
       />
     </StyledEmptyStateWrapper>

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

@@ -19,7 +19,7 @@
 import { FC } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import Alert from 'src/components/Alert';
-import { EmptyStateMedium } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import { FeatureFlag, styled, t, isFeatureEnabled } from '@superset-ui/core';
 
 import { SqlLabRootState } from 'src/SqlLab/types';
@@ -67,7 +67,7 @@ const Results: FC<Props> = ({
   ) {
     return (
       <StyledEmptyStateWrapper>
-        <EmptyStateMedium
+        <EmptyState
           title={t('Run a query to display results')}
           image="document.svg"
         />

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

@@ -100,7 +100,7 @@ import {
   LocalStorageKeys,
   setItem,
 } from 'src/utils/localStorageHelpers';
-import { EmptyStateBig } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import Alert from 'src/components/Alert';
 import getBootstrapData from 'src/utils/getBootstrapData';
 import useLogAction from 'src/logger/useLogAction';
@@ -968,8 +968,9 @@ const SqlEditor: FC<Props> = ({
           <Skeleton active />
         </div>
       ) : showEmptyState && !hasSqlStatement ? (
-        <EmptyStateBig
+        <EmptyState
           image="vector.svg"
+          size="large"
           title={t('Select a database to write a query')}
           description={t(
             'Choose one of the available databases from the panel on the left.',

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

@@ -41,7 +41,7 @@ import { TableSelectorMultiple } from 'src/components/TableSelector';
 import { IconTooltip } from 'src/components/IconTooltip';
 import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';
 import type { DatabaseObject } from 'src/components/DatabaseSelector';
-import { emptyStateComponent } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import {
   getItem,
   LocalStorageKeys,
@@ -113,7 +113,7 @@ const SqlEditorLeftBar = ({
     'schema',
   ]);
 
-  const [emptyResultsWithSearch, setEmptyResultsWithSearch] = useState(false);
+  const [_emptyResultsWithSearch, setEmptyResultsWithSearch] = useState(false);
   const [userSelectedDb, setUserSelected] = useState<DatabaseObject | null>(
     null,
   );
@@ -249,7 +249,7 @@ const SqlEditorLeftBar = ({
     <LeftBarStyles data-test="sql-editor-left-bar">
       <TableSelectorMultiple
         onEmptyResults={onEmptyResults}
-        emptyState={emptyStateComponent(emptyResultsWithSearch)}
+        emptyState={<EmptyState />}
         database={userSelectedDb}
         getDbList={handleDbList}
         handleError={handleError}

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

@@ -27,7 +27,7 @@ import { Logger } from 'src/logger/LogUtils';
 import { Tooltip } from 'src/components/Tooltip';
 import { detectOS } from 'src/utils/common';
 import * as Actions from 'src/SqlLab/actions/sqlLab';
-import { EmptyStateBig } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import getBootstrapData from 'src/utils/getBootstrapData';
 import { locationContext } from 'src/pages/SqlLab/LocationContext';
 import SqlEditor from '../SqlEditor';
@@ -259,8 +259,9 @@ class TabbedSqlEditors extends PureComponent<TabbedSqlEditorsProps> {
         tab={emptyTab}
         closable={false}
       >
-        <EmptyStateBig
+        <EmptyState
           image="empty_sql_chart.svg"
+          size="large"
           description={t('Add a new tab to create SQL Query')}
         />
       </EditableTabs.TabPane>