PORTALS-3084: set OG tags client-side using react helmet. examples in this PR show…

apps/portals/package.json

@@ -12,6 +12,8 @@
     "@sage-bionetworks/react-base-table": "^1.13.4",
     "@sage-bionetworks/synapse-types": "workspace:*",
     "@tanstack/react-query": "5.22.2",
+    "@types/react-helmet": "^6.1.11",
+    "@upsetjs/react": "^1.11.0",
     "clone-deep": "^4.0.1",
     "dayjs": "^1.11.10",
     "katex": "^0.16.10",
@@ -22,13 +24,13 @@
     "react-bootstrap": "^1.6.8",
     "react-cookie": "4.0.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-plotly.js": "^2.6.0",
     "react-router-dom": "^5.3.4",
     "react-spinners": "^0.13.8",
     "react-switch": "^7.0.0",
     "sass": "^1.71.1",
-    "synapse-react-client": "workspace:*",
-    "@upsetjs/react": "^1.11.0"
+    "synapse-react-client": "workspace:*"
   },
   "scripts": {
     "clean": "rimraf coverage",

apps/portals/src/RouteResolver.tsx

@@ -4,6 +4,7 @@ import { GenericRoute } from './types/portal-config'
 import routesConfig from './config/routesConfig'
 import sharedRouteConfig from './shared-config/sharedRoutes'
 import { ComponentRenderer } from './ComponentRenderer'
+import HelmetWrapper from './portal-components/HelmetWrapper'
 
 const ROUTES: GenericRoute = {
   ...sharedRouteConfig,
@@ -33,6 +34,7 @@ function RecursiveRouteRenderer(props: {
 
   return (
     <>
+      <HelmetWrapper description={document.title} />
       {'synapseConfigArray' in route &&
         route.synapseConfigArray &&
         route.synapseConfigArray.map((config, index) => {

apps/portals/src/configurations/adknowledgeportal/routesConfig.ts

@@ -28,6 +28,12 @@ const routes: GenericRoute[] = [
     hideRouteFromNavbar: true,
     exact: true,
     synapseConfigArray: [
+      {
+        name: 'HelmetWrapper',
+        props: {
+          description: 'ADKP main page description',
+        },
+      },
       {
         name: 'Programs',
         title: 'Programs',

apps/portals/src/portal-components/HelmetWrapper.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Helmet } from 'react-helmet'
+
+export type HelmetWrapperProps = {
+  description: string
+}
+
+const removeElement = (property: string) => {
+  const element = document.querySelector(`[property='${property}']`)
+  if (!element?.hasAttribute('data-react-helmet')) {
+    element?.remove()
+  }
+}
+
+export default function HelmetWrapper({ description }: HelmetWrapperProps) {
+  removeElement('og:title')
+  removeElement('og:description')
+  removeElement('og:url')
+
+  return (
+    <Helmet>
+      {/* RecursiveRouteRenderer handles page title change based on the router */}
+      {/* <title>{title}</title> */}
+      <meta property="og:title" content={document.title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:url" content={window.location.href} />
+      {/* <meta property="og:image" content={info && info.avatar}/>
+      <meta property="og:image:url" content={info && info.avatar}/>
+      <meta property="og:image:type" content="image/jpeg"/> */}
+    </Helmet>
+  )
+}

apps/portals/src/portal-components/index.ts

@@ -25,6 +25,7 @@ import ChallengeSubmissionWrapper from './challengeportal/ChallengeSubmissionWra
 import ChallengeDataDownloadWrapper from './challengeportal/ChallengeDataDownloadWrapper'
 import ProjectDiscussionForum from './ProjectDiscussionForum'
 import SynapseComponentCollapse from './SynapseComponentCollapse'
+import HelmetWrapper from './HelmetWrapper'
 
 const PortalComponents = {
   RouteControlWrapper,
@@ -54,6 +55,7 @@ const PortalComponents = {
   ChallengeSubmissionWrapper,
   ChallengeDataDownloadWrapper,
   SynapseComponentCollapse,
+  HelmetWrapper,
 }
 
 export default PortalComponents

apps/portals/src/types/portal-config.ts

@@ -42,6 +42,7 @@ import { TabbedSynapseObjectsProps } from 'portal-components/TabbedSynapseObject
 import { ChallengeSubmissionWrapperProps } from 'portal-components/challengeportal/ChallengeSubmissionWrapper'
 import { RedirectToURLProps } from 'portal-components/RedirectToURL'
 import { SynapseComponentCollapseProps } from 'portal-components/SynapseComponentCollapse'
+import { HelmetWrapperProps } from 'portal-components/HelmetWrapper'
 
 // For styling the header on the home page -- the main title and the summary text
 export type HomePageHeaderConfig = {
@@ -313,6 +314,11 @@ type Redirect = {
   props: RedirectProps
 }
 
+type HelmetWrapper = {
+  name: 'HelmetWrapper'
+  props: HelmetWrapperProps
+}
+
 type Header = {
   name: 'Header'
   props: undefined
@@ -373,6 +379,7 @@ export type SynapseConfig = (
   | ChallengeDataDownloadWrapper
   | ChallengeSubmissionWrapper
   | TimelinePlot
+  | HelmetWrapper
 ) &
   Metadata