[Lens] Extend Datasource props validation with VisualizationGroups (#…

…82607)

* ✨ First pass with visualization validation + error messages

* 🔥 Remove indexpattern error handling for now

* 🏷️ Fix type issues

* ✅ Add getErrorMessage test for data table

* ✅ Add tests for pie and metric error messages

* 🌐 Fix i18n checks issues

* 🐛 Fix last issue

* ✅ Add more tests for the XY visualization validation code

* 👌 Included all feedback from first review

* ✏️ Off by one message

* 🌐 Fix i18n duplicate id

* 🌐 Fix last i18n issue

* 🐛 Fixed a hook reflow issue

* ♻️+✅ Reworked validation flow + tests

* 🏷️ Fix type issue

* 🐛 Improved XY corner cases validation logic

* 🐛 Fix empty datatable scenario

* ✨ + ✅ Improved error messages for invalid datasources + tests

* 🌐 Add missing i18n translation

* 🏷️ Fix type issues

* 🌐 Fix i18n issues

* ✨ Filter out suggestions which fail to build

* 🚚 Migrate datatable validation logic to the building phase, handling it as building state

* 🏷️ Fix type issue

* ✏️ Add comment for future enhancements

* ✏️ Updated comment

* :world_with_meridians: Refactor axis labels

* 🌐 Reworked few validation messages

* 🐛 Fix break down validation + percentage charts

* ✅ Align tests with new validation logic

* ♻️ Fix suggestion panel validation to match main panel

* 🌐 Fix i18n issues

* 🔧 Fix some refs for validation checks in suggestions

* 🐛 Fix missing key prop in multiple errors scenario

* 🐛 Fix swtich issue from XY to partition

* 🌐 Fix i18n messages and aligned tests

* 🐛 Fix suggestions switching bug

* :refactor: Add more validation + refactored validation logic in a single place

* ✏️ Add note about lint hooks disable rule

* 🚨 Fix linting issue

* 🏗️ Add infra API for datasource advanced validation

* ✅ Align tests with new API

* ✅ Fix type issues in tests

* 👌 Early exists added

* ✨ Add layers groups to the API

* ✅ Fix some broken test after the validation change

* 👌 Move to disctionary shape

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

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx

@@ -451,6 +451,7 @@ export function LayerPanel(
                     columnId: activeId,
                     filterOperations: activeGroup.filterOperations,
                     suggestedPriority: activeGroup?.suggestedPriority,
+                    dimensionGroups: groups,
                     setState: (newState: unknown) => {
                       props.updateAll(
                         datasourceId,

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

@@ -601,7 +601,8 @@ describe('editor_frame', () => {
         setDatasourceState(updatedState);
       });
 
-      expect(mockVisualization.getConfiguration).toHaveBeenCalledTimes(2);
+      // validation requires to calls this getConfiguration API
+      expect(mockVisualization.getConfiguration).toHaveBeenCalledTimes(6);
       expect(mockVisualization.getConfiguration).toHaveBeenLastCalledWith(
         expect.objectContaining({
           state: updatedState,
@@ -680,7 +681,8 @@ describe('editor_frame', () => {
         setDatasourceState({});
       });
 
-      expect(mockVisualization.getConfiguration).toHaveBeenCalledTimes(2);
+      // validation requires to calls this getConfiguration API
+      expect(mockVisualization.getConfiguration).toHaveBeenCalledTimes(6);
       expect(mockVisualization.getConfiguration).toHaveBeenLastCalledWith(
         expect.objectContaining({
           frame: expect.objectContaining({
@@ -1193,7 +1195,8 @@ describe('editor_frame', () => {
         instance.find('[data-test-subj="lnsSuggestion"]').at(2).simulate('click');
       });
 
-      expect(mockVisualization.getConfiguration).toHaveBeenCalledTimes(1);
+      // validation requires to calls this getConfiguration API
+      expect(mockVisualization.getConfiguration).toHaveBeenCalledTimes(4);
       expect(mockVisualization.getConfiguration).toHaveBeenCalledWith(
         expect.objectContaining({
           state: suggestionVisState,

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

@@ -6,7 +6,13 @@
 
 import { SavedObjectReference } from 'kibana/public';
 import { Ast } from '@kbn/interpreter/common';
-import { Datasource, DatasourcePublicAPI, FramePublicAPI, Visualization } from '../../types';
+import {
+  Datasource,
+  DatasourcePublicAPI,
+  FramePublicAPI,
+  Visualization,
+  VisualizationDimensionGroupConfig,
+} from '../../types';
 import { buildExpression } from './expression_helpers';
 import { Document } from '../../persistence/saved_object_store';
 import { VisualizeFieldContext } from '../../../../../../src/plugins/ui_actions/public';
@@ -104,8 +110,24 @@ export const validateDatasourceAndVisualization = (
       longMessage: string;
     }>
   | undefined => {
+  const layersGroups =
+    currentVisualizationState &&
+    currentVisualization
+      ?.getLayerIds(currentVisualizationState)
+      .reduce<Record<string, VisualizationDimensionGroupConfig[]>>((memo, layerId) => {
+        const groups = currentVisualization?.getConfiguration({
+          frame: frameAPI,
+          layerId,
+          state: currentVisualizationState,
+        }).groups;
+        if (groups) {
+          memo[layerId] = groups;
+        }
+        return memo;
+      }, {});
+
   const datasourceValidationErrors = currentDatasourceState
-    ? currentDataSource?.getErrorMessages(currentDatasourceState)
+    ? currentDataSource?.getErrorMessages(currentDatasourceState, layersGroups)
     : undefined;
 
   const visualizationValidationErrors = currentVisualizationState

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx

@@ -174,6 +174,7 @@ describe('IndexPatternDimensionEditorPanel', () => {
         } as unknown) as DataPublicPluginStart['fieldFormats'],
       } as unknown) as DataPublicPluginStart,
       core: {} as CoreSetup,
+      dimensionGroups: [],
     };
 
     jest.clearAllMocks();

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/droppable.test.ts

@@ -146,6 +146,7 @@ describe('IndexPatternDimensionEditorPanel', () => {
         } as unknown) as DataPublicPluginStart['fieldFormats'],
       } as unknown) as DataPublicPluginStart,
       core: {} as CoreSetup,
+      dimensionGroups: [],
     };
 
     jest.clearAllMocks();

x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx

@@ -343,7 +343,7 @@ export function getIndexPatternDatasource({
     getDatasourceSuggestionsFromCurrentState,
     getDatasourceSuggestionsForVisualizeField,
 
-    getErrorMessages(state) {
+    getErrorMessages(state, layersGroups) {
       if (!state) {
         return;
       }

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

@@ -184,7 +184,10 @@ export interface Datasource<T = unknown, P = unknown> {
   ) => Array<DatasourceSuggestion<T>>;
 
   getPublicAPI: (props: PublicAPIProps<T>) => DatasourcePublicAPI;
-  getErrorMessages: (state: T) => Array<{ shortMessage: string; longMessage: string }> | undefined;
+  getErrorMessages: (
+    state: T,
+    layersGroups?: Record<string, VisualizationDimensionGroupConfig[]>
+  ) => Array<{ shortMessage: string; longMessage: string }> | undefined;
   /**
    * uniqueLabels of dimensions exposed for aria-labels of dragged dimensions
    */
@@ -242,6 +245,7 @@ export type DatasourceDimensionEditorProps<T = unknown> = DatasourceDimensionPro
   setState: StateSetter<T>;
   core: Pick<CoreSetup, 'http' | 'notifications' | 'uiSettings'>;
   dateRange: DateRange;
+  dimensionGroups: VisualizationDimensionGroupConfig[];
 };
 
 export type DatasourceDimensionTriggerProps<T> = DatasourceDimensionProps<T> & {