From 13fb8cb62e84d5af6655febcb5148b893aeb76e1 Mon Sep 17 00:00:00 2001
From: dej611 <dej611@gmail.com>
Date: Thu, 27 May 2021 20:04:59 +0200
Subject: [PATCH] :bug: Check on the whole palette configuration to refresh
 local state

---
 .../shared_components/coloring/color_stops.tsx     | 14 ++++++--------
 .../coloring/palette_configuration.tsx             |  5 +----
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/lens/public/shared_components/coloring/color_stops.tsx b/x-pack/plugins/lens/public/shared_components/coloring/color_stops.tsx
index b2e5809abf9fb..37197b232ddf5 100644
--- a/x-pack/plugins/lens/public/shared_components/coloring/color_stops.tsx
+++ b/x-pack/plugins/lens/public/shared_components/coloring/color_stops.tsx
@@ -22,7 +22,7 @@ import useUnmount from 'react-use/lib/useUnmount';
 import { DEFAULT_COLOR } from './constants';
 import { getDataMinMax, getStepValue, isValidColor } from './utils';
 import { TooltipWrapper, useDebouncedValue } from '../index';
-import { ColorStop } from './types';
+import { ColorStop, CustomPaletteParams } from './types';
 
 const idGeneratorFn = htmlIdGenerator();
 
@@ -43,19 +43,15 @@ function shouldSortStops(colorStops: Array<{ color: string; stop: string | numbe
 export interface CustomStopsProps {
   colorStops: ColorStop[];
   onChange: (colorStops: ColorStop[]) => void;
-  rangeType: 'number' | 'percent';
   dataBounds: { min: number; max: number };
-  reverse?: boolean;
-  palette?: string;
+  paletteConfiguration: CustomPaletteParams | undefined;
   'data-test-prefix': string;
 }
 export const CustomStops = ({
   colorStops,
   onChange,
-  rangeType,
+  paletteConfiguration,
   dataBounds,
-  reverse,
-  palette,
   ['data-test-prefix']: dataTestPrefix,
 }: CustomStopsProps) => {
   const onChangeWithValidation = useCallback(
@@ -76,7 +72,7 @@ export const CustomStops = ({
       id: idGeneratorFn(),
     }));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [palette, reverse]);
+  }, [paletteConfiguration?.name, paletteConfiguration?.reverse, paletteConfiguration?.rangeType]);
 
   const { inputValue: localColorStops, handleInputChange: setLocalColorStops } = useDebouncedValue({
     onChange: onChangeWithValidation,
@@ -101,6 +97,8 @@ export const CustomStops = ({
     }
   });
 
+  const rangeType = paletteConfiguration?.rangeType || 'percent';
+
   return (
     <>
       {sortedReason ? (
diff --git a/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.tsx b/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.tsx
index cfc6eb7474ada..df01b3e57cd7d 100644
--- a/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.tsx
+++ b/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.tsx
@@ -67,7 +67,6 @@ export function CustomizablePalette({
   setPalette: (palette: PaletteOutput<CustomPaletteParams>) => void;
   dataBounds: { min: number; max: number };
 }) {
-  const rangeType = activePalette.params?.rangeType ?? defaultPaletteParams.rangeType;
   const isCurrentPaletteCustom = activePalette.params?.name === CUSTOM_PALETTE;
 
   const colorStopsToShow = roundStopValues(
@@ -315,11 +314,9 @@ export function CustomizablePalette({
           }
         >
           <CustomStops
-            reverse={activePalette.params?.reverse}
-            palette={activePalette.params?.name}
+            paletteConfiguration={activePalette?.params}
             data-test-prefix="lnsDatatable"
             colorStops={colorStopsToShow}
-            rangeType={rangeType}
             dataBounds={dataBounds}
             onChange={(colorStops) => {
               const newParams = getSwitchToCustomParams(