PORTALS-3195

- fix NF portal OrganizationDetailsPage to pass searchParams along since there are multiple lookup keys
- add hook to dynamically set document.title

apps/portals/nf/src/pages/OrganizationDetailsPage/OrganizationDetailsPage.tsx

@@ -29,7 +29,7 @@ const tabConfig: DetailsPageTabConfig[] = [
 ]
 
 function OrganizationDetailsPage() {
-  const { abbreviation } = useGetPortalComponentSearchParams()
+  const searchParams = useGetPortalComponentSearchParams()
   return (
     <>
       <CardContainerLogic
@@ -40,7 +40,7 @@ function OrganizationDetailsPage() {
           imageFileHandleColumnName: 'headerLogo',
         }}
         isHeader={true}
-        searchParams={{ abbreviation }}
+        searchParams={searchParams}
       />
       <DetailsPage sql={fundersSql} ContainerProps={{ maxWidth: 'xl' }}>
         <DetailsPageTabs tabConfig={tabConfig} />

apps/synapse-portal-framework/src/App.tsx

@@ -1,14 +1,17 @@
-import React, { PropsWithChildren } from 'react'
-import { Outlet } from 'react-router-dom'
+import React, { PropsWithChildren, useEffect } from 'react'
+import { Outlet, useMatches } from 'react-router-dom'
 import {
   CookiesNotification,
   SynapseToastContainer,
 } from 'synapse-react-client'
 import AppInitializer from './components/AppInitializer'
 import Footer from './components/Footer'
 import Navbar from './components/navbar/Navbar'
+import { useDocumentTitleFromRoutes } from './utils/useDocumentTitleFromRoutes'
 
 export default function App(props: PropsWithChildren) {
+  useDocumentTitleFromRoutes()
+
   return (
     <AppInitializer>
       <SynapseToastContainer />

apps/synapse-portal-framework/src/utils/useDocumentTitleFromRoutes.ts

@@ -0,0 +1,27 @@
+import { useEffect } from 'react'
+import { useMatches } from 'react-router-dom'
+
+/**
+ * Uses the current routes to set the document title. The title will only be set when routes change, so if placed high
+ * in the React tree, descendant components (e.g. Details pages) can implement their own logic to override the behavior
+ * as long as they rerun when the routes change.
+ */
+export function useDocumentTitleFromRoutes() {
+  const matches = useMatches()
+
+  useEffect(() => {
+    // As a heuristic, we get the last path string of the most specific current route.
+
+    // To improve this, we could put custom data in the route handle returned by useMatches:
+    // https://reactrouter.com/en/main/hooks/use-matches#usematches
+
+    const portalTitle = import.meta.env.VITE_PORTAL_NAME
+    const routeTitle = matches.at(-1)?.pathname.split('/').at(-1)
+    if (routeTitle) {
+      document.title = `${portalTitle} - ${routeTitle}`
+    } else {
+      // Set a default title
+      document.title = portalTitle
+    }
+  }, [matches])
+}