[Lens] Improves error messages when in Dashboard (#90668)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx

@@ -459,10 +459,10 @@ describe('Datatable Visualization', () => {
  label: 'label',
  });
 
- const error = datatableVisualization.getErrorMessages(
- { layerId: 'a', columns: [{ columnId: 'b' }, { columnId: 'c' }] },
- frame
- );
+ const error = datatableVisualization.getErrorMessages({
+ layerId: 'a',
+ columns: [{ columnId: 'b' }, { columnId: 'c' }],
+ });
 
  expect(error).toBeUndefined();
  });
@@ -478,10 +478,10 @@ describe('Datatable Visualization', () => {
  label: 'label',
  });
 
- const error = datatableVisualization.getErrorMessages(
- { layerId: 'a', columns: [{ columnId: 'b' }, { columnId: 'c' }] },
- frame
- );
+ const error = datatableVisualization.getErrorMessages({
+ layerId: 'a',
+ columns: [{ columnId: 'b' }, { columnId: 'c' }],
+ });
 
  expect(error).toBeUndefined();
  });

x-pack/plugins/lens/public/datatable_visualization/visualization.tsx

@@ -276,7 +276,7 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
  };
  },
 
- getErrorMessages(state, frame) {
+ getErrorMessages(state) {
  return undefined;
  },
 

x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts

@@ -18,6 +18,9 @@ import {
 import { buildExpression } from './expression_helpers';
 import { Document } from '../../persistence/saved_object_store';
 import { VisualizeFieldContext } from '../../../../../../src/plugins/ui_actions/public';
+import { getActiveDatasourceIdFromDoc } from './state_management';
+import { ErrorMessage } from '../types';
+import { getMissingCurrentDatasource, getMissingVisualizationTypeError } from '../error_helper';
 
 export async function initializeDatasources(
  datasourceMap: Record<string, Datasource>,
@@ -72,15 +75,20 @@ export async function persistedStateToExpression(
  datasources: Record<string, Datasource>,
  visualizations: Record<string, Visualization>,
  doc: Document
-): Promise<Ast | null> {
+): Promise<{ ast: Ast | null; errors: ErrorMessage[] | undefined }> {
  const {
  state: { visualization: visualizationState, datasourceStates: persistedDatasourceStates },
  visualizationType,
  references,
  title,
  description,
  } = doc;
- if (!visualizationType) return null;
+ if (!visualizationType) {
+ return {
+ ast: null,
+ errors: [{ shortMessage: '', longMessage: getMissingVisualizationTypeError() }],
+ };
+ }
  const visualization = visualizations[visualizationType!];
  const datasourceStates = await initializeDatasources(
  datasources,
@@ -97,29 +105,42 @@ export async function persistedStateToExpression(
 
  const datasourceLayers = createDatasourceLayers(datasources, datasourceStates);
 
- return buildExpression({
- title,
- description,
+ const datasourceId = getActiveDatasourceIdFromDoc(doc);
+ if (datasourceId == null) {
+ return {
+ ast: null,
+ errors: [{ shortMessage: '', longMessage: getMissingCurrentDatasource() }],
+ };
+ }
+ const validationResult = validateDatasourceAndVisualization(
+ datasources[datasourceId],
+ datasourceStates[datasourceId].state,
  visualization,
  visualizationState,
- datasourceMap: datasources,
- datasourceStates,
- datasourceLayers,
- });
+ { datasourceLayers }
+ );
+
+ return {
+ ast: buildExpression({
+ title,
+ description,
+ visualization,
+ visualizationState,
+ datasourceMap: datasources,
+ datasourceStates,
+ datasourceLayers,
+ }),
+ errors: validationResult,
+ };
 }
 
 export const validateDatasourceAndVisualization = (
  currentDataSource: Datasource | null,
  currentDatasourceState: unknown | null,
  currentVisualization: Visualization | null,
  currentVisualizationState: unknown | undefined,
- frameAPI: FramePublicAPI
-):
- | Array<{
- shortMessage: string;
- longMessage: string;
- }>
- | undefined => {
+ frameAPI: Pick<FramePublicAPI, 'datasourceLayers'>
+): ErrorMessage[] | undefined => {
  const layersGroups = currentVisualizationState
  ? currentVisualization
  ?.getLayerIds(currentVisualizationState)
@@ -141,7 +162,7 @@ export const validateDatasourceAndVisualization = (
  : undefined;
 
  const visualizationValidationErrors = currentVisualizationState
- ? currentVisualization?.getErrorMessages(currentVisualizationState, frameAPI)
+ ? currentVisualization?.getErrorMessages(currentVisualizationState)
  : undefined;
 
  if (datasourceValidationErrors?.length || visualizationValidationErrors?.length) {

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx

@@ -155,10 +155,7 @@ export const WorkspacePanel = React.memo(function WorkspacePanel({
  datasourceLayers: framePublicAPI.datasourceLayers,
  });
  } catch (e) {
- const buildMessages = activeVisualization?.getErrorMessages(
- visualizationState,
- framePublicAPI
- );
+ const buildMessages = activeVisualization?.getErrorMessages(visualizationState);
  const defaultMessage = {
  shortMessage: i18n.translate('xpack.lens.editorFrame.buildExpressionError', {
  defaultMessage: 'An unexpected error occurred while preparing the chart',