Merge pull request #741 from jay-hodgson/PORTALS-2963

PORTALS-2963
Sage-Bionetworks · Feb 22, 2024 · e6d1ea1 · e6d1ea1
2 parents f8eaed6 + ed0373b
commit e6d1ea1
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 24 deletions.
diff --git a/apps/portals/src/portal-components/challengeportal/ChallengeDetailPageWrapper.tsx b/apps/portals/src/portal-components/challengeportal/ChallengeDetailPageWrapper.tsx
@@ -1,9 +1,10 @@
-import { Box } from '@mui/material'
-import * as React from 'react'
+import React from 'react'
+import { Link, Box, Skeleton } from '@mui/material'
 import {
   AppUtils,
   ChallengeDetailPage,
   SynapseQueries,
+  SynapseUtilityFunctions,
 } from 'synapse-react-client'
 
 /**
@@ -15,31 +16,83 @@ import {
  */
 const ChallengeDetailPageWrapper = () => {
   const projectId = AppUtils.useQuerySearchParam('id')
-  const { data, isLoading } = SynapseQueries.useGetEntityBundle(
-    projectId ?? '', //fallback for type safety, but should only be enabled when projectId is set
-    undefined,
-    {
-      includeAnnotations: true,
-    },
-    {
-      enabled: !!projectId,
-    },
-  )
-  if (isLoading) {
-    return <></>
+  const { data: entityBundle, isLoading: isEntityBundleLoading } =
+    SynapseQueries.useGetEntityBundle(
+      projectId ?? '', //fallback for type safety, but should only be enabled when projectId is set
+      undefined,
+      {
+        includeAnnotations: true,
+      },
+      {
+        enabled: !!projectId,
+      },
+    )
+  const { data: challenge, isLoading: isChallengeLoading } =
+    SynapseQueries.useGetEntityChallenge(
+      projectId ?? '', //fallback for type safety, but should only be enabled when projectId is set
+      {
+        enabled: !!projectId,
+      },
+    )
+  const { data: teamMembers, isLoading: isTeamMembersLoading } =
+    SynapseQueries.useGetTeamMembers(challenge?.participantTeamId ?? '', {
+      enabled: !!challenge,
+    })
+  if (isEntityBundleLoading || isChallengeLoading || isTeamMembersLoading) {
+    return <Skeleton height="60px" width="400px" />
   }
-  if (
-    !!projectId &&
-    data?.annotations.annotations['Status']?.value[0] == 'Active'
-  ) {
+  const isChallengeActive =
+    entityBundle?.annotations.annotations['Status']?.value[0] == 'Active'
+  const memberCount = teamMembers?.totalNumberOfResults
+  if (projectId !== undefined) {
     return (
-      <div className="container-fluid">
+      // mimic card container layout to align with card fields
+      <div className="container-fluid container-full-width">
         <div className="row">
           <div className="col-md-offset-1 col-md-10">
-            <Box
-              sx={{ position: 'absolute', marginTop: '-150px', zIndex: 100 }}
-            >
-              <ChallengeDetailPage projectId={projectId} />
+            <Box sx={{ display: 'flex', marginLeft: '15px' }}>
+              <Box sx={{ width: '25%', maxWidth: '215px' }} />
+              <Box sx={{ width: '100%' }}>
+                <Box
+                  sx={{
+                    position: 'relative',
+                    marginTop: '-150px',
+                    paddingLeft: '47px',
+                    zIndex: 100,
+                  }}
+                >
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      columnGap: '20px',
+                    }}
+                  >
+                    {isChallengeActive && (
+                      <ChallengeDetailPage projectId={projectId} />
+                    )}
+                    <Link
+                      target="_blank"
+                      rel="noreferrer"
+                      href={`${SynapseUtilityFunctions.getEndpoint(
+                        SynapseUtilityFunctions.BackendDestinationEnum
+                          .PORTAL_ENDPOINT,
+                      )}#!Team:${challenge?.participantTeamId}`}
+                      sx={{
+                        color: 'white',
+                        '&:hover': {
+                          color: 'white',
+                          textDecorationColor: 'white',
+                        },
+                        '&:focus': { color: 'white' },
+                        textDecorationColor: 'white',
+                      }}
+                    >
+                      {memberCount} Registered Participants
+                    </Link>
+                  </Box>
+                </Box>
+              </Box>
             </Box>
           </div>
         </div>

diff --git a/packages/synapse-react-client/src/utils/functions/index.ts b/packages/synapse-react-client/src/utils/functions/index.ts
@@ -8,7 +8,7 @@ import {
 } from './SqlFunctions'
 import { hex2ascii } from './StringUtils'
 import type { SQLOperator } from './SqlFunctions'
-import { BackendDestinationEnum } from './getEndpoint'
+import { BackendDestinationEnum, getEndpoint } from './getEndpoint'
 
 export * from './TableColumnSchemaUtils'
 export {
@@ -18,6 +18,7 @@ export {
   getIgnoredQueryFilterSearchParamKey,
   resultToJson,
   hex2ascii,
+  getEndpoint,
   BackendDestinationEnum,
   SQLOperator,
   QUERY_FILTERS_SESSION_STORAGE_KEY,