[Lens] Fixes bug with removing layer with trendline (#143723)

* [Lens] Fixes bug with removing layer with trendline

* Add unit tests

* Update x-pack/plugins/lens/public/datasources/form_based/form_based.tsx

Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>

Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>

x-pack/plugins/lens/public/datasources/form_based/form_based.test.ts

@@ -1675,6 +1675,29 @@ describe('IndexPattern Data Source', () => {
         },
       });
     });
+
+    it('should remove linked layers', () => {
+      const state = {
+        layers: {
+          first: {
+            indexPatternId: '1',
+            columnOrder: [],
+            columns: {},
+          },
+          second: {
+            indexPatternId: '2',
+            columnOrder: [],
+            columns: {},
+            linkToLayers: ['first'],
+          },
+        },
+        currentIndexPatternId: '1',
+      };
+      expect(FormBasedDatasource.removeLayer(state, 'first')).toEqual({
+        ...state,
+        layers: {},
+      });
+    });
   });
 
   describe('#createEmptyLayer', () => {

x-pack/plugins/lens/public/datasources/form_based/form_based.tsx

@@ -219,6 +219,14 @@ export function getFormBasedDatasource({
       const newLayers = { ...state.layers };
       delete newLayers[layerId];
 
+      // delete layers linked to this layer
+      Object.keys(newLayers).forEach((id) => {
+        const linkedLayers = newLayers[id]?.linkToLayers;
+        if (linkedLayers && linkedLayers.includes(layerId)) {
+          delete newLayers[id];
+        }
+      });
+
       return {
         ...state,
         layers: newLayers,

x-pack/plugins/lens/public/visualizations/metric/visualization.test.ts

@@ -758,6 +758,16 @@ describe('metric visualization', () => {
     `);
   });
 
+  it('removes all accessors from a layer', () => {
+    const chk = visualization.removeLayer!(fullState, 'first');
+    expect(chk.metricAccessor).toBeUndefined();
+    expect(chk.trendlineLayerId).toBeUndefined();
+    expect(chk.trendlineLayerType).toBeUndefined();
+    expect(chk.trendlineMetricAccessor).toBeUndefined();
+    expect(chk.trendlineTimeAccessor).toBeUndefined();
+    expect(chk.trendlineBreakdownByAccessor).toBeUndefined();
+  });
+
   it('appends a trendline layer', () => {
     const newLayerId = 'new-layer-id';
     const chk = visualization.appendLayer!(fullState, newLayerId, 'metricTrendline', '');
@@ -767,6 +777,7 @@ describe('metric visualization', () => {
 
   it('removes trendline layer', () => {
     const chk = visualization.removeLayer!(fullStateWTrend, fullStateWTrend.trendlineLayerId);
+    expect(chk.metricAccessor).toBe('metric-col-id');
     expect(chk.trendlineLayerId).toBeUndefined();
     expect(chk.trendlineLayerType).toBeUndefined();
     expect(chk.trendlineMetricAccessor).toBeUndefined();

x-pack/plugins/lens/public/visualizations/metric/visualization.tsx

@@ -440,9 +440,10 @@ export const getMetricVisualization = ({
     return { ...state, trendlineLayerId: layerId, trendlineLayerType: layerType };
   },
 
-  removeLayer(state) {
+  removeLayer(state, layerId) {
     const newState: MetricVisualizationState = {
       ...state,
+      ...(state.layerId === layerId && { metricAccessor: undefined }),
       trendlineLayerId: undefined,
       trendlineLayerType: undefined,
       trendlineMetricAccessor: undefined,