feat(theming): land Ant Design v5 overhaul — dynamic themes, real dark mode + massive styling refactor (#31590)

Co-authored-by: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com>
Co-authored-by: Diego Pucci <diegopucci.me@gmail.com>
Co-authored-by: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Co-authored-by: Geido <60598000+geido@users.noreply.github.com>
Co-authored-by: Alexandru Soare <37236580+alexandrusoare@users.noreply.github.com>
Co-authored-by: Damian Pendrak <dpendrak@gmail.com>
Co-authored-by: Pius Iniobong <67148161+payose@users.noreply.github.com>
Co-authored-by: Enzo Martellucci <enzomartellucci@gmail.com>
Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>

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

@@ -48,7 +48,11 @@ describe('QueryTable', () => {
     expect(screen.getByRole('table')).toBeVisible();
     expect(container.querySelector('.table-condensed')).toBeVisible();
     expect(container.querySelectorAll('table > thead > tr')).toHaveLength(1);
-    expect(container.querySelectorAll('table > tbody > tr')).toHaveLength(2);
+    expect(
+      container.querySelectorAll(
+        'table > tbody > tr:not(.ant-table-measure-row)',
+      ),
+    ).toHaveLength(2);
   });
 
   test('renders empty table when no queries provided', () => {
@@ -59,10 +63,14 @@ describe('QueryTable', () => {
     );
 
     expect(screen.getByTestId('listview-table')).toBeVisible();
-    expect(screen.getByRole('table')).toBeVisible();
+    expect(screen.getAllByRole('table')[0]).toBeVisible();
     expect(container.querySelector('.table-condensed')).toBeVisible();
     expect(container.querySelectorAll('table > thead > tr')).toHaveLength(1);
-    expect(container.querySelectorAll('table > tbody > tr')).toHaveLength(0);
+    expect(
+      container.querySelectorAll(
+        'table > tbody > tr:not(.ant-table-measure-row):not(.ant-table-placeholder)',
+      ),
+    ).toHaveLength(0);
   });
 
   test('renders with custom displayLimit', () => {
@@ -77,6 +85,10 @@ describe('QueryTable', () => {
     });
 
     expect(screen.getByTestId('listview-table')).toBeVisible();
-    expect(container.querySelectorAll('table > tbody > tr')).toHaveLength(1);
+    expect(
+      container.querySelectorAll(
+        'table > tbody > tr:not(.ant-table-measure-row)',
+      ),
+    ).toHaveLength(1);
   });
 });

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

@@ -17,8 +17,16 @@
  * under the License.
  */
 import { useMemo, ReactNode } from 'react';
-import Card from 'src/components/Card';
-import ProgressBar from 'src/components/ProgressBar';
+import {
+  Card,
+  Button,
+  Tooltip,
+  Label,
+  Icons,
+  ModalTrigger,
+  TableView,
+} from '@superset-ui/core/components';
+import ProgressBar from '@superset-ui/core/components/ProgressBar';
 import { t, useTheme, QueryResponse } from '@superset-ui/core';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -29,14 +37,8 @@ import {
   clearQueryResults,
   removeQuery,
 } from 'src/SqlLab/actions/sqlLab';
-import TableView from 'src/components/TableView';
-import Button from 'src/components/Button';
-import { fDuration, extendedDayjs } from 'src/utils/dates';
-import { Icons } from 'src/components/Icons';
-import Label from 'src/components/Label';
-import { Tooltip } from 'src/components/Tooltip';
+import { fDuration, extendedDayjs } from '@superset-ui/core/utils/dates';
 import { SqlLabRootState } from 'src/SqlLab/types';
-import ModalTrigger from 'src/components/ModalTrigger';
 import { UserWithPermissionsAndRoles as User } from 'src/types/bootstrapTypes';
 import ResultSet from '../ResultSet';
 import HighlightedSql from '../HighlightedSql';
@@ -107,6 +109,7 @@ const QueryTable = ({
             column as keyof typeof QUERY_HISTORY_TABLE_HEADERS_LOCALIZED
           ] || setHeaders(column),
         disableSortBy: true,
+        id: column,
       })),
     [columns],
   );
@@ -132,10 +135,7 @@ const QueryTable = ({
       success: {
         config: {
           icon: (
-            <Icons.CheckOutlined
-              iconColor={theme.colors.success.base}
-              iconSize="m"
-            />
+            <Icons.CheckOutlined iconColor={theme.colorSuccess} iconSize="m" />
           ),
           // icon: <Icons.Edit iconSize="xl" />,
           label: t('Success'),
@@ -144,10 +144,7 @@ const QueryTable = ({
       failed: {
         config: {
           icon: (
-            <Icons.CloseOutlined
-              iconColor={theme.colors.error.base}
-              iconSize="m"
-            />
+            <Icons.CloseOutlined iconColor={theme.colorError} iconSize="m" />
           ),
           label: t('Failed'),
         },
@@ -155,10 +152,7 @@ const QueryTable = ({
       stopped: {
         config: {
           icon: (
-            <Icons.CloseOutlined
-              iconColor={theme.colors.error.base}
-              iconSize="m"
-            />
+            <Icons.CloseOutlined iconColor={theme.colorError} iconSize="m" />
           ),
           label: t('Failed'),
         },
@@ -167,7 +161,7 @@ const QueryTable = ({
         config: {
           icon: (
             <Icons.LoadingOutlined
-              iconColor={theme.colors.primary.base}
+              iconColor={theme.colorPrimary}
               iconSize="m"
             />
           ),
@@ -178,7 +172,7 @@ const QueryTable = ({
         config: {
           icon: (
             <Icons.LoadingOutlined
-              iconColor={theme.colors.primary.base}
+              iconColor={theme.colorPrimary}
               iconSize="m"
             />
           ),
@@ -189,7 +183,7 @@ const QueryTable = ({
         config: {
           icon: (
             <Icons.ClockCircleOutlined
-              iconColor={theme.colors.error.base}
+              iconColor={theme.colorError}
               iconSize="m"
             />
           ),
@@ -200,7 +194,7 @@ const QueryTable = ({
         config: {
           icon: (
             <Icons.LoadingOutlined
-              iconColor={theme.colors.warning.base}
+              iconColor={theme.colorWarning}
               iconSize="m"
             />
           ),
@@ -211,7 +205,7 @@ const QueryTable = ({
         config: {
           icon: (
             <Icons.LoadingOutlined
-              iconColor={theme.colors.warning.base}
+              iconColor={theme.colorWarning}
               iconSize="m"
             />
           ),
@@ -220,9 +214,7 @@ const QueryTable = ({
       },
       error: {
         config: {
-          icon: (
-            <Icons.Error iconColor={theme.colors.error.base} iconSize="m" />
-          ),
+          icon: <Icons.Error iconColor={theme.colorError} iconSize="m" />,
           label: t('Unknown Status'),
         },
       },
@@ -299,7 +291,7 @@ const QueryTable = ({
             <ModalTrigger
               className="ResultsModal"
               triggerNode={
-                <Button buttonSize="xsmall" buttonStyle="tertiary">
+                <Button buttonSize="xsmall" buttonStyle="secondary">
                   {t('View')}
                 </Button>
               }

superset-frontend/src/SqlLab/components/QueryTable/styles.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { styled, css } from '@superset-ui/core';
-import { IconTooltip } from '../../../components/IconTooltip';
+import { IconTooltip } from '@superset-ui/core/components';
 
 export const StaticPosition = css`
   position: static;
@@ -31,11 +31,11 @@ export const verticalAlign = css`
 `;
 
 export const StyledTooltip = styled(IconTooltip)`
-  padding-right: ${({ theme }) => theme.gridUnit * 2}px;
+  padding-right: ${({ theme }) => theme.sizeUnit * 2}px;
   span {
     color: ${({ theme }) => theme.colors.grayscale.base};
     &: hover {
-      color: ${({ theme }) => theme.colors.primary.base};
+      color: ${({ theme }) => theme.colorPrimary};
     }
   }
 `;