[fix] pass strings to color palette inputs (#2873)

Signed-off-by: Ihor Dykhta <[email protected]>

Author: igorDykhta

src/components/src/side-panel/layer-panel/custom-palette.tsx

@@ -315,22 +315,20 @@ export const EditableColorRange: React.FC<EditableColorRangeProps> = ({
   const onChangeLeft = useCallback(
     val => {
       if (editable && editColorMap) editColorMap(parseFloat(val), index - 1);
-      return;
     },
     [editColorMap, index, editable]
   );
   const onChangeRight = useCallback(
     val => {
       if (editable && editColorMap) editColorMap(parseFloat(val), index);
-      return;
     },
     [editColorMap, index, editable]
   );
 
   return (
     <StyledRangeInput>
       <ColorPaletteInput
-        value={noMinBound ? 'Less' : item.inputs[0]}
+        value={noMinBound ? 'Less' : item.inputs[0].toString()}
         id={`color-palette-input-${index}-left`}
         width="50px"
         textAlign="end"
@@ -339,7 +337,7 @@ export const EditableColorRange: React.FC<EditableColorRangeProps> = ({
       />
       <Dash />
       <ColorPaletteInput
-        value={noMaxBound ? 'More' : item.inputs[1]}
+        value={noMaxBound ? 'More' : item.inputs[1].toString()}
         id={`color-palette-input-${index}-right`}
         width="50px"
         textAlign="end"

test/browser/components/side-panel/channel-by-value-selctor-test.js

@@ -327,22 +327,15 @@ test('Components -> ChannelByValueSelector -> ColorScaleSelector -> ColorBreakDi
       t.equal(inputs.length, 1, 'should render 1 input');
       t.equal(
         inputs.at(0).props().value,
-        Number(expectedText[i][i === 0 ? 2 : 1]),
-        'should display correct range'
+        expectedText[i][i === 0 ? 2 : 1],
+        `should display correct range i: ${i}`
       );
     } else {
       t.equal(inputs.length, 2, 'should render 2 inputs');
 
-      t.equal(
-        inputs.at(0).props().value,
-        Number(expectedText[i][1]),
-        'should display correct range'
-      );
-      t.equal(
-        inputs.at(1).props().value,
-        Number(expectedText[i][2]),
-        'should display correct range'
-      );
+      t.equal(inputs.at(0).props().value, expectedText[i][1], `should display correct range ${i}`);
+
+      t.equal(inputs.at(1).props().value, expectedText[i][2], `should display correct range ${i}`);
     }
   }
 

test/browser/components/side-panel/layer-configurator-test.js

@@ -154,7 +154,9 @@ test('Components -> LayerConfigurator.mount -> LayerColumnConfig', t => {
       </IntlWrapper>
     );
   }, 'LayerConfigurator should not fail without props');
+
   const baseConfigGroup = wrapper.find(LayerConfigGroup).at(0);
+
   t.equal(
     baseConfigGroup.find(LayerColumnModeConfig).length,
     1,
@@ -240,7 +242,6 @@ test('Components -> LayerConfigurator.mount -> LayerColumnConfig', t => {
 
   // TODO: still need to fix this one
   // for some reason the update config callback is only called once
-
   // click single column
   // clickItemSelectList(fieldSelector2, 2);