From 08e44c085014ca258fe0c22886067dc716a910c6 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Mon, 17 Jun 2024 09:25:20 -0300
Subject: [PATCH 01/34] feat: Improves the Drill By feature (#29242)

Co-authored-by: JUST.in DO IT <justin.park@airbnb.com>
---
 .../src/ui-overrides/types.ts                 |  11 +
 .../ChartContextMenu/ChartContextMenu.tsx     |  12 +-
 .../Chart/DrillBy/DrillByMenuItems.test.tsx   |   9 +-
 .../Chart/DrillBy/DrillByMenuItems.tsx        | 194 ++++++++++++------
 .../Chart/MenuItemWithTruncation.tsx          |   3 +-
 5 files changed, 160 insertions(+), 69 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-core/src/ui-overrides/types.ts b/superset-frontend/packages/superset-ui-core/src/ui-overrides/types.ts
index bd2fa9047c..775e2c129a 100644
--- a/superset-frontend/packages/superset-ui-core/src/ui-overrides/types.ts
+++ b/superset-frontend/packages/superset-ui-core/src/ui-overrides/types.ts
@@ -23,6 +23,8 @@ import {
   ComponentType,
 } from 'react';
 import type { Editor } from 'brace';
+import { BaseFormData } from '../query';
+import { JsonResponse } from '../connection';
 
 /**
  * A function which returns text (or marked-up text)
@@ -30,6 +32,14 @@ import type { Editor } from 'brace';
  */
 type ReturningDisplayable<P = void> = (props: P) => string | ReactElement;
 
+/**
+ * A function which returns the drill by options for a given dataset and chart's formData.
+ */
+export type LoadDrillByOptions = (
+  datasetId: number,
+  formData: BaseFormData,
+) => Promise<JsonResponse>;
+
 /**
  * This type defines all available extensions of Superset's default UI.
  * Namespace the keys here to follow the form of 'some_domain.functionality.item'.
@@ -193,6 +203,7 @@ export interface CustomAutocomplete extends AutocompleteItem {
 
 export type Extensions = Partial<{
   'alertsreports.header.icon': ComponentType;
+  'load.drillby.options': LoadDrillByOptions;
   'embedded.documentation.configuration_details': ComponentType<ConfigDetailsProps>;
   'embedded.documentation.description': ReturningDisplayable;
   'embedded.documentation.url': string;
diff --git a/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx b/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx
index b7da3a7382..bf1ea84ff1 100644
--- a/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx
+++ b/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx
@@ -18,6 +18,7 @@
  */
 import {
   forwardRef,
+  Key,
   ReactNode,
   RefObject,
   useCallback,
@@ -104,6 +105,7 @@ const ChartContextMenu = (
   const crossFiltersEnabled = useSelector<RootState, boolean>(
     ({ dashboardInfo }) => dashboardInfo.crossFiltersEnabled,
   );
+  const [openKeys, setOpenKeys] = useState<Key[]>([]);
 
   const isDisplayed = (item: ContextMenuItem) =>
     displayedItems === ContextMenuItem.All ||
@@ -254,6 +256,8 @@ const ChartContextMenu = (
         formData={formData}
         contextMenuY={clientY}
         submenuIndex={submenuIndex}
+        open={openKeys.includes('drill-by-submenu')}
+        key="drill-by-submenu"
         {...(additionalConfig?.drillBy || {})}
       />,
     );
@@ -288,7 +292,13 @@ const ChartContextMenu = (
   return ReactDOM.createPortal(
     <Dropdown
       overlay={
-        <Menu className="chart-context-menu" data-test="chart-context-menu">
+        <Menu
+          className="chart-context-menu"
+          data-test="chart-context-menu"
+          onOpenChange={openKeys => {
+            setOpenKeys(openKeys);
+          }}
+        >
           {menuItems.length ? (
             menuItems
           ) : (
diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx
index 0f2dff8bce..8b65d21409 100644
--- a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx
@@ -31,11 +31,17 @@ import { DrillByMenuItems, DrillByMenuItemsProps } from './DrillByMenuItems';
 
 /* eslint jest/expect-expect: ["warn", { "assertFunctionNames": ["expect*"] }] */
 
-const DATASET_ENDPOINT = 'glob:*/api/v1/dataset/7';
+const DATASET_ENDPOINT = 'glob:*/api/v1/dataset/7*';
 const CHART_DATA_ENDPOINT = 'glob:*/api/v1/chart/data*';
 const FORM_DATA_KEY_ENDPOINT = 'glob:*/api/v1/explore/form_data';
 const { form_data: defaultFormData } = chartQueries[sliceId];
 
+jest.mock('lodash/debounce', () => (fn: Function & { debounce: Function }) => {
+  // eslint-disable-next-line no-param-reassign
+  fn.debounce = jest.fn();
+  return fn;
+});
+
 const defaultColumns = [
   { column_name: 'col1', groupby: true },
   { column_name: 'col2', groupby: true },
@@ -68,6 +74,7 @@ const renderMenu = ({
       <DrillByMenuItems
         formData={formData ?? defaultFormData}
         drillByConfig={drillByConfig}
+        open
         {...rest}
       />
     </Menu>,
diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
index c7b4ec8e45..6df180cb78 100644
--- a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
@@ -18,11 +18,12 @@
  */
 
 import {
-  ChangeEvent,
+  CSSProperties,
   ReactNode,
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 import { Menu } from 'src/components/Menu';
@@ -31,12 +32,20 @@ import {
   Behavior,
   Column,
   ContextMenuFilters,
+  FAST_DEBOUNCE,
+  JsonResponse,
   css,
   ensureIsArray,
   getChartMetadataRegistry,
+  getExtensionsRegistry,
+  logging,
   t,
   useTheme,
 } from '@superset-ui/core';
+import rison from 'rison';
+import { debounce } from 'lodash';
+import { FixedSizeList as List } from 'react-window';
+import { AntdInput } from 'src/components';
 import Icons from 'src/components/Icons';
 import { Input } from 'src/components/Input';
 import { useToasts } from 'src/components/MessageToasts/withToasts';
@@ -52,7 +61,7 @@ import { getSubmenuYOffset } from '../utils';
 import { MenuItemWithTruncation } from '../MenuItemWithTruncation';
 import { Dataset } from '../types';
 
-const MAX_SUBMENU_HEIGHT = 200;
+const SUBMENU_HEIGHT = 200;
 const SHOW_COLUMNS_SEARCH_THRESHOLD = 10;
 const SEARCH_INPUT_HEIGHT = 48;
 
@@ -65,8 +74,28 @@ export interface DrillByMenuItemsProps {
   onClick?: (event: MouseEvent) => void;
   openNewModal?: boolean;
   excludedColumns?: Column[];
+  open: boolean;
 }
 
+const loadDrillByOptions = getExtensionsRegistry().get('load.drillby.options');
+
+const queryString = rison.encode({
+  columns: [
+    'table_name',
+    'owners.first_name',
+    'owners.last_name',
+    'created_by.first_name',
+    'created_by.last_name',
+    'created_on_humanized',
+    'changed_by.first_name',
+    'changed_by.last_name',
+    'changed_on_humanized',
+    'columns.column_name',
+    'columns.verbose_name',
+    'columns.groupby',
+  ],
+});
+
 export const DrillByMenuItems = ({
   drillByConfig,
   formData,
@@ -76,6 +105,7 @@ export const DrillByMenuItems = ({
   onClick = () => {},
   excludedColumns,
   openNewModal = true,
+  open,
   ...rest
 }: DrillByMenuItemsProps) => {
   const theme = useTheme();
@@ -86,6 +116,9 @@ export const DrillByMenuItems = ({
   const [columns, setColumns] = useState<Column[]>([]);
   const [showModal, setShowModal] = useState(false);
   const [currentColumn, setCurrentColumn] = useState();
+  const ref = useRef<AntdInput>(null);
+  const showSearch =
+    loadDrillByOptions || columns.length > SHOW_COLUMNS_SEARCH_THRESHOLD;
   const handleSelection = useCallback(
     (event, column) => {
       onClick(event);
@@ -102,10 +135,14 @@ export const DrillByMenuItems = ({
   }, []);
 
   useEffect(() => {
-    // Input is displayed only when columns.length > SHOW_COLUMNS_SEARCH_THRESHOLD
-    // Reset search input in case Input gets removed
-    setSearchInput('');
-  }, [columns.length]);
+    if (open) {
+      ref.current?.input.focus();
+    } else {
+      // Reset search input when menu is closed
+      ref.current?.setValue('');
+      setSearchInput('');
+    }
+  }, [open]);
 
   const hasDrillBy = drillByConfig?.groupbyFieldName;
 
@@ -119,51 +156,59 @@ export const DrillByMenuItems = ({
   const verboseMap = useVerboseMap(dataset);
 
   useEffect(() => {
+    async function loadOptions() {
+      const datasetId = Number(formData.datasource.split('__')[0]);
+      try {
+        setIsLoadingColumns(true);
+        let response: JsonResponse;
+        if (loadDrillByOptions) {
+          response = await loadDrillByOptions(datasetId, formData);
+        } else {
+          response = await cachedSupersetGet({
+            endpoint: `/api/v1/dataset/${datasetId}?q=${queryString}`,
+          });
+        }
+        const { json } = response;
+        const { result } = json;
+        setDataset(result);
+        setColumns(
+          ensureIsArray(result.columns)
+            .filter(column => column.groupby)
+            .filter(
+              column =>
+                !ensureIsArray(
+                  formData[drillByConfig?.groupbyFieldName ?? ''],
+                ).includes(column.column_name) &&
+                column.column_name !== formData.x_axis &&
+                ensureIsArray(excludedColumns)?.every(
+                  excludedCol => excludedCol.column_name !== column.column_name,
+                ),
+            ),
+        );
+      } catch (error) {
+        logging.error(error);
+        supersetGetCache.delete(`/api/v1/dataset/${datasetId}`);
+        addDangerToast(t('Failed to load dimensions for drill by'));
+      } finally {
+        setIsLoadingColumns(false);
+      }
+    }
     if (handlesDimensionContextMenu && hasDrillBy) {
-      const datasetId = formData.datasource.split('__')[0];
-      cachedSupersetGet({
-        endpoint: `/api/v1/dataset/${datasetId}`,
-      })
-        .then(({ json: { result } }) => {
-          setDataset(result);
-          setColumns(
-            ensureIsArray(result.columns)
-              .filter(column => column.groupby)
-              .filter(
-                column =>
-                  !ensureIsArray(
-                    formData[drillByConfig.groupbyFieldName ?? ''],
-                  ).includes(column.column_name) &&
-                  column.column_name !== formData.x_axis &&
-                  ensureIsArray(excludedColumns)?.every(
-                    excludedCol =>
-                      excludedCol.column_name !== column.column_name,
-                  ),
-              ),
-          );
-        })
-        .catch(() => {
-          supersetGetCache.delete(`/api/v1/dataset/${datasetId}`);
-          addDangerToast(t('Failed to load dimensions for drill by'));
-        })
-        .finally(() => {
-          setIsLoadingColumns(false);
-        });
+      loadOptions();
     }
   }, [
     addDangerToast,
+    drillByConfig?.groupbyFieldName,
     excludedColumns,
     formData,
-    drillByConfig?.groupbyFieldName,
     handlesDimensionContextMenu,
     hasDrillBy,
   ]);
 
-  const handleInput = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    e.stopPropagation();
-    const input = e?.target?.value;
-    setSearchInput(input);
-  }, []);
+  const handleInput = debounce(
+    (value: string) => setSearchInput(value),
+    FAST_DEBOUNCE,
+  );
 
   const filteredColumns = useMemo(
     () =>
@@ -181,12 +226,10 @@ export const DrillByMenuItems = ({
         contextMenuY,
         filteredColumns.length || 1,
         submenuIndex,
-        MAX_SUBMENU_HEIGHT,
-        columns.length > SHOW_COLUMNS_SEARCH_THRESHOLD
-          ? SEARCH_INPUT_HEIGHT
-          : 0,
+        SUBMENU_HEIGHT,
+        showSearch ? SEARCH_INPUT_HEIGHT : 0,
       ),
-    [contextMenuY, filteredColumns.length, submenuIndex, columns.length],
+    [contextMenuY, filteredColumns.length, submenuIndex, showSearch],
   );
 
   let tooltip: ReactNode;
@@ -208,27 +251,53 @@ export const DrillByMenuItems = ({
     );
   }
 
+  const Row = ({
+    index,
+    data,
+    style,
+  }: {
+    index: number;
+    data: { columns: Column[] };
+    style: CSSProperties;
+  }) => {
+    const { columns, ...rest } = data;
+    const column = columns[index];
+    return (
+      <MenuItemWithTruncation
+        key={`drill-by-item-${column.column_name}`}
+        tooltipText={column.verbose_name || column.column_name}
+        {...rest}
+        onClick={e => handleSelection(e, column)}
+        style={style}
+      >
+        {column.verbose_name || column.column_name}
+      </MenuItemWithTruncation>
+    );
+  };
+
   return (
     <>
       <Menu.SubMenu
         title={t('Drill by')}
-        key="drill-by-submenu"
         popupClassName="chart-context-submenu"
         popupOffset={[0, submenuYOffset]}
         {...rest}
       >
         <div data-test="drill-by-submenu">
-          {columns.length > SHOW_COLUMNS_SEARCH_THRESHOLD && (
+          {showSearch && (
             <Input
+              ref={ref}
               prefix={
                 <Icons.Search
                   iconSize="l"
                   iconColor={theme.colors.grayscale.light1}
                 />
               }
-              onChange={handleInput}
+              onChange={e => {
+                e.stopPropagation();
+                handleInput(e.target.value);
+              }}
               placeholder={t('Search columns')}
-              value={searchInput}
               onClick={e => {
                 // prevent closing menu when clicking on input
                 e.nativeEvent.stopImmediatePropagation();
@@ -251,23 +320,16 @@ export const DrillByMenuItems = ({
               <Loading position="inline-centered" />
             </div>
           ) : filteredColumns.length ? (
-            <div
-              css={css`
-                max-height: ${MAX_SUBMENU_HEIGHT}px;
-                overflow: auto;
-              `}
+            <List
+              width="100%"
+              height={SUBMENU_HEIGHT}
+              itemSize={35}
+              itemCount={filteredColumns.length}
+              itemData={{ columns: filteredColumns, ...rest }}
+              overscanCount={20}
             >
-              {filteredColumns.map(column => (
-                <MenuItemWithTruncation
-                  key={`drill-by-item-${column.column_name}`}
-                  tooltipText={column.verbose_name || column.column_name}
-                  {...rest}
-                  onClick={e => handleSelection(e, column)}
-                >
-                  {column.verbose_name || column.column_name}
-                </MenuItemWithTruncation>
-              ))}
-            </div>
+              {Row}
+            </List>
           ) : (
             <Menu.Item disabled key="no-drill-by-columns-found" {...rest}>
               {t('No columns found')}
diff --git a/superset-frontend/src/components/Chart/MenuItemWithTruncation.tsx b/superset-frontend/src/components/Chart/MenuItemWithTruncation.tsx
index fd371fb30a..1ab3daf485 100644
--- a/superset-frontend/src/components/Chart/MenuItemWithTruncation.tsx
+++ b/superset-frontend/src/components/Chart/MenuItemWithTruncation.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 import { css, truncationCSS, useCSSTextTruncation } from '@superset-ui/core';
 import { Menu } from 'src/components/Menu';
 import { Tooltip } from 'src/components/Tooltip';
@@ -27,6 +27,7 @@ export type MenuItemWithTruncationProps = {
   tooltipText: ReactNode;
   children: ReactNode;
   onClick?: MenuProps['onClick'];
+  style?: CSSProperties;
 };
 
 export const MenuItemWithTruncation = ({

From 914ebd9ba39bfcbf8d4a2b91d18eda5d3c7d2c86 Mon Sep 17 00:00:00 2001
From: Jack <41238731+fisjac@users.noreply.github.com>
Date: Mon, 17 Jun 2024 10:52:31 -0500
Subject: [PATCH 02/34] fix(permalink): adding anchor to dashboard permalink
 generation (#28744)

---
 .../HeaderActionsDropdown.test.tsx                 |  7 ++++---
 .../Header/HeaderActionsDropdown/index.jsx         | 14 ++++++++++++--
 .../src/dashboard/components/Header/index.jsx      |  4 ++--
 .../src/dashboard/components/Header/types.ts       |  6 ++++++
 .../components/RefreshIntervalModal.test.tsx       |  2 +-
 5 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx
index 6b0cbe3a37..3a0d25d600 100644
--- a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx
+++ b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx
@@ -23,9 +23,9 @@ import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import { HeaderDropdownProps } from 'src/dashboard/components/Header/types';
 import injectCustomCss from 'src/dashboard/util/injectCustomCss';
-import HeaderActionsDropdown from '.';
+import { HeaderActionsDropdown } from '.';
 
-const createProps = () => ({
+const createProps = (): HeaderDropdownProps => ({
   addSuccessToast: jest.fn(),
   addDangerToast: jest.fn(),
   customCss: '.ant-menu {margin-left: 100px;}',
@@ -66,6 +66,7 @@ const createProps = () => ({
   userCanCurate: false,
   lastModifiedTime: 0,
   isDropdownVisible: true,
+  manageEmbedded: jest.fn(),
   dataMask: {},
   logEvent: jest.fn(),
 });
@@ -228,9 +229,9 @@ test('should show the properties modal', async () => {
 
 describe('UNSAFE_componentWillReceiveProps', () => {
   let wrapper: any;
+
   const mockedProps = createProps();
   const props = { ...mockedProps, customCss: '' };
-
   beforeEach(() => {
     wrapper = shallow(<HeaderActionsDropdown {...props} />);
     wrapper.setState({ css: props.customCss });
diff --git a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
index 8008558ded..73d136e81f 100644
--- a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
+++ b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
@@ -19,6 +19,7 @@
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { isEmpty } from 'lodash';
+import { connect } from 'react-redux';
 import { t } from '@superset-ui/core';
 import { Menu } from 'src/components/Menu';
 import { URL_PARAMS } from 'src/constants';
@@ -46,6 +47,7 @@ const propTypes = {
   customCss: PropTypes.string,
   colorNamespace: PropTypes.string,
   colorScheme: PropTypes.string,
+  directPathToChild: PropTypes.array,
   onChange: PropTypes.func.isRequired,
   updateCss: PropTypes.func.isRequired,
   forceRefreshAllCharts: PropTypes.func.isRequired,
@@ -77,7 +79,11 @@ const defaultProps = {
   refreshWarning: null,
 };
 
-class HeaderActionsDropdown extends PureComponent {
+const mapStateToProps = state => ({
+  directPathToChild: state.dashboardState.directPathToChild,
+});
+
+export class HeaderActionsDropdown extends PureComponent {
   static discardChanges() {
     window.location.reload();
   }
@@ -173,6 +179,7 @@ class HeaderActionsDropdown extends PureComponent {
       addDangerToast,
       setIsDropdownVisible,
       isDropdownVisible,
+      directPathToChild,
       ...rest
     } = this.props;
 
@@ -191,6 +198,8 @@ class HeaderActionsDropdown extends PureComponent {
     const refreshIntervalOptions =
       dashboardInfo.common?.conf?.DASHBOARD_AUTO_REFRESH_INTERVALS;
 
+    const dashboardComponentId = [...(directPathToChild || [])].pop();
+
     return (
       <Menu selectable={false} data-test="header-actions-menu" {...rest}>
         {!editMode && (
@@ -286,6 +295,7 @@ class HeaderActionsDropdown extends PureComponent {
               addSuccessToast={addSuccessToast}
               addDangerToast={addDangerToast}
               dashboardId={dashboardId}
+              dashboardComponentId={dashboardComponentId}
             />
           </Menu.SubMenu>
         )}
@@ -354,4 +364,4 @@ class HeaderActionsDropdown extends PureComponent {
 HeaderActionsDropdown.propTypes = propTypes;
 HeaderActionsDropdown.defaultProps = defaultProps;
 
-export default HeaderActionsDropdown;
+export default connect(mapStateToProps)(HeaderActionsDropdown);
diff --git a/superset-frontend/src/dashboard/components/Header/index.jsx b/superset-frontend/src/dashboard/components/Header/index.jsx
index 7cb8ccd2b8..bb0f79d1d4 100644
--- a/superset-frontend/src/dashboard/components/Header/index.jsx
+++ b/superset-frontend/src/dashboard/components/Header/index.jsx
@@ -41,7 +41,7 @@ import { AntdButton } from 'src/components/';
 import { findPermission } from 'src/utils/findPermission';
 import { Tooltip } from 'src/components/Tooltip';
 import { safeStringify } from 'src/utils/safeStringify';
-import HeaderActionsDropdown from 'src/dashboard/components/Header/HeaderActionsDropdown';
+import ConnectedHeaderActionsDropdown from 'src/dashboard/components/Header/HeaderActionsDropdown';
 import PublishedStatus from 'src/dashboard/components/PublishedStatus';
 import UndoRedoKeyListeners from 'src/dashboard/components/UndoRedoKeyListeners';
 import PropertiesModal from 'src/dashboard/components/PropertiesModal';
@@ -672,7 +672,7 @@ class Header extends PureComponent {
             onVisibleChange: this.setIsDropdownVisible,
           }}
           additionalActionsMenu={
-            <HeaderActionsDropdown
+            <ConnectedHeaderActionsDropdown
               addSuccessToast={this.props.addSuccessToast}
               addDangerToast={this.props.addDangerToast}
               dashboardId={dashboardInfo.id}
diff --git a/superset-frontend/src/dashboard/components/Header/types.ts b/superset-frontend/src/dashboard/components/Header/types.ts
index 89ea756988..f3a35586a2 100644
--- a/superset-frontend/src/dashboard/components/Header/types.ts
+++ b/superset-frontend/src/dashboard/components/Header/types.ts
@@ -54,7 +54,13 @@ export interface HeaderDropdownProps {
   updateCss: () => void;
   userCanEdit: boolean;
   userCanSave: boolean;
+  userCanShare: boolean;
+  userCanCurate: boolean;
+  isDropdownVisible: boolean;
+  manageEmbedded: () => void;
+  dataMask: any;
   lastModifiedTime: number;
+  logEvent: () => void;
 }
 
 export interface HeaderProps {
diff --git a/superset-frontend/src/dashboard/components/RefreshIntervalModal.test.tsx b/superset-frontend/src/dashboard/components/RefreshIntervalModal.test.tsx
index 471c0ec25b..a8aac270d7 100644
--- a/superset-frontend/src/dashboard/components/RefreshIntervalModal.test.tsx
+++ b/superset-frontend/src/dashboard/components/RefreshIntervalModal.test.tsx
@@ -22,7 +22,7 @@ import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 
 import RefreshIntervalModal from 'src/dashboard/components/RefreshIntervalModal';
-import HeaderActionsDropdown from 'src/dashboard/components/Header/HeaderActionsDropdown';
+import { HeaderActionsDropdown } from 'src/dashboard/components/Header/HeaderActionsDropdown';
 
 const createProps = () => ({
   addSuccessToast: jest.fn(),

From ae7c40920e8a8809939cbaea2339983afe0a7c6b Mon Sep 17 00:00:00 2001
From: Elizabeth Thompson <eschutho@gmail.com>
Date: Mon, 17 Jun 2024 13:01:04 -0700
Subject: [PATCH 03/34] chore: translate strings to French (#29247)

---
 superset/translations/fr/LC_MESSAGES/messages.po | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset/translations/fr/LC_MESSAGES/messages.po b/superset/translations/fr/LC_MESSAGES/messages.po
index 62d92b10f7..1ef84114bd 100644
--- a/superset/translations/fr/LC_MESSAGES/messages.po
+++ b/superset/translations/fr/LC_MESSAGES/messages.po
@@ -325,7 +325,7 @@ msgstr "%s colonne(s)"
 #: superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelItem.tsx:230
 #, python-format
 msgid "%s ineligible item(s) are hidden"
-msgstr ""
+msgstr "%s article(s) non éligible(s) sont caché(s)."
 
 #: superset-frontend/src/features/tags/BulkTagModal.tsx:74
 #, python-format

From d49d79121cce113910ca0132fc6b1ad26fa809c8 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Mon, 17 Jun 2024 13:42:58 -0700
Subject: [PATCH 04/34] chore: trigger CI jobs on all release-related branches
 (#29274)

---
 .github/workflows/check_db_migration_confict.yml      | 2 +-
 .github/workflows/codeql-analysis.yml                 | 2 +-
 .github/workflows/docker.yml                          | 2 +-
 .github/workflows/embedded-sdk-release.yml            | 2 +-
 .github/workflows/generate-FOSSA-report.yml           | 2 +-
 .github/workflows/github-action-validator.yml         | 2 +-
 .github/workflows/pre-commit.yml                      | 2 +-
 .github/workflows/prefer-typescript.yml               | 2 +-
 .github/workflows/release.yml                         | 2 +-
 .github/workflows/superset-cli.yml                    | 2 +-
 .github/workflows/superset-e2e.yml                    | 2 +-
 .github/workflows/superset-frontend.yml               | 2 +-
 .github/workflows/superset-helm-release.yml           | 2 +-
 .github/workflows/superset-python-integrationtest.yml | 2 +-
 .github/workflows/superset-python-misc.yml            | 2 +-
 .github/workflows/superset-python-presto-hive.yml     | 2 +-
 .github/workflows/superset-python-unittest.yml        | 2 +-
 .github/workflows/superset-translations.yml           | 2 +-
 .github/workflows/superset-websocket.yml              | 2 +-
 .github/workflows/tech-debt.yml                       | 2 +-
 UPDATING.md                                           | 4 ++++
 21 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/.github/workflows/check_db_migration_confict.yml b/.github/workflows/check_db_migration_confict.yml
index 079ba954ed..e717f41193 100644
--- a/.github/workflows/check_db_migration_confict.yml
+++ b/.github/workflows/check_db_migration_confict.yml
@@ -5,7 +5,7 @@ on:
       - "superset/migrations/**"
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
   pull_request:
     paths:
       - "superset/migrations/**"
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
index 15395bbfde..d9d5abdbdb 100644
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -2,7 +2,7 @@ name: "CodeQL"
 
 on:
   push:
-    branches: ["master", "[0-9].[0-9]"]
+    branches: ["master", "[0-9].[0-9]*"]
   pull_request:
     # The branches below must be a subset of the branches above
     branches: ["master"]
diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
index 849fb7b132..f38cd4fee4 100644
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
   pull_request:
     branches:
       - "master"
diff --git a/.github/workflows/embedded-sdk-release.yml b/.github/workflows/embedded-sdk-release.yml
index ff51d8f97b..323b1a9e99 100644
--- a/.github/workflows/embedded-sdk-release.yml
+++ b/.github/workflows/embedded-sdk-release.yml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
 
 jobs:
   config:
diff --git a/.github/workflows/generate-FOSSA-report.yml b/.github/workflows/generate-FOSSA-report.yml
index fb30d7dcc5..352ba845d9 100644
--- a/.github/workflows/generate-FOSSA-report.yml
+++ b/.github/workflows/generate-FOSSA-report.yml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
 
 jobs:
   config:
diff --git a/.github/workflows/github-action-validator.yml b/.github/workflows/github-action-validator.yml
index e6d07b56e9..0dd5015531 100644
--- a/.github/workflows/github-action-validator.yml
+++ b/.github/workflows/github-action-validator.yml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
   pull_request:
     types: [synchronize, opened, reopened, ready_for_review]
 
diff --git a/.github/workflows/pre-commit.yml b/.github/workflows/pre-commit.yml
index 541b4a8bfc..6ccb66df77 100644
--- a/.github/workflows/pre-commit.yml
+++ b/.github/workflows/pre-commit.yml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
   pull_request:
     types: [synchronize, opened, reopened, ready_for_review]
 
diff --git a/.github/workflows/prefer-typescript.yml b/.github/workflows/prefer-typescript.yml
index f3179d3bcc..0b34f25bae 100644
--- a/.github/workflows/prefer-typescript.yml
+++ b/.github/workflows/prefer-typescript.yml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
     paths:
       - "superset-frontend/src/**"
   pull_request:
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index ad1737c477..43862bd50b 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
 
 jobs:
   config:
diff --git a/.github/workflows/superset-cli.yml b/.github/workflows/superset-cli.yml
index 3c98198c7e..060bae5dff 100644
--- a/.github/workflows/superset-cli.yml
+++ b/.github/workflows/superset-cli.yml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
   pull_request:
     types: [synchronize, opened, reopened, ready_for_review]
 
diff --git a/.github/workflows/superset-e2e.yml b/.github/workflows/superset-e2e.yml
index f59843c010..51e6548712 100644
--- a/.github/workflows/superset-e2e.yml
+++ b/.github/workflows/superset-e2e.yml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
   pull_request:
     types: [synchronize, opened, reopened, ready_for_review]
   workflow_dispatch:
diff --git a/.github/workflows/superset-frontend.yml b/.github/workflows/superset-frontend.yml
index f79d70754f..6438c2cc1d 100644
--- a/.github/workflows/superset-frontend.yml
+++ b/.github/workflows/superset-frontend.yml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
   pull_request:
     types: [synchronize, opened, reopened, ready_for_review]
 
diff --git a/.github/workflows/superset-helm-release.yml b/.github/workflows/superset-helm-release.yml
index 429c6fc255..062e237586 100644
--- a/.github/workflows/superset-helm-release.yml
+++ b/.github/workflows/superset-helm-release.yml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
     paths:
       - "helm/**"
 
diff --git a/.github/workflows/superset-python-integrationtest.yml b/.github/workflows/superset-python-integrationtest.yml
index fec35ef9db..2569a471b3 100644
--- a/.github/workflows/superset-python-integrationtest.yml
+++ b/.github/workflows/superset-python-integrationtest.yml
@@ -5,7 +5,7 @@ on:
   push:
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
   pull_request:
     types: [synchronize, opened, reopened, ready_for_review]
 
diff --git a/.github/workflows/superset-python-misc.yml b/.github/workflows/superset-python-misc.yml
index c6b1bebd89..d58226216f 100644
--- a/.github/workflows/superset-python-misc.yml
+++ b/.github/workflows/superset-python-misc.yml
@@ -5,7 +5,7 @@ on:
   push:
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
   pull_request:
     types: [synchronize, opened, reopened, ready_for_review]
 
diff --git a/.github/workflows/superset-python-presto-hive.yml b/.github/workflows/superset-python-presto-hive.yml
index 87ff06368d..30dbaf7d40 100644
--- a/.github/workflows/superset-python-presto-hive.yml
+++ b/.github/workflows/superset-python-presto-hive.yml
@@ -5,7 +5,7 @@ on:
   push:
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
   pull_request:
     types: [synchronize, opened, reopened, ready_for_review]
 
diff --git a/.github/workflows/superset-python-unittest.yml b/.github/workflows/superset-python-unittest.yml
index d26f0435ed..454ee0c61e 100644
--- a/.github/workflows/superset-python-unittest.yml
+++ b/.github/workflows/superset-python-unittest.yml
@@ -5,7 +5,7 @@ on:
   push:
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
   pull_request:
     types: [synchronize, opened, reopened, ready_for_review]
 
diff --git a/.github/workflows/superset-translations.yml b/.github/workflows/superset-translations.yml
index 846c661d32..11dbebb098 100644
--- a/.github/workflows/superset-translations.yml
+++ b/.github/workflows/superset-translations.yml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
   pull_request:
     types: [synchronize, opened, reopened, ready_for_review]
 
diff --git a/.github/workflows/superset-websocket.yml b/.github/workflows/superset-websocket.yml
index c35573ada1..2d55ceafa0 100644
--- a/.github/workflows/superset-websocket.yml
+++ b/.github/workflows/superset-websocket.yml
@@ -3,7 +3,7 @@ on:
   push:
     branches:
       - "master"
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
     paths:
       - "superset-websocket/**"
   pull_request:
diff --git a/.github/workflows/tech-debt.yml b/.github/workflows/tech-debt.yml
index f912ab2068..6f73a3a51b 100644
--- a/.github/workflows/tech-debt.yml
+++ b/.github/workflows/tech-debt.yml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - master
-      - "[0-9].[0-9]"
+      - "[0-9].[0-9]*"
 
 jobs:
   config:
diff --git a/UPDATING.md b/UPDATING.md
index 2327fcfa3f..1d2ffbf0ec 100644
--- a/UPDATING.md
+++ b/UPDATING.md
@@ -24,6 +24,10 @@ assists people when migrating to a new version.
 
 ## Next
 
+- [29274](https://github.com/apache/superset/pull/29274): We made it easier to trigger CI on your
+  forks, whether they are public or private. Simply push to a branch that fits `[0-9].[0-9]*` and
+  should run on your fork, giving you flexibility on naming your release branches and triggering
+  CI
 - [27505](https://github.com/apache/superset/pull/27505): We simplified the files under
   `requirements/` folder. If you use these files for your builds you may want to double
   check that your builds are not affected. `base.txt` should be the same as before, though

From 358e83a8499ace5a9effb7951740eb7552fe8c50 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 17 Jun 2024 16:20:09 -0600
Subject: [PATCH 05/34] build(deps): bump ws from 8.17.0 to 8.17.1 in
 /superset-websocket (#29276)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 superset-websocket/package-lock.json | 14 +++++++-------
 superset-websocket/package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/superset-websocket/package-lock.json b/superset-websocket/package-lock.json
index 8950ab4581..81d941579f 100644
--- a/superset-websocket/package-lock.json
+++ b/superset-websocket/package-lock.json
@@ -17,7 +17,7 @@
         "lodash": "^4.17.21",
         "uuid": "^9.0.1",
         "winston": "^3.13.0",
-        "ws": "^8.17.0"
+        "ws": "^8.17.1"
       },
       "devDependencies": {
         "@types/cookie": "^0.6.0",
@@ -6029,9 +6029,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -10696,9 +10696,9 @@
       }
     },
     "ws": {
-      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
       "requires": {}
     },
     "xml-name-validator": {
diff --git a/superset-websocket/package.json b/superset-websocket/package.json
index 74b64ad565..9f919d9ffe 100644
--- a/superset-websocket/package.json
+++ b/superset-websocket/package.json
@@ -25,7 +25,7 @@
     "lodash": "^4.17.21",
     "uuid": "^9.0.1",
     "winston": "^3.13.0",
-    "ws": "^8.17.0"
+    "ws": "^8.17.1"
   },
   "devDependencies": {
     "@types/cookie": "^0.6.0",

From c7b8ae9013dcbffb3bb0dda4dc1d57cc9c18048c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 17 Jun 2024 16:20:34 -0600
Subject: [PATCH 06/34] build(deps): bump ws from 7.5.9 to 7.5.10 in /docs
 (#29275)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 docs/yarn.lock | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/yarn.lock b/docs/yarn.lock
index b4ce0f7064..c522e53040 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -10350,14 +10350,14 @@ write-file-atomic@^3.0.3:
     typedarray-to-buffer "^3.1.5"
 
 ws@^7.3.1:
-  version "7.5.9"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
-  integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
+  version "7.5.10"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.10.tgz#58b5c20dc281633f6c19113f39b349bd8bd558d9"
+  integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==
 
 ws@^8.13.0:
-  version "8.17.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.0.tgz#d145d18eca2ed25aaf791a183903f7be5e295fea"
-  integrity sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"
+  integrity sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==
 
 xdg-basedir@^5.0.1, xdg-basedir@^5.1.0:
   version "5.1.0"

From ab7f8ad1bfb3f65498688e916cf56734f2bda5b5 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Tue, 18 Jun 2024 09:16:14 -0700
Subject: [PATCH 07/34] docs: remove comment header in README.md (#29273)

---
 .rat-excludes             | 1 +
 README.md                 | 4 ----
 docs/package.json         | 4 ++--
 docs/src/intro_header.txt | 4 ++++
 4 files changed, 7 insertions(+), 6 deletions(-)
 create mode 100644 docs/src/intro_header.txt

diff --git a/.rat-excludes b/.rat-excludes
index 70529a4bd8..7cfb991cc9 100644
--- a/.rat-excludes
+++ b/.rat-excludes
@@ -71,3 +71,4 @@ snowflake.svg
 # docs-related
 erd.puml
 erd.svg
+intro_header.txt
diff --git a/README.md b/README.md
index aab794ec55..408cad422b 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,3 @@
----
-hide_title: true
-sidebar_position: 1
----
 <!--
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
diff --git a/docs/package.json b/docs/package.json
index 5933f8cfa2..102cd80a77 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -5,13 +5,13 @@
   "license": "Apache-2.0",
   "scripts": {
     "docusaurus": "docusaurus",
-    "_init": "cp ../README.md docs/intro.md",
+    "_init": "cat src/intro_header.txt ../README.md > docs/intro.md",
     "start": "npm run _init && docusaurus start",
     "build": "npm run _init && docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
-    "serve": "docusaurus serve",
+    "serve": "npm run _init && docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
     "typecheck": "tsc"
diff --git a/docs/src/intro_header.txt b/docs/src/intro_header.txt
new file mode 100644
index 0000000000..483a5e7dba
--- /dev/null
+++ b/docs/src/intro_header.txt
@@ -0,0 +1,4 @@
+---
+hide_title: true
+sidebar_position: 1
+---

From 527f1d20ad25ed98216feb8c768be7b7ee8a5c8e Mon Sep 17 00:00:00 2001
From: ka-weihe <k@weihe.dk>
Date: Tue, 18 Jun 2024 18:56:56 +0200
Subject: [PATCH 08/34] fix: filters not updating with force update when
 caching is enabled (#29291)

---
 .../nativeFilters/FilterBar/FilterControls/FilterValue.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
index 746693a321..2d85f413c3 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
@@ -175,7 +175,7 @@ const FilterValue: FC<FilterControlProps> = ({
       setIsRefreshing(true);
       getChartDataRequest({
         formData: newFormData,
-        force: false,
+        force: shouldRefresh,
         ownState: filterOwnState,
       })
         .then(({ response, json }) => {

From 725afc3848dd6e109adcaca9ac85ce833fcf080e Mon Sep 17 00:00:00 2001
From: "JUST.in DO IT" <justin.park@airbnb.com>
Date: Tue, 18 Jun 2024 11:45:09 -0700
Subject: [PATCH 09/34] fix(sqllab): invalid empty state on switch tab (#29278)

---
 .../src/SqlLab/components/SqlEditor/index.tsx        | 12 ++++--------
 .../src/SqlLab/components/SqlEditorLeftBar/index.tsx | 12 +-----------
 .../src/SqlLab/reducers/getInitialState.ts           |  1 +
 3 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
index 1650968455..dd22442def 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
@@ -303,7 +303,10 @@ const SqlEditor: FC<Props> = ({
   );
   const [showCreateAsModal, setShowCreateAsModal] = useState(false);
   const [createAs, setCreateAs] = useState('');
-  const [showEmptyState, setShowEmptyState] = useState(false);
+  const showEmptyState = useMemo(
+    () => !database || isEmpty(database),
+    [database],
+  );
 
   const sqlEditorRef = useRef<HTMLDivElement>(null);
   const northPaneRef = useRef<HTMLDivElement>(null);
@@ -562,12 +565,6 @@ const SqlEditor: FC<Props> = ({
     // TODO: Remove useEffectEvent deps once https://github.com/facebook/react/pull/25881 is released
   }, [onBeforeUnload, loadQueryEditor, isActive]);
 
-  useEffect(() => {
-    if (!database || isEmpty(database)) {
-      setShowEmptyState(true);
-    }
-  }, [database]);
-
   useEffect(() => {
     // setup hotkeys
     const hotkeys = getHotkeyConfig();
@@ -911,7 +908,6 @@ const SqlEditor: FC<Props> = ({
               <SqlEditorLeftBar
                 database={database}
                 queryEditorId={queryEditor.id}
-                setEmptyState={bool => setShowEmptyState(bool)}
               />
             </StyledSidebar>
           )}
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index f094035068..c91036a725 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -16,14 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  useEffect,
-  useCallback,
-  useMemo,
-  useState,
-  Dispatch,
-  SetStateAction,
-} from 'react';
+import { useEffect, useCallback, useMemo, useState } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import querystring from 'query-string';
 
@@ -60,7 +53,6 @@ export interface SqlEditorLeftBarProps {
   queryEditorId: string;
   height?: number;
   database?: DatabaseObject;
-  setEmptyState?: Dispatch<SetStateAction<boolean>>;
 }
 
 const StyledScrollbarContainer = styled.div`
@@ -108,7 +100,6 @@ const SqlEditorLeftBar = ({
   database,
   queryEditorId,
   height = 500,
-  setEmptyState,
 }: SqlEditorLeftBarProps) => {
   const tables = useSelector<SqlLabRootState, Table[]>(
     ({ sqlLab }) =>
@@ -148,7 +139,6 @@ const SqlEditorLeftBar = ({
   }, []);
 
   const onDbChange = ({ id: dbId }: { id: number }) => {
-    setEmptyState?.(false);
     dispatch(queryEditorSetDb(queryEditor, dbId));
   };
 
diff --git a/superset-frontend/src/SqlLab/reducers/getInitialState.ts b/superset-frontend/src/SqlLab/reducers/getInitialState.ts
index 6052daedbd..ad0cbd8033 100644
--- a/superset-frontend/src/SqlLab/reducers/getInitialState.ts
+++ b/superset-frontend/src/SqlLab/reducers/getInitialState.ts
@@ -102,6 +102,7 @@ export default function getInitialState({
         id: id.toString(),
         loaded: false,
         name: label,
+        dbId: undefined,
       };
     }
     queryEditors = {

From 4537ab6b1a9d786451d52757c3cbae03b72bd5f3 Mon Sep 17 00:00:00 2001
From: "JUST.in DO IT" <justin.park@airbnb.com>
Date: Tue, 18 Jun 2024 14:02:40 -0700
Subject: [PATCH 10/34] fix(sqllab): excessive API calls for schemas (#29279)

---
 .../src/hooks/apiResources/catalogs.ts        | 54 +++++--------
 .../src/hooks/apiResources/schemas.test.ts    | 30 +++++---
 .../src/hooks/apiResources/schemas.ts         | 75 ++++++-------------
 3 files changed, 59 insertions(+), 100 deletions(-)

diff --git a/superset-frontend/src/hooks/apiResources/catalogs.ts b/superset-frontend/src/hooks/apiResources/catalogs.ts
index 1e6a97b344..5203797156 100644
--- a/superset-frontend/src/hooks/apiResources/catalogs.ts
+++ b/superset-frontend/src/hooks/apiResources/catalogs.ts
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect } from 'react';
 import useEffectEvent from 'src/hooks/useEffectEvent';
 import { api, JsonResponse } from './queryApi';
 
@@ -68,7 +68,6 @@ export const {
 export const EMPTY_CATALOGS = [] as CatalogOption[];
 
 export function useCatalogs(options: Params) {
-  const isMountedRef = useRef(false);
   const { dbId, onSuccess, onError } = options || {};
   const [trigger] = useLazyCatalogsQuery();
   const result = useCatalogsQuery(
@@ -78,47 +77,28 @@ export function useCatalogs(options: Params) {
     },
   );
 
-  const handleOnSuccess = useEffectEvent(
-    (data: CatalogOption[], isRefetched: boolean) => {
-      onSuccess?.(data, isRefetched);
+  const fetchData = useEffectEvent(
+    (dbId: FetchCatalogsQueryParams['dbId'], forceRefresh = false) => {
+      if (dbId && (!result.currentData || forceRefresh)) {
+        trigger({ dbId, forceRefresh }).then(({ isSuccess, isError, data }) => {
+          if (isSuccess) {
+            onSuccess?.(data || EMPTY_CATALOGS, forceRefresh);
+          }
+          if (isError) {
+            onError?.();
+          }
+        });
+      }
     },
   );
 
-  const handleOnError = useEffectEvent(() => {
-    onError?.();
-  });
-
   const refetch = useCallback(() => {
-    if (dbId) {
-      trigger({ dbId, forceRefresh: true }).then(
-        ({ isSuccess, isError, data }) => {
-          if (isSuccess) {
-            handleOnSuccess(data || EMPTY_CATALOGS, true);
-          }
-          if (isError) {
-            handleOnError();
-          }
-        },
-      );
-    }
-  }, [dbId, handleOnError, handleOnSuccess, trigger]);
+    fetchData(dbId, true);
+  }, [dbId, fetchData]);
 
   useEffect(() => {
-    if (isMountedRef.current) {
-      const { requestId, isSuccess, isError, isFetching, data, originalArgs } =
-        result;
-      if (!originalArgs?.forceRefresh && requestId && !isFetching) {
-        if (isSuccess) {
-          handleOnSuccess(data || EMPTY_CATALOGS, false);
-        }
-        if (isError) {
-          handleOnError();
-        }
-      }
-    } else {
-      isMountedRef.current = true;
-    }
-  }, [result, handleOnSuccess, handleOnError]);
+    fetchData(dbId, false);
+  }, [dbId, fetchData]);
 
   return {
     ...result,
diff --git a/superset-frontend/src/hooks/apiResources/schemas.test.ts b/superset-frontend/src/hooks/apiResources/schemas.test.ts
index 78df4f850e..e63a3b97af 100644
--- a/superset-frontend/src/hooks/apiResources/schemas.test.ts
+++ b/superset-frontend/src/hooks/apiResources/schemas.test.ts
@@ -88,7 +88,7 @@ describe('useSchemas hook', () => {
         })}`,
       ).length,
     ).toBe(1);
-    expect(onSuccess).toHaveBeenCalledTimes(2);
+    expect(onSuccess).toHaveBeenCalledTimes(1);
     act(() => {
       result.current.refetch();
     });
@@ -100,7 +100,7 @@ describe('useSchemas hook', () => {
         })}`,
       ).length,
     ).toBe(1);
-    expect(onSuccess).toHaveBeenCalledTimes(3);
+    expect(onSuccess).toHaveBeenCalledTimes(2);
     expect(result.current.data).toEqual(expectedResult);
   });
 
@@ -149,28 +149,36 @@ describe('useSchemas hook', () => {
       },
     );
 
-    await waitFor(() => expect(result.current.data).toEqual(expectedResult));
+    await waitFor(() =>
+      expect(result.current.currentData).toEqual(expectedResult),
+    );
     expect(fetchMock.calls(schemaApiRoute).length).toBe(1);
-    expect(onSuccess).toHaveBeenCalledTimes(2);
+    expect(onSuccess).toHaveBeenCalledTimes(1);
 
     rerender({ dbId: 'db2' });
-    await waitFor(() => expect(result.current.data).toEqual(expectedResult2));
+    await waitFor(() =>
+      expect(result.current.currentData).toEqual(expectedResult2),
+    );
     expect(fetchMock.calls(schemaApiRoute).length).toBe(2);
-    expect(onSuccess).toHaveBeenCalledTimes(4);
+    expect(onSuccess).toHaveBeenCalledTimes(2);
 
     rerender({ dbId: expectDbId });
-    await waitFor(() => expect(result.current.data).toEqual(expectedResult));
+    await waitFor(() =>
+      expect(result.current.currentData).toEqual(expectedResult),
+    );
     expect(fetchMock.calls(schemaApiRoute).length).toBe(2);
-    expect(onSuccess).toHaveBeenCalledTimes(5);
+    expect(onSuccess).toHaveBeenCalledTimes(2);
 
     // clean up cache
     act(() => {
       store.dispatch(api.util.invalidateTags(['Schemas']));
     });
 
-    await waitFor(() => expect(fetchMock.calls(schemaApiRoute).length).toBe(3));
+    await waitFor(() => expect(fetchMock.calls(schemaApiRoute).length).toBe(4));
     expect(fetchMock.calls(schemaApiRoute)[2][0]).toContain(expectDbId);
-    await waitFor(() => expect(result.current.data).toEqual(expectedResult));
+    await waitFor(() =>
+      expect(result.current.currentData).toEqual(expectedResult),
+    );
   });
 
   test('returns correct schema list by a catalog', async () => {
@@ -201,7 +209,7 @@ describe('useSchemas hook', () => {
 
     await waitFor(() => expect(fetchMock.calls(schemaApiRoute).length).toBe(1));
     expect(result.current.data).toEqual(expectedResult3);
-    expect(onSuccess).toHaveBeenCalledTimes(2);
+    expect(onSuccess).toHaveBeenCalledTimes(1);
 
     rerender({ dbId, catalog: 'catalog2' });
     await waitFor(() => expect(fetchMock.calls(schemaApiRoute).length).toBe(2));
diff --git a/superset-frontend/src/hooks/apiResources/schemas.ts b/superset-frontend/src/hooks/apiResources/schemas.ts
index 51e8528ce5..e60e62a7fb 100644
--- a/superset-frontend/src/hooks/apiResources/schemas.ts
+++ b/superset-frontend/src/hooks/apiResources/schemas.ts
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect } from 'react';
 import useEffectEvent from 'src/hooks/useEffectEvent';
 import { api, JsonResponse } from './queryApi';
 
@@ -72,7 +72,6 @@ export const {
 export const EMPTY_SCHEMAS = [] as SchemaOption[];
 
 export function useSchemas(options: Params) {
-  const isMountedRef = useRef(false);
   const { dbId, catalog, onSuccess, onError } = options || {};
   const [trigger] = useLazySchemasQuery();
   const result = useSchemasQuery(
@@ -82,62 +81,34 @@ export function useSchemas(options: Params) {
     },
   );
 
-  const handleOnSuccess = useEffectEvent(
-    (data: SchemaOption[], isRefetched: boolean) => {
-      onSuccess?.(data, isRefetched);
+  const fetchData = useEffectEvent(
+    (
+      dbId: FetchSchemasQueryParams['dbId'],
+      catalog: FetchSchemasQueryParams['catalog'],
+      forceRefresh = false,
+    ) => {
+      if (dbId && (!result.currentData || forceRefresh)) {
+        trigger({ dbId, catalog, forceRefresh }).then(
+          ({ isSuccess, isError, data }) => {
+            if (isSuccess) {
+              onSuccess?.(data || EMPTY_SCHEMAS, forceRefresh);
+            }
+            if (isError) {
+              onError?.();
+            }
+          },
+        );
+      }
     },
   );
 
-  const handleOnError = useEffectEvent(() => {
-    onError?.();
-  });
-
   useEffect(() => {
-    if (dbId) {
-      trigger({ dbId, catalog, forceRefresh: false }).then(
-        ({ isSuccess, isError, data }) => {
-          if (isSuccess) {
-            handleOnSuccess(data || EMPTY_SCHEMAS, true);
-          }
-          if (isError) {
-            handleOnError();
-          }
-        },
-      );
-    }
-  }, [dbId, catalog, handleOnError, handleOnSuccess, trigger]);
+    fetchData(dbId, catalog, false);
+  }, [dbId, catalog, fetchData]);
 
   const refetch = useCallback(() => {
-    if (dbId) {
-      trigger({ dbId, catalog, forceRefresh: true }).then(
-        ({ isSuccess, isError, data }) => {
-          if (isSuccess) {
-            handleOnSuccess(data || EMPTY_SCHEMAS, true);
-          }
-          if (isError) {
-            handleOnError();
-          }
-        },
-      );
-    }
-  }, [dbId, catalog, handleOnError, handleOnSuccess, trigger]);
-
-  useEffect(() => {
-    if (isMountedRef.current) {
-      const { requestId, isSuccess, isError, isFetching, data, originalArgs } =
-        result;
-      if (!originalArgs?.forceRefresh && requestId && !isFetching) {
-        if (isSuccess) {
-          handleOnSuccess(data || EMPTY_SCHEMAS, false);
-        }
-        if (isError) {
-          handleOnError();
-        }
-      }
-    } else {
-      isMountedRef.current = true;
-    }
-  }, [catalog, result, handleOnSuccess, handleOnError]);
+    fetchData(dbId, catalog, true);
+  }, [dbId, catalog, fetchData]);
 
   return {
     ...result,

From 796726376a6d2c221f9438bf1eb5473c0b9c797b Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Tue, 18 Jun 2024 14:46:40 -0700
Subject: [PATCH 11/34] chore: make flask-talisman work with test config
 (#29277)

---
 docker/pythonpath_dev/superset_config.py        | 1 -
 scripts/tests/run.sh                            | 3 +++
 superset/config.py                              | 2 +-
 superset/initialization/__init__.py             | 2 +-
 tests/integration_tests/superset_test_config.py | 1 -
 5 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/docker/pythonpath_dev/superset_config.py b/docker/pythonpath_dev/superset_config.py
index 69477d56e7..c78a504141 100644
--- a/docker/pythonpath_dev/superset_config.py
+++ b/docker/pythonpath_dev/superset_config.py
@@ -97,7 +97,6 @@ ALERT_REPORTS_NOTIFICATION_DRY_RUN = True
 WEBDRIVER_BASEURL = "http://superset:8088/"  # When using docker compose baseurl should be http://superset_app:8088/
 # The base URL for the email report hyperlinks.
 WEBDRIVER_BASEURL_USER_FRIENDLY = WEBDRIVER_BASEURL
-
 SQLLAB_CTAS_NO_LIMIT = True
 
 #
diff --git a/scripts/tests/run.sh b/scripts/tests/run.sh
index d77adc08e0..bf8431caeb 100755
--- a/scripts/tests/run.sh
+++ b/scripts/tests/run.sh
@@ -61,7 +61,10 @@ function test_init() {
 DB_NAME="test"
 DB_USER="superset"
 DB_PASSWORD="superset"
+
+# Pointing to use the test database in local docker-compose setup
 export SUPERSET__SQLALCHEMY_DATABASE_URI=${SUPERSET__SQLALCHEMY_DATABASE_URI:-postgresql+psycopg2://"${DB_USER}":"${DB_PASSWORD}"@localhost/"${DB_NAME}"}
+
 export SUPERSET_CONFIG=${SUPERSET_CONFIG:-tests.integration_tests.superset_test_config}
 RUN_INIT=1
 RUN_RESET_DB=1
diff --git a/superset/config.py b/superset/config.py
index 3dfeb3ad47..d3a4694a03 100644
--- a/superset/config.py
+++ b/superset/config.py
@@ -261,7 +261,7 @@ WTF_CSRF_EXEMPT_LIST = [
 ]
 
 # Whether to run the web server in debug mode or not
-DEBUG = os.environ.get("FLASK_DEBUG")
+DEBUG = parse_boolean_string(os.environ.get("FLASK_DEBUG"))
 FLASK_USE_RELOAD = True
 
 # Enable profiling of Python calls. Turn this on and append ``?_instrument=1``
diff --git a/superset/initialization/__init__.py b/superset/initialization/__init__.py
index 65e518b7c9..a98b8c9489 100644
--- a/superset/initialization/__init__.py
+++ b/superset/initialization/__init__.py
@@ -586,7 +586,7 @@ class SupersetAppInitializer:  # pylint: disable=too-many-public-methods
         talisman_enabled = self.config["TALISMAN_ENABLED"]
         talisman_config = (
             self.config["TALISMAN_DEV_CONFIG"]
-            if self.superset_app.debug
+            if self.superset_app.debug or self.config["DEBUG"]
             else self.config["TALISMAN_CONFIG"]
         )
         csp_warning = self.config["CONTENT_SECURITY_POLICY_WARNING"]
diff --git a/tests/integration_tests/superset_test_config.py b/tests/integration_tests/superset_test_config.py
index e0a1123950..a23472b018 100644
--- a/tests/integration_tests/superset_test_config.py
+++ b/tests/integration_tests/superset_test_config.py
@@ -40,7 +40,6 @@ SQLALCHEMY_DATABASE_URI = "sqlite:///" + os.path.join(  # noqa: F405
     DATA_DIR,
     "unittests.integration_tests.db",  # noqa: F405
 )
-DEBUG = False
 SILENCE_FAB = False
 # Allowing SQLALCHEMY_DATABASE_URI and SQLALCHEMY_EXAMPLES_URI to be defined as an env vars for
 # continuous integration

From 9f70697046599dadac75713fea0f1e586512c6bb Mon Sep 17 00:00:00 2001
From: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Date: Wed, 19 Jun 2024 01:33:47 +0300
Subject: [PATCH 12/34] chore: use json codec for key value lock (#29285)

---
 superset/utils/lock.py               | 4 ++--
 tests/unit_tests/utils/lock_tests.py | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/superset/utils/lock.py b/superset/utils/lock.py
index 50bfb6d955..d3c55d459c 100644
--- a/superset/utils/lock.py
+++ b/superset/utils/lock.py
@@ -26,7 +26,7 @@ from typing import Any, cast, TypeVar, Union
 
 from superset.exceptions import CreateKeyValueDistributedLockFailedException
 from superset.key_value.exceptions import KeyValueCreateFailedError
-from superset.key_value.types import KeyValueResource, PickleKeyValueCodec
+from superset.key_value.types import JsonKeyValueCodec, KeyValueResource
 from superset.utils import json
 
 LOCK_EXPIRATION = timedelta(seconds=30)
@@ -83,7 +83,7 @@ def KeyValueDistributedLock(  # pylint: disable=invalid-name
         DeleteExpiredKeyValueCommand(resource=KeyValueResource.LOCK).run()
         CreateKeyValueCommand(
             resource=KeyValueResource.LOCK,
-            codec=PickleKeyValueCodec(),
+            codec=JsonKeyValueCodec(),
             key=key,
             value=True,
             expires_on=datetime.now() + LOCK_EXPIRATION,
diff --git a/tests/unit_tests/utils/lock_tests.py b/tests/unit_tests/utils/lock_tests.py
index 270d082366..44eccebc30 100644
--- a/tests/unit_tests/utils/lock_tests.py
+++ b/tests/unit_tests/utils/lock_tests.py
@@ -42,7 +42,7 @@ def test_KeyValueDistributedLock_happy_path(mocker: MockerFixture) -> None:
     DeleteExpiredKeyValueCommand = mocker.patch(
         "superset.commands.key_value.delete_expired.DeleteExpiredKeyValueCommand"
     )
-    PickleKeyValueCodec = mocker.patch("superset.utils.lock.PickleKeyValueCodec")
+    JsonKeyValueCodec = mocker.patch("superset.utils.lock.JsonKeyValueCodec")
 
     with freeze_time("2024-01-01"):
         with KeyValueDistributedLock("ns", a=1, b=2) as key:
@@ -51,7 +51,7 @@ def test_KeyValueDistributedLock_happy_path(mocker: MockerFixture) -> None:
             )
             CreateKeyValueCommand.assert_called_with(
                 resource=KeyValueResource.LOCK,
-                codec=PickleKeyValueCodec(),
+                codec=JsonKeyValueCodec(),
                 key=key,
                 value=True,
                 expires_on=datetime(2024, 1, 1, 0, 0, 30),

From 188b5f47814c89fc0aafd9927fa0801e999ed5ff Mon Sep 17 00:00:00 2001
From: BoMBaY <bay_itipong@hotmail.com>
Date: Wed, 19 Jun 2024 16:24:07 +0700
Subject: [PATCH 13/34] docs: add Agoda to users list (#29300)

---
 RESOURCES/INTHEWILD.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/RESOURCES/INTHEWILD.md b/RESOURCES/INTHEWILD.md
index c46f2f26e5..e5a2293098 100644
--- a/RESOURCES/INTHEWILD.md
+++ b/RESOURCES/INTHEWILD.md
@@ -171,6 +171,7 @@ Join our growing community!
 - [RIS3 Strategy of CZ, MIT CR](https://www.ris3.cz/) [@RIS3CZ]
 
 ### Travel
+- [Agoda](https://www.agoda.com/) [@lostseaway, @maiake, @obombayo]
 - [Skyscanner](https://www.skyscanner.net/) [@cleslie, @stanhoucke]
 
 ### Others

From 36b1535199222456d87b9317ac3654fcdad5f6f5 Mon Sep 17 00:00:00 2001
From: Evan Rusackas <evan@preset.io>
Date: Wed, 19 Jun 2024 08:40:47 -0600
Subject: [PATCH 14/34] chore(e2e): using updated repo secret, new Cypress
 project id (#29296)

---
 .github/workflows/superset-e2e.yml               | 2 +-
 superset-frontend/cypress-base/cypress.config.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/superset-e2e.yml b/.github/workflows/superset-e2e.yml
index 51e6548712..d8a10f949f 100644
--- a/.github/workflows/superset-e2e.yml
+++ b/.github/workflows/superset-e2e.yml
@@ -130,7 +130,7 @@ jobs:
           CYPRESS_BROWSER: ${{ matrix.browser }}
           PARALLEL_ID: ${{ matrix.parallel_id }}
           PARALLELISM: 6
-          CYPRESS_KEY: YjljODE2MzAtODcwOC00NTA3LWE4NmMtMTU3YmFmMjIzOTRhCg==
+          CYPRESS_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
         with:
           run: cypress-run-all ${{ env.USE_DASHBOARD }}
       - name: Upload Artifacts
diff --git a/superset-frontend/cypress-base/cypress.config.ts b/superset-frontend/cypress-base/cypress.config.ts
index d2be99af3c..4d31f4d098 100644
--- a/superset-frontend/cypress-base/cypress.config.ts
+++ b/superset-frontend/cypress-base/cypress.config.ts
@@ -31,7 +31,7 @@ export default eyesPlugin(
     videoUploadOnPasses: false,
     viewportWidth: 1280,
     viewportHeight: 1024,
-    projectId: 'ukwxzo',
+    projectId: 'ud5x2f',
     retries: {
       runMode: 2,
       openMode: 0,

From 99fc04b9a6e93fc1234bcc1d77251b5512ab0fad Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 19 Jun 2024 11:21:58 -0600
Subject: [PATCH 15/34] build(deps-dev): bump ws from 7.5.7 to 7.5.10 in
 /superset-embedded-sdk (#29308)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 superset-embedded-sdk/package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/superset-embedded-sdk/package-lock.json b/superset-embedded-sdk/package-lock.json
index 089550ecbb..70106bdb1c 100644
--- a/superset-embedded-sdk/package-lock.json
+++ b/superset-embedded-sdk/package-lock.json
@@ -8169,9 +8169,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "7.5.7",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz",
-      "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==",
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
       "dev": true,
       "engines": {
         "node": ">=8.3.0"
@@ -14349,9 +14349,9 @@
       }
     },
     "ws": {
-      "version": "7.5.7",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz",
-      "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==",
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
       "dev": true,
       "requires": {}
     },

From 172ddb47d54749db781ea6443bd29a2d650efb99 Mon Sep 17 00:00:00 2001
From: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Date: Thu, 20 Jun 2024 14:59:32 +0300
Subject: [PATCH 16/34] fix(metastore-cache): prune before add (#29301)

---
 superset/extensions/metastore_cache.py          |  2 +-
 .../extensions/metastore_cache_test.py          | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/superset/extensions/metastore_cache.py b/superset/extensions/metastore_cache.py
index 435c38ced8..1c89e84597 100644
--- a/superset/extensions/metastore_cache.py
+++ b/superset/extensions/metastore_cache.py
@@ -101,6 +101,7 @@ class SupersetMetastoreCache(BaseCache):
         from superset.commands.key_value.create import CreateKeyValueCommand
 
         try:
+            self._prune()
             CreateKeyValueCommand(
                 resource=RESOURCE,
                 value=value,
@@ -108,7 +109,6 @@ class SupersetMetastoreCache(BaseCache):
                 key=self.get_key(key),
                 expires_on=self._get_expiry(timeout),
             ).run()
-            self._prune()
             return True
         except KeyValueCreateFailedError:
             return False
diff --git a/tests/integration_tests/extensions/metastore_cache_test.py b/tests/integration_tests/extensions/metastore_cache_test.py
index 2909e978f1..c69340a7a2 100644
--- a/tests/integration_tests/extensions/metastore_cache_test.py
+++ b/tests/integration_tests/extensions/metastore_cache_test.py
@@ -77,16 +77,29 @@ def test_caching_flow(app_context: AppContext, cache: SupersetMetastoreCache) ->
 def test_expiry(app_context: AppContext, cache: SupersetMetastoreCache) -> None:
     delta = timedelta(days=90)
     dttm = datetime(2022, 3, 18, 0, 0, 0)
+
+    # 1. initialize cached values, ensure they're found
     with freeze_time(dttm):
-        cache.set(FIRST_KEY, FIRST_KEY_INITIAL_VALUE, int(delta.total_seconds()))
+        assert (
+            cache.set(FIRST_KEY, FIRST_KEY_INITIAL_VALUE, int(delta.total_seconds()))
+            is True
+        )
         assert cache.get(FIRST_KEY) == FIRST_KEY_INITIAL_VALUE
+
+    # 2. ensure cached values are available a moment before expiration
     with freeze_time(dttm + delta - timedelta(seconds=1)):
-        assert cache.has(FIRST_KEY)
+        assert cache.has(FIRST_KEY) is True
         assert cache.get(FIRST_KEY) == FIRST_KEY_INITIAL_VALUE
+
+    # 3. ensure cached entries expire
     with freeze_time(dttm + delta + timedelta(seconds=1)):
         assert cache.has(FIRST_KEY) is False
         assert cache.get(FIRST_KEY) is None
 
+        # adding a value with the same key as an expired entry works
+        assert cache.add(FIRST_KEY, SECOND_VALUE, int(delta.total_seconds())) is True
+        assert cache.get(FIRST_KEY) == SECOND_VALUE
+
 
 @pytest.mark.parametrize(
     "input_,codec,expected_result",

From 03969d5f909d596188a719b52d1e2d826a0beda4 Mon Sep 17 00:00:00 2001
From: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Date: Thu, 20 Jun 2024 15:58:25 +0300
Subject: [PATCH 17/34] chore(distributed-lock): refactor tests (#29302)

---
 superset/commands/key_value/get.py   |  3 +-
 superset/key_value/models.py         |  5 ++
 superset/utils/lock.py               |  6 +-
 tests/unit_tests/utils/lock_tests.py | 92 +++++++++++++++-------------
 4 files changed, 61 insertions(+), 45 deletions(-)

diff --git a/superset/commands/key_value/get.py b/superset/commands/key_value/get.py
index 8a7a250f1c..93550ee840 100644
--- a/superset/commands/key_value/get.py
+++ b/superset/commands/key_value/get.py
@@ -16,7 +16,6 @@
 # under the License.
 
 import logging
-from datetime import datetime
 from typing import Any, Optional, Union
 from uuid import UUID
 
@@ -67,6 +66,6 @@ class GetKeyValueCommand(BaseCommand):
     def get(self) -> Optional[Any]:
         filter_ = get_filter(self.resource, self.key)
         entry = db.session.query(KeyValueEntry).filter_by(**filter_).first()
-        if entry and (entry.expires_on is None or entry.expires_on > datetime.now()):
+        if entry and not entry.is_expired():
             return self.codec.decode(entry.value)
         return None
diff --git a/superset/key_value/models.py b/superset/key_value/models.py
index 7a3f5e52a2..2c3c0a21a5 100644
--- a/superset/key_value/models.py
+++ b/superset/key_value/models.py
@@ -14,6 +14,8 @@
 # KIND, either express or implied.  See the License for the
 # specific language governing permissions and limitations
 # under the License.
+from datetime import datetime
+
 from flask_appbuilder import Model
 from sqlalchemy import Column, DateTime, ForeignKey, Integer, LargeBinary, String
 from sqlalchemy.orm import relationship
@@ -38,3 +40,6 @@ class KeyValueEntry(AuditMixinNullable, ImportExportMixin, Model):
     changed_by_fk = Column(Integer, ForeignKey("ab_user.id"), nullable=True)
     created_by = relationship(security_manager.user_model, foreign_keys=[created_by_fk])
     changed_by = relationship(security_manager.user_model, foreign_keys=[changed_by_fk])
+
+    def is_expired(self) -> bool:
+        return self.expires_on is not None and self.expires_on <= datetime.now()
diff --git a/superset/utils/lock.py b/superset/utils/lock.py
index d3c55d459c..ae982e974a 100644
--- a/superset/utils/lock.py
+++ b/superset/utils/lock.py
@@ -53,6 +53,10 @@ def serialize(params: dict[str, Any]) -> str:
     return json.dumps(params)
 
 
+def get_key(namespace: str, **kwargs: Any) -> uuid.UUID:
+    return uuid.uuid5(uuid.uuid5(uuid.NAMESPACE_DNS, namespace), serialize(kwargs))
+
+
 @contextmanager
 def KeyValueDistributedLock(  # pylint: disable=invalid-name
     namespace: str,
@@ -77,7 +81,7 @@ def KeyValueDistributedLock(  # pylint: disable=invalid-name
     from superset.commands.key_value.delete import DeleteKeyValueCommand
     from superset.commands.key_value.delete_expired import DeleteExpiredKeyValueCommand
 
-    key = uuid.uuid5(uuid.uuid5(uuid.NAMESPACE_DNS, namespace), serialize(kwargs))
+    key = get_key(namespace, **kwargs)
     logger.debug("Acquiring lock on namespace %s for key %s", namespace, key)
     try:
         DeleteExpiredKeyValueCommand(resource=KeyValueResource.LOCK).run()
diff --git a/tests/unit_tests/utils/lock_tests.py b/tests/unit_tests/utils/lock_tests.py
index 44eccebc30..aa231bb0cf 100644
--- a/tests/unit_tests/utils/lock_tests.py
+++ b/tests/unit_tests/utils/lock_tests.py
@@ -17,63 +17,71 @@
 
 # pylint: disable=invalid-name
 
-from datetime import datetime
+from typing import Any
+from uuid import UUID
 
 import pytest
 from freezegun import freeze_time
-from pytest_mock import MockerFixture
+from sqlalchemy.orm import Session, sessionmaker
 
 from superset.exceptions import CreateKeyValueDistributedLockFailedException
-from superset.key_value.exceptions import KeyValueCreateFailedError
-from superset.key_value.types import KeyValueResource
-from superset.utils.lock import KeyValueDistributedLock
+from superset.key_value.types import JsonKeyValueCodec
+from superset.utils.lock import get_key, KeyValueDistributedLock
+
+MAIN_KEY = get_key("ns", a=1, b=2)
+OTHER_KEY = get_key("ns2", a=1, b=2)
 
 
-def test_KeyValueDistributedLock_happy_path(mocker: MockerFixture) -> None:
+def _get_lock(key: UUID, session: Session) -> Any:
+    from superset.key_value.models import KeyValueEntry
+
+    entry = session.query(KeyValueEntry).filter_by(uuid=key).first()
+    if entry is None or entry.is_expired():
+        return None
+
+    return JsonKeyValueCodec().decode(entry.value)
+
+
+def _get_other_session() -> Session:
+    # This session is used to simulate what another worker will find in the metastore
+    # during the locking process.
+    from superset import db
+
+    bind = db.session.get_bind()
+    SessionMaker = sessionmaker(bind=bind)
+    return SessionMaker()
+
+
+def test_key_value_distributed_lock_happy_path() -> None:
     """
-    Test successfully acquiring the global auth lock.
+    Test successfully acquiring and returning the distributed lock.
     """
-    CreateKeyValueCommand = mocker.patch(
-        "superset.commands.key_value.create.CreateKeyValueCommand"
-    )
-    DeleteKeyValueCommand = mocker.patch(
-        "superset.commands.key_value.delete.DeleteKeyValueCommand"
-    )
-    DeleteExpiredKeyValueCommand = mocker.patch(
-        "superset.commands.key_value.delete_expired.DeleteExpiredKeyValueCommand"
-    )
-    JsonKeyValueCodec = mocker.patch("superset.utils.lock.JsonKeyValueCodec")
+    session = _get_other_session()
 
-    with freeze_time("2024-01-01"):
+    with freeze_time("2021-01-01"):
+        assert _get_lock(MAIN_KEY, session) is None
         with KeyValueDistributedLock("ns", a=1, b=2) as key:
-            DeleteExpiredKeyValueCommand.assert_called_with(
-                resource=KeyValueResource.LOCK,
-            )
-            CreateKeyValueCommand.assert_called_with(
-                resource=KeyValueResource.LOCK,
-                codec=JsonKeyValueCodec(),
-                key=key,
-                value=True,
-                expires_on=datetime(2024, 1, 1, 0, 0, 30),
-            )
-            DeleteKeyValueCommand.assert_not_called()
+            assert key == MAIN_KEY
+            assert _get_lock(key, session) is True
+            assert _get_lock(OTHER_KEY, session) is None
+            with pytest.raises(CreateKeyValueDistributedLockFailedException):
+                with KeyValueDistributedLock("ns", a=1, b=2):
+                    pass
 
-        DeleteKeyValueCommand.assert_called_with(
-            resource=KeyValueResource.LOCK,
-            key=key,
-        )
+        assert _get_lock(MAIN_KEY, session) is None
 
 
-def test_KeyValueDistributedLock_no_lock(mocker: MockerFixture) -> None:
+def test_key_value_distributed_lock_expired() -> None:
     """
-    Test unsuccessfully acquiring the global auth lock.
+    Test expiration of the distributed lock
     """
-    mocker.patch(
-        "superset.commands.key_value.create.CreateKeyValueCommand",
-        side_effect=KeyValueCreateFailedError(),
-    )
+    session = _get_other_session()
 
-    with pytest.raises(CreateKeyValueDistributedLockFailedException) as excinfo:
+    with freeze_time("2021-01-01T"):
+        assert _get_lock(MAIN_KEY, session) is None
         with KeyValueDistributedLock("ns", a=1, b=2):
-            pass
-    assert str(excinfo.value) == "Error acquiring lock"
+            assert _get_lock(MAIN_KEY, session) is True
+            with freeze_time("2022-01-01T"):
+                assert _get_lock(MAIN_KEY, session) is None
+
+        assert _get_lock(MAIN_KEY, session) is None

From 1770f8b783863b205a45e4105a830a5b93f9af13 Mon Sep 17 00:00:00 2001
From: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Date: Thu, 20 Jun 2024 16:19:41 +0300
Subject: [PATCH 18/34] fix(key-value): use flush instead of commit (#29286)

---
 superset/commands/dashboard/permalink/create.py           | 2 ++
 superset/commands/explore/permalink/create.py             | 2 ++
 superset/commands/key_value/create.py                     | 2 +-
 superset/commands/key_value/delete.py                     | 2 +-
 superset/commands/key_value/delete_expired.py             | 2 +-
 superset/commands/key_value/update.py                     | 2 +-
 superset/commands/key_value/upsert.py                     | 2 +-
 superset/extensions/metastore_cache.py                    | 7 ++++++-
 superset/key_value/shared_entries.py                      | 2 ++
 superset/utils/lock.py                                    | 3 +++
 tests/integration_tests/key_value/commands/delete_test.py | 5 +++--
 tests/integration_tests/key_value/commands/fixtures.py    | 2 +-
 tests/integration_tests/key_value/commands/get_test.py    | 4 ++--
 13 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/superset/commands/dashboard/permalink/create.py b/superset/commands/dashboard/permalink/create.py
index 3387d432d5..76b7b8e834 100644
--- a/superset/commands/dashboard/permalink/create.py
+++ b/superset/commands/dashboard/permalink/create.py
@@ -18,6 +18,7 @@ import logging
 
 from sqlalchemy.exc import SQLAlchemyError
 
+from superset import db
 from superset.commands.dashboard.permalink.base import BaseDashboardPermalinkCommand
 from superset.commands.key_value.upsert import UpsertKeyValueCommand
 from superset.daos.dashboard import DashboardDAO
@@ -62,6 +63,7 @@ class CreateDashboardPermalinkCommand(BaseDashboardPermalinkCommand):
                 codec=self.codec,
             ).run()
             assert key.id  # for type checks
+            db.session.commit()
             return encode_permalink_key(key=key.id, salt=self.salt)
         except KeyValueCodecEncodeException as ex:
             raise DashboardPermalinkCreateFailedError(str(ex)) from ex
diff --git a/superset/commands/explore/permalink/create.py b/superset/commands/explore/permalink/create.py
index befb1d5a47..731e0b5ce8 100644
--- a/superset/commands/explore/permalink/create.py
+++ b/superset/commands/explore/permalink/create.py
@@ -19,6 +19,7 @@ from typing import Any, Optional
 
 from sqlalchemy.exc import SQLAlchemyError
 
+from superset import db
 from superset.commands.explore.permalink.base import BaseExplorePermalinkCommand
 from superset.commands.key_value.create import CreateKeyValueCommand
 from superset.explore.permalink.exceptions import ExplorePermalinkCreateFailedError
@@ -58,6 +59,7 @@ class CreateExplorePermalinkCommand(BaseExplorePermalinkCommand):
             key = command.run()
             if key.id is None:
                 raise ExplorePermalinkCreateFailedError("Unexpected missing key id")
+            db.session.commit()
             return encode_permalink_key(key=key.id, salt=self.salt)
         except KeyValueCodecEncodeException as ex:
             raise ExplorePermalinkCreateFailedError(str(ex)) from ex
diff --git a/superset/commands/key_value/create.py b/superset/commands/key_value/create.py
index a39607b588..7308321e44 100644
--- a/superset/commands/key_value/create.py
+++ b/superset/commands/key_value/create.py
@@ -99,5 +99,5 @@ class CreateKeyValueCommand(BaseCommand):
             except ValueError as ex:
                 raise KeyValueCreateFailedError() from ex
         db.session.add(entry)
-        db.session.commit()
+        db.session.flush()
         return Key(id=entry.id, uuid=entry.uuid)
diff --git a/superset/commands/key_value/delete.py b/superset/commands/key_value/delete.py
index 8b9095c09c..37eb7087e6 100644
--- a/superset/commands/key_value/delete.py
+++ b/superset/commands/key_value/delete.py
@@ -59,6 +59,6 @@ class DeleteKeyValueCommand(BaseCommand):
         filter_ = get_filter(self.resource, self.key)
         if entry := db.session.query(KeyValueEntry).filter_by(**filter_).first():
             db.session.delete(entry)
-            db.session.commit()
+            db.session.flush()
             return True
         return False
diff --git a/superset/commands/key_value/delete_expired.py b/superset/commands/key_value/delete_expired.py
index 166a9f6f87..92d45683f2 100644
--- a/superset/commands/key_value/delete_expired.py
+++ b/superset/commands/key_value/delete_expired.py
@@ -62,4 +62,4 @@ class DeleteExpiredKeyValueCommand(BaseCommand):
             )
             .delete()
         )
-        db.session.commit()
+        db.session.flush()
diff --git a/superset/commands/key_value/update.py b/superset/commands/key_value/update.py
index ca940adf60..098c9f860d 100644
--- a/superset/commands/key_value/update.py
+++ b/superset/commands/key_value/update.py
@@ -84,7 +84,7 @@ class UpdateKeyValueCommand(BaseCommand):
             entry.expires_on = self.expires_on
             entry.changed_on = datetime.now()
             entry.changed_by_fk = get_user_id()
-            db.session.commit()
+            db.session.flush()
             return Key(id=entry.id, uuid=entry.uuid)
 
         return None
diff --git a/superset/commands/key_value/upsert.py b/superset/commands/key_value/upsert.py
index 84f02cb9cd..2c985530bf 100644
--- a/superset/commands/key_value/upsert.py
+++ b/superset/commands/key_value/upsert.py
@@ -88,7 +88,7 @@ class UpsertKeyValueCommand(BaseCommand):
             entry.expires_on = self.expires_on
             entry.changed_on = datetime.now()
             entry.changed_by_fk = get_user_id()
-            db.session.commit()
+            db.session.flush()
             return Key(entry.id, entry.uuid)
 
         return CreateKeyValueCommand(
diff --git a/superset/extensions/metastore_cache.py b/superset/extensions/metastore_cache.py
index 1c89e84597..7b4e39677e 100644
--- a/superset/extensions/metastore_cache.py
+++ b/superset/extensions/metastore_cache.py
@@ -22,6 +22,7 @@ from uuid import UUID, uuid3
 from flask import current_app, Flask, has_app_context
 from flask_caching import BaseCache
 
+from superset import db
 from superset.key_value.exceptions import KeyValueCreateFailedError
 from superset.key_value.types import (
     KeyValueCodec,
@@ -94,6 +95,7 @@ class SupersetMetastoreCache(BaseCache):
             codec=self.codec,
             expires_on=self._get_expiry(timeout),
         ).run()
+        db.session.commit()
         return True
 
     def add(self, key: str, value: Any, timeout: Optional[int] = None) -> bool:
@@ -109,6 +111,7 @@ class SupersetMetastoreCache(BaseCache):
                 key=self.get_key(key),
                 expires_on=self._get_expiry(timeout),
             ).run()
+            db.session.commit()
             return True
         except KeyValueCreateFailedError:
             return False
@@ -133,4 +136,6 @@ class SupersetMetastoreCache(BaseCache):
         # pylint: disable=import-outside-toplevel
         from superset.commands.key_value.delete import DeleteKeyValueCommand
 
-        return DeleteKeyValueCommand(resource=RESOURCE, key=self.get_key(key)).run()
+        ret = DeleteKeyValueCommand(resource=RESOURCE, key=self.get_key(key)).run()
+        db.session.commit()
+        return ret
diff --git a/superset/key_value/shared_entries.py b/superset/key_value/shared_entries.py
index 130313157a..f472838d2e 100644
--- a/superset/key_value/shared_entries.py
+++ b/superset/key_value/shared_entries.py
@@ -18,6 +18,7 @@
 from typing import Any, Optional
 from uuid import uuid3
 
+from superset import db
 from superset.key_value.types import JsonKeyValueCodec, KeyValueResource, SharedKey
 from superset.key_value.utils import get_uuid_namespace, random_key
 
@@ -45,6 +46,7 @@ def set_shared_value(key: SharedKey, value: Any) -> None:
         key=uuid_key,
         codec=CODEC,
     ).run()
+    db.session.commit()
 
 
 def get_permalink_salt(key: SharedKey) -> str:
diff --git a/superset/utils/lock.py b/superset/utils/lock.py
index ae982e974a..3cd3c8ead5 100644
--- a/superset/utils/lock.py
+++ b/superset/utils/lock.py
@@ -24,6 +24,7 @@ from contextlib import contextmanager
 from datetime import datetime, timedelta
 from typing import Any, cast, TypeVar, Union
 
+from superset import db
 from superset.exceptions import CreateKeyValueDistributedLockFailedException
 from superset.key_value.exceptions import KeyValueCreateFailedError
 from superset.key_value.types import JsonKeyValueCodec, KeyValueResource
@@ -92,10 +93,12 @@ def KeyValueDistributedLock(  # pylint: disable=invalid-name
             value=True,
             expires_on=datetime.now() + LOCK_EXPIRATION,
         ).run()
+        db.session.commit()
 
         yield key
 
         DeleteKeyValueCommand(resource=KeyValueResource.LOCK, key=key).run()
+        db.session.commit()
         logger.debug("Removed lock on namespace %s for key %s", namespace, key)
     except KeyValueCreateFailedError as ex:
         raise CreateKeyValueDistributedLockFailedException(
diff --git a/tests/integration_tests/key_value/commands/delete_test.py b/tests/integration_tests/key_value/commands/delete_test.py
index ac51fa640b..b45a5d075d 100644
--- a/tests/integration_tests/key_value/commands/delete_test.py
+++ b/tests/integration_tests/key_value/commands/delete_test.py
@@ -49,7 +49,7 @@ def key_value_entry() -> KeyValueEntry:
         value=bytes(json.dumps(JSON_VALUE), encoding="utf-8"),
     )
     db.session.add(entry)
-    db.session.commit()
+    db.session.flush()
     return entry
 
 
@@ -61,6 +61,7 @@ def test_delete_id_entry(
     from superset.commands.key_value.delete import DeleteKeyValueCommand
 
     assert DeleteKeyValueCommand(resource=RESOURCE, key=ID_KEY).run() is True
+    db.session.commit()
 
 
 def test_delete_uuid_entry(
@@ -71,12 +72,12 @@ def test_delete_uuid_entry(
     from superset.commands.key_value.delete import DeleteKeyValueCommand
 
     assert DeleteKeyValueCommand(resource=RESOURCE, key=UUID_KEY).run() is True
+    db.session.commit()
 
 
 def test_delete_entry_missing(
     app_context: AppContext,
     admin: User,  # noqa: F811
-    key_value_entry: KeyValueEntry,
 ) -> None:
     from superset.commands.key_value.delete import DeleteKeyValueCommand
 
diff --git a/tests/integration_tests/key_value/commands/fixtures.py b/tests/integration_tests/key_value/commands/fixtures.py
index c0262124b6..74bf809301 100644
--- a/tests/integration_tests/key_value/commands/fixtures.py
+++ b/tests/integration_tests/key_value/commands/fixtures.py
@@ -56,7 +56,7 @@ def key_value_entry() -> Generator[KeyValueEntry, None, None]:
         value=bytes(json.dumps(JSON_VALUE), encoding="utf-8"),
     )
     db.session.add(entry)
-    db.session.commit()
+    db.session.flush()
     yield entry
     db.session.delete(entry)
     db.session.commit()
diff --git a/tests/integration_tests/key_value/commands/get_test.py b/tests/integration_tests/key_value/commands/get_test.py
index 8ea4ccd87d..131b615b7c 100644
--- a/tests/integration_tests/key_value/commands/get_test.py
+++ b/tests/integration_tests/key_value/commands/get_test.py
@@ -76,7 +76,7 @@ def test_get_expired_entry(app_context: AppContext) -> None:
         expires_on=datetime.now() - timedelta(days=1),
     )
     db.session.add(entry)
-    db.session.commit()
+    db.session.flush()
     value = GetKeyValueCommand(resource=RESOURCE, key=ID_KEY, codec=JSON_CODEC).run()
     assert value is None
     db.session.delete(entry)
@@ -96,7 +96,7 @@ def test_get_future_expiring_entry(app_context: AppContext) -> None:
         expires_on=datetime.now() + timedelta(days=1),
     )
     db.session.add(entry)
-    db.session.commit()
+    db.session.flush()
     value = GetKeyValueCommand(resource=RESOURCE, key=id_, codec=JSON_CODEC).run()
     assert value == JSON_VALUE
     db.session.delete(entry)

From 313ee596f5435894f857d72be7269d5070c8c964 Mon Sep 17 00:00:00 2001
From: Geido <60598000+geido@users.noreply.github.com>
Date: Thu, 20 Jun 2024 15:30:11 +0200
Subject: [PATCH 19/34] fix(Dashboard): Color inconsistency on refreshes and
 conflicts (#27439)

---
 RESOURCES/FEATURE_FLAGS.md                    |   1 +
 .../cypress/e2e/dashboard/editmode.test.ts    |  49 ++-
 .../explore/visualizations/compare.test.js    |   3 -
 .../explore/visualizations/dist_bar.test.js   |   3 -
 .../src/color/CategoricalColorScale.ts        | 219 +++++++++----
 ...ingleton.ts => LabelsColorMapSingleton.ts} |  74 +++--
 .../superset-ui-core/src/color/index.ts       |   8 +-
 .../superset-ui-core/src/color/utils.ts       |   5 +-
 .../useComponentDidUpdate.ts                  |  10 +-
 .../color/CategoricalColorNameSpace.test.ts   |   2 +-
 .../test/color/CategoricalColorScale.test.ts  | 290 ++++++++++++------
 .../color/LabelsColorMapSingleton.test.ts     | 234 ++++++++++++++
 .../color/SharedLabelColorSingleton.test.ts   | 201 ------------
 .../legacy-plugin-chart-chord/src/Chord.js    |   4 +-
 .../src/Histogram.jsx                         |   2 +-
 .../src/Partition.js                          |   2 +-
 .../legacy-plugin-chart-rose/src/Rose.js      |  14 +-
 .../legacy-plugin-chart-sankey/src/Sankey.js  |   2 +-
 .../src/CategoricalDeckGLContainer.tsx        |  10 +-
 .../legacy-preset-chart-nvd3/src/NVD3Vis.js   |   4 +-
 .../src/BoxPlot/transformProps.ts             |   6 +-
 .../src/Funnel/transformProps.ts              |   2 +-
 .../src/Gauge/transformProps.ts               |   4 +-
 .../src/Graph/transformProps.ts               |   2 +-
 .../src/Pie/transformProps.ts                 |   2 +-
 .../src/Radar/transformProps.ts               |   2 +-
 .../src/Treemap/transformProps.ts             |   4 +-
 .../src/chart/WordCloud.tsx                   |   9 +-
 .../src/legacyPlugin/transformProps.ts        |   1 +
 .../src/plugin/transformProps.ts              |   4 +-
 .../test/legacyPlugin/transformProps.test.ts  |   1 +
 .../src/components/Chart/Chart.jsx            |   4 +-
 .../src/components/Chart/ChartRenderer.jsx    |   8 +-
 .../src/dashboard/actions/dashboardInfo.ts    |  39 +--
 .../src/dashboard/actions/dashboardState.js   |  80 ++++-
 .../src/dashboard/actions/hydrate.js          |  11 -
 .../components/ColorSchemeControlWrapper.jsx  |   8 +-
 .../DashboardBuilder/DashboardContainer.tsx   | 118 ++-----
 .../src/dashboard/components/Header/index.jsx |   9 +-
 .../components/PropertiesModal/index.tsx      |  36 +--
 .../components/SyncDashboardState/index.tsx   |   4 +-
 .../components/gridComponents/Chart.jsx       |  12 +-
 .../components/gridComponents/Tabs.jsx        |   1 +
 .../src/dashboard/containers/Chart.jsx        |  12 +-
 .../containers/DashboardComponent.jsx         |   1 +
 .../dashboard/containers/DashboardPage.tsx    |  23 +-
 .../charts/getFormDataWithExtraFilters.ts     |  16 +-
 .../components/ExploreChartHeader/index.jsx   |  38 +--
 .../ColorSchemeControl.test.tsx               |  13 +-
 .../ColorSchemeControl/ColorSchemeLabel.tsx   |  12 +-
 .../controls/ColorSchemeControl/index.tsx     |  14 +-
 superset-frontend/src/pages/Chart/index.tsx   |  14 +-
 .../src/types/DashboardContextForExplore.ts   |   4 +-
 superset-frontend/src/utils/colorScheme.ts    | 140 +++++++++
 .../integration_tests/superset_test_config.py |   1 +
 55 files changed, 1050 insertions(+), 742 deletions(-)
 rename superset-frontend/packages/superset-ui-core/src/color/{SharedLabelColorSingleton.ts => LabelsColorMapSingleton.ts} (52%)
 create mode 100644 superset-frontend/packages/superset-ui-core/test/color/LabelsColorMapSingleton.test.ts
 delete mode 100644 superset-frontend/packages/superset-ui-core/test/color/SharedLabelColorSingleton.test.ts
 create mode 100644 superset-frontend/src/utils/colorScheme.ts

diff --git a/RESOURCES/FEATURE_FLAGS.md b/RESOURCES/FEATURE_FLAGS.md
index 950e652efa..2c4d4d0c3e 100644
--- a/RESOURCES/FEATURE_FLAGS.md
+++ b/RESOURCES/FEATURE_FLAGS.md
@@ -89,6 +89,7 @@ These features flags currently default to True and **will be removed in a future
 
 [//]: # "PLEASE KEEP THE LIST SORTED ALPHABETICALLY"
 
+- AVOID_COLORS_COLLISION
 - DASHBOARD_CROSS_FILTERS
 - ENABLE_JAVASCRIPT_CONTROLS
 - KV_STORE
diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/editmode.test.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/editmode.test.ts
index 1584cd04e3..4f9863071c 100644
--- a/superset-frontend/cypress-base/cypress/e2e/dashboard/editmode.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/dashboard/editmode.test.ts
@@ -124,7 +124,7 @@ function selectColorScheme(color: string) {
   )
     .first()
     .click();
-  cy.getBySel(color).click();
+  cy.getBySel(color).click({ force: true });
 }
 
 function applyChanges() {
@@ -169,6 +169,7 @@ function writeMetadata(metadata: string) {
 
 function openExplore(chartName: string) {
   interceptExploreJson();
+  interceptGet();
 
   cy.get(
     `[data-test-chart-name='${chartName}'] [aria-label='More Options']`,
@@ -210,7 +211,7 @@ describe('Dashboard edit', () => {
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .first()
-        .should('have.css', 'fill', 'rgb(69, 78, 124)');
+        .should('have.css', 'fill', 'rgb(31, 168, 201)');
     });
 
     it('should apply same color to same labels with color scheme set', () => {
@@ -231,7 +232,7 @@ describe('Dashboard edit', () => {
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .first()
-        .should('have.css', 'fill', 'rgb(0, 234, 162)');
+        .should('have.css', 'fill', 'rgb(50, 0, 167)');
 
       // open 2nd main tab
       openTab(0, 1);
@@ -240,7 +241,7 @@ describe('Dashboard edit', () => {
       // label Anthony
       cy.get('[data-test-chart-name="Trends"] .line .nv-legend-symbol')
         .eq(2)
-        .should('have.css', 'fill', 'rgb(0, 234, 162)');
+        .should('have.css', 'fill', 'rgb(50, 0, 167)');
     });
 
     it('should apply same color to same labels with no color scheme set', () => {
@@ -261,7 +262,7 @@ describe('Dashboard edit', () => {
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .first()
-        .should('have.css', 'fill', 'rgb(69, 78, 124)');
+        .should('have.css', 'fill', 'rgb(31, 168, 201)');
 
       // open 2nd main tab
       openTab(0, 1);
@@ -270,7 +271,7 @@ describe('Dashboard edit', () => {
       // label Anthony
       cy.get('[data-test-chart-name="Trends"] .line .nv-legend-symbol')
         .eq(2)
-        .should('have.css', 'fill', 'rgb(69, 78, 124)');
+        .should('have.css', 'fill', 'rgb(31, 168, 201)');
     });
 
     it('custom label colors should take the precedence in nested tabs', () => {
@@ -384,17 +385,17 @@ describe('Dashboard edit', () => {
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .first()
-        .should('have.css', 'fill', 'rgb(69, 78, 124)');
+        .should('have.css', 'fill', 'rgb(31, 168, 201)');
       cy.get(
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .eq(1)
-        .should('have.css', 'fill', 'rgb(224, 67, 85)');
+        .should('have.css', 'fill', 'rgb(69, 78, 124)');
       cy.get(
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .eq(2)
-        .should('have.css', 'fill', 'rgb(163, 143, 121)');
+        .should('have.css', 'fill', 'rgb(90, 193, 137)');
 
       openProperties();
       cy.get('[aria-label="Select color scheme"]').should('have.value', '');
@@ -423,17 +424,17 @@ describe('Dashboard edit', () => {
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .first()
-        .should('have.css', 'fill', 'rgb(69, 78, 124)');
+        .should('have.css', 'fill', 'rgb(31, 168, 201)');
       cy.get(
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .eq(1)
-        .should('have.css', 'fill', 'rgb(224, 67, 85)');
+        .should('have.css', 'fill', 'rgb(69, 78, 124)');
       cy.get(
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .eq(2)
-        .should('have.css', 'fill', 'rgb(163, 143, 121)');
+        .should('have.css', 'fill', 'rgb(90, 193, 137)');
     });
 
     it('should show the same colors in Explore', () => {
@@ -459,12 +460,6 @@ describe('Dashboard edit', () => {
       )
         .first()
         .should('have.css', 'fill', 'rgb(255, 0, 0)');
-      // label Christopher
-      cy.get(
-        '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
-      )
-        .eq(1)
-        .should('have.css', 'fill', 'rgb(172, 32, 119)');
 
       openExplore('Top 10 California Names Timeseries');
 
@@ -472,10 +467,6 @@ describe('Dashboard edit', () => {
       cy.get('[data-test="chart-container"] .line .nv-legend-symbol')
         .first()
         .should('have.css', 'fill', 'rgb(255, 0, 0)');
-      // label Christopher
-      cy.get('[data-test="chart-container"] .line .nv-legend-symbol')
-        .eq(1)
-        .should('have.css', 'fill', 'rgb(172, 32, 119)');
     });
 
     it.skip('should change color scheme multiple times', () => {
@@ -496,7 +487,7 @@ describe('Dashboard edit', () => {
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .first()
-        .should('have.css', 'fill', 'rgb(51, 61, 71)');
+        .should('have.css', 'fill', 'rgb(234, 11, 140)');
 
       // open 2nd main tab
       openTab(0, 1);
@@ -505,7 +496,7 @@ describe('Dashboard edit', () => {
       // label Anthony
       cy.get('[data-test-chart-name="Trends"] .line .nv-legend-symbol')
         .eq(2)
-        .should('have.css', 'fill', 'rgb(51, 61, 71)');
+        .should('have.css', 'fill', 'rgb(234, 11, 140)');
 
       editDashboard();
       openProperties();
@@ -516,7 +507,7 @@ describe('Dashboard edit', () => {
       // label Anthony
       cy.get('[data-test-chart-name="Trends"] .line .nv-legend-symbol')
         .eq(2)
-        .should('have.css', 'fill', 'rgb(244, 176, 42)');
+        .should('have.css', 'fill', 'rgb(41, 105, 107)');
 
       // open main tab and nested tab
       openTab(0, 0);
@@ -527,7 +518,7 @@ describe('Dashboard edit', () => {
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .first()
-        .should('have.css', 'fill', 'rgb(244, 176, 42)');
+        .should('have.css', 'fill', 'rgb(41, 105, 107)');
     });
 
     it.skip('should apply the color scheme across main tabs', () => {
@@ -542,7 +533,7 @@ describe('Dashboard edit', () => {
 
       cy.get('[data-test-chart-name="Trends"] .line .nv-legend-symbol')
         .first()
-        .should('have.css', 'fill', 'rgb(51, 61, 71)');
+        .should('have.css', 'fill', 'rgb(234, 11, 140)');
     });
 
     it.skip('should apply the color scheme across main tabs for rendered charts', () => {
@@ -558,7 +549,7 @@ describe('Dashboard edit', () => {
 
       cy.get('[data-test-chart-name="Trends"] .line .nv-legend-symbol')
         .first()
-        .should('have.css', 'fill', 'rgb(156, 52, 152)');
+        .should('have.css', 'fill', 'rgb(41, 105, 107)');
 
       // change scheme now that charts are rendered across the main tabs
       editDashboard();
@@ -588,7 +579,7 @@ describe('Dashboard edit', () => {
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .first()
-        .should('have.css', 'fill', 'rgb(51, 61, 71)');
+        .should('have.css', 'fill', 'rgb(234, 11, 140)');
 
       // open another nested tab
       openTab(2, 1);
diff --git a/superset-frontend/cypress-base/cypress/e2e/explore/visualizations/compare.test.js b/superset-frontend/cypress-base/cypress/e2e/explore/visualizations/compare.test.js
index 136e48d5ad..11ad6eb578 100644
--- a/superset-frontend/cypress-base/cypress/e2e/explore/visualizations/compare.test.js
+++ b/superset-frontend/cypress-base/cypress/e2e/explore/visualizations/compare.test.js
@@ -97,8 +97,5 @@ describe('Visualization > Compare', () => {
     cy.get(
       '.Control[data-test="color_scheme"] .ant-select-selection-item [data-test="supersetColors"]',
     ).should('exist');
-    cy.get('.compare .nv-legend .nv-legend-symbol')
-      .first()
-      .should('have.css', 'fill', 'rgb(31, 168, 201)');
   });
 });
diff --git a/superset-frontend/cypress-base/cypress/e2e/explore/visualizations/dist_bar.test.js b/superset-frontend/cypress-base/cypress/e2e/explore/visualizations/dist_bar.test.js
index 591ba31776..8dcba5b755 100644
--- a/superset-frontend/cypress-base/cypress/e2e/explore/visualizations/dist_bar.test.js
+++ b/superset-frontend/cypress-base/cypress/e2e/explore/visualizations/dist_bar.test.js
@@ -87,8 +87,5 @@ describe('Visualization > Distribution bar chart', () => {
     cy.get(
       '.Control[data-test="color_scheme"] .ant-select-selection-item [data-test="bnbColors"]',
     ).should('exist');
-    cy.get('.dist_bar .nv-legend .nv-legend-symbol')
-      .first()
-      .should('have.css', 'fill', 'rgb(41, 105, 107)');
   });
 });
diff --git a/superset-frontend/packages/superset-ui-core/src/color/CategoricalColorScale.ts b/superset-frontend/packages/superset-ui-core/src/color/CategoricalColorScale.ts
index 8b8cd02519..f97f84cdec 100644
--- a/superset-frontend/packages/superset-ui-core/src/color/CategoricalColorScale.ts
+++ b/superset-frontend/packages/superset-ui-core/src/color/CategoricalColorScale.ts
@@ -17,19 +17,18 @@
  * under the License.
  */
 
-/* eslint-disable no-dupe-class-members */
 import { scaleOrdinal, ScaleOrdinal } from 'd3-scale';
 import { ExtensibleFunction } from '../models';
 import { ColorsInitLookup, ColorsLookup } from './types';
 import stringifyAndTrim from './stringifyAndTrim';
-import getSharedLabelColor from './SharedLabelColorSingleton';
+import getLabelsColorMap from './LabelsColorMapSingleton';
 import { getAnalogousColors } from './utils';
 import { FeatureFlag, isFeatureEnabled } from '../utils';
 
 // Use type augmentation to correct the fact that
 // an instance of CategoricalScale is also a function
 interface CategoricalColorScale {
-  (x: { toString(): string }, y?: number): string;
+  (x: { toString(): string }, y?: number, w?: string): string;
 }
 
 class CategoricalColorScale extends ExtensibleFunction {
@@ -39,101 +38,183 @@ class CategoricalColorScale extends ExtensibleFunction {
 
   scale: ScaleOrdinal<{ toString(): string }, string>;
 
-  parentForcedColors: ColorsLookup;
-
   forcedColors: ColorsLookup;
 
+  labelsColorMapInstance: ReturnType<typeof getLabelsColorMap>;
+
+  chartLabelsColorMap: Map<string, string>;
+
   multiple: number;
 
   /**
    * Constructor
    * @param {*} colors an array of colors
-   * @param {*} parentForcedColors optional parameter that comes from parent
-   * (usually CategoricalColorNamespace) and supersede this.forcedColors
+   * @param {*} forcedColors optional parameter that comes from parent
+   * (usually CategoricalColorNamespace)
    */
-  constructor(colors: string[], parentForcedColors: ColorsInitLookup = {}) {
-    super((value: string, sliceId?: number) => this.getColor(value, sliceId));
-
+  constructor(colors: string[], forcedColors: ColorsInitLookup = {}) {
+    super((value: string, sliceId?: number, colorScheme?: string) =>
+      this.getColor(value, sliceId, colorScheme),
+    );
+    // holds original color scheme colors
     this.originColors = colors;
+    // holds the extended color range (includes analagous colors)
     this.colors = colors;
+    // holds the values of this specific slice (label+color)
+    this.chartLabelsColorMap = new Map();
+    // shared color map instance (when context is shared, i.e. dashboard)
+    this.labelsColorMapInstance = getLabelsColorMap();
+    // holds the multiple value for analogous colors range
+    this.multiple = 0;
+
     this.scale = scaleOrdinal<{ toString(): string }, string>();
     this.scale.range(colors);
 
     // reserve fixed colors in parent map based on their index in the scale
-    Object.entries(parentForcedColors).forEach(([key, value]) => {
+    Object.entries(forcedColors).forEach(([key, value]) => {
       if (typeof value === 'number') {
         // eslint-disable-next-line no-param-reassign
-        parentForcedColors[key] = colors[value % colors.length];
+        forcedColors[key] = colors[value % colors.length];
       }
     });
 
-    // all indexes have been replaced by a fixed color
-    this.parentForcedColors = parentForcedColors as ColorsLookup;
-    this.forcedColors = {};
-    this.multiple = 0;
+    // forced colors from parent (usually CategoricalColorNamespace)
+    // currently used in dashboards to set custom label colors
+    this.forcedColors = forcedColors as ColorsLookup;
   }
 
-  removeSharedLabelColorFromRange(
-    sharedColorMap: Map<string, string>,
-    cleanedValue: string,
-  ) {
-    // make sure we don't overwrite the origin colors
-    const updatedRange = new Set(this.originColors);
-    // remove the color option from shared color
-    sharedColorMap.forEach((value: string, key: string) => {
-      if (key !== cleanedValue) {
-        updatedRange.delete(value);
-      }
-    });
-    // remove the color option from forced colors
-    Object.entries(this.parentForcedColors).forEach(([key, value]) => {
-      if (key !== cleanedValue) {
-        updatedRange.delete(value);
-      }
-    });
-    this.range(updatedRange.size > 0 ? [...updatedRange] : this.originColors);
+  /**
+   * Increment the color range with analogous colors
+   */
+  incrementColorRange() {
+    const multiple = Math.floor(
+      this.domain().length / this.originColors.length,
+    );
+    // the domain has grown larger than the original range
+    // increments the range with analogous colors
+    if (multiple > this.multiple) {
+      this.multiple = multiple;
+      const newRange = getAnalogousColors(this.originColors, multiple);
+      const extendedColors = this.originColors.concat(newRange);
+
+      this.range(extendedColors);
+      this.colors = extendedColors;
+    }
   }
 
-  getColor(value?: string, sliceId?: number) {
+  /**
+   * Get the color for a given value
+   *
+   * @param value the value of a label to get the color for
+   * @param sliceId the ID of the current chart
+   * @param colorScheme the original color scheme of the chart
+   * @returns the color or the next available color
+   */
+  getColor(value?: string, sliceId?: number, colorScheme?: string): string {
     const cleanedValue = stringifyAndTrim(value);
-    const sharedLabelColor = getSharedLabelColor();
-    const sharedColorMap = sharedLabelColor.getColorMap();
-    const sharedColor = sharedColorMap.get(cleanedValue);
+    // priority: forced color (i.e. custom label colors) > shared color > scale color
+    const forcedColor = this.forcedColors?.[cleanedValue];
+    const isExistingLabel = this.chartLabelsColorMap.has(cleanedValue);
+    let color = forcedColor || this.scale(cleanedValue);
 
-    // priority: parentForcedColors > forcedColors > labelColors
-    let color =
-      this.parentForcedColors?.[cleanedValue] ||
-      this.forcedColors?.[cleanedValue] ||
-      sharedColor;
+    // a forced color will always be used independently of the usage count
+    if (!forcedColor && !isExistingLabel) {
+      if (isFeatureEnabled(FeatureFlag.UseAnalagousColors)) {
+        this.incrementColorRange();
+      }
+      if (
+        // feature flag to be deprecated (will become standard behaviour)
+        isFeatureEnabled(FeatureFlag.AvoidColorsCollision) &&
+        this.isColorUsed(color)
+      ) {
+        // fallback to least used color
+        color = this.getNextAvailableColor(color);
+      }
+    }
 
-    if (isFeatureEnabled(FeatureFlag.UseAnalagousColors)) {
-      const multiple = Math.floor(
-        this.domain().length / this.originColors.length,
+    // keep track of values in this slice
+    this.chartLabelsColorMap.set(cleanedValue, color);
+
+    // store the value+color in the LabelsColorMapSingleton
+    if (sliceId) {
+      this.labelsColorMapInstance.addSlice(
+        cleanedValue,
+        color,
+        sliceId,
+        colorScheme,
       );
-      if (multiple > this.multiple) {
-        this.multiple = multiple;
-        const newRange = getAnalogousColors(this.originColors, multiple);
-        this.range(this.originColors.concat(newRange));
-      }
     }
-    const newColor = this.scale(cleanedValue);
-    if (!color) {
-      color = newColor;
-      if (isFeatureEnabled(FeatureFlag.AvoidColorsCollision)) {
-        this.removeSharedLabelColorFromRange(sharedColorMap, cleanedValue);
-        color = this.scale(cleanedValue);
-      }
-    }
-
-    sharedLabelColor.addSlice(cleanedValue, color, sliceId);
-
     return color;
   }
 
   /**
-   * Enforce specific color for given value
+   * Verify if a color is used in this slice
+   *
+   * @param color
+   * @returns true if the color is used in this slice
+   */
+  isColorUsed(color: string): boolean {
+    return this.getColorUsageCount(color) > 0;
+  }
+
+  /**
+   * Get the count of the color usage in this slice
+   *
+   * @param sliceId the ID of the current slice
+   * @param color the color to check
+   * @returns the count of the color usage in this slice
+   */
+  getColorUsageCount(currentColor: string): number {
+    let count = 0;
+    this.chartLabelsColorMap.forEach(color => {
+      if (color === currentColor) {
+        count += 1;
+      }
+    });
+    return count;
+  }
+
+  /**
+   * Lower chances of color collision by returning the least used color
+   * Checks across colors of current slice within LabelsColorMapSingleton
+   *
+   * @param currentColor the current color
+   * @returns the least used color that is not the excluded color
+   */
+  getNextAvailableColor(currentColor: string) {
+    const colorUsageArray = this.colors.map(color => ({
+      color,
+      count: this.getColorUsageCount(color),
+    }));
+    const currentColorCount = this.getColorUsageCount(currentColor);
+    const otherColors = colorUsageArray.filter(
+      colorEntry => colorEntry.color !== currentColor,
+    );
+    // all other colors are used as much or more than currentColor
+    const hasNoneAvailable = otherColors.every(
+      colorEntry => colorEntry.count >= currentColorCount,
+    );
+
+    // fallback to currentColor color
+    if (!otherColors.length || hasNoneAvailable) {
+      return currentColor;
+    }
+
+    // Finding the least used color
+    const leastUsedColor = otherColors.reduce((min, entry) =>
+      entry.count < min.count ? entry : min,
+    ).color;
+
+    return leastUsedColor;
+  }
+
+  /**
+   * Enforce specific color for a given value at the scale level
+   * Overrides any existing color and forced color for the given value
+   *
    * @param {*} value value
    * @param {*} forcedColor forcedColor
+   * @returns {CategoricalColorScale}
    */
   setColor(value: string, forcedColor: string) {
     this.forcedColors[stringifyAndTrim(value)] = forcedColor;
@@ -142,6 +223,7 @@ class CategoricalColorScale extends ExtensibleFunction {
 
   /**
    * Get a mapping of data values to colors
+   *
    * @returns an object where the key is the data value and the value is the hex color code
    */
   getColorMap() {
@@ -153,22 +235,23 @@ class CategoricalColorScale extends ExtensibleFunction {
     return {
       ...colorMap,
       ...this.forcedColors,
-      ...this.parentForcedColors,
     };
   }
 
   /**
-   * Returns an exact copy of this scale. Changes to this scale will not affect the returned scale, and vice versa.
+   * Return an exact copy of this scale.
+   * Changes to this scale will not affect the returned scale and vice versa.
+   *
+   * @returns {CategoricalColorScale} A copy of this scale.
    */
   copy() {
     const copy = new CategoricalColorScale(
       this.scale.range(),
-      this.parentForcedColors,
+      this.forcedColors,
     );
     copy.forcedColors = { ...this.forcedColors };
     copy.domain(this.domain());
     copy.unknown(this.unknown());
-
     return copy;
   }
 
diff --git a/superset-frontend/packages/superset-ui-core/src/color/SharedLabelColorSingleton.ts b/superset-frontend/packages/superset-ui-core/src/color/LabelsColorMapSingleton.ts
similarity index 52%
rename from superset-frontend/packages/superset-ui-core/src/color/SharedLabelColorSingleton.ts
rename to superset-frontend/packages/superset-ui-core/src/color/LabelsColorMapSingleton.ts
index 4837d0f362..59d3f8cc5d 100644
--- a/superset-frontend/packages/superset-ui-core/src/color/SharedLabelColorSingleton.ts
+++ b/superset-frontend/packages/superset-ui-core/src/color/LabelsColorMapSingleton.ts
@@ -17,36 +17,37 @@
  * under the License.
  */
 
-import { CategoricalColorNamespace } from '.';
 import { makeSingleton } from '../utils';
 
-export enum SharedLabelColorSource {
+export enum LabelsColorMapSource {
   Dashboard,
   Explore,
 }
-export class SharedLabelColor {
-  sliceLabelMap: Map<number, string[]>;
+
+export class LabelsColorMap {
+  chartsLabelsMap: Map<number, { labels: string[]; scheme?: string }>;
 
   colorMap: Map<string, string>;
 
-  source: SharedLabelColorSource;
+  source: LabelsColorMapSource;
 
   constructor() {
-    // { sliceId1: [label1, label2, ...], sliceId2: [label1, label2, ...] }
-    this.sliceLabelMap = new Map();
+    // holds labels and original color schemes for each chart in context
+    this.chartsLabelsMap = new Map();
     this.colorMap = new Map();
-    this.source = SharedLabelColorSource.Dashboard;
+    this.source = LabelsColorMapSource.Dashboard;
   }
 
-  updateColorMap(colorNamespace?: string, colorScheme?: string) {
-    const categoricalNamespace =
-      CategoricalColorNamespace.getNamespace(colorNamespace);
+  updateColorMap(categoricalNamespace: any, colorScheme?: string) {
     const newColorMap = new Map();
     this.colorMap.clear();
-    this.sliceLabelMap.forEach(labels => {
-      const colorScale = categoricalNamespace.getScale(colorScheme);
+    this.chartsLabelsMap.forEach((chartConfig, sliceId) => {
+      const { labels, scheme: originalChartColorScheme } = chartConfig;
+      const currentColorScheme = colorScheme || originalChartColorScheme;
+      const colorScale = categoricalNamespace.getScale(currentColorScheme);
+
       labels.forEach(label => {
-        const newColor = colorScale(label);
+        const newColor = colorScale.getColor(label, sliceId);
         newColorMap.set(label, newColor);
       });
     });
@@ -57,25 +58,37 @@ export class SharedLabelColor {
     return this.colorMap;
   }
 
-  addSlice(label: string, color: string, sliceId?: number) {
-    if (
-      this.source !== SharedLabelColorSource.Dashboard ||
-      sliceId === undefined
-    )
-      return;
-    const labels = this.sliceLabelMap.get(sliceId) || [];
+  addSlice(
+    label: string,
+    color: string,
+    sliceId: number,
+    colorScheme?: string,
+  ) {
+    if (this.source !== LabelsColorMapSource.Dashboard) return;
+
+    const chartConfig = this.chartsLabelsMap.get(sliceId) || {
+      labels: [],
+      scheme: '',
+    };
+    const { labels } = chartConfig;
     if (!labels.includes(label)) {
       labels.push(label);
-      this.sliceLabelMap.set(sliceId, labels);
+      this.chartsLabelsMap.set(sliceId, {
+        labels,
+        scheme: colorScheme,
+      });
     }
     this.colorMap.set(label, color);
   }
 
   removeSlice(sliceId: number) {
-    if (this.source !== SharedLabelColorSource.Dashboard) return;
-    this.sliceLabelMap.delete(sliceId);
+    if (this.source !== LabelsColorMapSource.Dashboard) return;
+
+    this.chartsLabelsMap.delete(sliceId);
     const newColorMap = new Map();
-    this.sliceLabelMap.forEach(labels => {
+
+    this.chartsLabelsMap.forEach(chartConfig => {
+      const { labels } = chartConfig;
       labels.forEach(label => {
         newColorMap.set(label, this.colorMap.get(label));
       });
@@ -83,19 +96,12 @@ export class SharedLabelColor {
     this.colorMap = newColorMap;
   }
 
-  reset() {
-    const copyColorMap = new Map(this.colorMap);
-    copyColorMap.forEach((_, label) => {
-      this.colorMap.set(label, '');
-    });
-  }
-
   clear() {
-    this.sliceLabelMap.clear();
+    this.chartsLabelsMap.clear();
     this.colorMap.clear();
   }
 }
 
-const getInstance = makeSingleton(SharedLabelColor);
+const getInstance = makeSingleton(LabelsColorMap);
 
 export default getInstance;
diff --git a/superset-frontend/packages/superset-ui-core/src/color/index.ts b/superset-frontend/packages/superset-ui-core/src/color/index.ts
index cb7e569b47..5e4d0ea7aa 100644
--- a/superset-frontend/packages/superset-ui-core/src/color/index.ts
+++ b/superset-frontend/packages/superset-ui-core/src/color/index.ts
@@ -34,9 +34,9 @@ export * from './colorSchemes';
 export * from './utils';
 export * from './types';
 export {
-  default as getSharedLabelColor,
-  SharedLabelColor,
-  SharedLabelColorSource,
-} from './SharedLabelColorSingleton';
+  default as getLabelsColorMap,
+  LabelsColorMap,
+  LabelsColorMapSource,
+} from './LabelsColorMapSingleton';
 
 export const BRAND_COLOR = '#00A699';
diff --git a/superset-frontend/packages/superset-ui-core/src/color/utils.ts b/superset-frontend/packages/superset-ui-core/src/color/utils.ts
index 55284f16b4..c0f33f9f8c 100644
--- a/superset-frontend/packages/superset-ui-core/src/color/utils.ts
+++ b/superset-frontend/packages/superset-ui-core/src/color/utils.ts
@@ -55,11 +55,12 @@ export function getContrastingColor(color: string, thresholds = 186) {
 
 export function getAnalogousColors(colors: string[], results: number) {
   const generatedColors: string[] = [];
-  // This is to solve the problem that the first three values generated by tinycolor.analogous
-  // may have the same or very close colors.
   const ext = 3;
+
   const analogousColors = colors.map(color => {
+    // returns an array of tinycolor instances
     const result = tinycolor(color).analogous(results + ext);
+    // remove the first three colors to avoid the same or very close colors
     return result.slice(ext);
   });
 
diff --git a/superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidUpdate/useComponentDidUpdate.ts b/superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidUpdate/useComponentDidUpdate.ts
index aa84568e29..f382cd37c8 100644
--- a/superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidUpdate/useComponentDidUpdate.ts
+++ b/superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidUpdate/useComponentDidUpdate.ts
@@ -17,9 +17,12 @@
  * under the License.
  */
 
-import { EffectCallback, useEffect, useRef } from 'react';
+import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
 
-export const useComponentDidUpdate = (effect: EffectCallback) => {
+export const useComponentDidUpdate = (
+  effect: EffectCallback,
+  deps?: DependencyList,
+) => {
   const isMountedRef = useRef(false);
   useEffect(() => {
     if (isMountedRef.current) {
@@ -27,5 +30,6 @@ export const useComponentDidUpdate = (effect: EffectCallback) => {
     } else {
       isMountedRef.current = true;
     }
-  }, [effect]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...(deps || [effect])]);
 };
diff --git a/superset-frontend/packages/superset-ui-core/test/color/CategoricalColorNameSpace.test.ts b/superset-frontend/packages/superset-ui-core/test/color/CategoricalColorNameSpace.test.ts
index d5e1ef8f0b..69fb38eea3 100644
--- a/superset-frontend/packages/superset-ui-core/test/color/CategoricalColorNameSpace.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/color/CategoricalColorNameSpace.test.ts
@@ -98,7 +98,7 @@ describe('CategoricalColorNamespace', () => {
       namespace.setColor('dog', 'black');
       const scale = namespace.getScale('testColors');
       scale.setColor('dog', 'pink');
-      expect(scale.getColor('dog')).toBe('black');
+      expect(scale.getColor('dog')).toBe('pink');
       expect(scale.getColor('boy')).not.toBe('black');
     });
     it('does not affect scales in other namespaces', () => {
diff --git a/superset-frontend/packages/superset-ui-core/test/color/CategoricalColorScale.test.ts b/superset-frontend/packages/superset-ui-core/test/color/CategoricalColorScale.test.ts
index 48e43d8351..97d756cb04 100644
--- a/superset-frontend/packages/superset-ui-core/test/color/CategoricalColorScale.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/color/CategoricalColorScale.test.ts
@@ -18,50 +18,76 @@
  */
 
 import { ScaleOrdinal } from 'd3-scale';
-import {
-  CategoricalColorScale,
-  FeatureFlag,
-  getSharedLabelColor,
-} from '@superset-ui/core';
+import { CategoricalColorScale, FeatureFlag } from '@superset-ui/core';
 
 describe('CategoricalColorScale', () => {
+  beforeEach(() => {
+    window.featureFlags = {};
+  });
+
   it('exists', () => {
     expect(CategoricalColorScale !== undefined).toBe(true);
   });
 
-  describe('new CategoricalColorScale(colors, parentForcedColors)', () => {
-    it('can create new scale when parentForcedColors is not given', () => {
+  describe('new CategoricalColorScale(colors, forcedColors)', () => {
+    it('can create new scale when forcedColors is not given', () => {
       const scale = new CategoricalColorScale(['blue', 'red', 'green']);
       expect(scale).toBeInstanceOf(CategoricalColorScale);
     });
-    it('can create new scale when parentForcedColors is given', () => {
-      const parentForcedColors = {};
+    it('can create new scale when forcedColors is given', () => {
+      const forcedColors = {};
       const scale = new CategoricalColorScale(
         ['blue', 'red', 'green'],
-        parentForcedColors,
+        forcedColors,
       );
       expect(scale).toBeInstanceOf(CategoricalColorScale);
-      expect(scale.parentForcedColors).toBe(parentForcedColors);
+      expect(scale.forcedColors).toBe(forcedColors);
     });
 
     it('can refer to colors based on their index', () => {
-      const parentForcedColors = { pig: 1, horse: 5 };
+      const forcedColors = { pig: 1, horse: 5 };
       const scale = new CategoricalColorScale(
         ['blue', 'red', 'green'],
-        parentForcedColors,
+        forcedColors,
       );
       expect(scale.getColor('pig')).toEqual('red');
-      expect(parentForcedColors.pig).toEqual('red');
+      expect(forcedColors.pig).toEqual('red');
 
       // can loop around the scale
       expect(scale.getColor('horse')).toEqual('green');
-      expect(parentForcedColors.horse).toEqual('green');
+      expect(forcedColors.horse).toEqual('green');
     });
   });
 
-  describe('.getColor(value)', () => {
+  describe('.getColor(value, sliceId)', () => {
+    let scale: CategoricalColorScale;
+    let addSliceSpy: jest.SpyInstance<
+      void,
+      [label: string, color: string, sliceId: number, colorScheme?: string]
+    >;
+    let getNextAvailableColorSpy: jest.SpyInstance<
+      string,
+      [currentColor: string]
+    >;
+
+    beforeEach(() => {
+      scale = new CategoricalColorScale(['blue', 'red', 'green']);
+      // Spy on the addSlice method of labelsColorMapInstance
+      addSliceSpy = jest.spyOn(scale.labelsColorMapInstance, 'addSlice');
+      getNextAvailableColorSpy = jest
+        .spyOn(scale, 'getNextAvailableColor')
+        .mockImplementation(color => color);
+    });
+
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
     it('returns same color for same value', () => {
-      const scale = new CategoricalColorScale(['blue', 'red', 'green']);
+      const scale = new CategoricalColorScale(['blue', 'red', 'green'], {
+        pig: 'red',
+        horse: 'green',
+      });
       const c1 = scale.getColor('pig');
       const c2 = scale.getColor('horse');
       const c3 = scale.getColor('pig');
@@ -82,9 +108,6 @@ describe('CategoricalColorScale', () => {
       expect(c3).not.toBe(c1);
     });
     it('recycles colors when number of items exceed available colors', () => {
-      window.featureFlags = {
-        [FeatureFlag.UseAnalagousColors]: false,
-      };
       const colorSet: { [key: string]: number } = {};
       const scale = new CategoricalColorScale(['blue', 'red', 'green']);
       const colors = [
@@ -118,43 +141,70 @@ describe('CategoricalColorScale', () => {
       scale.getColor('cow');
       scale.getColor('donkey');
       scale.getColor('goat');
-      expect(scale.range()).toHaveLength(6);
+      expect(scale.range()).toHaveLength(9);
     });
+    it('adds the color and value to chartLabelsColorMap and calls addSlice', () => {
+      const value = 'testValue';
+      const sliceId = 123;
+      const colorScheme = 'preset';
 
-    it('should remove shared color from range if avoid colors collision enabled', () => {
+      expect(scale.chartLabelsColorMap.has(value)).toBe(false);
+
+      scale.getColor(value, sliceId, colorScheme);
+
+      expect(scale.chartLabelsColorMap.has(value)).toBe(true);
+      expect(scale.chartLabelsColorMap.get(value)).toBeDefined();
+
+      expect(addSliceSpy).toHaveBeenCalledWith(
+        value,
+        expect.any(String),
+        sliceId,
+        colorScheme,
+      );
+
+      const expectedColor = scale.chartLabelsColorMap.get(value);
+      const returnedColor = scale.getColor(value, sliceId);
+      expect(returnedColor).toBe(expectedColor);
+    });
+    it('conditionally calls getNextAvailableColor', () => {
       window.featureFlags = {
         [FeatureFlag.AvoidColorsCollision]: true,
       };
-      const scale = new CategoricalColorScale(['blue', 'red', 'green']);
-      const color1 = scale.getColor('a', 1);
-      expect(scale.range()).toHaveLength(3);
-      const color2 = scale.getColor('a', 2);
-      expect(color1).toBe(color2);
-      scale.getColor('b', 2);
-      expect(scale.range()).toHaveLength(2);
-      scale.getColor('c', 2);
-      expect(scale.range()).toHaveLength(1);
+
+      scale.getColor('testValue1');
+      scale.getColor('testValue2');
+      scale.getColor('testValue1');
+      scale.getColor('testValue3');
+      scale.getColor('testValue4');
+
+      expect(getNextAvailableColorSpy).toHaveBeenCalledWith('blue');
+
+      getNextAvailableColorSpy.mockClear();
+
+      window.featureFlags = {
+        [FeatureFlag.AvoidColorsCollision]: false,
+      };
+
+      scale.getColor('testValue3');
+
+      expect(getNextAvailableColorSpy).not.toHaveBeenCalled();
     });
-    window.featureFlags = {
-      [FeatureFlag.AvoidColorsCollision]: false,
-    };
   });
+
   describe('.setColor(value, forcedColor)', () => {
     it('overrides default color', () => {
       const scale = new CategoricalColorScale(['blue', 'red', 'green']);
       scale.setColor('pig', 'pink');
       expect(scale.getColor('pig')).toBe('pink');
     });
-    it('does not override parentForcedColors', () => {
+    it('does override forcedColors', () => {
       const scale1 = new CategoricalColorScale(['blue', 'red', 'green']);
       scale1.setColor('pig', 'black');
-      const scale2 = new CategoricalColorScale(
-        ['blue', 'red', 'green'],
-        scale1.forcedColors,
-      );
+
+      const scale2 = new CategoricalColorScale(['blue', 'red', 'green']);
       scale2.setColor('pig', 'pink');
+      expect(scale2.getColor('pig')).toBe('pink');
       expect(scale1.getColor('pig')).toBe('black');
-      expect(scale2.getColor('pig')).toBe('black');
     });
     it('returns the scale', () => {
       const scale = new CategoricalColorScale(['blue', 'red', 'green']);
@@ -163,7 +213,7 @@ describe('CategoricalColorScale', () => {
     });
   });
   describe('.getColorMap()', () => {
-    it('returns correct mapping and parentForcedColors and forcedColors are specified', () => {
+    it('returns correct mapping using least used color', () => {
       const scale1 = new CategoricalColorScale(['blue', 'red', 'green']);
       scale1.setColor('cow', 'black');
       const scale2 = new CategoricalColorScale(
@@ -177,7 +227,7 @@ describe('CategoricalColorScale', () => {
       expect(scale2.getColorMap()).toEqual({
         cow: 'black',
         pig: 'pink',
-        horse: 'green',
+        horse: 'blue', // least used color
       });
     });
   });
@@ -230,10 +280,114 @@ describe('CategoricalColorScale', () => {
   });
 
   describe('a CategoricalColorScale instance is also a color function itself', () => {
-    it('scale(value) returns color similar to calling scale.getColor(value)', () => {
+    it('scale(value) returns same color for same value', () => {
       const scale = new CategoricalColorScale(['blue', 'red', 'green']);
-      expect(scale.getColor('pig')).toBe(scale('pig'));
-      expect(scale.getColor('cat')).toBe(scale('cat'));
+      expect(scale.getColor('pig')).toBe('blue');
+      expect(scale('pig')).toBe('blue');
+      expect(scale.getColor('cat')).toBe('red');
+      expect(scale('cat')).toBe('red');
+    });
+  });
+
+  describe('.getNextAvailableColor(currentColor)', () => {
+    it('returns the current color if it is the least used or equally used among colors', () => {
+      const scale = new CategoricalColorScale(['blue', 'red', 'green']);
+      scale.getColor('cat');
+      scale.getColor('dog');
+
+      // Since 'green' hasn't been used, it's considered the least used.
+      expect(scale.getNextAvailableColor('blue')).toBe('green');
+    });
+
+    it('handles cases where all colors are equally used and returns the current color', () => {
+      const scale = new CategoricalColorScale(['blue', 'red', 'green']);
+      scale.getColor('cat'); // blue
+      scale.getColor('dog'); // red
+      scale.getColor('fish'); // green
+      // All colors used once, so the function should return the current color
+      expect(scale.getNextAvailableColor('red')).toBe('red');
+    });
+
+    it('returns the least used color accurately even when some colors are used more frequently', () => {
+      const scale = new CategoricalColorScale([
+        'blue',
+        'red',
+        'green',
+        'yellow',
+      ]);
+      scale.getColor('cat'); // blue
+      scale.getColor('dog'); // red
+      scale.getColor('frog'); // green
+      scale.getColor('fish'); // yellow
+      scale.getColor('goat'); // blue
+      scale.getColor('horse'); // red
+      scale.getColor('pony'); // green
+
+      // Yellow is the least used color, so it should be returned.
+      expect(scale.getNextAvailableColor('blue')).toBe('yellow');
+    });
+  });
+
+  describe('.isColorUsed(color)', () => {
+    it('returns true if the color is already used, false otherwise', () => {
+      const scale = new CategoricalColorScale(['blue', 'red', 'green']);
+      // Initially, no color is used
+      expect(scale.isColorUsed('blue')).toBe(false);
+      expect(scale.isColorUsed('red')).toBe(false);
+      expect(scale.isColorUsed('green')).toBe(false);
+
+      scale.getColor('item1');
+
+      // Now, 'blue' is used, but 'red' and 'green' are not
+      expect(scale.isColorUsed('blue')).toBe(true);
+      expect(scale.isColorUsed('red')).toBe(false);
+      expect(scale.isColorUsed('green')).toBe(false);
+
+      // Simulate using the 'red' color
+      scale.getColor('item2'); // Assigns 'red' to 'item2'
+
+      // Now, 'blue' and 'red' are used
+      expect(scale.isColorUsed('blue')).toBe(true);
+      expect(scale.isColorUsed('red')).toBe(true);
+      expect(scale.isColorUsed('green')).toBe(false);
+    });
+  });
+
+  describe('.getColorUsageCount(color)', () => {
+    it('accurately counts the occurrences of a specific color', () => {
+      const scale = new CategoricalColorScale([
+        'blue',
+        'red',
+        'green',
+        'yellow',
+      ]);
+      // No colors are used initially
+      expect(scale.getColorUsageCount('blue')).toBe(0);
+      expect(scale.getColorUsageCount('red')).toBe(0);
+      expect(scale.getColorUsageCount('green')).toBe(0);
+      expect(scale.getColorUsageCount('yellow')).toBe(0);
+
+      // Simulate using colors
+      scale.getColor('item1');
+      scale.getColor('item2');
+      scale.getColor('item1');
+
+      // Check the counts after using the colors
+      expect(scale.getColorUsageCount('blue')).toBe(1);
+      expect(scale.getColorUsageCount('red')).toBe(1);
+      expect(scale.getColorUsageCount('green')).toBe(0);
+      expect(scale.getColorUsageCount('yellow')).toBe(0);
+
+      // Simulate using colors more
+      scale.getColor('item3');
+      scale.getColor('item4');
+      scale.getColor('item3');
+
+      // Final counts
+      expect(scale.getColorUsageCount('blue')).toBe(1);
+      expect(scale.getColorUsageCount('red')).toBe(1);
+      expect(scale.getColorUsageCount('green')).toBe(1);
+      expect(scale.getColorUsageCount('yellow')).toBe(1);
     });
   });
 
@@ -244,50 +398,4 @@ describe('CategoricalColorScale', () => {
       expect(scale('pig')).toBe('blue');
     });
   });
-
-  describe('.removeSharedLabelColorFromRange(colorMap, cleanedValue)', () => {
-    it('should remove shared color from range', () => {
-      const scale = new CategoricalColorScale(['blue', 'green', 'red']);
-      expect(scale.range()).toEqual(['blue', 'green', 'red']);
-
-      const sharedLabelColor = getSharedLabelColor();
-      sharedLabelColor.clear();
-      const colorMap = sharedLabelColor.getColorMap();
-      sharedLabelColor.addSlice('cow', 'blue', 1);
-      scale.removeSharedLabelColorFromRange(colorMap, 'pig');
-      expect(scale.range()).toEqual(['green', 'red']);
-      scale.removeSharedLabelColorFromRange(colorMap, 'cow');
-      expect(scale.range()).toEqual(['blue', 'green', 'red']);
-      sharedLabelColor.clear();
-    });
-
-    it('recycles colors when all colors are in sharedLabelColor', () => {
-      const scale = new CategoricalColorScale(['blue', 'green', 'red']);
-      expect(scale.range()).toEqual(['blue', 'green', 'red']);
-      const sharedLabelColor = getSharedLabelColor();
-      const colorMap = sharedLabelColor.getColorMap();
-      sharedLabelColor.addSlice('cow', 'blue', 1);
-      sharedLabelColor.addSlice('pig', 'red', 1);
-      sharedLabelColor.addSlice('horse', 'green', 1);
-      scale.removeSharedLabelColorFromRange(colorMap, 'goat');
-      expect(scale.range()).toEqual(['blue', 'green', 'red']);
-      sharedLabelColor.clear();
-    });
-
-    it('should remove parentForcedColors from range', () => {
-      const parentForcedColors = { house: 'blue', cow: 'red' };
-      const scale = new CategoricalColorScale(
-        ['blue', 'red', 'green'],
-        parentForcedColors,
-      );
-      const sharedLabelColor = getSharedLabelColor();
-      sharedLabelColor.clear();
-      const colorMap = sharedLabelColor.getColorMap();
-      scale.removeSharedLabelColorFromRange(colorMap, 'pig');
-      expect(scale.range()).toEqual(['green']);
-      scale.removeSharedLabelColorFromRange(colorMap, 'cow');
-      expect(scale.range()).toEqual(['red', 'green']);
-      sharedLabelColor.clear();
-    });
-  });
 });
diff --git a/superset-frontend/packages/superset-ui-core/test/color/LabelsColorMapSingleton.test.ts b/superset-frontend/packages/superset-ui-core/test/color/LabelsColorMapSingleton.test.ts
new file mode 100644
index 0000000000..b93a416e7f
--- /dev/null
+++ b/superset-frontend/packages/superset-ui-core/test/color/LabelsColorMapSingleton.test.ts
@@ -0,0 +1,234 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   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
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  CategoricalColorNamespace,
+  CategoricalScheme,
+  FeatureFlag,
+  getCategoricalSchemeRegistry,
+  getLabelsColorMap,
+  LabelsColorMapSource,
+  LabelsColorMap,
+} from '@superset-ui/core';
+
+const actual = jest.requireActual('../../src/color/utils');
+const getAnalogousColorsSpy = jest
+  .spyOn(actual, 'getAnalogousColors')
+  .mockImplementation(() => ['red', 'green', 'blue']);
+
+describe('LabelsColorMap', () => {
+  beforeAll(() => {
+    getCategoricalSchemeRegistry()
+      .registerValue(
+        'testColors',
+        new CategoricalScheme({
+          id: 'testColors',
+          colors: ['red', 'green', 'blue'],
+        }),
+      )
+      .registerValue(
+        'testColors2',
+        new CategoricalScheme({
+          id: 'testColors2',
+          colors: ['yellow', 'green', 'blue'],
+        }),
+      );
+  });
+
+  beforeEach(() => {
+    getLabelsColorMap().source = LabelsColorMapSource.Dashboard;
+    getLabelsColorMap().clear();
+  });
+
+  it('has default value out-of-the-box', () => {
+    expect(getLabelsColorMap()).toBeInstanceOf(LabelsColorMap);
+  });
+
+  describe('.addSlice(value, color, sliceId)', () => {
+    it('should add to sliceLabelColorMap when first adding label', () => {
+      const labelsColorMap = getLabelsColorMap();
+      labelsColorMap.addSlice('a', 'red', 1, 'preset');
+      expect(labelsColorMap.chartsLabelsMap.has(1)).toEqual(true);
+      const chartConfig = labelsColorMap.chartsLabelsMap.get(1);
+      expect(chartConfig?.labels?.includes('a')).toEqual(true);
+      const colorMap = labelsColorMap.getColorMap();
+      expect(Object.fromEntries(colorMap)).toEqual({ a: 'red' });
+    });
+
+    it('should add to sliceLabelColorMap when slice exist', () => {
+      const labelsColorMap = getLabelsColorMap();
+      labelsColorMap.addSlice('a', 'red', 1);
+      labelsColorMap.addSlice('b', 'blue', 1);
+      const chartConfig = labelsColorMap.chartsLabelsMap.get(1);
+      expect(chartConfig?.labels?.includes('b')).toEqual(true);
+      const colorMap = labelsColorMap.getColorMap();
+      expect(Object.fromEntries(colorMap)).toEqual({ a: 'red', b: 'blue' });
+    });
+
+    it('should use last color if adding label repeatedly', () => {
+      const labelsColorMap = getLabelsColorMap();
+      labelsColorMap.addSlice('b', 'blue', 1);
+      labelsColorMap.addSlice('b', 'green', 1);
+      const chartConfig = labelsColorMap.chartsLabelsMap.get(1);
+      expect(chartConfig?.labels?.includes('b')).toEqual(true);
+      expect(chartConfig?.labels?.length).toEqual(1);
+      const colorMap = labelsColorMap.getColorMap();
+      expect(Object.fromEntries(colorMap)).toEqual({ b: 'green' });
+    });
+
+    it('should do nothing when source is not dashboard', () => {
+      const labelsColorMap = getLabelsColorMap();
+      labelsColorMap.source = LabelsColorMapSource.Explore;
+      labelsColorMap.addSlice('a', 'red', 1);
+      expect(Object.fromEntries(labelsColorMap.chartsLabelsMap)).toEqual({});
+    });
+  });
+
+  describe('.remove(sliceId)', () => {
+    it('should remove sliceId', () => {
+      const labelsColorMap = getLabelsColorMap();
+      labelsColorMap.addSlice('a', 'red', 1);
+      labelsColorMap.removeSlice(1);
+      expect(labelsColorMap.chartsLabelsMap.has(1)).toEqual(false);
+    });
+
+    it('should update colorMap', () => {
+      const labelsColorMap = getLabelsColorMap();
+      labelsColorMap.addSlice('a', 'red', 1);
+      labelsColorMap.addSlice('b', 'blue', 2);
+      labelsColorMap.removeSlice(1);
+      const colorMap = labelsColorMap.getColorMap();
+      expect(Object.fromEntries(colorMap)).toEqual({ b: 'blue' });
+    });
+
+    it('should do nothing when source is not dashboard', () => {
+      const labelsColorMap = getLabelsColorMap();
+      labelsColorMap.addSlice('a', 'red', 1);
+      labelsColorMap.source = LabelsColorMapSource.Explore;
+      labelsColorMap.removeSlice(1);
+      expect(labelsColorMap.chartsLabelsMap.has(1)).toEqual(true);
+    });
+  });
+
+  describe('.updateColorMap(namespace, scheme)', () => {
+    let categoricalNamespace: any;
+    let mockedNamespace: any;
+    let labelsColorMap: any;
+
+    beforeEach(() => {
+      labelsColorMap = getLabelsColorMap();
+      categoricalNamespace = CategoricalColorNamespace.getNamespace(undefined);
+      mockedNamespace = {
+        getScale: jest.fn().mockReturnValue({
+          getColor: jest.fn(() => 'mockColor'),
+        }),
+      };
+    });
+
+    it('should use provided color scheme', () => {
+      labelsColorMap.addSlice('a', 'red', 1);
+      labelsColorMap.updateColorMap(mockedNamespace, 'testColors2');
+      expect(mockedNamespace.getScale).toHaveBeenCalledWith('testColors2');
+    });
+
+    it('should fallback to original chart color scheme if no color scheme is provided', () => {
+      labelsColorMap.addSlice('a', 'red', 1, 'originalScheme');
+      labelsColorMap.updateColorMap(mockedNamespace);
+      expect(mockedNamespace.getScale).toHaveBeenCalledWith('originalScheme');
+    });
+
+    it('should fallback to undefined if no color scheme is provided', () => {
+      labelsColorMap.addSlice('a', 'red', 1);
+      labelsColorMap.addSlice('b', 'blue', 2);
+      labelsColorMap.updateColorMap(mockedNamespace);
+      expect(mockedNamespace.getScale).toHaveBeenCalledWith(undefined);
+    });
+
+    it('should update color map', () => {
+      // override color with forcedItems
+      categoricalNamespace.setColor('b', 'green');
+      // testColors2: 'yellow', 'green', 'blue'
+      // first-time label, gets color, yellow
+      labelsColorMap.addSlice('a', 'red', 1);
+      // overridden, gets green
+      labelsColorMap.addSlice('b', 'pink', 1);
+      // overridden, gets green
+      labelsColorMap.addSlice('b', 'green', 2);
+      // first-time slice label, gets color, yellow
+      labelsColorMap.addSlice('c', 'blue', 2);
+      labelsColorMap.updateColorMap(categoricalNamespace, 'testColors2');
+      const colorMap = labelsColorMap.getColorMap();
+      expect(Object.fromEntries(colorMap)).toEqual({
+        a: 'yellow',
+        b: 'green',
+        c: 'yellow',
+      });
+    });
+
+    it('should use recycle colors', () => {
+      window.featureFlags = {
+        [FeatureFlag.UseAnalagousColors]: false,
+      };
+      labelsColorMap.addSlice('a', 'red', 1);
+      labelsColorMap.addSlice('b', 'blue', 2);
+      labelsColorMap.addSlice('c', 'green', 3);
+      labelsColorMap.addSlice('d', 'red', 4);
+      labelsColorMap.updateColorMap(categoricalNamespace, 'testColors');
+      const colorMap = labelsColorMap.getColorMap();
+      expect(Object.fromEntries(colorMap)).not.toEqual({});
+      expect(getAnalogousColorsSpy).not.toBeCalled();
+    });
+
+    it('should use analagous colors', () => {
+      window.featureFlags = {
+        [FeatureFlag.UseAnalagousColors]: true,
+      };
+
+      labelsColorMap.addSlice('a', 'red', 1);
+      labelsColorMap.addSlice('b', 'blue', 1);
+      labelsColorMap.addSlice('c', 'green', 1);
+      labelsColorMap.addSlice('d', 'red', 1);
+      labelsColorMap.updateColorMap(categoricalNamespace, 'testColors');
+      const colorMap = labelsColorMap.getColorMap();
+      expect(Object.fromEntries(colorMap)).not.toEqual({});
+      expect(getAnalogousColorsSpy).toBeCalled();
+    });
+  });
+
+  describe('.getColorMap()', () => {
+    it('should get color map', () => {
+      const labelsColorMap = getLabelsColorMap();
+      labelsColorMap.addSlice('a', 'red', 1);
+      labelsColorMap.addSlice('b', 'blue', 2);
+      const colorMap = labelsColorMap.getColorMap();
+      expect(Object.fromEntries(colorMap)).toEqual({ a: 'red', b: 'blue' });
+    });
+  });
+
+  describe('.reset()', () => {
+    it('should reset color map', () => {
+      const labelsColorMap = getLabelsColorMap();
+      labelsColorMap.addSlice('a', 'red', 1);
+      labelsColorMap.addSlice('b', 'blue', 2);
+      labelsColorMap.clear();
+      const colorMap = labelsColorMap.getColorMap();
+      expect(Object.fromEntries(colorMap)).toEqual({});
+    });
+  });
+});
diff --git a/superset-frontend/packages/superset-ui-core/test/color/SharedLabelColorSingleton.test.ts b/superset-frontend/packages/superset-ui-core/test/color/SharedLabelColorSingleton.test.ts
deleted file mode 100644
index ca3f89a523..0000000000
--- a/superset-frontend/packages/superset-ui-core/test/color/SharedLabelColorSingleton.test.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   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
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import {
-  CategoricalScheme,
-  FeatureFlag,
-  getCategoricalSchemeRegistry,
-  getSharedLabelColor,
-  SharedLabelColor,
-  SharedLabelColorSource,
-} from '@superset-ui/core';
-
-const actual = jest.requireActual('../../src/color/utils');
-const getAnalogousColorsSpy = jest
-  .spyOn(actual, 'getAnalogousColors')
-  .mockImplementation(() => ['red', 'green', 'blue']);
-
-describe('SharedLabelColor', () => {
-  beforeAll(() => {
-    getCategoricalSchemeRegistry()
-      .registerValue(
-        'testColors',
-        new CategoricalScheme({
-          id: 'testColors',
-          colors: ['red', 'green', 'blue'],
-        }),
-      )
-      .registerValue(
-        'testColors2',
-        new CategoricalScheme({
-          id: 'testColors2',
-          colors: ['yellow', 'green', 'blue'],
-        }),
-      );
-  });
-
-  beforeEach(() => {
-    getSharedLabelColor().source = SharedLabelColorSource.Dashboard;
-    getSharedLabelColor().clear();
-  });
-
-  it('has default value out-of-the-box', () => {
-    expect(getSharedLabelColor()).toBeInstanceOf(SharedLabelColor);
-  });
-
-  describe('.addSlice(value, color, sliceId)', () => {
-    it('should add to sliceLabelColorMap when first adding label', () => {
-      const sharedLabelColor = getSharedLabelColor();
-      sharedLabelColor.addSlice('a', 'red', 1);
-      expect(sharedLabelColor.sliceLabelMap.has(1)).toEqual(true);
-      const labels = sharedLabelColor.sliceLabelMap.get(1);
-      expect(labels?.includes('a')).toEqual(true);
-      const colorMap = sharedLabelColor.getColorMap();
-      expect(Object.fromEntries(colorMap)).toEqual({ a: 'red' });
-    });
-
-    it('should add to sliceLabelColorMap when slice exist', () => {
-      const sharedLabelColor = getSharedLabelColor();
-      sharedLabelColor.addSlice('a', 'red', 1);
-      sharedLabelColor.addSlice('b', 'blue', 1);
-      const labels = sharedLabelColor.sliceLabelMap.get(1);
-      expect(labels?.includes('b')).toEqual(true);
-      const colorMap = sharedLabelColor.getColorMap();
-      expect(Object.fromEntries(colorMap)).toEqual({ a: 'red', b: 'blue' });
-    });
-
-    it('should use last color if adding label repeatedly', () => {
-      const sharedLabelColor = getSharedLabelColor();
-      sharedLabelColor.addSlice('b', 'blue', 1);
-      sharedLabelColor.addSlice('b', 'green', 1);
-      const labels = sharedLabelColor.sliceLabelMap.get(1);
-      expect(labels?.includes('b')).toEqual(true);
-      expect(labels?.length).toEqual(1);
-      const colorMap = sharedLabelColor.getColorMap();
-      expect(Object.fromEntries(colorMap)).toEqual({ b: 'green' });
-    });
-
-    it('should do nothing when source is not dashboard', () => {
-      const sharedLabelColor = getSharedLabelColor();
-      sharedLabelColor.source = SharedLabelColorSource.Explore;
-      sharedLabelColor.addSlice('a', 'red');
-      expect(Object.fromEntries(sharedLabelColor.sliceLabelMap)).toEqual({});
-    });
-
-    it('should do nothing when sliceId is undefined', () => {
-      const sharedLabelColor = getSharedLabelColor();
-      sharedLabelColor.addSlice('a', 'red');
-      expect(Object.fromEntries(sharedLabelColor.sliceLabelMap)).toEqual({});
-    });
-  });
-
-  describe('.remove(sliceId)', () => {
-    it('should remove sliceId', () => {
-      const sharedLabelColor = getSharedLabelColor();
-      sharedLabelColor.addSlice('a', 'red', 1);
-      sharedLabelColor.removeSlice(1);
-      expect(sharedLabelColor.sliceLabelMap.has(1)).toEqual(false);
-    });
-
-    it('should update colorMap', () => {
-      const sharedLabelColor = getSharedLabelColor();
-      sharedLabelColor.addSlice('a', 'red', 1);
-      sharedLabelColor.addSlice('b', 'blue', 2);
-      sharedLabelColor.removeSlice(1);
-      const colorMap = sharedLabelColor.getColorMap();
-      expect(Object.fromEntries(colorMap)).toEqual({ b: 'blue' });
-    });
-
-    it('should do nothing when source is not dashboard', () => {
-      const sharedLabelColor = getSharedLabelColor();
-      sharedLabelColor.addSlice('a', 'red', 1);
-      sharedLabelColor.source = SharedLabelColorSource.Explore;
-      sharedLabelColor.removeSlice(1);
-      expect(sharedLabelColor.sliceLabelMap.has(1)).toEqual(true);
-    });
-  });
-
-  describe('.updateColorMap(namespace, scheme)', () => {
-    it('should update color map', () => {
-      const sharedLabelColor = getSharedLabelColor();
-      sharedLabelColor.addSlice('a', 'red', 1);
-      sharedLabelColor.addSlice('b', 'pink', 1);
-      sharedLabelColor.addSlice('b', 'green', 2);
-      sharedLabelColor.addSlice('c', 'blue', 2);
-      sharedLabelColor.updateColorMap('', 'testColors2');
-      const colorMap = sharedLabelColor.getColorMap();
-      expect(Object.fromEntries(colorMap)).toEqual({
-        a: 'yellow',
-        b: 'yellow',
-        c: 'green',
-      });
-    });
-
-    it('should use recycle colors', () => {
-      window.featureFlags = {
-        [FeatureFlag.UseAnalagousColors]: false,
-      };
-      const sharedLabelColor = getSharedLabelColor();
-      sharedLabelColor.addSlice('a', 'red', 1);
-      sharedLabelColor.addSlice('b', 'blue', 2);
-      sharedLabelColor.addSlice('c', 'green', 3);
-      sharedLabelColor.addSlice('d', 'red', 4);
-      sharedLabelColor.updateColorMap('', 'testColors');
-      const colorMap = sharedLabelColor.getColorMap();
-      expect(Object.fromEntries(colorMap)).not.toEqual({});
-      expect(getAnalogousColorsSpy).not.toBeCalled();
-    });
-
-    it('should use analagous colors', () => {
-      window.featureFlags = {
-        [FeatureFlag.UseAnalagousColors]: true,
-      };
-      const sharedLabelColor = getSharedLabelColor();
-      sharedLabelColor.addSlice('a', 'red', 1);
-      sharedLabelColor.addSlice('b', 'blue', 1);
-      sharedLabelColor.addSlice('c', 'green', 1);
-      sharedLabelColor.addSlice('d', 'red', 1);
-      sharedLabelColor.updateColorMap('', 'testColors');
-      const colorMap = sharedLabelColor.getColorMap();
-      expect(Object.fromEntries(colorMap)).not.toEqual({});
-      expect(getAnalogousColorsSpy).toBeCalled();
-    });
-  });
-
-  describe('.getColorMap()', () => {
-    it('should get color map', () => {
-      const sharedLabelColor = getSharedLabelColor();
-      sharedLabelColor.addSlice('a', 'red', 1);
-      sharedLabelColor.addSlice('b', 'blue', 2);
-      const colorMap = sharedLabelColor.getColorMap();
-      expect(Object.fromEntries(colorMap)).toEqual({ a: 'red', b: 'blue' });
-    });
-  });
-
-  describe('.reset()', () => {
-    it('should reset color map', () => {
-      const sharedLabelColor = getSharedLabelColor();
-      sharedLabelColor.addSlice('a', 'red', 1);
-      sharedLabelColor.addSlice('b', 'blue', 2);
-      sharedLabelColor.reset();
-      const colorMap = sharedLabelColor.getColorMap();
-      expect(Object.fromEntries(colorMap)).toEqual({ a: '', b: '' });
-    });
-  });
-});
diff --git a/superset-frontend/plugins/legacy-plugin-chart-chord/src/Chord.js b/superset-frontend/plugins/legacy-plugin-chart-chord/src/Chord.js
index d0aed798de..2daed05f47 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-chord/src/Chord.js
+++ b/superset-frontend/plugins/legacy-plugin-chart-chord/src/Chord.js
@@ -93,7 +93,7 @@ function Chord(element, props) {
     .append('path')
     .attr('id', (d, i) => `group${i}`)
     .attr('d', arc)
-    .style('fill', (d, i) => colorFn(nodes[i], sliceId));
+    .style('fill', (d, i) => colorFn(nodes[i], sliceId, colorScheme));
 
   // Add a text label.
   const groupText = group.append('text').attr('x', 6).attr('dy', 15);
@@ -121,7 +121,7 @@ function Chord(element, props) {
     .on('mouseover', d => {
       chord.classed('fade', p => p !== d);
     })
-    .style('fill', d => colorFn(nodes[d.source.index], sliceId))
+    .style('fill', d => colorFn(nodes[d.source.index], sliceId, colorScheme))
     .attr('d', path);
 
   // Add an elaborate mouseover title for each chord.
diff --git a/superset-frontend/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx b/superset-frontend/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx
index 535f3c3b63..0af5f8bf77 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx
@@ -78,7 +78,7 @@ class CustomHistogram extends PureComponent {
     const keys = data.map(d => d.key);
     const colorScale = scaleOrdinal({
       domain: keys,
-      range: keys.map(x => colorFn(x, sliceId)),
+      range: keys.map(x => colorFn(x, sliceId, colorScheme)),
     });
 
     return (
diff --git a/superset-frontend/plugins/legacy-plugin-chart-partition/src/Partition.js b/superset-frontend/plugins/legacy-plugin-chart-partition/src/Partition.js
index 2247061668..e0ebd559a9 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-partition/src/Partition.js
+++ b/superset-frontend/plugins/legacy-plugin-chart-partition/src/Partition.js
@@ -384,7 +384,7 @@ function Icicle(element, props) {
 
     // Apply color scheme
     g.selectAll('rect').style('fill', d => {
-      d.color = colorFn(d.name, sliceId);
+      d.color = colorFn(d.name, sliceId, colorScheme);
 
       return d.color;
     });
diff --git a/superset-frontend/plugins/legacy-plugin-chart-rose/src/Rose.js b/superset-frontend/plugins/legacy-plugin-chart-rose/src/Rose.js
index 2dfa2ffdd7..e54fc0b6c5 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-rose/src/Rose.js
+++ b/superset-frontend/plugins/legacy-plugin-chart-rose/src/Rose.js
@@ -120,10 +120,16 @@ function Rose(element, props) {
           .map(v => ({
             key: v.name,
             value: v.value,
-            color: colorFn(v.name, sliceId),
+            color: colorFn(v.name, sliceId, colorScheme),
             highlight: v.id === d.arcId,
           }))
-      : [{ key: d.name, value: d.val, color: colorFn(d.name, sliceId) }];
+      : [
+          {
+            key: d.name,
+            value: d.val,
+            color: colorFn(d.name, sliceId, colorScheme),
+          },
+        ];
 
     return {
       key: 'Date',
@@ -132,7 +138,7 @@ function Rose(element, props) {
     };
   }
 
-  legend.width(width).color(d => colorFn(d.key, sliceId));
+  legend.width(width).color(d => colorFn(d.key, sliceId, colorScheme));
   legendWrap.datum(legendData(datum)).call(legend);
 
   tooltip.headerFormatter(timeFormat).valueFormatter(format);
@@ -379,7 +385,7 @@ function Rose(element, props) {
   const arcs = ae
     .append('path')
     .attr('class', 'arc')
-    .attr('fill', d => colorFn(d.name, sliceId))
+    .attr('fill', d => colorFn(d.name, sliceId, colorScheme))
     .attr('d', arc);
 
   function mousemove() {
diff --git a/superset-frontend/plugins/legacy-plugin-chart-sankey/src/Sankey.js b/superset-frontend/plugins/legacy-plugin-chart-sankey/src/Sankey.js
index d8c8f61e44..0639edad45 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-sankey/src/Sankey.js
+++ b/superset-frontend/plugins/legacy-plugin-chart-sankey/src/Sankey.js
@@ -219,7 +219,7 @@ function Sankey(element, props) {
     .attr('width', sankey.nodeWidth())
     .style('fill', d => {
       const name = d.name || 'N/A';
-      d.color = colorFn(name, sliceId);
+      d.color = colorFn(name, sliceId, colorScheme);
 
       return d.color;
     })
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/CategoricalDeckGLContainer.tsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/CategoricalDeckGLContainer.tsx
index 2b81b8a8d2..7dff2af221 100644
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/CategoricalDeckGLContainer.tsx
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/CategoricalDeckGLContainer.tsx
@@ -58,7 +58,10 @@ function getCategories(fd: QueryFormData, data: JsonObject[]) {
     if (d.cat_color != null && !categories.hasOwnProperty(d.cat_color)) {
       let color;
       if (fd.dimension) {
-        color = hexToRGB(colorFn(d.cat_color, fd.sliceId), c.a * 255);
+        color = hexToRGB(
+          colorFn(d.cat_color, fd.sliceId, fd.color_scheme),
+          c.a * 255,
+        );
       } else {
         color = fixedColor;
       }
@@ -134,7 +137,10 @@ const CategoricalDeckGLContainer = (props: CategoricalDeckGLContainerProps) => {
     return data.map(d => {
       let color;
       if (fd.dimension) {
-        color = hexToRGB(colorFn(d.cat_color, fd.sliceId), c.a * 255);
+        color = hexToRGB(
+          colorFn(d.cat_color, fd.sliceId, fd.color_scheme),
+          c.a * 255,
+        );
 
         return { ...d, color };
       }
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js
index a454fe28b4..06455f16d8 100644
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js
@@ -658,7 +658,9 @@ function nvd3Vis(element, props) {
     } else if (vizType !== 'bullet') {
       const colorFn = getScale(colorScheme);
       chart.color(
-        d => d.color || colorFn(cleanColorInput(d[colorKey]), sliceId),
+        d =>
+          d.color ||
+          colorFn(cleanColorInput(d[colorKey]), sliceId, colorScheme),
       );
     }
 
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts
index 0edeadb7fa..4f5c8f323f 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts
@@ -108,9 +108,9 @@ export default function transformProps(
             datum[`${metric}__outliers`],
           ],
           itemStyle: {
-            color: colorFn(groupbyLabel, sliceId),
+            color: colorFn(groupbyLabel, sliceId, colorScheme),
             opacity: isFiltered ? OpacityEnum.SemiTransparent : 0.6,
-            borderColor: colorFn(groupbyLabel, sliceId),
+            borderColor: colorFn(groupbyLabel, sliceId, colorScheme),
           },
         };
       });
@@ -149,7 +149,7 @@ export default function transformProps(
             },
           },
           itemStyle: {
-            color: colorFn(groupbyLabel, sliceId),
+            color: colorFn(groupbyLabel, sliceId, colorScheme),
             opacity: isFiltered
               ? OpacityEnum.SemiTransparent
               : OpacityEnum.NonTransparent,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts
index daca2eb678..a0b0569337 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts
@@ -174,7 +174,7 @@ export default function transformProps(
       value,
       name,
       itemStyle: {
-        color: colorFn(name, sliceId),
+        color: colorFn(name, sliceId, colorScheme),
         opacity: isFiltered
           ? OpacityEnum.SemiTransparent
           : OpacityEnum.NonTransparent,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts
index 868cc0df36..187ce67dcb 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts
@@ -173,7 +173,7 @@ export default function transformProps(
         value: data_point[metricLabel] as number,
         name,
         itemStyle: {
-          color: colorFn(index, sliceId),
+          color: colorFn(index, sliceId, colorScheme),
         },
         title: {
           offsetCenter: [
@@ -201,7 +201,7 @@ export default function transformProps(
         item = {
           ...item,
           itemStyle: {
-            color: colorFn(index, sliceId),
+            color: colorFn(index, sliceId, colorScheme),
             opacity: OpacityEnum.SemiTransparent,
           },
           detail: {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts
index e79b5ac874..2cc3aff92f 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts
@@ -277,7 +277,7 @@ export default function transformProps(
       type: 'graph',
       categories: categoryList.map(c => ({
         name: c,
-        itemStyle: { color: colorFn(c, sliceId) },
+        itemStyle: { color: colorFn(c, sliceId, colorScheme) },
       })),
       layout,
       force: {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts
index 40d49908e9..1b3898d8fd 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts
@@ -222,7 +222,7 @@ export default function transformProps(
       value,
       name,
       itemStyle: {
-        color: colorFn(name, sliceId),
+        color: colorFn(name, sliceId, colorScheme),
         opacity: isFiltered
           ? OpacityEnum.SemiTransparent
           : OpacityEnum.NonTransparent,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts
index c8c3c7ed15..dd49a1b872 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts
@@ -165,7 +165,7 @@ export default function transformProps(
       value: metricLabels.map(metricLabel => datum[metricLabel]),
       name: joinedName,
       itemStyle: {
-        color: colorFn(joinedName, sliceId),
+        color: colorFn(joinedName, sliceId, colorScheme),
         opacity: isFiltered
           ? OpacityEnum.Transparent
           : OpacityEnum.NonTransparent,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts
index 09bdd19154..73feda2b2e 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts
@@ -183,7 +183,7 @@ export default function transformProps(
           colorSaturation: COLOR_SATURATION,
           itemStyle: {
             borderColor: BORDER_COLOR,
-            color: colorFn(name, sliceId),
+            color: colorFn(name, sliceId, colorScheme),
             borderWidth: BORDER_WIDTH,
             gapWidth: GAP_WIDTH,
           },
@@ -216,7 +216,7 @@ export default function transformProps(
       colorSaturation: COLOR_SATURATION,
       itemStyle: {
         borderColor: BORDER_COLOR,
-        color: colorFn(`${metricLabel}`, sliceId),
+        color: colorFn(`${metricLabel}`, sliceId, colorScheme),
         borderWidth: BORDER_WIDTH,
         gapWidth: GAP_WIDTH,
       },
diff --git a/superset-frontend/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx b/superset-frontend/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx
index fa23001283..53bf98fe90 100644
--- a/superset-frontend/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx
+++ b/superset-frontend/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx
@@ -66,6 +66,7 @@ export interface WordCloudProps extends WordCloudVisualProps {
   height: number;
   width: number;
   sliceId: number;
+  colorScheme: string;
 }
 
 export interface WordCloudState {
@@ -221,7 +222,7 @@ class WordCloud extends PureComponent<FullWordCloudProps, WordCloudState> {
 
   render() {
     const { scaleFactor } = this.state;
-    const { width, height, encoding, sliceId } = this.props;
+    const { width, height, encoding, sliceId, colorScheme } = this.props;
     const { words } = this.state;
 
     // @ts-ignore
@@ -249,7 +250,11 @@ class WordCloud extends PureComponent<FullWordCloudProps, WordCloudState> {
               fontSize={`${w.size}px`}
               fontWeight={w.weight}
               fontFamily={w.font}
-              fill={colorFn(getValueFromDatum(w) as string, sliceId)}
+              fill={colorFn(
+                getValueFromDatum(w) as string,
+                sliceId,
+                colorScheme,
+              )}
               textAnchor="middle"
               transform={`translate(${w.x}, ${w.y}) rotate(${w.rotate})`}
             >
diff --git a/superset-frontend/plugins/plugin-chart-word-cloud/src/legacyPlugin/transformProps.ts b/superset-frontend/plugins/plugin-chart-word-cloud/src/legacyPlugin/transformProps.ts
index 0b5a36b999..5685edd921 100644
--- a/superset-frontend/plugins/plugin-chart-word-cloud/src/legacyPlugin/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-word-cloud/src/legacyPlugin/transformProps.ts
@@ -80,5 +80,6 @@ export default function transformProps(chartProps: ChartProps): WordCloudProps {
     rotation,
     width,
     sliceId,
+    colorScheme,
   };
 }
diff --git a/superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/transformProps.ts b/superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/transformProps.ts
index 4ed6f6405c..59f6258538 100644
--- a/superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/transformProps.ts
@@ -23,7 +23,8 @@ import { WordCloudFormData } from '../types';
 
 export default function transformProps(chartProps: ChartProps): WordCloudProps {
   const { width, height, formData, queriesData } = chartProps;
-  const { encoding, rotation, sliceId } = formData as WordCloudFormData;
+  const { encoding, rotation, sliceId, colorScheme } =
+    formData as WordCloudFormData;
 
   return {
     data: queriesData[0].data,
@@ -32,5 +33,6 @@ export default function transformProps(chartProps: ChartProps): WordCloudProps {
     rotation,
     width,
     sliceId,
+    colorScheme,
   };
 }
diff --git a/superset-frontend/plugins/plugin-chart-word-cloud/test/legacyPlugin/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-word-cloud/test/legacyPlugin/transformProps.test.ts
index a086b139a9..a61e7408de 100644
--- a/superset-frontend/plugins/plugin-chart-word-cloud/test/legacyPlugin/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-word-cloud/test/legacyPlugin/transformProps.test.ts
@@ -68,6 +68,7 @@ describe('WordCloud transformProps', () => {
         },
       },
       rotation: 'square',
+      colorScheme: 'bnbColors',
       data: [{ name: 'Hulk', sum__num: 1 }],
     });
   });
diff --git a/superset-frontend/src/components/Chart/Chart.jsx b/superset-frontend/src/components/Chart/Chart.jsx
index a77b135b30..ea1a2d968c 100644
--- a/superset-frontend/src/components/Chart/Chart.jsx
+++ b/superset-frontend/src/components/Chart/Chart.jsx
@@ -54,8 +54,8 @@ const propTypes = {
   // formData contains chart's own filter parameter
   // and merged with extra filter that current dashboard applying
   formData: PropTypes.object.isRequired,
-  labelColors: PropTypes.object,
-  sharedLabelColors: PropTypes.object,
+  labelsColor: PropTypes.object,
+  labelsColorMap: PropTypes.object,
   width: PropTypes.number,
   height: PropTypes.number,
   setControlValue: PropTypes.func,
diff --git a/superset-frontend/src/components/Chart/ChartRenderer.jsx b/superset-frontend/src/components/Chart/ChartRenderer.jsx
index ddedd4597b..b9cd6caf4f 100644
--- a/superset-frontend/src/components/Chart/ChartRenderer.jsx
+++ b/superset-frontend/src/components/Chart/ChartRenderer.jsx
@@ -41,8 +41,8 @@ const propTypes = {
   initialValues: PropTypes.object,
   formData: PropTypes.object.isRequired,
   latestQueryFormData: PropTypes.object,
-  labelColors: PropTypes.object,
-  sharedLabelColors: PropTypes.object,
+  labelsColor: PropTypes.object,
+  labelsColorMap: PropTypes.object,
   height: PropTypes.number,
   width: PropTypes.number,
   setControlValue: PropTypes.func,
@@ -153,8 +153,8 @@ class ChartRenderer extends Component {
         nextProps.height !== this.props.height ||
         nextProps.width !== this.props.width ||
         nextProps.triggerRender ||
-        nextProps.labelColors !== this.props.labelColors ||
-        nextProps.sharedLabelColors !== this.props.sharedLabelColors ||
+        nextProps.labelsColor !== this.props.labelsColor ||
+        nextProps.labelsColorMap !== this.props.labelsColorMap ||
         nextProps.formData.color_scheme !== this.props.formData.color_scheme ||
         nextProps.formData.stack !== this.props.formData.stack ||
         nextProps.cacheBusterProp !== this.props.cacheBusterProp ||
diff --git a/superset-frontend/src/dashboard/actions/dashboardInfo.ts b/superset-frontend/src/dashboard/actions/dashboardInfo.ts
index d1029203c7..14659b9fc3 100644
--- a/superset-frontend/src/dashboard/actions/dashboardInfo.ts
+++ b/superset-frontend/src/dashboard/actions/dashboardInfo.ts
@@ -17,13 +17,7 @@
  * under the License.
  */
 import { Dispatch } from 'redux';
-import {
-  makeApi,
-  CategoricalColorNamespace,
-  t,
-  getErrorText,
-} from '@superset-ui/core';
-import { isString } from 'lodash';
+import { makeApi, t, getErrorText } from '@superset-ui/core';
 import { addDangerToast } from 'src/components/MessageToasts/actions';
 import {
   ChartConfiguration,
@@ -36,39 +30,8 @@ import { onSave } from './dashboardState';
 
 export const DASHBOARD_INFO_UPDATED = 'DASHBOARD_INFO_UPDATED';
 
-export function updateColorSchema(
-  metadata: Record<string, any>,
-  labelColors: Record<string, string>,
-) {
-  const categoricalNamespace = CategoricalColorNamespace.getNamespace(
-    metadata?.color_namespace,
-  );
-  const colorMap = isString(labelColors)
-    ? JSON.parse(labelColors)
-    : labelColors;
-  Object.keys(colorMap).forEach(label => {
-    categoricalNamespace.setColor(label, colorMap[label]);
-  });
-}
-
 // updates partially changed dashboard info
 export function dashboardInfoChanged(newInfo: { metadata: any }) {
-  const { metadata } = newInfo;
-
-  const categoricalNamespace = CategoricalColorNamespace.getNamespace(
-    metadata?.color_namespace,
-  );
-
-  categoricalNamespace.resetColors();
-
-  if (metadata?.shared_label_colors) {
-    updateColorSchema(metadata, metadata?.shared_label_colors);
-  }
-
-  if (metadata?.label_colors) {
-    updateColorSchema(metadata, metadata?.label_colors);
-  }
-
   return { type: DASHBOARD_INFO_UPDATED, newInfo };
 }
 export const SAVE_CHART_CONFIG_BEGIN = 'SAVE_CHART_CONFIG_BEGIN';
diff --git a/superset-frontend/src/dashboard/actions/dashboardState.js b/superset-frontend/src/dashboard/actions/dashboardState.js
index b0e8a2719e..9b0c181821 100644
--- a/superset-frontend/src/dashboard/actions/dashboardState.js
+++ b/superset-frontend/src/dashboard/actions/dashboardState.js
@@ -23,10 +23,11 @@ import {
   ensureIsArray,
   isFeatureEnabled,
   FeatureFlag,
-  getSharedLabelColor,
+  getLabelsColorMap,
   SupersetClient,
   t,
   getClientErrorObject,
+  getCategoricalSchemeRegistry,
 } from '@superset-ui/core';
 import {
   addChart,
@@ -64,6 +65,13 @@ import { fetchDatasourceMetadata } from './datasources';
 import { updateDirectPathToFilter } from './dashboardFilters';
 import { SET_FILTER_CONFIG_COMPLETE } from './nativeFilters';
 import getOverwriteItems from '../util/getOverwriteItems';
+import {
+  applyColors,
+  isLabelsColorMapSynced,
+  getLabelsColorMapEntries,
+  getColorSchemeDomain,
+  getColorNamespace,
+} from '../../utils/colorScheme';
 
 export const SET_UNSAVED_CHANGES = 'SET_UNSAVED_CHANGES';
 export function setUnsavedChanges(hasUnsavedChanges) {
@@ -261,7 +269,7 @@ export function saveDashboardRequest(data, id, saveType) {
       slug: slug || null,
       metadata: {
         ...data.metadata,
-        color_namespace: data.metadata?.color_namespace || undefined,
+        color_namespace: getColorNamespace(data.metadata?.color_namespace),
         color_scheme: data.metadata?.color_scheme || '',
         color_scheme_domain: data.metadata?.color_scheme_domain || [],
         expanded_slices: data.metadata?.expanded_slices || {},
@@ -584,7 +592,7 @@ export function removeSliceFromDashboard(id) {
   return dispatch => {
     dispatch(removeSlice(id));
     dispatch(removeChart(id));
-    getSharedLabelColor().removeSlice(id);
+    getLabelsColorMap().removeSlice(id);
   };
 }
 
@@ -657,3 +665,69 @@ export function setDatasetsStatus(status) {
     status,
   };
 }
+
+const updateDashboardMetadata = async (id, metadata, dispatch) => {
+  await SupersetClient.put({
+    endpoint: `/api/v1/dashboard/${id}`,
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ json_metadata: JSON.stringify(metadata) }),
+  });
+  dispatch(dashboardInfoChanged({ metadata }));
+};
+
+export const updateDashboardLabelsColor = () => async (dispatch, getState) => {
+  const {
+    dashboardInfo: { id, metadata },
+  } = getState();
+  const categoricalSchemes = getCategoricalSchemeRegistry();
+  const colorScheme = metadata?.color_scheme;
+  const colorSchemeRegistry = categoricalSchemes.get(
+    metadata?.color_scheme,
+    true,
+  );
+  const defaultScheme = categoricalSchemes.defaultKey;
+  const fallbackScheme = defaultScheme?.toString() || 'supersetColors';
+  const colorSchemeDomain = metadata?.color_scheme_domain || [];
+
+  try {
+    const updatedMetadata = { ...metadata };
+    let updatedScheme = metadata?.color_scheme;
+
+    // Color scheme does not exist anymore, fallback to default
+    if (colorScheme && !colorSchemeRegistry) {
+      updatedScheme = fallbackScheme;
+      updatedMetadata.color_scheme = updatedScheme;
+      updatedMetadata.color_scheme_domain = getColorSchemeDomain(colorScheme);
+
+      dispatch(setColorScheme(updatedScheme));
+      // must re-apply colors from fresh labels color map
+      applyColors(updatedMetadata, true);
+    }
+
+    // stored labels color map and applied might differ
+    const isMapSynced = isLabelsColorMapSynced(metadata);
+    if (!isMapSynced) {
+      // re-apply a fresh labels color map
+      applyColors(updatedMetadata, true);
+      // pull and store the just applied labels color map
+      updatedMetadata.shared_label_colors = getLabelsColorMapEntries();
+    }
+
+    // the stored color domain registry and fresh might differ at this point
+    const freshColorSchemeDomain = getColorSchemeDomain(colorScheme);
+    const isRegistrySynced =
+      colorSchemeDomain.toString() !== freshColorSchemeDomain.toString();
+    if (colorScheme && !isRegistrySynced) {
+      updatedMetadata.color_scheme_domain = freshColorSchemeDomain;
+    }
+
+    if (
+      (colorScheme && (!colorSchemeRegistry || !isRegistrySynced)) ||
+      !isMapSynced
+    ) {
+      await updateDashboardMetadata(id, updatedMetadata, dispatch);
+    }
+  } catch (error) {
+    console.error('Failed to update dashboard color settings:', error);
+  }
+};
diff --git a/superset-frontend/src/dashboard/actions/hydrate.js b/superset-frontend/src/dashboard/actions/hydrate.js
index 7898ad0929..8dd36a8063 100644
--- a/superset-frontend/src/dashboard/actions/hydrate.js
+++ b/superset-frontend/src/dashboard/actions/hydrate.js
@@ -51,7 +51,6 @@ import { URL_PARAMS } from 'src/constants';
 import { getUrlParam } from 'src/utils/urlUtils';
 import { ResourceStatus } from 'src/hooks/apiResources/apiResources';
 import extractUrlParams from '../util/extractUrlParams';
-import { updateColorSchema } from './dashboardInfo';
 import updateComponentParentsList from '../util/updateComponentParentsList';
 import { FilterBarOrientation } from '../types';
 
@@ -71,16 +70,6 @@ export const hydrateDashboard =
       chart.slice_id = chart.form_data.slice_id;
     });
 
-    if (metadata?.shared_label_colors) {
-      updateColorSchema(metadata, metadata?.shared_label_colors);
-    }
-
-    // Priming the color palette with user's label-color mapping provided in
-    // the dashboard's JSON metadata
-    if (metadata?.label_colors) {
-      updateColorSchema(metadata, metadata?.label_colors);
-    }
-
     // new dash: position_json could be {} or null
     const layout =
       positionData && Object.keys(positionData).length > 0
diff --git a/superset-frontend/src/dashboard/components/ColorSchemeControlWrapper.jsx b/superset-frontend/src/dashboard/components/ColorSchemeControlWrapper.jsx
index 30a6c4c8a5..c4204a3c1c 100644
--- a/superset-frontend/src/dashboard/components/ColorSchemeControlWrapper.jsx
+++ b/superset-frontend/src/dashboard/components/ColorSchemeControlWrapper.jsx
@@ -27,11 +27,11 @@ const propTypes = {
   onChange: PropTypes.func,
   labelMargin: PropTypes.number,
   colorScheme: PropTypes.string,
-  hasCustomLabelColors: PropTypes.bool,
+  hasCustomLabelsColor: PropTypes.bool,
 };
 
 const defaultProps = {
-  hasCustomLabelColors: false,
+  hasCustomLabelsColor: false,
   colorScheme: undefined,
   onChange: () => {},
 };
@@ -50,7 +50,7 @@ class ColorSchemeControlWrapper extends PureComponent {
   }
 
   render() {
-    const { colorScheme, labelMargin = 0, hasCustomLabelColors } = this.props;
+    const { colorScheme, labelMargin = 0, hasCustomLabelsColor } = this.props;
     return (
       <ColorSchemeControl
         description={t(
@@ -64,7 +64,7 @@ class ColorSchemeControlWrapper extends PureComponent {
         clearable
         schemes={this.schemes}
         hovered={this.state.hovered}
-        hasCustomLabelColors={hasCustomLabelColors}
+        hasCustomLabelsColor={hasCustomLabelsColor}
       />
     );
   }
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
index 996f377193..7c27a9f1f7 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
@@ -18,14 +18,13 @@
  */
 // ParentSize uses resize observer so the dashboard will update size
 // when its container size changes, due to e.g., builder side panel opening
-import { FC, useCallback, useEffect, useMemo, useRef } from 'react';
+import { FC, useEffect, useMemo, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   Filter,
   Filters,
-  getCategoricalSchemeRegistry,
-  SupersetClient,
-  useComponentDidUpdate,
+  LabelsColorMapSource,
+  getLabelsColorMap,
 } from '@superset-ui/core';
 import { ParentSize } from '@visx/responsive';
 import { pick } from 'lodash';
@@ -44,9 +43,12 @@ import {
 import { getChartIdsInFilterScope } from 'src/dashboard/util/getChartIdsInFilterScope';
 import findTabIndexByComponentId from 'src/dashboard/util/findTabIndexByComponentId';
 import { setInScopeStatusOfFilters } from 'src/dashboard/actions/nativeFilters';
-import { dashboardInfoChanged } from 'src/dashboard/actions/dashboardInfo';
-import { setColorScheme } from 'src/dashboard/actions/dashboardState';
-import jsonStringify from 'json-stringify-pretty-compact';
+import { updateDashboardLabelsColor } from 'src/dashboard/actions/dashboardState';
+import {
+  applyColors,
+  getColorNamespace,
+  resetColors,
+} from 'src/utils/colorScheme';
 import { NATIVE_FILTER_DIVIDER_PREFIX } from '../nativeFilters/FiltersConfigModal/utils';
 import { findTabsWithChartsInScope } from '../nativeFilters/utils';
 import { getRootLevelTabsComponent } from './utils';
@@ -131,85 +133,6 @@ const DashboardContainer: FC<DashboardContainerProps> = ({ topLevelTabs }) => {
     dispatch(setInScopeStatusOfFilters(scopes));
   }, [nativeFilterScopes, dashboardLayout, dispatch]);
 
-  const verifyUpdateColorScheme = useCallback(() => {
-    const currentMetadata = dashboardInfo.metadata;
-    if (currentMetadata?.color_scheme) {
-      const metadata = { ...currentMetadata };
-      const colorScheme = metadata?.color_scheme;
-      const colorSchemeDomain = metadata?.color_scheme_domain || [];
-      const categoricalSchemes = getCategoricalSchemeRegistry();
-      const registryColorScheme =
-        categoricalSchemes.get(colorScheme, true) || undefined;
-      const registryColorSchemeDomain = registryColorScheme?.colors || [];
-      const defaultColorScheme = categoricalSchemes.defaultKey;
-      const colorSchemeExists = !!registryColorScheme;
-
-      const updateDashboardData = () => {
-        SupersetClient.put({
-          endpoint: `/api/v1/dashboard/${dashboardInfo.id}`,
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            json_metadata: jsonStringify(metadata),
-          }),
-        }).catch(e => console.log(e));
-      };
-      const updateColorScheme = (scheme: string) => {
-        dispatch(setColorScheme(scheme));
-      };
-      const updateDashboard = () => {
-        dispatch(
-          dashboardInfoChanged({
-            metadata,
-          }),
-        );
-        updateDashboardData();
-      };
-      // selected color scheme does not exist anymore
-      // must fallback to the available default one
-      if (!colorSchemeExists) {
-        const updatedScheme =
-          defaultColorScheme?.toString() || 'supersetColors';
-        metadata.color_scheme = updatedScheme;
-        metadata.color_scheme_domain =
-          categoricalSchemes.get(defaultColorScheme)?.colors || [];
-
-        // reset shared_label_colors
-        // TODO: Requires regenerating the shared_label_colors after
-        // fixing a bug which affects their generation on dashboards with tabs
-        metadata.shared_label_colors = {};
-
-        updateColorScheme(updatedScheme);
-        updateDashboard();
-      } else {
-        // if this dashboard does not have a color_scheme_domain saved
-        // must create one and store it for the first time
-        if (colorSchemeExists && !colorSchemeDomain.length) {
-          metadata.color_scheme_domain = registryColorSchemeDomain;
-          updateDashboard();
-        }
-        // if the color_scheme_domain is not the same as the registry domain
-        // must update the existing color_scheme_domain
-        if (
-          colorSchemeExists &&
-          colorSchemeDomain.length &&
-          registryColorSchemeDomain.toString() !== colorSchemeDomain.toString()
-        ) {
-          metadata.color_scheme_domain = registryColorSchemeDomain;
-
-          // reset shared_label_colors
-          // TODO: Requires regenerating the shared_label_colors after
-          // fixing a bug which affects their generation on dashboards with tabs
-          metadata.shared_label_colors = {};
-
-          updateColorScheme(colorScheme);
-          updateDashboard();
-        }
-      }
-    }
-  }, [chartIds]);
-
-  useComponentDidUpdate(verifyUpdateColorScheme);
-
   const childIds: string[] = topLevelTabs
     ? topLevelTabs.children
     : [DASHBOARD_GRID_ID];
@@ -217,6 +140,29 @@ const DashboardContainer: FC<DashboardContainerProps> = ({ topLevelTabs }) => {
   const activeKey = min === 0 ? DASHBOARD_GRID_ID : min.toString();
   const TOP_OF_PAGE_RANGE = 220;
 
+  useEffect(() => {
+    // verify freshness of color map on tab change
+    // and when loading for first time
+    setTimeout(() => {
+      dispatch(updateDashboardLabelsColor());
+    }, 500);
+  }, [directPathToChild, dispatch]);
+
+  useEffect(() => {
+    const labelsColorMap = getLabelsColorMap();
+    const colorNamespace = getColorNamespace(
+      dashboardInfo?.metadata?.color_namespace,
+    );
+    labelsColorMap.source = LabelsColorMapSource.Dashboard;
+    // apply labels color as dictated by stored metadata
+    applyColors(dashboardInfo.metadata);
+
+    return () => {
+      resetColors(getColorNamespace(colorNamespace));
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dashboardInfo.id, dispatch]);
+
   return (
     <div className="grid-container" data-test="grid-container">
       <ParentSize>
diff --git a/superset-frontend/src/dashboard/components/Header/index.jsx b/superset-frontend/src/dashboard/components/Header/index.jsx
index bb0f79d1d4..d9f5dbd6d0 100644
--- a/superset-frontend/src/dashboard/components/Header/index.jsx
+++ b/superset-frontend/src/dashboard/components/Header/index.jsx
@@ -26,7 +26,6 @@ import {
   isFeatureEnabled,
   FeatureFlag,
   t,
-  getSharedLabelColor,
   getExtensionsRegistry,
 } from '@superset-ui/core';
 import { Global } from '@emotion/react';
@@ -374,13 +373,10 @@ class Header extends PureComponent {
       ? currentRefreshFrequency
       : dashboardInfo.metadata?.refresh_frequency;
 
-    const currentColorScheme =
-      dashboardInfo?.metadata?.color_scheme || colorScheme;
     const currentColorNamespace =
       dashboardInfo?.metadata?.color_namespace || colorNamespace;
-    const currentSharedLabelColors = Object.fromEntries(
-      getSharedLabelColor().getColorMap(),
-    );
+    const currentColorScheme =
+      dashboardInfo?.metadata?.color_scheme || colorScheme;
 
     const data = {
       certified_by: dashboardInfo.certified_by,
@@ -397,7 +393,6 @@ class Header extends PureComponent {
         color_scheme: currentColorScheme,
         positions,
         refresh_frequency: refreshFrequency,
-        shared_label_colors: currentSharedLabelColors,
       },
     };
 
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
index 1f2b6fa5d8..8fef965097 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
@@ -25,12 +25,10 @@ import Button from 'src/components/Button';
 import { AntdForm, AsyncSelect, Col, Row } from 'src/components';
 import rison from 'rison';
 import {
-  CategoricalColorNamespace,
   ensureIsArray,
   isFeatureEnabled,
   FeatureFlag,
   getCategoricalSchemeRegistry,
-  getSharedLabelColor,
   styled,
   SupersetClient,
   t,
@@ -46,6 +44,7 @@ import withToasts from 'src/components/MessageToasts/withToasts';
 import TagType from 'src/types/TagType';
 import { fetchTags, OBJECT_TYPES } from 'src/features/tags/tags';
 import { loadTags } from 'src/components/Tags/utils';
+import { applyColors, getColorNamespace } from 'src/utils/colorScheme';
 
 const StyledFormItem = styled(FormItem)`
   margin-bottom: 0;
@@ -307,7 +306,6 @@ const PropertiesModal = ({
     const { title, slug, certifiedBy, certificationDetails } =
       form.getFieldsValue();
     let currentColorScheme = colorScheme;
-    let colorNamespace = '';
     let currentJsonMetadata = jsonMetadata;
 
     // validate currentJsonMetadata
@@ -325,11 +323,13 @@ const PropertiesModal = ({
       return;
     }
 
+    const copyMetadata = { ...metadata };
+    const colorNamespace = getColorNamespace(metadata?.color_namespace);
+
     // color scheme in json metadata has precedence over selection
     currentColorScheme = metadata?.color_scheme || colorScheme;
-    colorNamespace = metadata?.color_namespace;
 
-    // filter shared_label_color from user input
+    // remove information from user facing input
     if (metadata?.shared_label_colors) {
       delete metadata.shared_label_colors;
     }
@@ -337,22 +337,8 @@ const PropertiesModal = ({
       delete metadata.color_scheme_domain;
     }
 
-    const sharedLabelColor = getSharedLabelColor();
-    const categoricalNamespace =
-      CategoricalColorNamespace.getNamespace(colorNamespace);
-    categoricalNamespace.resetColors();
-    if (currentColorScheme) {
-      sharedLabelColor.updateColorMap(colorNamespace, currentColorScheme);
-      metadata.shared_label_colors = Object.fromEntries(
-        sharedLabelColor.getColorMap(),
-      );
-      metadata.color_scheme_domain =
-        categoricalSchemeRegistry.get(colorScheme)?.colors || [];
-    } else {
-      sharedLabelColor.reset();
-      metadata.shared_label_colors = {};
-      metadata.color_scheme_domain = [];
-    }
+    // only apply colors, the user has not saved yet
+    applyColors(copyMetadata, true);
 
     currentJsonMetadata = jsonStringify(metadata);
 
@@ -410,7 +396,7 @@ const PropertiesModal = ({
 
   const getRowsWithoutRoles = () => {
     const jsonMetadataObj = getJsonMetadata();
-    const hasCustomLabelColors = !!Object.keys(
+    const hasCustomLabelsColor = !!Object.keys(
       jsonMetadataObj?.label_colors || {},
     ).length;
 
@@ -440,7 +426,7 @@ const PropertiesModal = ({
         <Col xs={24} md={12}>
           <h3 style={{ marginTop: '1em' }}>{t('Colors')}</h3>
           <ColorSchemeControlWrapper
-            hasCustomLabelColors={hasCustomLabelColors}
+            hasCustomLabelsColor={hasCustomLabelsColor}
             onChange={onColorSchemeChange}
             colorScheme={colorScheme}
             labelMargin={4}
@@ -452,7 +438,7 @@ const PropertiesModal = ({
 
   const getRowsWithRoles = () => {
     const jsonMetadataObj = getJsonMetadata();
-    const hasCustomLabelColors = !!Object.keys(
+    const hasCustomLabelsColor = !!Object.keys(
       jsonMetadataObj?.label_colors || {},
     ).length;
 
@@ -509,7 +495,7 @@ const PropertiesModal = ({
         <Row>
           <Col xs={24} md={12}>
             <ColorSchemeControlWrapper
-              hasCustomLabelColors={hasCustomLabelColors}
+              hasCustomLabelsColor={hasCustomLabelsColor}
               onChange={onColorSchemeChange}
               colorScheme={colorScheme}
               labelMargin={4}
diff --git a/superset-frontend/src/dashboard/components/SyncDashboardState/index.tsx b/superset-frontend/src/dashboard/components/SyncDashboardState/index.tsx
index 0e20cdb027..293b4d6f0a 100644
--- a/superset-frontend/src/dashboard/components/SyncDashboardState/index.tsx
+++ b/superset-frontend/src/dashboard/components/SyncDashboardState/index.tsx
@@ -65,8 +65,8 @@ const SyncDashboardState: FC<Props> = ({ dashboardPageId }) => {
     DashboardContextForExplore
   >(
     ({ dashboardInfo, dashboardState, nativeFilters, dataMask }) => ({
-      labelColors: dashboardInfo.metadata?.label_colors || EMPTY_OBJECT,
-      sharedLabelColors:
+      labelsColor: dashboardInfo.metadata?.label_colors || EMPTY_OBJECT,
+      labelsColorMap:
         dashboardInfo.metadata?.shared_label_colors || EMPTY_OBJECT,
       colorScheme: dashboardState?.colorScheme,
       chartConfiguration:
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
index bce0fedcaa..f519c8f83d 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
@@ -54,8 +54,8 @@ const propTypes = {
   // from redux
   chart: chartPropShape.isRequired,
   formData: PropTypes.object.isRequired,
-  labelColors: PropTypes.object,
-  sharedLabelColors: PropTypes.object,
+  labelsColor: PropTypes.object,
+  labelsColorMap: PropTypes.object,
   datasource: PropTypes.object,
   slice: slicePropShape.isRequired,
   sliceName: PropTypes.string.isRequired,
@@ -382,8 +382,8 @@ class Chart extends Component {
       editMode,
       filters,
       formData,
-      labelColors,
-      sharedLabelColors,
+      labelsColor,
+      labelsColorMap,
       updateSliceName,
       sliceName,
       toggleExpandSlice,
@@ -509,8 +509,8 @@ class Chart extends Component {
             dashboardId={dashboardId}
             initialValues={initialValues}
             formData={formData}
-            labelColors={labelColors}
-            sharedLabelColors={sharedLabelColors}
+            labelsColor={labelsColor}
+            labelsColorMap={labelsColorMap}
             ownState={ownState}
             filterState={filterState}
             queriesResponse={chart.queriesResponse}
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
index 491befef22..2b47eb7bb3 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
@@ -429,4 +429,5 @@ function mapStateToProps(state) {
     directPathToChild: state.dashboardState.directPathToChild,
   };
 }
+
 export default connect(mapStateToProps)(Tabs);
diff --git a/superset-frontend/src/dashboard/containers/Chart.jsx b/superset-frontend/src/dashboard/containers/Chart.jsx
index 1e50602b06..6451cf2004 100644
--- a/superset-frontend/src/dashboard/containers/Chart.jsx
+++ b/superset-frontend/src/dashboard/containers/Chart.jsx
@@ -60,8 +60,8 @@ function mapStateToProps(
     (chart && chart.form_data && datasources[chart.form_data.datasource]) ||
     PLACEHOLDER_DATASOURCE;
   const { colorScheme, colorNamespace, datasetsStatus } = dashboardState;
-  const labelColors = dashboardInfo?.metadata?.label_colors || {};
-  const sharedLabelColors = dashboardInfo?.metadata?.shared_label_colors || {};
+  const labelsColor = dashboardInfo?.metadata?.label_colors || {};
+  const labelsColorMap = dashboardInfo?.metadata?.shared_label_colors || {};
   // note: this method caches filters if possible to prevent render cascades
   const formData = getFormDataWithExtraFilters({
     chart,
@@ -75,8 +75,8 @@ function mapStateToProps(
     allSliceIds: dashboardState.sliceIds,
     dataMask,
     extraControls,
-    labelColors,
-    sharedLabelColors,
+    labelsColor,
+    labelsColorMap,
   });
 
   formData.dashboardId = dashboardInfo.id;
@@ -84,8 +84,8 @@ function mapStateToProps(
   return {
     chart,
     datasource,
-    labelColors,
-    sharedLabelColors,
+    labelsColor,
+    labelsColorMap,
     slice: sliceEntities.slices[id],
     timeout: dashboardInfo.common.conf.SUPERSET_WEBSERVER_TIMEOUT,
     filters: getActiveFilters() || EMPTY_OBJECT,
diff --git a/superset-frontend/src/dashboard/containers/DashboardComponent.jsx b/superset-frontend/src/dashboard/containers/DashboardComponent.jsx
index 23e8534d96..bf92c5dcec 100644
--- a/superset-frontend/src/dashboard/containers/DashboardComponent.jsx
+++ b/superset-frontend/src/dashboard/containers/DashboardComponent.jsx
@@ -78,6 +78,7 @@ function mapStateToProps(
     editMode: dashboardState.editMode,
     filters: getActiveFilters(),
     dashboardId: dashboardInfo.id,
+    dashboardInfo,
     fullSizeChartId: dashboardState.fullSizeChartId,
   };
 
diff --git a/superset-frontend/src/dashboard/containers/DashboardPage.tsx b/superset-frontend/src/dashboard/containers/DashboardPage.tsx
index 9edf14e759..655541756d 100644
--- a/superset-frontend/src/dashboard/containers/DashboardPage.tsx
+++ b/superset-frontend/src/dashboard/containers/DashboardPage.tsx
@@ -19,13 +19,7 @@
 import { createContext, lazy, FC, useEffect, useMemo, useRef } from 'react';
 import { Global } from '@emotion/react';
 import { useHistory } from 'react-router-dom';
-import {
-  CategoricalColorNamespace,
-  getSharedLabelColor,
-  SharedLabelColorSource,
-  t,
-  useTheme,
-} from '@superset-ui/core';
+import { t, useTheme } from '@superset-ui/core';
 import { useDispatch, useSelector } from 'react-redux';
 import { useToasts } from 'src/components/MessageToasts/withToasts';
 import Loading from 'src/components/Loading';
@@ -101,7 +95,7 @@ export const DashboardPage: FC<PageProps> = ({ idOrSlug }: PageProps) => {
 
   const error = dashboardApiError || chartsApiError;
   const readyToRender = Boolean(dashboard && charts);
-  const { dashboard_title, css, metadata, id = 0 } = dashboard || {};
+  const { dashboard_title, css, id = 0 } = dashboard || {};
 
   useEffect(() => {
     // mark tab id as redundant when user closes browser tab - a new id will be
@@ -187,19 +181,6 @@ export const DashboardPage: FC<PageProps> = ({ idOrSlug }: PageProps) => {
     return () => {};
   }, [css]);
 
-  useEffect(() => {
-    const sharedLabelColor = getSharedLabelColor();
-    sharedLabelColor.source = SharedLabelColorSource.Dashboard;
-    return () => {
-      // clean up label color
-      const categoricalNamespace = CategoricalColorNamespace.getNamespace(
-        metadata?.color_namespace,
-      );
-      categoricalNamespace.resetColors();
-      sharedLabelColor.clear();
-    };
-  }, [metadata?.color_namespace]);
-
   useEffect(() => {
     if (datasetsApiError) {
       addDangerToast(
diff --git a/superset-frontend/src/dashboard/util/charts/getFormDataWithExtraFilters.ts b/superset-frontend/src/dashboard/util/charts/getFormDataWithExtraFilters.ts
index 0b7c6a9d7d..9160d21e58 100644
--- a/superset-frontend/src/dashboard/util/charts/getFormDataWithExtraFilters.ts
+++ b/superset-frontend/src/dashboard/util/charts/getFormDataWithExtraFilters.ts
@@ -43,8 +43,8 @@ export interface GetFormDataWithExtraFiltersArguments {
   dataMask: DataMaskStateWithId;
   nativeFilters: PartialFilters;
   extraControls: Record<string, string | boolean | null>;
-  labelColors?: Record<string, string>;
-  sharedLabelColors?: Record<string, string>;
+  labelsColor?: Record<string, string>;
+  labelsColorMap?: Record<string, string>;
   allSliceIds: number[];
 }
 
@@ -61,8 +61,8 @@ export default function getFormDataWithExtraFilters({
   sliceId,
   dataMask,
   extraControls,
-  labelColors,
-  sharedLabelColors,
+  labelsColor,
+  labelsColorMap,
   allSliceIds,
 }: GetFormDataWithExtraFiltersArguments) {
   // if dashboard metadata + filters have not changed, use cache if possible
@@ -75,10 +75,10 @@ export default function getFormDataWithExtraFilters({
     areObjectsEqual(cachedFormData?.color_namespace, colorNamespace, {
       ignoreUndefined: true,
     }) &&
-    areObjectsEqual(cachedFormData?.label_colors, labelColors, {
+    areObjectsEqual(cachedFormData?.label_colors, labelsColor, {
       ignoreUndefined: true,
     }) &&
-    areObjectsEqual(cachedFormData?.shared_label_colors, sharedLabelColors, {
+    areObjectsEqual(cachedFormData?.shared_label_colors, labelsColorMap, {
       ignoreUndefined: true,
     }) &&
     !!cachedFormData &&
@@ -110,8 +110,8 @@ export default function getFormDataWithExtraFilters({
 
   const formData = {
     ...chart.form_data,
-    label_colors: labelColors,
-    shared_label_colors: sharedLabelColors,
+    label_colors: labelsColor,
+    shared_label_colors: labelsColorMap,
     ...(colorScheme && { color_scheme: colorScheme }),
     extra_filters: getEffectiveExtraFilters(filters),
     ...extraData,
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
index 990437a6d0..988b11f825 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
@@ -21,14 +21,7 @@ import { useHistory } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Tooltip } from 'src/components/Tooltip';
-import {
-  CategoricalColorNamespace,
-  css,
-  logging,
-  SupersetClient,
-  t,
-  tn,
-} from '@superset-ui/core';
+import { css, logging, SupersetClient, t, tn } from '@superset-ui/core';
 import { chartPropShape } from 'src/dashboard/util/propShapes';
 import AlteredSliceTag from 'src/components/AlteredSliceTag';
 import Button from 'src/components/Button';
@@ -38,6 +31,7 @@ import { sliceUpdated } from 'src/explore/actions/exploreActions';
 import { PageHeaderWithActions } from 'src/components/PageHeaderWithActions';
 import MetadataBar, { MetadataType } from 'src/components/MetadataBar';
 import { setSaveChartModalVisibility } from 'src/explore/actions/saveModalActions';
+import { applyColors, resetColors } from 'src/utils/colorScheme';
 import { useExploreAdditionalActionsMenu } from '../useExploreAdditionalActionsMenu';
 
 const propTypes = {
@@ -96,6 +90,13 @@ export const ExploreChartHeader = ({
     const dashboard =
       dashboardId && dashboards && dashboards.find(d => d.id === dashboardId);
 
+    if (!dashboard) {
+      // clean up color namespace and shared color maps
+      // to avoid colors spill outside of dashboard context
+      resetColors(metadata?.color_namespace);
+      return;
+    }
+
     if (dashboard) {
       try {
         // Dashboards from metadata don't contain the json_metadata field
@@ -106,23 +107,8 @@ export const ExploreChartHeader = ({
         const result = response?.json?.result;
 
         // setting the chart to use the dashboard custom label colors if any
-        const metadata = JSON.parse(result.json_metadata);
-        const sharedLabelColors = metadata.shared_label_colors || {};
-        const customLabelColors = metadata.label_colors || {};
-        const mergedLabelColors = {
-          ...sharedLabelColors,
-          ...customLabelColors,
-        };
-
-        const categoricalNamespace = CategoricalColorNamespace.getNamespace();
-
-        Object.keys(mergedLabelColors).forEach(label => {
-          categoricalNamespace.setColor(
-            label,
-            mergedLabelColors[label],
-            metadata.color_scheme,
-          );
-        });
+        const dashboardMetadata = JSON.parse(result.json_metadata);
+        applyColors(dashboardMetadata);
       } catch (error) {
         logging.info(t('Unable to retrieve dashboard colors'));
       }
@@ -130,7 +116,7 @@ export const ExploreChartHeader = ({
   };
 
   useEffect(() => {
-    if (dashboardId) updateCategoricalNamespace();
+    updateCategoricalNamespace();
   }, []);
 
   const openPropertiesModal = () => {
diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeControl.test.tsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeControl.test.tsx
index 808151b625..0f380b3910 100644
--- a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeControl.test.tsx
+++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeControl.test.tsx
@@ -28,7 +28,7 @@ import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import ColorSchemeControl, { ColorSchemes } from '.';
 
 const defaultProps = () => ({
-  hasCustomLabelColors: false,
+  hasCustomLabelsColor: false,
   label: 'Color scheme',
   labelMargin: 0,
   name: 'color',
@@ -58,7 +58,7 @@ test('should display a label', async () => {
   expect(await screen.findByText('Color scheme')).toBeTruthy();
 });
 
-test('should not display an alert icon if hasCustomLabelColors=false', async () => {
+test('should not display an alert icon if hasCustomLabelsColor=false', async () => {
   setup();
   await waitFor(() => {
     expect(
@@ -67,11 +67,12 @@ test('should not display an alert icon if hasCustomLabelColors=false', async ()
   });
 });
 
-test('should display an alert icon if hasCustomLabelColors=true', async () => {
-  const hasCustomLabelColorsProps = {
-    hasCustomLabelColors: true,
+test('should display an alert icon if hasCustomLabelsColor=true', async () => {
+  const hasCustomLabelsColorProps = {
+    ...defaultProps,
+    hasCustomLabelsColor: true,
   };
-  setup(hasCustomLabelColorsProps);
+  setup(hasCustomLabelsColorProps);
   await waitFor(() => {
     expect(
       screen.getByRole('img', { name: 'alert-solid' }),
diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx
index 74c4374dae..a14df21a22 100644
--- a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx
@@ -31,17 +31,17 @@ export default function ColorSchemeLabel(props: ColorSchemeLabelProps) {
   const { id, label, colors } = props;
   const [showTooltip, setShowTooltip] = useState<boolean>(false);
   const labelNameRef = useRef<HTMLElement>(null);
-  const labelColorsRef = useRef<HTMLElement>(null);
+  const labelsColorRef = useRef<HTMLElement>(null);
   const handleShowTooltip = () => {
     const labelNameElement = labelNameRef.current;
-    const labelColorsElement = labelColorsRef.current;
+    const labelsColorElement = labelsColorRef.current;
     if (
       labelNameElement &&
-      labelColorsElement &&
+      labelsColorElement &&
       (labelNameElement.scrollWidth > labelNameElement.offsetWidth ||
         labelNameElement.scrollHeight > labelNameElement.offsetHeight ||
-        labelColorsElement.scrollWidth > labelColorsElement.offsetWidth ||
-        labelColorsElement.scrollHeight > labelColorsElement.offsetHeight)
+        labelsColorElement.scrollWidth > labelsColorElement.offsetWidth ||
+        labelsColorElement.scrollHeight > labelsColorElement.offsetHeight)
     ) {
       setShowTooltip(true);
     }
@@ -109,7 +109,7 @@ export default function ColorSchemeLabel(props: ColorSchemeLabelProps) {
           {label}
         </span>
         <span
-          ref={labelColorsRef}
+          ref={labelsColorRef}
           css={(theme: SupersetTheme) => css`
             flex: 100%;
             text-overflow: ellipsis;
diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
index f4178beab2..e43bb32b72 100644
--- a/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
@@ -46,7 +46,7 @@ export interface ColorSchemes {
 }
 
 export interface ColorSchemeControlProps {
-  hasCustomLabelColors: boolean;
+  hasCustomLabelsColor: boolean;
   dashboardId?: number;
   label: string;
   name: string;
@@ -75,14 +75,14 @@ const DASHBOARD_ALERT = t(
 
 const Label = ({
   label,
-  hasCustomLabelColors,
+  hasCustomLabelsColor,
   dashboardId,
 }: Pick<
   ColorSchemeControlProps,
-  'label' | 'hasCustomLabelColors' | 'dashboardId'
+  'label' | 'hasCustomLabelsColor' | 'dashboardId'
 >) => {
-  if (hasCustomLabelColors || dashboardId) {
-    const alertTitle = hasCustomLabelColors
+  if (hasCustomLabelsColor || dashboardId) {
+    const alertTitle = hasCustomLabelsColor
       ? CUSTOM_LABEL_ALERT
       : DASHBOARD_ALERT;
     return (
@@ -98,7 +98,7 @@ const Label = ({
 };
 
 const ColorSchemeControl = ({
-  hasCustomLabelColors = false,
+  hasCustomLabelsColor = false,
   dashboardId,
   label = t('Color scheme'),
   onChange = () => {},
@@ -231,7 +231,7 @@ const ColorSchemeControl = ({
         label={
           <Label
             label={label}
-            hasCustomLabelColors={hasCustomLabelColors}
+            hasCustomLabelsColor={hasCustomLabelsColor}
             dashboardId={dashboardId}
           />
         }
diff --git a/superset-frontend/src/pages/Chart/index.tsx b/superset-frontend/src/pages/Chart/index.tsx
index 89ad8095c7..e8e9ae127f 100644
--- a/superset-frontend/src/pages/Chart/index.tsx
+++ b/superset-frontend/src/pages/Chart/index.tsx
@@ -20,11 +20,11 @@ import { useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import {
-  getSharedLabelColor,
+  getLabelsColorMap,
   isDefined,
   JsonObject,
   makeApi,
-  SharedLabelColorSource,
+  LabelsColorMapSource,
   t,
   getClientErrorObject,
 } from '@superset-ui/core';
@@ -84,8 +84,8 @@ const getDashboardContextFormData = () => {
   if (dashboardContext) {
     const sliceId = getUrlParam(URL_PARAMS.sliceId) || 0;
     const {
-      labelColors,
-      sharedLabelColors,
+      labelsColor,
+      labelsColorMap,
       colorScheme,
       chartConfiguration,
       nativeFilters,
@@ -100,8 +100,8 @@ const getDashboardContextFormData = () => {
       chartConfiguration,
       colorScheme,
       dataMask,
-      labelColors,
-      sharedLabelColors,
+      labelsColor,
+      labelsColorMap,
       sliceId,
       allSliceIds: [sliceId],
       extraControls: {},
@@ -151,7 +151,7 @@ export default function ExplorePage() {
           isExploreInitialized.current = true;
         });
     }
-    getSharedLabelColor().source = SharedLabelColorSource.Explore;
+    getLabelsColorMap().source = LabelsColorMapSource.Explore;
   }, [dispatch, location]);
 
   if (!isLoaded) {
diff --git a/superset-frontend/src/types/DashboardContextForExplore.ts b/superset-frontend/src/types/DashboardContextForExplore.ts
index e5ce58056c..4187dceaeb 100644
--- a/superset-frontend/src/types/DashboardContextForExplore.ts
+++ b/superset-frontend/src/types/DashboardContextForExplore.ts
@@ -24,8 +24,8 @@ import {
 import { ChartConfiguration } from 'src/dashboard/types';
 
 export interface DashboardContextForExplore {
-  labelColors: Record<string, string>;
-  sharedLabelColors: Record<string, string>;
+  labelsColor: Record<string, string>;
+  labelsColorMap: Record<string, string>;
   colorScheme: string;
   chartConfiguration: ChartConfiguration;
   nativeFilters: PartialFilters;
diff --git a/superset-frontend/src/utils/colorScheme.ts b/superset-frontend/src/utils/colorScheme.ts
new file mode 100644
index 0000000000..be4d3786e0
--- /dev/null
+++ b/superset-frontend/src/utils/colorScheme.ts
@@ -0,0 +1,140 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   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
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  CategoricalColorNamespace,
+  getCategoricalSchemeRegistry,
+  getLabelsColorMap,
+} from '@superset-ui/core';
+
+/**
+ * Forces falsy namespace values to undefined to default to GLOBAL
+ *
+ * @param namespace
+ * @returns - namespace or default undefined
+ */
+export const getColorNamespace = (namespace?: string) => namespace || undefined;
+
+/**
+ * Get the labels color map entries
+ *
+ * @returns Record<string, string>
+ */
+export const getLabelsColorMapEntries = (): Record<string, string> => {
+  const labelsColorMapInstance = getLabelsColorMap();
+  const updatedLabelsColorMapEntries = Object.fromEntries(
+    labelsColorMapInstance.getColorMap(),
+  );
+  return updatedLabelsColorMapEntries;
+};
+
+export const getColorSchemeDomain = (colorScheme: string) =>
+  getCategoricalSchemeRegistry().get(colorScheme)?.colors || [];
+
+/**
+ * Compare the current labels color map with a fresh one
+ *
+ * @param currentLabelsColorMap - the current labels color map
+ * @returns true if the labels color map is the same as fresh
+ */
+export const isLabelsColorMapSynced = (
+  metadata: Record<string, any>,
+): boolean => {
+  const currentLabelsColorMap = metadata?.shared_label_colors || {};
+  const customLabelColors = metadata?.label_colors || {};
+  const freshLabelsColorMap = getLabelsColorMap().getColorMap();
+  const isSynced = Array.from(freshLabelsColorMap.entries()).every(
+    ([label, color]) =>
+      currentLabelsColorMap.hasOwnProperty(label) &&
+      (currentLabelsColorMap[label] === color ||
+        customLabelColors[label] !== undefined),
+  );
+  return isSynced;
+};
+
+/**
+ * Annihilate color maps
+ *
+ * @param color_namespace - the categorical namespace
+ */
+export const resetColors = (color_namespace?: string) => {
+  const labelsColorMapInstance = getLabelsColorMap();
+  const categoricalNamespace = CategoricalColorNamespace.getNamespace(
+    getColorNamespace(color_namespace),
+  );
+  categoricalNamespace.resetColors();
+  labelsColorMapInstance.clear();
+};
+
+/**
+ * Update the labels color map based on current color scheme
+ * It will respect custom label colors if set via namespace
+ *
+ * @param namespace - the color namespace
+ * @param colorScheme - the current color scheme
+ */
+export const refreshLabelsColorMap = (
+  namespace?: string,
+  colorScheme?: string,
+) => {
+  const colorNameSpace = getColorNamespace(namespace);
+  const categoricalNamespace =
+    CategoricalColorNamespace.getNamespace(colorNameSpace);
+  const labelsColorMapInstance = getLabelsColorMap();
+
+  labelsColorMapInstance.updateColorMap(categoricalNamespace, colorScheme);
+};
+
+/**
+ * Merge labels colors with custom labels colors
+ * Apply labels color based on chosen color scheme
+ *
+ * @param metadata - the dashboard metadata object
+ */
+export const applyColors = (metadata: Record<string, any>, fresh = false) => {
+  const colorNameSpace = getColorNamespace(metadata?.color_namespace);
+  const categoricalNamespace =
+    CategoricalColorNamespace.getNamespace(colorNameSpace);
+  const colorScheme = metadata?.color_scheme;
+  const customLabelColors = metadata?.label_colors || {};
+  // when scheme unset, update only custom label colors
+  const labelsColorMap = metadata?.shared_label_colors || {};
+
+  // reset forced colors (custom labels + labels color map)
+  categoricalNamespace.resetColors();
+
+  // apply custom label colors first
+  Object.keys(customLabelColors).forEach(label => {
+    categoricalNamespace.setColor(label, customLabelColors[label]);
+  });
+
+  // re-instantiate a fresh labels color map based on current scheme
+  // will consider also just applied custom label colors
+  refreshLabelsColorMap(metadata?.color_namespace, colorScheme);
+
+  // get the fresh map that was just updated or existing
+  const labelsColorMapEntries = fresh
+    ? getLabelsColorMapEntries()
+    : labelsColorMap;
+
+  // apply the final color map
+  Object.keys(labelsColorMapEntries).forEach(label => {
+    categoricalNamespace.setColor(label, labelsColorMapEntries[label]);
+  });
+};
diff --git a/tests/integration_tests/superset_test_config.py b/tests/integration_tests/superset_test_config.py
index a23472b018..04472bfc24 100644
--- a/tests/integration_tests/superset_test_config.py
+++ b/tests/integration_tests/superset_test_config.py
@@ -75,6 +75,7 @@ FEATURE_FLAGS = {
     "SHARE_QUERIES_VIA_KV_STORE": True,
     "ENABLE_TEMPLATE_PROCESSING": True,
     "ALERT_REPORTS": True,
+    "AVOID_COLORS_COLLISION": True,
     "DRILL_TO_DETAIL": True,
     "DRILL_BY": True,
     "HORIZONTAL_FILTER_BAR": True,

From 70f6f5f3efc20d3ac7f573dad69eeacc2a125317 Mon Sep 17 00:00:00 2001
From: Ed Jannoo <1632839+edjannoo@users.noreply.github.com>
Date: Thu, 20 Jun 2024 16:26:51 +0100
Subject: [PATCH 20/34] fix(ui): Disable ability to export data when user does
 not have the correct permission (#28429)

---
 .../components/ResultSet/ResultSet.test.tsx   | 78 +++++++++++++++++++
 .../src/SqlLab/components/ResultSet/index.tsx | 41 ++++++----
 .../ChartContextMenu/ChartContextMenu.tsx     |  4 +
 .../Chart/DrillBy/DrillByMenuItems.test.tsx   |  1 +
 .../Chart/DrillBy/DrillByMenuItems.tsx        |  3 +
 .../Chart/DrillBy/DrillByModal.test.tsx       |  1 +
 .../components/Chart/DrillBy/DrillByModal.tsx |  3 +
 .../Chart/DrillBy/useResultsTableView.test.ts |  4 +-
 .../Chart/DrillBy/useResultsTableView.tsx     |  3 +
 .../components/SliceHeaderControls/index.tsx  |  1 +
 .../DataTablesPane/DataTablesPane.tsx         |  3 +
 .../components/DataTableControls.tsx          |  5 +-
 .../components/ResultsPaneOnDashboard.tsx     |  2 +
 .../DataTablesPane/components/SamplesPane.tsx |  3 +
 .../components/SingleQueryResultPane.tsx      |  2 +
 .../components/useResultsPane.tsx             |  3 +
 .../test/DataTablesPane.test.tsx              | 28 +++++++
 .../DataTablesPane/test/fixture.tsx           |  3 +
 .../components/DataTablesPane/types.ts        |  5 ++
 .../ExploreChartHeader.test.tsx               | 58 +++++++++++++-
 .../components/ExploreChartPanel/index.jsx    |  2 +
 .../useExploreAdditionalActionsMenu/index.jsx | 30 ++++---
 22 files changed, 253 insertions(+), 30 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx b/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx
index d5f30a575a..9c04fee8e7 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx
@@ -446,4 +446,82 @@ describe('ResultSet', () => {
       }),
     ).toBe(null);
   });
+
+  test('should allow download as CSV when user has permission to export data', async () => {
+    const { queryByTestId } = setup(
+      mockedProps,
+      mockStore({
+        ...initialState,
+        user: {
+          ...user,
+          roles: {
+            sql_lab: [['can_export_csv', 'SQLLab']],
+          },
+        },
+        sqlLab: {
+          ...initialState.sqlLab,
+          queries: {
+            [queries[0].id]: queries[0],
+          },
+        },
+      }),
+    );
+    expect(queryByTestId('export-csv-button')).toBeInTheDocument();
+  });
+
+  test('should not allow download as CSV when user does not have permission to export data', async () => {
+    const { queryByTestId } = setup(
+      mockedProps,
+      mockStore({
+        ...initialState,
+        user,
+        sqlLab: {
+          ...initialState.sqlLab,
+          queries: {
+            [queries[0].id]: queries[0],
+          },
+        },
+      }),
+    );
+    expect(queryByTestId('export-csv-button')).not.toBeInTheDocument();
+  });
+
+  test('should allow copy to clipboard when user has permission to export data', async () => {
+    const { queryByTestId } = setup(
+      mockedProps,
+      mockStore({
+        ...initialState,
+        user: {
+          ...user,
+          roles: {
+            sql_lab: [['can_export_csv', 'SQLLab']],
+          },
+        },
+        sqlLab: {
+          ...initialState.sqlLab,
+          queries: {
+            [queries[0].id]: queries[0],
+          },
+        },
+      }),
+    );
+    expect(queryByTestId('copy-to-clipboard-button')).toBeInTheDocument();
+  });
+
+  test('should not allow copy to clipboard when user does not have permission to export data', async () => {
+    const { queryByTestId } = setup(
+      mockedProps,
+      mockStore({
+        ...initialState,
+        user,
+        sqlLab: {
+          ...initialState.sqlLab,
+          queries: {
+            [queries[0].id]: queries[0],
+          },
+        },
+      }),
+    );
+    expect(queryByTestId('copy-to-clipboard-button')).not.toBeInTheDocument();
+  });
 });
diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
index ac41d19b82..6e62c17da5 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
@@ -78,6 +78,7 @@ import {
   LOG_ACTIONS_SQLLAB_DOWNLOAD_CSV,
 } from 'src/logger/LogUtils';
 import Icons from 'src/components/Icons';
+import { findPermission } from 'src/utils/findPermission';
 import ExploreCtasResultsButton from '../ExploreCtasResultsButton';
 import ExploreResultsButton from '../ExploreResultsButton';
 import HighlightedSql from '../HighlightedSql';
@@ -309,6 +310,12 @@ const ResultSet = ({
         schema: query?.schema,
       };
 
+      const canExportData = findPermission(
+        'can_export_csv',
+        'SQLLab',
+        user?.roles,
+      );
+
       return (
         <ResultSetControls>
           <SaveDatasetModal
@@ -328,29 +335,35 @@ const ResultSet = ({
                 onClick={createExploreResultsOnClick}
               />
             )}
-            {csv && (
+            {csv && canExportData && (
               <Button
                 buttonSize="small"
                 href={getExportCsvUrl(query.id)}
+                data-test="export-csv-button"
                 onClick={() => logAction(LOG_ACTIONS_SQLLAB_DOWNLOAD_CSV, {})}
               >
                 <i className="fa fa-file-text-o" /> {t('Download to CSV')}
               </Button>
             )}
 
-            <CopyToClipboard
-              text={prepareCopyToClipboardTabularData(data, columns)}
-              wrapped={false}
-              copyNode={
-                <Button buttonSize="small">
-                  <i className="fa fa-clipboard" /> {t('Copy to Clipboard')}
-                </Button>
-              }
-              hideTooltip
-              onCopyEnd={() =>
-                logAction(LOG_ACTIONS_SQLLAB_COPY_RESULT_TO_CLIPBOARD, {})
-              }
-            />
+            {canExportData && (
+              <CopyToClipboard
+                text={prepareCopyToClipboardTabularData(data, columns)}
+                wrapped={false}
+                copyNode={
+                  <Button
+                    buttonSize="small"
+                    data-test="copy-to-clipboard-button"
+                  >
+                    <i className="fa fa-clipboard" /> {t('Copy to Clipboard')}
+                  </Button>
+                }
+                hideTooltip
+                onCopyEnd={() =>
+                  logAction(LOG_ACTIONS_SQLLAB_COPY_RESULT_TO_CLIPBOARD, {})
+                }
+              />
+            )}
           </ResultSetButtons>
           {search && (
             <input
diff --git a/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx b/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx
index bf1ea84ff1..9df0e73bc9 100644
--- a/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx
+++ b/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx
@@ -97,6 +97,9 @@ const ChartContextMenu = (
   const canDatasourceSamples = useSelector((state: RootState) =>
     findPermission('can_samples', 'Datasource', state.user?.roles),
   );
+  const canDownload = useSelector((state: RootState) =>
+    findPermission('can_csv', 'Superset', state.user?.roles),
+  );
   const canDrill = useSelector((state: RootState) =>
     findPermission('can_drill', 'Dashboard', state.user?.roles),
   );
@@ -256,6 +259,7 @@ const ChartContextMenu = (
         formData={formData}
         contextMenuY={clientY}
         submenuIndex={submenuIndex}
+        canDownload={canDownload}
         open={openKeys.includes('drill-by-submenu')}
         key="drill-by-submenu"
         {...(additionalConfig?.drillBy || {})}
diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx
index 8b65d21409..2e60c08586 100644
--- a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx
@@ -74,6 +74,7 @@ const renderMenu = ({
       <DrillByMenuItems
         formData={formData ?? defaultFormData}
         drillByConfig={drillByConfig}
+        canDownload
         open
         {...rest}
       />
diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
index 6df180cb78..f694db3d27 100644
--- a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
@@ -74,6 +74,7 @@ export interface DrillByMenuItemsProps {
   onClick?: (event: MouseEvent) => void;
   openNewModal?: boolean;
   excludedColumns?: Column[];
+  canDownload: boolean;
   open: boolean;
 }
 
@@ -105,6 +106,7 @@ export const DrillByMenuItems = ({
   onClick = () => {},
   excludedColumns,
   openNewModal = true,
+  canDownload,
   open,
   ...rest
 }: DrillByMenuItemsProps) => {
@@ -344,6 +346,7 @@ export const DrillByMenuItems = ({
           formData={formData}
           onHideModal={closeModal}
           dataset={{ ...dataset!, verbose_map: verboseMap }}
+          canDownload={canDownload}
         />
       )}
     </>
diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByModal.test.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByModal.test.tsx
index d546c071cb..2299f091b6 100644
--- a/superset-frontend/src/components/Chart/DrillBy/DrillByModal.test.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/DrillByModal.test.tsx
@@ -86,6 +86,7 @@ const renderModal = async (
             onHideModal={() => setShowModal(false)}
             dataset={dataset}
             drillByConfig={{ groupbyFieldName: 'groupby', filters: [] }}
+            canDownload
             {...modalProps}
           />
         )}
diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByModal.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByModal.tsx
index 0cf6b1f016..2a9262e19e 100644
--- a/superset-frontend/src/components/Chart/DrillBy/DrillByModal.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/DrillByModal.tsx
@@ -151,6 +151,7 @@ export interface DrillByModalProps {
   drillByConfig: Required<ContextMenuFilters>['drillBy'];
   formData: BaseFormData & { [key: string]: any };
   onHideModal: () => void;
+  canDownload: boolean;
 }
 
 type DrillByConfigs = (ContextMenuFilters['drillBy'] & { column?: Column })[];
@@ -161,6 +162,7 @@ export default function DrillByModal({
   drillByConfig,
   formData,
   onHideModal,
+  canDownload,
 }: DrillByModalProps) {
   const dispatch = useDispatch();
   const theme = useTheme();
@@ -200,6 +202,7 @@ export default function DrillByModal({
   const resultsTable = useResultsTableView(
     chartDataResult,
     formData.datasource,
+    canDownload,
   );
 
   const [currentFormData, setCurrentFormData] = useState(formData);
diff --git a/superset-frontend/src/components/Chart/DrillBy/useResultsTableView.test.ts b/superset-frontend/src/components/Chart/DrillBy/useResultsTableView.test.ts
index 36cc51a684..7e64d3a42f 100644
--- a/superset-frontend/src/components/Chart/DrillBy/useResultsTableView.test.ts
+++ b/superset-frontend/src/components/Chart/DrillBy/useResultsTableView.test.ts
@@ -65,7 +65,7 @@ const MOCK_CHART_DATA_RESULT = [
 
 test('Displays results table for 1 query', () => {
   const { result } = renderHook(() =>
-    useResultsTableView(MOCK_CHART_DATA_RESULT.slice(0, 1), '1__table'),
+    useResultsTableView(MOCK_CHART_DATA_RESULT.slice(0, 1), '1__table', true),
   );
   render(result.current, { useRedux: true });
   expect(screen.queryByRole('tablist')).not.toBeInTheDocument();
@@ -76,7 +76,7 @@ test('Displays results table for 1 query', () => {
 
 test('Displays results for 2 queries', async () => {
   const { result } = renderHook(() =>
-    useResultsTableView(MOCK_CHART_DATA_RESULT, '1__table'),
+    useResultsTableView(MOCK_CHART_DATA_RESULT, '1__table', true),
   );
   render(result.current, { useRedux: true });
   const getActiveTabElement = () =>
diff --git a/superset-frontend/src/components/Chart/DrillBy/useResultsTableView.tsx b/superset-frontend/src/components/Chart/DrillBy/useResultsTableView.tsx
index 8b7fd684b0..4d85f949b2 100644
--- a/superset-frontend/src/components/Chart/DrillBy/useResultsTableView.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/useResultsTableView.tsx
@@ -33,6 +33,7 @@ const PaginationContainer = styled.div`
 export const useResultsTableView = (
   chartDataResult: QueryData[] | undefined,
   datasourceId: string,
+  canDownload: boolean,
 ) => {
   if (!isDefined(chartDataResult)) {
     return <div />;
@@ -48,6 +49,7 @@ export const useResultsTableView = (
           dataSize={DATA_SIZE}
           datasourceId={datasourceId}
           isVisible
+          canDownload={canDownload}
         />
       </PaginationContainer>
     );
@@ -65,6 +67,7 @@ export const useResultsTableView = (
               dataSize={DATA_SIZE}
               datasourceId={datasourceId}
               isVisible
+              canDownload={canDownload}
             />
           </PaginationContainer>
         </Tabs.TabPane>
diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
index 756f2ed934..632428f32f 100644
--- a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
@@ -809,6 +809,7 @@ const SliceHeaderControls = (props: SliceHeaderControlsPropsWithRouter) => {
                 dataSize={20}
                 isRequest
                 isVisible
+                canDownload={!!props.supersetCanCSV}
               />
             }
           />
diff --git a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
index 8601c41a66..640834ba94 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
@@ -88,6 +88,7 @@ export const DataTablesPane = ({
   ownState,
   errorMessage,
   actions,
+  canDownload,
 }: DataTablesPaneProps) => {
   const theme = useTheme();
   const [activeTabKey, setActiveTabKey] = useState<string>(ResultTypes.Results);
@@ -198,6 +199,7 @@ export const DataTablesPane = ({
     isRequest: isRequest.results,
     actions,
     isVisible: ResultTypes.Results === activeTabKey,
+    canDownload,
   }).map((pane, idx) => {
     if (idx === 0) {
       return (
@@ -235,6 +237,7 @@ export const DataTablesPane = ({
             isRequest={isRequest.samples}
             actions={actions}
             isVisible={ResultTypes.Samples === activeTabKey}
+            canDownload={canDownload}
           />
         </Tabs.TabPane>
       </Tabs>
diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx
index ff134da1f7..30dfb87c74 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx
@@ -49,6 +49,7 @@ export const TableControls = ({
   columnTypes,
   rowcount,
   isLoading,
+  canDownload,
 }: TableControlsProps) => {
   const originalTimeColumns = getTimeColumns(datasourceId);
   const formattedTimeColumns = zip<string, GenericDataType>(
@@ -76,7 +77,9 @@ export const TableControls = ({
         `}
       >
         <RowCountLabel rowcount={rowcount} loading={isLoading} />
-        <CopyToClipboardButton data={formattedData} columns={columnNames} />
+        {canDownload && (
+          <CopyToClipboardButton data={formattedData} columns={columnNames} />
+        )}
       </div>
     </TableControlsWrapper>
   );
diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx
index 410d55cbfd..b6691f87af 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx
@@ -53,6 +53,7 @@ export const ResultsPaneOnDashboard = ({
   actions,
   isVisible,
   dataSize = 50,
+  canDownload,
 }: ResultsPaneProps) => {
   const resultsPanes = useResultsPane({
     errorMessage,
@@ -63,6 +64,7 @@ export const ResultsPaneOnDashboard = ({
     actions,
     dataSize,
     isVisible,
+    canDownload,
   });
 
   if (resultsPanes.length === 1) {
diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx
index dd9f430a33..ca0a1d6af4 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx
@@ -42,6 +42,7 @@ export const SamplesPane = ({
   actions,
   dataSize = 50,
   isVisible,
+  canDownload,
 }: SamplesPaneProps) => {
   const [filterText, setFilterText] = useState('');
   const [data, setData] = useState<Record<string, any>[][]>([]);
@@ -114,6 +115,7 @@ export const SamplesPane = ({
           datasourceId={datasourceId}
           onInputChange={input => setFilterText(input)}
           isLoading={isLoading}
+          canDownload={canDownload}
         />
         <Error>{responseError}</Error>
       </>
@@ -135,6 +137,7 @@ export const SamplesPane = ({
         datasourceId={datasourceId}
         onInputChange={input => setFilterText(input)}
         isLoading={isLoading}
+        canDownload={canDownload}
       />
       <TableView
         columns={columns}
diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/SingleQueryResultPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/SingleQueryResultPane.tsx
index a990703586..9a3dd4eded 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/components/SingleQueryResultPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/components/SingleQueryResultPane.tsx
@@ -34,6 +34,7 @@ export const SingleQueryResultPane = ({
   datasourceId,
   dataSize = 50,
   isVisible,
+  canDownload,
 }: SingleQueryResultPaneProp) => {
   const [filterText, setFilterText] = useState('');
 
@@ -60,6 +61,7 @@ export const SingleQueryResultPane = ({
         datasourceId={datasourceId}
         onInputChange={input => setFilterText(input)}
         isLoading={false}
+        canDownload={canDownload}
       />
       <TableView
         columns={columns}
diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx
index 4b39062208..fe262fe720 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx
@@ -47,6 +47,7 @@ export const useResultsPane = ({
   actions,
   isVisible,
   dataSize = 50,
+  canDownload,
 }: ResultsPaneProps): ReactElement[] => {
   const metadata = getChartMetadataRegistry().get(
     queryFormData?.viz_type || queryFormData?.vizType,
@@ -124,6 +125,7 @@ export const useResultsPane = ({
           datasourceId={queryFormData.datasource}
           onInputChange={() => {}}
           isLoading={false}
+          canDownload={canDownload}
         />
         <Error>{responseError}</Error>
       </>
@@ -149,6 +151,7 @@ export const useResultsPane = ({
         datasourceId={queryFormData.datasource}
         key={idx}
         isVisible={isVisible}
+        canDownload={canDownload}
       />
     ));
 };
diff --git a/superset-frontend/src/explore/components/DataTablesPane/test/DataTablesPane.test.tsx b/superset-frontend/src/explore/components/DataTablesPane/test/DataTablesPane.test.tsx
index fb5a20a0d6..4dcb5c7000 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/test/DataTablesPane.test.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/test/DataTablesPane.test.tsx
@@ -114,6 +114,34 @@ describe('DataTablesPane', () => {
     fetchMock.restore();
   });
 
+  test('Should not allow copy data table content when canDownload=false', async () => {
+    fetchMock.post(
+      'glob:*/api/v1/chart/data?form_data=%7B%22slice_id%22%3A456%7D',
+      {
+        result: [
+          {
+            data: [{ __timestamp: 1230768000000, genre: 'Action' }],
+            colnames: ['__timestamp', 'genre'],
+            coltypes: [2, 1],
+            rowcount: 1,
+            sql_rowcount: 1,
+          },
+        ],
+      },
+    );
+    const props = {
+      ...createDataTablesPaneProps(456),
+      canDownload: false,
+    };
+    render(<DataTablesPane {...props} />, {
+      useRedux: true,
+    });
+    userEvent.click(screen.getByText('Results'));
+    expect(await screen.findByText('1 row')).toBeVisible();
+    expect(screen.queryByLabelText('Copy')).not.toBeInTheDocument();
+    fetchMock.restore();
+  });
+
   test('Search table', async () => {
     fetchMock.post(
       'glob:*/api/v1/chart/data?form_data=%7B%22slice_id%22%3A789%7D',
diff --git a/superset-frontend/src/explore/components/DataTablesPane/test/fixture.tsx b/superset-frontend/src/explore/components/DataTablesPane/test/fixture.tsx
index ee766acd6a..c09419e7d0 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/test/fixture.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/test/fixture.tsx
@@ -73,6 +73,7 @@ export const createDataTablesPaneProps = (sliceId: number) =>
     chartStatus: 'rendered' as ChartStatus,
     onCollapseChange: jest.fn(),
     actions: exploreActions,
+    canDownload: true,
   }) as DataTablesPaneProps;
 
 export const createSamplesPaneProps = ({
@@ -90,6 +91,7 @@ export const createSamplesPaneProps = ({
     queryForce,
     isVisible: true,
     actions: exploreActions,
+    canDownload: true,
   }) as SamplesPaneProps;
 
 export const createResultsPaneOnDashboardProps = ({
@@ -116,4 +118,5 @@ export const createResultsPaneOnDashboardProps = ({
     isVisible: true,
     actions: exploreActions,
     errorMessage,
+    canDownload: true,
   }) as ResultsPaneProps;
diff --git a/superset-frontend/src/explore/components/DataTablesPane/types.ts b/superset-frontend/src/explore/components/DataTablesPane/types.ts
index 080388e256..5e62e21fa3 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/types.ts
+++ b/superset-frontend/src/explore/components/DataTablesPane/types.ts
@@ -40,6 +40,7 @@ export interface DataTablesPaneProps {
   onCollapseChange: (isOpen: boolean) => void;
   errorMessage?: JSX.Element;
   actions: ExploreActions;
+  canDownload: boolean;
 }
 
 export interface ResultsPaneProps {
@@ -52,6 +53,7 @@ export interface ResultsPaneProps {
   dataSize?: number;
   // reload OriginalFormattedTimeColumns from localStorage when isVisible is true
   isVisible: boolean;
+  canDownload: boolean;
 }
 
 export interface SamplesPaneProps {
@@ -62,6 +64,7 @@ export interface SamplesPaneProps {
   dataSize?: number;
   // reload OriginalFormattedTimeColumns from localStorage when isVisible is true
   isVisible: boolean;
+  canDownload: boolean;
 }
 
 export interface TableControlsProps {
@@ -73,6 +76,7 @@ export interface TableControlsProps {
   columnTypes: GenericDataType[];
   isLoading: boolean;
   rowcount: number;
+  canDownload: boolean;
 }
 
 export interface QueryResultInterface {
@@ -88,4 +92,5 @@ export interface SingleQueryResultPaneProp extends QueryResultInterface {
   dataSize?: number;
   // reload OriginalFormattedTimeColumns from localStorage when isVisible is true
   isVisible: boolean;
+  canDownload: boolean;
 }
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx b/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx
index fc28b4e8f6..f064643a22 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx
@@ -394,11 +394,25 @@ describe('Additional actions tests', () => {
       spyExportChart.restore();
     });
 
-    test('Should export to JSON', async () => {
+    test('Should not export to JSON if canDownload=false', async () => {
       const props = createProps();
       render(<ExploreHeader {...props} />, {
         useRedux: true,
       });
+      userEvent.click(screen.getByLabelText('Menu actions trigger'));
+      userEvent.hover(screen.getByText('Download'));
+      const exportJsonElement = await screen.findByText('Export to .JSON');
+      userEvent.click(exportJsonElement);
+      expect(spyExportChart.callCount).toBe(0);
+      spyExportChart.restore();
+    });
+
+    test('Should export to JSON if canDownload=true', async () => {
+      const props = createProps();
+      props.canDownload = true;
+      render(<ExploreHeader {...props} />, {
+        useRedux: true,
+      });
 
       userEvent.click(screen.getByLabelText('Menu actions trigger'));
       userEvent.hover(screen.getByText('Download'));
@@ -407,6 +421,22 @@ describe('Additional actions tests', () => {
       expect(spyExportChart.callCount).toBe(1);
     });
 
+    test('Should not export to pivoted CSV if canDownloadCSV=false and viz_type=pivot_table_v2', async () => {
+      const props = createProps();
+      props.chart.latestQueryFormData.viz_type = 'pivot_table_v2';
+      render(<ExploreHeader {...props} />, {
+        useRedux: true,
+      });
+
+      userEvent.click(screen.getByLabelText('Menu actions trigger'));
+      userEvent.hover(screen.getByText('Download'));
+      const exportCSVElement = await screen.findByText(
+        'Export to pivoted .CSV',
+      );
+      userEvent.click(exportCSVElement);
+      expect(spyExportChart.callCount).toBe(0);
+    });
+
     test('Should export to pivoted CSV if canDownloadCSV=true and viz_type=pivot_table_v2', async () => {
       const props = createProps();
       props.canDownload = true;
@@ -423,5 +453,31 @@ describe('Additional actions tests', () => {
       userEvent.click(exportCSVElement);
       expect(spyExportChart.callCount).toBe(1);
     });
+
+    test('Should not export to Excel if canDownload=false', async () => {
+      const props = createProps();
+      render(<ExploreHeader {...props} />, {
+        useRedux: true,
+      });
+      userEvent.click(screen.getByLabelText('Menu actions trigger'));
+      userEvent.hover(screen.getByText('Download'));
+      const exportExcelElement = await screen.findByText('Export to Excel');
+      userEvent.click(exportExcelElement);
+      expect(spyExportChart.callCount).toBe(0);
+      spyExportChart.restore();
+    });
+
+    test('Should export to Excel if canDownload=true', async () => {
+      const props = createProps();
+      props.canDownload = true;
+      render(<ExploreHeader {...props} />, {
+        useRedux: true,
+      });
+      userEvent.click(screen.getByLabelText('Menu actions trigger'));
+      userEvent.hover(screen.getByText('Download'));
+      const exportExcelElement = await screen.findByText('Export to Excel');
+      userEvent.click(exportExcelElement);
+      expect(spyExportChart.callCount).toBe(1);
+    });
   });
 });
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx b/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx
index bf95495c61..189177019c 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx
@@ -137,6 +137,7 @@ const ExploreChartPanel = ({
   standalone,
   chartIsStale,
   chartAlert,
+  can_download: canDownload,
 }) => {
   const theme = useTheme();
   const gutterMargin = theme.gridUnit * GUTTER_SIZE_FACTOR;
@@ -449,6 +450,7 @@ const ExploreChartPanel = ({
           chartStatus={chart.chartStatus}
           errorMessage={errorMessage}
           actions={actions}
+          canDownload={canDownload}
         />
       </Split>
       {showDatasetModal && (
diff --git a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
index a40d0f5e30..448836254c 100644
--- a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
+++ b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
@@ -173,22 +173,26 @@ export const useExploreAdditionalActionsMenu = (
 
   const exportJson = useCallback(
     () =>
-      exportChart({
-        formData: latestQueryFormData,
-        resultType: 'results',
-        resultFormat: 'json',
-      }),
-    [latestQueryFormData],
+      canDownloadCSV
+        ? exportChart({
+            formData: latestQueryFormData,
+            resultType: 'results',
+            resultFormat: 'json',
+          })
+        : null,
+    [canDownloadCSV, latestQueryFormData],
   );
 
   const exportExcel = useCallback(
     () =>
-      exportChart({
-        formData: latestQueryFormData,
-        resultType: 'results',
-        resultFormat: 'xlsx',
-      }),
-    [latestQueryFormData],
+      canDownloadCSV
+        ? exportChart({
+            formData: latestQueryFormData,
+            resultType: 'results',
+            resultFormat: 'xlsx',
+          })
+        : null,
+    [canDownloadCSV, latestQueryFormData],
   );
 
   const copyLink = useCallback(async () => {
@@ -350,6 +354,7 @@ export const useExploreAdditionalActionsMenu = (
           <Menu.Item
             key={MENU_KEYS.EXPORT_TO_JSON}
             icon={<Icons.FileOutlined css={iconReset} />}
+            disabled={!canDownloadCSV}
           >
             {t('Export to .JSON')}
           </Menu.Item>
@@ -362,6 +367,7 @@ export const useExploreAdditionalActionsMenu = (
           <Menu.Item
             key={MENU_KEYS.EXPORT_TO_XLSX}
             icon={<Icons.FileOutlined css={iconReset} />}
+            disabled={!canDownloadCSV}
           >
             {t('Export to Excel')}
           </Menu.Item>

From a5355d86fc402b589335fe01b453e312c9b980e0 Mon Sep 17 00:00:00 2001
From: Jack <41238731+fisjac@users.noreply.github.com>
Date: Thu, 20 Jun 2024 11:40:54 -0500
Subject: [PATCH 21/34] feat: Dashboard tabs api endpoint (#27962)

---
 superset/constants.py                         |   1 +
 superset/daos/dashboard.py                    |   5 +
 superset/dashboards/api.py                    |  62 ++++++
 superset/dashboards/schemas.py                |  12 ++
 superset/models/dashboard.py                  |  50 ++++-
 .../integration_tests/dashboards/api_tests.py | 179 ++++++++++++++++++
 6 files changed, 308 insertions(+), 1 deletion(-)

diff --git a/superset/constants.py b/superset/constants.py
index 42cde6115a..edc82da398 100644
--- a/superset/constants.py
+++ b/superset/constants.py
@@ -152,6 +152,7 @@ MODEL_API_RW_METHOD_PERMISSION_MAP = {
     "data_from_cache": "read",
     "get_charts": "read",
     "get_datasets": "read",
+    "get_tabs": "read",
     "function_names": "read",
     "available": "read",
     "validate_sql": "read",
diff --git a/superset/daos/dashboard.py b/superset/daos/dashboard.py
index 55288a11a8..6c973639b7 100644
--- a/superset/daos/dashboard.py
+++ b/superset/daos/dashboard.py
@@ -80,6 +80,11 @@ class DashboardDAO(BaseDAO[Dashboard]):
         dashboard = DashboardDAO.get_by_id_or_slug(id_or_slug)
         return dashboard.datasets_trimmed_for_slices()
 
+    @staticmethod
+    def get_tabs_for_dashboard(id_or_slug: str) -> dict[str, Any]:
+        dashboard = DashboardDAO.get_by_id_or_slug(id_or_slug)
+        return dashboard.tabs
+
     @staticmethod
     def get_charts_for_dashboard(id_or_slug: str) -> list[Slice]:
         return DashboardDAO.get_by_id_or_slug(id_or_slug).slices
diff --git a/superset/dashboards/api.py b/superset/dashboards/api.py
index 5d3616361f..3fe557a684 100644
--- a/superset/dashboards/api.py
+++ b/superset/dashboards/api.py
@@ -76,6 +76,7 @@ from superset.dashboards.schemas import (
     get_fav_star_ids_schema,
     GetFavStarIdsSchema,
     openapi_spec_methods_override,
+    TabsPayloadSchema,
     thumbnail_query_schema,
 )
 from superset.extensions import event_logger
@@ -142,6 +143,7 @@ class DashboardRestApi(BaseSupersetModelRestApi):
         "remove_favorite",
         "get_charts",
         "get_datasets",
+        "get_tabs",
         "get_embedded",
         "set_embedded",
         "delete_embedded",
@@ -237,6 +239,7 @@ class DashboardRestApi(BaseSupersetModelRestApi):
     chart_entity_response_schema = ChartEntityResponseSchema()
     dashboard_get_response_schema = DashboardGetResponseSchema()
     dashboard_dataset_schema = DashboardDatasetSchema()
+    tab_schema = TabsPayloadSchema()
     embedded_response_schema = EmbeddedDashboardResponseSchema()
     embedded_config_schema = EmbeddedDashboardConfigSchema()
 
@@ -269,6 +272,7 @@ class DashboardRestApi(BaseSupersetModelRestApi):
         DashboardCopySchema,
         DashboardGetResponseSchema,
         DashboardDatasetSchema,
+        TabsPayloadSchema,
         GetFavStarIdsSchema,
         EmbeddedDashboardResponseSchema,
     )
@@ -396,6 +400,64 @@ class DashboardRestApi(BaseSupersetModelRestApi):
         except DashboardNotFoundError:
             return self.response_404()
 
+    @expose("/<id_or_slug>/tabs", methods=("GET",))
+    @protect()
+    @safe
+    @statsd_metrics
+    @event_logger.log_this_with_context(
+        action=lambda self, *args, **kwargs: f"{self.__class__.__name__}.get_tabs",
+        log_to_statsd=False,
+    )
+    def get_tabs(self, id_or_slug: str) -> Response:
+        """Get dashboard's tabs.
+        ---
+        get:
+          summary: Get dashboard's tabs
+          description: >-
+            Returns a list of a dashboard's tabs and dashboard's nested tree structure for associated tabs.
+          parameters:
+          - in: path
+            schema:
+              type: string
+            name: id_or_slug
+            description: Either the id of the dashboard, or its slug
+          responses:
+            200:
+              description: Dashboard tabs
+              content:
+                application/json:
+                  schema:
+                    type: object
+                    properties:
+                      result:
+                        type: object
+                        items:
+                          $ref: '#/components/schemas/TabsPayloadSchema'
+            400:
+              $ref: '#/components/responses/400'
+            401:
+              $ref: '#/components/responses/401'
+            403:
+              $ref: '#/components/responses/403'
+            404:
+              $ref: '#/components/responses/404'
+        """
+        try:
+            tabs = DashboardDAO.get_tabs_for_dashboard(id_or_slug)
+            result = self.tab_schema.dump(tabs)
+            return self.response(200, result=result)
+
+        except (TypeError, ValueError) as err:
+            return self.response_400(
+                message=gettext(
+                    "Tab schema is invalid, caused by: %(error)s", error=str(err)
+                )
+            )
+        except DashboardAccessDeniedError:
+            return self.response_403()
+        except DashboardNotFoundError:
+            return self.response_404()
+
     @expose("/<id_or_slug>/charts", methods=("GET",))
     @protect()
     @safe
diff --git a/superset/dashboards/schemas.py b/superset/dashboards/schemas.py
index 33fafcb1d5..3d4d131b9e 100644
--- a/superset/dashboards/schemas.py
+++ b/superset/dashboards/schemas.py
@@ -267,6 +267,18 @@ class DashboardDatasetSchema(Schema):
         return serialized
 
 
+class TabSchema(Schema):
+    # pylint: disable=W0108
+    children = fields.List(fields.Nested(lambda: TabSchema()))
+    value = fields.Str()
+    title = fields.Str()
+
+
+class TabsPayloadSchema(Schema):
+    all_tabs = fields.Dict(keys=fields.String(), values=fields.String())
+    tab_tree = fields.List(fields.Nested(lambda: TabSchema))
+
+
 class BaseDashboardSchema(Schema):
     # pylint: disable=unused-argument
     @post_load
diff --git a/superset/models/dashboard.py b/superset/models/dashboard.py
index e8f53dddb5..c2048f2a55 100644
--- a/superset/models/dashboard.py
+++ b/superset/models/dashboard.py
@@ -18,7 +18,7 @@ from __future__ import annotations
 
 import logging
 import uuid
-from collections import defaultdict
+from collections import defaultdict, deque
 from typing import Any, Callable
 
 import sqlalchemy as sqla
@@ -298,6 +298,54 @@ class Dashboard(AuditMixinNullable, ImportExportMixin, Model):
             return json.loads(self.position_json)
         return {}
 
+    @property
+    def tabs(self) -> dict[str, Any]:
+        if self.position == {}:
+            return {}
+
+        def get_node(node_id: str) -> dict[str, Any]:
+            """
+            Helper function for getting a node from the position_data
+            """
+            return self.position[node_id]
+
+        def build_tab_tree(
+            node: dict[str, Any], children: list[dict[str, Any]]
+        ) -> None:
+            """
+            Function for building the tab tree structure and list of all tabs
+            """
+
+            new_children: list[dict[str, Any]] = []
+            # new children to overwrite parent's children
+            for child_id in node.get("children", []):
+                child = get_node(child_id)
+                if node["type"] == "TABS":
+                    # if TABS add create a new list and append children to it
+                    # new_children.append(child)
+                    children.append(child)
+                    queue.append((child, new_children))
+                elif node["type"] in ["GRID", "ROOT"]:
+                    queue.append((child, children))
+                elif node["type"] == "TAB":
+                    queue.append((child, new_children))
+            if node["type"] == "TAB":
+                node["children"] = new_children
+                node["title"] = node["meta"]["text"]
+                node["value"] = node["id"]
+                all_tabs[node["id"]] = node["title"]
+
+        root = get_node("ROOT_ID")
+        tab_tree: list[dict[str, Any]] = []
+        all_tabs: dict[str, str] = {}
+        queue: deque[tuple[dict[str, Any], list[dict[str, Any]]]] = deque()
+        queue.append((root, tab_tree))
+        while queue:
+            node, children = queue.popleft()
+            build_tab_tree(node, children)
+
+        return {"all_tabs": all_tabs, "tab_tree": tab_tree}
+
     def update_thumbnail(self) -> None:
         cache_dashboard_thumbnail.delay(
             current_user=get_current_user(),
diff --git a/tests/integration_tests/dashboards/api_tests.py b/tests/integration_tests/dashboards/api_tests.py
index bd7e230dbe..b4213039c4 100644
--- a/tests/integration_tests/dashboards/api_tests.py
+++ b/tests/integration_tests/dashboards/api_tests.py
@@ -918,6 +918,185 @@ class TestDashboardApi(ApiOwnersTestCaseMixin, InsertChartMixin, SupersetTestCas
             for key, value in expected_results[idx].items():
                 assert response_item[key] == value
 
+    def test_get_dashboard_tabs(self):
+        """
+        Dashboard API: Test get dashboard tabs
+        """
+        position_data = {
+            "GRID_ID": {"children": [], "id": "GRID_ID", "type": "GRID"},
+            "ROOT_ID": {
+                "children": ["TABS-tDGEcwZ82u"],
+                "id": "ROOT_ID",
+                "type": "ROOT",
+            },
+            "TAB-0TkqQRxzg7": {
+                "children": [],
+                "id": "TAB-0TkqQRxzg7",
+                "meta": {"text": "P2 - T1"},
+                "type": "TAB",
+            },
+            "TAB-1iG_yOlKA2": {
+                "children": [],
+                "id": "TAB-1iG_yOlKA2",
+                "meta": {"text": "P1 - T1"},
+                "type": "TAB",
+            },
+            "TAB-2dgADEurF": {
+                "children": ["TABS-LsyXZWG2rk"],
+                "id": "TAB-2dgADEurF",
+                "meta": {"text": "P1 - T2"},
+                "type": "TAB",
+            },
+            "TAB-BJIt5SdCx3": {
+                "children": [],
+                "id": "TAB-BJIt5SdCx3",
+                "meta": {"text": "P1 - T2 - T1"},
+                "type": "TAB",
+            },
+            "TAB-CjZlNL5Uz": {
+                "children": ["TABS-Ji_K1ZBE0M"],
+                "id": "TAB-CjZlNL5Uz",
+                "meta": {"text": "Parent Tab 2"},
+                "type": "TAB",
+            },
+            "TAB-Nct5fiHtn": {
+                "children": [],
+                "id": "TAB-Nct5fiHtn",
+                "meta": {"text": "P1 - T2 - T3"},
+                "type": "TAB",
+            },
+            "TAB-PumuDkWKq": {
+                "children": [],
+                "id": "TAB-PumuDkWKq",
+                "meta": {"text": "P2 - T2"},
+                "type": "TAB",
+            },
+            "TAB-hyTv5L7zz": {
+                "children": [],
+                "id": "TAB-hyTv5L7zz",
+                "meta": {"text": "P1 - T2 - T2"},
+                "type": "TAB",
+            },
+            "TAB-qL7fSzr3jl": {
+                "children": ["TABS-N8ODUqp2sE"],
+                "id": "TAB-qL7fSzr3jl",
+                "meta": {"text": "Parent Tab 1"},
+                "type": "TAB",
+            },
+            "TABS-Ji_K1ZBE0M": {
+                "children": ["TAB-0TkqQRxzg7", "TAB-PumuDkWKq"],
+                "id": "TABS-Ji_K1ZBE0M",
+                "meta": {},
+                "type": "TABS",
+            },
+            "TABS-LsyXZWG2rk": {
+                "children": ["TAB-BJIt5SdCx3", "TAB-hyTv5L7zz", "TAB-Nct5fiHtn"],
+                "id": "TABS-LsyXZWG2rk",
+                "meta": {},
+                "type": "TABS",
+            },
+            "TABS-N8ODUqp2sE": {
+                "children": ["TAB-1iG_yOlKA2", "TAB-2dgADEurF"],
+                "id": "TABS-N8ODUqp2sE",
+                "meta": {},
+                "type": "TABS",
+            },
+            "TABS-tDGEcwZ82u": {
+                "children": ["TAB-qL7fSzr3jl", "TAB-CjZlNL5Uz"],
+                "id": "TABS-tDGEcwZ82u",
+                "meta": {},
+                "type": "TABS",
+            },
+        }
+        admin_id = self.get_user("admin").id
+        dashboard = self.insert_dashboard(
+            "title", "slug", [admin_id], position_json=json.dumps(position_data)
+        )
+        self.login(ADMIN_USERNAME)
+        uri = f"api/v1/dashboard/{dashboard.id}/tabs"
+        rv = self.get_assert_metric(uri, "get_tabs")
+        response = json.loads(rv.data.decode("utf-8"))
+        expected_response = {
+            "result": {
+                "all_tabs": {
+                    "TAB-0TkqQRxzg7": "P2 - T1",
+                    "TAB-1iG_yOlKA2": "P1 - T1",
+                    "TAB-2dgADEurF": "P1 - T2",
+                    "TAB-BJIt5SdCx3": "P1 - T2 - T1",
+                    "TAB-CjZlNL5Uz": "Parent Tab 2",
+                    "TAB-Nct5fiHtn": "P1 - T2 - T3",
+                    "TAB-PumuDkWKq": "P2 - T2",
+                    "TAB-hyTv5L7zz": "P1 - T2 - T2",
+                    "TAB-qL7fSzr3jl": "Parent Tab 1",
+                },
+                "tab_tree": [
+                    {
+                        "children": [
+                            {
+                                "children": [],
+                                "title": "P1 - T1",
+                                "value": "TAB-1iG_yOlKA2",
+                            },
+                            {
+                                "children": [
+                                    {
+                                        "children": [],
+                                        "title": "P1 - T2 - T1",
+                                        "value": "TAB-BJIt5SdCx3",
+                                    },
+                                    {
+                                        "children": [],
+                                        "title": "P1 - T2 - T2",
+                                        "value": "TAB-hyTv5L7zz",
+                                    },
+                                    {
+                                        "children": [],
+                                        "title": "P1 - T2 - T3",
+                                        "value": "TAB-Nct5fiHtn",
+                                    },
+                                ],
+                                "title": "P1 - T2",
+                                "value": "TAB-2dgADEurF",
+                            },
+                        ],
+                        "title": "Parent Tab 1",
+                        "value": "TAB-qL7fSzr3jl",
+                    },
+                    {
+                        "children": [
+                            {
+                                "children": [],
+                                "title": "P2 - T1",
+                                "value": "TAB-0TkqQRxzg7",
+                            },
+                            {
+                                "children": [],
+                                "title": "P2 - T2",
+                                "value": "TAB-PumuDkWKq",
+                            },
+                        ],
+                        "title": "Parent Tab 2",
+                        "value": "TAB-CjZlNL5Uz",
+                    },
+                ],
+            }
+        }
+        self.assertEqual(rv.status_code, 200)
+        self.assertEqual(response, expected_response)
+        db.session.delete(dashboard)
+        db.session.commit()
+
+    @pytest.mark.usefixtures("load_world_bank_dashboard_with_slices")
+    def test_get_dashboard_tabs_not_found(self):
+        """
+        Dashboard API: Test get dashboard tabs not found
+        """
+        bad_id = self.get_nonexistent_numeric_id(Dashboard)
+        self.login(ADMIN_USERNAME)
+        uri = f"api/v1/dashboard/{bad_id}/tabs"
+        rv = self.get_assert_metric(uri, "get_tabs")
+        self.assertEqual(rv.status_code, 404)
+
     def create_dashboard_import(self):
         buf = BytesIO()
         with ZipFile(buf, "w") as bundle:

From 03143bf9ad716ea44b358c091931b5de7d498b0c Mon Sep 17 00:00:00 2001
From: Evan Rusackas <evan@preset.io>
Date: Thu, 20 Jun 2024 10:41:59 -0600
Subject: [PATCH 22/34] chore(applitools): making tests more static for
 consistent testing (#28201)

---
 superset-frontend/src/components/Table/Table.stories.tsx    | 6 +++---
 .../Table/cell-renderers/TimeCell/TimeCell.stories.tsx      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/components/Table/Table.stories.tsx b/superset-frontend/src/components/Table/Table.stories.tsx
index 5db718e717..423da5137c 100644
--- a/superset-frontend/src/components/Table/Table.stories.tsx
+++ b/superset-frontend/src/components/Table/Table.stories.tsx
@@ -594,19 +594,19 @@ const shoppingData: ShoppingData[] = [
   {
     key: 1,
     item: 'Floppy Disk 10 pack',
-    orderDate: Date.now(),
+    orderDate: new Date('2015-07-02T16:16:00Z').getTime(),
     price: 9.99,
   },
   {
     key: 2,
     item: 'DVD 100 pack',
-    orderDate: Date.now(),
+    orderDate: new Date('2015-07-02T16:16:00Z').getTime(),
     price: 7.99,
   },
   {
     key: 3,
     item: '128 GB SSD',
-    orderDate: Date.now(),
+    orderDate: new Date('2015-07-02T16:16:00Z').getTime(),
     price: 3.99,
   },
 ];
diff --git a/superset-frontend/src/components/Table/cell-renderers/TimeCell/TimeCell.stories.tsx b/superset-frontend/src/components/Table/cell-renderers/TimeCell/TimeCell.stories.tsx
index 39ae19c29d..fcbc4ea846 100644
--- a/superset-frontend/src/components/Table/cell-renderers/TimeCell/TimeCell.stories.tsx
+++ b/superset-frontend/src/components/Table/cell-renderers/TimeCell/TimeCell.stories.tsx
@@ -30,7 +30,7 @@ export const Basic: ComponentStory<typeof TimeCell> = args => (
 );
 
 Basic.args = {
-  value: Date.now(),
+  value: new Date('2015-07-02T16:16:00Z').getTime(),
 };
 
 Basic.argTypes = {

From 6378ec5d69363bc66af23a07e43f2af84e7fafe5 Mon Sep 17 00:00:00 2001
From: Aditya Mishra <mishraaditya6991@gmail.com>
Date: Thu, 20 Jun 2024 22:58:10 +0530
Subject: [PATCH 23/34] feat(dashboard): Enables pivot table download option at
 dashboard level (#29123)

Co-authored-by: adimyth <aditya@fnp.dev>
---
 .../src/dashboard/components/SliceHeader/index.tsx |  2 ++
 .../components/SliceHeaderControls/index.tsx       | 14 ++++++++++++++
 .../dashboard/components/gridComponents/Chart.jsx  | 10 ++++++++--
 superset-frontend/src/dashboard/types.ts           |  1 +
 4 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/SliceHeader/index.tsx b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
index 33afd9f891..0ffa82756c 100644
--- a/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
@@ -142,6 +142,7 @@ const SliceHeader: FC<SliceHeaderProps> = ({
   supersetCanExplore = false,
   supersetCanShare = false,
   supersetCanCSV = false,
+  exportPivotCSV,
   exportFullCSV,
   exportFullXLSX,
   slice,
@@ -266,6 +267,7 @@ const SliceHeader: FC<SliceHeaderProps> = ({
                 logExploreChart={logExploreChart}
                 logEvent={logEvent}
                 exportCSV={exportCSV}
+                exportPivotCSV={exportPivotCSV}
                 exportFullCSV={exportFullCSV}
                 exportXLSX={exportXLSX}
                 exportFullXLSX={exportFullXLSX}
diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
index 632428f32f..5f8eaa7a9f 100644
--- a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
@@ -152,6 +152,7 @@ export interface SliceHeaderControlsProps {
   logEvent?: (eventName: string, eventData?: object) => void;
   toggleExpandSlice?: (sliceId: number) => void;
   exportCSV?: (sliceId: number) => void;
+  exportPivotCSV?: (sliceId: number) => void;
   exportFullCSV?: (sliceId: number) => void;
   exportXLSX?: (sliceId: number) => void;
   exportFullXLSX?: (sliceId: number) => void;
@@ -608,6 +609,10 @@ const SliceHeaderControls = (props: SliceHeaderControlsPropsWithRouter) => {
         // eslint-disable-next-line no-unused-expressions
         props.exportCSV?.(props.slice.slice_id);
         break;
+      case MenuKeys.ExportPivotCsv:
+        // eslint-disable-next-line no-unused-expressions
+        props.exportPivotCSV?.(props.slice.slice_id);
+        break;
       case MenuKeys.Fullscreen:
         props.handleToggleFullSize();
         break;
@@ -685,6 +690,7 @@ const SliceHeaderControls = (props: SliceHeaderControlsPropsWithRouter) => {
     isCached = [],
   } = props;
   const isTable = slice.viz_type === 'table';
+  const isPivotTable = slice.viz_type === 'pivot_table_v2';
   const cachedWhen = (cachedDttm || []).map(itemCachedDttm =>
     moment.utc(itemCachedDttm).fromNow(),
   );
@@ -866,6 +872,14 @@ const SliceHeaderControls = (props: SliceHeaderControlsPropsWithRouter) => {
           >
             {t('Export to .CSV')}
           </Menu.Item>
+          {isPivotTable && (
+            <Menu.Item
+              key={MenuKeys.ExportPivotCsv}
+              icon={<Icons.FileOutlined css={dropdownIconsStyles} />}
+            >
+              {t('Export to Pivoted .CSV')}
+            </Menu.Item>
+          )}
           <Menu.Item
             key={MenuKeys.ExportXlsx}
             icon={<Icons.FileOutlined css={dropdownIconsStyles} />}
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
index f519c8f83d..6b79d31826 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
@@ -134,6 +134,7 @@ class Chart extends Component {
     this.handleFilterMenuOpen = this.handleFilterMenuOpen.bind(this);
     this.handleFilterMenuClose = this.handleFilterMenuClose.bind(this);
     this.exportCSV = this.exportCSV.bind(this);
+    this.exportPivotCSV = this.exportPivotCSV.bind(this);
     this.exportFullCSV = this.exportFullCSV.bind(this);
     this.exportXLSX = this.exportXLSX.bind(this);
     this.exportFullXLSX = this.exportFullXLSX.bind(this);
@@ -330,6 +331,10 @@ class Chart extends Component {
     this.exportTable('csv', isFullCSV);
   }
 
+  exportPivotCSV() {
+    this.exportTable('csv', false, true);
+  }
+
   exportXLSX() {
     this.exportTable('xlsx', false);
   }
@@ -338,7 +343,7 @@ class Chart extends Component {
     this.exportTable('xlsx', true);
   }
 
-  exportTable(format, isFullCSV) {
+  exportTable(format, isFullCSV, isPivot = false) {
     const logAction =
       format === 'csv'
         ? LOG_ACTIONS_EXPORT_CSV_DASHBOARD_CHART
@@ -351,7 +356,7 @@ class Chart extends Component {
       formData: isFullCSV
         ? { ...this.props.formData, row_limit: this.props.maxRows }
         : this.props.formData,
-      resultType: 'full',
+      resultType: isPivot ? 'post_processed' : 'full',
       resultFormat: format,
       force: true,
       ownState: this.props.ownState,
@@ -444,6 +449,7 @@ class Chart extends Component {
           logEvent={logEvent}
           onExploreChart={this.onExploreChart}
           exportCSV={this.exportCSV}
+          exportPivotCSV={this.exportPivotCSV}
           exportXLSX={this.exportXLSX}
           exportFullCSV={this.exportFullCSV}
           exportFullXLSX={this.exportFullXLSX}
diff --git a/superset-frontend/src/dashboard/types.ts b/superset-frontend/src/dashboard/types.ts
index 7200bec615..8ed1405cdf 100644
--- a/superset-frontend/src/dashboard/types.ts
+++ b/superset-frontend/src/dashboard/types.ts
@@ -244,6 +244,7 @@ export enum MenuKeys {
   DownloadAsImage = 'download_as_image',
   ExploreChart = 'explore_chart',
   ExportCsv = 'export_csv',
+  ExportPivotCsv = 'export_pivot_csv',
   ExportFullCsv = 'export_full_csv',
   ExportXlsx = 'export_xlsx',
   ExportFullXlsx = 'export_full_xlsx',

From 5e060cef7c0ec197a44b92490eb11c5a39282c92 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Thu, 20 Jun 2024 14:28:46 -0700
Subject: [PATCH 24/34] feat: add new SQLLAB_FORCE_RUN_ASYNC feature flag
 (#29231)

Co-authored-by: Geido <60598000+geido@users.noreply.github.com>
---
 .../src/utils/featureFlags.ts                 |  1 +
 .../src/components/InfoTooltip/index.tsx      | 15 +--
 .../databases/DatabaseModal/ExtraOptions.tsx  | 23 ++++-
 superset/config.py                            |  2 +
 superset/sqllab/sqllab_execution_context.py   |  4 +-
 tests/unit_tests/sql_lab_execution_context.py | 96 +++++++++++++++++++
 6 files changed, 131 insertions(+), 10 deletions(-)
 create mode 100644 tests/unit_tests/sql_lab_execution_context.py

diff --git a/superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts b/superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts
index b3af431d52..fcc38dc2ec 100644
--- a/superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts
+++ b/superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts
@@ -57,6 +57,7 @@ export enum FeatureFlag {
   TaggingSystem = 'TAGGING_SYSTEM',
   Thumbnails = 'THUMBNAILS',
   UseAnalagousColors = 'USE_ANALAGOUS_COLORS',
+  ForceSqlLabRunAsync = 'SQLLAB_FORCE_RUN_ASYNC',
 }
 
 export type ScheduleQueriesProps = {
diff --git a/superset-frontend/src/components/InfoTooltip/index.tsx b/superset-frontend/src/components/InfoTooltip/index.tsx
index cf10d873dd..1f160e47ae 100644
--- a/superset-frontend/src/components/InfoTooltip/index.tsx
+++ b/superset-frontend/src/components/InfoTooltip/index.tsx
@@ -17,12 +17,12 @@
  * under the License.
  */
 
-import { styled } from '@superset-ui/core';
+import { styled, useTheme } from '@superset-ui/core';
 import { Tooltip } from 'src/components/Tooltip';
 import Icons from 'src/components/Icons';
 
 export interface InfoTooltipProps {
-  className?: string;
+  iconStyle?: React.CSSProperties;
   tooltip: string;
   placement?:
     | 'bottom'
@@ -46,9 +46,6 @@ export interface InfoTooltipProps {
 
 const StyledTooltip = styled(Tooltip)`
   cursor: pointer;
-  path:first-of-type {
-    fill: ${({ theme }) => theme.colors.grayscale.base};
-  }
 `;
 
 const StyledTooltipTitle = styled.span`
@@ -68,12 +65,18 @@ const defaultColor = 'rgba(0,0,0,0.9)';
 
 export default function InfoTooltip({
   tooltip,
+  iconStyle = {},
   placement = 'right',
   trigger = 'hover',
   overlayStyle = defaultOverlayStyle,
   bgColor = defaultColor,
   viewBox = '0 -1 24 24',
 }: InfoTooltipProps) {
+  const theme = useTheme();
+  const alteredIconStyle = {
+    ...iconStyle,
+    color: iconStyle.color || theme.colors.grayscale.base,
+  };
   return (
     <StyledTooltip
       title={<StyledTooltipTitle>{tooltip}</StyledTooltipTitle>}
@@ -82,7 +85,7 @@ export default function InfoTooltip({
       overlayStyle={overlayStyle}
       color={bgColor}
     >
-      <Icons.InfoSolidSmall className="info-solid-small" viewBox={viewBox} />
+      <Icons.InfoSolidSmall style={alteredIconStyle} viewBox={viewBox} />
     </StyledTooltip>
   );
 }
diff --git a/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx b/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx
index 9f48c2792c..6cf1deaac0 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx
@@ -20,8 +20,11 @@ import { ChangeEvent, EventHandler } from 'react';
 import cx from 'classnames';
 import {
   t,
-  SupersetTheme,
   DatabaseConnectionExtension,
+  isFeatureEnabled,
+  SupersetTheme,
+  useTheme,
+  FeatureFlag,
 } from '@superset-ui/core';
 import InfoTooltip from 'src/components/InfoTooltip';
 import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
@@ -68,10 +71,16 @@ const ExtraOptions = ({
     }
     return value;
   });
-
+  const theme = useTheme();
   const ExtraExtensionComponent = extraExtension?.component;
   const ExtraExtensionLogo = extraExtension?.logo;
   const ExtensionDescription = extraExtension?.description;
+  const allowRunAsync = isFeatureEnabled(FeatureFlag.ForceSqlLabRunAsync)
+    ? true
+    : !!db?.allow_run_async;
+  const isAllowRunAsyncDisabled = isFeatureEnabled(
+    FeatureFlag.ForceSqlLabRunAsync,
+  );
 
   return (
     <Collapse
@@ -319,7 +328,7 @@ const ExtraOptions = ({
             <IndeterminateCheckbox
               id="allow_run_async"
               indeterminate={false}
-              checked={!!db?.allow_run_async}
+              checked={allowRunAsync}
               onChange={onInputChange}
               labelText={t('Asynchronous query execution')}
             />
@@ -331,6 +340,14 @@ const ExtraOptions = ({
                   'backend. Refer to the installation docs for more information.',
               )}
             />
+            {isAllowRunAsyncDisabled && (
+              <InfoTooltip
+                iconStyle={{ color: theme.colors.error.base }}
+                tooltip={t(
+                  'This option has been disabled by the administrator.',
+                )}
+              />
+            )}
           </div>
         </StyledInputContainer>
         <StyledInputContainer css={{ no_margin_bottom }}>
diff --git a/superset/config.py b/superset/config.py
index d3a4694a03..8256ca0dc0 100644
--- a/superset/config.py
+++ b/superset/config.py
@@ -537,6 +537,8 @@ DEFAULT_FEATURE_FLAGS: dict[str, bool] = {
     "PLAYWRIGHT_REPORTS_AND_THUMBNAILS": False,
     # Set to True to enable experimental chart plugins
     "CHART_PLUGINS_EXPERIMENTAL": False,
+    # Regardless of database configuration settings, force SQLLAB to run async using Celery
+    "SQLLAB_FORCE_RUN_ASYNC": False,
 }
 
 # ------------------------------
diff --git a/superset/sqllab/sqllab_execution_context.py b/superset/sqllab/sqllab_execution_context.py
index f67e2bf5a9..5ca180d101 100644
--- a/superset/sqllab/sqllab_execution_context.py
+++ b/superset/sqllab/sqllab_execution_context.py
@@ -77,7 +77,9 @@ class SqlJsonExecutionContext:  # pylint: disable=too-many-instance-attributes
         self.schema = cast(str, query_params.get("schema"))
         self.sql = cast(str, query_params.get("sql"))
         self.template_params = self._get_template_params(query_params)
-        self.async_flag = cast(bool, query_params.get("runAsync"))
+        self.async_flag = is_feature_enabled("SQLLAB_FORCE_RUN_ASYNC") or cast(
+            bool, query_params.get("runAsync")
+        )
         self.limit = self._get_limit_param(query_params)
         self.status = cast(str, query_params.get("status"))
         if cast(bool, query_params.get("select_as_cta")):
diff --git a/tests/unit_tests/sql_lab_execution_context.py b/tests/unit_tests/sql_lab_execution_context.py
new file mode 100644
index 0000000000..ea39e2bf3d
--- /dev/null
+++ b/tests/unit_tests/sql_lab_execution_context.py
@@ -0,0 +1,96 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   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
+# specific language governing permissions and limitations
+# under the License.
+# pylint: disable=import-outside-toplevel, invalid-name, unused-argument, too-many-locals
+
+import pytest
+
+from superset.sqllab.sqllab_execution_context import (
+    CreateTableAsSelect,
+    SqlJsonExecutionContext,
+)
+from tests.unit_tests.conftest import with_feature_flags
+
+
+@pytest.fixture
+def query_params():
+    return {
+        "database_id": 1,
+        "catalog": "default",
+        "schema": "public",
+        "sql": "SELECT * FROM table",
+        "templateParams": "{}",
+        "runAsync": False,
+        "queryLimit": 1000,
+        "status": "success",
+        "select_as_cta": False,
+        "client_id": "client123",
+        "sql_editor_id": "editor123",
+        "tab": "tab123",
+        "expand_data": False,
+    }
+
+
+def test_sql_json_execution_context_init(query_params):
+    context = SqlJsonExecutionContext(query_params)
+    assert context.database_id == 1
+    assert context.catalog == "default"
+    assert context.schema == "public"
+    assert context.sql == "SELECT * FROM table"
+    assert context.template_params == {}
+    assert context.async_flag is False
+    assert context.limit == 1000
+    assert context.status == "success"
+    assert context.client_id == "client123"
+    assert context.sql_editor_id == "editor123"
+    assert context.tab_name == "tab123"
+    assert context.expand_data is False
+
+
+@with_feature_flags(SQLLAB_FORCE_RUN_ASYNC=True)
+@pytest.mark.parametrize("runAsync, expected_async_flag", [(True, True), (False, True)])
+def test_sql_json_execution_context_feature_flag_false(
+    mocker, query_params, runAsync, expected_async_flag
+):
+    query_params["runAsync"] = runAsync
+    context = SqlJsonExecutionContext(query_params)
+    assert context.async_flag == expected_async_flag
+    assert context.is_run_asynchronous() == expected_async_flag
+
+
+@with_feature_flags(SQLLAB_FORCE_RUN_ASYNC=False)
+@pytest.mark.parametrize(
+    "runAsync, expected_async_flag", [(True, True), (False, False)]
+)
+def test_sql_json_execution_context_feature_flag_true(
+    mocker, query_params, runAsync, expected_async_flag
+):
+    query_params["runAsync"] = runAsync
+    context = SqlJsonExecutionContext(query_params)
+    assert context.async_flag == expected_async_flag
+    assert context.is_run_asynchronous() == expected_async_flag
+
+
+def test_create_table_as_select():
+    query_params = {
+        "ctas_method": "TABLE",
+        "schema": "public",
+        "tmp_table_name": "temp_table",
+    }
+    ctas = CreateTableAsSelect.create_from(query_params)
+    assert ctas.ctas_method == "TABLE"
+    assert ctas.target_schema_name == "public"
+    assert ctas.target_table_name == "temp_table"

From 514eda82fbada573b99c5eba892f811ac50bb771 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Thu, 20 Jun 2024 14:30:03 -0700
Subject: [PATCH 25/34] fix: don't strip SQL comments in Explore - 2nd try
 (#28753)

---
 .../superset-python-integrationtest.yml       |  2 +-
 superset/connectors/sqla/models.py            |  2 +-
 superset/db_engine_specs/base.py              |  5 +-
 superset/models/helpers.py                    |  8 +-
 tests/integration_tests/conftest.py           | 81 ++++++++++++++-----
 tests/integration_tests/core_tests.py         |  4 +-
 tests/integration_tests/datasource_tests.py   |  8 +-
 .../integration_tests/query_context_tests.py  | 31 +++++++
 tests/integration_tests/sqla_models_tests.py  |  2 +-
 9 files changed, 109 insertions(+), 34 deletions(-)

diff --git a/.github/workflows/superset-python-integrationtest.yml b/.github/workflows/superset-python-integrationtest.yml
index 2569a471b3..3f43bef88c 100644
--- a/.github/workflows/superset-python-integrationtest.yml
+++ b/.github/workflows/superset-python-integrationtest.yml
@@ -24,7 +24,7 @@ jobs:
         mysql+mysqldb://superset:superset@127.0.0.1:13306/superset?charset=utf8mb4&binary_prefix=true
     services:
       mysql:
-        image: mysql:5.7
+        image: mysql:8.0
         env:
           MYSQL_ROOT_PASSWORD: root
         ports:
diff --git a/superset/connectors/sqla/models.py b/superset/connectors/sqla/models.py
index 11ad95bb44..6d8d87a506 100644
--- a/superset/connectors/sqla/models.py
+++ b/superset/connectors/sqla/models.py
@@ -1450,7 +1450,7 @@ class SqlaTable(
         if not self.is_virtual:
             return self.get_sqla_table(), None
 
-        from_sql = self.get_rendered_sql(template_processor)
+        from_sql = self.get_rendered_sql(template_processor) + "\n"
         parsed_query = ParsedQuery(from_sql, engine=self.db_engine_spec.engine)
         if not (
             parsed_query.is_unknown()
diff --git a/superset/db_engine_specs/base.py b/superset/db_engine_specs/base.py
index a9a5cf7655..159c510fe9 100644
--- a/superset/db_engine_specs/base.py
+++ b/superset/db_engine_specs/base.py
@@ -1133,9 +1133,8 @@ class BaseEngineSpec:  # pylint: disable=too-many-public-methods
         cte = None
         sql_remainder = None
         sql = sql.strip(" \t\n;")
-        sql_statement = sqlparse.format(sql, strip_comments=True)
         query_limit: int | None = sql_parse.extract_top_from_query(
-            sql_statement, cls.top_keywords
+            sql, cls.top_keywords
         )
         if not limit:
             final_limit = query_limit
@@ -1144,7 +1143,7 @@ class BaseEngineSpec:  # pylint: disable=too-many-public-methods
         else:
             final_limit = limit
         if not cls.allows_cte_in_subquery:
-            cte, sql_remainder = sql_parse.get_cte_remainder_query(sql_statement)
+            cte, sql_remainder = sql_parse.get_cte_remainder_query(sql)
         if cte:
             str_statement = str(sql_remainder)
             cte = cte + "\n"
diff --git a/superset/models/helpers.py b/superset/models/helpers.py
index a044ff75e1..7b211f98b1 100644
--- a/superset/models/helpers.py
+++ b/superset/models/helpers.py
@@ -1070,8 +1070,7 @@ class ExploreMixin:  # pylint: disable=too-many-public-methods
         """
         Render sql with template engine (Jinja).
         """
-
-        sql = self.sql
+        sql = self.sql.strip("\t\r\n; ")
         if template_processor:
             try:
                 sql = template_processor.process_template(sql)
@@ -1083,13 +1082,12 @@ class ExploreMixin:  # pylint: disable=too-many-public-methods
                     )
                 ) from ex
 
-        script = SQLScript(sql.strip("\t\r\n; "), engine=self.db_engine_spec.engine)
+        script = SQLScript(sql, engine=self.db_engine_spec.engine)
         if len(script.statements) > 1:
             raise QueryObjectValidationError(
                 _("Virtual dataset query cannot consist of multiple statements")
             )
 
-        sql = script.statements[0].format(comments=False)
         if not sql:
             raise QueryObjectValidationError(_("Virtual dataset query cannot be empty"))
         return sql
@@ -1106,7 +1104,7 @@ class ExploreMixin:  # pylint: disable=too-many-public-methods
         CTE, the CTE is returned as the second value in the return tuple.
         """
 
-        from_sql = self.get_rendered_sql(template_processor)
+        from_sql = self.get_rendered_sql(template_processor) + "\n"
         parsed_query = ParsedQuery(from_sql, engine=self.db_engine_spec.engine)
         if not (
             parsed_query.is_unknown()
diff --git a/tests/integration_tests/conftest.py b/tests/integration_tests/conftest.py
index 84c5793105..f180da9aed 100644
--- a/tests/integration_tests/conftest.py
+++ b/tests/integration_tests/conftest.py
@@ -19,6 +19,7 @@ from __future__ import annotations
 import contextlib
 import functools
 import os
+from textwrap import dedent
 from typing import Any, Callable, TYPE_CHECKING
 from unittest.mock import patch
 
@@ -295,25 +296,67 @@ def virtual_dataset():
     dataset = SqlaTable(
         table_name="virtual_dataset",
         sql=(
-            "SELECT 0 as col1, 'a' as col2, 1.0 as col3, NULL as col4, '2000-01-01 00:00:00' as col5, 1 as col6 "
-            "UNION ALL "
-            "SELECT 1, 'b', 1.1, NULL, '2000-01-02 00:00:00', NULL "
-            "UNION ALL "
-            "SELECT 2 as col1, 'c' as col2, 1.2, NULL, '2000-01-03 00:00:00', 3 "
-            "UNION ALL "
-            "SELECT 3 as col1, 'd' as col2, 1.3, NULL, '2000-01-04 00:00:00', 4 "
-            "UNION ALL "
-            "SELECT 4 as col1, 'e' as col2, 1.4, NULL, '2000-01-05 00:00:00', 5 "
-            "UNION ALL "
-            "SELECT 5 as col1, 'f' as col2, 1.5, NULL, '2000-01-06 00:00:00', 6 "
-            "UNION ALL "
-            "SELECT 6 as col1, 'g' as col2, 1.6, NULL, '2000-01-07 00:00:00', 7 "
-            "UNION ALL "
-            "SELECT 7 as col1, 'h' as col2, 1.7, NULL, '2000-01-08 00:00:00', 8 "
-            "UNION ALL "
-            "SELECT 8 as col1, 'i' as col2, 1.8, NULL, '2000-01-09 00:00:00', 9 "
-            "UNION ALL "
-            "SELECT 9 as col1, 'j' as col2, 1.9, NULL, '2000-01-10 00:00:00', 10"
+            dedent("""\
+            SELECT 0 as col1, 'a' as col2, 1.0 as col3, NULL as col4, '2000-01-01 00:00:00' as col5, 1 as col6
+            UNION ALL
+            SELECT 1, 'b', 1.1, NULL, '2000-01-02 00:00:00', NULL
+            UNION ALL
+            SELECT 2 as col1, 'c' as col2, 1.2, NULL, '2000-01-03 00:00:00', 3
+            UNION ALL
+            SELECT 3 as col1, 'd' as col2, 1.3, NULL, '2000-01-04 00:00:00', 4
+            UNION ALL
+            SELECT 4 as col1, 'e' as col2, 1.4, NULL, '2000-01-05 00:00:00', 5
+            UNION ALL
+            SELECT 5 as col1, 'f' as col2, 1.5, NULL, '2000-01-06 00:00:00', 6
+            UNION ALL
+            SELECT 6 as col1, 'g' as col2, 1.6, NULL, '2000-01-07 00:00:00', 7
+            UNION ALL
+            SELECT 7 as col1, 'h' as col2, 1.7, NULL, '2000-01-08 00:00:00', 8
+            UNION ALL
+            SELECT 8 as col1, 'i' as col2, 1.8, NULL, '2000-01-09 00:00:00', 9
+            UNION ALL
+            SELECT 9 as col1, 'j' as col2, 1.9, NULL, '2000-01-10 00:00:00', 10
+        """)
+        ),
+        database=get_example_database(),
+    )
+    TableColumn(column_name="col1", type="INTEGER", table=dataset)
+    TableColumn(column_name="col2", type="VARCHAR(255)", table=dataset)
+    TableColumn(column_name="col3", type="DECIMAL(4,2)", table=dataset)
+    TableColumn(column_name="col4", type="VARCHAR(255)", table=dataset)
+    # Different database dialect datetime type is not consistent, so temporarily use varchar
+    TableColumn(column_name="col5", type="VARCHAR(255)", table=dataset)
+    TableColumn(column_name="col6", type="INTEGER", table=dataset)
+
+    SqlMetric(metric_name="count", expression="count(*)", table=dataset)
+    db.session.add(dataset)
+    db.session.commit()
+
+    yield dataset
+
+    db.session.delete(dataset)
+    db.session.commit()
+
+
+@pytest.fixture
+def virtual_dataset_with_comments():
+    from superset.connectors.sqla.models import SqlaTable, SqlMetric, TableColumn
+
+    dataset = SqlaTable(
+        table_name="virtual_dataset_with_comments",
+        sql=(
+            dedent("""\
+            --COMMENT
+            /*COMMENT*/
+            WITH cte as (--COMMENT
+                SELECT 2 as col1, /*COMMENT*/'j' as col2, 1.9, NULL, '2000-01-10 00:00:00', 10
+            )
+            SELECT 0 as col1, 'a' as col2, 1.0 as col3, NULL as col4, '2000-01-01 00:00:00' as col5, 1 as col6
+            \n /*  COMMENT */ \n
+            UNION ALL/*COMMENT*/
+            SELECT 1 as col1, 'f' as col2, 1.5, NULL, '2000-01-06 00:00:00', 6 --COMMENT
+            UNION ALL--COMMENT
+            SELECT * FROM cte --COMMENT""")
         ),
         database=get_example_database(),
     )
diff --git a/tests/integration_tests/core_tests.py b/tests/integration_tests/core_tests.py
index d085beba78..9166d54958 100644
--- a/tests/integration_tests/core_tests.py
+++ b/tests/integration_tests/core_tests.py
@@ -539,7 +539,9 @@ class TestCore(SupersetTestCase):
             database=get_example_database(),
         )
         rendered_query = str(table.get_from_clause()[0])
-        self.assertEqual(clean_query, rendered_query)
+        assert "comment 1" in rendered_query
+        assert "comment 2" in rendered_query
+        assert "FROM tbl" in rendered_query
 
     def test_slice_payload_no_datasource(self):
         form_data = {
diff --git a/tests/integration_tests/datasource_tests.py b/tests/integration_tests/datasource_tests.py
index 1b7fcb733b..718b6d2d98 100644
--- a/tests/integration_tests/datasource_tests.py
+++ b/tests/integration_tests/datasource_tests.py
@@ -538,10 +538,12 @@ def test_get_samples(test_client, login_as_admin, virtual_dataset):
     assert "coltypes" in rv2.json["result"]
     assert "data" in rv2.json["result"]
 
-    eager_samples = virtual_dataset.database.get_df(
-        f"select * from ({virtual_dataset.sql}) as tbl"
-        f' limit {app.config["SAMPLES_ROW_LIMIT"]}'
+    sql = (
+        f"select * from ({virtual_dataset.sql}) as tbl "
+        f'limit {app.config["SAMPLES_ROW_LIMIT"]}'
     )
+    eager_samples = virtual_dataset.database.get_df(sql)
+
     # the col3 is Decimal
     eager_samples["col3"] = eager_samples["col3"].apply(float)
     eager_samples = eager_samples.to_dict(orient="records")
diff --git a/tests/integration_tests/query_context_tests.py b/tests/integration_tests/query_context_tests.py
index 9c18b5e07c..2fcd6d2048 100644
--- a/tests/integration_tests/query_context_tests.py
+++ b/tests/integration_tests/query_context_tests.py
@@ -1168,3 +1168,34 @@ OFFSET 0
         re.search(r"WHERE\n  col6 >= .*2001-10-01", sqls[1])
         and re.search(r"AND col6 < .*2002-10-01", sqls[1])
     ) is not None
+
+
+def test_virtual_dataset_with_comments(app_context, virtual_dataset_with_comments):
+    qc = QueryContextFactory().create(
+        datasource={
+            "type": virtual_dataset_with_comments.type,
+            "id": virtual_dataset_with_comments.id,
+        },
+        queries=[
+            {
+                "columns": ["col1", "col2"],
+                "metrics": ["count"],
+                "post_processing": [
+                    {
+                        "operation": "pivot",
+                        "options": {
+                            "aggregates": {"count": {"operator": "mean"}},
+                            "columns": ["col2"],
+                            "index": ["col1"],
+                        },
+                    },
+                    {"operation": "flatten"},
+                ],
+            }
+        ],
+        result_type=ChartDataResultType.FULL,
+        force=True,
+    )
+    query_object = qc.queries[0]
+    df = qc.get_df_payload(query_object)["df"]
+    assert len(df) == 3
diff --git a/tests/integration_tests/sqla_models_tests.py b/tests/integration_tests/sqla_models_tests.py
index f0fa70bc02..f5569b1c83 100644
--- a/tests/integration_tests/sqla_models_tests.py
+++ b/tests/integration_tests/sqla_models_tests.py
@@ -253,7 +253,7 @@ class TestDatabaseModel(SupersetTestCase):
         query = table.database.compile_sqla_query(sqla_query.sqla_query)
 
         # assert virtual dataset
-        assert "SELECT\n  'user_abc' AS user,\n  'xyz_P1D' AS time_grain" in query
+        assert "SELECT 'user_abc' as user, 'xyz_P1D' as time_grain" in query
         # assert dataset calculated column
         assert "case when 'abc' = 'abc' then 'yes' else 'no' end" in query
         # assert adhoc column

From 118552d4d2e1df6742c6a3083cee04ad214b627b Mon Sep 17 00:00:00 2001
From: Evan Rusackas <evan@preset.io>
Date: Thu, 20 Jun 2024 17:47:24 -0600
Subject: [PATCH 26/34] chore(e2e): more instructions for manual test runs.
 (#29319)

---
 .github/workflows/superset-e2e.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/superset-e2e.yml b/.github/workflows/superset-e2e.yml
index d8a10f949f..24b45aabd9 100644
--- a/.github/workflows/superset-e2e.yml
+++ b/.github/workflows/superset-e2e.yml
@@ -10,7 +10,7 @@ on:
   workflow_dispatch:
     inputs:
       use_dashboard:
-        description: 'Use Cypress Dashboard (true/false) [paid service - trigger manually when needed]'
+        description: 'Use Cypress Dashboard (true/false) [paid service - trigger manually when needed]. You MUST provide a branch and/or PR number below for this to work.'
         required: false
         default: 'false'
       ref:

From 8c990adabe5268af7f9baa1b9a25a7283289e3ac Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 20 Jun 2024 21:53:09 -0600
Subject: [PATCH 27/34] build(deps): bump deck.gl from 9.0.6 to 9.0.12 in
 /superset-frontend/plugins/legacy-preset-chart-deckgl (#28296)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: GitHub-Actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 superset-frontend/package-lock.json           | 36 +++++++++----------
 .../legacy-preset-chart-deckgl/package.json   |  2 +-
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
index f4159d5764..8221d2ffa2 100644
--- a/superset-frontend/package-lock.json
+++ b/superset-frontend/package-lock.json
@@ -5903,12 +5903,12 @@
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.1.tgz",
-      "integrity": "sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==",
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
+      "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
       "dependencies": {
-        "@floating-ui/core": "^1.6.0",
-        "@floating-ui/utils": "^0.2.1"
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
       }
     },
     "node_modules/@floating-ui/react-dom": {
@@ -32060,9 +32060,9 @@
       }
     },
     "node_modules/dayjs": {
-      "version": "1.10.7",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
-      "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig=="
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
     "node_modules/deasync": {
       "version": "0.1.29",
@@ -68993,7 +68993,7 @@
         "d3-array": "^1.2.4",
         "d3-color": "^1.4.1",
         "d3-scale": "^3.0.0",
-        "deck.gl": "9.0.6",
+        "deck.gl": "9.0.12",
         "lodash": "^4.17.21",
         "moment": "^2.30.1",
         "mousetrap": "^1.6.5",
@@ -75280,12 +75280,12 @@
       }
     },
     "@floating-ui/dom": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.1.tgz",
-      "integrity": "sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==",
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
+      "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
       "requires": {
-        "@floating-ui/core": "^1.6.0",
-        "@floating-ui/utils": "^0.2.1"
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
       }
     },
     "@floating-ui/react-dom": {
@@ -87294,7 +87294,7 @@
         "d3-array": "^1.2.4",
         "d3-color": "^1.4.1",
         "d3-scale": "^3.0.0",
-        "deck.gl": "9.0.6",
+        "deck.gl": "9.0.12",
         "lodash": "^4.17.21",
         "moment": "^2.30.1",
         "mousetrap": "^1.6.5",
@@ -97251,9 +97251,9 @@
       "dev": true
     },
     "dayjs": {
-      "version": "1.10.7",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
-      "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig=="
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
     "deasync": {
       "version": "0.1.29",
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/package.json b/superset-frontend/plugins/legacy-preset-chart-deckgl/package.json
index 7c3df6174e..73b8128f04 100644
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/package.json
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/package.json
@@ -31,7 +31,7 @@
     "d3-array": "^1.2.4",
     "d3-color": "^1.4.1",
     "d3-scale": "^3.0.0",
-    "deck.gl": "9.0.6",
+    "deck.gl": "9.0.12",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "mousetrap": "^1.6.5",

From 9444c6bd4b04a9ab509a8edead604f78c22f4d3e Mon Sep 17 00:00:00 2001
From: Jessie R <j@scjr.me>
Date: Fri, 21 Jun 2024 14:24:50 +0700
Subject: [PATCH 28/34] fix: Remove recursive repr call (#29314)

---
 superset/commands/exceptions.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset/commands/exceptions.py b/superset/commands/exceptions.py
index 7fc89ac1d9..aa51886797 100644
--- a/superset/commands/exceptions.py
+++ b/superset/commands/exceptions.py
@@ -28,7 +28,7 @@ class CommandException(SupersetException):
     def __repr__(self) -> str:
         if self._exception:
             return repr(self._exception)
-        return repr(self)
+        return super().__repr__()
 
 
 class ObjectNotFoundError(CommandException):

From 79d84f30f56490508961ad04839f30e3506b608a Mon Sep 17 00:00:00 2001
From: Daniel Vaz Gaspar <danielvazgaspar@gmail.com>
Date: Fri, 21 Jun 2024 12:08:40 +0100
Subject: [PATCH 29/34] docs: update CVEs fixed on 4.0.1 and 3.1.3 (#29313)

---
 docs/docs/security/cves.mdx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/docs/security/cves.mdx b/docs/docs/security/cves.mdx
index 4296142a06..ba4bd2ea73 100644
--- a/docs/docs/security/cves.mdx
+++ b/docs/docs/security/cves.mdx
@@ -2,6 +2,12 @@
 title: CVEs fixed by release
 sidebar_position: 2
 ---
+#### Version 3.1.3, 4.0.1
+
+| CVE            | Title                       |                    Affected |
+|:---------------|:----------------------------|----------------------------:|
+| CVE-2024-34693 | Server arbitrary file read  |  < 3.1.3, >= 4.0.0, < 4.0.1 |
+
 #### Version 3.1.2
 
 | CVE            | Title                                                   | Affected |

From fe3ba12801dca32359a6ad811fe9a4f75502106a Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Fri, 21 Jun 2024 14:10:33 -0300
Subject: [PATCH 30/34] refactor: Adds the sort_by_metric control to
 sharedControls (#29325)

---
 .../src/shared-controls/sharedControls.tsx          |  9 +++++++++
 .../legacy-plugin-chart-chord/src/controlPanel.ts   | 13 +------------
 .../src/controlPanel.tsx                            | 13 +------------
 .../legacy-plugin-chart-sankey/src/controlPanel.ts  | 13 +------------
 .../src/controlPanel.ts                             | 13 +------------
 .../src/Funnel/controlPanel.tsx                     |  6 +-----
 .../plugin-chart-echarts/src/Gauge/controlPanel.tsx | 13 +------------
 .../plugin-chart-echarts/src/Pie/controlPanel.tsx   |  7 ++-----
 .../src/Sunburst/controlPanel.tsx                   | 13 +------------
 .../src/Treemap/controlPanel.tsx                    | 13 +------------
 .../src/plugin/controlPanel.ts                      | 13 +------------
 11 files changed, 20 insertions(+), 106 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/sharedControls.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/sharedControls.tsx
index c01b4052d1..eaf0f172b4 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/sharedControls.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/sharedControls.tsx
@@ -362,6 +362,14 @@ const temporal_columns_lookup: SharedControlConfig<'HiddenControl'> = {
     ),
 };
 
+const sort_by_metric: SharedControlConfig<'CheckboxControl'> = {
+  type: 'CheckboxControl',
+  label: t('Sort by metric'),
+  description: t(
+    'Whether to sort results by the selected metric in descending order.',
+  ),
+};
+
 export default {
   metrics: dndAdhocMetricsControl,
   metric: dndAdhocMetricControl,
@@ -400,4 +408,5 @@ export default {
   show_empty_columns,
   temporal_columns_lookup,
   currency_format,
+  sort_by_metric,
 };
diff --git a/superset-frontend/plugins/legacy-plugin-chart-chord/src/controlPanel.ts b/superset-frontend/plugins/legacy-plugin-chart-chord/src/controlPanel.ts
index 679e959707..031382a45e 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-chord/src/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-plugin-chart-chord/src/controlPanel.ts
@@ -33,18 +33,7 @@ const config: ControlPanelConfig = {
         ['metric'],
         ['adhoc_filters'],
         ['row_limit'],
-        [
-          {
-            name: 'sort_by_metric',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Sort by metric'),
-              description: t(
-                'Whether to sort results by the selected metric in descending order.',
-              ),
-            },
-          },
-        ],
+        ['sort_by_metric'],
       ],
     },
     {
diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/controlPanel.tsx b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/controlPanel.tsx
index 53394c99eb..d22428e1ea 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/controlPanel.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/controlPanel.tsx
@@ -64,18 +64,7 @@ const config: ControlPanelConfig = {
         ['metric'],
         ['adhoc_filters'],
         ['row_limit'],
-        [
-          {
-            name: 'sort_by_metric',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Sort by metric'),
-              description: t(
-                'Whether to sort results by the selected metric in descending order.',
-              ),
-            },
-          },
-        ],
+        ['sort_by_metric'],
       ],
     },
     {
diff --git a/superset-frontend/plugins/legacy-plugin-chart-sankey/src/controlPanel.ts b/superset-frontend/plugins/legacy-plugin-chart-sankey/src/controlPanel.ts
index ef9f0394d9..7505f1a4a0 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-sankey/src/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-plugin-chart-sankey/src/controlPanel.ts
@@ -49,18 +49,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        [
-          {
-            name: 'sort_by_metric',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Sort by metric'),
-              description: t(
-                'Whether to sort results by the selected metric in descending order.',
-              ),
-            },
-          },
-        ],
+        ['sort_by_metric'],
       ],
     },
     {
diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts
index 82d8dcb1e2..f75764e9f5 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts
@@ -54,18 +54,7 @@ const config: ControlPanelConfig = {
         ['metric'],
         ['adhoc_filters'],
         ['row_limit'],
-        [
-          {
-            name: 'sort_by_metric',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Sort by metric'),
-              description: t(
-                'Whether to sort results by the selected metric in descending order.',
-              ),
-            },
-          },
-        ],
+        ['sort_by_metric'],
       ],
     },
     {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
index a8e4f01644..df2b23c599 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
@@ -62,12 +62,8 @@ const config: ControlPanelConfig = {
           {
             name: 'sort_by_metric',
             config: {
+              ...sharedControls.sort_by_metric,
               default: true,
-              type: 'CheckboxControl',
-              label: t('Sort by metric'),
-              description: t(
-                'Whether to sort results by the selected metric in descending order.',
-              ),
             },
           },
         ],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
index 8727a23c72..5d6df447ac 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
@@ -53,18 +53,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        [
-          {
-            name: 'sort_by_metric',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Sort by metric'),
-              description: t(
-                'Whether to sort results by the selected metric in descending order.',
-              ),
-            },
-          },
-        ],
+        ['sort_by_metric'],
       ],
     },
     {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
index 7e700c18c9..583444508d 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
@@ -26,6 +26,7 @@ import {
   D3_FORMAT_OPTIONS,
   D3_TIME_FORMAT_OPTIONS,
   getStandardizedControls,
+  sharedControls,
 } from '@superset-ui/chart-controls';
 import { DEFAULT_FORM_DATA } from './types';
 import { legendSection } from '../controls';
@@ -56,12 +57,8 @@ const config: ControlPanelConfig = {
           {
             name: 'sort_by_metric',
             config: {
+              ...sharedControls.sort_by_metric,
               default: true,
-              type: 'CheckboxControl',
-              label: t('Sort by metric'),
-              description: t(
-                'Whether to sort results by the selected metric in descending order.',
-              ),
             },
           },
         ],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/controlPanel.tsx
index 532b19b410..2a64a8f965 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/controlPanel.tsx
@@ -42,18 +42,7 @@ const config: ControlPanelConfig = {
         ['secondary_metric'],
         ['adhoc_filters'],
         ['row_limit'],
-        [
-          {
-            name: 'sort_by_metric',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Sort by metric'),
-              description: t(
-                'Whether to sort results by the selected metric in descending order.',
-              ),
-            },
-          },
-        ],
+        ['sort_by_metric'],
       ],
     },
     {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
index 2e09f25d1e..1e1dc47576 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
@@ -40,18 +40,7 @@ const config: ControlPanelConfig = {
         ['groupby'],
         ['metric'],
         ['row_limit'],
-        [
-          {
-            name: 'sort_by_metric',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Sort by metric'),
-              description: t(
-                'Whether to sort results by the selected metric in descending order.',
-              ),
-            },
-          },
-        ],
+        ['sort_by_metric'],
         ['adhoc_filters'],
       ],
     },
diff --git a/superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/controlPanel.ts b/superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/controlPanel.ts
index 3ba153d246..9425f12117 100644
--- a/superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/controlPanel.ts
+++ b/superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/controlPanel.ts
@@ -32,18 +32,7 @@ const config: ControlPanelConfig = {
         ['metric'],
         ['adhoc_filters'],
         ['row_limit'],
-        [
-          {
-            name: 'sort_by_metric',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Sort by metric'),
-              description: t(
-                'Whether to sort results by the selected metric in descending order.',
-              ),
-            },
-          },
-        ],
+        ['sort_by_metric'],
       ],
     },
     {

From 4fe04e63ac2f0bbf2e824dd896e445681ba98328 Mon Sep 17 00:00:00 2001
From: Evan Rusackas <evan@preset.io>
Date: Mon, 24 Jun 2024 10:07:04 -0600
Subject: [PATCH 31/34] chore(e2e): simplify Cypress record key usage (#29327)

---
 .asf.yaml                          |  3 +++
 .github/workflows/superset-e2e.yml |  4 ++--
 scripts/cypress_run.py             | 11 +++--------
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/.asf.yaml b/.asf.yaml
index 14f02fb18e..ea63dc5e61 100644
--- a/.asf.yaml
+++ b/.asf.yaml
@@ -63,9 +63,12 @@ github:
         # combination here.
         contexts:
           - lint-check
+          - cypress-matrix (0, chrome)
           - cypress-matrix (1, chrome)
           - cypress-matrix (2, chrome)
           - cypress-matrix (3, chrome)
+          - cypress-matrix (4, chrome)
+          - cypress-matrix (5, chrome)
           - frontend-build
           - pre-commit
           - python-lint
diff --git a/.github/workflows/superset-e2e.yml b/.github/workflows/superset-e2e.yml
index 24b45aabd9..f14e301e2a 100644
--- a/.github/workflows/superset-e2e.yml
+++ b/.github/workflows/superset-e2e.yml
@@ -130,12 +130,12 @@ jobs:
           CYPRESS_BROWSER: ${{ matrix.browser }}
           PARALLEL_ID: ${{ matrix.parallel_id }}
           PARALLELISM: 6
-          CYPRESS_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
         with:
           run: cypress-run-all ${{ env.USE_DASHBOARD }}
       - name: Upload Artifacts
         uses: actions/upload-artifact@v4
         if: github.event_name == 'workflow_dispatch' && (steps.check.outputs.python || steps.check.outputs.frontend)
         with:
-          name: screenshots
           path: ${{ github.workspace }}/superset-frontend/cypress-base/cypress/screenshots
+          name: cypress-artifact-${{ github.run_id }}-${{ github.job }}
diff --git a/scripts/cypress_run.py b/scripts/cypress_run.py
index a04fb861fd..1154a3661d 100644
--- a/scripts/cypress_run.py
+++ b/scripts/cypress_run.py
@@ -24,6 +24,7 @@ from datetime import datetime
 XVFB_PRE_CMD = "xvfb-run --auto-servernum --server-args='-screen 0, 1024x768x24' "
 REPO = os.getenv("GITHUB_REPOSITORY") or "apache/superset"
 GITHUB_EVENT_NAME = os.getenv("GITHUB_REPOSITORY") or "push"
+CYPRESS_RECORD_KEY = os.getenv("CYPRESS_RECORD_KEY") or ""
 
 
 def compute_hash(file_path: str) -> str:
@@ -55,13 +56,7 @@ def get_cypress_cmd(
 
     if use_dashboard:
         # Run using cypress.io service
-        cypress_key = os.getenv("CYPRESS_KEY")
-        command = f"echo {cypress_key} | base64 --decode"
-        cypress_record_key = (
-            subprocess.check_output(command, shell=True).decode("utf-8").strip()
-        )
-        os.environ["CYPRESS_RECORD_KEY"] = cypress_record_key
-        spec: str = "*/**/*"
+        spec: str = "cypress/e2e/*/**/*"
         cmd = (
             f"{XVFB_PRE_CMD} "
             f'{cypress_cmd} --spec "{spec}" --browser {browser} '
@@ -70,7 +65,7 @@ def get_cypress_cmd(
         )
     else:
         # Run local, but split the execution
-        os.environ.pop("CYPRESS_KEY", None)
+        os.environ.pop("CYPRESS_RECORD_KEY", None)
         spec_list_str = ",".join(sorted(spec_list))
         if _filter:
             spec_list_str = ",".join(sorted([s for s in spec_list if _filter in s]))

From 01ffc1227a715c4cd2f3e145a9d3ae9b9c0f70ec Mon Sep 17 00:00:00 2001
From: Martin De Wulf <madewulf@gmail.com>
Date: Mon, 24 Jun 2024 19:22:29 +0200
Subject: [PATCH 32/34] docs: Update INTHEWILD.md with Bluesquare (#29337)

---
 RESOURCES/INTHEWILD.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/RESOURCES/INTHEWILD.md b/RESOURCES/INTHEWILD.md
index e5a2293098..e39c82ae9c 100644
--- a/RESOURCES/INTHEWILD.md
+++ b/RESOURCES/INTHEWILD.md
@@ -154,6 +154,7 @@ Join our growing community!
 ### Healthcare
 - [Amino](https://amino.com) [@shkr]
 - [Beans](https://www.beans.fi) [@kakoni]
+- [Bluesquare](https://www.bluesquarehub.com/) [@madewulf]
 - [Care](https://www.getcare.io/)[@alandao2021]
 - [Living Goods](https://www.livinggoods.org) [@chelule]
 - [Maieutical Labs](https://maieuticallabs.it) [@xrmx]

From ee5227733b7d3d1a79ffeda160731ca30cac02a1 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Mon, 24 Jun 2024 14:36:18 -0300
Subject: [PATCH 33/34] fix: Cannot delete empty column inside a tab using the
 dashboard editor (#29346)

---
 superset-frontend/src/dashboard/components/menu/HoverMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/dashboard/components/menu/HoverMenu.tsx b/superset-frontend/src/dashboard/components/menu/HoverMenu.tsx
index e38849d72c..2af9faa8d4 100644
--- a/superset-frontend/src/dashboard/components/menu/HoverMenu.tsx
+++ b/superset-frontend/src/dashboard/components/menu/HoverMenu.tsx
@@ -33,7 +33,7 @@ const HoverStyleOverrides = styled.div`
   .hover-menu {
     opacity: 0;
     position: absolute;
-    z-index: 10;
+    z-index: 11; // one more than DragDroppable
     font-size: ${({ theme }) => theme.typography.sizes.m};
   }
 

From 160cece017d656039c36b1ba5a5dc238e5cce16e Mon Sep 17 00:00:00 2001
From: "JUST.in DO IT" <justin.park@airbnb.com>
Date: Mon, 24 Jun 2024 14:52:32 -0700
Subject: [PATCH 34/34] fix(explore): restored hidden field values has
 discarded (#29349)

---
 .../explore/actions/exploreActions.test.js    |  4 +--
 .../src/explore/reducers/exploreReducer.js    |  2 +-
 .../explore/reducers/exploreReducer.test.js   | 35 +++++++++++++++++++
 3 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 superset-frontend/src/explore/reducers/exploreReducer.test.js

diff --git a/superset-frontend/src/explore/actions/exploreActions.test.js b/superset-frontend/src/explore/actions/exploreActions.test.js
index 700987a0e5..12bbdce4e7 100644
--- a/superset-frontend/src/explore/actions/exploreActions.test.js
+++ b/superset-frontend/src/explore/actions/exploreActions.test.js
@@ -231,9 +231,7 @@ describe('reducers', () => {
       newState,
       actions.setStashFormData(false, ['y_axis_format']),
     );
-    expect(updatedState.hiddenFormData).toEqual({
-      y_axis_format: defaultState.form_data.y_axis_format,
-    });
+    expect(updatedState.hiddenFormData.y_axis_format).toBeFalsy();
     expect(updatedState.form_data.y_axis_format).toEqual(
       defaultState.form_data.y_axis_format,
     );
diff --git a/superset-frontend/src/explore/reducers/exploreReducer.js b/superset-frontend/src/explore/reducers/exploreReducer.js
index 9eddd2f678..8985f032c7 100644
--- a/superset-frontend/src/explore/reducers/exploreReducer.js
+++ b/superset-frontend/src/explore/reducers/exploreReducer.js
@@ -267,7 +267,7 @@ export default function exploreReducer(state = {}, action) {
           ...form_data,
           ...restoredField,
         },
-        hiddenFormData,
+        hiddenFormData: omit(hiddenFormData, fieldNames),
       };
     },
     [actions.SLICE_UPDATED]() {
diff --git a/superset-frontend/src/explore/reducers/exploreReducer.test.js b/superset-frontend/src/explore/reducers/exploreReducer.test.js
new file mode 100644
index 0000000000..37f072d9e7
--- /dev/null
+++ b/superset-frontend/src/explore/reducers/exploreReducer.test.js
@@ -0,0 +1,35 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   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
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import exploreReducer from './exploreReducer';
+import { setStashFormData } from '../actions/exploreActions';
+
+test('reset hiddenFormData on SET_STASH_FORM_DATA', () => {
+  const initialState = {
+    form_data: { a: 3, c: 4 },
+  };
+  const action = setStashFormData(true, ['a', 'c']);
+  const newState = exploreReducer(initialState, action);
+  expect(newState.form_data).toEqual({});
+  expect(newState.hiddenFormData).toEqual({ a: 3, c: 4 });
+  const restoreAction = setStashFormData(false, ['c']);
+  const newState2 = exploreReducer(newState, restoreAction);
+  expect(newState2.form_data).toEqual({ c: 4 });
+  expect(newState2.hiddenFormData).toEqual({ a: 3 });
+});