[Lens]Improve types for navigate to lens part (#143357)

* Improved types for getSuggestionFromConvertToLensContext metrod

* Improved types

src/plugins/vis_types/xy/public/convert_to_lens/configurations/index.ts

@@ -24,10 +24,11 @@ import {
   Scale,
   ScaleType,
   SeriesParam,
+  ThresholdLineStyle,
   ValueAxis,
   VisParams,
 } from '../../types';
-import { getCurveType, getLineStyle, getMode, getYAxisPosition } from '../../utils/common';
+import { getCurveType, getMode, getYAxisPosition } from '../../utils/common';
 
 function getYScaleType(scale?: Scale): XYConfiguration['yLeftScale'] | undefined {
   const type = scale?.type;
@@ -181,7 +182,11 @@ function getReferenceLineLayers(
           axisMode: getYAxisPosition(yAxis?.position ?? 'left'),
           color: thresholdLineConfig.color,
           lineWidth: thresholdLineConfig.width !== null ? thresholdLineConfig.width : undefined,
-          lineStyle: getLineStyle(thresholdLineConfig.style),
+          lineStyle:
+            thresholdLineConfig.style === ThresholdLineStyle.DotDashed ||
+            thresholdLineConfig.style === ThresholdLineStyle.Full
+              ? 'solid'
+              : thresholdLineConfig.style,
         };
       }),
     };

src/plugins/visualizations/common/convert_to_lens/types/configurations.ts

@@ -55,7 +55,7 @@ export interface YConfig {
   color?: string;
   icon?: string;
   lineWidth?: number;
-  lineStyle?: 'solid' | 'dashed' | 'dotted' | 'dot-dashed';
+  lineStyle?: 'solid' | 'dashed' | 'dotted';
   fill?: FillType;
   iconPosition?: 'auto' | 'left' | 'right' | 'above' | 'below';
   textVisibility?: boolean;
@@ -276,4 +276,5 @@ export type Configuration =
   | XYConfiguration
   | TableVisConfiguration
   | PartitionVisConfiguration
-  | MetricVisConfiguration;
+  | MetricVisConfiguration
+  | GaugeVisConfiguration;

x-pack/plugins/lens/public/types.ts

@@ -754,14 +754,14 @@ export interface VisualizationDimensionChangeProps<T> {
   frame: FramePublicAPI;
 }
 
-export interface Suggestion {
+export interface Suggestion<T = unknown, V = unknown> {
   visualizationId: string;
-  datasourceState?: unknown;
+  datasourceState?: V;
   datasourceId?: string;
   columns: number;
   score: number;
   title: string;
-  visualizationState: unknown;
+  visualizationState: T;
   previewExpression?: Ast | string;
   previewIcon: IconType;
   hide?: boolean;
@@ -1160,7 +1160,7 @@ export interface Visualization<T = unknown, P = unknown> {
 
   getSuggestionFromConvertToLensContext?: (
     props: VisualizationStateFromContextChangeProps
-  ) => Suggestion | undefined;
+  ) => Suggestion<T> | undefined;
 }
 
 // Use same technique as TriggerContext

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

@@ -16,6 +16,7 @@ import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
 import { IconChartDatatable } from '@kbn/chart-icons';
 import { LayerTypes } from '@kbn/expression-xy-plugin/public';
+import type { FormBasedPersistedState } from '../../datasources/form_based/types';
 import type {
   SuggestionRequest,
   Visualization,
@@ -29,7 +30,6 @@ import type { LayerType } from '../../../common';
 import { getDefaultSummaryLabel } from '../../../common/expressions/datatable/summary';
 import type { ColumnState, SortingState, PagingState } from '../../../common/expressions';
 import { DataTableToolbar } from './components/toolbar';
-import type { FormBasedLayer } from '../../datasources/form_based/types';
 
 export interface DatatableVisualizationState {
   columns: ColumnState[];
@@ -43,16 +43,6 @@ export interface DatatableVisualizationState {
   paging?: PagingState;
 }
 
-interface DatatableDatasourceState {
-  [prop: string]: unknown;
-  layers: FormBasedLayer[];
-}
-
-export interface DatatableSuggestion extends Suggestion {
-  datasourceState: DatatableDatasourceState;
-  visualizationState: DatatableVisualizationState;
-}
-
 const visualizationLabel = i18n.translate('xpack.lens.datatable.label', {
   defaultMessage: 'Table',
 });
@@ -605,15 +595,17 @@ export const getDatatableVisualization = ({
     }
   },
   getSuggestionFromConvertToLensContext({ suggestions, context }) {
-    const allSuggestions = suggestions as DatatableSuggestion[];
-    return {
+    const allSuggestions = suggestions as Array<
+      Suggestion<DatatableVisualizationState, FormBasedPersistedState>
+    >;
+    const suggestion: Suggestion<DatatableVisualizationState, FormBasedPersistedState> = {
       ...allSuggestions[0],
       datasourceState: {
         ...allSuggestions[0].datasourceState,
         layers: allSuggestions.reduce(
           (acc, s) => ({
             ...acc,
-            ...s.datasourceState.layers,
+            ...s.datasourceState?.layers,
           }),
           {}
         ),
@@ -623,6 +615,7 @@ export const getDatatableVisualization = ({
         ...context.configuration,
       },
     };
+    return suggestion;
   },
 });
 

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

@@ -24,6 +24,7 @@ import {
 } from '@kbn/expression-gauge-plugin/public';
 import { IconChartHorizontalBullet, IconChartVerticalBullet } from '@kbn/chart-icons';
 import { LayerTypes } from '@kbn/expression-xy-plugin/public';
+import type { FormBasedPersistedState } from '../../datasources/form_based/types';
 import type { DatasourceLayers, OperationMetadata, Suggestion, Visualization } from '../../types';
 import { getSuggestions } from './suggestions';
 import {
@@ -37,7 +38,6 @@ import { applyPaletteParams } from '../../shared_components';
 import { GaugeDimensionEditor } from './dimension_editor';
 import { generateId } from '../../id_generator';
 import { getAccessorsFromState } from './utils';
-import { FormBasedLayer } from '../..';
 
 const groupLabelForGauge = i18n.translate('xpack.lens.metric.groupLabel', {
   defaultMessage: 'Goal and single value',
@@ -48,16 +48,6 @@ interface GaugeVisualizationDeps {
   theme: ThemeServiceStart;
 }
 
-interface GaugeDatasourceState {
-  [prop: string]: unknown;
-  layers: FormBasedLayer[];
-}
-
-export interface GaugeSuggestion extends Suggestion {
-  datasourceState: GaugeDatasourceState;
-  visualizationState: GaugeVisualizationState;
-}
-
 export const isNumericMetric = (op: OperationMetadata) =>
   !op.isBucketed && op.dataType === 'number';
 
@@ -556,23 +546,26 @@ export const getGaugeVisualization = ({
   },
 
   getSuggestionFromConvertToLensContext({ suggestions, context }) {
-    const allSuggestions = suggestions as GaugeSuggestion[];
-    return {
+    const allSuggestions = suggestions as Array<
+      Suggestion<GaugeVisualizationState, FormBasedPersistedState>
+    >;
+    const suggestion: Suggestion<GaugeVisualizationState, FormBasedPersistedState> = {
       ...allSuggestions[0],
       datasourceState: {
         ...allSuggestions[0].datasourceState,
         layers: allSuggestions.reduce(
           (acc, s) => ({
             ...acc,
-            ...s.datasourceState.layers,
+            ...s.datasourceState?.layers,
           }),
           {}
         ),
       },
       visualizationState: {
         ...allSuggestions[0].visualizationState,
-        ...context.configuration,
+        ...(context.configuration as GaugeVisualizationState),
       },
     };
+    return suggestion;
   },
 });

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

@@ -19,6 +19,7 @@ import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { IconChartMetric } from '@kbn/chart-icons';
 import { LayerTypes } from '@kbn/expression-xy-plugin/public';
 import type { LayerType } from '../../../common';
+import type { FormBasedPersistedState } from '../../datasources/form_based/types';
 import { getSuggestions } from './suggestions';
 import {
   Visualization,
@@ -32,7 +33,6 @@ import { DimensionEditor } from './dimension_editor';
 import { Toolbar } from './toolbar';
 import { generateId } from '../../id_generator';
 import { FormatSelectorOptions } from '../../datasources/form_based/dimension_panel/format_selector';
-import { FormBasedLayer } from '../../datasources/form_based/types';
 
 export const DEFAULT_MAX_COLUMNS = 3;
 
@@ -57,16 +57,6 @@ export interface MetricVisualizationState {
   maxCols?: number;
 }
 
-interface MetricDatasourceState {
-  [prop: string]: unknown;
-  layers: FormBasedLayer[];
-}
-
-export interface MetricSuggestion extends Suggestion {
-  datasourceState: MetricDatasourceState;
-  visualizationState: MetricVisualizationState;
-}
-
 export const supportedDataTypes = new Set(['number']);
 
 // TODO - deduplicate with gauges?
@@ -503,15 +493,17 @@ export const getMetricVisualization = ({
   },
 
   getSuggestionFromConvertToLensContext({ suggestions, context }) {
-    const allSuggestions = suggestions as MetricSuggestion[];
-    return {
+    const allSuggestions = suggestions as Array<
+      Suggestion<MetricVisualizationState, FormBasedPersistedState>
+    >;
+    const suggestion: Suggestion<MetricVisualizationState, FormBasedPersistedState> = {
       ...allSuggestions[0],
       datasourceState: {
         ...allSuggestions[0].datasourceState,
         layers: allSuggestions.reduce(
           (acc, s) => ({
             ...acc,
-            ...s.datasourceState.layers,
+            ...s.datasourceState?.layers,
           }),
           {}
         ),
@@ -521,5 +513,6 @@ export const getMetricVisualization = ({
         ...context.configuration,
       },
     };
+    return suggestion;
   },
 });

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

@@ -16,6 +16,7 @@ import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
 import { EuiSpacer } from '@elastic/eui';
 import { PartitionVisConfiguration } from '@kbn/visualizations-plugin/common/convert_to_lens';
 import { LayerTypes } from '@kbn/expression-xy-plugin/public';
+import type { FormBasedPersistedState } from '../../datasources/form_based/types';
 import type {
   Visualization,
   OperationMetadata,
@@ -37,17 +38,6 @@ import { suggestions } from './suggestions';
 import { PartitionChartsMeta } from './partition_charts_meta';
 import { DimensionEditor, PieToolbar } from './toolbar';
 import { checkTableForContainsSmallValues } from './render_helpers';
-import type { FormBasedLayer } from '../..';
-
-interface DatatableDatasourceState {
-  [prop: string]: unknown;
-  layers: FormBasedLayer[];
-}
-
-export interface PartitionSuggestion extends Suggestion {
-  datasourceState: DatatableDatasourceState;
-  visualizationState: PieVisualizationState;
-}
 
 function newLayerState(layerId: string): PieLayerState {
   return {
@@ -459,19 +449,20 @@ export const getPieVisualization = ({
     if (!props.suggestions.length) {
       return;
     }
-    const suggestionByShape = (props.suggestions as PartitionSuggestion[]).find(
-      (suggestion) => suggestion.visualizationState.shape === context.configuration.shape
-    );
+    const suggestionByShape = (
+      props.suggestions as Array<Suggestion<PieVisualizationState, FormBasedPersistedState>>
+    ).find((suggestion) => suggestion.visualizationState.shape === context.configuration.shape);
     if (!suggestionByShape) {
       return;
     }
-    return {
+    const suggestion: Suggestion<PieVisualizationState, FormBasedPersistedState> = {
       ...suggestionByShape,
       visualizationState: {
         ...suggestionByShape.visualizationState,
         ...context.configuration,
       },
     };
+    return suggestion;
   },
 
   getErrorMessages(state) {

x-pack/plugins/lens/public/visualizations/xy/types.ts

@@ -36,7 +36,7 @@ import {
 } from '@kbn/chart-icons';
 
 import { DistributiveOmit } from '@elastic/eui';
-import type { VisualizationType, Suggestion } from '../../types';
+import type { VisualizationType } from '../../types';
 import type { ValueLabelConfig } from '../../../common/types';
 
 export const YAxisModes = {
@@ -274,12 +274,3 @@ export const visualizationTypes: VisualizationType[] = [
     sortPriority: 2,
   },
 ];
-
-interface XYStateWithLayers {
-  [prop: string]: unknown;
-  layers: XYLayerConfig[];
-}
-export interface XYSuggestion extends Suggestion {
-  datasourceState: XYStateWithLayers;
-  visualizationState: XYStateWithLayers;
-}

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

@@ -31,13 +31,13 @@ import { getSuggestions } from './xy_suggestions';
 import { XyToolbar } from './xy_config_panel';
 import { DimensionEditor } from './xy_config_panel/dimension_editor';
 import { LayerHeader, LayerHeaderContent } from './xy_config_panel/layer_header';
-import type { Visualization, AccessorConfig, FramePublicAPI } from '../../types';
+import type { Visualization, AccessorConfig, FramePublicAPI, Suggestion } from '../../types';
+import type { FormBasedPersistedState } from '../../datasources/form_based/types';
 import {
   type State,
   type XYLayerConfig,
   type XYDataLayerConfig,
   type SeriesType,
-  type XYSuggestion,
   type PersistedState,
   visualizationTypes,
 } from './types';
@@ -809,24 +809,25 @@ export const getXyVisualization = ({
   },
 
   getSuggestionFromConvertToLensContext({ suggestions, context }) {
-    const allSuggestions = suggestions as XYSuggestion[];
-    return {
+    const allSuggestions = suggestions as Array<Suggestion<XYState, FormBasedPersistedState>>;
+    const suggestion: Suggestion<XYState, FormBasedPersistedState> = {
       ...allSuggestions[0],
       datasourceState: {
         ...allSuggestions[0].datasourceState,
         layers: allSuggestions.reduce(
           (acc, s) => ({
             ...acc,
-            ...s.datasourceState.layers,
+            ...s.datasourceState?.layers,
           }),
           {}
         ),
       },
       visualizationState: {
         ...allSuggestions[0].visualizationState,
-        ...context.configuration,
+        ...(context.configuration as XYState),
       },
     };
+    return suggestion;
   },
 });