chore: Empty state refactor (#31860)

superset-frontend/package-lock.json

@@ -1714,15 +1714,18 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
-      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.24.7",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -3496,13 +3499,13 @@
       "license": "MIT"
     },
     "node_modules/@babel/types": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz",
-      "integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==",
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.5.tgz",
+      "integrity": "sha512-L6mZmwFDK6Cjh1nRCLXpa6no13ZIioJDz7mdkzHv399pThrTa/k0nUlNaenOeh2kWu/iaOQYElEpKPUswUa9Vg==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.24.8",
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -50919,13 +50922,6 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/to-object-path": {
       "version": "0.3.0",
       "dev": true,
@@ -56297,26 +56293,6 @@
         "node": ">=6.9.0"
       }
     },
-    "packages/superset-ui-demo/node_modules/@babel/helper-string-parser": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
-      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "packages/superset-ui-demo/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "packages/superset-ui-demo/node_modules/@babel/helper-validator-option": {
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
@@ -58309,26 +58285,6 @@
         "react-dom": "^16.13.1"
       }
     },
-    "plugins/plugin-chart-pivot-table/node_modules/@babel/helper-string-parser": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
-      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "plugins/plugin-chart-pivot-table/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "plugins/plugin-chart-pivot-table/node_modules/@babel/types": {
       "version": "7.26.3",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
@@ -59449,12 +59405,14 @@
       }
     },
     "@babel/helper-string-parser": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
-      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ=="
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA=="
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.24.7"
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ=="
     },
     "@babel/helper-validator-option": {
       "version": "7.24.7",
@@ -60507,13 +60465,12 @@
       }
     },
     "@babel/types": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz",
-      "integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==",
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.5.tgz",
+      "integrity": "sha512-L6mZmwFDK6Cjh1nRCLXpa6no13ZIioJDz7mdkzHv399pThrTa/k0nUlNaenOeh2kWu/iaOQYElEpKPUswUa9Vg==",
       "requires": {
-        "@babel/helper-string-parser": "^7.24.8",
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
       }
     },
     "@base2/pretty-print-object": {
@@ -66764,18 +66721,6 @@
           "integrity": "sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==",
           "dev": true
         },
-        "@babel/helper-string-parser": {
-          "version": "7.25.9",
-          "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
-          "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
-          "dev": true
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.25.9",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-          "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
-          "dev": true
-        },
         "@babel/helper-validator-option": {
           "version": "7.25.9",
           "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
@@ -68904,18 +68849,6 @@
         "jest": "^29.7.0"
       },
       "dependencies": {
-        "@babel/helper-string-parser": {
-          "version": "7.25.9",
-          "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
-          "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
-          "dev": true
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.25.9",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-          "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
-          "dev": true
-        },
         "@babel/types": {
           "version": "7.26.3",
           "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
@@ -93957,9 +93890,6 @@
       "version": "1.0.5",
       "dev": true
     },
-    "to-fast-properties": {
-      "version": "2.0.0"
-    },
     "to-object-path": {
       "version": "0.3.0",
       "dev": true,

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>

superset-frontend/src/assets/images/chart.svg

@@ -16,7 +16,7 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<svg width="160" height="166" viewBox="0 0 160 166" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M123.638 8C123.362 8 123.138 8.22386 123.138 8.5V158H151.896V8.5C151.896 8.22386 151.672 8 151.396 8H123.638ZM84.7933 40.6426C84.7933 40.3665 85.0171 40.1426 85.2933 40.1426H113.052C113.328 40.1426 113.552 40.3665 113.552 40.6426V158H84.7933V40.6426ZM46.9486 72.2853C46.6725 72.2853 46.4486 72.5091 46.4486 72.7853V157.999H75.2071V72.7853C75.2071 72.5091 74.9832 72.2853 74.7071 72.2853H46.9486ZM8.604 93.7147C8.32786 93.7147 8.104 93.9385 8.104 94.2147V158H36.8625V94.2147C36.8625 93.9385 36.6386 93.7147 36.3625 93.7147H8.604Z" fill="#FAFAFA"/>
-<path d="M123.138 158H122.638V158.5H123.138V158ZM151.896 158V158.5H152.396V158H151.896ZM113.552 158V158.5H114.052V158H113.552ZM84.7933 158H84.2933V158.5H84.7933V158ZM46.4486 157.999H45.9486V158.499H46.4486V157.999ZM75.2071 157.999V158.499H75.7071V157.999H75.2071ZM8.104 158H7.604V158.5H8.104V158ZM36.8625 158V158.5H37.3625V158H36.8625ZM123.638 8.5V8.5V7.5C123.086 7.5 122.638 7.94772 122.638 8.5H123.638ZM123.638 158V8.5H122.638V158H123.638ZM151.896 157.5H123.138V158.5H151.896V157.5ZM151.396 8.5V158H152.396V8.5H151.396ZM151.396 8.5H152.396C152.396 7.94772 151.949 7.5 151.396 7.5V8.5ZM123.638 8.5H151.396V7.5H123.638V8.5ZM85.2933 39.6426C84.741 39.6426 84.2933 40.0904 84.2933 40.6426H85.2933V39.6426ZM113.052 39.6426H85.2933V40.6426H113.052V39.6426ZM114.052 40.6426C114.052 40.0904 113.604 39.6426 113.052 39.6426V40.6426H114.052ZM114.052 158V40.6426H113.052V158H114.052ZM84.7933 158.5H113.552V157.5H84.7933V158.5ZM84.2933 40.6426V158H85.2933V40.6426H84.2933ZM46.9486 72.7853V71.7853C46.3964 71.7853 45.9486 72.233 45.9486 72.7853H46.9486ZM46.9486 157.999V72.7853H45.9486V157.999H46.9486ZM75.2071 157.499H46.4486V158.499H75.2071V157.499ZM74.7071 72.7853V157.999H75.7071V72.7853H74.7071ZM74.7071 72.7853H75.7071C75.7071 72.233 75.2594 71.7853 74.7071 71.7853V72.7853ZM46.9486 72.7853H74.7071V71.7853H46.9486V72.7853ZM8.604 94.2147H8.604V93.2147C8.05172 93.2147 7.604 93.6624 7.604 94.2147H8.604ZM8.604 158V94.2147H7.604V158H8.604ZM36.8625 157.5H8.104V158.5H36.8625V157.5ZM36.3625 94.2147V158H37.3625V94.2147H36.3625ZM36.3625 94.2147H37.3625C37.3625 93.6624 36.9147 93.2147 36.3625 93.2147V94.2147ZM8.604 94.2147H36.3625V93.2147H8.604V94.2147Z" fill="#D9D9D9"/>
+<svg width="160" height="170" viewBox="0 0 160 166" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M123.638 8C123.362 8 123.138 8.22386 123.138 8.5V158H151.896V8.5C151.896 8.22386 151.672 8 151.396 8H123.638ZM84.7933 40.6426C84.7933 40.3665 85.0171 40.1426 85.2933 40.1426H113.052C113.328 40.1426 113.552 40.3665 113.552 40.6426V158H84.7933V40.6426ZM46.9486 72.2853C46.6725 72.2853 46.4486 72.5091 46.4486 72.7853V157.999H75.2071V72.7853C75.2071 72.5091 74.9832 72.2853 74.7071 72.2853H46.9486ZM8.604 93.7147C8.32786 93.7147 8.104 93.9385 8.104 94.2147V158H36.8625V94.2147C36.8625 93.9385 36.6386 93.7147 36.3625 93.7147H8.604Z" fill="currentColor" stroke="currentColor" fill-opacity="0.5" />
+<path d="M123.138 158H122.638V158.5H123.138V158ZM151.896 158V158.5H152.396V158H151.896ZM113.552 158V158.5H114.052V158H113.552ZM84.7933 158H84.2933V158.5H84.7933V158ZM46.4486 157.999H45.9486V158.499H46.4486V157.999ZM75.2071 157.999V158.499H75.7071V157.999H75.2071ZM8.104 158H7.604V158.5H8.104V158ZM36.8625 158V158.5H37.3625V158H36.8625ZM123.638 8.5V8.5V7.5C123.086 7.5 122.638 7.94772 122.638 8.5H123.638ZM123.638 158V8.5H122.638V158H123.638ZM151.896 157.5H123.138V158.5H151.896V157.5ZM151.396 8.5V158H152.396V8.5H151.396ZM151.396 8.5H152.396C152.396 7.94772 151.949 7.5 151.396 7.5V8.5ZM123.638 8.5H151.396V7.5H123.638V8.5ZM85.2933 39.6426C84.741 39.6426 84.2933 40.0904 84.2933 40.6426H85.2933V39.6426ZM113.052 39.6426H85.2933V40.6426H113.052V39.6426ZM114.052 40.6426C114.052 40.0904 113.604 39.6426 113.052 39.6426V40.6426H114.052ZM114.052 158V40.6426H113.052V158H114.052ZM84.7933 158.5H113.552V157.5H84.7933V158.5ZM84.2933 40.6426V158H85.2933V40.6426H84.2933ZM46.9486 72.7853V71.7853C46.3964 71.7853 45.9486 72.233 45.9486 72.7853H46.9486ZM46.9486 157.999V72.7853H45.9486V157.999H46.9486ZM75.2071 157.499H46.4486V158.499H75.2071V157.499ZM74.7071 72.7853V157.999H75.7071V72.7853H74.7071ZM74.7071 72.7853H75.7071C75.7071 72.233 75.2594 71.7853 74.7071 71.7853V72.7853ZM46.9486 72.7853H74.7071V71.7853H46.9486V72.7853ZM8.604 94.2147H8.604V93.2147C8.05172 93.2147 7.604 93.6624 7.604 94.2147H8.604ZM8.604 158V94.2147H7.604V158H8.604ZM36.8625 157.5H8.104V158.5H36.8625V157.5ZM36.3625 94.2147V158H37.3625V94.2147H36.3625ZM36.3625 94.2147H37.3625C37.3625 93.6624 36.9147 93.2147 36.3625 93.2147V94.2147ZM8.604 94.2147H36.3625V93.2147H8.604V94.2147Z" fill="currentColor" stroke="currentColor" fill-opacity="0.5"/>
 </svg>

superset-frontend/src/assets/images/document.svg

@@ -17,6 +17,6 @@ specific language governing permissions and limitations
 under the License.
 -->
 <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M53.2326 10.7391L53.2336 10.7402L63.5 21.7963V79.5H0.5V0.5H43.7811L53.2326 10.7391Z" fill="#FAFAFA" stroke="#D9D9D9"/>
-<path d="M44 0V22.4H64" stroke="#D9D9D9"/>
+<path d="M53.2326 10.7391L53.2336 10.7402L63.5 21.7963V79.5H0.5V0.5H43.7811L53.2326 10.7391Z" fill="currentColor" stroke="currentColor" fill-opacity="0.5"/>
+<path d="M44 0V22.4H64" stroke="currentColor"/>
 </svg>

superset-frontend/src/assets/images/empty-charts.svg

@@ -16,15 +16,15 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<svg width="119" height="78" viewBox="0 0 119 78" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="16" y="1" width="86" height="62" rx="3" stroke="#D1D1D1" stroke-width="2"/>
-<mask id="path-2-inside-1" fill="white">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M58 10.6416C58 9.53706 57.1014 8.63294 56.0006 8.72373C43.6813 9.73974 34 20.0601 34 32.6416C34 45.8965 44.7452 56.6416 58 56.6416C70.5815 56.6416 80.9019 46.9604 81.9179 34.641C82.0087 33.5402 81.1046 32.6416 80 32.6416L60 32.6416C58.8954 32.6416 58 31.7462 58 30.6416V10.6416Z"/>
-</mask>
-<path d="M60 32.6416V30.6416V32.6416ZM81.9179 34.641L83.9111 34.8054L81.9179 34.641ZM36 32.6416C36 21.1096 44.8743 11.6481 56.165 10.717L55.8362 6.7305C42.4882 7.83135 32 19.0106 32 32.6416H36ZM58 54.6416C45.8497 54.6416 36 44.7919 36 32.6416H32C32 47.001 43.6406 58.6416 58 58.6416V54.6416ZM79.9247 34.4766C78.9935 45.7673 69.5321 54.6416 58 54.6416V58.6416C71.631 58.6416 82.8103 48.1535 83.9111 34.8054L79.9247 34.4766ZM80 30.6416L60 30.6416V34.6416L80 34.6416V30.6416ZM60 30.6416V10.6416H56V30.6416H60ZM60 30.6416H56C56 32.8508 57.7909 34.6416 60 34.6416V30.6416ZM83.9111 34.8054C84.1069 32.4312 82.1629 30.6416 80 30.6416V34.6416C80.0053 34.6416 79.9929 34.6429 79.9743 34.6238C79.9641 34.6133 79.9495 34.594 79.9382 34.5638C79.926 34.5312 79.9228 34.499 79.9247 34.4766L83.9111 34.8054ZM56.165 10.717C56.1426 10.7188 56.1104 10.7156 56.0778 10.7034C56.0477 10.6922 56.0283 10.6775 56.0178 10.6673C55.9987 10.6487 56 10.6363 56 10.6416H60C60 8.47875 58.2104 6.53469 55.8362 6.7305L56.165 10.717Z" fill="#D1D1D1" mask="url(#path-2-inside-1)"/>
-<mask id="path-4-inside-2" fill="white">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M83.6717 28.1985C83.8558 29.3482 82.9306 30.3418 81.7663 30.3418H62C60.8954 30.3418 60 29.4464 60 28.3418V8.57554C60 7.41119 60.9937 6.48606 62.1434 6.67017C73.1842 8.43829 81.9035 17.1576 83.6717 28.1985Z"/>
-</mask>
-<path d="M83.6717 28.1985L81.6968 28.5147L83.6717 28.1985ZM81.7663 28.3418H62V32.3418H81.7663V28.3418ZM62 28.3418V8.57554H58V28.3418H62ZM61.8271 8.64501C72.0149 10.2765 80.0653 18.327 81.6968 28.5147L85.6465 27.8822C83.7418 15.9883 74.3535 6.60007 62.4596 4.69534L61.8271 8.64501ZM62 8.57554C62 8.56963 62.0009 8.58353 61.9803 8.60208C61.9692 8.61217 61.9483 8.62667 61.9159 8.63672C61.8805 8.64767 61.8474 8.64825 61.8271 8.64501L62.4596 4.69534C59.9821 4.29857 58 6.29722 58 8.57554H62ZM62 28.3418H62H58C58 30.551 59.7909 32.3418 62 32.3418V28.3418ZM81.7663 32.3418C84.0446 32.3418 86.0433 30.3597 85.6465 27.8822L81.6968 28.5147C81.6936 28.4945 81.6942 28.4613 81.7051 28.426C81.7152 28.3936 81.7297 28.3727 81.7398 28.3615C81.7583 28.3409 81.7722 28.3418 81.7663 28.3418V32.3418Z" fill="#D1D1D1" mask="url(#path-4-inside-2)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15 55.5384C5.66793 57.9222 0 61.061 0 64.5001C0 71.956 26.6391 78.0001 59.5 78.0001C92.3609 78.0001 119 71.956 119 64.5001C119 60.9398 112.926 57.7014 103 55.2893V60C103 62.2092 101.209 64 99 64H19C16.7909 64 15 62.2092 15 60V55.5384Z" fill="#F2F2F2"/>
+<svg viewBox="0 0 119 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="16" y="1" width="86" height="62" rx="3" stroke="currentColor" stroke-width="2" />
+
+
+  <path
+    d="M60 32.6416L80 32.6416C80.902 32.6416 81.9179 34.641 81.9179 34.641C80.902 46.9604 70.5815 56.6416 58 56.6416V32.6416Z"
+    fill="currentColor" fill-opacity="1" />
+
+  <path
+    d="M58 10.6416C58 9.53706 57.1014 8.63294 56.0006 8.72373C43.6813 9.73974 34 20.0601 34 32.6416C34 45.8965 44.7452 56.6416 58 56.6416C70.5815 56.6416 80.9019 46.9604 81.9179 34.641C82.0087 33.5402 81.1046 32.6416 80 32.6416L60 32.6416C58.8954 32.6416 58 31.7462 58 30.6416V10.6416Z"
+    fill="currentColor" fill-opacity="0.5" />
 </svg>

superset-frontend/src/assets/images/empty-dashboard.svg

@@ -16,11 +16,11 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<svg width="119" height="78" viewBox="0 0 119 78" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="17" y="1" width="86" height="62" rx="3" stroke="#D1D1D1" stroke-width="2"/>
-<rect x="21" y="5" width="78" height="14" rx="3" stroke="#D1D1D1" stroke-width="2"/>
-<rect x="21" y="23" width="38" height="36" rx="3" stroke="#D1D1D1" stroke-width="2"/>
-<rect x="63" y="37" width="36" height="22" rx="3" stroke="#D1D1D1" stroke-width="2"/>
-<rect x="63" y="23" width="36" height="10" rx="3" stroke="#D1D1D1" stroke-width="2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16 55.2892C6.07439 57.7013 0 60.9397 0 64.5C0 71.9559 26.6391 78 59.5 78C92.3609 78 119 71.9559 119 64.5C119 61.0609 113.332 57.9221 104 55.5383V60C104 62.2092 102.209 64 100 64H20C17.7909 64 16 62.2092 16 60V55.2892Z" fill="#F2F2F2"/>
+<svg viewBox="0 0 119 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="17" y="1" width="86" height="62" rx="3" stroke="currentColor" stroke-width="2"/>
+<rect x="21" y="5" width="78" height="14" rx="3" stroke="currentColor" stroke-width="2"/>
+<rect x="21" y="23" width="38" height="36" rx="3" stroke="currentColor" stroke-width="2"/>
+<rect x="63" y="37" width="36" height="22" rx="3" stroke="currentColor" stroke-width="2"/>
+<rect x="63" y="23" width="36" height="10" rx="3" stroke="currentColor" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 55.2892C6.07439 57.7013 0 60.9397 0 64.5C0 71.9559 26.6391 78 59.5 78C92.3609 78 119 71.9559 119 64.5C119 61.0609 113.332 57.9221 104 55.5383V60C104 62.2092 102.209 64 100 64H20C17.7909 64 16 62.2092 16 60V55.2892Z" fill="currentColor" fill-opacity="0.25" stroke="currentColor"/>
 </svg>

superset-frontend/src/assets/images/empty-dataset.svg

@@ -16,23 +16,24 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<svg width="152" height="152" viewBox="0 0 152 152" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M44.5 1C45.0523 1 45.5 1.44772 45.5 2V45C45.5 45.5523 45.0523 46 44.5 46H1.5C0.947716 46 0.5 45.5523 0.5 45V2C0.5 1.44772 0.947716 1 1.5 1L44.5 1Z" fill="white"/>
-<path d="M97.5 1C98.0523 1 98.5 1.44772 98.5 2V45C98.5 45.5523 98.0523 46 97.5 46H54.5C53.9477 46 53.5 45.5523 53.5 45V2C53.5 1.44772 53.9477 1 54.5 1L97.5 1Z" fill="white"/>
-<path d="M150.5 1C151.052 1 151.5 1.44772 151.5 2V45C151.5 45.5523 151.052 46 150.5 46H107.5C106.948 46 106.5 45.5523 106.5 45V2C106.5 1.44772 106.948 1 107.5 1L150.5 1Z" fill="white"/>
-<path d="M44.5 54C45.0523 54 45.5 54.4477 45.5 55V98C45.5 98.5523 45.0523 99 44.5 99H1.5C0.947716 99 0.5 98.5523 0.5 98V55C0.5 54.4477 0.947716 54 1.5 54H44.5Z" fill="white"/>
-<path d="M97.5 54C98.0523 54 98.5 54.4477 98.5 55V98C98.5 98.5523 98.0523 99 97.5 99H54.5C53.9477 99 53.5 98.5523 53.5 98V55C53.5 54.4477 53.9477 54 54.5 54H97.5Z" fill="white"/>
-<path d="M150.5 54C151.052 54 151.5 54.4477 151.5 55V98C151.5 98.5523 151.052 99 150.5 99H107.5C106.948 99 106.5 98.5523 106.5 98V55C106.5 54.4477 106.948 54 107.5 54H150.5Z" fill="white"/>
-<path d="M44.5 106C45.0523 106 45.5 106.448 45.5 107V150C45.5 150.552 45.0523 151 44.5 151H1.5C0.947716 151 0.5 150.552 0.5 150V107C0.5 106.448 0.947716 106 1.5 106H44.5Z" fill="white"/>
-<path d="M97.5 106C98.0523 106 98.5 106.448 98.5 107V150C98.5 150.552 98.0523 151 97.5 151H54.5C53.9477 151 53.5 150.552 53.5 150V107C53.5 106.448 53.9477 106 54.5 106H97.5Z" fill="white"/>
-<path d="M150.5 106C151.052 106 151.5 106.448 151.5 107V150C151.5 150.552 151.052 151 150.5 151H107.5C106.948 151 106.5 150.552 106.5 150V107C106.5 106.448 106.948 106 107.5 106H150.5Z" fill="white"/>
-<path d="M44.5 1C45.0523 1 45.5 1.44772 45.5 2V45C45.5 45.5523 45.0523 46 44.5 46H1.5C0.947716 46 0.5 45.5523 0.5 45V2C0.5 1.44772 0.947716 1 1.5 1L44.5 1Z" stroke="#E0E0E0"/>
-<path d="M97.5 1C98.0523 1 98.5 1.44772 98.5 2V45C98.5 45.5523 98.0523 46 97.5 46H54.5C53.9477 46 53.5 45.5523 53.5 45V2C53.5 1.44772 53.9477 1 54.5 1L97.5 1Z" stroke="#E0E0E0"/>
-<path d="M150.5 1C151.052 1 151.5 1.44772 151.5 2V45C151.5 45.5523 151.052 46 150.5 46H107.5C106.948 46 106.5 45.5523 106.5 45V2C106.5 1.44772 106.948 1 107.5 1L150.5 1Z" stroke="#E0E0E0"/>
-<path d="M44.5 54C45.0523 54 45.5 54.4477 45.5 55V98C45.5 98.5523 45.0523 99 44.5 99H1.5C0.947716 99 0.5 98.5523 0.5 98V55C0.5 54.4477 0.947716 54 1.5 54H44.5Z" stroke="#E0E0E0"/>
-<path d="M97.5 54C98.0523 54 98.5 54.4477 98.5 55V98C98.5 98.5523 98.0523 99 97.5 99H54.5C53.9477 99 53.5 98.5523 53.5 98V55C53.5 54.4477 53.9477 54 54.5 54H97.5Z" stroke="#E0E0E0"/>
-<path d="M150.5 54C151.052 54 151.5 54.4477 151.5 55V98C151.5 98.5523 151.052 99 150.5 99H107.5C106.948 99 106.5 98.5523 106.5 98V55C106.5 54.4477 106.948 54 107.5 54H150.5Z" stroke="#E0E0E0"/>
-<path d="M44.5 106C45.0523 106 45.5 106.448 45.5 107V150C45.5 150.552 45.0523 151 44.5 151H1.5C0.947716 151 0.5 150.552 0.5 150V107C0.5 106.448 0.947716 106 1.5 106H44.5Z" stroke="#E0E0E0"/>
-<path d="M97.5 106C98.0523 106 98.5 106.448 98.5 107V150C98.5 150.552 98.0523 151 97.5 151H54.5C53.9477 151 53.5 150.552 53.5 150V107C53.5 106.448 53.9477 106 54.5 106H97.5Z" stroke="#E0E0E0"/>
-<path d="M150.5 106C151.052 106 151.5 106.448 151.5 107V150C151.5 150.552 151.052 151 150.5 151H107.5C106.948 151 106.5 150.552 106.5 150V107C106.5 106.448 106.948 106 107.5 106H150.5Z" stroke="#E0E0E0"/>
+<svg viewBox="0 0 152 152" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44.5 1C45.0523 1 45.5 1.44772 45.5 2V45C45.5 45.5523 45.0523 46 44.5 46H1.5C0.947716 46 0.5 45.5523 0.5 45V2C0.5 1.44772 0.947716 1 1.5 1L44.5 1Z" fill="currentColor"/>
+<path d="M97.5 1C98.0523 1 98.5 1.44772 98.5 2V45C98.5 45.5523 98.0523 46 97.5 46H54.5C53.9477 46 53.5 45.5523 53.5 45V2C53.5 1.44772 53.9477 1 54.5 1L97.5 1Z" fill="currentColor"/>
+<path d="M150.5 1C151.052 1 151.5 1.44772 151.5 2V45C151.5 45.5523 151.052 46 150.5 46H107.5C106.948 46 106.5 45.5523 106.5 45V2C106.5 1.44772 106.948 1 107.5 1L150.5 1Z" fill="currentColor"/>
+<path d="M44.5 54C45.0523 54 45.5 54.4477 45.5 55V98C45.5 98.5523 45.0523 99 44.5 99H1.5C0.947716 99 0.5 98.5523 0.5 98V55C0.5 54.4477 0.947716 54 1.5 54H44.5Z" fill="currentColor"/>
+<path d="M97.5 54C98.0523 54 98.5 54.4477 98.5 55V98C98.5 98.5523 98.0523 99 97.5 99H54.5C53.9477 99 53.5 98.5523 53.5 98V55C53.5 54.4477 53.9477 54 54.5 54H97.5Z" fill="currentColor"/>
+<path d="M150.5 54C151.052 54 151.5 54.4477 151.5 55V98C151.5 98.5523 151.052 99 150.5 99H107.5C106.948 99 106.5 98.5523 106.5 98V55C106.5 54.4477 106.948 54 107.5 54H150.5Z" fill="currentColor"/>
+<path d="M44.5 106C45.0523 106 45.5 106.448 45.5 107V150C45.5 150.552 45.0523 151 44.5 151H1.5C0.947716 151 0.5 150.552 0.5 150V107C0.5 106.448 0.947716 106 1.5 106H44.5Z" fill="currentColor"/>
+<path d="M97.5 106C98.0523 106 98.5 106.448 98.5 107V150C98.5 150.552 98.0523 151 97.5 151H54.5C53.9477 151 53.5 150.552 53.5 150V107C53.5 106.448 53.9477 106 54.5 106H97.5Z" fill="currentColor"/>
+<path d="M150.5 106C151.052 106 151.5 106.448 151.5 107V150C151.5 150.552 151.052 151 150.5 151H107.5C106.948 151 106.5 150.552 106.5 150V107C106.5 106.448 106.948 106 107.5 106H150.5Z" fill="currentColor"/>
+
+<path d="M44.5 1C45.0523 1 45.5 1.44772 45.5 2V45C45.5 45.5523 45.0523 46 44.5 46H1.5C0.947716 46 0.5 45.5523 0.5 45V2C0.5 1.44772 0.947716 1 1.5 1L44.5 1Z" stroke="currentColor"/>
+<path d="M97.5 1C98.0523 1 98.5 1.44772 98.5 2V45C98.5 45.5523 98.0523 46 97.5 46H54.5C53.9477 46 53.5 45.5523 53.5 45V2C53.5 1.44772 53.9477 1 54.5 1L97.5 1Z" stroke="currentColor"/>
+<path d="M150.5 1C151.052 1 151.5 1.44772 151.5 2V45C151.5 45.5523 151.052 46 150.5 46H107.5C106.948 46 106.5 45.5523 106.5 45V2C106.5 1.44772 106.948 1 107.5 1L150.5 1Z" stroke="currentColor"/>
+<path d="M44.5 54C45.0523 54 45.5 54.4477 45.5 55V98C45.5 98.5523 45.0523 99 44.5 99H1.5C0.947716 99 0.5 98.5523 0.5 98V55C0.5 54.4477 0.947716 54 1.5 54H44.5Z" stroke="currentColor"/>
+<path d="M97.5 54C98.0523 54 98.5 54.4477 98.5 55V98C98.5 98.5523 98.0523 99 97.5 99H54.5C53.9477 99 53.5 98.5523 53.5 98V55C53.5 54.4477 53.9477 54 54.5 54H97.5Z" stroke="currentColor"/>
+<path d="M150.5 54C151.052 54 151.5 54.4477 151.5 55V98C151.5 98.5523 151.052 99 150.5 99H107.5C106.948 99 106.5 98.5523 106.5 98V55C106.5 54.4477 106.948 54 107.5 54H150.5Z" stroke="currentColor"/>
+<path d="M44.5 106C45.0523 106 45.5 106.448 45.5 107V150C45.5 150.552 45.0523 151 44.5 151H1.5C0.947716 151 0.5 150.552 0.5 150V107C0.5 106.448 0.947716 106 1.5 106H44.5Z" stroke="currentColor"/>
+<path d="M97.5 106C98.0523 106 98.5 106.448 98.5 107V150C98.5 150.552 98.0523 151 97.5 151H54.5C53.9477 151 53.5 150.552 53.5 150V107C53.5 106.448 53.9477 106 54.5 106H97.5Z" stroke="currentColor"/>
+<path d="M150.5 106C151.052 106 151.5 106.448 151.5 107V150C151.5 150.552 151.052 151 150.5 151H107.5C106.948 151 106.5 150.552 106.5 150V107C106.5 106.448 106.948 106 107.5 106H150.5Z" stroke="currentColor"/>
 </svg>

superset-frontend/src/assets/images/empty-queries.svg

@@ -16,20 +16,20 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<svg width="119" height="78" viewBox="0 0 119 78" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M37 4C37 2.34315 38.3431 1 40 1H70.3431C71.1388 1 71.9019 1.31607 72.4645 1.87868L82.1213 11.5355C82.6839 12.0981 83 12.8612 83 13.6569V60C83 61.6569 81.6569 63 80 63H40C38.3431 63 37 61.6569 37 60V4Z" stroke="#D1D1D1" stroke-width="2"/>
-<path d="M71 0.5V9C71 11.2091 72.7909 13 75 13H83.5" stroke="#D1D1D1" stroke-width="2"/>
-<path d="M71 27V45C71 46.074 70.1033 47.3156 68.0381 48.3482C66.0326 49.3509 63.1921 50 60 50C56.8079 50 53.9674 49.3509 51.9619 48.3482C49.8967 47.3156 49 46.074 49 45V27C49 25.926 49.8967 24.6844 51.9619 23.6518C53.9674 22.6491 56.8079 22 60 22C63.1921 22 66.0326 22.6491 68.0381 23.6518C70.1033 24.6844 71 25.926 71 27Z" stroke="#D1D1D1" stroke-width="2"/>
+<svg viewBox="0 0 119 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37 4C37 2.34315 38.3431 1 40 1H70.3431C71.1388 1 71.9019 1.31607 72.4645 1.87868L82.1213 11.5355C82.6839 12.0981 83 12.8612 83 13.6569V60C83 61.6569 81.6569 63 80 63H40C38.3431 63 37 61.6569 37 60V4Z" stroke="currentColor" stroke-width="2"/>
+<path d="M71 0.5V9C71 11.2091 72.7909 13 75 13H83.5" stroke="currentColor" stroke-width="2"/>
+<path d="M71 27V45C71 46.074 70.1033 47.3156 68.0381 48.3482C66.0326 49.3509 63.1921 50 60 50C56.8079 50 53.9674 49.3509 51.9619 48.3482C49.8967 47.3156 49 46.074 49 45V27C49 25.926 49.8967 24.6844 51.9619 23.6518C53.9674 22.6491 56.8079 22 60 22C63.1921 22 66.0326 22.6491 68.0381 23.6518C70.1033 24.6844 71 25.926 71 27Z" stroke="currentColor" stroke-width="2"/>
 <mask id="path-4-inside-1" fill="white">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M48 39C48 42.3137 53.3726 45 60 45C66.6274 45 72 42.3137 72 39H69.913C69.913 39.5358 69.4382 40.5104 67.5199 41.4695C65.7026 42.3781 63.0473 43 60 43C56.9527 43 54.2974 42.3781 52.4801 41.4695C50.5618 40.5104 50.087 39.5358 50.087 39H48Z"/>
 </mask>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M48 39C48 42.3137 53.3726 45 60 45C66.6274 45 72 42.3137 72 39H69.913C69.913 39.5358 69.4382 40.5104 67.5199 41.4695C65.7026 42.3781 63.0473 43 60 43C56.9527 43 54.2974 42.3781 52.4801 41.4695C50.5618 40.5104 50.087 39.5358 50.087 39H48Z" fill="black"/>
-<path d="M48 39V37H46V39H48ZM72 39H74V37H72V39ZM69.913 39V37H67.913V39H69.913ZM52.4801 41.4695L51.5856 43.2583H51.5856L52.4801 41.4695ZM50.087 39H52.087V37H50.087V39ZM46 39C46 41.8225 48.2361 43.8394 50.6203 45.0315C53.1241 46.2834 56.4431 47 60 47V43C56.9295 43 54.2485 42.3735 52.4091 41.4538C50.4502 40.4743 50 39.4912 50 39H46ZM60 47C63.5569 47 66.8759 46.2834 69.3797 45.0315C71.7639 43.8394 74 41.8225 74 39H70C70 39.4912 69.5498 40.4743 67.5909 41.4538C65.7515 42.3735 63.0705 43 60 43V47ZM72 37H69.913V41H72V37ZM68.4144 43.2583C70.5717 42.1796 71.913 40.6831 71.913 39H67.913C67.913 38.6884 68.0386 38.6285 67.8989 38.7962C67.7638 38.9584 67.4125 39.2871 66.6255 39.6806L68.4144 43.2583ZM60 45C63.2906 45 66.2649 44.333 68.4144 43.2583L66.6255 39.6806C65.1403 40.4232 62.804 41 60 41V45ZM51.5856 43.2583C53.7351 44.333 56.7094 45 60 45V41C57.196 41 54.8597 40.4232 53.3745 39.6806L51.5856 43.2583ZM48.087 39C48.087 40.6831 49.4283 42.1796 51.5856 43.2583L53.3745 39.6806C52.5875 39.2871 52.2362 38.9584 52.1011 38.7962C51.9614 38.6285 52.087 38.6884 52.087 39H48.087ZM50.087 37H48V41H50.087V37Z" fill="#D1D1D1" mask="url(#path-4-inside-1)"/>
+<path d="M48 39V37H46V39H48ZM72 39H74V37H72V39ZM69.913 39V37H67.913V39H69.913ZM52.4801 41.4695L51.5856 43.2583H51.5856L52.4801 41.4695ZM50.087 39H52.087V37H50.087V39ZM46 39C46 41.8225 48.2361 43.8394 50.6203 45.0315C53.1241 46.2834 56.4431 47 60 47V43C56.9295 43 54.2485 42.3735 52.4091 41.4538C50.4502 40.4743 50 39.4912 50 39H46ZM60 47C63.5569 47 66.8759 46.2834 69.3797 45.0315C71.7639 43.8394 74 41.8225 74 39H70C70 39.4912 69.5498 40.4743 67.5909 41.4538C65.7515 42.3735 63.0705 43 60 43V47ZM72 37H69.913V41H72V37ZM68.4144 43.2583C70.5717 42.1796 71.913 40.6831 71.913 39H67.913C67.913 38.6884 68.0386 38.6285 67.8989 38.7962C67.7638 38.9584 67.4125 39.2871 66.6255 39.6806L68.4144 43.2583ZM60 45C63.2906 45 66.2649 44.333 68.4144 43.2583L66.6255 39.6806C65.1403 40.4232 62.804 41 60 41V45ZM51.5856 43.2583C53.7351 44.333 56.7094 45 60 45V41C57.196 41 54.8597 40.4232 53.3745 39.6806L51.5856 43.2583ZM48.087 39C48.087 40.6831 49.4283 42.1796 51.5856 43.2583L53.3745 39.6806C52.5875 39.2871 52.2362 38.9584 52.1011 38.7962C51.9614 38.6285 52.087 38.6884 52.087 39H48.087ZM50.087 37H48V41H50.087V37Z" fill="currentColor" mask="url(#path-4-inside-1)"/>
 <mask id="path-6-inside-2" fill="white">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M48 33C48 36.3137 53.3726 39 60 39C66.6274 39 72 36.3137 72 33H69.913C69.913 33.5358 69.4382 34.5104 67.5199 35.4695C65.7026 36.3781 63.0473 37 60 37C56.9527 37 54.2974 36.3781 52.4801 35.4695C50.5618 34.5104 50.087 33.5358 50.087 33H48Z"/>
 </mask>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M48 33C48 36.3137 53.3726 39 60 39C66.6274 39 72 36.3137 72 33H69.913C69.913 33.5358 69.4382 34.5104 67.5199 35.4695C65.7026 36.3781 63.0473 37 60 37C56.9527 37 54.2974 36.3781 52.4801 35.4695C50.5618 34.5104 50.087 33.5358 50.087 33H48Z" fill="black"/>
-<path d="M48 33V31H46V33H48ZM72 33H74V31H72V33ZM69.913 33V31H67.913V33H69.913ZM52.4801 35.4695L51.5856 37.2583H51.5856L52.4801 35.4695ZM50.087 33H52.087V31H50.087V33ZM46 33C46 35.8225 48.2361 37.8394 50.6203 39.0315C53.1241 40.2834 56.4431 41 60 41V37C56.9295 37 54.2485 36.3735 52.4091 35.4538C50.4502 34.4743 50 33.4912 50 33H46ZM60 41C63.5569 41 66.8759 40.2834 69.3797 39.0315C71.7639 37.8394 74 35.8225 74 33H70C70 33.4912 69.5498 34.4743 67.5909 35.4538C65.7515 36.3735 63.0705 37 60 37V41ZM72 31H69.913V35H72V31ZM68.4144 37.2583C70.5717 36.1796 71.913 34.6831 71.913 33H67.913C67.913 32.6884 68.0386 32.6285 67.8989 32.7962C67.7638 32.9584 67.4125 33.2871 66.6255 33.6806L68.4144 37.2583ZM60 39C63.2906 39 66.2649 38.333 68.4144 37.2583L66.6255 33.6806C65.1403 34.4232 62.804 35 60 35V39ZM51.5856 37.2583C53.7351 38.333 56.7094 39 60 39V35C57.196 35 54.8597 34.4232 53.3745 33.6806L51.5856 37.2583ZM48.087 33C48.087 34.6831 49.4283 36.1796 51.5856 37.2583L53.3745 33.6806C52.5875 33.2871 52.2362 32.9584 52.1011 32.7962C51.9614 32.6285 52.087 32.6884 52.087 33H48.087ZM50.087 31H48V35H50.087V31Z" fill="#D1D1D1" mask="url(#path-6-inside-2)"/>
-<path d="M71 27C71 28.074 70.1033 29.3156 68.0381 30.3482C66.0326 31.3509 63.1921 32 60 32C56.8079 32 53.9674 31.3509 51.9619 30.3482C49.8967 29.3156 49 28.074 49 27C49 25.926 49.8967 24.6844 51.9619 23.6518C53.9674 22.6491 56.8079 22 60 22C63.1921 22 66.0326 22.6491 68.0381 23.6518C70.1033 24.6844 71 25.926 71 27Z" stroke="#D1D1D1" stroke-width="2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M36 51.1343C14.8256 53.2784 0 58.2318 0 64C0 71.732 26.6391 78 59.5 78C92.3609 78 119 71.732 119 64C119 58.323 104.64 53.4353 84 51.2381V60C84 62.2091 82.2091 64 80 64H40C37.7909 64 36 62.2091 36 60V51.1343Z" fill="#F2F2F2"/>
+<path d="M48 33V31H46V33H48ZM72 33H74V31H72V33ZM69.913 33V31H67.913V33H69.913ZM52.4801 35.4695L51.5856 37.2583H51.5856L52.4801 35.4695ZM50.087 33H52.087V31H50.087V33ZM46 33C46 35.8225 48.2361 37.8394 50.6203 39.0315C53.1241 40.2834 56.4431 41 60 41V37C56.9295 37 54.2485 36.3735 52.4091 35.4538C50.4502 34.4743 50 33.4912 50 33H46ZM60 41C63.5569 41 66.8759 40.2834 69.3797 39.0315C71.7639 37.8394 74 35.8225 74 33H70C70 33.4912 69.5498 34.4743 67.5909 35.4538C65.7515 36.3735 63.0705 37 60 37V41ZM72 31H69.913V35H72V31ZM68.4144 37.2583C70.5717 36.1796 71.913 34.6831 71.913 33H67.913C67.913 32.6884 68.0386 32.6285 67.8989 32.7962C67.7638 32.9584 67.4125 33.2871 66.6255 33.6806L68.4144 37.2583ZM60 39C63.2906 39 66.2649 38.333 68.4144 37.2583L66.6255 33.6806C65.1403 34.4232 62.804 35 60 35V39ZM51.5856 37.2583C53.7351 38.333 56.7094 39 60 39V35C57.196 35 54.8597 34.4232 53.3745 33.6806L51.5856 37.2583ZM48.087 33C48.087 34.6831 49.4283 36.1796 51.5856 37.2583L53.3745 33.6806C52.5875 33.2871 52.2362 32.9584 52.1011 32.7962C51.9614 32.6285 52.087 32.6884 52.087 33H48.087ZM50.087 31H48V35H50.087V31Z" fill="currentColor" mask="url(#path-6-inside-2)"/>
+<path d="M71 27C71 28.074 70.1033 29.3156 68.0381 30.3482C66.0326 31.3509 63.1921 32 60 32C56.8079 32 53.9674 31.3509 51.9619 30.3482C49.8967 29.3156 49 28.074 49 27C49 25.926 49.8967 24.6844 51.9619 23.6518C53.9674 22.6491 56.8079 22 60 22C63.1921 22 66.0326 22.6491 68.0381 23.6518C70.1033 24.6844 71 25.926 71 27Z" stroke="currentColor" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36 51.1343C14.8256 53.2784 0 58.2318 0 64C0 71.732 26.6391 78 59.5 78C92.3609 78 119 71.732 119 64C119 58.323 104.64 53.4353 84 51.2381V60C84 62.2091 82.2091 64 80 64H40C37.7909 64 36 62.2091 36 60V51.1343Z" fill="currentColor" stroke="currentColor" fill-opacity="0.25" />
 </svg>

superset-frontend/src/assets/images/empty-query.svg

@@ -16,10 +16,10 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<svg width="458" height="146" viewBox="0 0 458 146" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17 21C17 18.7909 18.7909 17 21 17H125C127.209 17 129 18.7909 129 21V29C129 31.2091 127.209 33 125 33H21C18.7909 33 17 31.2091 17 29V21Z" fill="#ECEEF2"/>
-<path d="M17 45C17 42.7909 18.7909 41 21 41H223C225.209 41 227 42.7909 227 45V53C227 55.2091 225.209 57 223 57H21C18.7909 57 17 55.2091 17 53V45Z" fill="#ECEEF2"/>
-<path d="M21 65C18.7909 65 17 66.7909 17 69V77C17 79.2091 18.7909 81 21 81H172C174.209 81 176 79.2091 176 77V69C176 66.7909 174.209 65 172 65H21Z" fill="#ECEEF2"/>
-<path d="M17 93C17 90.7909 18.7909 89 21 89H286C288.209 89 290 90.7909 290 93V101C290 103.209 288.209 105 286 105H21C18.7909 105 17 103.209 17 101V93Z" fill="#ECEEF2"/>
-<path d="M21 113C18.7909 113 17 114.791 17 117V125C17 127.209 18.7909 129 21 129H73C75.2091 129 77 127.209 77 125V117C77 114.791 75.2091 113 73 113H21Z" fill="#ECEEF2"/>
+<svg viewBox="0 0 300 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 21C17 18.7909 18.7909 17 21 17H125C127.209 17 129 18.7909 129 21V29C129 31.2091 127.209 33 125 33H21C18.7909 33 17 31.2091 17 29V21Z" fill="currentColor"/>
+<path d="M17 45C17 42.7909 18.7909 41 21 41H223C225.209 41 227 42.7909 227 45V53C227 55.2091 225.209 57 223 57H21C18.7909 57 17 55.2091 17 53V45Z" fill="currentColor"/>
+<path d="M21 65C18.7909 65 17 66.7909 17 69V77C17 79.2091 18.7909 81 21 81H172C174.209 81 176 79.2091 176 77V69C176 66.7909 174.209 65 172 65H21Z" fill="currentColor"/>
+<path d="M17 93C17 90.7909 18.7909 89 21 89H286C288.209 89 290 90.7909 290 93V101C290 103.209 288.209 105 286 105H21C18.7909 105 17 103.209 17 101V93Z" fill="currentColor"/>
+<path d="M21 113C18.7909 113 17 114.791 17 117V125C17 127.209 18.7909 129 21 129H73C75.2091 129 77 127.209 77 125V117C77 114.791 75.2091 113 73 113H21Z" fill="currentColor"/>
 </svg>

superset-frontend/src/assets/images/empty-table.svg

@@ -16,7 +16,7 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<svg width="81" height="82" viewBox="0 0 81 82" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M76.5 1H4.5C2.29086 1 0.5 2.79086 0.5 5V77C0.5 79.2091 2.29086 81 4.5 81H76.5C78.7091 81 80.5 79.2091 80.5 77V5C80.5 2.79086 78.7091 1 76.5 1ZM36.5 73H8.5V57H36.5V73ZM36.5 49H8.5V33H36.5V49ZM72.5 73H44.5V57H72.5V73ZM72.5 49H44.5V33H72.5V49ZM72.5 25H8.5V9H72.5V25Z" fill="#F7F7F7"/>
-<path d="M36.5 73V73.5H37V73H36.5ZM8.5 73H8V73.5H8.5V73ZM8.5 57V56.5H8V57H8.5ZM36.5 57H37V56.5H36.5V57ZM36.5 49V49.5H37V49H36.5ZM8.5 49H8V49.5H8.5V49ZM8.5 33V32.5H8V33H8.5ZM36.5 33H37V32.5H36.5V33ZM72.5 73V73.5H73V73H72.5ZM44.5 73H44V73.5H44.5V73ZM44.5 57V56.5H44V57H44.5ZM72.5 57H73V56.5H72.5V57ZM72.5 49V49.5H73V49H72.5ZM44.5 49H44V49.5H44.5V49ZM44.5 33V32.5H44V33H44.5ZM72.5 33H73V32.5H72.5V33ZM72.5 25V25.5H73V25H72.5ZM8.5 25H8V25.5H8.5V25ZM8.5 9V8.5H8V9H8.5ZM72.5 9H73V8.5H72.5V9ZM76.5 0.5H4.5V1.5H76.5V0.5ZM4.5 0.5C2.01472 0.5 0 2.51472 0 5H1C1 3.067 2.567 1.5 4.5 1.5V0.5ZM0 5V77H1V5H0ZM0 77C0 79.4853 2.01472 81.5 4.5 81.5V80.5C2.567 80.5 1 78.933 1 77H0ZM4.5 81.5H76.5V80.5H4.5V81.5ZM76.5 81.5C78.9853 81.5 81 79.4853 81 77H80C80 78.933 78.433 80.5 76.5 80.5V81.5ZM81 77V5H80V77H81ZM81 5C81 2.51472 78.9853 0.5 76.5 0.5V1.5C78.433 1.5 80 3.067 80 5H81ZM36.5 72.5H8.5V73.5H36.5V72.5ZM9 73V57H8V73H9ZM8.5 57.5H36.5V56.5H8.5V57.5ZM36 57V73H37V57H36ZM36.5 48.5H8.5V49.5H36.5V48.5ZM9 49V33H8V49H9ZM8.5 33.5H36.5V32.5H8.5V33.5ZM36 33V49H37V33H36ZM72.5 72.5H44.5V73.5H72.5V72.5ZM45 73V57H44V73H45ZM44.5 57.5H72.5V56.5H44.5V57.5ZM72 57V73H73V57H72ZM72.5 48.5H44.5V49.5H72.5V48.5ZM45 49V33H44V49H45ZM44.5 33.5H72.5V32.5H44.5V33.5ZM72 33V49H73V33H72ZM72.5 24.5H8.5V25.5H72.5V24.5ZM9 25V9H8V25H9ZM8.5 9.5H72.5V8.5H8.5V9.5ZM72 9V25H73V9H72Z" fill="#E0E0E0"/>
+<svg viewBox="0 0 81 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M76.5 1H4.5C2.29086 1 0.5 2.79086 0.5 5V77C0.5 79.2091 2.29086 81 4.5 81H76.5C78.7091 81 80.5 79.2091 80.5 77V5C80.5 2.79086 78.7091 1 76.5 1ZM36.5 73H8.5V57H36.5V73ZM36.5 49H8.5V33H36.5V49ZM72.5 73H44.5V57H72.5V73ZM72.5 49H44.5V33H72.5V49ZM72.5 25H8.5V9H72.5V25Z" fill="currentColor"/>
+<path d="M36.5 73V73.5H37V73H36.5ZM8.5 73H8V73.5H8.5V73ZM8.5 57V56.5H8V57H8.5ZM36.5 57H37V56.5H36.5V57ZM36.5 49V49.5H37V49H36.5ZM8.5 49H8V49.5H8.5V49ZM8.5 33V32.5H8V33H8.5ZM36.5 33H37V32.5H36.5V33ZM72.5 73V73.5H73V73H72.5ZM44.5 73H44V73.5H44.5V73ZM44.5 57V56.5H44V57H44.5ZM72.5 57H73V56.5H72.5V57ZM72.5 49V49.5H73V49H72.5ZM44.5 49H44V49.5H44.5V49ZM44.5 33V32.5H44V33H44.5ZM72.5 33H73V32.5H72.5V33ZM72.5 25V25.5H73V25H72.5ZM8.5 25H8V25.5H8.5V25ZM8.5 9V8.5H8V9H8.5ZM72.5 9H73V8.5H72.5V9ZM76.5 0.5H4.5V1.5H76.5V0.5ZM4.5 0.5C2.01472 0.5 0 2.51472 0 5H1C1 3.067 2.567 1.5 4.5 1.5V0.5ZM0 5V77H1V5H0ZM0 77C0 79.4853 2.01472 81.5 4.5 81.5V80.5C2.567 80.5 1 78.933 1 77H0ZM4.5 81.5H76.5V80.5H4.5V81.5ZM76.5 81.5C78.9853 81.5 81 79.4853 81 77H80C80 78.933 78.433 80.5 76.5 80.5V81.5ZM81 77V5H80V77H81ZM81 5C81 2.51472 78.9853 0.5 76.5 0.5V1.5C78.433 1.5 80 3.067 80 5H81ZM36.5 72.5H8.5V73.5H36.5V72.5ZM9 73V57H8V73H9ZM8.5 57.5H36.5V56.5H8.5V57.5ZM36 57V73H37V57H36ZM36.5 48.5H8.5V49.5H36.5V48.5ZM9 49V33H8V49H9ZM8.5 33.5H36.5V32.5H8.5V33.5ZM36 33V49H37V33H36ZM72.5 72.5H44.5V73.5H72.5V72.5ZM45 73V57H44V73H45ZM44.5 57.5H72.5V56.5H44.5V57.5ZM72 57V73H73V57H72ZM72.5 48.5H44.5V49.5H72.5V48.5ZM45 49V33H44V49H45ZM44.5 33.5H72.5V32.5H44.5V33.5ZM72 33V49H73V33H72ZM72.5 24.5H8.5V25.5H72.5V24.5ZM9 25V9H8V25H9ZM8.5 9.5H72.5V8.5H8.5V9.5ZM72 9V25H73V9H72Z" fill="currentColor"/>
 </svg>

superset-frontend/src/assets/images/empty.svg

@@ -16,7 +16,7 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<svg width="119" height="76" viewBox="0 0 119 76" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M83.1952 1.36598L103 24V62C103 64.2091 101.209 66 99 66H20C17.7909 66 16 64.2091 16 62V24L35.8048 1.36598C36.5643 0.497921 37.6616 0 38.8151 0H80.1849C81.3384 0 82.4357 0.497922 83.1952 1.36598ZM101 26V62C101 63.1046 100.105 64 99 64H20C18.8954 64 18 63.1046 18 62V26H35.25C37.8734 26 40 28.1266 40 30.75C40 34.4779 43.0221 37.5 46.75 37.5H72.25C75.9779 37.5 79 34.4779 79 30.75C79 28.1266 81.1266 26 83.75 26H101ZM100.342 24L81.6901 2.68299C81.3103 2.24896 80.7617 2 80.1849 2H38.8151C38.2383 2 37.6897 2.24896 37.3099 2.68299L18.6575 24H35.25C38.9779 24 42 27.0221 42 30.75C42 33.3734 44.1266 35.5 46.75 35.5H72.25C74.8734 35.5 77 33.3734 77 30.75C77 27.0221 80.0221 24 83.75 24H100.342Z" fill="#D1D1D1"/>
-<path d="M16 53.2891C6.07439 55.7012 0 58.9396 0 62.4999C0 69.9557 26.6391 75.9999 59.5 75.9999C92.3609 75.9999 119 69.9557 119 62.4999C119 58.9396 112.926 55.7012 103 53.2891V61.9999C103 64.209 101.209 65.9999 99 65.9999H20C17.7909 65.9999 16 64.209 16 61.9999V53.2891Z" fill="#F2F2F2"/>
+<svg viewBox="0 0 119 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M83.1952 1.36598L103 24V62C103 64.2091 101.209 66 99 66H20C17.7909 66 16 64.2091 16 62V24L35.8048 1.36598C36.5643 0.497921 37.6616 0 38.8151 0H80.1849C81.3384 0 82.4357 0.497922 83.1952 1.36598ZM101 26V62C101 63.1046 100.105 64 99 64H20C18.8954 64 18 63.1046 18 62V26H35.25C37.8734 26 40 28.1266 40 30.75C40 34.4779 43.0221 37.5 46.75 37.5H72.25C75.9779 37.5 79 34.4779 79 30.75C79 28.1266 81.1266 26 83.75 26H101ZM100.342 24L81.6901 2.68299C81.3103 2.24896 80.7617 2 80.1849 2H38.8151C38.2383 2 37.6897 2.24896 37.3099 2.68299L18.6575 24H35.25C38.9779 24 42 27.0221 42 30.75C42 33.3734 44.1266 35.5 46.75 35.5H72.25C74.8734 35.5 77 33.3734 77 30.75C77 27.0221 80.0221 24 83.75 24H100.342Z" fill="currentColor"/>
+<path d="M16 53.2891C6.07439 55.7012 0 58.9396 0 62.4999C0 69.9557 26.6391 75.9999 59.5 75.9999C92.3609 75.9999 119 69.9557 119 62.4999C119 58.9396 112.926 55.7012 103 53.2891V61.9999C103 64.209 101.209 65.9999 99 65.9999H20C17.7909 65.9999 16 64.209 16 61.9999V53.2891Z" fill="currentColor" stroke="currentColor" fill-opacity="0.25" />
 </svg>

superset-frontend/src/assets/images/empty_sql_chart.svg

@@ -16,7 +16,7 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<svg width="196" height="152" viewBox="0 0 196 152" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M193.652 1.5C193.652 1.22386 193.428 1 193.152 1L52.3477 1V30.3478L193.152 30.3478C193.428 30.3478 193.652 30.124 193.652 29.8478V1.5ZM41.4781 1.5C41.4781 1.22386 41.2543 1 40.9781 1L1.26074 1V30.3478L40.9781 30.3478C41.2543 30.3478 41.4781 30.124 41.4781 29.8478V1.5ZM193.652 122.152C193.652 121.876 193.428 121.652 193.152 121.652H153.435V151H193.152C193.428 151 193.652 150.776 193.652 150.5V122.152ZM40.9781 81.4348C41.2543 81.4348 41.4781 81.6586 41.4781 81.9348V110.283C41.4781 110.559 41.2543 110.783 40.9781 110.783H1.26074V81.4348H40.9781ZM116.478 81.9348C116.478 81.6586 116.254 81.4348 115.978 81.4348H52.3477V110.783H115.978C116.254 110.783 116.478 110.559 116.478 110.283V81.9348ZM193.761 81C194.037 81 194.261 81.2239 194.261 81.5V110.5C194.261 110.776 194.037 111 193.761 111H127.261V81H193.761ZM142.065 121.652C142.341 121.652 142.565 121.876 142.565 122.152V150.5C142.565 150.776 142.341 151 142.065 151L1.26074 151V121.652L142.065 121.652ZM194.739 41.7174C194.739 41.4413 194.515 41.2174 194.239 41.2174L1.26074 41.2174V70.5652L194.239 70.5652C194.515 70.5652 194.739 70.3414 194.739 70.0652V41.7174Z" fill="#F7F7F7"/>
-<path d="M193.152 1V0.500004V1ZM52.3477 1V0.5H51.8477V1H52.3477ZM52.3477 30.3478H51.8477V30.8478H52.3477V30.3478ZM193.152 30.3478V30.8478V30.3478ZM40.9781 1V1.5V1ZM1.26074 1L1.26074 0.500003L0.760742 0.500003V1H1.26074ZM1.26074 30.3478H0.760742V30.8478H1.26074L1.26074 30.3478ZM40.9781 30.3478V30.8478V30.3478ZM153.435 121.652V121.152H152.935V121.652H153.435ZM153.435 151H152.935V151.5H153.435V151ZM1.26074 110.783H0.760742V111.283H1.26074V110.783ZM1.26074 81.4348V80.9348H0.760742V81.4348H1.26074ZM52.3477 81.4348V80.9348H51.8477V81.4348H52.3477ZM52.3477 110.783H51.8477V111.283H52.3477V110.783ZM127.261 111H126.761V111.5H127.261V111ZM127.261 81V80.5H126.761V81H127.261ZM142.065 121.652V122.152V121.652ZM142.065 151V151.5V151ZM1.26074 151H0.760742V151.5H1.26074L1.26074 151ZM1.26074 121.652L1.26074 121.152H0.760742V121.652H1.26074ZM194.239 41.2174V41.7174V41.2174ZM1.26074 41.2174L1.26074 40.7174H0.760742V41.2174H1.26074ZM1.26074 70.5652H0.760742V71.0652H1.26074L1.26074 70.5652ZM194.239 70.5652V71.0652V70.5652ZM193.152 1.5V1.5H194.152C194.152 0.947717 193.704 0.500004 193.152 0.500004V1.5ZM52.3477 1.5L193.152 1.5V0.500004L52.3477 0.5V1.5ZM52.8477 30.3478V1H51.8477V30.3478H52.8477ZM193.152 29.8478L52.3477 29.8478V30.8478L193.152 30.8478V29.8478ZM193.152 29.8478V30.8478C193.704 30.8478 194.152 30.4001 194.152 29.8478H193.152ZM193.152 1.5V29.8478H194.152V1.5H193.152ZM40.9781 1.5H41.9781C41.9781 0.947719 41.5304 0.500004 40.9781 0.500004V1.5ZM1.26074 1.5L40.9781 1.5V0.500004L1.26074 0.500003L1.26074 1.5ZM1.76074 30.3478V1H0.760742V30.3478H1.76074ZM40.9781 29.8478L1.26074 29.8478L1.26074 30.8478L40.9781 30.8478V29.8478ZM40.9781 29.8478V30.8478C41.5304 30.8478 41.9781 30.4001 41.9781 29.8478H40.9781ZM40.9781 1.5V29.8478H41.9781V1.5H40.9781ZM193.152 122.152H194.152C194.152 121.6 193.704 121.152 193.152 121.152V122.152ZM153.435 122.152H193.152V121.152H153.435V122.152ZM153.935 151V121.652H152.935V151H153.935ZM193.152 150.5H153.435V151.5H193.152V150.5ZM193.152 150.5V150.5V151.5C193.704 151.5 194.152 151.052 194.152 150.5H193.152ZM193.152 122.152V150.5H194.152V122.152H193.152ZM41.9781 81.9348C41.9781 81.3825 41.5304 80.9348 40.9781 80.9348V81.9348H41.9781ZM41.9781 110.283V81.9348H40.9781V110.283H41.9781ZM40.9781 111.283C41.5304 111.283 41.9781 110.835 41.9781 110.283H40.9781V111.283ZM1.26074 111.283H40.9781V110.283H1.26074V111.283ZM0.760742 81.4348V110.783H1.76074V81.4348H0.760742ZM40.9781 80.9348H1.26074V81.9348H40.9781V80.9348ZM115.978 81.9348H116.978C116.978 81.3825 116.53 80.9348 115.978 80.9348V81.9348ZM52.3477 81.9348H115.978V80.9348H52.3477V81.9348ZM52.8477 110.783V81.4348H51.8477V110.783H52.8477ZM115.978 110.283H52.3477V111.283H115.978V110.283ZM115.978 110.283V111.283C116.53 111.283 116.978 110.835 116.978 110.283H115.978ZM115.978 81.9348V110.283H116.978V81.9348H115.978ZM194.761 81.5C194.761 80.9477 194.313 80.5 193.761 80.5V81.5H194.761ZM194.761 110.5V81.5H193.761V110.5H194.761ZM193.761 111.5C194.313 111.5 194.761 111.052 194.761 110.5H193.761V111.5ZM127.261 111.5H193.761V110.5H127.261V111.5ZM126.761 81V111H127.761V81H126.761ZM193.761 80.5H127.261V81.5H193.761V80.5ZM143.065 122.152C143.065 121.6 142.617 121.152 142.065 121.152V122.152H143.065ZM143.065 150.5V122.152H142.065V150.5H143.065ZM142.065 151.5C142.617 151.5 143.065 151.052 143.065 150.5H142.065V151.5ZM1.26074 151.5L142.065 151.5V150.5L1.26074 150.5L1.26074 151.5ZM0.760742 121.652V151H1.76074V121.652H0.760742ZM142.065 121.152L1.26074 121.152L1.26074 122.152L142.065 122.152V121.152ZM194.239 41.7174H195.239C195.239 41.1651 194.791 40.7174 194.239 40.7174V41.7174ZM1.26074 41.7174L194.239 41.7174V40.7174L1.26074 40.7174L1.26074 41.7174ZM1.76074 70.5652V41.2174H0.760742V70.5652H1.76074ZM194.239 70.0652L1.26074 70.0652L1.26074 71.0652L194.239 71.0652V70.0652ZM194.239 70.0652V71.0652C194.791 71.0652 195.239 70.6175 195.239 70.0652H194.239ZM194.239 41.7174V70.0652H195.239V41.7174H194.239Z" fill="#D9D9D9"/>
+<svg viewBox="0 0 196 152" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M193.652 1.5C193.652 1.22386 193.428 1 193.152 1L52.3477 1V30.3478L193.152 30.3478C193.428 30.3478 193.652 30.124 193.652 29.8478V1.5ZM41.4781 1.5C41.4781 1.22386 41.2543 1 40.9781 1L1.26074 1V30.3478L40.9781 30.3478C41.2543 30.3478 41.4781 30.124 41.4781 29.8478V1.5ZM193.652 122.152C193.652 121.876 193.428 121.652 193.152 121.652H153.435V151H193.152C193.428 151 193.652 150.776 193.652 150.5V122.152ZM40.9781 81.4348C41.2543 81.4348 41.4781 81.6586 41.4781 81.9348V110.283C41.4781 110.559 41.2543 110.783 40.9781 110.783H1.26074V81.4348H40.9781ZM116.478 81.9348C116.478 81.6586 116.254 81.4348 115.978 81.4348H52.3477V110.783H115.978C116.254 110.783 116.478 110.559 116.478 110.283V81.9348ZM193.761 81C194.037 81 194.261 81.2239 194.261 81.5V110.5C194.261 110.776 194.037 111 193.761 111H127.261V81H193.761ZM142.065 121.652C142.341 121.652 142.565 121.876 142.565 122.152V150.5C142.565 150.776 142.341 151 142.065 151L1.26074 151V121.652L142.065 121.652ZM194.739 41.7174C194.739 41.4413 194.515 41.2174 194.239 41.2174L1.26074 41.2174V70.5652L194.239 70.5652C194.515 70.5652 194.739 70.3414 194.739 70.0652V41.7174Z" fill="currentColor"/>
+<path d="M193.152 1V0.500004V1ZM52.3477 1V0.5H51.8477V1H52.3477ZM52.3477 30.3478H51.8477V30.8478H52.3477V30.3478ZM193.152 30.3478V30.8478V30.3478ZM40.9781 1V1.5V1ZM1.26074 1L1.26074 0.500003L0.760742 0.500003V1H1.26074ZM1.26074 30.3478H0.760742V30.8478H1.26074L1.26074 30.3478ZM40.9781 30.3478V30.8478V30.3478ZM153.435 121.652V121.152H152.935V121.652H153.435ZM153.435 151H152.935V151.5H153.435V151ZM1.26074 110.783H0.760742V111.283H1.26074V110.783ZM1.26074 81.4348V80.9348H0.760742V81.4348H1.26074ZM52.3477 81.4348V80.9348H51.8477V81.4348H52.3477ZM52.3477 110.783H51.8477V111.283H52.3477V110.783ZM127.261 111H126.761V111.5H127.261V111ZM127.261 81V80.5H126.761V81H127.261ZM142.065 121.652V122.152V121.652ZM142.065 151V151.5V151ZM1.26074 151H0.760742V151.5H1.26074L1.26074 151ZM1.26074 121.652L1.26074 121.152H0.760742V121.652H1.26074ZM194.239 41.2174V41.7174V41.2174ZM1.26074 41.2174L1.26074 40.7174H0.760742V41.2174H1.26074ZM1.26074 70.5652H0.760742V71.0652H1.26074L1.26074 70.5652ZM194.239 70.5652V71.0652V70.5652ZM193.152 1.5V1.5H194.152C194.152 0.947717 193.704 0.500004 193.152 0.500004V1.5ZM52.3477 1.5L193.152 1.5V0.500004L52.3477 0.5V1.5ZM52.8477 30.3478V1H51.8477V30.3478H52.8477ZM193.152 29.8478L52.3477 29.8478V30.8478L193.152 30.8478V29.8478ZM193.152 29.8478V30.8478C193.704 30.8478 194.152 30.4001 194.152 29.8478H193.152ZM193.152 1.5V29.8478H194.152V1.5H193.152ZM40.9781 1.5H41.9781C41.9781 0.947719 41.5304 0.500004 40.9781 0.500004V1.5ZM1.26074 1.5L40.9781 1.5V0.500004L1.26074 0.500003L1.26074 1.5ZM1.76074 30.3478V1H0.760742V30.3478H1.76074ZM40.9781 29.8478L1.26074 29.8478L1.26074 30.8478L40.9781 30.8478V29.8478ZM40.9781 29.8478V30.8478C41.5304 30.8478 41.9781 30.4001 41.9781 29.8478H40.9781ZM40.9781 1.5V29.8478H41.9781V1.5H40.9781ZM193.152 122.152H194.152C194.152 121.6 193.704 121.152 193.152 121.152V122.152ZM153.435 122.152H193.152V121.152H153.435V122.152ZM153.935 151V121.652H152.935V151H153.935ZM193.152 150.5H153.435V151.5H193.152V150.5ZM193.152 150.5V150.5V151.5C193.704 151.5 194.152 151.052 194.152 150.5H193.152ZM193.152 122.152V150.5H194.152V122.152H193.152ZM41.9781 81.9348C41.9781 81.3825 41.5304 80.9348 40.9781 80.9348V81.9348H41.9781ZM41.9781 110.283V81.9348H40.9781V110.283H41.9781ZM40.9781 111.283C41.5304 111.283 41.9781 110.835 41.9781 110.283H40.9781V111.283ZM1.26074 111.283H40.9781V110.283H1.26074V111.283ZM0.760742 81.4348V110.783H1.76074V81.4348H0.760742ZM40.9781 80.9348H1.26074V81.9348H40.9781V80.9348ZM115.978 81.9348H116.978C116.978 81.3825 116.53 80.9348 115.978 80.9348V81.9348ZM52.3477 81.9348H115.978V80.9348H52.3477V81.9348ZM52.8477 110.783V81.4348H51.8477V110.783H52.8477ZM115.978 110.283H52.3477V111.283H115.978V110.283ZM115.978 110.283V111.283C116.53 111.283 116.978 110.835 116.978 110.283H115.978ZM115.978 81.9348V110.283H116.978V81.9348H115.978ZM194.761 81.5C194.761 80.9477 194.313 80.5 193.761 80.5V81.5H194.761ZM194.761 110.5V81.5H193.761V110.5H194.761ZM193.761 111.5C194.313 111.5 194.761 111.052 194.761 110.5H193.761V111.5ZM127.261 111.5H193.761V110.5H127.261V111.5ZM126.761 81V111H127.761V81H126.761ZM193.761 80.5H127.261V81.5H193.761V80.5ZM143.065 122.152C143.065 121.6 142.617 121.152 142.065 121.152V122.152H143.065ZM143.065 150.5V122.152H142.065V150.5H143.065ZM142.065 151.5C142.617 151.5 143.065 151.052 143.065 150.5H142.065V151.5ZM1.26074 151.5L142.065 151.5V150.5L1.26074 150.5L1.26074 151.5ZM0.760742 121.652V151H1.76074V121.652H0.760742ZM142.065 121.152L1.26074 121.152L1.26074 122.152L142.065 122.152V121.152ZM194.239 41.7174H195.239C195.239 41.1651 194.791 40.7174 194.239 40.7174V41.7174ZM1.26074 41.7174L194.239 41.7174V40.7174L1.26074 40.7174L1.26074 41.7174ZM1.76074 70.5652V41.2174H0.760742V70.5652H1.76074ZM194.239 70.0652L1.26074 70.0652L1.26074 71.0652L194.239 71.0652V70.0652ZM194.239 70.0652V71.0652C194.791 71.0652 195.239 70.6175 195.239 70.0652H194.239ZM194.239 41.7174V70.0652H195.239V41.7174H194.239Z" fill="currentColor"/>
 </svg>

superset-frontend/src/assets/images/filter-results.svg

@@ -16,19 +16,56 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<svg width="120" height="150" viewBox="0 0 120 150" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M100.133 19.8391L100.134 19.8402L119.5 40.6963V149.5H0.5V0.5H82.2811L100.133 19.8391Z" fill="#F7F7F7" stroke="#D9D9D9"/>
-<path d="M82.5 0V42H120" stroke="#D9D9D9"/>
-<mask id="path-3-inside-1_738_30486" fill="white">
-<rect x="24" y="65" width="71.7778" height="9.44444" rx="0.5"/>
-</mask>
-<rect x="24" y="65" width="71.7778" height="9.44444" rx="0.5" fill="white" stroke="#D9D9D9" stroke-width="2" mask="url(#path-3-inside-1_738_30486)"/>
-<mask id="path-4-inside-2_738_30486" fill="white">
-<rect x="39.1113" y="85.7778" width="41.5556" height="9.44444" rx="0.5"/>
-</mask>
-<rect x="39.1113" y="85.7778" width="41.5556" height="9.44444" rx="0.5" fill="white" stroke="#D9D9D9" stroke-width="2" mask="url(#path-4-inside-2_738_30486)"/>
-<mask id="path-5-inside-3_738_30486" fill="white">
-<rect x="50.4443" y="106.556" width="18.8889" height="9.44444" rx="0.5"/>
-</mask>
-<rect x="50.4443" y="106.556" width="18.8889" height="9.44444" rx="0.5" fill="white" stroke="#D9D9D9" stroke-width="2" mask="url(#path-5-inside-3_738_30486)"/>
+<svg viewBox="0 0 120 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M100.133 19.8391L100.134 19.8402L119.5 40.6963V149.5H0.5V0.5H82.2811L100.133 19.8391Z"
+    fill="currentColor"
+    fill-opacity="0.25"
+    stroke="currentColor"
+    stroke-opacity="1"
+  />
+  <path
+    d="M82.5 0V42H120"
+    stroke="currentColor"
+    stroke-opacity="1"
+  />
+  <rect
+    x="24"
+    y="65"
+    width="71.7778"
+    height="9.44444"
+    rx="0.5"
+    fill="currentColor"
+    fill-opacity="0.5"
+    stroke="currentColor"
+    stroke-opacity="1"
+    stroke-width="2"
+    mask="url(#path-3-inside-1_738_30486)"
+  />
+  <rect
+    x="39.1113"
+    y="85.7778"
+    width="41.5556"
+    height="9.44444"
+    rx="0.5"
+    fill="currentColor"
+    fill-opacity="0.5"
+    stroke="currentColor"
+    stroke-opacity="1"
+    stroke-width="2"
+    mask="url(#path-4-inside-2_738_30486)"
+  />
+  <rect
+    x="50.4443"
+    y="106.556"
+    width="18.8889"
+    height="9.44444"
+    rx="0.5"
+    fill="currentColor"
+    fill-opacity="0.5"
+    stroke="currentColor"
+    stroke-opacity="1"
+    stroke-width="2"
+    mask="url(#path-5-inside-3_738_30486)"
+  />
 </svg>

superset-frontend/src/assets/images/filter.svg

@@ -16,17 +16,43 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<svg width="73" height="51" viewBox="0 0 73 51" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1_369_13099" fill="white">
-<rect x="0.79834" width="71.7778" height="9.44444" rx="0.5"/>
-</mask>
-<rect x="0.79834" width="71.7778" height="9.44444" rx="0.5" fill="#F7F7F7" stroke="#D9D9D9" stroke-width="2" mask="url(#path-1-inside-1_369_13099)"/>
-<mask id="path-2-inside-2_369_13099" fill="white">
-<rect x="15.9095" y="20.7773" width="41.5556" height="9.44444" rx="0.5"/>
-</mask>
-<rect x="15.9095" y="20.7773" width="41.5556" height="9.44444" rx="0.5" fill="#F7F7F7" stroke="#D9D9D9" stroke-width="2" mask="url(#path-2-inside-2_369_13099)"/>
-<mask id="path-3-inside-3_369_13099" fill="white">
-<rect x="27.2428" y="41.5557" width="18.8889" height="9.44444" rx="0.5"/>
-</mask>
-<rect x="27.2428" y="41.5557" width="18.8889" height="9.44444" rx="0.5" fill="#F7F7F7" stroke="#D9D9D9" stroke-width="2" mask="url(#path-3-inside-3_369_13099)"/>
+<svg viewBox="0 0 75 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <mask id="path-1-inside-1_369_13099" fill="white">
+    <rect x="0.79834" width="71.7778" height="9.44444" rx="0.5" />
+  </mask>
+  <rect
+    x="0.79834"
+    width="71.7778"
+    height="9.44444"
+    rx="0.5"
+    fill="currentColor"
+    fill-opacity="0.5"
+    stroke="currentColor"
+    stroke-opacity="1"
+    stroke-width="1"
+  />
+  <rect
+    x="15.9095"
+    y="20.7773"
+    width="41.5556"
+    height="9.44444"
+    rx="0.5"
+    fill="currentColor"
+    fill-opacity="0.5"
+    stroke="currentColor"
+    stroke-opacity="1"
+    stroke-width="1"
+  />
+  <rect
+    x="27.2428"
+    y="41.5557"
+    width="18.8889"
+    height="9.44444"
+    rx="0.5"
+    fill="currentColor"
+    fill-opacity="0.5"
+    stroke="currentColor"
+    stroke-opacity="1"
+    stroke-width="1"
+  />
 </svg>

superset-frontend/src/assets/images/star-circle.svg

@@ -16,7 +16,7 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<svg width="119" height="78" viewBox="0 0 119 78" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M59.2123 1.55857C59.4575 0.81382 60.5425 0.813801 60.7878 1.55857L67.5616 22.1322C67.9434 23.292 69.0328 24.0653 70.249 24.0653L92.1695 24.0653C92.9982 24.0653 93.2777 25.0719 92.6607 25.5143L74.9266 38.2295C73.9348 38.9406 73.5131 40.2085 73.8958 41.3707L80.6696 61.9444C80.8987 62.6402 80.076 63.3262 79.3906 62.8348L61.6566 50.1196C60.6679 49.4107 59.3321 49.4107 58.3434 50.1196L40.6094 62.8348C39.924 63.3262 39.1013 62.6402 39.3304 61.9444L46.1042 41.3707C46.4869 40.2085 46.0652 38.9406 45.0734 38.2295L27.3393 25.5143C26.7223 25.0719 27.0018 24.0653 27.8305 24.0653L49.751 24.0653C50.9672 24.0653 52.0566 23.292 52.4384 22.1322L59.2123 1.55857Z" stroke="#D5D5D5" stroke-width="2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M41.6782 51.616C17.5239 53.3343 0 58.4528 0 64.5C0 71.9558 26.6391 78 59.5 78C92.3609 78 119 71.9558 119 64.5C119 58.5387 101.97 53.4798 78.3466 51.6913L81.6194 61.6317C82.1664 63.2928 80.2398 64.6741 78.808 63.6475L61.1757 51.0053C60.619 51.0018 60.0604 51 59.5 51C59.2765 51 59.0534 51.0003 58.8305 51.0008L41.192 63.6475C39.7602 64.6741 37.8337 63.2928 38.3806 61.6317L41.6782 51.616Z" fill="#F2F2F2"/>
+<svg viewBox="0 0 119 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M59.2123 1.55857C59.4575 0.81382 60.5425 0.813801 60.7878 1.55857L67.5616 22.1322C67.9434 23.292 69.0328 24.0653 70.249 24.0653L92.1695 24.0653C92.9982 24.0653 93.2777 25.0719 92.6607 25.5143L74.9266 38.2295C73.9348 38.9406 73.5131 40.2085 73.8958 41.3707L80.6696 61.9444C80.8987 62.6402 80.076 63.3262 79.3906 62.8348L61.6566 50.1196C60.6679 49.4107 59.3321 49.4107 58.3434 50.1196L40.6094 62.8348C39.924 63.3262 39.1013 62.6402 39.3304 61.9444L46.1042 41.3707C46.4869 40.2085 46.0652 38.9406 45.0734 38.2295L27.3393 25.5143C26.7223 25.0719 27.0018 24.0653 27.8305 24.0653L49.751 24.0653C50.9672 24.0653 52.0566 23.292 52.4384 22.1322L59.2123 1.55857Z" stroke="currentColor" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.6782 51.616C17.5239 53.3343 0 58.4528 0 64.5C0 71.9558 26.6391 78 59.5 78C92.3609 78 119 71.9558 119 64.5C119 58.5387 101.97 53.4798 78.3466 51.6913L81.6194 61.6317C82.1664 63.2928 80.2398 64.6741 78.808 63.6475L61.1757 51.0053C60.619 51.0018 60.0604 51 59.5 51C59.2765 51 59.0534 51.0003 58.8305 51.0008L41.192 63.6475C39.7602 64.6741 37.8337 63.2928 38.3806 61.6317L41.6782 51.616Z" fill="currentColor" fill-opacity="0.25" stroke="currentColor"/>
 </svg>

superset-frontend/src/assets/images/union.svg

@@ -16,7 +16,7 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<svg width="119" height="76" viewBox="0 0 119 76" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M83.1952 1.36598L103 24V62C103 64.2091 101.209 66 99 66H20C17.7909 66 16 64.2091 16 62V24L35.8048 1.36598C36.5643 0.497921 37.6616 0 38.8151 0H80.1849C81.3384 0 82.4357 0.497922 83.1952 1.36598ZM101 26V62C101 63.1046 100.105 64 99 64H20C18.8954 64 18 63.1046 18 62V26H35.25C37.8734 26 40 28.1266 40 30.75C40 34.4779 43.0221 37.5 46.75 37.5H72.25C75.9779 37.5 79 34.4779 79 30.75C79 28.1266 81.1266 26 83.75 26H101ZM100.342 24L81.6901 2.68299C81.3103 2.24896 80.7617 2 80.1849 2H38.8151C38.2383 2 37.6897 2.24896 37.3099 2.68299L18.6575 24H35.25C38.9779 24 42 27.0221 42 30.75C42 33.3734 44.1266 35.5 46.75 35.5H72.25C74.8734 35.5 77 33.3734 77 30.75C77 27.0221 80.0221 24 83.75 24H100.342Z" fill="#D1D1D1"/>
-<path d="M16 53.2892C6.07439 55.7013 0 58.9397 0 62.5C0 69.9558 26.6391 76 59.5 76C92.3609 76 119 69.9558 119 62.5C119 58.9397 112.926 55.7013 103 53.2892V62C103 64.2091 101.209 66 99 66H20C17.7909 66 16 64.2091 16 62V53.2892Z" fill="#F2F2F2"/>
+<svg viewBox="0 0 119 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M83.1952 1.36598L103 24V62C103 64.2091 101.209 66 99 66H20C17.7909 66 16 64.2091 16 62V24L35.8048 1.36598C36.5643 0.497921 37.6616 0 38.8151 0H80.1849C81.3384 0 82.4357 0.497922 83.1952 1.36598ZM101 26V62C101 63.1046 100.105 64 99 64H20C18.8954 64 18 63.1046 18 62V26H35.25C37.8734 26 40 28.1266 40 30.75C40 34.4779 43.0221 37.5 46.75 37.5H72.25C75.9779 37.5 79 34.4779 79 30.75C79 28.1266 81.1266 26 83.75 26H101ZM100.342 24L81.6901 2.68299C81.3103 2.24896 80.7617 2 80.1849 2H38.8151C38.2383 2 37.6897 2.24896 37.3099 2.68299L18.6575 24H35.25C38.9779 24 42 27.0221 42 30.75C42 33.3734 44.1266 35.5 46.75 35.5H72.25C74.8734 35.5 77 33.3734 77 30.75C77 27.0221 80.0221 24 83.75 24H100.342Z" fill="currentColor"/>
+<path d="M16 53.2892C6.07439 55.7013 0 58.9397 0 62.5C0 69.9558 26.6391 76 59.5 76C92.3609 76 119 69.9558 119 62.5C119 58.9397 112.926 55.7013 103 53.2892V62C103 64.2091 101.209 66 99 66H20C17.7909 66 16 64.2091 16 62V53.2892Z" fill="currentColor" stroke="currentColor" fill-opacity="0.25"/>
 </svg>

superset-frontend/src/assets/images/vector.svg

@@ -16,6 +16,6 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<svg width="118" height="150" viewBox="0 0 118 150" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.1212 11.5536H11.6212V12.0536V46.875V47.375H12.1212H105.871H106.371V46.875V12.0536V11.5536H105.871H12.1212ZM105.871 92.9107H106.371V92.4107V57.5893V57.0893H105.871H12.1212H11.6212V57.5893V92.4107V92.9107H12.1212H105.871ZM105.871 138.446H106.371V137.946V103.125V102.625H105.871H12.1212H11.6212V103.125V137.946V138.446H12.1212H105.871ZM5.42477 0.5H112.568C115.255 0.5 117.425 2.67012 117.425 5.35714V144.643C117.425 147.33 115.255 149.5 112.568 149.5H5.42477C2.73774 149.5 0.567627 147.33 0.567627 144.643V5.35714C0.567627 2.67012 2.73774 0.5 5.42477 0.5ZM26.4897 33.8458C25.3276 32.6838 24.6748 31.1077 24.6748 29.4643C24.6748 27.8209 25.3276 26.2448 26.4897 25.0828C27.6517 23.9207 29.2278 23.2679 30.8712 23.2679C32.5146 23.2679 34.0907 23.9207 35.2527 25.0828C36.4148 26.2448 37.0676 27.8209 37.0676 29.4643C37.0676 31.1077 36.4148 32.6838 35.2527 33.8458C34.0907 35.0079 32.5146 35.6607 30.8712 35.6607C29.2278 35.6607 27.6517 35.0079 26.4897 33.8458ZM26.4897 79.3815C25.3276 78.2195 24.6748 76.6434 24.6748 75C24.6748 73.3566 25.3276 71.7805 26.4897 70.6185C27.6517 69.4564 29.2278 68.8036 30.8712 68.8036C32.5146 68.8036 34.0907 69.4564 35.2527 70.6185C36.4148 71.7805 37.0676 73.3566 37.0676 75C37.0676 76.6434 36.4148 78.2195 35.2527 79.3815C34.0907 80.5436 32.5146 81.1964 30.8712 81.1964C29.2278 81.1964 27.6517 80.5436 26.4897 79.3815ZM26.4897 124.917C25.3276 123.755 24.6748 122.179 24.6748 120.536C24.6748 118.892 25.3276 117.316 26.4897 116.154C27.6517 114.992 29.2278 114.339 30.8712 114.339C32.5146 114.339 34.0907 114.992 35.2527 116.154C36.4148 117.316 37.0676 118.892 37.0676 120.536C37.0676 122.179 36.4148 123.755 35.2527 124.917C34.0907 126.079 32.5146 126.732 30.8712 126.732C29.2278 126.732 27.6517 126.079 26.4897 124.917Z" fill="#F7F7F7" stroke="#D9D9D9"/>
+<svg viewBox="0 0 118 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1212 11.5536H11.6212V12.0536V46.875V47.375H12.1212H105.871H106.371V46.875V12.0536V11.5536H105.871H12.1212ZM105.871 92.9107H106.371V92.4107V57.5893V57.0893H105.871H12.1212H11.6212V57.5893V92.4107V92.9107H12.1212H105.871ZM105.871 138.446H106.371V137.946V103.125V102.625H105.871H12.1212H11.6212V103.125V137.946V138.446H12.1212H105.871ZM5.42477 0.5H112.568C115.255 0.5 117.425 2.67012 117.425 5.35714V144.643C117.425 147.33 115.255 149.5 112.568 149.5H5.42477C2.73774 149.5 0.567627 147.33 0.567627 144.643V5.35714C0.567627 2.67012 2.73774 0.5 5.42477 0.5ZM26.4897 33.8458C25.3276 32.6838 24.6748 31.1077 24.6748 29.4643C24.6748 27.8209 25.3276 26.2448 26.4897 25.0828C27.6517 23.9207 29.2278 23.2679 30.8712 23.2679C32.5146 23.2679 34.0907 23.9207 35.2527 25.0828C36.4148 26.2448 37.0676 27.8209 37.0676 29.4643C37.0676 31.1077 36.4148 32.6838 35.2527 33.8458C34.0907 35.0079 32.5146 35.6607 30.8712 35.6607C29.2278 35.6607 27.6517 35.0079 26.4897 33.8458ZM26.4897 79.3815C25.3276 78.2195 24.6748 76.6434 24.6748 75C24.6748 73.3566 25.3276 71.7805 26.4897 70.6185C27.6517 69.4564 29.2278 68.8036 30.8712 68.8036C32.5146 68.8036 34.0907 69.4564 35.2527 70.6185C36.4148 71.7805 37.0676 73.3566 37.0676 75C37.0676 76.6434 36.4148 78.2195 35.2527 79.3815C34.0907 80.5436 32.5146 81.1964 30.8712 81.1964C29.2278 81.1964 27.6517 80.5436 26.4897 79.3815ZM26.4897 124.917C25.3276 123.755 24.6748 122.179 24.6748 120.536C24.6748 118.892 25.3276 117.316 26.4897 116.154C27.6517 114.992 29.2278 114.339 30.8712 114.339C32.5146 114.339 34.0907 114.992 35.2527 116.154C36.4148 117.316 37.0676 118.892 37.0676 120.536C37.0676 122.179 36.4148 123.755 35.2527 124.917C34.0907 126.079 32.5146 126.732 30.8712 126.732C29.2278 126.732 27.6517 126.079 26.4897 124.917Z" fill="currentColor" stroke="CurrentColor" fill-opacity="0.5"/>
 </svg>

superset-frontend/src/components/Chart/Chart.tsx

@@ -31,7 +31,7 @@ import {
 } from '@superset-ui/core';
 import { PLACEHOLDER_DATASOURCE } from 'src/dashboard/constants';
 import Loading from 'src/components/Loading';
-import { EmptyStateBig } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import ErrorBoundary from 'src/components/ErrorBoundary';
 import { Logger, LOG_ACTIONS_RENDER_CHART } from 'src/logger/LogUtils';
 import { URL_PARAMS } from 'src/constants';
@@ -337,7 +337,8 @@ class Chart extends PureComponent<ChartProps, {}> {
 
     if (errorMessage && ensureIsArray(queriesResponse).length === 0) {
       return (
-        <EmptyStateBig
+        <EmptyState
+          size="large"
           title={t('Add required control values to preview chart')}
           description={getChartRequiredFieldsMissingMessage(true)}
           image="chart.svg"
@@ -352,7 +353,8 @@ class Chart extends PureComponent<ChartProps, {}> {
       ensureIsArray(queriesResponse).length === 0
     ) {
       return (
-        <EmptyStateBig
+        <EmptyState
+          size="large"
           title={t('Your chart is ready to go!')}
           description={
             <span>

superset-frontend/src/components/Chart/ChartRenderer.jsx

@@ -30,7 +30,7 @@ import {
   VizType,
 } from '@superset-ui/core';
 import { Logger, LOG_ACTIONS_RENDER_CHART } from 'src/logger/LogUtils';
-import { EmptyStateBig, EmptyStateSmall } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import { ChartSource } from 'src/types/ChartSource';
 import ChartContextMenu from './ChartContextMenu/ChartContextMenu';
 
@@ -308,7 +308,8 @@ class ChartRenderer extends Component {
     const noResultImage = 'chart.svg';
     if (width > BIG_NO_RESULT_MIN_WIDTH && height > BIG_NO_RESULT_MIN_HEIGHT) {
       noResultsComponent = (
-        <EmptyStateBig
+        <EmptyState
+          size="large"
           title={noResultTitle}
           description={noResultDescription}
           image={noResultImage}
@@ -316,7 +317,7 @@ class ChartRenderer extends Component {
       );
     } else {
       noResultsComponent = (
-        <EmptyStateSmall title={noResultTitle} image={noResultImage} />
+        <EmptyState size="small" title={noResultTitle} image={noResultImage} />
       );
     }
 

superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx

@@ -41,7 +41,7 @@ import Loading from 'src/components/Loading';
 import BooleanCell from 'src/components/Table/cell-renderers/BooleanCell';
 import NullCell from 'src/components/Table/cell-renderers/NullCell';
 import TimeCell from 'src/components/Table/cell-renderers/TimeCell';
-import { EmptyStateMedium } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import { getDatasourceSamples } from 'src/components/Chart/chartAction';
 import Table, { ColumnsType, TableSize } from 'src/components/Table';
 import HeaderWithRadioGroup from 'src/components/Table/header-renderers/HeaderWithRadioGroup';
@@ -285,7 +285,7 @@ export default function DrillDetailPane({
   } else if (resultsPage?.total === 0) {
     // Render empty state if no results are returned for page
     const title = t('No rows were returned for this dataset');
-    tableContent = <EmptyStateMedium image="document.svg" title={title} />;
+    tableContent = <EmptyState image="document.svg" title={title} />;
   } else {
     // Render table if at least one page has successfully loaded
     tableContent = (

superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx

@@ -28,7 +28,7 @@ import {
 import userEvent from '@testing-library/user-event';
 import { api } from 'src/hooks/apiResources/queryApi';
 import DatabaseSelector, { DatabaseSelectorProps } from '.';
-import { EmptyStateSmall } from '../EmptyState';
+import { EmptyState } from '../EmptyState';
 
 const createProps = (): DatabaseSelectorProps => ({
   db: {
@@ -307,7 +307,7 @@ test('should show empty state if there are no options', async () => {
     <DatabaseSelector
       {...props}
       db={undefined}
-      emptyState={<EmptyStateSmall title="empty" image="" />}
+      emptyState={<EmptyState size="small" title="empty" />}
     />,
     { useRedux: true, store },
   );

superset-frontend/src/components/EmptyState/EmptyState.stories.tsx

@@ -9,64 +9,59 @@
  *
  *   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
+ * 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 { Meta, StoryFn } from '@storybook/react';
+import { Row, Col } from 'antd';
+import { EmptyState, imageMap } from '.';
 
-import EmptyImage from 'src/assets/images/empty.svg';
-import ChartImage from 'src/assets/images/chart.svg';
-import FilterImage from 'src/assets/images/filter.svg';
-import { EmptyStateBig, EmptyStateMedium, EmptyStateSmall } from '.';
+const emptyStates = [
+  { title: null, description: null, image: undefined },
+  ...Object.keys(imageMap).map(key => ({
+    image: key,
+    title: `Empty State with image ${key}`,
+    description: 'This is the default empty state.',
+  })),
+];
 
 export default {
-  title: 'Empty state',
-  component: EmptyStateMedium,
+  title: 'Empty State Gallery',
+  component: EmptyState,
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+      defaultValue: 'medium',
+      description: 'Size of the Empty State components',
+    },
+  },
+} as Meta;
+
+export const Gallery: StoryFn<{ size: 'small' | 'medium' | 'large' }> = ({
+  size,
+}) => (
+  <Row gutter={[16, 16]}>
+    {emptyStates.map((state, index) => (
+      <Col key={index} xs={24} sm={12} md={8} lg={6}>
+        <EmptyState
+          size={size}
+          title={state.title}
+          description={state.description}
+          image={state.image}
+        >
+          Childrens render here.
+        </EmptyState>
+      </Col>
+    ))}
+  </Row>
+);
+
+Gallery.args = {
+  size: 'medium',
 };
-
-export const SmallEmptyState = () => (
-  <EmptyStateSmall
-    image={<FilterImage />}
-    title="Small empty state"
-    description="This is an example of a small empty state"
-  />
-);
-
-export const MediumEmptyState = () => (
-  <EmptyStateMedium
-    image={<ChartImage />}
-    title="Medium empty state"
-    description="This is an example of a medium empty state"
-  />
-);
-
-export const MediumEmptyStateWithButton = () => (
-  <EmptyStateMedium
-    image={<EmptyImage />}
-    title="Medium empty state"
-    description="This is an example of a medium empty state with a button"
-    buttonAction={() => {}}
-    buttonText="Click!"
-  />
-);
-
-export const BigEmptyState = () => (
-  <EmptyStateBig
-    image={<EmptyImage />}
-    title="Big empty state"
-    description="This is an example of a big empty state"
-  />
-);
-
-export const BigEmptyStateWithButton = () => (
-  <EmptyStateBig
-    image={<ChartImage />}
-    title="Big empty state"
-    description="This is an example of a big empty state with a button"
-    buttonText="Click!"
-    buttonAction={() => {}}
-  />
-);

superset-frontend/src/components/EmptyState/index.tsx

@@ -16,38 +16,57 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import {
-  ReactNode,
-  SyntheticEvent,
-  MouseEventHandler as ReactMouseEventHandler,
-} from 'react';
+import { ReactNode, SyntheticEvent } from 'react';
 import { styled, css, SupersetTheme, t } from '@superset-ui/core';
 import Button from 'src/components/Button';
+
+// Importing svg images
+import FilterResultsImage from 'src/assets/images/filter-results.svg';
+import ChartImage from 'src/assets/images/chart.svg';
+import FilterImage from 'src/assets/images/filter.svg';
+import EmptyChartsImage from 'src/assets/images/empty-charts.svg';
+import EmptyDashboardImage from 'src/assets/images/empty-dashboard.svg';
+import UnionImage from 'src/assets/images/union.svg';
+import EmptyQueriesImage from 'src/assets/images/empty-queries.svg';
+import StarCircleImage from 'src/assets/images/star-circle.svg';
+import VectorImage from 'src/assets/images/vector.svg';
+import DocumentImage from 'src/assets/images/document.svg';
+import DatasetImage from 'src/assets/images/empty-dataset.svg';
+import EmptySqlChartImage from 'src/assets/images/empty_sql_chart.svg';
+import EmptyQueryImage from 'src/assets/images/empty-query.svg';
+import EmptyTableImage from 'src/assets/images/empty-table.svg';
+import EmptyImage from 'src/assets/images/empty.svg';
 import { Empty } from './Empty';
 
-export enum EmptyStateSize {
-  Small,
-  Medium,
-  Big,
-}
+export const imageMap = {
+  'chart.svg': <ChartImage />,
+  'document.svg': <DocumentImage />,
+  'empty-charts.svg': <EmptyChartsImage />,
+  'empty-dashboard.svg': <EmptyDashboardImage />,
+  'empty-dataset.svg': <DatasetImage />,
+  'empty-queries.svg': <EmptyQueriesImage />,
+  'empty-query.svg': <EmptyQueryImage />,
+  'empty-table.svg': <EmptyTableImage />,
+  'empty.svg': <EmptyImage />,
+  'empty_sql_chart.svg': <EmptySqlChartImage />,
+  'filter-results.svg': <FilterResultsImage />,
+  'filter.svg': <FilterImage />,
+  'star-circle.svg': <StarCircleImage />,
+  'union.svg': <UnionImage />,
+  'vector.svg': <VectorImage />,
+};
 
-export interface EmptyStateSmallProps {
+type EmptyStateSize = 'small' | 'medium' | 'large';
+
+export type EmptyStateProps = {
   title?: ReactNode;
   description?: ReactNode;
-  image?: ReactNode;
-}
-
-export interface EmptyStateProps extends EmptyStateSmallProps {
+  image?: ReactNode | string;
   buttonText?: ReactNode;
-  buttonAction?: ReactMouseEventHandler<HTMLElement>;
-  className?: string;
-}
-
-export interface ImageContainerProps {
-  image: ReactNode;
-  size: EmptyStateSize;
-}
+  buttonAction?: (event: SyntheticEvent) => void;
+  size?: EmptyStateSize;
+  children?: ReactNode;
+};
 
 const EmptyStateContainer = styled.div`
   ${({ theme }) => css`
@@ -55,6 +74,7 @@ const EmptyStateContainer = styled.div`
     flex-direction: column;
     width: 100%;
     height: 100%;
+    color: ${theme.colors.grayscale.light2};
     align-items: center;
     justify-content: center;
     padding: ${theme.gridUnit * 4}px;
@@ -75,43 +95,24 @@ const EmptyStateContainer = styled.div`
   `}
 `;
 
-const TextContainer = styled.div``;
-
-const Title = styled.p`
-  ${({ theme }) => css`
-    font-size: ${theme.typography.sizes.m}px;
+const Title = styled.p<{ size: EmptyStateSize }>`
+  ${({ theme, size }) => css`
+    font-size: ${size === 'large'
+      ? theme.typography.sizes.l
+      : theme.typography.sizes.m}px;
     color: ${theme.colors.grayscale.light1};
-    margin: ${theme.gridUnit * 2}px 0 0 0;
+    margin-top: ${size === 'large' ? theme.gridUnit * 4 : theme.gridUnit * 2}px;
     font-weight: ${theme.typography.weights.bold};
   `}
 `;
 
-const BigTitle = styled(Title)`
-  ${({ theme }) => css`
-    font-size: ${theme.typography.sizes.l}px;
+const Description = styled.p<{ size: EmptyStateSize }>`
+  ${({ theme, size }) => css`
+    font-size: ${size === 'large'
+      ? theme.typography.sizes.m
+      : theme.typography.sizes.s}px;
     color: ${theme.colors.grayscale.light1};
-    margin-top: ${theme.gridUnit * 4}px;
-  `}
-`;
-
-const Description = styled.p`
-  ${({ theme }) => css`
-    font-size: ${theme.typography.sizes.s}px;
-    color: ${theme.colors.grayscale.light1};
-    margin: ${theme.gridUnit * 2}px 0 0 0;
-  `}
-`;
-
-const BigDescription = styled(Description)`
-  ${({ theme }) => css`
-    font-size: ${theme.typography.sizes.m}px;
-  `}
-`;
-
-const SmallDescription = styled(Description)`
-  ${({ theme }) => css`
-    margin-top: ${theme.gridUnit}px;
-    line-height: 1.2;
+    margin-top: ${theme.gridUnit * 2}px;
   `}
 `;
 
@@ -122,81 +123,68 @@ const ActionButton = styled(Button)`
   `}
 `;
 
-const getImage = (image: string | ReactNode) =>
-  typeof image === 'string' ? `/static/assets/images/${image}` : image;
-
 const getImageHeight = (size: EmptyStateSize) => {
   switch (size) {
-    case EmptyStateSize.Small:
+    case 'small':
       return { height: '50px' };
-    case EmptyStateSize.Medium:
+    case 'medium':
       return { height: '80px' };
-    case EmptyStateSize.Big:
+    case 'large':
       return { height: '150px' };
     default:
-      return { height: '50px' };
+      return { height: '80px' };
   }
 };
 
-const ImageContainer = ({ image, size }: ImageContainerProps) => (
-  <Empty
-    description={false}
-    image={getImage(image)}
-    imageStyle={getImageHeight(size)}
-  />
-);
+const ImageContainer = ({
+  image,
+  size,
+}: {
+  image?: ReactNode | string;
+  size: EmptyStateSize;
+}) => {
+  if (!image) return null;
+  const mappedImage = typeof image === 'string' ? imageMap[image] : image;
+  return (
+    <div role="img" aria-label="empty">
+      <Empty
+        description={false}
+        image={mappedImage}
+        imageStyle={getImageHeight(size)}
+      />
+    </div>
+  );
+};
 
 const handleMouseDown = (e: SyntheticEvent) => {
   e.preventDefault();
   e.stopPropagation();
 };
 
-export const EmptyStateBig = ({
-  title,
-  image,
-  description,
-  buttonAction,
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  title = t('No results'),
+  description = t('There is currently no information to display.'),
+  image = 'empty.svg',
   buttonText,
-  className,
-}: EmptyStateProps) => (
-  <EmptyStateContainer className={className}>
-    {image && <ImageContainer image={image} size={EmptyStateSize.Big} />}
-    <TextContainer
-      css={(theme: SupersetTheme) => css`
-        max-width: ${theme.gridUnit * 150}px;
-      `}
-    >
-      <BigTitle>{title}</BigTitle>
-      {description && <BigDescription>{description}</BigDescription>}
-      {buttonAction && buttonText && (
-        <ActionButton
-          buttonStyle="primary"
-          onClick={buttonAction}
-          onMouseDown={handleMouseDown}
-        >
-          {buttonText}
-        </ActionButton>
-      )}
-    </TextContainer>
-  </EmptyStateContainer>
-);
-
-export const EmptyStateMedium = ({
-  title,
-  image,
-  description,
   buttonAction,
-  buttonText,
-}: EmptyStateProps) => (
+  size = 'medium',
+  children,
+}) => (
   <EmptyStateContainer>
-    {image && <ImageContainer image={image} size={EmptyStateSize.Medium} />}
-    <TextContainer
+    {image && <ImageContainer image={image} size={size} />}
+    <div
       css={(theme: SupersetTheme) => css`
-        max-width: ${theme.gridUnit * 100}px;
+        max-width: ${size === 'large'
+          ? theme.gridUnit * 150
+          : theme.gridUnit * 100}px;
       `}
     >
-      <Title>{title}</Title>
-      {description && <Description>{description}</Description>}
+      {title && <Title size={size}>{title}</Title>}
+      {description && (
+        <Description size={size} className="ant-empty-description">
+          {description}
+        </Description>
+      )}
       {buttonText && buttonAction && (
         <ActionButton
           buttonStyle="primary"
@@ -206,48 +194,7 @@ export const EmptyStateMedium = ({
           {buttonText}
         </ActionButton>
       )}
-    </TextContainer>
+      {children}
+    </div>
   </EmptyStateContainer>
 );
-
-export const EmptyStateSmall = ({
-  title,
-  image,
-  description,
-}: EmptyStateSmallProps) => (
-  <EmptyStateContainer>
-    {image && <ImageContainer image={image} size={EmptyStateSize.Small} />}
-    <TextContainer
-      css={(theme: SupersetTheme) => css`
-        max-width: ${theme.gridUnit * 75}px;
-      `}
-    >
-      <Title>{title}</Title>
-      {description && <SmallDescription>{description}</SmallDescription>}
-    </TextContainer>
-  </EmptyStateContainer>
-);
-
-const TRANSLATIONS = {
-  NO_DATABASES_MATCH_TITLE: t('No databases match your search'),
-  NO_DATABASES_AVAILABLE_TITLE: t('There are no databases available'),
-  MANAGE_YOUR_DATABASES_TEXT: t('Manage your databases'),
-  HERE_TEXT: t('here'),
-};
-
-export const emptyStateComponent = (emptyResultsWithSearch: boolean) => (
-  <EmptyStateSmall
-    image="empty.svg"
-    title={
-      emptyResultsWithSearch
-        ? TRANSLATIONS.NO_DATABASES_MATCH_TITLE
-        : TRANSLATIONS.NO_DATABASES_AVAILABLE_TITLE
-    }
-    description={
-      <p>
-        {TRANSLATIONS.MANAGE_YOUR_DATABASES_TEXT}{' '}
-        <a href="/databaseview/list">{TRANSLATIONS.HERE_TEXT}</a>
-      </p>
-    }
-  />
-);

superset-frontend/src/components/ListView/ListView.tsx

@@ -37,7 +37,7 @@ import {
   ViewModeType,
 } from './types';
 import { ListViewError, useListViewState } from './utils';
-import { EmptyStateBig, EmptyStateProps } from '../EmptyState';
+import { EmptyState, EmptyStateProps } from '../EmptyState';
 
 const ListViewStyles = styled.div`
   text-align: center;
@@ -447,17 +447,19 @@ function ListView<T extends object = any>({
           {!loading && rows.length === 0 && (
             <EmptyWrapper className={viewMode}>
               {query.filters ? (
-                <EmptyStateBig
+                <EmptyState
                   title={t('No results match your filter criteria')}
                   description={t('Try different criteria to display results.')}
+                  size="large"
                   image="filter-results.svg"
                   buttonAction={() => handleClearFilterControls()}
                   buttonText={t('clear all filters')}
                 />
               ) : (
-                <EmptyStateBig
+                <EmptyState
                   {...emptyState}
                   title={emptyState?.title || t('No Data')}
+                  size="large"
                   image={emptyState?.image || 'filter-results.svg'}
                 />
               )}

superset-frontend/src/components/Table/index.tsx

@@ -16,13 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useState, useEffect, useRef, ReactElement, Key } from 'react';
+import { useState, useEffect, useRef, Key } from 'react';
 
 import AntTable, {
   ColumnsType,
   TableProps as AntTableProps,
 } from 'antd/lib/table';
-import ConfigProvider from 'antd/lib/config-provider';
 import { PaginationProps } from 'antd/lib/pagination';
 import { t, useTheme, logging, styled } from '@superset-ui/core';
 import Loading from 'src/components/Loading';
@@ -116,10 +115,6 @@ export interface TableProps<RecordType> {
    * Set table to display no data even if data has been provided
    */
   hideData?: boolean;
-  /**
-   * emptyComponent
-   */
-  emptyComponent?: ReactElement;
   /**
    * Enables setting the text displayed in various components and tooltips within the Table UI.
    */
@@ -256,7 +251,6 @@ export function Table<RecordType extends object>(
     defaultPageSize = 15,
     pageSizeOptions = ['5', '15', '25', '50', '100'],
     hideData = false,
-    emptyComponent,
     locale,
     height,
     virtualize = false,
@@ -288,9 +282,6 @@ export function Table<RecordType extends object>(
     onChange: onSelectChange,
   };
 
-  const renderEmpty = () =>
-    emptyComponent ?? <div>{mergedLocale.emptyText}</div>;
-
   // Log use of experimental features
   useEffect(() => {
     if (reorderable === true) {
@@ -403,31 +394,29 @@ export function Table<RecordType extends object>(
   };
 
   return (
-    <ConfigProvider renderEmpty={renderEmpty}>
-      <div ref={wrapperRef}>
-        {!virtualize && (
-          <StyledTable
-            {...sharedProps}
-            rowSelection={selectionTypeValue ? rowSelection : undefined}
-            sticky={sticky}
-          />
-        )}
-        {virtualize && (
-          <StyledVirtualTable
-            {...sharedProps}
-            scroll={{
-              y: 300,
-              x: '100vw',
-              // To avoid jest failure by scrollTo
-              ...(process.env.WEBPACK_MODE === 'test' && {
-                scrollToFirstRowOnChange: false,
-              }),
-            }}
-            allowHTML={allowHTML}
-          />
-        )}
-      </div>
-    </ConfigProvider>
+    <div ref={wrapperRef}>
+      {!virtualize && (
+        <StyledTable
+          {...sharedProps}
+          rowSelection={selectionTypeValue ? rowSelection : undefined}
+          sticky={sticky}
+        />
+      )}
+      {virtualize && (
+        <StyledVirtualTable
+          {...sharedProps}
+          scroll={{
+            y: 300,
+            x: '100vw',
+            // To avoid jest failure by scrollTo
+            ...(process.env.WEBPACK_MODE === 'test' && {
+              scrollToFirstRowOnChange: false,
+            }),
+          }}
+          allowHTML={allowHTML}
+        />
+      )}
+    </div>
   );
 }
 

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx

@@ -65,7 +65,7 @@ import {
 } from 'src/dashboard/util/constants';
 import FilterBar from 'src/dashboard/components/nativeFilters/FilterBar';
 import Loading from 'src/components/Loading';
-import { EmptyStateBig } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import { useUiConfig } from 'src/components/UiConfigContext';
 import ResizableSidebar from 'src/components/ResizableSidebar';
 import {
@@ -667,8 +667,9 @@ const DashboardBuilder = () => {
         {!editMode &&
           !topLevelTabs &&
           dashboardLayout[DASHBOARD_GRID_ID]?.children?.length === 0 && (
-            <EmptyStateBig
+            <EmptyState
               title={t('There are no charts added to this dashboard')}
+              size="large"
               description={
                 canEdit &&
                 t(

superset-frontend/src/dashboard/components/DashboardGrid.jsx

@@ -20,7 +20,7 @@ import { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { addAlpha, css, styled, t } from '@superset-ui/core';
-import { EmptyStateBig } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import { componentShape } from '../util/propShapes';
 import DashboardComponent from '../containers/DashboardComponent';
 import { Droppable } from './dnd/DragDroppable';
@@ -205,11 +205,12 @@ class DashboardGrid extends PureComponent {
       shouldDisplayEmptyState && gridComponent.type === TAB_TYPE;
 
     const dashboardEmptyState = editMode && (
-      <EmptyStateBig
+      <EmptyState
         title={t('Drag and drop components and charts to the dashboard')}
         description={t(
           'You can create a new chart or use existing ones from the panel on the right',
         )}
+        size="large"
         buttonText={
           <>
             <i className="fa fa-plus" />
@@ -228,8 +229,9 @@ class DashboardGrid extends PureComponent {
     );
 
     const topLevelTabEmptyState = editMode ? (
-      <EmptyStateBig
+      <EmptyState
         title={t('Drag and drop components to this tab')}
+        size="large"
         description={t(
           `You can create a new chart or use existing ones from the panel on the right`,
         )}
@@ -249,8 +251,9 @@ class DashboardGrid extends PureComponent {
         image="chart.svg"
       />
     ) : (
-      <EmptyStateBig
+      <EmptyState
         title={t('There are no components added to this tab')}
+        size="large"
         description={
           canEdit && t('You can add the components in the edit mode.')
         }

superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx

@@ -117,7 +117,7 @@ describe('ChartHolder', () => {
         'Make sure that the controls are configured properly and the datasource contains data for the selected time range',
       ),
     ).not.toBeInTheDocument(); // description should display only in Explore view
-    expect(screen.getByAltText('empty')).toBeVisible();
+    expect(screen.getByRole('img', { name: 'empty' })).toBeVisible();
   });
 
   it('should render anchor link when not editing', async () => {

superset-frontend/src/dashboard/components/gridComponents/Tab.jsx

@@ -22,7 +22,7 @@ import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 import { styled, t } from '@superset-ui/core';
 
-import { EmptyStateMedium } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import EditableTitle from 'src/components/EditableTitle';
 import { setEditMode } from 'src/dashboard/actions/dashboardState';
 import DashboardComponent from 'src/dashboard/containers/DashboardComponent';
@@ -197,7 +197,7 @@ const Tab = props => {
           </Droppable>
         )}
         {shouldDisplayEmptyState && (
-          <EmptyStateMedium
+          <EmptyState
             title={
               editMode
                 ? t('Drag and drop components to this tab')

superset-frontend/src/dashboard/components/gridComponents/Tab.test.tsx

@@ -288,7 +288,7 @@ test('Render tab content with no children', () => {
   expect(
     screen.getByText('There are no components added to this tab'),
   ).toBeVisible();
-  expect(screen.getByAltText('empty')).toBeVisible();
+  expect(screen.getByRole('img', { name: 'empty' })).toBeVisible();
   expect(screen.queryByText('edit mode')).not.toBeInTheDocument();
 });
 
@@ -397,7 +397,7 @@ test('Render tab content with no children, editMode: true, canEdit: true', () =>
   expect(
     screen.getByText('Drag and drop components to this tab'),
   ).toBeVisible();
-  expect(screen.getByAltText('empty')).toBeVisible();
+  expect(screen.getByRole('img', { name: 'empty' })).toBeVisible();
   expect(
     screen.getByRole('link', { name: 'create a new chart' }),
   ).toBeVisible();

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx

@@ -33,7 +33,7 @@ import cx from 'classnames';
 import { FeatureFlag, isFeatureEnabled, styled, t } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import Loading from 'src/components/Loading';
-import { EmptyStateSmall } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import { getFilterBarTestId } from './utils';
 import { VerticalBarProps } from './types';
 import Header from './Header';
@@ -168,7 +168,8 @@ const VerticalFilterBar: FC<VerticalBarProps> = ({
     () =>
       filterValues.length === 0 ? (
         <FilterBarEmptyStateContainer>
-          <EmptyStateSmall
+          <EmptyState
+            size="small"
             title={t('No global filters are currently added')}
             image="filter.svg"
             description={

superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx

@@ -19,7 +19,7 @@
 import { useState, useEffect, useMemo } from 'react';
 import { ensureIsArray, GenericDataType, styled, t } from '@superset-ui/core';
 import Loading from 'src/components/Loading';
-import { EmptyStateMedium } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import TableView, { EmptyWrapperType } from 'src/components/TableView';
 import {
   useFilteredTableData,
@@ -124,7 +124,7 @@ export const SamplesPane = ({
 
   if (data.length === 0) {
     const title = t('No samples were returned for this dataset');
-    return <EmptyStateMedium image="document.svg" title={title} />;
+    return <EmptyState image="document.svg" title={title} />;
   }
 
   return (

superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx

@@ -26,7 +26,7 @@ import {
   getClientErrorObject,
 } from '@superset-ui/core';
 import Loading from 'src/components/Loading';
-import { EmptyStateMedium } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import { getChartDataRequest } from 'src/components/Chart/chartAction';
 import { ResultsPaneProps, QueryResultInterface } from '../types';
 import { SingleQueryResultPane } from './SingleQueryResultPane';
@@ -110,7 +110,7 @@ export const useResultsPane = ({
   if (errorMessage) {
     const title = t('Run a query to display results');
     return Array(queryCount).fill(
-      <EmptyStateMedium image="document.svg" title={title} />,
+      <EmptyState image="document.svg" title={title} />,
     );
   }
 
@@ -136,7 +136,7 @@ export const useResultsPane = ({
   if (resultResp.length === 0) {
     const title = t('No results were returned for this query');
     return Array(queryCount).fill(
-      <EmptyStateMedium image="document.svg" title={title} />,
+      <EmptyState image="document.svg" title={title} />,
     );
   }
   return resultResp

superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx

@@ -38,7 +38,7 @@ import TextControl from 'src/explore/components/controls/TextControl';
 import CheckboxControl from 'src/explore/components/controls/CheckboxControl';
 import PopoverSection from 'src/components/PopoverSection';
 import ControlHeader from 'src/explore/components/ControlHeader';
-import { EmptyStateSmall } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import {
   ANNOTATION_SOURCE_TYPES,
   ANNOTATION_TYPES,
@@ -111,8 +111,9 @@ const NotFoundContentWrapper = styled.div`
 
 const NotFoundContent = () => (
   <NotFoundContentWrapper>
-    <EmptyStateSmall
+    <EmptyState
       title={t('No annotation layers')}
+      size="small"
       description={
         <span>
           {t('Add an annotation layer')}{' '}

superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx

@@ -43,7 +43,7 @@ import { Select } from 'src/components';
 import { Form, FormItem } from 'src/components/Form';
 import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
 import { SQLEditor } from 'src/components/AsyncAceEditor';
-import { EmptyStateSmall } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import { getColumnKeywords } from 'src/explore/controlUtils/getColumnKeywords';
 import { StyledColumnOption } from 'src/explore/components/optionRenderers';
 import {
@@ -334,8 +334,9 @@ const ColumnSelectPopover = ({
               />
             </FormItem>
           ) : datasourceType === DatasourceType.Table ? (
-            <EmptyStateSmall
+            <EmptyState
               image="empty.svg"
+              size="small"
               title={
                 isTemporal
                   ? t('No temporal columns found')
@@ -352,8 +353,9 @@ const ColumnSelectPopover = ({
               }
             />
           ) : (
-            <EmptyStateSmall
+            <EmptyState
               image="empty.svg"
+              size="small"
               title={
                 isTemporal
                   ? t('No temporal columns found')
@@ -393,8 +395,9 @@ const ColumnSelectPopover = ({
           disabled={disabledTabs.has('simple')}
         >
           {isTemporal && simpleColumns.length === 0 ? (
-            <EmptyStateSmall
+            <EmptyState
               image="empty.svg"
+              size="small"
               title={t('No temporal columns found')}
               description={
                 datasourceType === DatasourceType.Table ? (

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx

@@ -30,7 +30,7 @@ import Tabs from 'src/components/Tabs';
 import Button from 'src/components/Button';
 import { Select } from 'src/components';
 import { Tooltip } from 'src/components/Tooltip';
-import { EmptyStateSmall } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import { Form, FormItem } from 'src/components/Form';
 import { SQLEditor } from 'src/components/AsyncAceEditor';
 import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
@@ -389,16 +389,18 @@ export default class AdhocMetricEditPopover extends PureComponent {
                 />
               </FormItem>
             ) : datasource.type === DatasourceType.Table ? (
-              <EmptyStateSmall
+              <EmptyState
                 image="empty.svg"
+                size="small"
                 title={t('No saved metrics found')}
                 description={t(
                   'Add metrics to dataset in "Edit datasource" modal',
                 )}
               />
             ) : (
-              <EmptyStateSmall
+              <EmptyState
                 image="empty.svg"
+                size="small"
                 title={t('No saved metrics found')}
                 description={
                   <>

superset-frontend/src/features/allEntities/AllEntitiesTable.tsx

@@ -23,7 +23,7 @@ import { TagsList } from 'src/components/Tags';
 import FacePile from 'src/components/FacePile';
 import Tag from 'src/types/TagType';
 import Owner from 'src/types/Owner';
-import { EmptyStateBig } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import { NumberParam, useQueryParam } from 'use-query-params';
 
 const MAX_TAGS_TO_SHOW = 3;
@@ -160,8 +160,9 @@ export default function AllEntitiesTable({
           {renderTable('query')}
         </>
       ) : (
-        <EmptyStateBig
+        <EmptyState
           image="dashboard.svg"
+          size="large"
           title={t('No entities have this tag currently assigned')}
           buttonAction={() => setShowTagModal(true)}
           buttonText={t('Add tag to entities')}

superset-frontend/src/features/datasets/AddDataset/DatasetPanel/MessageContent.tsx

@@ -18,7 +18,7 @@
  */
 
 import { t, styled } from '@superset-ui/core';
-import { EmptyStateBig } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import { Link } from 'react-router-dom';
 
 const StyledContainer = styled.div`
@@ -31,7 +31,7 @@ const StyledContainer = styled.div`
   height: 100%;
 `;
 
-const StyledEmptyStateBig = styled(EmptyStateBig)`
+const StyledEmptyState = styled(EmptyState)`
   max-width: 50%;
 
   p {
@@ -91,8 +91,9 @@ export const MessageContent = (props: MessageContentProps) => {
   }
   return (
     <StyledContainer>
-      <StyledEmptyStateBig
+      <StyledEmptyState
         image={currentImage}
+        size="large"
         title={currentTitle}
         description={currentDescription}
       />

superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx

@@ -32,7 +32,7 @@ import Table, {
   TableSize,
   OnChangeFunction,
 } from 'src/components/Table';
-import { EmptyStateBig } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import ChartImage from 'src/assets/images/chart.svg';
 import Icons from 'src/components/Icons';
 import { useToasts } from 'src/components/MessageToasts/withToasts';
@@ -147,7 +147,7 @@ const emptyStateButtonText = (
   </>
 );
 
-const StyledEmptyStateBig = styled(EmptyStateBig)`
+const StyledEmptyState = styled(EmptyState)`
   margin: ${({ theme }) => 13 * theme.gridUnit}px 0;
 `;
 
@@ -250,8 +250,9 @@ const DatasetUsage = ({ datasetId }: DatasetUsageProps) => {
         onChange={onChange}
       />
       {!data.length && !loading ? (
-        <StyledEmptyStateBig
+        <StyledEmptyState
           image={<ChartImage />}
+          size="large"
           title={t('No charts')}
           description={t('This dataset is not used to power any charts.')}
           buttonText={emptyStateButtonText}

superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx

@@ -20,7 +20,7 @@ import { useEffect, SetStateAction, Dispatch, useCallback } from 'react';
 import { styled, t } from '@superset-ui/core';
 import TableSelector, { TableOption } from 'src/components/TableSelector';
 import { DatabaseObject } from 'src/components/DatabaseSelector';
-import { emptyStateComponent } from 'src/components/EmptyState';
+import { EmptyState } from 'src/components/EmptyState';
 import { useToasts } from 'src/components/MessageToasts/withToasts';
 import { LocalStorageKeys, getItem } from 'src/utils/localStorageHelpers';
 import {
@@ -178,13 +178,30 @@ export default function LeftPanel({
     ),
     [datasetNames],
   );
+  const getDatabaseEmptyState = (emptyResultsWithSearch: boolean) => (
+    <EmptyState
+      image="empty.svg"
+      title={
+        emptyResultsWithSearch
+          ? t('No databases match your search')
+          : t('No databases available')
+      }
+      description={
+        <span>
+          {t('Manage your databases')}{' '}
+          <a href="/databaseview/list">{t('here')}</a>
+        </span>
+      }
+      size="small"
+    />
+  );
 
   return (
     <LeftPanelStyle>
       <TableSelector
         database={dataset?.db}
         handleError={addDangerToast}
-        emptyState={emptyStateComponent(false)}
+        emptyState={getDatabaseEmptyState(false)}
         onDbChange={setDatabase}
         onCatalogChange={setCatalog}
         onSchemaChange={setSchema}

superset-frontend/src/features/home/ActivityTable.test.tsx

@@ -137,9 +137,5 @@ test('calls the getEdited batch call when edited tab is clicked', async () => {
 });
 test('show empty state if there is no data', () => {
   renderActivityTable(emptyActivityProps);
-  expect(
-    screen.getByText(
-      /recently created charts, dashboards, and saved queries will appear here/i,
-    ),
-  ).toBeInTheDocument();
+  expect(screen.getByText(/nothing here yet/i)).toBeInTheDocument();
 });

superset-frontend/src/features/home/ChartTable.test.tsx

@@ -87,9 +87,7 @@ const renderChartTable = (props: any) =>
 test('renders with EmptyState if no data present', async () => {
   await renderChartTable(mockedProps);
   expect(screen.getAllByRole('tab')).toHaveLength(3);
-  expect(
-    screen.getByText(/other charts will appear here/i),
-  ).toBeInTheDocument();
+  expect(screen.getByText(/nothing here yet/i)).toBeInTheDocument();
 });
 
 test('fetches chart favorites and renders chart cards', async () => {

superset-frontend/src/features/home/EmptyState.test.tsx

@@ -70,15 +70,7 @@ describe('EmptyState', () => {
 
       // Select the first description node
       const textContainer = wrapper.find('.ant-empty-description').at(0);
-      expect(textContainer.text()).toEqual(
-        variant.tab === TableTab.Favorite
-          ? "You don't have any favorites yet!"
-          : `No ${
-              variant.tableName === WelcomeTable.SavedQueries
-                ? 'saved queries'
-                : variant.tableName.toLowerCase()
-            } yet`,
-      );
+      expect(textContainer.text()).toEqual('Nothing here yet');
       expect(wrapper.find('button')).toHaveLength(1);
     });
   });
@@ -95,9 +87,7 @@ describe('EmptyState', () => {
       expect(wrapper.find('.ant-empty-image').children()).toHaveLength(1);
 
       // Check the correct text is displayed
-      expect(textContainer.text()).toContain(
-        `Recently ${recent.tab?.toLowerCase()} charts, dashboards, and saved queries will appear here`,
-      );
+      expect(textContainer.text()).toContain(`Nothing here yet`);
     });
   });
 });

superset-frontend/src/features/home/EmptyState.tsx

@@ -16,172 +16,96 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Link } from 'react-router-dom';
 import Button from 'src/components/Button';
-import { Empty } from 'src/components/EmptyState/Empty';
+import { EmptyState as EmptyStateComponent } from 'src/components/EmptyState';
 import { TableTab } from 'src/views/CRUD/types';
 import { styled, t } from '@superset-ui/core';
 import { WelcomeTable } from './types';
 
-const welcomeTableLabels: Record<WelcomeTable, string> = {
-  [WelcomeTable.Charts]: t('charts'),
-  [WelcomeTable.Dashboards]: t('dashboards'),
-  [WelcomeTable.Recents]: t('recents'),
-  [WelcomeTable.SavedQueries]: t('saved queries'),
-};
+const EmptyContainer = styled.div`
+  min-height: 200px;
+  display: flex;
+  color: ${({ theme }) => theme.colors.grayscale.light2};
+  flex-direction: column;
+  justify-content: space-around;
+`;
 
-const welcomeTableEmpty: Record<WelcomeTable, string> = {
-  [WelcomeTable.Charts]: t('No charts yet'),
-  [WelcomeTable.Dashboards]: t('No dashboards yet'),
-  [WelcomeTable.Recents]: t('No recents yet'),
-  [WelcomeTable.SavedQueries]: t('No saved queries yet'),
-};
+const ICONS = {
+  [WelcomeTable.Charts]: 'empty-charts.svg',
+  [WelcomeTable.Dashboards]: 'empty-dashboard.svg',
+  [WelcomeTable.Recents]: 'union.svg',
+  [WelcomeTable.SavedQueries]: 'empty-queries.svg',
+} as const;
 
-const welcomeTableWillAppear: Record<WelcomeTable, (other: string) => string> =
-  {
-    [WelcomeTable.Charts]: (other: string) =>
-      t('%(other)s charts will appear here', { other }),
-    [WelcomeTable.Dashboards]: (other: string) =>
-      t('%(other)s dashboards will appear here', { other }),
-    [WelcomeTable.Recents]: (other: string) =>
-      t('%(other)s recents will appear here', { other }),
-    [WelcomeTable.SavedQueries]: (other: string) =>
-      t('%(other)s saved queries will appear here', { other }),
-  };
+const REDIRECTS = {
+  create: {
+    [WelcomeTable.Charts]: '/chart/add',
+    [WelcomeTable.Dashboards]: '/dashboard/new',
+    [WelcomeTable.SavedQueries]: '/sqllab?new=true',
+  },
+  viewAll: {
+    [WelcomeTable.Charts]: '/chart/list',
+    [WelcomeTable.Dashboards]: '/dashboard/list/',
+    [WelcomeTable.SavedQueries]: '/savedqueryview/list/',
+  },
+} as const;
 
 export interface EmptyStateProps {
   tableName: WelcomeTable;
   tab?: string;
   otherTabTitle?: string;
 }
-const EmptyContainer = styled.div`
-  min-height: 200px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-`;
-const ButtonContainer = styled.div`
-  Button {
-    svg {
-      color: ${({ theme }) => theme.colors.grayscale.light5};
-    }
-  }
-`;
-
-type Redirects = Record<
-  WelcomeTable.Charts | WelcomeTable.Dashboards | WelcomeTable.SavedQueries,
-  string
->;
 
 export default function EmptyState({
   tableName,
   tab,
   otherTabTitle,
 }: EmptyStateProps) {
-  const mineRedirects: Redirects = {
-    [WelcomeTable.Charts]: '/chart/add',
-    [WelcomeTable.Dashboards]: '/dashboard/new',
-    [WelcomeTable.SavedQueries]: '/sqllab?new=true',
-  };
-  const favRedirects: Redirects = {
-    [WelcomeTable.Charts]: '/chart/list',
-    [WelcomeTable.Dashboards]: '/dashboard/list/',
-    [WelcomeTable.SavedQueries]: '/savedqueryview/list/',
-  };
-  const tableIcon: Record<WelcomeTable, string> = {
-    [WelcomeTable.Charts]: 'empty-charts.svg',
-    [WelcomeTable.Dashboards]: 'empty-dashboard.svg',
-    [WelcomeTable.Recents]: 'union.svg',
-    [WelcomeTable.SavedQueries]: 'empty-queries.svg',
-  };
-  const mine = <span>{welcomeTableEmpty[tableName]}</span>;
-  const recent = (
-    <span className="no-recents">
-      {(() => {
-        if (tab === TableTab.Viewed) {
-          return t(
-            `Recently viewed charts, dashboards, and saved queries will appear here`,
-          );
-        }
-        if (tab === TableTab.Created) {
-          return t(
-            'Recently created charts, dashboards, and saved queries will appear here',
-          );
-        }
-        if (tab === TableTab.Other) {
-          const other = otherTabTitle || t('Other');
-          return welcomeTableWillAppear[tableName](other);
-        }
-        if (tab === TableTab.Edited) {
-          return t(
-            `Recently edited charts, dashboards, and saved queries will appear here`,
-          );
-        }
-        return null;
-      })()}
-    </span>
-  );
+  const getActionButton = () => {
+    if (tableName === WelcomeTable.Recents) {
+      return null;
+    }
+
+    const isFavorite = tab === TableTab.Favorite;
+    const buttonText =
+      tableName === WelcomeTable.SavedQueries
+        ? isFavorite
+          ? t('SQL Lab queries')
+          : t('SQL query')
+        : isFavorite
+          ? t(tableName.toLowerCase())
+          : tableName.slice(0, -1);
+
+    const url = isFavorite
+      ? REDIRECTS.viewAll[tableName]
+      : REDIRECTS.create[tableName];
 
-  // Mine and Recent Activity(all tabs) tab empty state
-  if (
-    tab === TableTab.Mine ||
-    tableName === WelcomeTable.Recents ||
-    tab === TableTab.Other
-  ) {
     return (
-      <EmptyContainer>
-        <Empty
-          image={`/static/assets/images/${tableIcon[tableName]}`}
-          description={
-            tableName === WelcomeTable.Recents || tab === TableTab.Other
-              ? recent
-              : mine
-          }
-        >
-          {tableName !== WelcomeTable.Recents && (
-            <ButtonContainer>
-              <Link to={mineRedirects[tableName]}>
-                <Button buttonStyle="primary">
-                  <i className="fa fa-plus" />
-                  {tableName === WelcomeTable.SavedQueries
-                    ? t('SQL query')
-                    : tableName
-                        .split('')
-                        .slice(0, tableName.length - 1)
-                        .join('')}
-                </Button>
-              </Link>
-            </ButtonContainer>
-          )}
-        </Empty>
-      </EmptyContainer>
+      <Button
+        buttonStyle="default"
+        onClick={() => {
+          window.location.href = url;
+        }}
+      >
+        {isFavorite
+          ? t('See all %(tableName)s', { tableName: buttonText })
+          : buttonText}
+      </Button>
     );
-  }
-  // Favorite tab empty state
+  };
+
+  const image =
+    tab === TableTab.Favorite ? 'star-circle.svg' : ICONS[tableName];
+
   return (
     <EmptyContainer>
-      <Empty
-        image="/static/assets/images/star-circle.svg"
-        description={
-          <span className="no-favorites">
-            {t("You don't have any favorites yet!")}
-          </span>
-        }
+      <EmptyStateComponent
+        image={image}
+        size="large"
+        description={t('Nothing here yet')}
       >
-        <Button
-          buttonStyle="primary"
-          onClick={() => {
-            window.location.href = favRedirects[tableName];
-          }}
-        >
-          {t('See all %(tableName)s', {
-            tableName:
-              tableName === WelcomeTable.SavedQueries
-                ? t('SQL Lab queries')
-                : welcomeTableLabels[tableName],
-          })}
-        </Button>
-      </Empty>
+        {getActionButton()}
+      </EmptyStateComponent>
     </EmptyContainer>
   );
 }