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

Co-authored-by: Kibana Machine <[email protected]>

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',