PORTALS-3195 - Migrate bsmn portal to react-router v6

apps/portals/bsmn/src/App.scss

@@ -1,7 +1,7 @@
 // Load variable_overrides first, so correct values for variables will be applied to the rest of the styles
 @use './config/style/variable_overrides';
 
-@use '@sage-bionetworks/synapse-portal-framework/src/style/App';
+@use '@sage-bionetworks/synapse-portal-framework/style/App';
 
 // style_overrides should be last to ensure its styles have highest priority
 @use './config/style/style_overrides';

apps/portals/bsmn/src/config/explorePageRoutes.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { RouteObject } from 'react-router-dom'
+import { QueryWrapperPlotNav } from 'synapse-react-client'
+import { individualsQueryWrapperPlotNavProps } from './synapseConfigs/people'
+import { projectsQueryWrapperPlotNavProps } from './synapseConfigs/projects'
+import { publicationsQueryWrapperPlotNavProps } from './synapseConfigs/publications'
+import { studiesQueryWrapperPlotNavProps } from './synapseConfigs/studies'
+import { toolsQueryWrapperPlotNavProps } from './synapseConfigs/tools'
+
+const explorePageRoutes: RouteObject[] = [
+  {
+    path: 'Projects',
+    element: <QueryWrapperPlotNav {...projectsQueryWrapperPlotNavProps} />,
+  },
+  {
+    path: 'Data',
+    element: <QueryWrapperPlotNav {...studiesQueryWrapperPlotNavProps} />,
+  },
+  {
+    path: 'Tools',
+    element: <QueryWrapperPlotNav {...toolsQueryWrapperPlotNavProps} />,
+  },
+  {
+    path: 'People',
+    element: <QueryWrapperPlotNav {...individualsQueryWrapperPlotNavProps} />,
+  },
+  {
+    path: 'Publications',
+    element: <QueryWrapperPlotNav {...publicationsQueryWrapperPlotNavProps} />,
+  },
+]
+
+export default explorePageRoutes

apps/portals/bsmn/src/config/navbarConfig.ts

@@ -0,0 +1,33 @@
+import { NavbarConfig } from '@sage-bionetworks/synapse-portal-framework/components/navbar/Navbar'
+
+export const navbarConfig: NavbarConfig = {
+  routes: [
+    {
+      name: 'Home',
+      path: '/',
+      children: [
+        { name: 'About the Portal', path: '/#About the Portal' },
+        {
+          name: 'Grants and Principal Investigators',
+          path: '/#Grants and Principal Investigators',
+        },
+        { name: 'Acknowledgement', path: '/#Acknowledgement' },
+      ],
+    },
+    {
+      name: 'Explore',
+      path: '/Explore',
+      children: [
+        { name: 'Projects', path: '/Explore/Projects' },
+        { name: 'Data', path: '/Explore/Data' },
+        { name: 'Tools', path: '/Explore/Tools' },
+        { name: 'People', path: '/Explore/People' },
+        { name: 'Publications', path: '/Explore/Publications' },
+      ],
+    },
+    {
+      name: 'About',
+      path: '/About',
+    },
+  ],
+}

apps/portals/bsmn/src/config/routesConfig.tsx

@@ -0,0 +1,129 @@
+import App from '@sage-bionetworks/synapse-portal-framework/App'
+import ExploreWrapper from '@sage-bionetworks/synapse-portal-framework/components/Explore/ExploreWrapper'
+import Header from '@sage-bionetworks/synapse-portal-framework/components/Header'
+import { SectionLayout } from '@sage-bionetworks/synapse-portal-framework/components/SectionLayout'
+import sharedRoutes from '@sage-bionetworks/synapse-portal-framework/shared-config/sharedRoutes'
+import React from 'react'
+import { RouteObject } from 'react-router-dom'
+import {
+  Goals,
+  MarkdownSynapse,
+  SynapseConstants,
+  UserCardListGroups,
+} from 'synapse-react-client'
+import { ProjectDetailsPage } from '../pages/ProjectDetailsPage'
+import StudyDetailsPage from '../pages/StudyDetailsPage'
+import explorePageRoutes from './explorePageRoutes'
+
+const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: <App />,
+    children: [
+      ...sharedRoutes,
+      {
+        index: true,
+        element: (
+          <>
+            <Header />
+            <SectionLayout title={'About the Portal'} centerTitle>
+              <MarkdownSynapse
+                ownerId={'syn21645000'}
+                loadingSkeletonRowCount={10}
+              />
+            </SectionLayout>
+            <SectionLayout
+              ContainerProps={{
+                className: 'home-spacer',
+              }}
+            >
+              <Goals entityId={'syn23021143'} />
+            </SectionLayout>
+            <div className={'home-bg-dark'}>
+              <SectionLayout
+                title={'Grants and Principal Investigators'}
+                centerTitle
+                ContainerProps={{
+                  className: 'home-spacer',
+                }}
+              >
+                <UserCardListGroups
+                  sql="SELECT * FROM syn21781196 WHERE isFeatured='true'"
+                  columnName="Project Title"
+                  facetValues={[
+                    'Somatic Mosaicism in the brain of Tourette syndrome',
+                    'Somatic Mosaicism in Schizophrenia and Control Brains',
+                    '1/3-Schizophrenia Genetics and Brain Somatic Mosaicism',
+                    '2/3-Schizophrenia Genetics and Brain Somatic Mosaicism',
+                    '3/3-Schizophrenia Genetics and Brain Somatic Mosaicism',
+                    'Role of brain somatic mosaicism in autism, schizophrenia, and bipolar disorder',
+                    'Mosaicism in focal cortical dysplasias spectrum seen in neuropsychiatric disease',
+                    '1/2-Somatic mosaicism and autism spectrum disorder',
+                    '2/2-Somatic mosaicism and autism spectrum disorder',
+                  ]}
+                  size={SynapseConstants.MEDIUM_USER_CARD}
+                  useQueryResultUserData={true}
+                  summaryLinkText="Explore All People"
+                  summaryLink="/Explore/People"
+                  count={6}
+                />
+              </SectionLayout>
+            </div>
+            <SectionLayout title={'Acknowledgement'} centerTitle>
+              <MarkdownSynapse
+                ownerId={'syn23308351'}
+                loadingSkeletonRowCount={10}
+              />
+            </SectionLayout>
+          </>
+        ),
+      },
+      {
+        path: 'Explore',
+        element: (
+          <ExploreWrapper
+            explorePaths={[
+              {
+                path: 'Projects',
+              },
+              {
+                path: 'Data',
+              },
+              {
+                path: 'Tools',
+              },
+              {
+                path: 'People',
+              },
+              {
+                path: 'Publications',
+              },
+            ]}
+          />
+        ),
+        children: explorePageRoutes,
+      },
+      {
+        path: 'Explore/Projects/DetailsPage',
+        element: <ProjectDetailsPage />,
+      },
+      {
+        path: 'Explore/Data/DetailsPage',
+        element: <StudyDetailsPage />,
+      },
+      {
+        path: 'About',
+        element: (
+          <SectionLayout title={'About'}>
+            <MarkdownSynapse
+              ownerId={'syn21896405'}
+              loadingSkeletonRowCount={20}
+            />
+          </SectionLayout>
+        ),
+      },
+    ],
+  },
+]
+
+export default routes