Make sure color mapping setting is respected for legacy palette (#95164)

docs/management/advanced-options.asciidoc

@@ -457,7 +457,7 @@ Enables the legacy charts library for aggregation-based area, line, and bar char
 
 [[visualization-colormapping]]`visualization:colorMapping`::
 **This setting is deprecated and will not be supported as of 8.0.**
-Maps values to specific colors in *Visualize* charts and *TSVB*. This setting does not apply to *Lens*.
+Maps values to specific colors in charts using the *Compatibility* palette.
 
 [[visualization-dimmingopacity]]`visualization:dimmingOpacity`::
 The opacity of the chart items that are dimmed when highlighting another element

src/plugins/charts/public/mocks.ts

@@ -17,13 +17,13 @@ export type Start = jest.Mocked<ReturnType<ChartsPlugin['start']>>;
 const createSetupContract = (): Setup => ({
   legacyColors: colorsServiceMock,
   theme: themeServiceMock,
-  palettes: paletteServiceMock.setup({} as any, {} as any),
+  palettes: paletteServiceMock.setup({} as any),
 });
 
 const createStartContract = (): Start => ({
   legacyColors: colorsServiceMock,
   theme: themeServiceMock,
-  palettes: paletteServiceMock.setup({} as any, {} as any),
+  palettes: paletteServiceMock.setup({} as any),
 });
 
 export { colorMapsMock } from './static/color_maps/mock';

src/plugins/charts/public/plugin.ts

@@ -43,7 +43,7 @@ export class ChartsPlugin implements Plugin<ChartsPluginSetup, ChartsPluginStart
     dependencies.expressions.registerFunction(systemPalette);
     this.themeService.init(core.uiSettings);
     this.legacyColorsService.init(core.uiSettings);
-    this.palettes = this.paletteService.setup(core, this.legacyColorsService);
+    this.palettes = this.paletteService.setup(this.legacyColorsService);
 
     return {
       legacyColors: this.legacyColorsService,

src/plugins/charts/public/services/legacy_colors/mock.ts

@@ -17,5 +17,6 @@ export const colorsServiceMock: LegacyColorsService = {
   mappedColors: {
     mapKeys: jest.fn(),
     get: jest.fn(),
+    getColorFromConfig: jest.fn(),
   },
 } as any;

src/plugins/charts/public/services/palettes/palettes.test.tsx

@@ -6,7 +6,6 @@
  * Side Public License, v 1.
  */
 
-import { coreMock } from '../../../../../core/public/mocks';
 import { createColorPalette as createLegacyColorPalette } from '../../../../../../src/plugins/charts/public';
 import { PaletteDefinition } from './types';
 import { buildPalettes } from './palettes';
@@ -14,10 +13,7 @@ import { colorsServiceMock } from '../legacy_colors/mock';
 import { euiPaletteColorBlind, euiPaletteColorBlindBehindText } from '@elastic/eui';
 
 describe('palettes', () => {
-  const palettes: Record<string, PaletteDefinition> = buildPalettes(
-    coreMock.createStart().uiSettings,
-    colorsServiceMock
-  );
+  const palettes: Record<string, PaletteDefinition> = buildPalettes(colorsServiceMock);
   describe('default palette', () => {
     describe('syncColors: false', () => {
       it('should return different colors based on behind text flag', () => {
@@ -302,6 +298,7 @@ describe('palettes', () => {
 
     beforeEach(() => {
       (colorsServiceMock.mappedColors.mapKeys as jest.Mock).mockClear();
+      (colorsServiceMock.mappedColors.getColorFromConfig as jest.Mock).mockReset();
       (colorsServiceMock.mappedColors.get as jest.Mock).mockClear();
     });
 
@@ -323,6 +320,30 @@ describe('palettes', () => {
         expect(colorsServiceMock.mappedColors.get).not.toHaveBeenCalled();
       });
 
+      it('should respect the advanced settings color mapping', () => {
+        const configColorGetter = colorsServiceMock.mappedColors.getColorFromConfig as jest.Mock;
+        configColorGetter.mockImplementation(() => 'blue');
+        const result = palette.getColor(
+          [
+            {
+              name: 'abc',
+              rankAtDepth: 2,
+              totalSeriesAtDepth: 10,
+            },
+            {
+              name: 'def',
+              rankAtDepth: 0,
+              totalSeriesAtDepth: 10,
+            },
+          ],
+          {
+            syncColors: false,
+          }
+        );
+        expect(result).toEqual('blue');
+        expect(configColorGetter).toHaveBeenCalledWith('abc');
+      });
+
       it('should return a color from the legacy palette based on position of first series', () => {
         const result = palette.getColor(
           [
@@ -363,6 +384,30 @@ describe('palettes', () => {
         expect(colorsServiceMock.mappedColors.get).toHaveBeenCalledWith('abc');
       });
 
+      it('should respect the advanced settings color mapping', () => {
+        const configColorGetter = colorsServiceMock.mappedColors.getColorFromConfig as jest.Mock;
+        configColorGetter.mockImplementation(() => 'blue');
+        const result = palette.getColor(
+          [
+            {
+              name: 'abc',
+              rankAtDepth: 2,
+              totalSeriesAtDepth: 10,
+            },
+            {
+              name: 'def',
+              rankAtDepth: 0,
+              totalSeriesAtDepth: 10,
+            },
+          ],
+          {
+            syncColors: false,
+          }
+        );
+        expect(result).toEqual('blue');
+        expect(configColorGetter).toHaveBeenCalledWith('abc');
+      });
+
       it('should always use root series', () => {
         palette.getColor(
           [

src/plugins/charts/public/services/palettes/palettes.tsx

@@ -9,7 +9,6 @@
 // @ts-ignore
 import chroma from 'chroma-js';
 import { i18n } from '@kbn/i18n';
-import { IUiSettingsClient } from 'src/core/public';
 import {
   euiPaletteColorBlind,
   euiPaletteCool,
@@ -130,7 +129,8 @@ function buildSyncedKibanaPalette(
       colors.mappedColors.mapKeys([series[0].name]);
       outputColor = colors.mappedColors.get(series[0].name);
     } else {
-      outputColor = staticColors[series[0].rankAtDepth % staticColors.length];
+      const configColor = colors.mappedColors.getColorFromConfig(series[0].name);
+      outputColor = configColor || staticColors[series[0].rankAtDepth % staticColors.length];
     }
 
     if (!chartConfiguration.maxDepth || chartConfiguration.maxDepth === 1) {
@@ -199,9 +199,8 @@ function buildCustomPalette(): PaletteDefinition {
 }
 
 export const buildPalettes: (
-  uiSettings: IUiSettingsClient,
   legacyColorsService: LegacyColorsService
-) => Record<string, PaletteDefinition> = (uiSettings, legacyColorsService) => {
+) => Record<string, PaletteDefinition> = (legacyColorsService) => {
   return {
     default: {
       title: i18n.translate('charts.palettes.defaultPaletteLabel', {

src/plugins/charts/public/services/palettes/service.ts

@@ -6,7 +6,6 @@
  * Side Public License, v 1.
  */
 
-import { CoreSetup } from 'kibana/public';
 import { ExpressionsSetup } from '../../../../../../src/plugins/expressions/public';
 import {
   ChartsPluginSetup,
@@ -24,12 +23,12 @@ export class PaletteService {
   private palettes: Record<string, PaletteDefinition<unknown>> | undefined = undefined;
   constructor() {}
 
-  public setup(core: CoreSetup, colorsService: LegacyColorsService) {
+  public setup(colorsService: LegacyColorsService) {
     return {
       getPalettes: async (): Promise<PaletteRegistry> => {
         if (!this.palettes) {
           const { buildPalettes } = await import('./palettes');
-          this.palettes = buildPalettes(core.uiSettings, colorsService);
+          this.palettes = buildPalettes(colorsService);
         }
         return {
           get: (name: string) => {

src/plugins/charts/server/plugin.ts

@@ -31,7 +31,7 @@ export class ChartsServerPlugin implements Plugin<object, object> {
         type: 'json',
         description: i18n.translate('charts.advancedSettings.visualization.colorMappingText', {
           defaultMessage:
-            'Maps values to specific colors in <strong>Visualize</strong> charts and <strong>TSVB</strong>. This setting does not apply to <strong>Lens.</strong>',
+            'Maps values to specific colors in charts using the <strong>Compatibility</strong> palette.',
         }),
         deprecation: {
           message: i18n.translate(