[Dashboard] Add tour to Dashboard

src/plugins/controls/public/control_group/editor/create_control.tsx

@@ -31,7 +31,8 @@ export interface CreateControlButtonProps {
   setLastUsedDataViewId?: (newDataViewId: string) => void;
   getRelevantDataViewId?: () => string | undefined;
   buttonType: CreateControlButtonTypes;
-  closePopover?: () => void;
+  onClick?: () => void;
+  onFlyoutClose?: () => void;
 }
 
 interface CreateControlResult {
@@ -44,7 +45,8 @@ export const CreateControlButton = ({
   defaultControlWidth,
   defaultControlGrow,
   addNewEmbeddable,
-  closePopover,
+  onClick,
+  onFlyoutClose,
   getRelevantDataViewId,
   setLastUsedDataViewId,
   updateDefaultWidth,
@@ -76,6 +78,7 @@ export const CreateControlButton = ({
           if (confirmed) {
             reject();
             ref.close();
+            onFlyoutClose?.();
           }
         });
       };
@@ -93,6 +96,7 @@ export const CreateControlButton = ({
         }
         resolve({ type, controlInput: inputToReturn });
         ref.close();
+        onFlyoutClose?.();
       };
 
       const flyoutInstance = openFlyout(
@@ -140,9 +144,7 @@ export const CreateControlButton = ({
     key: 'addControl',
     onClick: () => {
       createNewControl();
-      if (closePopover) {
-        closePopover();
-      }
+      onClick?.();
     },
     'data-test-subj': 'controls-create-button',
     'aria-label': ControlGroupStrings.management.getManageButtonTitle(),

src/plugins/controls/public/control_group/editor/edit_control_group.tsx

@@ -19,12 +19,14 @@ import { setFlyoutRef } from '../embeddable/control_group_container';
 
 export interface EditControlGroupButtonProps {
   controlGroupContainer: ControlGroupContainer;
-  closePopover: () => void;
+  onClick?: () => void;
+  onFlyoutClose?: () => void;
 }
 
 export const EditControlGroup = ({
   controlGroupContainer,
-  closePopover,
+  onClick,
+  onFlyoutClose,
 }: EditControlGroupButtonProps) => {
   const { overlays } = pluginServices.getServices();
   const { openConfirm, openFlyout } = overlays;
@@ -44,6 +46,7 @@ export const EditControlGroup = ({
             controlGroupContainer.removeEmbeddable(panelId)
           );
         ref.close();
+        onFlyoutClose?.();
       });
     };
 
@@ -55,7 +58,10 @@ export const EditControlGroup = ({
             updateInput={(changes) => controlGroupContainer.updateInput(changes)}
             controlCount={Object.keys(controlGroupContainer.getInput().panels ?? {}).length}
             onDeleteAll={() => onDeleteAll(flyoutInstance)}
-            onClose={() => flyoutInstance.close()}
+            onClose={() => {
+              flyoutInstance.close();
+              onFlyoutClose?.();
+            }}
           />
         </PresentationUtilProvider>
       ),
@@ -64,6 +70,7 @@ export const EditControlGroup = ({
         onClose: () => {
           flyoutInstance.close();
           setFlyoutRef(undefined);
+          onFlyoutClose?.();
         },
       }
     );
@@ -74,7 +81,7 @@ export const EditControlGroup = ({
     key: 'manageControls',
     onClick: () => {
       editControlGroup();
-      closePopover();
+      onClick?.();
     },
     icon: 'gear',
     'data-test-subj': 'controls-settings-button',

src/plugins/controls/public/control_group/embeddable/control_group_container.tsx

@@ -110,13 +110,14 @@ export class ControlGroupContainer extends Container<
   /**
    * Returns a button that allows controls to be created externally using the embeddable
    * @param buttonType Controls the button styling
-   * @param closePopover Closes the create control menu popover when flyout opens - only necessary if `buttonType === 'toolbar'`
+   * @param onClick Optional parameter that controls what secondary actions should happen when the "create control" button is clicked
    * @return If `buttonType == 'toolbar'`, returns `EuiContextMenuPanel` with input control types as items.
    *         Otherwise, if `buttonType == 'callout'` returns `EuiButton` with popover containing input control types.
    */
   public getCreateControlButton = (
     buttonType: CreateControlButtonTypes,
-    closePopover?: () => void
+    onClick?: () => void,
+    onClose?: () => void
   ) => {
     return (
       <CreateControlButton
@@ -128,22 +129,31 @@ export class ControlGroupContainer extends Container<
           this.updateInput({ defaultControlGrow })
         }
         addNewEmbeddable={(type, input) => this.addNewEmbeddable(type, input)}
-        closePopover={closePopover}
+        onClick={onClick}
+        onFlyoutClose={onClose}
         getRelevantDataViewId={() => this.getMostRelevantDataViewId()}
         setLastUsedDataViewId={(newId) => this.setLastUsedDataViewId(newId)}
       />
     );
   };
 
-  private getEditControlGroupButton = (closePopover: () => void) => {
-    return <EditControlGroup controlGroupContainer={this} closePopover={closePopover} />;
+  private getEditControlGroupButton = (onClick: () => void, onClose?: () => void) => {
+    return (
+      <EditControlGroup controlGroupContainer={this} onClick={onClick} onFlyoutClose={onClose} />
+    );
   };
 
   /**
    * Returns the toolbar button that is used for creating controls and managing control settings
    * @return `SolutionToolbarPopover` button for input controls
    */
-  public getToolbarButtons = () => {
+  public getToolbarButtons = ({
+    onClick,
+    onClose,
+  }: {
+    onClick?: () => void;
+    onClose?: () => void;
+  }) => {
     return (
       <SolutionToolbarPopover
         ownFocus
@@ -156,8 +166,21 @@ export class ControlGroupContainer extends Container<
         {({ closePopover }: { closePopover: () => void }) => (
           <EuiContextMenuPanel
             items={[
-              this.getCreateControlButton('toolbar', closePopover),
-              this.getEditControlGroupButton(closePopover),
+              this.getCreateControlButton(
+                'toolbar',
+                () => {
+                  closePopover();
+                  onClick?.();
+                },
+                () => onClose?.()
+              ),
+              this.getEditControlGroupButton(
+                () => {
+                  closePopover();
+                  onClick?.();
+                },
+                () => onClose?.()
+              ),
             ]}
           />
         )}

src/plugins/dashboard/public/application/dashboard_app.tsx

@@ -24,6 +24,7 @@ import { DashboardTopNav, isCompleteDashboardAppState } from './top_nav/dashboar
 import { DashboardAppServices, DashboardEmbedSettings, DashboardRedirect } from '../types';
 import { createKbnUrlStateStorage, withNotifyOnErrors } from '../services/kibana_utils';
 import { DashboardAppNoDataPage } from './dashboard_app_no_data';
+import { DashboardEditTourProvider } from './tour';
 export interface DashboardAppProps {
   history: History;
   savedDashboardId?: string;
@@ -120,10 +121,14 @@ export function DashboardApp({
     };
   }, [data.search.session]);
 
-  const printMode = useMemo(
-    () => dashboardAppState.getLatestDashboardState?.().viewMode === ViewMode.PRINT,
-    [dashboardAppState]
-  );
+  const [printMode, editMode, viewMode] = useMemo(() => {
+    const currentViewMode = dashboardAppState.getLatestDashboardState?.().viewMode;
+    return [
+      currentViewMode === ViewMode.PRINT,
+      currentViewMode === ViewMode.EDIT,
+      currentViewMode === ViewMode.VIEW,
+    ];
+  }, [dashboardAppState]);
 
   useEffect(() => {
     if (!embedSettings) chrome.setIsVisible(!printMode);
@@ -135,7 +140,7 @@ export function DashboardApp({
         <DashboardAppNoDataPage onDataViewCreated={() => setShowNoDataPage(false)} />
       )}
       {!showNoDataPage && isCompleteDashboardAppState(dashboardAppState) && (
-        <>
+        <DashboardEditTourProvider editMode={editMode} viewMode={viewMode}>
           <DashboardTopNav
             printMode={printMode}
             redirectTo={redirectTo}
@@ -163,7 +168,7 @@ export function DashboardApp({
           >
             <EmbeddableRenderer embeddable={dashboardAppState.dashboardContainer} />
           </div>
-        </>
+        </DashboardEditTourProvider>
       )}
     </>
   );

src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx

@@ -54,6 +54,7 @@ import {
   useDashboardDispatch,
   useDashboardSelector,
 } from '../state';
+import { useDashboardEditTourContext } from '../tour';
 
 export interface DashboardTopNavState {
   chromeIsVisible: boolean;
@@ -129,6 +130,9 @@ export function DashboardTopNav({
   const IS_DARK_THEME = uiSettings.get('theme:darkMode');
   const isLabsEnabled = uiSettings.get(UI_SETTINGS.ENABLE_LABS_UI);
 
+  const { currentEditTourStep, getNextEditTourStep, onViewModeChange, setTourVisibility } =
+    useDashboardEditTourContext();
+
   const trackUiMetric = usageCollection?.reportUiCounter.bind(
     usageCollection,
     DashboardConstants.DASHBOARD_ID
@@ -153,6 +157,7 @@ export function DashboardTopNav({
 
   const addFromLibrary = useCallback(() => {
     if (!isErrorEmbeddable(dashboardAppState.dashboardContainer)) {
+      setTourVisibility(false);
       setState((s) => ({
         ...s,
         addPanelOverlay: openAddPanelFlyout({
@@ -161,6 +166,9 @@ export function DashboardTopNav({
           getFactory: embeddable.getEmbeddableFactory,
           notifications: core.notifications,
           overlays: core.overlays,
+          showTour: () => {
+            setTourVisibility(true);
+          },
           SavedObjectFinder: getSavedObjectFinder(core.savedObjects, uiSettings),
           reportUiCounter: usageCollection?.reportUiCounter,
           theme: core.theme,
@@ -177,6 +185,7 @@ export function DashboardTopNav({
     core.theme,
     uiSettings,
     usageCollection,
+    setTourVisibility,
   ]);
 
   const createNewVisType = useCallback(
@@ -208,8 +217,18 @@ export function DashboardTopNav({
           searchSessionId: data.search.session.getSessionId(),
         },
       });
+
+      if (currentEditTourStep === 1) {
+        getNextEditTourStep();
+      }
     },
-    [stateTransferService, data.search.session, trackUiMetric]
+    [
+      stateTransferService,
+      data.search.session,
+      trackUiMetric,
+      currentEditTourStep,
+      getNextEditTourStep,
+    ]
   );
 
   const closeAllFlyouts = useCallback(() => {
@@ -221,7 +240,8 @@ export function DashboardTopNav({
   }, [state.addPanelOverlay, dashboardAppState.dashboardContainer.controlGroup]);
 
   const onChangeViewMode = useCallback(
-    (newMode: ViewMode) => {
+    async (newMode: ViewMode) => {
+      onViewModeChange(newMode);
       closeAllFlyouts();
       const willLoseChanges = newMode === ViewMode.VIEW && dashboardAppState.hasUnsavedChanges;
 
@@ -234,7 +254,13 @@ export function DashboardTopNav({
         dashboardAppState.resetToLastSavedState?.()
       );
     },
-    [closeAllFlyouts, core.overlays, dashboardAppState, dispatchDashboardStateChange]
+    [
+      closeAllFlyouts,
+      core.overlays,
+      dashboardAppState,
+      dispatchDashboardStateChange,
+      onViewModeChange,
+    ]
   );
 
   const runSaveAs = useCallback(async () => {
@@ -617,7 +643,14 @@ export function DashboardTopNav({
                   onClick={addFromLibrary}
                   data-test-subj="dashboardAddPanelButton"
                 />,
-                dashboardAppState.dashboardContainer.controlGroup?.getToolbarButtons(),
+                dashboardAppState.dashboardContainer.controlGroup?.getToolbarButtons({
+                  onClick: () => {
+                    setTourVisibility(false);
+                  },
+                  onClose: () => {
+                    setTourVisibility(true);
+                  },
+                }),
               ],
             }}
           </SolutionToolbar>