[Lens] allow user to disable auto apply (elastic#125158)

x-pack/plugins/lens/public/app_plugin/app.test.tsx

@@ -635,6 +635,18 @@ describe('Lens App', () => {
         );
       });
 
+      it('applies all changes on-save', async () => {
+        const { lensStore } = await save({
+          initialSavedObjectId: undefined,
+          newCopyOnSave: false,
+          newTitle: 'hello there',
+          preloadedState: {
+            applyChangesCounter: 0,
+          },
+        });
+        expect(lensStore.getState().lens.applyChangesCounter).toBe(1);
+      });
+
       it('adds to the recently accessed list on save', async () => {
         const { services } = await save({
           initialSavedObjectId: undefined,

x-pack/plugins/lens/public/app_plugin/app.tsx

@@ -24,6 +24,7 @@ import { Document } from '../persistence/saved_object_store';
 
 import {
   setState,
+  applyChanges,
   useLensSelector,
   useLensDispatch,
   LensAppState,
@@ -276,6 +277,7 @@ export function App({
 
   const runSave = useCallback(
     (saveProps: SaveProps, options: { saveToLibrary: boolean }) => {
+      dispatch(applyChanges());
       return runSaveLensVisualization(
         {
           lastKnownDoc,
@@ -316,6 +318,7 @@ export function App({
       redirectTo,
       lensAppServices,
       dispatchSetState,
+      dispatch,
       setIsSaveModalVisible,
     ]
   );

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

@@ -24,6 +24,26 @@ import {
 
 import { i18n } from '@kbn/i18n';
 
+/**
+ * The dimension container is set up to close when it detects a click outside it.
+ * Use this CSS class to exclude particular elements from this behavior.
+ */
+export const DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS =
+  'lensDontCloseDimensionContainerOnClick';
+
+function fromExcludedClickTarget(event: Event) {
+  for (
+    let node: HTMLElement | null = event.target as HTMLElement;
+    node !== null;
+    node = node!.parentElement
+  ) {
+    if (node.classList!.contains(DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS)) {
+      return true;
+    }
+  }
+  return false;
+}
+
 export function DimensionContainer({
   isOpen,
   groupLabel,
@@ -77,8 +97,8 @@ export function DimensionContainer({
       <EuiFocusTrap disabled={!focusTrapIsEnabled} clickOutsideDisables={true}>
         <EuiWindowEvent event="keydown" handler={closeOnEscape} />
         <EuiOutsideClickDetector
-          onOutsideClick={() => {
-            if (isFullscreen) {
+          onOutsideClick={(event) => {
+            if (isFullscreen || fromExcludedClickTarget(event)) {
               return;
             }
             closeFlyout();

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

@@ -0,0 +1,87 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { DataPanelWrapper } from './data_panel_wrapper';
+import { Datasource, DatasourceDataPanelProps } from '../../types';
+import { DragDropIdentifier } from '../../drag_drop';
+import { UiActionsStart } from 'src/plugins/ui_actions/public';
+import { mockStoreDeps, mountWithProvider } from '../../mocks';
+import { disableAutoApply } from '../../state_management/lens_slice';
+import { selectTriggerApplyChanges } from '../../state_management';
+
+describe('Data Panel Wrapper', () => {
+  describe('Datasource data panel properties', () => {
+    let datasourceDataPanelProps: DatasourceDataPanelProps;
+    let lensStore: Awaited<ReturnType<typeof mountWithProvider>>['lensStore'];
+    beforeEach(async () => {
+      const renderDataPanel = jest.fn();
+
+      const datasourceMap = {
+        activeDatasource: {
+          renderDataPanel,
+        } as unknown as Datasource,
+      };
+
+      const mountResult = await mountWithProvider(
+        <DataPanelWrapper
+          datasourceMap={datasourceMap}
+          showNoDataPopover={() => {}}
+          core={{} as DatasourceDataPanelProps['core']}
+          dropOntoWorkspace={(field: DragDropIdentifier) => {}}
+          hasSuggestionForField={(field: DragDropIdentifier) => true}
+          plugins={{ uiActions: {} as UiActionsStart }}
+        />,
+        {
+          preloadedState: {
+            activeDatasourceId: 'activeDatasource',
+            datasourceStates: {
+              activeDatasource: {
+                isLoading: false,
+                state: {
+                  age: 'old',
+                },
+              },
+            },
+          },
+          storeDeps: mockStoreDeps({ datasourceMap }),
+        }
+      );
+
+      lensStore = mountResult.lensStore;
+
+      datasourceDataPanelProps = renderDataPanel.mock.calls[0][1] as DatasourceDataPanelProps;
+    });
+
+    describe('setState', () => {
+      it('applies state immediately when option true', async () => {
+        lensStore.dispatch(disableAutoApply());
+        selectTriggerApplyChanges(lensStore.getState());
+
+        const newDatasourceState = { age: 'new' };
+        datasourceDataPanelProps.setState(newDatasourceState, { applyImmediately: true });
+
+        expect(lensStore.getState().lens.datasourceStates.activeDatasource.state).toEqual(
+          newDatasourceState
+        );
+        expect(selectTriggerApplyChanges(lensStore.getState())).toBeTruthy();
+      });
+
+      it('does not apply state immediately when option false', async () => {
+        lensStore.dispatch(disableAutoApply());
+        selectTriggerApplyChanges(lensStore.getState());
+
+        const newDatasourceState = { age: 'new' };
+        datasourceDataPanelProps.setState(newDatasourceState, { applyImmediately: false });
+
+        const lensState = lensStore.getState().lens;
+        expect(lensState.datasourceStates.activeDatasource.state).toEqual(newDatasourceState);
+        expect(selectTriggerApplyChanges(lensStore.getState())).toBeFalsy();
+      });
+    });
+  });
+});

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

@@ -20,6 +20,7 @@ import {
   updateDatasourceState,
   useLensSelector,
   setState,
+  applyChanges,
   selectExecutionContext,
   selectActiveDatasourceId,
   selectDatasourceStates,
@@ -45,15 +46,18 @@ export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
     : true;
 
   const dispatchLens = useLensDispatch();
-  const setDatasourceState: StateSetter<unknown> = useMemo(() => {
-    return (updater) => {
+  const setDatasourceState: StateSetter<unknown, { applyImmediately?: boolean }> = useMemo(() => {
+    return (updater: unknown | ((prevState: unknown) => unknown), options) => {
       dispatchLens(
         updateDatasourceState({
           updater,
           datasourceId: activeDatasourceId!,
           clearStagedPreview: true,
         })
       );
+      if (options?.applyImmediately) {
+        dispatchLens(applyChanges());
+      }
     };
   }, [activeDatasourceId, dispatchLens]);
 

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

@@ -79,7 +79,7 @@ export function EditorFrame(props: EditorFrameProps) {
       const suggestion = getSuggestionForField.current!(field);
       if (suggestion) {
         trackUiEvent('drop_onto_workspace');
-        switchToSuggestion(dispatchLens, suggestion, true);
+        switchToSuggestion(dispatchLens, suggestion, { clearStagedPreview: true });
       }
     },
     [getSuggestionForField, dispatchLens]

x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss

@@ -73,7 +73,6 @@ a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */
   }
 
   &.lnsFrameLayout__pageBody-isFullscreen {
-    background: $euiColorEmptyShade;
     flex: 1;
     padding: 0;
   }

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

@@ -27,6 +27,7 @@ import {
   switchVisualization,
   DatasourceStates,
   VisualizationState,
+  applyChanges,
 } from '../../state_management';
 
 /**
@@ -232,7 +233,10 @@ export function switchToSuggestion(
     Suggestion,
     'visualizationId' | 'visualizationState' | 'datasourceState' | 'datasourceId'
   >,
-  clearStagedPreview?: boolean
+  options?: {
+    clearStagedPreview?: boolean;
+    applyImmediately?: boolean;
+  }
 ) {
   dispatchLens(
     switchVisualization({
@@ -242,9 +246,12 @@ export function switchToSuggestion(
         datasourceState: suggestion.datasourceState,
         datasourceId: suggestion.datasourceId!,
       },
-      clearStagedPreview,
+      clearStagedPreview: options?.clearStagedPreview,
     })
   );
+  if (options?.applyImmediately) {
+    dispatchLens(applyChanges());
+  }
 }
 
 export function getTopSuggestionForField(

x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.scss

@@ -88,3 +88,7 @@
   text-align: center;
   flex-grow: 0;
 }
+
+.lnsSuggestionPanel__applyChangesPrompt {
+  height: $lnsSuggestionHeight;
+}