[ES|QL] Removes the unnecessary index pattern references from the Len…

…s charts (#190296)

## Summary

ES|QL charts do not use permanent dataviews. They are just using adHoc
dataviews for technical reasons and only (as the entire Lens
architecture is based on them). By calculating (and exporting to the
state) the references is creating some bad UX behavior as the dashboards
expect the dataviews to exist.

This PR is fixing this by removing the unnecessary references from the
Lens charts.

x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.test.tsx

@@ -227,6 +227,32 @@ describe('LensEditConfigurationFlyout', () => {
     expect(saveByRefSpy).toHaveBeenCalled();
   });
 
+  it('should call the onApplyCb callback if apply button is clicked', async () => {
+    const onApplyCbSpy = jest.fn();
+
+    renderConfigFlyout(
+      {
+        closeFlyout: jest.fn(),
+        onApplyCb: onApplyCbSpy,
+      },
+      { esql: 'from index1 | limit 10' }
+    );
+    userEvent.click(screen.getByTestId('applyFlyoutButton'));
+    expect(onApplyCbSpy).toHaveBeenCalledWith({
+      title: 'test',
+      visualizationType: 'testVis',
+      state: {
+        datasourceStates: { testDatasource: 'state' },
+        visualization: {},
+        filters: [],
+        query: { esql: 'from index1 | limit 10' },
+      },
+      filters: [],
+      query: { esql: 'from index1 | limit 10' },
+      references: [],
+    });
+  });
+
   it('should not display the editor if canEditTextBasedQuery prop is false', async () => {
     renderConfigFlyout({
       canEditTextBasedQuery: false,

x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx

@@ -239,25 +239,33 @@ export function LensEditConfigurationFlyout({
     onCancelCb,
   ]);
 
+  const textBasedMode = useMemo(
+    () => (isOfAggregateQueryType(query) ? getAggregateQueryMode(query) : undefined),
+    [query]
+  );
+
   const onApply = useCallback(() => {
     const dsStates = Object.fromEntries(
       Object.entries(datasourceStates).map(([id, ds]) => {
         const dsState = ds.state;
         return [id, dsState];
       })
     );
-    const references = extractReferencesFromState({
-      activeDatasources: Object.keys(datasourceStates).reduce(
-        (acc, id) => ({
-          ...acc,
-          [id]: datasourceMap[id],
-        }),
-        {}
-      ),
-      datasourceStates,
-      visualizationState: visualization.state,
-      activeVisualization,
-    });
+    // as ES|QL queries are using adHoc dataviews, we don't want to pass references
+    const references = !textBasedMode
+      ? extractReferencesFromState({
+          activeDatasources: Object.keys(datasourceStates).reduce(
+            (acc, id) => ({
+              ...acc,
+              [id]: datasourceMap[id],
+            }),
+            {}
+          ),
+          datasourceStates,
+          visualizationState: visualization.state,
+          activeVisualization,
+        })
+      : [];
     const attrs = {
       ...attributes,
       state: {
@@ -289,14 +297,15 @@ export function LensEditConfigurationFlyout({
     onApplyCb?.(attrs as TypedLensByValueInput['attributes']);
     closeFlyout?.();
   }, [
-    visualization.activeId,
-    savedObjectId,
-    closeFlyout,
-    onApplyCb,
     datasourceStates,
+    textBasedMode,
     visualization.state,
+    visualization.activeId,
     activeVisualization,
     attributes,
+    savedObjectId,
+    onApplyCb,
+    closeFlyout,
     datasourceMap,
     saveByRef,
     updateByRefInput,
@@ -385,8 +394,6 @@ export function LensEditConfigurationFlyout({
     getUserMessages,
   ]);
 
-  const textBasedMode = isOfAggregateQueryType(query) ? getAggregateQueryMode(query) : undefined;
-
   if (isLoading) return null;
   // Example is the Discover editing where we dont want to render the text based editor on the panel, neither the suggestions (for now)
   if (!canEditTextBasedQuery && hidesSuggestions) {

x-pack/plugins/lens/public/embeddable/embeddable.tsx

@@ -792,22 +792,28 @@ export class Embeddable
         ...viz.state.datasourceStates,
         [activeDatasourceId]: datasourceState,
       };
-      const references = extractReferencesFromState({
-        activeDatasources: Object.keys(datasourceStates).reduce(
-          (acc, datasourceId) => ({
-            ...acc,
-            [datasourceId]: this.deps.datasourceMap[datasourceId],
-          }),
-          {}
-        ),
-        datasourceStates: Object.fromEntries(
-          Object.entries(datasourceStates).map(([id, state]) => [id, { isLoading: false, state }])
-        ),
-        visualizationState,
-        activeVisualization: this.activeVisualizationId
-          ? this.deps.visualizationMap[visualizationType ?? this.activeVisualizationId]
-          : undefined,
-      });
+      const references =
+        activeDatasourceId === 'formBased'
+          ? extractReferencesFromState({
+              activeDatasources: Object.keys(datasourceStates).reduce(
+                (acc, datasourceId) => ({
+                  ...acc,
+                  [datasourceId]: this.deps.datasourceMap[datasourceId],
+                }),
+                {}
+              ),
+              datasourceStates: Object.fromEntries(
+                Object.entries(datasourceStates).map(([id, state]) => [
+                  id,
+                  { isLoading: false, state },
+                ])
+              ),
+              visualizationState,
+              activeVisualization: this.activeVisualizationId
+                ? this.deps.visualizationMap[visualizationType ?? this.activeVisualizationId]
+                : undefined,
+            })
+          : [];
       const attrs = {
         ...viz,
         state: {