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/explore/components/controls/LayerConfigsControl/FlatLayerTree.tsx

@@ -16,12 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Icons } from 'src/components/Icons';
+import { Icons } from '@superset-ui/core/components/Icons';
 import { css, styled, t } from '@superset-ui/core';
-// eslint-disable-next-line no-restricted-imports
-import { Button, Tree } from 'antd'; // TODO: Remove antd
-// eslint-disable-next-line no-restricted-imports
-import { TreeProps } from 'antd/lib/tree'; // TODO: Remove antd
+import { Button } from '@superset-ui/core/components';
+import Tree, { TreeProps } from '@superset-ui/core/components/Tree';
 import { forwardRef } from 'react';
 import { FlatLayerDataNode, FlatLayerTreeProps, LayerConf } from './types';
 import { handleDrop } from './dragDropUtil';
@@ -39,8 +37,8 @@ export const StyledLayerTreeItem = styled(LayerTreeItem)`
     border: none;
     border-radius: ${theme.borderRadius}px;
     background-color: ${theme.colors.grayscale.light3};
-    font-size: ${theme.typography.sizes.s}px;
-    font-weight: ${theme.typography.weights.normal};
+    font-size: ${theme.fontSizeSM}px;
+    font-weight: ${theme.fontWeightNormal};
 
     &:hover {
       background-color: ${theme.colors.grayscale.light3};
@@ -49,13 +47,13 @@ export const StyledLayerTreeItem = styled(LayerTreeItem)`
     & .layer-tree-item-close {
       border-right: solid;
       border-right-width: 1px;
-      border-right-color: ${theme.colors.grayscale.light2};
+      border-right-color: ${theme.colorSplit};
     }
 
     & .layer-tree-item-edit {
       border-left: solid;
       border-left-width: 1px;
-      border-left-color: ${theme.colors.grayscale.light2};
+      border-left-color: ${theme.colorSplit};
     }
 
     & .layer-tree-item-title {
@@ -65,8 +63,8 @@ export const StyledLayerTreeItem = styled(LayerTreeItem)`
 
     & .layer-tree-item-type {
       padding-left: 4px;
-      font-size: ${theme.typography.sizes.xs}px;
-      font-family: ${theme.typography.families.monospace};
+      font-size: ${theme.fontSizeXS}px;
+      font-family: ${theme.fontFamilyCode};
     }
 
     & > button {
@@ -120,7 +118,9 @@ export const FlatLayerTree = forwardRef<HTMLDivElement, FlatLayerTreeProps>(
 
     const treeData = layerConfigsToTreeData(layerConfigs);
 
-    const onDrop: TreeProps['onDrop'] = info => {
+    const onDrop = (
+      info: Parameters<NonNullable<TreeProps<FlatLayerDataNode>['onDrop']>>[0],
+    ) => {
       const data = handleDrop(info, treeData);
       const movedLayerConfigs = treeDataToLayerConfigs(data);
       onMoveLayer(movedLayerConfigs);

superset-frontend/src/explore/components/controls/LayerConfigsControl/GeoStylerWrapper.tsx

@@ -22,7 +22,7 @@
  * via emotion. Emotion can only be used on a component that
  * accepts a className property.
  */
-import CardStyle from 'geostyler/dist/Component/CardStyle/CardStyle';
+import { CardStyle } from 'geostyler';
 import { FC } from 'react';
 import { GeoStylerWrapperProps } from './types';
 

superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsControl.tsx

@@ -18,7 +18,7 @@
  */
 import { ControlHeader } from '@superset-ui/chart-controls';
 import { css, styled, t } from '@superset-ui/core';
-import Popover from 'src/components/Popover';
+import { Popover } from '@superset-ui/core/components';
 import { FC, useState } from 'react';
 import { EditItem, LayerConf, LayerConfigsControlProps } from './types';
 import LayerConfigsPopoverContent from './LayerConfigsPopoverContent';
@@ -41,8 +41,8 @@ export const StyledFlatLayerTree = styled(FlatLayerTree)`
       margin: 4px;
 
       color: ${theme.colors.grayscale.light1};
-      font-size: ${theme.typography.sizes.s}px;
-      font-weight: ${theme.typography.weights.normal};
+      font-size: ${theme.fontSizeSM}px;
+      font-weight: ${theme.fontWeightNormal};
 
       &:hover {
         background-color: ${theme.colors.grayscale.light4};

superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsPopoverContent.tsx

@@ -18,7 +18,9 @@
  */
 import { css, JsonValue, styled, t } from '@superset-ui/core';
 // eslint-disable-next-line no-restricted-imports
-import { Button, Form, Tabs } from 'antd'; // TODO: Remove antd
+import { Button } from '@superset-ui/core/components/Button';
+import { Form } from '@superset-ui/core/components/Form';
+import Tabs from '@superset-ui/core/components/Tabs';
 import { mix } from 'polished';
 import { Data as GsData } from 'geostyler-data';
 import { Style as GsStyle } from 'geostyler-style';
@@ -58,12 +60,12 @@ export const StyledCloseButton = styled(Button)`
     line-height: 1.5715;
     border-radius: ${theme.borderRadius}px;
     background-color: ${theme.colors.primary.light4};
-    color: ${theme.colors.primary.dark1};
-    font-size: ${theme.typography.sizes.s}px;
-    font-weight: ${theme.typography.weights.bold};
+    color: ${theme.colorPrimaryText};
+    font-size: ${theme.fontSizeSM}px;
+    font-weight: ${theme.fontWeightStrong};
     text-transform: uppercase;
-    min-width: ${theme.gridUnit * 36};
-    min-height: ${theme.gridUnit * 8};
+    min-width: ${theme.sizeUnit * 36};
+    min-height: ${theme.sizeUnit * 8};
     box-shadow: none;
     border-width: 0px;
     border-style: none;
@@ -71,10 +73,10 @@ export const StyledCloseButton = styled(Button)`
     &:hover {
       background-color: ${mix(
         0.1,
-        theme.colors.primary.base,
+        theme.colorPrimary,
         theme.colors.primary.light4,
       )};
-      color: ${theme.colors.primary.dark1};
+      color: ${theme.colorPrimaryText};
     }
   `}
 `;
@@ -95,8 +97,8 @@ export const StyledControlNumberFormItem = styled(ControlFormItem)`
 export const StyledGeoStyler = styled(GeoStylerWrapper)`
   ${({ theme }) => css`
     h2 {
-      font-weight: ${theme.typography.weights.normal};
-      font-size: ${theme.typography.sizes.xl}px;
+      font-weight: ${theme.fontWeightNormal};
+      font-size: ${theme.fontSizeXL}px;
     }
     .ant-form-item-control {
       flex: unset;
@@ -110,19 +112,19 @@ export const StyledSaveButton = styled(Button)`
     margin-left: 4px;
     line-height: 1.5715;
     border-radius: ${theme.borderRadius}px;
-    background-color: ${theme.colors.primary.base};
+    background-color: ${theme.colorPrimary};
     color: ${theme.colors.grayscale.light5};
-    font-size: ${theme.typography.sizes.s}px;
-    font-weight: ${theme.typography.weights.bold};
+    font-size: ${theme.fontSizeSM}px;
+    font-weight: ${theme.fontWeightStrong};
     text-transform: uppercase;
-    min-width: ${theme.gridUnit * 36};
-    min-height: ${theme.gridUnit * 8};
+    min-width: ${theme.sizeUnit * 36};
+    min-height: ${theme.sizeUnit * 8};
     box-shadow: none;
     border-width: 0px;
     border-style: none;
     border-color: transparent;
     &:hover {
-      background-color: ${theme.colors.primary.dark1};
+      background-color: ${theme.colorPrimaryText};
     }
   `}
 `;
@@ -376,121 +378,129 @@ export const LayerConfigsPopoverContent: FC<
   return (
     <div>
       <Form key={JSON.stringify(formKey)}>
-        <Tabs defaultActiveKey={LAYER_CONFIG_TABS.LAYER}>
-          <Tabs.TabPane tab={layerTabLabel} key={LAYER_CONFIG_TABS.LAYER}>
-            <StyledControlFormItem
-              controlType="Input"
-              label={layerUrlLabel}
-              description={layerUrlDescription}
-              placeholder={layerUrlPlaceholder}
-              value={currentLayerConf.url}
-              name="url"
-              onChange={onLayerUrlChange}
-            />
-            <StyledControlFormItem
-              controlType="Select"
-              label={layerTypeLabel}
-              description={layerTypeDescription}
-              options={[
-                { value: 'WMS', label: t('WMS') },
-                { value: 'WFS', label: t('WFS') },
-                { value: 'XYZ', label: t('XYZ') },
-              ]}
-              value={currentLayerConf.type}
-              defaultValue={currentLayerConf.type}
-              name="type"
-              onChange={onLayerTypeChange}
-            />
-            {isWmsLayerConf(currentLayerConf) && (
-              <StyledControlFormItem
-                controlType="Select"
-                label={serviceVersionLabel}
-                description={serviceVersionDescription}
-                options={wmsVersionOptions}
-                value={wmsVersion}
-                defaultValue={wmsVersionOptions[0].value as string}
-                name="wmsVersion"
-                onChange={onWmsVersionChange}
-              />
-            )}
-            {isWfsLayerConf(currentLayerConf) && (
-              <StyledControlFormItem
-                controlType="Select"
-                label={serviceVersionLabel}
-                description={serviceVersionDescription}
-                options={wfsVersionOptions}
-                value={wfsVersion}
-                defaultValue={wfsVersionOptions[0].value as string}
-                name="wfsVersion"
-                onChange={onWfsVersionChange}
-              />
-            )}
-            {isWmsLayerConf(currentLayerConf) && (
-              <StyledControlFormItem
-                controlType="Input"
-                label={layersParamLabel}
-                description={layersParamDescription}
-                placeholder={layersParamPlaceholder}
-                value={currentLayerConf.layersParam}
-                name="layersParam"
-                onChange={onLayersParamChange}
-              />
-            )}
-            {isWfsLayerConf(currentLayerConf) && (
-              <StyledControlFormItem
-                controlType="Input"
-                label={layersParamLabel}
-                description={layersParamDescription}
-                placeholder={layersParamPlaceholder}
-                value={currentLayerConf.typeName}
-                name="typeName"
-                onChange={onTypeNameChange}
-              />
-            )}
-            <StyledControlFormItem
-              controlType="Input"
-              label={layerTitleLabel}
-              description={layerTitleDescription}
-              placeholder={layerTitlePlaceholder}
-              value={currentLayerConf.title}
-              name="title"
-              onChange={onLayerTitleChange}
-            />
-            {isWfsLayerConf(currentLayerConf) && (
-              <StyledControlNumberFormItem
-                controlType="InputNumber"
-                label={maxFeaturesLabel}
-                description={maxFeaturesDescription}
-                placeholder={maxFeaturesPlaceholder}
-                value={currentLayerConf.maxFeatures}
-                name="maxFeatures"
-                onChange={onMaxFeaturesChange}
-              />
-            )}
-            <StyledControlFormItem
-              controlType="Input"
-              label={attributionLabel}
-              description={attributionDescription}
-              placeholder={attributionPlaceholder}
-              value={currentLayerConf.attribution}
-              name="attribution"
-              onChange={onAttributionChange}
-            />
-          </Tabs.TabPane>
-          <Tabs.TabPane
-            tab={styleTabLabel}
-            key={LAYER_CONFIG_TABS.GEOSTYLER}
-            disabled={!isWfsLayerConf(currentLayerConf)}
-          >
-            {isWfsLayerConf(currentLayerConf) && (
-              <StyledGeoStyler
-                style={currentLayerConf.style}
-                onStyleChange={onStyleChange}
-                data={geostylerData}
-              />
-            )}
-          </Tabs.TabPane>
-        </Tabs>
+        <Tabs
+          defaultActiveKey={LAYER_CONFIG_TABS.LAYER}
+          items={[
+            {
+              key: LAYER_CONFIG_TABS.LAYER,
+              label: layerTabLabel,
+              children: (
+                <>
+                  <StyledControlFormItem
+                    controlType="Input"
+                    label={layerUrlLabel}
+                    description={layerUrlDescription}
+                    placeholder={layerUrlPlaceholder}
+                    value={currentLayerConf.url}
+                    name="url"
+                    onChange={onLayerUrlChange}
+                  />
+                  <StyledControlFormItem
+                    controlType="Select"
+                    label={layerTypeLabel}
+                    description={layerTypeDescription}
+                    options={[
+                      { value: 'WMS', label: t('WMS') },
+                      { value: 'WFS', label: t('WFS') },
+                      { value: 'XYZ', label: t('XYZ') },
+                    ]}
+                    value={currentLayerConf.type}
+                    defaultValue={currentLayerConf.type}
+                    name="type"
+                    onChange={onLayerTypeChange}
+                  />
+                  {isWmsLayerConf(currentLayerConf) && (
+                    <StyledControlFormItem
+                      controlType="Select"
+                      label={serviceVersionLabel}
+                      description={serviceVersionDescription}
+                      options={wmsVersionOptions}
+                      value={wmsVersion}
+                      defaultValue={wmsVersionOptions[0].value as string}
+                      name="wmsVersion"
+                      onChange={onWmsVersionChange}
+                    />
+                  )}
+                  {isWfsLayerConf(currentLayerConf) && (
+                    <StyledControlFormItem
+                      controlType="Select"
+                      label={serviceVersionLabel}
+                      description={serviceVersionDescription}
+                      options={wfsVersionOptions}
+                      value={wfsVersion}
+                      defaultValue={wfsVersionOptions[0].value as string}
+                      name="wfsVersion"
+                      onChange={onWfsVersionChange}
+                    />
+                  )}
+                  {isWmsLayerConf(currentLayerConf) && (
+                    <StyledControlFormItem
+                      controlType="Input"
+                      label={layersParamLabel}
+                      description={layersParamDescription}
+                      placeholder={layersParamPlaceholder}
+                      value={currentLayerConf.layersParam}
+                      name="layersParam"
+                      onChange={onLayersParamChange}
+                    />
+                  )}
+                  {isWfsLayerConf(currentLayerConf) && (
+                    <StyledControlFormItem
+                      controlType="Input"
+                      label={layersParamLabel}
+                      description={layersParamDescription}
+                      placeholder={layersParamPlaceholder}
+                      value={currentLayerConf.typeName}
+                      name="typeName"
+                      onChange={onTypeNameChange}
+                    />
+                  )}
+                  <StyledControlFormItem
+                    controlType="Input"
+                    label={layerTitleLabel}
+                    description={layerTitleDescription}
+                    placeholder={layerTitlePlaceholder}
+                    value={currentLayerConf.title}
+                    name="title"
+                    onChange={onLayerTitleChange}
+                  />
+                  {isWfsLayerConf(currentLayerConf) && (
+                    <StyledControlNumberFormItem
+                      controlType="InputNumber"
+                      label={maxFeaturesLabel}
+                      description={maxFeaturesDescription}
+                      placeholder={maxFeaturesPlaceholder}
+                      value={currentLayerConf.maxFeatures}
+                      name="maxFeatures"
+                      onChange={onMaxFeaturesChange}
+                    />
+                  )}
+                  <StyledControlFormItem
+                    controlType="Input"
+                    label={attributionLabel}
+                    description={attributionDescription}
+                    placeholder={attributionPlaceholder}
+                    value={currentLayerConf.attribution}
+                    name="attribution"
+                    onChange={onAttributionChange}
+                  />
+                </>
+              ),
+            },
+            {
+              key: LAYER_CONFIG_TABS.GEOSTYLER,
+              label: styleTabLabel,
+              disabled: !isWfsLayerConf(currentLayerConf),
+              children: isWfsLayerConf(currentLayerConf) && (
+                <StyledGeoStyler
+                  style={currentLayerConf.style}
+                  onStyleChange={onStyleChange}
+                  data={geostylerData}
+                />
+              ),
+            },
+          ]}
+        />
         <StyledButtonContainer>
           <StyledCloseButton type="default" onClick={onCloseClick}>
             {t('Close')}

superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerTreeItem.tsx

@@ -16,9 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Icons } from 'src/components/Icons';
-// eslint-disable-next-line no-restricted-imports
-import { Button, Tag } from 'antd'; // TODO: Remove antd
+import { Icons } from '@superset-ui/core/components/Icons';
+import { Button } from '@superset-ui/core/components';
+import { Tag } from 'src/components';
 import { FC } from 'react';
 import { LayerTreeItemProps } from './types';
 

superset-frontend/src/explore/components/controls/LayerConfigsControl/dragDropUtil.tsx

@@ -17,8 +17,7 @@
  * under the License.
  */
 
-// eslint-disable-next-line no-restricted-imports
-import { TreeProps } from 'antd/lib/tree'; // TODO: Remove antd
+import { TreeProps } from '@superset-ui/core/components/Tree';
 import { DropInfoType, FlatLayerDataNode } from './types';
 
 /**

superset-frontend/src/explore/components/controls/LayerConfigsControl/types.ts

@@ -16,12 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-// eslint-disable-next-line no-restricted-imports
-import { DataNode, TreeProps } from 'antd/lib/tree'; // TODO: Remove antd
+import { TreeProps, TreeDataNode } from '@superset-ui/core/components/Tree';
 import { ControlComponentProps } from '@superset-ui/chart-controls';
 import { Style } from 'geostyler-style';
-import { CardStyleProps } from 'geostyler/dist/Component/CardStyle/CardStyle';
+import { Data } from 'geostyler-data';
 
 export interface BaseLayerConf {
   title: string;
@@ -48,7 +46,7 @@ export interface WmsLayerConf extends BaseLayerConf {
   layersParam: string;
 }
 
-export interface FlatLayerDataNode extends DataNode {
+export interface FlatLayerDataNode extends TreeDataNode {
   layerConf: LayerConf;
 }
 
@@ -81,8 +79,11 @@ export interface LayerConfigsPopoverContentProps {
   layerConf: LayerConf;
 }
 
-export interface GeoStylerWrapperProps extends CardStyleProps {
+export interface GeoStylerWrapperProps {
+  style?: Style;
   className?: string;
+  onStyleChange?: (newStyle: Style) => void;
+  data?: Data;
 }
 
 export interface LayerTreeItemProps {