feat(frontend): upgrade Ant Design from v5 to v6

UPDATING.md

@@ -65,6 +65,16 @@ virtual-dataset SQL) raises a parse error in SQL Lab and dashboard-generated
 queries. Deployments that legitimately run queries above this size should raise
 the value, and `SQL_MAX_PARSE_LENGTH = None` disables the check entirely.
 
+### Ant Design upgraded from v5 to v6
+
+The frontend now builds against Ant Design 6, and `@superset-ui/core` / `@apache-superset/core` peer-depend on `antd ^6`. Custom plugins, extensions, and themes that interact with Ant Design need review:
+
+- **Internal DOM classes were renamed**, so any custom CSS targeting `.ant-*` internals silently stops matching. Notable renames: `.ant-tabs-content-holder` → `.ant-tabs-body-holder`, `.ant-tabs-content` → `.ant-tabs-body`, `.ant-tabs-tabpane` → `.ant-tabs-content`; `.ant-select-selector` → `.ant-select-content`, `.ant-select-selection-placeholder` → `.ant-select-placeholder`, `.ant-select-arrow` → `.ant-select-suffix`; `.ant-tooltip-inner` → `.ant-tooltip-container`; `.ant-popover-inner` → `.ant-popover-container`; `.ant-steps-item-tail` → `.ant-steps-item-rail`.
+- **Some component props changed or were removed** — e.g. `Select` no longer accepts `dropdownAlign`, `visible`/`onVisibleChange` are `open`/`onOpenChange`, `Dropdown` `overlay` is `menu`, `Steps.Step` children are the `items` prop, and `styles.body` on Tooltip/Popover is `styles.container`.
+- **CSS variables are on by default** in antd 6, and `ThemeConfig.cssVar` no longer accepts a boolean; Superset theme configs using `cssVar: true`/`false` are coerced (`true` → `{}`, `false` → omitted).
+
+Theme tokens are unaffected — antd 6 removed none of the tokens Superset exposes, so existing theme configurations continue to work. See the [Ant Design v6 migration guide](https://ant.design/docs/react/migration-v6) for the complete upstream list.
+
 ### Guest-token RLS rules reject unknown fields
 
 The `rls` rules passed to `POST /api/v1/security/guest_token/` are now validated strictly: a rule may only contain `dataset` and `clause`. Previously unknown fields were silently dropped, so a mistyped or legacy scope key (most commonly `datasource` instead of `dataset`) produced a rule with no `dataset`, which is treated as a *global* rule applied to every dataset the embedded resource can reach. Such a request now returns HTTP 400 identifying the offending field instead of issuing a token with an unintended global rule. Integrators that were sending extra fields in RLS rules must remove them; valid dataset-scoped (`{"dataset": 41, "clause": "..."}`) and global (`{"clause": "..."}`) rules are unaffected.

superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts

@@ -471,19 +471,19 @@ export function applyAdvancedTimeRangeFilterOnDashboard(
   endRange?: string,
 ) {
   cy.get('.control-label').contains('Range type').should('be.visible');
-  cy.get('.ant-popover-content .ant-select-selector')
+  cy.get('.ant-popover-content .ant-select-content')
     .should('be.visible')
     .click();
   cy.get(`[label="Advanced"]`).should('be.visible').click();
   cy.get('.section-title').contains('Advanced Time Range').should('be.visible');
   if (startRange) {
-    cy.get('.ant-popover-inner-content')
+    cy.get('.ant-popover-content')
       .find('[class^=ant-input]')
       .first()
       .type(`${startRange}`);
   }
   if (endRange) {
-    cy.get('.ant-popover-inner-content')
+    cy.get('.ant-popover-content')
       .find('[class^=ant-input]')
       .last()
       .type(`${endRange}`);
@@ -514,15 +514,14 @@ export function inputNativeFilterDefaultValue(
       )
         .eq(1)
         .within(() => {
-          cy.get('.ant-select-selection-search-input').type(
-            `${defaultValue}{enter}`,
-            { force: true },
-          );
+          cy.get('.ant-select-input').type(`${defaultValue}{enter}`, {
+            force: true,
+          });
         });
     });
   } else {
     cy.getBySel('default-input').within(() => {
-      cy.get('.ant-select-selection-search-input').click();
+      cy.get('.ant-select-input').click();
       cy.get('.ant-select-item-option-content').contains(defaultValue).click();
     });
   }

superset-frontend/cypress-base/cypress/e2e/explore/utils.ts

@@ -53,9 +53,7 @@ export function saveChartToDashboard(chartName: string, dashboardName: string) {
     .then($modal => {
       cy.wait(500);
       cy.wrap($modal)
-        .find(
-          '.ant-select-selection-search-input[aria-label*="Select a dashboard"]',
-        )
+        .find('.ant-select-input[aria-label*="Select a dashboard"]')
         .type(dashboardName, { force: true });
       cy.wrap($modal)
         .find(`.ant-select-item-option[title="${dashboardName}"]`)

superset-frontend/cypress-base/cypress/support/directories.ts

@@ -52,7 +52,7 @@ export const securityAccess = {
 };
 export const homePage = {
   homeSection: {
-    sectionArea: '.ant-collapse-content-box',
+    sectionArea: '.ant-collapse-body',
     sectionElement: '.ant-card-meta-title',
   },
   sections: {
@@ -91,7 +91,7 @@ export const databasesPage = {
     preferredBlockSheets: '.preferred > :nth-child(6)',
     supportedDatabasesText: '.control-label',
     orChoose: '.available-label',
-    dbDropdown: '[class="ant-select-selection-search-input"]',
+    dbDropdown: '.ant-select-input',
     dbDropdownMenu: '.rc-virtual-list-holder-inner',
     dbDropdownMenuItem: '[class="ant-select-item-option-content"]',
     infoAlert: '.ant-alert',
@@ -277,7 +277,7 @@ export const chartListView = {
   header: {
     cardView: '[aria-label="card-view"]',
     listView: '[aria-label="list-view"]',
-    sort: '[class="ant-select-selection-search-input"][aria-label="Sort"]',
+    sort: '.ant-select-input[aria-label="Sort"]',
     sortRecentlyModifiedMenuOption: '[label="Recently modified"]',
     sortAlphabeticalMenuOption: '[label="Alphabetical"]',
     sortDropdown: '.Select__menu',
@@ -338,20 +338,20 @@ export const nativeFilters = {
   filtersPanel: {
     filterName: dataTestLocator('filters-config-modal__name-input'),
     datasetName: dataTestLocator('filters-config-modal__datasource-input'),
-    filterInfoInput: '.ant-select-selection-search-input',
+    filterInfoInput: '.ant-select-input',
     inputDropdown: '.ant-select-item-option-content',
-    columnEmptyInput: '.ant-select-selection-placeholder',
+    columnEmptyInput: '.ant-select-placeholder',
     filterTypeInput: dataTestLocator('filters-config-modal__filter-type'),
     fieldInput: dataTestLocator('field-input'),
-    filterTypeItem: '.ant-select-selection-item',
+    filterTypeItem: '.ant-select-content-has-value, .ant-select-selection-item',
     filterGear: dataTestLocator('filterbar-orientation-icon'),
   },
   filterFromDashboardView: {
-    filterValueInput: '[class="ant-select-selection-search-input"]',
+    filterValueInput: '.ant-select-input',
     expand: dataTestLocator('filter-bar__expand-button'),
     collapse: dataTestLocator('filter-bar__collapse-button'),
     filterName: dataTestLocator('filter-control-name'),
-    filterContent: '.ant-select-selection-item',
+    filterContent: '.ant-select-content-has-value, .ant-select-selection-item',
     createFilterButton: dataTestLocator('filter-bar__create-filter'),
     timeRangeFilterContent: dataTestLocator('time-range-trigger'),
   },
@@ -365,8 +365,8 @@ export const nativeFilters = {
     checkedCheckbox: '.ant-checkbox-wrapper-checked',
     infoTooltip: '[aria-label="Show info tooltip"]',
     parentFilterInput: dataTestLocator('parent-filter-input'),
-    filterPlaceholder: '.ant-select-selection-placeholder',
-    collapsedSectionContainer: '[class="ant-collapse-content-box"]',
+    filterPlaceholder: '.ant-select-placeholder',
+    collapsedSectionContainer: '[class="ant-collapse-body"]',
   },
   filtersList: {
     list: '.ant-tabs-nav-list',
@@ -376,7 +376,7 @@ export const nativeFilters = {
     removeIcon: '[aria-label="delete"]',
   },
   filterItem: dataTestLocator('form-item-value'),
-  filterItemDropdown: '.ant-select-selection-search',
+  filterItemDropdown: '.ant-select-input',
   applyFilter: dataTestLocator('filter-bar__apply-button'),
   defaultInput: dataTestLocator('default-input'),
   filterIcon: dataTestLocator('filter-icon'),
@@ -484,7 +484,7 @@ export const exploreView = {
   saveModal: {
     modal: '.ant-modal-content',
     chartNameInput: dataTestLocator('new-chart-name'),
-    dashboardNameInput: '.ant-select-selection-search-input',
+    dashboardNameInput: '.ant-select-input',
     addToDashboardInput: dataTestLocator(
       'save-chart-modal-select-dashboard-form',
     ),
@@ -495,7 +495,7 @@ export const exploreView = {
   },
   controlPanel: {
     panel: dataTestLocator('control-tabs'),
-    categoryArea: '.ant-collapse-content-box',
+    categoryArea: '.ant-collapse-body',
     dragField: dataTestLocator('datasource'),
     metricsField: dataTestLocator('metrics'),
     optionField: dataTestLocator('option-label'),
@@ -594,7 +594,7 @@ export const exploreView = {
   },
 };
 export const createChartView = {
-  chooseDatasetInput: '.ant-select-selection-search-input',
+  chooseDatasetInput: '.ant-select-input',
   chooseDatasetOption: '.ant-select-item-option-content',
   chooseDatasetList: '.rc-virtual-list-holder-inner',
   tableVizType: "[alt='Table']",
@@ -641,7 +641,7 @@ export const dashboardView = {
     secondTabSalesDashboard: dataTestLocator('dragdroppable-object'),
   },
   timeRangeModal: {
-    rangeTypeField: '.ant-select-selection-item',
+    rangeTypeField: '.ant-select-content-has-value, .ant-select-selection-item',
     startTimeInputNumber: '.ant-input-number-input',
     datePicker: '.ant-picker-input',
     applyButton: dataTestLocator('date-filter-control__apply-button'),

superset-frontend/jest.config.js

@@ -75,7 +75,7 @@ module.exports = {
     // @ant-design/colors and @ant-design/fast-color are allowed through because
     // @ant-design/icons >= 6.3 deep-imports the ESM build of @ant-design/colors
     // from its CJS output, so babel-jest must transform those files.
-    'node_modules/(?!@ant-design/(colors|fast-color)|@formatjs/.*|d3-(array|interpolate|color|time|scale|time-format|format)|internmap|@mapbox/tiny-sdf|remark-gfm|(?!@ngrx|(?!deck.gl)|d3-scale)|markdown-table|micromark-*.|decode-named-character-reference|character-entities|mdast-util-*.|unist-util-*.|ccount|escape-string-regexp|nanoid|uuid|@rjsf/*.|echarts|zrender|fetch-mock|pretty-ms|parse-ms|ol|@babel/runtime|@emotion|cheerio|cheerio/lib|parse5|dom-serializer|entities|htmlparser2|rehype-sanitize|hast-util-sanitize|unified|unist-.*|hast-.*|rehype-.*|remark-.*|mdast-.*|micromark-.*|parse-entities|property-information|space-separated-tokens|comma-separated-tokens|bail|devlop|zwitch|longest-streak|geostyler|geostyler-.*|(?!geostyler)lodash|react-error-boundary|react-json-tree|react-base16-styling|lodash-es|rbush|quickselect|react-diff-viewer-continued|storybook/*.|json-stringify-pretty-compact)',
+    'node_modules/(?!@ant-design/(colors|fast-color)|@formatjs/.*|d3-(array|interpolate|color|time|scale|time-format|format)|internmap|@mapbox/tiny-sdf|remark-gfm|(?!@ngrx|(?!deck.gl)|d3-scale)|markdown-table|micromark-*.|decode-named-character-reference|character-entities|mdast-util-*.|unist-util-*.|ccount|escape-string-regexp|nanoid|uuid|@rjsf/*.|@x0k/.*|echarts|zrender|fetch-mock|pretty-ms|parse-ms|ol|@babel/runtime|@emotion|cheerio|cheerio/lib|parse5|dom-serializer|entities|htmlparser2|rehype-sanitize|hast-util-sanitize|unified|unist-.*|hast-.*|rehype-.*|remark-.*|mdast-.*|micromark-.*|parse-entities|property-information|space-separated-tokens|comma-separated-tokens|bail|devlop|zwitch|longest-streak|geostyler|geostyler-.*|(?!geostyler)lodash|react-error-boundary|react-json-tree|react-base16-styling|lodash-es|rbush|quickselect|react-diff-viewer-continued|storybook/*.|json-stringify-pretty-compact)',
   ],
   preset: 'ts-jest',
   transform: {