[7.x] [Lens] Transient suggestions (#44234)

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/chart_switch.tsx

@@ -77,10 +77,15 @@ export function ChartSwitch(props: Props) {
   const commitSelection = (selection: VisualizationSelection) => {
     setFlyoutOpen(false);
 
-    switchToSuggestion(props.framePublicAPI, props.dispatch, {
-      ...selection,
-      visualizationState: selection.getVisualizationState(),
-    });
+    switchToSuggestion(
+      props.framePublicAPI,
+      props.dispatch,
+      {
+        ...selection,
+        visualizationState: selection.getVisualizationState(),
+      },
+      'SWITCH_VISUALIZATION'
+    );
   };
 
   function getSelection(

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/config_panel_wrapper.tsx

@@ -34,6 +34,7 @@ export const ConfigPanelWrapper = memo(function ConfigPanelWrapper(props: Config
       props.dispatch({
         type: 'UPDATE_VISUALIZATION_STATE',
         newState,
+        clearStagedPreview: false,
       });
     },
     [props.dispatch]

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/data_panel_wrapper.tsx

@@ -32,6 +32,7 @@ export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
         type: 'UPDATE_DATASOURCE_STATE',
         updater,
         datasourceId: props.activeDatasource!,
+        clearStagedPreview: true,
       });
     },
     [props.dispatch, props.activeDatasource]

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.test.tsx

@@ -1153,7 +1153,14 @@ describe('editor_frame', () => {
           .find('[data-test-subj="lnsSuggestion"]')
           .find(EuiPanel)
           .map(el => el.parents(EuiToolTip).prop('content'))
-      ).toEqual(['Suggestion1', 'Suggestion2', 'Suggestion3', 'Suggestion4', 'Suggestion5']);
+      ).toEqual([
+        'Current',
+        'Suggestion1',
+        'Suggestion2',
+        'Suggestion3',
+        'Suggestion4',
+        'Suggestion5',
+      ]);
     });
 
     it('should switch to suggested visualization', async () => {
@@ -1196,7 +1203,7 @@ describe('editor_frame', () => {
       act(() => {
         instance
           .find('[data-test-subj="lnsSuggestion"]')
-          .first()
+          .at(2)
           .simulate('click');
       });
 

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.tsx

@@ -84,6 +84,7 @@ export function EditorFrame(props: EditorFrameProps) {
               type: 'UPDATE_DATASOURCE_STATE',
               datasourceId: id,
               updater: newState,
+              clearStagedPreview: true,
             });
           },
           layer
@@ -265,6 +266,7 @@ export function EditorFrame(props: EditorFrameProps) {
             visualizationMap={props.visualizationMap}
             dispatch={dispatch}
             ExpressionRenderer={props.ExpressionRenderer}
+            stagedPreview={state.stagedPreview}
           />
         )
       }

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/state_management.ts

@@ -8,14 +8,18 @@ import { i18n } from '@kbn/i18n';
 import { EditorFrameProps } from '../editor_frame';
 import { Document } from '../../persistence/saved_object_store';
 
-export interface EditorFrameState {
-  persistedId?: string;
-  title: string;
+export interface PreviewState {
   visualization: {
     activeId: string | null;
     state: unknown;
   };
   datasourceStates: Record<string, { state: unknown; isLoading: boolean }>;
+}
+
+export interface EditorFrameState extends PreviewState {
+  persistedId?: string;
+  title: string;
+  stagedPreview?: PreviewState;
   activeDatasourceId: string | null;
 }
 
@@ -32,10 +36,12 @@ export type Action =
       type: 'UPDATE_DATASOURCE_STATE';
       updater: unknown | ((prevState: unknown) => unknown);
       datasourceId: string;
+      clearStagedPreview?: boolean;
     }
   | {
       type: 'UPDATE_VISUALIZATION_STATE';
       newState: unknown;
+      clearStagedPreview?: boolean;
     }
   | {
       type: 'UPDATE_LAYER';
@@ -59,6 +65,19 @@ export type Action =
       datasourceState: unknown;
       datasourceId: string;
     }
+  | {
+      type: 'SELECT_SUGGESTION';
+      newVisualizationId: string;
+      initialState: unknown;
+      datasourceState: unknown;
+      datasourceId: string;
+    }
+  | {
+      type: 'ROLLBACK_SUGGESTION';
+    }
+  | {
+      type: 'SUBMIT_SUGGESTION';
+    }
   | {
       type: 'SWITCH_DATASOURCE';
       newDatasourceId: string;
@@ -176,6 +195,41 @@ export const reducer = (state: EditorFrameState, action: Action): EditorFrameSta
           activeId: action.newVisualizationId,
           state: action.initialState,
         },
+        stagedPreview: undefined,
+      };
+    case 'SELECT_SUGGESTION':
+      return {
+        ...state,
+        datasourceStates:
+          'datasourceId' in action && action.datasourceId
+            ? {
+                ...state.datasourceStates,
+                [action.datasourceId]: {
+                  ...state.datasourceStates[action.datasourceId],
+                  state: action.datasourceState,
+                },
+              }
+            : state.datasourceStates,
+        visualization: {
+          ...state.visualization,
+          activeId: action.newVisualizationId,
+          state: action.initialState,
+        },
+        stagedPreview: state.stagedPreview || {
+          datasourceStates: state.datasourceStates,
+          visualization: state.visualization,
+        },
+      };
+    case 'ROLLBACK_SUGGESTION':
+      return {
+        ...state,
+        ...(state.stagedPreview || {}),
+        stagedPreview: undefined,
+      };
+    case 'SUBMIT_SUGGESTION':
+      return {
+        ...state,
+        stagedPreview: undefined,
       };
     case 'UPDATE_DATASOURCE_STATE':
       return {
@@ -190,6 +244,7 @@ export const reducer = (state: EditorFrameState, action: Action): EditorFrameSta
             isLoading: false,
           },
         },
+        stagedPreview: action.clearStagedPreview ? undefined : state.stagedPreview,
       };
     case 'UPDATE_VISUALIZATION_STATE':
       if (!state.visualization.activeId) {
@@ -201,6 +256,7 @@ export const reducer = (state: EditorFrameState, action: Action): EditorFrameSta
           ...state.visualization,
           state: action.newState,
         },
+        stagedPreview: action.clearStagedPreview ? undefined : state.stagedPreview,
       };
     default:
       return state;

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_helpers.ts

@@ -144,14 +144,15 @@ export function switchToSuggestion(
   suggestion: Pick<
     Suggestion,
     'visualizationId' | 'visualizationState' | 'datasourceState' | 'datasourceId' | 'keptLayerIds'
-  >
+  >,
+  type: 'SWITCH_VISUALIZATION' | 'SELECT_SUGGESTION' = 'SELECT_SUGGESTION'
 ) {
   const action: Action = {
-    type: 'SWITCH_VISUALIZATION',
+    type,
     newVisualizationId: suggestion.visualizationId,
     initialState: suggestion.visualizationState,
     datasourceState: suggestion.datasourceState,
-    datasourceId: suggestion.datasourceId,
+    datasourceId: suggestion.datasourceId!,
   };
   dispatch(action);
   const layerIds = Object.keys(frame.datasourceLayers).filter(id => {

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.scss

@@ -10,25 +10,20 @@
 }
 
 .lnsSuggestionsPanel__title {
-  margin: $euiSizeS 0 $euiSizeXS;
+  margin-left: $euiSizeXS / 2;
 }
 
 .lnsSuggestionsPanel__suggestions {
   @include euiScrollBar;
   @include lnsOverflowShadowHorizontal;
   padding-top: $euiSizeXS;
-  overflow-x: auto;
+  overflow-x: scroll;
   overflow-y: hidden;
   display: flex;
 
   // Padding / negative margins to make room for overflow shadow
   padding-left: $euiSizeXS;
   margin-left: -$euiSizeXS;
-
-  // Add margin to the next of the same type
-  > * + * {
-    margin-left: $euiSizeS;
-  }
 }
 
 // These sizes also match canvas' page thumbnails for consistency
@@ -39,8 +34,13 @@ $lnsSuggestionWidth: 150px;
   flex: 0 0 auto;
   width: $lnsSuggestionWidth !important;
   height: $lnsSuggestionHeight;
-  // Allows the scrollbar to stay flush to window
-  margin-bottom: $euiSize;
+  margin-right: $euiSizeS;
+  margin-left: $euiSizeXS / 2;
+  margin-bottom: $euiSizeXS / 2;
+}
+
+.lnsSuggestionPanel__button-isSelected {
+  @include euiFocusRing;
 }
 
 .lnsSidebar__suggestionIcon {
@@ -58,3 +58,15 @@ $lnsSuggestionWidth: 150px;
   pointer-events: none;
   margin: 0 $euiSizeS;
 }
+
+.lnsSuggestionChartWrapper--withLabel {
+  height: $lnsSuggestionHeight - $euiSizeL;
+}
+
+.lnsSuggestionPanel__buttonLabel {
+  @include euiFontSizeXS;
+  display: block;
+  font-weight: $euiFontWeightBold;
+  text-align: center;
+  flex-grow: 0;
+}