chore: Update color scheme when deleted or changed

superset-frontend/src/dashboard/actions/dashboardState.js

@@ -240,6 +240,7 @@ export function saveDashboardRequest(data, id, saveType) {
         ...data.metadata,
         color_namespace: data.metadata?.color_namespace || undefined,
         color_scheme: data.metadata?.color_scheme || '',
+        color_scheme_domain: data.metadata?.color_scheme_domain || [],
         expanded_slices: data.metadata?.expanded_slices || {},
         label_colors: data.metadata?.label_colors || {},
         shared_label_colors: data.metadata?.shared_label_colors || {},

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx

@@ -18,20 +18,23 @@
  */
 // ParentSize uses resize observer so the dashboard will update size
 // when its container size changes, due to e.g., builder side panel opening
-import React, { FC, useEffect, useMemo } from 'react';
+import React, { FC, useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   FeatureFlag,
   Filter,
   Filters,
+  getCategoricalSchemeRegistry,
   isFeatureEnabled,
+  SupersetClient,
 } from '@superset-ui/core';
 import { ParentSize } from '@vx/responsive';
 import pick from 'lodash/pick';
 import Tabs from 'src/components/Tabs';
 import DashboardGrid from 'src/dashboard/containers/DashboardGrid';
 import {
   ChartsState,
+  DashboardInfo,
   DashboardLayout,
   LayoutItem,
   RootState,
@@ -43,9 +46,13 @@ import {
 import { getChartIdsInFilterScope } from 'src/dashboard/util/getChartIdsInFilterScope';
 import findTabIndexByComponentId from 'src/dashboard/util/findTabIndexByComponentId';
 import { setInScopeStatusOfFilters } from 'src/dashboard/actions/nativeFilters';
-import { getRootLevelTabIndex, getRootLevelTabsComponent } from './utils';
-import { findTabsWithChartsInScope } from '../nativeFilters/utils';
+import { dashboardInfoChanged } from 'src/dashboard/actions/dashboardInfo';
+import { setColorScheme } from 'src/dashboard/actions/dashboardState';
+import { useComponentDidUpdate } from 'src/hooks/useComponentDidUpdate/useComponentDidUpdate';
+import jsonStringify from 'json-stringify-pretty-compact';
 import { NATIVE_FILTER_DIVIDER_PREFIX } from '../nativeFilters/FiltersConfigModal/utils';
+import { findTabsWithChartsInScope } from '../nativeFilters/utils';
+import { getRootLevelTabIndex, getRootLevelTabsComponent } from './utils';
 
 type DashboardContainerProps = {
   topLevelTabs?: LayoutItem;
@@ -73,6 +80,9 @@ const DashboardContainer: FC<DashboardContainerProps> = ({ topLevelTabs }) => {
   const dashboardLayout = useSelector<RootState, DashboardLayout>(
     state => state.dashboardLayout.present,
   );
+  const dashboardInfo = useSelector<RootState, DashboardInfo>(
+    state => state.dashboardInfo,
+  );
   const directPathToChild = useSelector<RootState, string[]>(
     state => state.dashboardState.directPathToChild,
   );
@@ -122,10 +132,86 @@ 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 registryColorSchemeDomain =
+        categoricalSchemes.get(colorScheme)?.colors || [];
+      const defaultColorScheme = categoricalSchemes.defaultKey;
+      const isColorSchemeExisting = !!categoricalSchemes.get(colorScheme);
+      const updateDashboard = () => {
+        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 updateMetadata = () => {
+        dispatch(
+          dashboardInfoChanged({
+            metadata,
+          }),
+        );
+        updateDashboard();
+      };
+      // color scheme does not exist anymore
+      // must fallback to the available default one
+      if (colorScheme && !isColorSchemeExisting) {
+        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);
+        updateMetadata();
+      } else {
+        // if this dashboard does not have a color_scheme_domain saved
+        // must create one and store it for the first time
+        if (colorScheme && !colorSchemeDomain.length) {
+          metadata.color_scheme_domain = registryColorSchemeDomain;
+          updateMetadata();
+        }
+        // if the color_scheme_domain is not the same as the registry domain
+        // must update the existing color_scheme_domain
+        if (
+          colorScheme &&
+          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);
+          updateMetadata();
+        }
+      }
+    }
+  }, [charts]);
+
+  useComponentDidUpdate(verifyUpdateColorScheme);
+
   const childIds: string[] = topLevelTabs
     ? topLevelTabs.children
     : [DASHBOARD_GRID_ID];
-
   const min = Math.min(tabIndex, childIds.length - 1);
   const activeKey = min === 0 ? DASHBOARD_GRID_ID : min.toString();
 

superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.tsx

@@ -262,6 +262,7 @@ test('submitting with onlyApply:false', async () => {
   );
   spyGetCategoricalSchemeRegistry.mockReturnValue({
     keys: () => ['supersetColors'],
+    get: () => ['#FFFFFF', '#000000'],
   } as any);
   put.mockResolvedValue({
     json: {
@@ -289,7 +290,6 @@ test('submitting with onlyApply:false', async () => {
 
   userEvent.click(screen.getByRole('button', { name: 'Save' }));
   await waitFor(() => {
-    expect(props.onHide).toBeCalledTimes(1);
     expect(props.onSubmit).toBeCalledTimes(1);
     expect(props.onSubmit).toBeCalledWith({
       certificationDetails: 'Sample certification',
@@ -312,6 +312,7 @@ test('submitting with onlyApply:true', async () => {
   );
   spyGetCategoricalSchemeRegistry.mockReturnValue({
     keys: () => ['supersetColors'],
+    get: () => ['#FFFFFF', '#000000'],
   } as any);
   spyIsFeatureEnabled.mockReturnValue(false);
   const props = createProps();
@@ -328,7 +329,6 @@ test('submitting with onlyApply:true', async () => {
 
   userEvent.click(screen.getByRole('button', { name: 'Apply' }));
   await waitFor(() => {
-    expect(props.onHide).toBeCalledTimes(1);
     expect(props.onSubmit).toBeCalledTimes(1);
   });
 });

superset-frontend/src/dashboard/components/PropertiesModal/index.tsx

@@ -174,9 +174,13 @@ const PropertiesModal = ({
         delete metadata.positions;
       }
       const metaDataCopy = { ...metadata };
+
       if (metaDataCopy?.shared_label_colors) {
         delete metaDataCopy.shared_label_colors;
       }
+      if (metaDataCopy?.color_scheme_domain) {
+        delete metaDataCopy.color_scheme_domain;
+      }
       setJsonMetadata(metaDataCopy ? jsonStringify(metaDataCopy) : '');
     },
     [form],
@@ -262,7 +266,8 @@ const PropertiesModal = ({
     { updateMetadata = true } = {},
   ) => {
     // check that color_scheme is valid
-    const colorChoices = getCategoricalSchemeRegistry().keys();
+    const categoricalSchemeRegistry = getCategoricalSchemeRegistry();
+    const colorChoices = categoricalSchemeRegistry.keys();
     const jsonMetadataObj = getJsonMetadata();
 
     // only fire if the color_scheme is present and invalid
@@ -288,6 +293,7 @@ const PropertiesModal = ({
   const onFinish = () => {
     const { title, slug, certifiedBy, certificationDetails } =
       form.getFieldsValue();
+    const categoricalSchemeRegistry = getCategoricalSchemeRegistry();
     let currentColorScheme = colorScheme;
     let colorNamespace = '';
     let currentJsonMetadata = jsonMetadata;
@@ -302,12 +308,17 @@ const PropertiesModal = ({
       if (metadata?.shared_label_colors) {
         delete metadata.shared_label_colors;
       }
+      if (metadata?.color_scheme_domain) {
+        delete metadata.color_scheme_domain;
+      }
       const colorMap = getSharedLabelColor().getColorMap(
         colorNamespace,
         currentColorScheme,
         true,
       );
       metadata.shared_label_colors = colorMap;
+      metadata.color_scheme_domain =
+        categoricalSchemeRegistry.get(colorScheme)?.colors || [];
       currentJsonMetadata = jsonStringify(metadata);
     }
 

superset-frontend/src/dashboard/types.ts

@@ -79,6 +79,10 @@ export type DashboardInfo = {
     native_filter_configuration: JsonObject;
     show_native_filters: boolean;
     chart_configuration: JsonObject;
+    color_scheme: string;
+    color_namespace: string;
+    color_scheme_domain: string[];
+    shared_label_colors: Record<string, string>;
   };
 };
 

superset-frontend/src/explore/actions/hydrateExplore.ts

@@ -26,7 +26,11 @@ import {
 import { getChartKey } from 'src/explore/exploreUtils';
 import { getControlsState } from 'src/explore/store';
 import { Dispatch } from 'redux';
-import { ensureIsArray } from '@superset-ui/core';
+import {
+  ensureIsArray,
+  getCategoricalSchemeRegistry,
+  getSequentialSchemeRegistry,
+} from '@superset-ui/core';
 import {
   getFormDataFromControls,
   applyMapStateToPropsToControl,
@@ -67,6 +71,31 @@ export const hydrateExplore =
       initialExploreState,
       initialFormData,
     ) as ControlStateMapping;
+    const colorSchemeKey = initialControls.color_scheme && 'color_scheme';
+    const linearColorSchemeKey =
+      initialControls.linear_color_scheme && 'linear_color_scheme';
+    // if the color scheme does not exist anymore
+    // fallbacks to the available default key
+    const verifyColorScheme = (type: 'CATEGORICAL' | 'SEQUENTIAL') => {
+      const schemes =
+        type === 'CATEGORICAL'
+          ? getCategoricalSchemeRegistry()
+          : getSequentialSchemeRegistry();
+      const key =
+        type === 'CATEGORICAL' ? colorSchemeKey : linearColorSchemeKey;
+      const defaultScheme = schemes.defaultKey
+        ? schemes.defaultKey
+        : type === 'CATEGORICAL'
+        ? 'supersetColors'
+        : 'superset_seq_1';
+      const currentScheme = initialFormData[key];
+      if (currentScheme && !schemes.get(currentScheme)) {
+        initialControls[key].value = defaultScheme;
+      }
+    };
+
+    if (colorSchemeKey) verifyColorScheme('CATEGORICAL');
+    if (linearColorSchemeKey) verifyColorScheme('SEQUENTIAL');
 
     const exploreState = {
       // note this will add `form_data` to state,

superset-frontend/src/explore/components/controls/ColorSchemeControl/index.jsx

@@ -192,7 +192,7 @@ export default class ColorSchemeControl extends React.PureComponent {
       onChange: this.onChange,
       options,
       placeholder: t('Select scheme'),
-      value: currentScheme,
+      value: currentScheme && currentScheme.toString(),
     };
 
     return (

superset/dashboards/dao.py

@@ -267,7 +267,7 @@ def set_dash_metadata(  # pylint: disable=too-many-locals
         md["color_scheme"] = data.get("color_scheme", "")
         md["label_colors"] = data.get("label_colors", {})
         md["shared_label_colors"] = data.get("shared_label_colors", {})
-
+        md["color_scheme_domain"] = data.get("color_scheme_domain", [])
         dashboard.json_metadata = json.dumps(md)
 
         if commit:

superset/dashboards/schemas.py

@@ -129,6 +129,7 @@ class DashboardJSONMetadataSchema(Schema):
     positions = fields.Dict(allow_none=True)
     label_colors = fields.Dict()
     shared_label_colors = fields.Dict()
+    color_scheme_domain = fields.List(fields.Str())
     # used for v0 import/export
     import_time = fields.Integer()
     remote_id = fields.Integer()

tests/integration_tests/dashboards/api_tests.py

@@ -72,7 +72,7 @@ class TestDashboardApi(SupersetTestCase, ApiOwnersTestCaseMixin, InsertChartMixi
         "slug": "slug1_changed",
         "position_json": '{"b": "B"}',
         "css": "css_changed",
-        "json_metadata": '{"refresh_frequency": 30, "timed_refresh_immune_slices": [], "expanded_slices": {}, "color_scheme": "", "label_colors": {}, "shared_label_colors": {}}',
+        "json_metadata": '{"refresh_frequency": 30, "timed_refresh_immune_slices": [], "expanded_slices": {}, "color_scheme": "", "label_colors": {}, "shared_label_colors": {}, "color_scheme_domain": []}',
         "published": False,
     }