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/plugins/plugin-chart-table/src/DataTable/components/GlobalFilter.tsx

@@ -22,8 +22,10 @@ import {
   ChangeEventHandler,
   useRef,
   useEffect,
+  Ref,
 } from 'react';
 import { Row, FilterValue } from 'react-table';
+import { Input, type InputRef, Space } from '@superset-ui/core/components';
 import useAsyncState from '../utils/useAsyncState';
 
 export interface SearchInputProps {
@@ -31,7 +33,7 @@ export interface SearchInputProps {
   value: string;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onBlur?: () => void;
-  inputRef?: React.RefObject<HTMLInputElement>;
+  inputRef?: Ref<InputRef>;
 }
 
 const isSearchFocused = new Map();
@@ -56,17 +58,18 @@ function DefaultSearchInput({
   inputRef,
 }: SearchInputProps) {
   return (
-    <span className="dt-global-filter">
-      Search{' '}
-      <input
+    <Space direction="horizontal" size={4} className="dt-global-filter">
+      Search
+      <Input
+        size="small"
         ref={inputRef}
-        className="form-control input-sm"
         placeholder={`${count} records...`}
         value={value}
         onChange={onChange}
         onBlur={onBlur}
+        className="form-control input-sm"
       />
-    </span>
+    </Space>
   );
 }
 
@@ -82,7 +85,7 @@ export default (memo as <T>(fn: T) => T)(function GlobalFilter<
   rowCount,
 }: GlobalFilterProps<D>) {
   const count = serverPagination ? rowCount : preGlobalFilteredRows.length;
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<InputRef>(null);
 
   const [value, setValue] = useAsyncState(
     filterValue,

superset-frontend/plugins/plugin-chart-table/src/DataTable/components/SearchSelectDropdown.tsx

@@ -18,10 +18,10 @@
  */
 /* eslint-disable import/no-extraneous-dependencies */
 import { styled } from '@superset-ui/core';
-import { Select } from 'antd';
+import { RawAntdSelect } from '@superset-ui/core/components';
 import { SearchOption } from '../../types';
 
-const StyledSelect = styled(Select)`
+const StyledSelect = styled(RawAntdSelect)`
   width: 120px;
   margin-right: 8px;
 `;
@@ -29,7 +29,7 @@ const StyledSelect = styled(Select)`
 interface SearchSelectDropdownProps {
   /** The currently selected search column value */
   value?: string;
-  /** Callback triggered when a new search column is selected */
+  /** Function triggered when a new search column is selected */
   onChange: (searchCol: string) => void;
   /** Available search column options to populate the dropdown */
   searchOptions: SearchOption[];

superset-frontend/plugins/plugin-chart-table/src/DataTable/components/SelectPageSize.tsx

@@ -17,8 +17,9 @@
  * under the License.
  */
 import { memo } from 'react';
-import { t } from '@superset-ui/core';
+import { css, t } from '@superset-ui/core';
 import { formatSelectOptions } from '@superset-ui/chart-controls';
+import { RawAntdSelect } from '@superset-ui/core/components';
 
 export type SizeOption = [number, string];
 
@@ -33,16 +34,18 @@ function DefaultSelectRenderer({
   options,
   onChange,
 }: SelectPageSizeRendererProps) {
+  const { Option } = RawAntdSelect;
+
   return (
     <span className="dt-select-page-size form-inline">
       {t('Show')}{' '}
-      <select
-        className="form-control input-sm"
+      <RawAntdSelect<number>
         value={current}
-        onBlur={() => {}}
-        onChange={e => {
-          onChange(Number((e.target as HTMLSelectElement).value));
-        }}
+        onChange={value => onChange(value)}
+        size="small"
+        css={theme => css`
+          width: ${theme.sizeUnit * 18}px;
+        `}
       >
         {options.map(option => {
           const [size, text] = Array.isArray(option)
@@ -50,16 +53,16 @@ function DefaultSelectRenderer({
             : [option, option];
           const sizeLabel = size === 0 ? t('all') : size;
           return (
-            <option
-              aria-label={t('Show %s entries', sizeLabel)}
+            <Option
               key={size}
-              value={size}
+              value={Number(size)}
+              aria-label={t('Show %s entries', sizeLabel)}
             >
               {text}
-            </option>
+            </Option>
           );
         })}
-      </select>{' '}
+      </RawAntdSelect>{' '}
       {t('entries')}
     </span>
   );