[Explore Vis] adapt deprecated styles in embeddable (#10984)

Author: Qxisylolo

src/plugins/explore/public/embeddable/explore_embeddable.test.tsx

@@ -72,6 +72,12 @@ jest.mock('../components/visualizations/visualization_builder_utils', () => ({
   findRuleByIndex: jest.fn().mockReturnValue({
     toExpression: jest.fn(),
   }),
+  adaptLegacyData: jest.fn().mockReturnValue({ useThresholdColor: true }),
+  getColumnsByAxesMapping: jest.fn().mockReturnValue({
+    numericalColumns: [],
+    categoricalColumns: [],
+    dateColumns: [],
+  }),
 }));
 
 describe('ExploreEmbeddable', () => {
@@ -507,4 +513,31 @@ describe('ExploreEmbeddable', () => {
     expect(embeddable.getOutput().error).toBeUndefined();
     expect(embeddable.getOutput().loading).toBe(false);
   });
+
+  test('should be able to adapt deprecated styles', async () => {
+    jest.spyOn(visualizationRegistry, 'findRuleByAxesMapping').mockReturnValueOnce({
+      id: 'test-rule',
+      name: 'Test Rule',
+      matches: jest.fn(),
+      chartTypes: [{ type: 'line', priority: 100, name: 'Line Chart', icon: '' }],
+      toSpec: jest.fn(),
+    });
+
+    const adaptLegacyDataSpy = jest.spyOn(
+      await import('../components/visualizations/visualization_builder_utils'),
+      'adaptLegacyData'
+    );
+
+    mockSavedExplore.visualization = JSON.stringify({
+      chartType: 'line',
+      axesMapping: { x: 'field1', y: 'field2' },
+      thresholdLines: [], // deprecated style
+    });
+    mockSavedExplore.uiState = JSON.stringify({ activeTab: 'visualization' });
+
+    // @ts-ignore
+    await embeddable.fetch();
+
+    expect(adaptLegacyDataSpy).toHaveBeenCalled();
+  });
 });

src/plugins/explore/public/embeddable/explore_embeddable.tsx

@@ -45,7 +45,10 @@ import {
   StyleOptions,
 } from '../components/visualizations/utils/use_visualization_types';
 import { defaultPrepareQueryString } from '../application/utils/state_management/actions/query_actions';
-import { convertStringsToMappings } from '../components/visualizations/visualization_builder_utils';
+import {
+  adaptLegacyData,
+  convertStringsToMappings,
+} from '../components/visualizations/visualization_builder_utils';
 import { normalizeResultRows } from '../components/visualizations/utils/normalize_result_rows';
 import { visualizationRegistry } from '../components/visualizations/visualization_registry';
 import { getQueryWithSource } from '../application/utils/languages';
@@ -401,12 +404,21 @@ export class ExploreEmbeddable
           };
           this.searchProps.searchContext = searchContext;
           const styleOptions = visualization.params;
+
+          const styles = adaptLegacyData({
+            type: selectedChartType,
+            styles: styleOptions,
+            axesMapping: visualization.axesMapping,
+          })?.styles;
+
+          this.searchProps.styleOptions = styles;
+
           const spec = matchedRule.toSpec(
             visualizationData.transformedData,
             numericalColumns,
             categoricalColumns,
             dateColumns,
-            styleOptions,
+            styles || styleOptions,
             selectedChartType,
             axesMapping
           );