From 1f06898beb99f9221c52b3a0861d5f2f6fe297b5 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Wed, 7 Jul 2021 11:28:30 +0200
Subject: [PATCH] [Lens] Fix state setting via mutation (#104420)

---
 .../xy_visualization/xy_config_panel.tsx      |  9 ++++++---
 .../test/functional/apps/lens/smokescreen.ts  | 19 +++++++++++++------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
index 04533f6c914e..8f7fe4601739 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
@@ -540,7 +540,10 @@ export function DimensionEditor(
               (yAxisConfig) => yAxisConfig.forAccessor === accessor
             );
             if (existingIndex !== -1) {
-              newYAxisConfigs[existingIndex].axisMode = newMode;
+              newYAxisConfigs[existingIndex] = {
+                ...newYAxisConfigs[existingIndex],
+                axisMode: newMode,
+              };
             } else {
               newYAxisConfigs.push({
                 forAccessor: accessor,
@@ -625,9 +628,9 @@ const ColorPicker = ({
         const existingIndex = newYConfigs.findIndex((yConfig) => yConfig.forAccessor === accessor);
         if (existingIndex !== -1) {
           if (text === '') {
-            delete newYConfigs[existingIndex].color;
+            newYConfigs[existingIndex] = { ...newYConfigs[existingIndex], color: undefined };
           } else {
-            newYConfigs[existingIndex].color = output.hex;
+            newYConfigs[existingIndex] = { ...newYConfigs[existingIndex], color: output.hex };
           }
         } else {
           newYConfigs.push({
diff --git a/x-pack/test/functional/apps/lens/smokescreen.ts b/x-pack/test/functional/apps/lens/smokescreen.ts
index 78900e6fabca..6d9360ac32b4 100644
--- a/x-pack/test/functional/apps/lens/smokescreen.ts
+++ b/x-pack/test/functional/apps/lens/smokescreen.ts
@@ -198,7 +198,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await testSubjects.missingOrFail('lnsXY_yDimensionPanel > lns-dimensionTrigger');
     });
 
-    it('should allow creation of a multi-axis chart', async () => {
+    it('should allow creation of a multi-axis chart and switching multiple times', async () => {
       await PageObjects.visualize.navigateToNewVisualization();
       await PageObjects.visualize.clickVisType('lens');
       await elasticChart.setNewChartUiDebugFlag(true);
@@ -225,14 +225,21 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
 
       await PageObjects.lens.changeAxisSide('right');
-
-      await PageObjects.lens.closeDimensionEditor();
-
       await PageObjects.lens.waitForVisualization();
-
-      const data = await PageObjects.lens.getCurrentChartDebugState();
+      let data = await PageObjects.lens.getCurrentChartDebugState();
       expect(data?.axes?.y.length).to.eql(2);
       expect(data?.axes?.y.some(({ position }) => position === 'right')).to.eql(true);
+
+      await PageObjects.lens.changeAxisSide('left');
+      await PageObjects.lens.waitForVisualization();
+      data = await PageObjects.lens.getCurrentChartDebugState();
+      expect(data?.axes?.y.length).to.eql(1);
+      expect(data?.axes?.y.some(({ position }) => position === 'right')).to.eql(false);
+
+      await PageObjects.lens.changeAxisSide('right');
+      await PageObjects.lens.waitForVisualization();
+
+      await PageObjects.lens.closeDimensionEditor();
     });
 
     it('should show value labels on bar charts when enabled', async () => {