Use link title based default document titles.

src/components/RootApp/ScalprumRoot.tsx

@@ -34,6 +34,7 @@ import { populateNotifications } from '../../redux/actions';
 import useTrackPendoUsage from '../../hooks/useTrackPendoUsage';
 import ChromeAuthContext from '../../auth/ChromeAuthContext';
 import { onRegisterModuleWriteAtom } from '../../state/atoms/chromeModuleAtom';
+import useTabName from '../../hooks/useTabName';
 
 const ProductSelection = lazy(() => import('../Stratosphere/ProductSelection'));
 
@@ -64,6 +65,8 @@ const ScalprumRoot = memo(
     useChromeServiceEvents();
     // track pendo usage
     useTrackPendoUsage();
+    // setting default tab title
+    useTabName();
 
     async function getNotifications() {
       try {

src/hooks/useTabName.ts

@@ -0,0 +1,31 @@
+import { useAtomValue } from 'jotai';
+import { useLocation } from 'react-router-dom';
+
+import { activeModuleAtom } from '../state/atoms/activeModuleAtom';
+import useBreadcrumbsLinks from './useBreadcrumbsLinks';
+import useBundle from './useBundle';
+import { useEffect, useMemo } from 'react';
+
+const useTabName = () => {
+  const { bundleTitle } = useBundle();
+  const activeModule = useAtomValue(activeModuleAtom);
+  const { pathname } = useLocation();
+  const fragments = useBreadcrumbsLinks();
+
+  const title = useMemo(() => {
+    const fragmentsWithoutBundle = fragments
+      .slice(1) // remove the bundle
+      .slice(-2) // limit to first parent
+      .map(({ title }) => title)
+      .toReversed(); // get the right order of fragments
+    return `${fragmentsWithoutBundle.join(' - ')} | ${bundleTitle}`;
+  }, [activeModule, pathname, fragments]);
+  useEffect(() => {
+    // sometimes the nav files are not loaded yet and the first section is empty
+    if (title.split(' | ')?.[0].length > 1) {
+      document.title = title;
+    }
+  }, [title]);
+};
+
+export default useTabName;