fix guided tour alert to not show up if skipped once

openshift · Sep 23, 2020 · 650afaf · 650afaf
1 parent 7f22abc
commit 650afaf
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 12 deletions.
diff --git a/frontend/packages/console-app/src/components/tour/GuidedTourMastheadTrigger.tsx b/frontend/packages/console-app/src/components/tour/GuidedTourMastheadTrigger.tsx
@@ -10,7 +10,11 @@ const GuidedTourMastheadTrigger: React.FC<GuidedTourMastheadTriggerProps> = ({ c
   const { tourDispatch, tour } = React.useContext(TourContext);
   if (!tour) return null;
   return (
-    <button className={className} type="button" onClick={() => tourDispatch(TourActions.start)}>
+    <button
+      className={className}
+      type="button"
+      onClick={() => tourDispatch({ type: TourActions.start })}
+    >
       Guided Tour
     </button>
   );

diff --git a/frontend/packages/console-app/src/components/tour/StepComponent.tsx b/frontend/packages/console-app/src/components/tour/StepComponent.tsx
@@ -42,12 +42,16 @@ const StepComponent: React.FC<StepComponentProps> = ({
       showStepBadge={showStepBadge}
       nextButtonText={nextButtonText}
       backButtonText={backButtonText}
-      onClose={() => tourDispatch(TourActions.complete)}
+      onClose={() => tourDispatch({ type: TourActions.complete })}
       onNext={() =>
-        step > totalSteps ? tourDispatch(TourActions.complete) : tourDispatch(TourActions.next)
+        step > totalSteps
+          ? tourDispatch({ type: TourActions.complete })
+          : tourDispatch({ type: TourActions.next })
       }
       onBack={() =>
-        step === 0 ? tourDispatch(TourActions.complete) : tourDispatch(TourActions.back)
+        step === 0
+          ? tourDispatch({ type: TourActions.complete })
+          : tourDispatch({ type: TourActions.back })
       }
     />
   );

diff --git a/frontend/packages/console-app/src/components/tour/__tests__/tour-context.spec.ts b/frontend/packages/console-app/src/components/tour/__tests__/tour-context.spec.ts
@@ -13,7 +13,7 @@ describe('guided-tour-context', () => {
     });
 
     it('should return startTour as true for StartAction', () => {
-      const result = tourReducer(mockState, TourActions.start);
+      const result = tourReducer(mockState, { type: TourActions.start });
       expect(result).toEqual({
         startTour: true,
         completedTour: false,
@@ -22,17 +22,17 @@ describe('guided-tour-context', () => {
     });
 
     it('should return increment in stepNumber  for next action', () => {
-      const result = tourReducer(mockState, TourActions.next);
+      const result = tourReducer(mockState, { type: TourActions.next });
       expect(result.stepNumber).toEqual(mockState.stepNumber + 1);
     });
 
     it('should return decrease in stepNumber  for back action', () => {
-      const result = tourReducer(mockState, TourActions.back);
+      const result = tourReducer(mockState, { type: TourActions.back });
       expect(result.stepNumber).toEqual(mockState.stepNumber - 1);
     });
 
     it('should return completedTour as true for complete action', () => {
-      const result = tourReducer(mockState, TourActions.complete);
+      const result = tourReducer(mockState, { type: TourActions.complete });
       expect(result).toEqual({
         startTour: false,
         completedTour: true,

diff --git a/frontend/packages/console-app/src/components/tour/const.ts b/frontend/packages/console-app/src/components/tour/const.ts
@@ -1,6 +1,7 @@
 export const TOUR_LOCAL_STORAGE_KEY = 'getting-started-tour';
 
 export enum TourActions {
+  initialize = 'initialize',
   start = 'start',
   next = 'next',
   back = 'back',

diff --git a/frontend/packages/console-app/src/components/tour/tour-context.ts b/frontend/packages/console-app/src/components/tour/tour-context.ts
@@ -1,4 +1,4 @@
-import { createContext, useReducer, Reducer, Dispatch, ReducerAction } from 'react';
+import { createContext, useReducer, useRef, Reducer, Dispatch, ReducerAction } from 'react';
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore: FIXME missing exports due to out-of-sync @types/react-redux version
 import { useSelector } from 'react-redux';
@@ -16,9 +16,16 @@ import {
 } from './utils';
 import { TourDataType, Step } from './type';
 
-export const tourReducer = (state: TourState, action: TourActions) => {
+type TourStateAction = { type: TourActions; payload?: { completed?: boolean } };
+export const tourReducer = (state: TourState, action: TourStateAction) => {
   const { stepNumber } = state;
-  switch (action) {
+  switch (action.type) {
+    case TourActions.initialize:
+      return {
+        completedTour: action.payload.completed,
+        stepNumber: 0,
+        startTour: !action.payload.completed,
+      };
     case TourActions.start:
       return { startTour: true, completedTour: false, stepNumber: 0 };
     case TourActions.next:
@@ -39,7 +46,7 @@ export const tourReducer = (state: TourState, action: TourActions) => {
   }
 };
 
-type TourReducer = Reducer<TourState, TourActions>;
+type TourReducer = Reducer<TourState, TourStateAction>;
 
 type TourContextType = {
   tourState?: TourState;
@@ -84,11 +91,16 @@ export const useTourValuesForContext = (): TourContextType => {
       setTourCompletionLocalStorageDataForPerspective(activePerspective, true);
     }
   };
+  const activePerspectiveRef = useRef<string>(activePerspective);
   const [tourState, tourDispatch] = useReducer<TourReducer>(tourReducer, {
     completedTour: completed,
     stepNumber: 0,
     startTour: !completed,
   });
+  if (activePerspective !== activePerspectiveRef.current) {
+    tourDispatch({ type: TourActions.initialize, payload: { completed } });
+    activePerspectiveRef.current = activePerspective;
+  }
   if (!tour) return { tour: null };
   const {
     properties: {