[Lens] Fixes mispelled complementary palette (#176136)

## Summary Closes #161194 Dashboard with Lens, aggbased and TSVB using the legacy complimentary palette. <img width="2104" alt="image" src="https://github.com/elastic/kibana/assets/17003240/9cc0da68-3f36-401a-a264-a15e71c46cdd"> Correct usage in the list. <img width="530" alt="image" src="https://github.com/elastic/kibana/assets/17003240/4f9046f8-77ae-4d30-b12f-92844d77a758"> I don't want to run a migration. All the new visualizations will have the correct id in the SO and I am fallbacking for the existing. As with the new color mapping we are going to construct this palette (it won't be in the list) I think that this is enough to solve the problem.
elastic · Feb 6, 2024 · d159d73 · d159d73
1 parent d665ca2
commit d159d73
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 20 deletions.
diff --git a/packages/kbn-coloring/src/palettes/constants.ts b/packages/kbn-coloring/src/palettes/constants.ts
@@ -14,3 +14,7 @@ export const DEFAULT_RANGE_TYPE = 'percent';
 export const DEFAULT_MIN_STOP = 0;
 export const DEFAULT_MAX_STOP = 100;
 export const DEFAULT_COLOR_STEPS = 5;
+
+export const DEFAULT_FALLBACK_PALETTE = 'default';
+export const LEGACY_COMPLIMENTARY_PALETTE = 'complimentary';
+export const COMPLEMENTARY_PALETTE = 'complementary';
diff --git a/packages/kbn-coloring/src/palettes/utils.ts b/packages/kbn-coloring/src/palettes/utils.ts
@@ -19,6 +19,9 @@ import {
   DEFAULT_PALETTE_NAME,
   DEFAULT_MAX_STOP,
   DEFAULT_MIN_STOP,
+  DEFAULT_FALLBACK_PALETTE,
+  LEGACY_COMPLIMENTARY_PALETTE,
+  COMPLEMENTARY_PALETTE,
 } from './constants';
 
 /** @internal **/
@@ -189,3 +192,14 @@ export function reversePalette(paletteColorRepresentation: ColorStop[] = []) {
     }))
     .reverse();
 }
+
+// This is a helper function used for backwards compatibility
+// for the mispelled complementary palette.
+// https://github.com/elastic/kibana/issues/161194
+export function getActivePaletteName(name?: string): string {
+  let paletteName = name || DEFAULT_FALLBACK_PALETTE;
+  if (paletteName === LEGACY_COMPLIMENTARY_PALETTE) {
+    paletteName = COMPLEMENTARY_PALETTE;
+  }
+  return paletteName;
+}
diff --git a/src/plugins/charts/common/constants.ts b/src/plugins/charts/common/constants.ts
@@ -13,7 +13,7 @@ export const paletteIds = [
   'custom',
   'status',
   'temperature',
-  'complimentary',
+  'complementary',
   'negative',
   'positive',
   'cool',

diff --git a/src/plugins/charts/public/services/palettes/palettes.tsx b/src/plugins/charts/public/services/palettes/palettes.tsx
@@ -273,11 +273,11 @@ export const buildPalettes: (
       title: i18n.translate('charts.palettes.temperatureLabel', { defaultMessage: 'Temperature' }),
       ...buildGradient('temperature', euiPaletteForTemperature),
     },
-    complimentary: {
-      title: i18n.translate('charts.palettes.complimentaryLabel', {
-        defaultMessage: 'Complimentary',
+    complementary: {
+      title: i18n.translate('charts.palettes.complementaryLabel', {
+        defaultMessage: 'Complementary',
       }),
-      ...buildGradient('complimentary', euiPaletteComplementary),
+      ...buildGradient('complementary', euiPaletteComplementary),
     },
     negative: {
       title: i18n.translate('charts.palettes.negativeLabel', { defaultMessage: 'Negative' }),

diff --git a/src/plugins/charts/public/services/palettes/service.ts b/src/plugins/charts/public/services/palettes/service.ts
@@ -7,6 +7,7 @@
  */
 
 import type { PaletteRegistry, PaletteDefinition } from '@kbn/coloring';
+import { getActivePaletteName } from '@kbn/coloring';
 import type { ExpressionsSetup } from '@kbn/expressions-plugin/public';
 import type { ChartsPluginSetup } from '../..';
 import type { LegacyColorsService } from '../legacy_colors';
@@ -29,7 +30,8 @@ export class PaletteService {
         }
         return {
           get: (name: string) => {
-            return this.palettes![name];
+            const paletteName = getActivePaletteName(name);
+            return this.palettes![paletteName];
           },
           getAll: () => {
             return Object.values(this.palettes!);

diff --git a/src/plugins/vis_default_editor/public/components/controls/palette_picker.tsx b/src/plugins/vis_default_editor/public/components/controls/palette_picker.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import type { PaletteOutput, PaletteRegistry } from '@kbn/coloring';
+import { getActivePaletteName } from '@kbn/coloring';
 import { EuiColorPalettePicker, EuiColorPalettePickerPaletteProps } from '@elastic/eui';
 import { EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -27,6 +28,8 @@ export function PalettePicker<ParamName extends string>({
   paramName,
   setPalette,
 }: PalettePickerProps<ParamName>) {
+  const paletteName = getActivePaletteName(activePalette?.name);
+
   const palettesList: EuiColorPalettePickerPaletteProps[] = palettes
     .getAll()
     .filter(({ internal }) => !internal)
@@ -35,10 +38,7 @@ export function PalettePicker<ParamName extends string>({
         value: id,
         title,
         type: 'fixed',
-        palette: getCategoricalColors(
-          10,
-          id === activePalette?.name ? activePalette?.params : undefined
-        ),
+        palette: getCategoricalColors(10, id === paletteName ? activePalette?.params : undefined),
       };
     });
 
@@ -61,7 +61,7 @@ export function PalettePicker<ParamName extends string>({
             name: palette?.value ?? DEFAULT_PALETTE,
           });
         }}
-        valueOfSelected={activePalette?.name || DEFAULT_PALETTE}
+        valueOfSelected={paletteName}
         selectionDisplay={'palette'}
       />
     </EuiFormRow>

diff --git a/src/plugins/vis_types/timeseries/public/application/components/palette_picker.tsx b/src/plugins/vis_types/timeseries/public/application/components/palette_picker.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import type { PaletteRegistry, PaletteOutput } from '@kbn/coloring';
+import { getActivePaletteName } from '@kbn/coloring';
 import { EuiColorPalettePicker } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { rainbowColors } from '../lib/rainbow_colors';
@@ -23,6 +24,7 @@ export interface PalettePickerProps {
 
 export function PalettePicker({ activePalette, palettes, setPalette, color }: PalettePickerProps) {
   const finalGradientColor = computeGradientFinalColor(color);
+  const paletteName = getActivePaletteName(activePalette?.name);
 
   return (
     <EuiColorPalettePicker
@@ -88,7 +90,7 @@ export function PalettePicker({ activePalette, palettes, setPalette, color }: Pa
           });
         }
       }}
-      valueOfSelected={activePalette?.name || 'default'}
+      valueOfSelected={paletteName}
       selectionDisplay={'palette'}
     />
   );

diff --git a/x-pack/plugins/lens/public/shared_components/palette_picker.tsx b/x-pack/plugins/lens/public/shared_components/palette_picker.tsx
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import type { PaletteOutput, PaletteRegistry } from '@kbn/coloring';
+import { getActivePaletteName } from '@kbn/coloring';
 import { EuiColorPalettePicker, EuiColorPalettePickerPaletteProps } from '@elastic/eui';
 import { EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -20,6 +21,8 @@ export function PalettePicker({
   activePalette?: PaletteOutput;
   setPalette: (palette: PaletteOutput) => void;
 }) {
+  const paletteName = getActivePaletteName(activePalette?.name);
+
   const palettesToShow: EuiColorPalettePickerPaletteProps[] = palettes
     .getAll()
     .filter(({ internal }) => !internal)
@@ -28,10 +31,7 @@ export function PalettePicker({
         value: id,
         title,
         type: 'fixed',
-        palette: getCategoricalColors(
-          10,
-          id === activePalette?.name ? activePalette?.params : undefined
-        ),
+        palette: getCategoricalColors(10, id === paletteName ? activePalette?.params : undefined),
       };
     });
   return (
@@ -51,7 +51,7 @@ export function PalettePicker({
             name: newPalette,
           });
         }}
-        valueOfSelected={activePalette?.name || 'default'}
+        valueOfSelected={paletteName}
         selectionDisplay={'palette'}
       />
     </EuiFormRow>

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -124,7 +124,7 @@
     "charts.legend.toggleLegendButtonAriaLabel": "Afficher/Masquer la légende",
     "charts.legend.toggleLegendButtonTitle": "Afficher/Masquer la légende",
     "charts.noDataLabel": "Résultat introuvable",
-    "charts.palettes.complimentaryLabel": "Gratuite",
+    "charts.palettes.complementaryLabel": "Gratuite",
     "charts.palettes.coolLabel": "Froide",
     "charts.palettes.customLabel": "Personnalisée",
     "charts.palettes.defaultPaletteLabel": "Par défaut",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -124,7 +124,7 @@
     "charts.legend.toggleLegendButtonAriaLabel": "凡例を切り替える",
     "charts.legend.toggleLegendButtonTitle": "凡例を切り替える",
     "charts.noDataLabel": "結果が見つかりませんでした",
-    "charts.palettes.complimentaryLabel": "無料",
+    "charts.palettes.complementaryLabel": "無料",
     "charts.palettes.coolLabel": "Cool",
     "charts.palettes.customLabel": "カスタム",
     "charts.palettes.defaultPaletteLabel": "デフォルト",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -124,7 +124,7 @@
     "charts.legend.toggleLegendButtonAriaLabel": "切换图例",
     "charts.legend.toggleLegendButtonTitle": "切换图例",
     "charts.noDataLabel": "找不到结果",
-    "charts.palettes.complimentaryLabel": "免费",
+    "charts.palettes.complementaryLabel": "免费",
     "charts.palettes.coolLabel": "冷",
     "charts.palettes.customLabel": "定制",
     "charts.palettes.defaultPaletteLabel": "默认",