Exp - always take user back to original tab

When clicking back link, the user is directed back to original tab. Tab name is updated on login. If user closes original tab, a new tab is opened with the same name. Jira ticket: CAMS-428
US-Trustee-Program · Sep 17, 2024 · 1696b1f · 1696b1f
1 parent 89687e9
commit 1696b1f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/user-interface/src/case-detail/panels/CaseDetailHeader.tsx b/user-interface/src/case-detail/panels/CaseDetailHeader.tsx
@@ -21,7 +21,7 @@ export default function CaseDetailHeader(props: CaseDetailHeaderProps) {
   const appEl = document.querySelector('.App');
   const camsHeader = document.querySelector('.cams-header');
 
-  const { previousLocation } = useLocationTracker();
+  const { previousLocation, homeTab } = useLocationTracker();
 
   const modifyHeader = () => {
     if (camsHeader) {
@@ -64,7 +64,7 @@ export default function CaseDetailHeader(props: CaseDetailHeaderProps) {
             <div className="grid-row grid-gap-lg">
               <div className="grid-col-1"></div>
               <div className="grid-col-10">
-                <Link className="back-button" to={previousLocation}>
+                <Link className="back-button" to={previousLocation} target={homeTab}>
                   <Icon name="arrow_back"></Icon>
                   Back to {getBackLinkText()}
                 </Link>
@@ -117,7 +117,7 @@ export default function CaseDetailHeader(props: CaseDetailHeaderProps) {
           <div className="grid-row grid-gap-lg">
             <div className="grid-col-1"></div>
             <div className="grid-col-10">
-              <Link className="back-button" to={previousLocation}>
+              <Link className="back-button" to={previousLocation} target={homeTab}>
                 <Icon name="arrow_back"></Icon>
                 Back to {getBackLinkText()}
               </Link>

diff --git a/user-interface/src/lib/hooks/UseLocationTracker.ts b/user-interface/src/lib/hooks/UseLocationTracker.ts
@@ -13,6 +13,11 @@ export default function useLocationTracker() {
 
     return storedLocation && isValidPath(storedLocation) ? storedLocation : '/my-cases';
   });
+  const [homeTab, setHomeTab] = useState<string>(() => {
+    const target = localStorage.getItem('homeTab');
+
+    return target ?? '';
+  });
 
   const updateLocation = useCallback((newLocation?: string) => {
     if (newLocation && isValidPath(newLocation)) {
@@ -23,14 +28,23 @@ export default function useLocationTracker() {
       setPreviousLocation(pathLocation);
       localStorage.setItem('previousLocation', pathLocation);
     }
+    if (window.name.match(/^CAMS_WINDOW_[0-9]+/)) {
+      setHomeTab(window.name);
+      localStorage.setItem('homeTab', window.name);
+    }
   }, []);
 
   useEffect(() => {
     const storedLocation = localStorage.getItem('previousLocation');
+    const storedTab = localStorage.getItem('homeTab');
+
     if (storedLocation && isValidPath(storedLocation)) {
       setPreviousLocation(storedLocation);
     }
-  });
+    if (storedTab && storedTab.length > 0) {
+      setHomeTab(storedTab);
+    }
+  }, []);
 
-  return { previousLocation, updateLocation };
+  return { previousLocation, homeTab, updateLocation };
 }
diff --git a/user-interface/src/login/Login.tsx b/user-interface/src/login/Login.tsx
@@ -64,6 +64,8 @@ export function Login(props: LoginProps): React.ReactNode {
     }
   }
 
+  window.name = `CAMS_WINDOW_${Math.floor(Date.now() / 1000)}`;
+
   let providerComponent;
   switch (provider) {
     case 'okta':