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 closest link 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;