Combine both tours + hide tour on add from library

elastic · Jun 2, 2022 · 7e4d19b · 7e4d19b
1 parent 0d631d4
commit 7e4d19b
Show file tree

Hide file tree

Showing 9 changed files with 194 additions and 164 deletions.
diff --git a/src/plugins/dashboard/public/application/dashboard_app.tsx b/src/plugins/dashboard/public/application/dashboard_app.tsx
@@ -121,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);
@@ -136,7 +140,7 @@ export function DashboardApp({
         <DashboardAppNoDataPage onDataViewCreated={() => setShowNoDataPage(false)} />
       )}
       {!showNoDataPage && isCompleteDashboardAppState(dashboardAppState) && (
-        <DashboardEditTourProvider>
+        <DashboardEditTourProvider editMode={editMode} viewMode={viewMode}>
           <DashboardTopNav
             printMode={printMode}
             redirectTo={redirectTo}

diff --git a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx b/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';
+
 export interface DashboardViewportProps {
   container: DashboardContainer;
   controlGroup?: ControlGroupContainer;

diff --git a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
@@ -54,11 +54,7 @@ import {
   useDashboardDispatch,
   useDashboardSelector,
 } from '../state';
-import {
-  DashboardViewTour,
-  DASHBOARD_VIEW_TOUR_STORAGE_KEY,
-  useDashboardEditTourContext,
-} from '../tour';
+import { useDashboardEditTourContext } from '../tour';
 
 export interface DashboardTopNavState {
   chromeIsVisible: boolean;
@@ -134,7 +130,8 @@ export function DashboardTopNav({
   const IS_DARK_THEME = uiSettings.get('theme:darkMode');
   const isLabsEnabled = uiSettings.get(UI_SETTINGS.ENABLE_LABS_UI);
 
-  const { currentTourStep, onNextTourStep, setTourVisibility } = useDashboardEditTourContext();
+  const { currentEditTourStep, getNextEditTourStep, onViewModeChange, setTourVisibility } =
+    useDashboardEditTourContext();
 
   const trackUiMetric = usageCollection?.reportUiCounter.bind(
     usageCollection,
@@ -221,11 +218,17 @@ export function DashboardTopNav({
         },
       });
 
-      if (currentTourStep === 1) {
-        onNextTourStep();
+      if (currentEditTourStep === 1) {
+        getNextEditTourStep();
       }
     },
-    [stateTransferService, data.search.session, trackUiMetric, currentTourStep, onNextTourStep]
+    [
+      stateTransferService,
+      data.search.session,
+      trackUiMetric,
+      currentEditTourStep,
+      getNextEditTourStep,
+    ]
   );
 
   const closeAllFlyouts = useCallback(() => {
@@ -238,22 +241,7 @@ export function DashboardTopNav({
 
   const onChangeViewMode = useCallback(
     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 })
-          );
-        }
-        setTourVisibility(true);
-      } else {
-        setTourVisibility(false);
-      }
+      onViewModeChange(newMode);
       closeAllFlyouts();
       const willLoseChanges = newMode === ViewMode.VIEW && dashboardAppState.hasUnsavedChanges;
 
@@ -271,7 +259,7 @@ export function DashboardTopNav({
       core.overlays,
       dashboardAppState,
       dispatchDashboardStateChange,
-      setTourVisibility,
+      onViewModeChange,
     ]
   );
 
@@ -627,7 +615,6 @@ export function DashboardTopNav({
 
   return (
     <>
-      {dashboardState.viewMode === ViewMode.VIEW && <DashboardViewTour />}
       <TopNavMenu {...getNavBarProps()} />
       {!printMode && isLabsEnabled && isLabsShown ? (
         <LabsFlyout solutions={['dashboard']} onClose={() => setIsLabsShown(false)} />

diff --git a/src/plugins/dashboard/public/application/tour/custom_footer.tsx b/src/plugins/dashboard/public/application/tour/custom_footer.tsx
@@ -18,8 +18,8 @@ import React from 'react';
 import { DashboardTourContextProps } from './dashboard_edit_tour_context';
 interface CustomFooterProps {
   isLastStep: boolean;
-  onNextTourStep: DashboardTourContextProps['onNextTourStep'];
-  onFinishTour: DashboardTourContextProps['onFinishTour'];
+  onNextTourStep: DashboardTourContextProps['getNextEditTourStep'];
+  onFinishTour: DashboardTourContextProps['finishEditTour'];
 }
 
 export const CustomFooter = ({ isLastStep, onNextTourStep, onFinishTour }: CustomFooterProps) => {
@@ -36,7 +36,7 @@ export const CustomFooter = ({ isLastStep, onNextTourStep, onFinishTour }: Custo
             color="text"
             size="xs"
             onClick={onFinishTour}
-            data-test-subj="discoverTourButtonSkip"
+            data-test-subj="dashboardTourButtonSkip"
           >
             {EuiI18n({ token: 'core.euiTourStep.skipTour', default: 'Skip tour' })}
           </EuiButtonEmpty>
@@ -47,15 +47,15 @@ export const CustomFooter = ({ isLastStep, onNextTourStep, onFinishTour }: Custo
           <EuiButton
             {...actionButtonProps}
             onClick={onFinishTour}
-            data-test-subj="discoverTourButtonEnd"
+            data-test-subj="dashboardTourButtonEnd"
           >
             {EuiI18n({ token: 'core.euiTourStep.endTour', default: 'End tour' })}
           </EuiButton>
         ) : (
           <EuiButton
             {...actionButtonProps}
-            onClick={onNextTourStep}
-            data-test-subj="discoverTourButtonNext"
+            onClick={() => onNextTourStep()}
+            data-test-subj="dashboardTourButtonNext"
           >
             {EuiI18n({ token: 'core.euiTourStep.nextStep', default: 'Next' })}
           </EuiButton>

diff --git a/src/plugins/dashboard/public/application/tour/dashboard_edit_tour_context.tsx b/src/plugins/dashboard/public/application/tour/dashboard_edit_tour_context.tsx
@@ -6,21 +6,22 @@
  * Side Public License, v 1.
  */
 
+import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { createContext, useContext } from 'react';
 
 export interface DashboardTourContextProps {
-  currentTourStep: number;
-  onStartTour: () => void;
-  onNextTourStep: () => void;
-  onFinishTour: () => void;
+  currentEditTourStep: number;
+  getNextEditTourStep: (step?: number) => void;
+  finishEditTour: () => void;
+  onViewModeChange: (newMode: ViewMode) => void;
   setTourVisibility: (visibility: boolean) => void;
 }
 
 export const DashboardTourContext = createContext<DashboardTourContextProps>({
-  currentTourStep: -1,
-  onStartTour: () => {},
-  onNextTourStep: () => {},
-  onFinishTour: () => {},
+  currentEditTourStep: -1,
+  getNextEditTourStep: () => {},
+  finishEditTour: () => {},
+  onViewModeChange: () => {},
   setTourVisibility: () => {},
 });