[Spacetime] [Dashboard] Add tour to Dashboard

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

@@ -106,10 +106,10 @@ export function DashboardApp({
     };
   }, [data.search.session]);
 
-  const printMode = useMemo(
-    () => dashboardAppState.getLatestDashboardState?.().viewMode === ViewMode.PRINT,
-    [dashboardAppState]
-  );
+  const [printMode] = useMemo(() => {
+    const latestDashboardState = dashboardAppState.getLatestDashboardState?.();
+    return [latestDashboardState?.viewMode === ViewMode.PRINT];
+  }, [dashboardAppState]);
 
   useEffect(() => {
     if (!embedSettings) chrome.setIsVisible(!printMode);
@@ -120,11 +120,13 @@ export function DashboardApp({
       {isCompleteDashboardAppState(dashboardAppState) && (
         <>
           {!printMode && (
-            <DashboardTopNav
-              redirectTo={redirectTo}
-              embedSettings={embedSettings}
-              dashboardAppState={dashboardAppState}
-            />
+            <>
+              <DashboardTopNav
+                redirectTo={redirectTo}
+                embedSettings={embedSettings}
+                dashboardAppState={dashboardAppState}
+              />
+            </>
           )}
 
           {dashboardAppState.savedDashboard.outcome === 'conflict' &&

src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx

@@ -13,12 +13,14 @@ import {
   ControlGroupContainer,
   LazyControlsCallout,
 } from '@kbn/controls-plugin/public';
+
 import { ViewMode } from '../../../services/embeddable';
 import { DashboardContainer, DashboardReactContextValue } from '../dashboard_container';
 import { DashboardGrid } from '../grid';
 import { context } from '../../../services/kibana_react';
 import { DashboardEmptyScreen } from '../empty_screen/dashboard_empty_screen';
 import { withSuspense } from '../../../services/presentation_util';
+import { DashboardEditTour } from '../../../tour';
 
 export interface DashboardViewportProps {
   container: DashboardContainer;
@@ -66,6 +68,7 @@ export class DashboardViewport extends React.Component<DashboardViewportProps, S
   public componentDidMount() {
     this.mounted = true;
     this.subscription = this.props.container.getInput$().subscribe(() => {
+      // console.log('subscription fired');
       const { isFullScreenMode, useMargins, title, description, isEmbeddedExternally, panels } =
         this.props.container.getInput();
       if (this.mounted) {
@@ -108,6 +111,9 @@ export class DashboardViewport extends React.Component<DashboardViewportProps, S
 
     return (
       <>
+        {isEditMode && (
+          <DashboardEditTour panelCount={panelCount} controlsEnabled={controlsEnabled ?? false} />
+        )}
         {controlsEnabled ? (
           <>
             {isEditMode && panelCount !== 0 && controlGroup?.getPanelCount() === 0 ? (

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

@@ -53,6 +53,7 @@ import {
   useDashboardDispatch,
   useDashboardSelector,
 } from '../state';
+import { DashboardViewTour, DASHBOARD_VIEW_TOUR_STORAGE_KEY } from '../../tour';
 
 export interface DashboardTopNavState {
   chromeIsVisible: boolean;
@@ -218,7 +219,20 @@ export function DashboardTopNav({
   }, [state.addPanelOverlay, dashboardAppState.dashboardContainer.controlGroup]);
 
   const onChangeViewMode = useCallback(
-    (newMode: ViewMode) => {
+    async (newMode: ViewMode) => {
+      if (newMode === ViewMode.EDIT) {
+        // if the initial state is in the local storage, that means the user has seen the tour at least once -
+        // therefore, on switch to edit mode, the tour should be disabled to prevent them from seeing it again
+        const initialTourState = JSON.parse(
+          localStorage.getItem(DASHBOARD_VIEW_TOUR_STORAGE_KEY) ?? 'null'
+        );
+        if (initialTourState && initialTourState.isTourActive) {
+          localStorage.setItem(
+            DASHBOARD_VIEW_TOUR_STORAGE_KEY,
+            JSON.stringify({ ...initialTourState, isTourActive: false })
+          );
+        }
+      }
       closeAllFlyouts();
       const willLoseChanges = newMode === ViewMode.VIEW && dashboardAppState.hasUnsavedChanges;
 
@@ -579,6 +593,7 @@ export function DashboardTopNav({
 
   return (
     <>
+      {dashboardState.viewMode === ViewMode.VIEW && <DashboardViewTour />}
       <TopNavMenu {...getNavBarProps()} />
       {isLabsEnabled && isLabsShown ? (
         <LabsFlyout solutions={['dashboard']} onClose={() => setIsLabsShown(false)} />

src/plugins/dashboard/public/tour/custom_footer.tsx

@@ -0,0 +1,27 @@
+/*
+ * 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, EuiFlexGroup, EuiFlexItem, EuiI18n } from '@elastic/eui';
+import React from 'react';
+
+export const CustomFooter = ({ onSkip, onNext }: { onSkip: () => void; onNext: () => void }) => {
+  return (
+    <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty color="text" size="xs" onClick={onSkip}>
+          {EuiI18n({ token: 'core.euiTourStep.skipTour', default: 'Skip tour' })}
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButton size="s" color="success" onClick={onNext}>
+          {EuiI18n({ token: 'core.euiTourStep.nextStep', default: 'Next' })}
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

src/plugins/dashboard/public/tour/dashboard_edit_tour.tsx

@@ -0,0 +1,143 @@
+/*
+ * 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 {
+  EuiButtonEmpty,
+  EuiI18n,
+  EuiStatelessTourStep,
+  EuiText,
+  EuiTourState,
+  EuiTourStep,
+  useEuiTour,
+} from '@elastic/eui';
+import React, { useEffect } from 'react';
+import { CustomFooter } from './custom_footer';
+import { DashboardTourStrings } from './translations';
+
+export const DASHBOARD_EDIT_TOUR_STORAGE_KEY = 'dashboard.edit.tourState';
+const TOUR_POPOVER_WIDTH = 360;
+
+const dashboardEditTourConfig = {
+  currentTourStep: 1,
+  isTourActive: true,
+  tourPopoverWidth: 360,
+  tourSubtitle: DashboardTourStrings.editModeTour.getTitle(),
+};
+
+const dashboardEditTourSteps = [
+  {
+    anchor: '[data-test-subj="dashboardAddNewPanelButton"]',
+    step: 1,
+    title: DashboardTourStrings.editModeTour.firstStep.getTitle(),
+    content: <EuiText>{DashboardTourStrings.editModeTour.firstStep.getDescription()}</EuiText>,
+    anchorPosition: 'rightCenter',
+    maxWidth: TOUR_POPOVER_WIDTH,
+  } as EuiStatelessTourStep,
+  {
+    anchor: '[data-test-subj="embeddablePanelToggleMenuIcon"]',
+    step: 2,
+    title: DashboardTourStrings.editModeTour.secondStep.getTitle(),
+    content: <EuiText>{DashboardTourStrings.editModeTour.secondStep.getDescription()}</EuiText>,
+    anchorPosition: 'upCenter',
+    maxWidth: TOUR_POPOVER_WIDTH,
+  } as EuiStatelessTourStep,
+  {
+    anchor: '.kbnQueryBar__datePickerWrapper',
+    step: 3,
+    title: DashboardTourStrings.editModeTour.thirdStep.getTitle(),
+    content: <EuiText>{DashboardTourStrings.editModeTour.thirdStep.getDescription()}</EuiText>,
+    anchorPosition: 'downCenter',
+    maxWidth: TOUR_POPOVER_WIDTH,
+  } as EuiStatelessTourStep,
+  {
+    anchor: '#addFilterPopover',
+    step: 4,
+    title: DashboardTourStrings.editModeTour.fourthStep.getTitle(),
+    content: <EuiText>{DashboardTourStrings.editModeTour.fourthStep.getDescription()}</EuiText>,
+    anchorPosition: 'downLeft',
+    maxWidth: TOUR_POPOVER_WIDTH,
+  } as EuiStatelessTourStep,
+  {
+    anchor: '[data-test-subj="dashboard-controls-menu-button"]',
+    step: 5,
+    title: DashboardTourStrings.editModeTour.fifthStep.getTitle(),
+    content: <EuiText>{DashboardTourStrings.editModeTour.fifthStep.getDescription()}</EuiText>,
+    anchorPosition: 'upCenter',
+    maxWidth: TOUR_POPOVER_WIDTH,
+  } as EuiStatelessTourStep,
+];
+
+export const DashboardEditTour = ({
+  panelCount,
+  controlsEnabled,
+}: {
+  panelCount: number;
+  controlsEnabled: boolean;
+}) => {
+  const initialState = localStorage.getItem(DASHBOARD_EDIT_TOUR_STORAGE_KEY);
+  let tourState: EuiTourState;
+  if (initialState) {
+    tourState = JSON.parse(initialState);
+  } else {
+    tourState = dashboardEditTourConfig;
+  }
+
+  const [
+    [euiTourStepOne, euiTourStepTwo, euiTourStepThree, euiTourStepFour, euiTourStepFive],
+    actions,
+    reducerState,
+  ] = useEuiTour(dashboardEditTourSteps, tourState);
+
+  useEffect(() => {
+    localStorage.setItem(DASHBOARD_EDIT_TOUR_STORAGE_KEY, JSON.stringify(reducerState));
+  }, [reducerState]);
+
+  const commonFooterProps = {
+    onSkip: () => actions.finishTour(),
+    onNext: () => actions.incrementStep(),
+  };
+
+  const skipVisualizationStep = () => {
+    if (panelCount > 0) {
+      actions.incrementStep();
+    } else {
+      actions.goToStep(3);
+    }
+  };
+
+  const EndTourIfNoControlsFooter = () => {
+    if (controlsEnabled) return <CustomFooter {...commonFooterProps} />;
+    return (
+      <EuiButtonEmpty color="text" size="xs" onClick={() => actions.finishTour()}>
+        {EuiI18n({ token: 'core.euiTourStep.endTour', default: 'End tour' })}
+      </EuiButtonEmpty>
+    );
+  };
+
+  const TourSteps = () => {
+    return (
+      <>
+        <EuiTourStep
+          {...euiTourStepOne}
+          footerAction={
+            <CustomFooter
+              onSkip={() => actions.finishTour()}
+              onNext={() => skipVisualizationStep()}
+            />
+          }
+        />
+        <EuiTourStep {...euiTourStepTwo} footerAction={<CustomFooter {...commonFooterProps} />} />
+        <EuiTourStep {...euiTourStepThree} footerAction={<CustomFooter {...commonFooterProps} />} />
+        <EuiTourStep {...euiTourStepFour} footerAction={<EndTourIfNoControlsFooter />} />
+        <EuiTourStep {...euiTourStepFive} />
+      </>
+    );
+  };
+
+  return <TourSteps />;
+};

src/plugins/dashboard/public/tour/dashboard_view_tour.tsx

@@ -0,0 +1,52 @@
+/*
+ * 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 { EuiStatelessTourStep, EuiText, EuiTourState, EuiTourStep, useEuiTour } from '@elastic/eui';
+import React, { useEffect } from 'react';
+import { DashboardTourStrings } from './translations';
+
+export const DASHBOARD_VIEW_TOUR_STORAGE_KEY = 'dashboard.view.tourState';
+const TOUR_POPOVER_WIDTH = 360;
+
+export const dashboardViewTourConfig = {
+  currentTourStep: 1,
+  isTourActive: true,
+  tourPopoverWidth: TOUR_POPOVER_WIDTH,
+};
+
+export const dashboardViewTourSteps = [
+  {
+    anchor: '[data-test-subj="dashboardEditMode"]',
+    step: 1,
+    title: DashboardTourStrings.viewModeTour.getTitle(),
+    content: <EuiText>{DashboardTourStrings.viewModeTour.getDescription()}</EuiText>,
+    anchorPosition: 'downCenter',
+    maxWidth: TOUR_POPOVER_WIDTH,
+  } as EuiStatelessTourStep,
+];
+
+export const DashboardViewTour = () => {
+  const initialState = localStorage.getItem(DASHBOARD_VIEW_TOUR_STORAGE_KEY);
+  let tourState: Pick<EuiTourState, Exclude<keyof EuiTourState, 'tourSubtitle'>>;
+  if (initialState) {
+    tourState = { ...JSON.parse(initialState) };
+  } else {
+    tourState = dashboardViewTourConfig;
+  }
+
+  const [[euiTourStepOne], _, reducerState] = useEuiTour(
+    dashboardViewTourSteps,
+    tourState as EuiTourState
+  );
+
+  useEffect(() => {
+    localStorage.setItem(DASHBOARD_VIEW_TOUR_STORAGE_KEY, JSON.stringify(reducerState));
+  }, [reducerState]);
+
+  return <EuiTourStep {...euiTourStepOne} />;
+};

src/plugins/dashboard/public/tour/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+export * from './dashboard_edit_tour';
+export * from './dashboard_view_tour';