[Fix] The overwritten series color from the legend is not visible when I create a visualization from a dashboard

src/plugins/visualize/public/application/utils/get_visualization_instance.test.ts

@@ -7,7 +7,16 @@
  */
 
 import { createSavedSearchesLoader } from '../../../../discover/public';
-import { getVisualizationInstance } from './get_visualization_instance';
+import type {
+  VisualizeInput,
+  VisSavedObject,
+  Vis,
+  VisParams,
+} from 'src/plugins/visualizations/public';
+import {
+  getVisualizationInstance,
+  getVisualizationInstanceFromInput,
+} from './get_visualization_instance';
 import { createVisualizeServicesMock } from './mocks';
 import { VisualizeServices } from '../types';
 import { BehaviorSubject } from 'rxjs';
@@ -25,8 +34,8 @@ describe('getVisualizationInstance', () => {
   const serializedVisMock = {
     type: 'area',
   };
-  let savedVisMock: any;
-  let visMock: any;
+  let savedVisMock: VisSavedObject;
+  let visMock: Vis<VisParams>;
   let mockServices: jest.Mocked<VisualizeServices>;
   let subj: BehaviorSubject<any>;
 
@@ -36,8 +45,8 @@ describe('getVisualizationInstance', () => {
     visMock = {
       type: {},
       data: {},
-    };
-    savedVisMock = {};
+    } as Vis<VisParams>;
+    savedVisMock = {} as VisSavedObject;
     // @ts-expect-error
     mockServices.data.search.showError.mockImplementation(() => {});
     // @ts-expect-error
@@ -85,6 +94,7 @@ describe('getVisualizationInstance', () => {
 
   test('should load existing vis by id and call vis type setup if exists', async () => {
     const newVisObj = { data: {} };
+    // @ts-expect-error
     visMock.type.setup = jest.fn(() => newVisObj);
     const { vis } = await getVisualizationInstance(mockServices, 'saved_vis_id');
 
@@ -113,3 +123,85 @@ describe('getVisualizationInstance', () => {
     expect(mockServices.data.search.showError).toHaveBeenCalled();
   });
 });
+
+describe('getVisualizationInstanceInput', () => {
+  const serializedVisMock = {
+    type: 'pie',
+  };
+  let savedVisMock: VisSavedObject;
+  let visMock: Vis<VisParams>;
+  let mockServices: jest.Mocked<VisualizeServices>;
+  let subj: BehaviorSubject<any>;
+
+  beforeEach(() => {
+    mockServices = createVisualizeServicesMock();
+    subj = new BehaviorSubject({});
+    visMock = {
+      type: {},
+      data: {},
+    } as Vis<VisParams>;
+    savedVisMock = {} as VisSavedObject;
+    // @ts-expect-error
+    mockServices.savedVisualizations.get.mockImplementation(() => savedVisMock);
+    // @ts-expect-error
+    mockServices.visualizations.createVis.mockImplementation(() => visMock);
+    // @ts-expect-error
+    mockServices.createVisEmbeddableFromObject.mockImplementation(() => ({
+      getOutput$: jest.fn(() => subj.asObservable()),
+    }));
+  });
+
+  test('should create new instances of savedVis, vis and embeddableHandler', async () => {
+    const input = ({
+      id: 'test-id',
+      savedVis: {
+        title: '',
+        description: '',
+        type: 'pie',
+        params: {
+          type: 'pie',
+          addTooltip: true,
+          addLegend: true,
+          legendPosition: 'right',
+          isDonut: true,
+          labels: {
+            show: false,
+            values: true,
+            last_level: true,
+            truncate: 100,
+          },
+        },
+        uiState: {
+          vis: {
+            colors: {
+              Count: '#1F78C1',
+            },
+          },
+        },
+      },
+    } as unknown) as VisualizeInput;
+    const {
+      savedVis,
+      savedSearch,
+      vis,
+      embeddableHandler,
+    } = await getVisualizationInstanceFromInput(mockServices, input);
+
+    expect(mockServices.savedVisualizations.get).toHaveBeenCalled();
+    expect(mockServices.visualizations.createVis).toHaveBeenCalledWith(
+      serializedVisMock.type,
+      input.savedVis
+    );
+    expect(mockServices.createVisEmbeddableFromObject).toHaveBeenCalledWith(visMock, {
+      timeRange: undefined,
+      filters: undefined,
+      id: '',
+    });
+
+    expect(vis).toBe(visMock);
+    expect(savedVis).toBe(savedVisMock);
+    expect(savedVis.uiStateJSON).toBe(JSON.stringify(input.savedVis?.uiState));
+    expect(embeddableHandler).toBeDefined();
+    expect(savedSearch).toBeUndefined();
+  });
+});

src/plugins/visualize/public/application/utils/get_visualization_instance.ts

@@ -68,6 +68,10 @@ export const getVisualizationInstanceFromInput = async (
    * state of the visualization, into a new saved object.
    */
   const savedVis: VisSavedObject = await savedVisualizations.get();
+  if (visState.uiState && Object.keys(visState.uiState).length !== 0) {
+    savedVis.uiStateJSON = JSON.stringify(visState.uiState);
+  }
+
   let vis = await visualizations.createVis(visState.type, cloneDeep(visState));
   if (vis.type.setup) {
     try {