Merge branch 'main' into PORTALS-3313

.github/workflows/deploy-portal-prod.yml

@@ -8,11 +8,19 @@ on:
         description: Which portal to deploy
         options:
           - adknowledgeportal
+          - arkportal
+          - bsmn
+          - cancercomplexity
           - challengeportal
+          - digitalhealth
+          - elportal
+          - genie
+          - nf
+          - stopadportal
       tag:
         required: true
         type: string
-        description: Which tag to deploy from
+        description: Which tag or branch to deploy from
 
 jobs:
   build-and-deploy:
@@ -37,6 +45,5 @@ jobs:
           role-duration-seconds: 1200
       - name: setup-outputbucket-prod
         run: |
-          cd apps/portals
-          echo chmod +x ./deploy.sh
-          echo ./deploy.sh WARNING-push-production ${{ inputs.portal-name }}
+          chmod +x apps/synapse-portal-framework/run.sh
+          ./apps/synapse-portal-framework/run.sh WARNING-push-production ${{ inputs.portal-name }}

apps/SageAccountWeb/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import { Route, Routes } from 'react-router-dom'
 import {
   CookiesNotification,

apps/SageAccountWeb/src/AppContext.tsx

@@ -1,4 +1,5 @@
-import React, { useContext } from 'react'
+import { createContext, ReactNode, useContext } from 'react'
+
 import { SignedTokenInterface } from '@sage-bionetworks/synapse-types'
 
 export type AppContextType = {
@@ -13,18 +14,17 @@ export type AppContextType = {
 /**
  * This must be exported to use the context in class components.
  */
-export const AppContext = React.createContext<AppContextType | undefined>(
-  undefined,
-)
+export const AppContext = createContext<AppContextType | undefined>(undefined)
 
 export type AppContextProviderProps = {
   appContext: AppContextType
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
-export const AppContextProvider: React.FunctionComponent<
-  AppContextProviderProps
-> = ({ children, appContext }) => {
+export function AppContextProvider({
+  children,
+  appContext,
+}: AppContextProviderProps) {
   return (
     <AppContext.Provider value={appContext}>{children}</AppContext.Provider>
   )

apps/SageAccountWeb/src/AppInitializer.tsx

@@ -1,5 +1,6 @@
 import { SignedTokenInterface } from '@sage-bionetworks/synapse-types'
-import React, { useEffect, useState } from 'react'
+import { ReactNode, useEffect, useState } from 'react'
+
 import {
   SynapseConstants,
   SynapseUtilityFunctions,
@@ -10,7 +11,7 @@ import { useSourceApp } from './components/useSourceApp'
 import useMaybeRedirectToSignTermsOfService from './hooks/useMaybeRedirectToSignTermsOfService'
 import { getSearchParam } from './URLUtils'
 
-function AppInitializer(props: { children?: React.ReactNode }) {
+function AppInitializer(props: { children?: ReactNode }) {
   const [signedToken, setSignedToken] = useState<
     SignedTokenInterface | undefined
   >()

apps/SageAccountWeb/src/AppWrapper.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { PropsWithChildren } from 'react'
 import { RESET_2FA_ROUTE, RESET_2FA_SIGNED_TOKEN_PARAM } from './Constants'
 import { StyledEngineProvider } from '@mui/material/styles'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
@@ -24,7 +24,7 @@ const queryClient = new QueryClient({
  * @constructor
  */
 export default function AppWrapper(
-  props: React.PropsWithChildren<Record<never, never>>,
+  props: PropsWithChildren<Record<never, never>>,
 ) {
   const navigate = useNavigate()
 

apps/SageAccountWeb/src/LoginPage.tsx

@@ -1,5 +1,4 @@
 import { Box, Typography } from '@mui/material'
-import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import {
   LoginMethod,

apps/SageAccountWeb/src/Versions.tsx

@@ -1,8 +1,7 @@
-import React from 'react'
 import './Versions.scss'
 import synapseReactClientPackageJson from 'synapse-react-client/package.json'
 
-const Versions: React.FunctionComponent = () => {
+function Versions() {
   return (
     <a
       className="Versions footer-item"

apps/SageAccountWeb/src/components/AccountCreatedPage.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { SourceAppLogo } from './SourceApp'
 import { Button, Grid, Link, Typography } from '@mui/material'
 import { AppContextConsumer } from '../AppContext'

apps/SageAccountWeb/src/components/AccountSettings.tsx

@@ -18,7 +18,7 @@ import {
   VerificationState,
   VerificationStateEnum,
 } from '@sage-bionetworks/synapse-types'
-import React, { useEffect, useRef, useState } from 'react'
+import { RefObject, useEffect, useRef, useState } from 'react'
 import { Form } from 'react-bootstrap'
 import { Link as RouterLink, useLocation, useNavigate } from 'react-router-dom'
 import {
@@ -42,9 +42,7 @@ import { ORCiDButton } from './ProfileValidation/ORCiDButton'
 import { UnbindORCiDDialog } from './ProfileValidation/UnbindORCiD'
 import { StyledFormControl } from './StyledComponents'
 
-const CompletionStatus: React.FC<{ isComplete: boolean | undefined }> = ({
-  isComplete,
-}) => {
+function CompletionStatus({ isComplete }: { isComplete: boolean | undefined }) {
   return (
     <div className="item-completion">
       {isComplete ? (
@@ -203,7 +201,7 @@ export const AccountSettings = () => {
     }
   }, [hash])
 
-  const handleScroll = (ref: React.RefObject<HTMLDivElement>) => {
+  const handleScroll = (ref: RefObject<HTMLDivElement>) => {
     ref.current?.scrollIntoView({ behavior: 'smooth' })
   }
   const isRequestValidationButtonDisabled =

apps/SageAccountWeb/src/components/AccountSettingsTopBar.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { BadgeOutlined } from '@mui/icons-material'
 import { Box, SxProps, Typography } from '@mui/material'
 import { useSourceApp } from './useSourceApp'
@@ -9,7 +8,7 @@ import {
 } from 'synapse-react-client'
 import { Link } from '@mui/material'
 
-const AccountSettingsTopBar: React.FunctionComponent = () => {
+function AccountSettingsTopBar() {
   const sourceApp = useSourceApp()
   const iconSx: SxProps = {
     width: '32px',

apps/SageAccountWeb/src/components/BackButton.tsx

@@ -1,14 +1,14 @@
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import { IconButton, SxProps } from '@mui/material'
-import React from 'react'
+import { MouseEventHandler } from 'react'
 import {
   Link as RouterLink,
   LinkProps as RouterLinkProps,
 } from 'react-router-dom'
 
 type StyleProps = { sx?: SxProps }
 type BackLinkProps = { to: RouterLinkProps['to'] }
-type BackButtonProps = { onClick: React.MouseEventHandler<HTMLButtonElement> }
+type BackButtonProps = { onClick: MouseEventHandler<HTMLButtonElement> }
 
 export type BackButtonLinkProps = StyleProps & (BackLinkProps | BackButtonProps)
 
@@ -24,10 +24,10 @@ export const backButtonSx = {
   },
 }
 
-export const BackButton: React.FC<BackButtonLinkProps> = ({
+export function BackButton({
   sx = backButtonSx,
   ...otherProps
-}) => {
+}: BackButtonLinkProps) {
   return (
     <>
       {'onClick' in otherProps ? (

apps/SageAccountWeb/src/components/CertificationQuiz.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Link as RouterLink } from 'react-router-dom'
 import { MuiContainer, CertificationQuiz as Quiz } from 'synapse-react-client'
 import ReturnArrow from '../assets/ReturnArrow.svg?url'

apps/SageAccountWeb/src/components/ChangePasswordPage.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { LeftRightPanel } from './LeftRightPanel'
 import { SourceAppLogo } from './SourceApp'
 import { SetPasswordInstructions } from './ResetPassword'

apps/SageAccountWeb/src/components/ConfigureEmail.tsx

@@ -12,7 +12,7 @@ import {
   TextField,
   Typography,
 } from '@mui/material'
-import React, { useEffect, useState } from 'react'
+import { SyntheticEvent, useEffect, useState } from 'react'
 import {
   displayToast,
   SynapseClient,
@@ -82,10 +82,7 @@ export const ConfigureEmail = (props: ConfigureEmailProps) => {
     }
   }, [emailVerificationToken])
 
-  const changePrimaryEmail = async (
-    event: React.SyntheticEvent,
-    email: string,
-  ) => {
+  const changePrimaryEmail = async (event: SyntheticEvent, email: string) => {
     event.preventDefault()
     try {
       await SynapseClient.updateNotificationEmail(email, accessToken)
@@ -96,7 +93,7 @@ export const ConfigureEmail = (props: ConfigureEmailProps) => {
     }
   }
 
-  const deleteEmail = async (event: React.SyntheticEvent, email: string) => {
+  const deleteEmail = async (event: SyntheticEvent, email: string) => {
     event.preventDefault()
     try {
       await SynapseClient.deleteEmail(accessToken, email)
@@ -107,7 +104,7 @@ export const ConfigureEmail = (props: ConfigureEmailProps) => {
     }
   }
 
-  const addEmail = async (event: React.SyntheticEvent) => {
+  const addEmail = async (event: SyntheticEvent) => {
     event.preventDefault()
     try {
       const callbackUrl = `${SynapseClient.getRootURL()}${

apps/SageAccountWeb/src/components/CurrentAffiliationPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { SourceAppLogo } from './SourceApp'
 import { TextField, Typography } from '@mui/material'
 import { LeftRightPanel } from './LeftRightPanel'

apps/SageAccountWeb/src/components/EmailConfirmationPage.tsx

@@ -1,15 +1,12 @@
 import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined'
 import { Button, Link } from '@mui/material'
 import Avatar from '@mui/material/Avatar'
-import React from 'react'
 import { Container } from 'react-bootstrap'
 
 export type EmailConfirmationPageProps = {
   email: string
 }
-export const EmailConfirmationPage: React.FunctionComponent<
-  EmailConfirmationPageProps
-> = ({ email }) => {
+export function EmailConfirmationPage({ email }: EmailConfirmationPageProps) {
   const buttonSx = {
     width: '100%',
     padding: '10px',

apps/SageAccountWeb/src/components/Footer.tsx

@@ -1,5 +1,5 @@
 import { Box, Typography } from '@mui/material'
-import React from 'react'
+import { memo } from 'react'
 import { ExperimentalMode } from 'synapse-react-client'
 
 function Footer() {
@@ -22,4 +22,4 @@ function Footer() {
   )
 }
 
-export default React.memo(Footer)
+export default memo(Footer)

apps/SageAccountWeb/src/components/JoinTeamPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Box, Button, Typography, useTheme } from '@mui/material'
 import { useAppContext } from '../AppContext'
 import {

apps/SageAccountWeb/src/components/LeftRightPanel.tsx

@@ -1,12 +1,15 @@
-import React from 'react'
 import { StyledInnerContainer, StyledOuterContainer } from './StyledComponents'
 import { Box, useTheme } from '@mui/material'
 
-export const LeftRightPanel: React.FC<{
+export function LeftRightPanel({
+  leftContent,
+  rightContent,
+  className,
+}: {
   leftContent: JSX.Element
   rightContent: JSX.Element
   className?: string
-}> = ({ leftContent, rightContent, className }) => {
+}) {
   const theme = useTheme()
   return (
     <StyledOuterContainer className={className}>

apps/SageAccountWeb/src/components/LogoutPage.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import { SynapseClient } from 'synapse-react-client'
 

apps/SageAccountWeb/src/components/OAuthClientManagementPage.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { SourceAppLogo } from './SourceApp'
 import { StyledOuterContainer } from './StyledComponents'
 import { Box, Paper, Typography } from '@mui/material'

apps/SageAccountWeb/src/components/PersonalAccessTokensPage.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { SourceAppLogo } from './SourceApp'
 import { StyledOuterContainer } from './StyledComponents'
 import { Box, Paper, Typography } from '@mui/material'

apps/SageAccountWeb/src/components/ProfileAvatar.tsx

@@ -1,5 +1,5 @@
 import Slider from '@mui/material/Slider'
-import React, { useEffect, useState } from 'react'
+import { ChangeEvent, useEffect, useRef, useState } from 'react'
 import { Box, IconButton, SxProps } from '@mui/material'
 import {
   ConfirmationDialog,
@@ -56,7 +56,7 @@ export const ProfileAvatar = (props: ProfileAvatarProps) => {
     }
   }
 
-  const onSelectFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const onSelectFile = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
       const reader = new FileReader()
       reader.addEventListener('load', () => {
@@ -67,7 +67,7 @@ export const ProfileAvatar = (props: ProfileAvatarProps) => {
     }
   }
 
-  const hiddenFileInput = React.useRef<HTMLInputElement>(null)
+  const hiddenFileInput = useRef<HTMLInputElement>(null)
   const clickHandler = () => {
     if (hiddenFileInput?.current) {
       hiddenFileInput.current.click()

apps/SageAccountWeb/src/components/ProfileValidation/AccountVerificationProgress.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import PaperAirPlane from '../../assets/PaperAirPlane.svg?url'
 import RocketShip from '../../assets/RocketShip.svg?url'
 import Arrow from '../../assets/Arrow.svg?url'
@@ -32,9 +31,7 @@ interface VerificationProgressProps {
   signFont: string
 }
 
-export const VerificationProgress: React.FC<VerificationProgressProps> = (
-  props: VerificationProgressProps,
-) => {
+export function VerificationProgress(props: VerificationProgressProps) {
   return (
     <div className="progress-container">
       <div
@@ -92,9 +89,9 @@ interface AccountVerificationProgressProps {
   step: ValidationWizardStep
 }
 
-export const AccountVerificationProgess: React.FC<
-  AccountVerificationProgressProps
-> = ({ step }) => {
+export function AccountVerificationProgess({
+  step,
+}: AccountVerificationProgressProps) {
   return (
     <div className="progress-indicator">
       <div style={{ textAlign: 'center' }}>

apps/SageAccountWeb/src/components/ProfileValidation/Attestation.tsx

@@ -1,6 +1,6 @@
 import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined'
 import { Typography } from '@mui/material'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { FileUpload } from 'synapse-react-client'
 import { displayToast } from 'synapse-react-client'
 import {
@@ -16,7 +16,7 @@ export type AttestationProps = {
   onNext: (vs: VerificationSubmission) => void
 }
 
-const Attestation: React.FC<AttestationProps> = (props: AttestationProps) => {
+function Attestation(props: AttestationProps) {
   const { verificationSubmission } = props
   const [attachments, setAttachments] = useState(
     verificationSubmission.attachments,

apps/SageAccountWeb/src/components/ProfileValidation/ContinueButton.tsx

@@ -1,8 +1,7 @@
 import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt'
 import { Button, ButtonProps, useTheme } from '@mui/material'
-import React from 'react'
 
-export const ContinueButton: React.FC<ButtonProps> = (props: ButtonProps) => {
+export function ContinueButton(props: ButtonProps) {
   const theme = useTheme()
   return (
     <Button