The default palette for the color selection dialog in charts

src/ui/units/wizard/components/Dialogs/DialogColor/ColorSettingsContainer/ColorSettingsContainer.tsx

@@ -33,7 +33,7 @@ import {
 } from '../../../../selectors/dialogColor';
 import type {ExtraSettings} from '../DialogColor';
 import DialogColorGradientBody from '../DialogColorGradient/DialogColorGradient';
-import DialogColorPalette, {DEFAULT_COLOR} from '../DialogColorPalette/DialogColorPalette';
+import {DEFAULT_COLOR, PaletteContainer} from '../DialogColorPalette/DialogColorPalette';
 
 import './ColorSettingsContainer.scss';
 
@@ -108,7 +108,7 @@ class ColorSettingsContainer extends React.Component<Props> {
 
     private renderPaletteBody = () => {
         return (
-            <DialogColorPalette
+            <PaletteContainer
                 onPaletteItemClick={this.onPaletteItemClick}
                 paletteState={this.props.paletteState}
                 setPaletteState={(paletteState: Partial<PaletteState>) => {

src/ui/units/wizard/components/Dialogs/DialogColor/DialogColorPalette/DialogColorPalette.tsx

@@ -52,7 +52,7 @@ export interface Props {
     colorSectionFields?: Field[];
 }
 
-class PaletteContainer extends React.Component<Props> {
+export class PaletteContainer extends React.Component<Props> {
     render() {
         return (
             <div className={b('container')}>
@@ -105,6 +105,7 @@ class PaletteContainer extends React.Component<Props> {
 
         const options = getPaletteSelectorItems({
             colorPalettes,
+            withAuto: true,
         });
 
         return (
@@ -116,7 +117,7 @@ class PaletteContainer extends React.Component<Props> {
                     className={b('palette-select')}
                     onUpdate={([selectedPalette]) => {
                         this.props.setPaletteState({
-                            palette: selectedPalette,
+                            palette: selectedPalette ?? undefined,
                             mountedColors: {},
                         });
                     }}

src/ui/units/wizard/components/Dialogs/DialogMetricSettings/DialogMetricSettings.tsx

@@ -12,7 +12,6 @@ import type {CommonSharedExtraSettings} from '../../../../../../shared';
 import {DialogMetricSettingsQa} from '../../../../../../shared';
 import type {DatalensGlobalState} from '../../../../../../ui';
 import DialogManager from '../../../../../components/DialogManager/DialogManager';
-import {getTenantDefaultColorPaletteId} from '../../../../../constants/common';
 import {closeDialog} from '../../../../../store/actions/dialog';
 import {selectColorPalettes} from '../../../../../store/selectors/colorPaletteEditor';
 import {getPaletteColors, isValidHexColor} from '../../../../../utils';
@@ -32,7 +31,12 @@ const b = block('dialog-metric-settings');
 type StateProps = ReturnType<typeof mapStateToProps>;
 type DispatchProps = ReturnType<typeof mapDispatchToProps>;
 type OwnProps = {
-    onSave: (args: {palette: string; color: string; size: string; colorIndex?: number}) => void;
+    onSave: (args: {
+        palette: string | undefined;
+        color: string;
+        size: string;
+        colorIndex?: number;
+    }) => void;
 };
 
 interface Props extends StateProps, DispatchProps, OwnProps {}
@@ -41,7 +45,7 @@ interface State {
     size: string;
     currentColor: string;
     colorIndex?: number;
-    palette: string;
+    palette: string | undefined;
     colorErrorText?: string;
     paletteColors: string[];
 }
@@ -57,7 +61,7 @@ class DialogMetricSettings extends React.PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
 
-        const palette = props.palette || getTenantDefaultColorPaletteId();
+        const palette = props.palette || '';
         const paletteColors = getPaletteColors(palette, props.colorPalettes);
 
         // if font settings is empty take index 0 by default
@@ -146,7 +150,7 @@ class DialogMetricSettings extends React.PureComponent<Props, State> {
                 <MinifiedPalette
                     onPaletteUpdate={this.handlePaletteUpdate}
                     onPaletteItemClick={this.onPaletteItemClick}
-                    palette={this.state.palette}
+                    palette={this.state.palette ?? ''}
                     currentColor={this.state.currentColor}
                     errorText={this.state.colorErrorText}
                     controlQa="dialog-metric-settings-palette"
@@ -165,7 +169,7 @@ class DialogMetricSettings extends React.PureComponent<Props, State> {
         this.setState({currentColor: preparedColor, colorIndex: undefined});
     };
 
-    private handlePaletteUpdate = (paletteName: string) => {
+    private handlePaletteUpdate = (paletteName: string | undefined) => {
         const {colorPalettes} = this.props;
         const updatedColors = getPaletteColors(paletteName, colorPalettes);
         const newColor = updatedColors[0];

src/ui/units/wizard/components/MinifiedPalette/MinifiedPalette.tsx

@@ -55,7 +55,7 @@ export const MinifiedPalette: React.FC<MinifiedPaletteProps> = (props: MinifiedP
 
     useEnterClick(paletteRef, handleEnterPress);
 
-    const options = getPaletteSelectorItems({colorPalettes});
+    const options = getPaletteSelectorItems({colorPalettes, withAuto: true});
 
     const colors = React.useMemo(
         () => getPaletteColors(palette, colorPalettes),
@@ -68,7 +68,7 @@ export const MinifiedPalette: React.FC<MinifiedPaletteProps> = (props: MinifiedP
                 qa={DialogFieldBarsSettingsQa.MinifiedPaletteSelector}
                 className={b('selector')}
                 popupClassName={b('selector-popup')}
-                onUpdate={([paletteId]) => onPaletteUpdate(paletteId)}
+                onUpdate={([paletteId]) => onPaletteUpdate(paletteId ?? undefined)}
                 renderSelectedOption={(option) => {
                     return <SelectOptionWithIcon option={option} />;
                 }}

src/ui/units/wizard/constants/dialogColor.ts

@@ -1,10 +1,6 @@
 import {i18n} from 'i18n';
 import {GradientNullModes, GradientType, WizardVisualizationId} from 'shared';
-import {
-    getAvailableClientPalettesMap,
-    getTenantDefaultColorPaletteId,
-    selectDefaultClientGradient,
-} from 'ui/constants/common';
+import {getAvailableClientPalettesMap, selectDefaultClientGradient} from 'ui/constants/common';
 
 export const DEFAULT_BORDERS = 'show';
 export const DEFAULT_THRESHOLDS_MODE = 'auto';
@@ -15,7 +11,7 @@ export const DEFAULT_TWO_POINT_GRADIENT = selectDefaultClientGradient(DEFAULT_GR
 
 export const DEFAULT_PALETTE_STATE = {
     mountedColors: {},
-    palette: getTenantDefaultColorPaletteId(),
+    palette: '',
     selectedValue: null,
     polygonBorders: DEFAULT_BORDERS,
 };

src/ui/units/wizard/utils/palette.tsx

@@ -12,43 +12,115 @@ import type {
     Palettes,
 } from 'shared';
 import {getPalettesOrder} from 'shared';
-import {selectAvailableClientPalettes} from 'ui';
+import {
+    getAvailableClientPalettesMap,
+    getDefaultColorPaletteId,
+    getTenantDefaultColorPaletteId,
+    selectAvailableClientPalettes,
+} from 'ui';
 
 import {PaletteIcon, PaletteType} from '../components/PaletteIcon/PaletteIcon';
 
 export const getPaletteSelectorItems = ({
     colorPalettes = [],
+    withAuto = false,
 }: {
     colorPalettes?: ColorPalette[];
+    withAuto?: boolean;
 }): SelectOptionGroup<{icon: JSX.Element}>[] => {
     const availablePalettes = selectAvailableClientPalettes();
     const palettesOrder = getPalettesOrder();
 
-    const result: SelectOptionGroup<{icon: JSX.Element}>[] = palettesOrder.map(
-        (paletteName: keyof Palettes): SelectOptionGroup<{icon: JSX.Element}> => {
-            const palette = availablePalettes[paletteName];
-            const options = palette.map(
-                (item: string): SelectOption<{icon: JSX.Element}> => ({
-                    data: {
-                        icon: (
-                            <PaletteIcon paletteType={PaletteType.ColorPalette} paletteId={item} />
-                        ),
-                    },
-                    content: i18n('wizard.palette', `label_${item as InternalPaletteId}`),
-                    value: item,
-                    qa: item,
-                }),
-            );
+    const result: SelectOptionGroup<{icon: JSX.Element}>[] = [];
+
+    if (withAuto) {
+        const tenantDefaultColorPaletteId = getTenantDefaultColorPaletteId();
+        let option: SelectOption<{icon: JSX.Element}>;
+
+        const customPalette = colorPalettes?.find(
+            (p) => p.colorPaletteId === tenantDefaultColorPaletteId,
+        );
 
-            return {
-                label: '',
-                options,
+        if (customPalette) {
+            option = {
+                data: {
+                    icon: (
+                        <AutogeneratedPaletteIcon
+                            colors={customPalette.colors}
+                            height="16px"
+                            width="20px"
+                        />
+                    ),
+                },
+                content: customPalette.displayName,
+                value: '',
             };
-        },
+        } else {
+            const systemPalettes = getAvailableClientPalettesMap();
+            const defaultColorPaletteId = getDefaultColorPaletteId();
+            const systemPalette =
+                systemPalettes[tenantDefaultColorPaletteId] ??
+                systemPalettes[defaultColorPaletteId];
+            option = {
+                data: {
+                    icon: (
+                        <PaletteIcon
+                            paletteType={PaletteType.ColorPalette}
+                            paletteId={systemPalette.id}
+                        />
+                    ),
+                },
+                content: (
+                    <React.Fragment>
+                        {i18n('wizard', `label_default`)}
+                        <span style={{marginLeft: 4, color: 'var(--g-color-text-secondary)'}}>
+                            {i18n(
+                                'wizard.palette',
+                                `label_${systemPalette.id as InternalPaletteId}`,
+                            )}
+                        </span>
+                    </React.Fragment>
+                ),
+                value: '',
+            };
+        }
+
+        result.push({
+            label: '',
+            options: [option],
+        });
+    }
+
+    result.push(
+        ...palettesOrder.map(
+            (paletteName: keyof Palettes): SelectOptionGroup<{icon: JSX.Element}> => {
+                const palette = availablePalettes[paletteName];
+                const options = palette.map(
+                    (item: string): SelectOption<{icon: JSX.Element}> => ({
+                        data: {
+                            icon: (
+                                <PaletteIcon
+                                    paletteType={PaletteType.ColorPalette}
+                                    paletteId={item}
+                                />
+                            ),
+                        },
+                        content: i18n('wizard.palette', `label_${item as InternalPaletteId}`),
+                        value: item,
+                        qa: item,
+                    }),
+                );
+
+                return {
+                    label: '',
+                    options,
+                };
+            },
+        ),
     );
 
     if (colorPalettes.length) {
-        return result.concat({
+        result.push({
             label: '',
             options: colorPalettes.map(
                 (colorPalette): SelectOption<{icon: JSX.Element}> => ({

src/ui/utils/colors.ts

@@ -1,17 +1,18 @@
 import {type ColorPalette} from 'shared';
 import {getAvailableClientPalettesMap, getTenantDefaultColorPaletteId} from 'ui/constants';
 
-export function getPaletteColors(paletteName: string, clientPalettes?: ColorPalette[]) {
+export function getPaletteColors(paletteName: string | undefined, clientPalettes?: ColorPalette[]) {
     const clientPalette = clientPalettes?.find((item) => item.colorPaletteId === paletteName);
     if (clientPalette) {
         return clientPalette.colors;
     }
 
     const availablePalettesMap = getAvailableClientPalettesMap();
+    if (paletteName && availablePalettesMap[paletteName]) {
+        return availablePalettesMap[paletteName].scheme;
+    }
 
-    const currentPalette =
-        availablePalettesMap[paletteName] || availablePalettesMap[getTenantDefaultColorPaletteId()];
-
+    const currentPalette = availablePalettesMap[getTenantDefaultColorPaletteId()];
     return currentPalette?.scheme || [];
 }