[Dashboard] Add tour to Dashboard

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 () => {

src/plugins/dashboard/public/application/tour/custom_footers.tsx

@@ -0,0 +1,84 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiButtonProps,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiI18n,
+} from '@elastic/eui';
+import React from 'react';
+import { DashboardTourContextProps } from './dashboard_tour_context';
+
+interface ViewFooterProps {
+  onFinishTour: () => void;
+}
+
+interface EditFooterProps {
+  isLastStep: boolean;
+  onNextTourStep: DashboardTourContextProps['getNextEditTourStep'];
+  onFinishTour: DashboardTourContextProps['finishEditTour'];
+}
+
+export const ViewTourFooter = ({ onFinishTour }: ViewFooterProps) => (
+  <EuiFlexItem grow={false}>
+    <EuiButtonEmpty
+      color="text"
+      size="xs"
+      onClick={onFinishTour}
+      data-test-subj="discoverTourButtonSkip"
+    >
+      {EuiI18n({ token: 'core.euiTourStep.closeTour', default: 'Close tour' })}
+    </EuiButtonEmpty>
+  </EuiFlexItem>
+);
+
+export const EditTourFooter = ({ isLastStep, onNextTourStep, onFinishTour }: EditFooterProps) => {
+  const actionButtonProps: Partial<EuiButtonProps> = {
+    size: 's',
+    color: 'success',
+  };
+
+  return (
+    <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+      {!isLastStep && (
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
+            color="text"
+            size="xs"
+            onClick={onFinishTour}
+            data-test-subj="dashboardTourButtonSkip"
+          >
+            {EuiI18n({ token: 'core.euiTourStep.skipTour', default: 'Skip tour' })}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      )}
+      <EuiFlexItem grow={false}>
+        {isLastStep ? (
+          <EuiButton
+            {...actionButtonProps}
+            onClick={onFinishTour}
+            data-test-subj="dashboardTourButtonEnd"
+          >
+            {EuiI18n({ token: 'core.euiTourStep.endTour', default: 'End tour' })}
+          </EuiButton>
+        ) : (
+          <EuiButton
+            {...actionButtonProps}
+            onClick={() => onNextTourStep()}
+            data-test-subj="dashboardTourButtonNext"
+          >
+            {EuiI18n({ token: 'core.euiTourStep.nextStep', default: 'Next' })}
+          </EuiButton>
+        )}
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

src/plugins/dashboard/public/application/tour/dashboard_tour_context.tsx

@@ -0,0 +1,30 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ViewMode } from '@kbn/embeddable-plugin/public';
+import { createContext, useContext } from 'react';
+
+export interface DashboardTourContextProps {
+  currentEditTourStep: number;
+  getNextEditTourStep: (step?: number) => void;
+  finishEditTour: () => void;
+  onViewModeChange: (newMode: ViewMode) => void;
+  setTourVisibility: (visibility: boolean) => void;
+}
+
+export const DashboardTourContext = createContext<DashboardTourContextProps>({
+  currentEditTourStep: -1,
+  getNextEditTourStep: () => {},
+  finishEditTour: () => {},
+  onViewModeChange: () => {},
+  setTourVisibility: () => {},
+});
+
+export const useDashboardEditTourContext = () => {
+  return useContext(DashboardTourContext);
+};