SWC-7166 - Fix OrientationBanner display & add spreadSx utility

packages/synapse-react-client/src/assets/mui_components/Kinomics.tsx

@@ -1,15 +1,15 @@
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+import { spreadSx } from '../../theme/spreadSx'
 
 const Kinomics = (props: SvgIconProps) => {
   const { sx } = props
   return (
     <SvgIcon
       {...props}
-      sx={{
-        ...sx,
+      sx={spreadSx(sx, {
         fill: 'none',
         stroke: 'currentColor',
-      }}
+      })}
     >
       <path
         d="M17.2604 5.74075C17.0511 5.81088 16.9361 5.99345 16.6968 6.05053C16.1772 6.15587 15.9853 6.68058 15.7507 7.0974C14.9952 8.40577 14.4245 9.80329 14.0259 11.2576C13.8857 11.7868 13.6594 12.2877 13.3729 12.7624C13.2145 13.0245 13.0776 13.2781 13.1969 13.5802"

packages/synapse-react-client/src/assets/mui_components/Proteomics.tsx

@@ -1,15 +1,15 @@
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+import { spreadSx } from '../../theme/spreadSx'
 
 const Proteomics = (props: SvgIconProps) => {
   const { sx } = props
   return (
     <SvgIcon
       {...props}
-      sx={{
-        ...sx,
+      sx={spreadSx(sx, {
         fill: 'none',
         stroke: 'currentColor',
-      }}
+      })}
     >
       <path
         d="M3 9.53306C4.43051 8.75266 7.26172 7.97826 7.14251 11.1239C7.09929 12.2644 5.62399 16.1064 7.85777 16.1064C9.25848 16.1064 10.8141 15.5211 13.9672 13.7952C18.0799 11.5441 19.5701 13.465 19.7191 13.9753C20.037 14.7357 19.5879 16.4185 15.2487 17.0669C14.0268 17.2494 11.285 17.7272 11.7321 19.6482C11.9975 20.7888 14.3249 22.0794 15.2487 19.4981C15.4743 18.8678 14.1205 14.9903 13.8182 11.8442C13.7288 10.9138 14.9328 9.17287 17.2455 6.89171C18.1992 5.51101 17.2455 1.96917 13.2818 3.28988C12.5665 3.65002 11.4638 5.12076 10.7486 5.51101C10.1823 5.81996 8.71607 6.32743 6.30805 5.15083"

packages/synapse-react-client/src/components/AccessRequirementList/AccessApprovalCheckMark.tsx

@@ -5,6 +5,7 @@ import {
 } from '@mui/icons-material'
 import Skeleton from '@mui/material/Skeleton'
 import { ReactNode } from 'react'
+import { spreadSx } from '../../theme/spreadSx'
 import ConditionalWrapper from '../utils/ConditionalWrapper'
 import { Avatar, styled, SxProps, useTheme } from '@mui/material'
 
@@ -67,10 +68,12 @@ export default function AccessApprovalCheckMark({
   return (
     <AccessApprovalCheckMarkContainer
       data-testid={`AccessApprovalCheckMark-${status}`}
-      sx={{
-        backgroundColor: backgroundColor,
-        ...sx,
-      }}
+      sx={spreadSx(
+        {
+          backgroundColor: backgroundColor,
+        },
+        sx,
+      )}
     >
       <ConditionalWrapper
         condition={status === RequirementItemStatus.LOADING}

packages/synapse-react-client/src/components/FullWidthAlert/FullWidthAlert.tsx

@@ -10,6 +10,7 @@ import {
   Tooltip,
 } from '@mui/material'
 import { MouseEventHandler, ReactNode, useEffect } from 'react'
+import { spreadSx } from '../../theme/spreadSx'
 
 export type AlertButtonConfig = {
   text: string
@@ -118,17 +119,19 @@ function FullWidthAlert(props: FullWidthAlertProps) {
   const alert = (
     <Alert
       severity={variantToSeverity(variant)}
-      sx={{
-        width: '100%',
-        my: '10px',
-        '.MuiAlert-message': {
-          flexGrow: 1,
+      sx={spreadSx(
+        {
+          width: '100%',
+          my: '10px',
+          '.MuiAlert-message': {
+            flexGrow: 1,
+          },
+          '.MuiAlert-icon': {
+            display: { xs: 'none', sm: 'flex' },
+          },
         },
-        '.MuiAlert-icon': {
-          display: { xs: 'none', sm: 'flex' },
-        },
-        ...sx,
-      }}
+        sx,
+      )}
       className="FullWidthAlert"
       onClose={onClose}
       icon={icon}

packages/synapse-react-client/src/components/Markdown/MarkdownPopover.tsx

@@ -8,6 +8,7 @@ import {
   TooltipProps,
   Typography,
 } from '@mui/material'
+import { spreadSx } from '../../theme/spreadSx'
 import MarkdownSynapse, { MarkdownSynapseProps } from './MarkdownSynapse'
 import LightTooltip from '../styled/LightTooltip'
 import { atom, useAtom } from 'jotai'
@@ -97,13 +98,12 @@ export function MarkdownPopover({
       title={content}
       placement={placement}
       open={show}
-      sx={{
-        ...sx,
+      sx={spreadSx(sx, {
         [`& .${tooltipClasses.tooltip}`]: {
           maxWidth: { maxWidth },
           minWidth: { minWidth },
         },
-      }}
+      })}
     >
       <Box
         role="button"

packages/synapse-react-client/src/components/OrientationBanner/OrientationBanner.tsx

@@ -1,11 +1,13 @@
-import { useTheme } from '@mui/material'
+import { Theme } from '@mui/material'
+import { SxProps } from '@mui/system'
+import { ReactNode, useState } from 'react'
+import Illustrations from '../../assets/illustrations'
+import { spreadSx } from '../../theme/spreadSx'
+import { useCookiePreferences } from '../../utils/hooks/useCookiePreferences'
 import FullWidthAlert, {
   AlertButtonConfig,
   FullWidthAlertProps,
 } from '../FullWidthAlert/FullWidthAlert'
-import Illustrations from '../../assets/illustrations'
-import { useCookiePreferences } from '../../utils/hooks/useCookiePreferences'
-import { ReactNode, useState } from 'react'
 
 const OrientationBannerNameStrings = [
   'Challenges',
@@ -54,9 +56,10 @@ function OrientationBanner(props: OrientationBannerProps) {
     localStorage.getItem(storageBannerId) === null,
   )
 
-  const theme = useTheme()
-  const defaultSx = {
-    display: { xs: 'none', md: 'unset' },
+  const defaultSx: SxProps<Theme> = theme => ({
+    [theme.breakpoints.down('md')]: {
+      display: 'none',
+    },
     backgroundColor: '#F9FAFB',
     border: 'none',
     boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.05)',
@@ -65,7 +68,7 @@ function OrientationBanner(props: OrientationBannerProps) {
     paddingLeft: 4,
     '.MuiAlert-icon': { mr: 5 },
     '.MuiAlertTitle-root': { color: theme.palette.grey[1000] },
-  }
+  })
   const BannerIllustration = Illustrations[name]
 
   return (
@@ -83,10 +86,7 @@ function OrientationBanner(props: OrientationBannerProps) {
         }
         setShowBanner(false)
       }}
-      sx={{
-        ...defaultSx,
-        ...sx,
-      }}
+      sx={spreadSx(defaultSx, sx)}
     />
   )
 }

packages/synapse-react-client/src/theme/spreadSx.test.ts

@@ -0,0 +1,34 @@
+import { SxProps, Theme } from '@mui/material'
+import { spreadSx } from './spreadSx'
+
+describe('spreadSx', () => {
+  const sxObject: SxProps<Theme> = { color: 'red' }
+  const nestedSxObject: SxProps<Theme> = [{ color: 'blue' }]
+  const sxFunction: SxProps<Theme> = theme => ({
+    color: theme.palette.primary.main,
+  })
+  const nestedSxFunction: SxProps<Theme> = [
+    theme => ({ color: theme.palette.secondary.main }),
+  ]
+
+  it('Removes undefined sx', () => {
+    expect(spreadSx(sxObject, undefined)).toEqual([sxObject])
+  })
+  it('Flattens a nested array', () => {
+    expect(spreadSx(sxObject, nestedSxObject)).toEqual([
+      sxObject,
+      nestedSxObject[0],
+    ])
+  })
+  it('Handles a mix of functions and objects', () => {
+    expect(
+      spreadSx(
+        sxObject,
+        nestedSxObject,
+        sxFunction,
+        nestedSxFunction,
+        undefined,
+      ),
+    ).toEqual([sxObject, nestedSxObject[0], sxFunction, nestedSxFunction[0]])
+  })
+})

packages/synapse-react-client/src/theme/spreadSx.ts

@@ -0,0 +1,14 @@
+import { Theme } from '@mui/material'
+import { SxProps } from '@mui/system'
+
+/**
+ * Utility to combine multiple SxProps into a single SxProps object that can be passed to a component.
+ *
+ * See https://github.com/mui/material-ui/issues/29274#issuecomment-953980228
+ * @param sxProps
+ */
+export function spreadSx(
+  ...sxProps: (SxProps<Theme> | undefined)[]
+): SxProps<Theme> {
+  return sxProps.filter(sx => sx !== undefined).flat()
+}