The default palette for the color selection dialog in charts

src/shared/types/wizard/bars.ts

@@ -74,7 +74,7 @@ export interface BarOneColorSettings {
 export interface BarTwoColorSettings {
     colorType: BarsColorType.TwoColor;
     settings: {
-        palette: string;
+        palette: string | undefined;
         negativeColorIndex?: number;
         negativeColor?: string;
         positiveColorIndex?: number;

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/DialogField/components/BarsSettings/BarsSettings.tsx

@@ -82,7 +82,9 @@ export const BarsSettings: React.FC<BarsSettingsProps> = (props: BarsSettingsPro
 
     const handlePaletteUpdate = React.useCallback(
         (palette: string) => {
-            let updateParams: Partial<TableBarsSettings['colorSettings']['settings']> = {palette};
+            let updateParams: Partial<TableBarsSettings['colorSettings']['settings']> = {
+                palette: palette || undefined,
+            };
 
             switch (state.colorSettings.colorType) {
                 case BarsColorType.OneColor: {

src/ui/units/wizard/components/Dialogs/DialogField/components/BarsSettings/components/ColorControls/ColorsControl.tsx

@@ -28,6 +28,8 @@ export const ColorsControl: React.FC<ColorsControlProps> = (props: ColorsControl
         return getPaletteColors(colorSettings.settings.palette, colorPalettes);
     }, [colorPalettes, colorSettings.settings.palette]);
 
+    const selectedPalette = colorSettings.settings.palette ?? '';
+
     switch (colorSettings.colorType) {
         case BarsColorType.OneColor: {
             const currentColor = getColorByColorSettings({
@@ -41,7 +43,7 @@ export const ColorsControl: React.FC<ColorsControlProps> = (props: ColorsControl
                     title={i18n('wizard', 'label_bars-color')}
                     setting={
                         <PaletteColorControl
-                            palette={colorSettings.settings.palette}
+                            palette={selectedPalette}
                             controlQa={DialogFieldBarsSettingsQa.ColorSelector}
                             currentColor={currentColor}
                             currentColorIndex={colorSettings.settings.colorIndex}
@@ -77,7 +79,7 @@ export const ColorsControl: React.FC<ColorsControlProps> = (props: ColorsControl
                         title={i18n('wizard', 'label_bars-positive-color')}
                         setting={
                             <PaletteColorControl
-                                palette={colorSettings.settings.palette}
+                                palette={selectedPalette}
                                 controlQa={DialogFieldBarsSettingsQa.PositiveColorSelector}
                                 currentColor={positiveColor}
                                 currentColorIndex={colorSettings.settings.positiveColorIndex}
@@ -96,7 +98,7 @@ export const ColorsControl: React.FC<ColorsControlProps> = (props: ColorsControl
                         title={i18n('wizard', 'label_bars-negative-color')}
                         setting={
                             <PaletteColorControl
-                                palette={colorSettings.settings.palette}
+                                palette={selectedPalette}
                                 controlQa={DialogFieldBarsSettingsQa.NegativeColorSelector}
                                 currentColor={negativeColor}
                                 currentColorIndex={colorSettings.settings.negativeColorIndex}

src/ui/units/wizard/components/Dialogs/DialogField/components/ButtonColorDialog/ButtonColorDialog.tsx

@@ -5,9 +5,11 @@ import block from 'bem-cn-lite';
 import AutogeneratedPaletteIcon from 'components/AutogeneratedPaletteIcon/AutogeneratedPaletteIcon';
 import {i18n} from 'i18n';
 import {useDispatch, useSelector} from 'react-redux';
-import type {ColorsConfig, Field, GradientType, InternalPaletteId} from 'shared';
+import type {ColorsConfig, Field, GradientType, InternalPaletteId, Palette} from 'shared';
 import {fetchColorPalettes} from 'store/actions/colorPaletteEditor';
 import {selectColorPalettesDict} from 'store/selectors/colorPaletteEditor';
+import {getDefaultPaletteLabel} from 'ui/units/wizard/utils/palette';
+import {getDefaultColorPalette} from 'ui/utils';
 
 import {openDialogColor} from '../../../../../actions/dialogColor';
 import {PaletteIcon, PaletteType} from '../../../../PaletteIcon/PaletteIcon';
@@ -52,17 +54,48 @@ export const ButtonColorDialog: React.FC<ButtonColorDialogProps> = (
     } = props;
 
     const colorPalette = colorPalettes[paletteId];
+    const defaultColorPalette = getDefaultColorPalette({
+        colorPalettes: Object.values(colorPalettes),
+    });
 
-    let paletteName: string;
-
+    let paletteName: string | JSX.Element;
     if (colorPalette) {
         paletteName = colorPalette.displayName;
+    } else if (!paletteId) {
+        paletteName = getDefaultPaletteLabel(defaultColorPalette);
     } else if (paletteType === PaletteType.ColorPalette) {
         paletteName = i18n('wizard.palette', `label_${paletteId as InternalPaletteId}`);
     } else {
         paletteName = i18n('wizard', `label_${paletteId as GradientType}`);
     }
 
+    const icon = React.useMemo(() => {
+        let customColorPalette = colorPalette;
+        if (!customColorPalette && !paletteId && 'colors' in defaultColorPalette) {
+            customColorPalette = defaultColorPalette;
+        }
+
+        if (customColorPalette) {
+            return (
+                <AutogeneratedPaletteIcon
+                    className={b('icon')}
+                    colors={customColorPalette.colors}
+                    isGradient={customColorPalette.isGradient}
+                />
+            );
+        }
+
+        const systemColorPalette = defaultColorPalette as Palette;
+
+        return (
+            <PaletteIcon
+                paletteId={paletteId || systemColorPalette.id}
+                paletteType={paletteType}
+                className={b('icon')}
+            />
+        );
+    }, [colorPalette, defaultColorPalette, paletteId, paletteType]);
+
     return (
         <Button
             qa={qa}
@@ -83,20 +116,7 @@ export const ButtonColorDialog: React.FC<ButtonColorDialogProps> = (
             }
         >
             <span className={b('content-container')}>
-                {colorPalette ? (
-                    <AutogeneratedPaletteIcon
-                        className={b('icon')}
-                        colors={colorPalette.colors}
-                        isGradient={colorPalette.isGradient}
-                    />
-                ) : (
-                    <PaletteIcon
-                        paletteId={paletteId}
-                        paletteType={paletteType}
-                        className={b('icon')}
-                    />
-                )}
-
+                {icon}
                 <span>{paletteName}</span>
             </span>
         </Button>

src/ui/units/wizard/components/Dialogs/DialogField/utils/barsSettings.ts

@@ -7,7 +7,6 @@ import {
     isMeasureType,
     isNumberField,
 } from 'shared';
-import {getTenantDefaultColorPaletteId} from 'ui/constants/common';
 
 const PLACEHOLDERS_WITH_BARS_SETTINGS: Record<string, Record<string, boolean>> = {
     [WizardVisualizationId.FlatTable]: {
@@ -23,7 +22,7 @@ export const getDefaultBarsSettings = (): TableBarsSettings => ({
     colorSettings: {
         colorType: BarsColorType.TwoColor,
         settings: {
-            palette: getTenantDefaultColorPaletteId(),
+            palette: undefined,
             positiveColorIndex: 2,
             negativeColorIndex: 1,
         },

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
@@ -72,7 +76,7 @@ class DialogMetricSettings extends React.PureComponent<Props, State> {
                 color: props.metricFontColor,
             }),
             palette,
-            colorIndex: props.metricFontColorIndex || defaultIndex,
+            colorIndex: props.metricFontColorIndex ?? defaultIndex,
             paletteColors,
         };
     }
@@ -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,
 };