[Dashboard] Add tour to Dashboard

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

@@ -19,6 +19,7 @@ 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;
@@ -108,6 +109,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

@@ -54,6 +54,7 @@ import {
   useDashboardDispatch,
   useDashboardSelector,
 } from '../state';
+import { DashboardViewTour, DASHBOARD_VIEW_TOUR_STORAGE_KEY } from '../tour';
 
 export interface DashboardTopNavState {
   chromeIsVisible: boolean;
@@ -221,7 +222,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;
 
@@ -589,6 +603,7 @@ export function DashboardTopNav({
 
   return (
     <>
+      {dashboardState.viewMode === ViewMode.VIEW && <DashboardViewTour />}
       <TopNavMenu {...getNavBarProps()} />
       {!printMode && isLabsEnabled && isLabsShown ? (
         <LabsFlyout solutions={['dashboard']} onClose={() => setIsLabsShown(false)} />

src/plugins/dashboard/public/application/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/application/tour/dashboard_edit_tour.tsx

@@ -0,0 +1,145 @@
+/*
+ * 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.createVisualization.getTitle(),
+    content: (
+      <EuiText>{DashboardTourStrings.editModeTour.createVisualization.getDescription()}</EuiText>
+    ),
+    anchorPosition: 'rightCenter',
+    maxWidth: TOUR_POPOVER_WIDTH,
+  } as EuiStatelessTourStep,
+  {
+    anchor: '[data-test-subj="embeddablePanelToggleMenuIcon"]',
+    step: 2,
+    title: DashboardTourStrings.editModeTour.panelOptions.getTitle(),
+    content: <EuiText>{DashboardTourStrings.editModeTour.panelOptions.getDescription()}</EuiText>,
+    anchorPosition: 'upCenter',
+    maxWidth: TOUR_POPOVER_WIDTH,
+  } as EuiStatelessTourStep,
+  {
+    anchor: '.kbnQueryBar__datePickerWrapper',
+    step: 3,
+    title: DashboardTourStrings.editModeTour.timePicker.getTitle(),
+    content: <EuiText>{DashboardTourStrings.editModeTour.timePicker.getDescription()}</EuiText>,
+    anchorPosition: 'downCenter',
+    maxWidth: TOUR_POPOVER_WIDTH,
+  } as EuiStatelessTourStep,
+  {
+    anchor: '#addFilterPopover',
+    step: 4,
+    title: DashboardTourStrings.editModeTour.filters.getTitle(),
+    content: <EuiText>{DashboardTourStrings.editModeTour.filters.getDescription()}</EuiText>,
+    anchorPosition: 'downLeft',
+    maxWidth: TOUR_POPOVER_WIDTH,
+  } as EuiStatelessTourStep,
+  {
+    anchor: '[data-test-subj="dashboard-controls-menu-button"]',
+    step: 5,
+    title: DashboardTourStrings.editModeTour.controls.getTitle(),
+    content: <EuiText>{DashboardTourStrings.editModeTour.controls.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/application/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/application/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';

src/plugins/dashboard/public/application/tour/translations.ts

@@ -0,0 +1,81 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const DashboardTourStrings = {
+  viewModeTour: {
+    getTitle: () =>
+      i18n.translate('dashboard.tour.viewMode.title', {
+        defaultMessage: 'Ready to create something brilliant?',
+      }),
+    getDescription: () =>
+      i18n.translate('dashboard.tour.viewMode.firstStep.description', {
+        defaultMessage: 'Start editing here.',
+      }),
+  },
+  editModeTour: {
+    getTitle: () =>
+      i18n.translate('dashboard.tour.editMode.title', {
+        defaultMessage: 'Dashboard tour',
+      }),
+    createVisualization: {
+      getTitle: () =>
+        i18n.translate('dashboard.tour.editMode.createVisualization.title', {
+          defaultMessage: 'Create visualizations',
+        }),
+      getDescription: () =>
+        i18n.translate('dashboard.tour.editMode.createVisualization.description', {
+          defaultMessage:
+            'Build maps, charts, gauges, and other visualizations that best display your data.',
+        }),
+    },
+    panelOptions: {
+      getTitle: () =>
+        i18n.translate('dashboard.tour.editMode.panelOptions.title', {
+          defaultMessage: 'Add your style',
+        }),
+      getDescription: () =>
+        i18n.translate('dashboard.tour.editMode.panelOptions.description', {
+          defaultMessage: 'Customize your visualization to give your data its best look.',
+        }),
+    },
+    timePicker: {
+      getTitle: () =>
+        i18n.translate('dashboard.tour.editMode.timePicker.title', {
+          defaultMessage: 'Expand the time range',
+        }),
+      getDescription: () =>
+        i18n.translate('dashboard.tour.editMode.timePicker.description', {
+          defaultMessage:
+            'View hits for a particular day, the last year, or whatever gets you the data you want.',
+        }),
+    },
+    filters: {
+      getTitle: () =>
+        i18n.translate('dashboard.tour.editMode.addFilter.title', {
+          defaultMessage: 'Filter the data',
+        }),
+      getDescription: () =>
+        i18n.translate('dashboard.tour.editMode.addFilter.description', {
+          defaultMessage:
+            'To reduce the amount of data displayed, filter for data that exists, does not exist, contains a value, and more.',
+        }),
+    },
+    controls: {
+      getTitle: () =>
+        i18n.translate('dashboard.tour.editMode.controls.title', {
+          defaultMessage: 'Make it interactive',
+        }),
+      getDescription: () =>
+        i18n.translate('dashboard.tour.editMode.controls.description', {
+          defaultMessage: 'Add controls for a more engaging, more memorable experience.',
+        }),
+    },
+  },
+};

test/accessibility/apps/dashboard_panel.ts

@@ -17,7 +17,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   describe('Dashboard Panel', () => {
     before(async () => {
       await PageObjects.common.navigateToApp('dashboard');
-      await testSubjects.click('dashboardListingTitleLink-[Flights]-Global-Flight-Dashboard');
+      await PageObjects.dashboard.loadSavedDashboard('[Flights] Global Flight Dashboard');
     });
 
     it('dashboard panel open ', async () => {

test/functional/apps/dashboard/group3/bwc_shared_urls.ts

@@ -95,6 +95,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     describe('6.0 urls', () => {
       let savedDashboardId: string;
 
+      beforeEach(async () => {
+        await PageObjects.dashboard.forceSkipTour();
+      });
+
       it('loads an unsaved dashboard', async function () {
         const url = `${kibanaLegacyBaseUrl}#/dashboard?${urlQuery}`;
         log.debug(`Navigating to ${url}`);