fix: fixes state sharing between tours of different pages (amundsen-i…

…o#1854) Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>
SaltIO · May 13, 2022 · 13ceffc · 13ceffc
1 parent c5146af
commit 13ceffc
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/frontend/amundsen_application/static/js/components/Tour/index.tsx b/frontend/amundsen_application/static/js/components/Tour/index.tsx
@@ -101,7 +101,7 @@ export const Tour: React.FC<TourProps> = ({
     };
     // Disabling exhaustive-deps as listening for hasSeenTour would make it impossible to test the feature
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [triggersOnFirstView]);
+  }, [triggersOnFirstView, triggerFlagId]);
 
   const handleCallback = (data: CallBackProps) => {
     const { status } = data;
@@ -119,7 +119,6 @@ export const Tour: React.FC<TourProps> = ({
     <Joyride
       run={run || runTourOnFirstView}
       steps={steps}
-      key={triggerFlagId} // This resets the tour component on each page
       callback={handleCallback}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...configuration}

diff --git a/frontend/amundsen_application/static/js/features/NavBar/index.tsx b/frontend/amundsen_application/static/js/features/NavBar/index.tsx
@@ -166,13 +166,16 @@ export const NavBar: React.FC<NavBarProps> = ({ loggedInUser, location }) => {
   const { hasPageTour, pageTourKey, pageTourSteps } = getPageTourInfo(
     location.pathname
   );
-
   const {
     hasFeatureTour,
     featureTourKey,
     featureTourSteps,
   } = getFeatureTourInfo(location.pathname);
 
+  React.useEffect(() => {
+    setRunTour(false);
+  }, [location.pathname]);
+
   const userLink = `/user/${loggedInUser.user_id}?source=navbar`;
   let avatar = <div className="shimmering-circle is-shimmer-animated" />;
 
@@ -245,6 +248,7 @@ export const NavBar: React.FC<NavBarProps> = ({ loggedInUser, location }) => {
             steps={hasPageTour ? pageTourSteps : featureTourSteps}
             onTourEnd={handleTourEnd}
             triggersOnFirstView
+            key={hasPageTour ? pageTourKey : featureTourKey} // Re-renders tour on each page
             triggerFlagId={hasPageTour ? pageTourKey : featureTourKey}
           />
         )}