From 84d5f03846ba335aba0a033ce0658a9f8d8a6106 Mon Sep 17 00:00:00 2001
From: Nick Grosenbacher <nickgrosenbacher@gmail.com>
Date: Mon, 16 Dec 2024 12:49:23 -0500
Subject: [PATCH] SWC-7166

- Add utility to properly spread Sx props
- Fix `display` of OrientationBanner
- Use utility in components spreading sx
---
 .../src/assets/mui_components/Kinomics.tsx    |  6 ++--
 .../src/assets/mui_components/Proteomics.tsx  |  6 ++--
 .../AccessApprovalCheckMark.tsx               | 11 +++---
 .../FullWidthAlert/FullWidthAlert.tsx         | 23 +++++++------
 .../components/Markdown/MarkdownPopover.tsx   |  6 ++--
 .../OrientationBanner/OrientationBanner.tsx   | 24 ++++++-------
 .../src/theme/spreadSx.test.ts                | 34 +++++++++++++++++++
 .../src/theme/spreadSx.ts                     | 14 ++++++++
 8 files changed, 89 insertions(+), 35 deletions(-)
 create mode 100644 packages/synapse-react-client/src/theme/spreadSx.test.ts
 create mode 100644 packages/synapse-react-client/src/theme/spreadSx.ts

diff --git a/packages/synapse-react-client/src/assets/mui_components/Kinomics.tsx b/packages/synapse-react-client/src/assets/mui_components/Kinomics.tsx
index ab80e2d193..f73c01b48a 100644
--- a/packages/synapse-react-client/src/assets/mui_components/Kinomics.tsx
+++ b/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"
diff --git a/packages/synapse-react-client/src/assets/mui_components/Proteomics.tsx b/packages/synapse-react-client/src/assets/mui_components/Proteomics.tsx
index fdc87fc008..26754f9a52 100644
--- a/packages/synapse-react-client/src/assets/mui_components/Proteomics.tsx
+++ b/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"
diff --git a/packages/synapse-react-client/src/components/AccessRequirementList/AccessApprovalCheckMark.tsx b/packages/synapse-react-client/src/components/AccessRequirementList/AccessApprovalCheckMark.tsx
index 25a3f8f2ae..1eaa7c790b 100644
--- a/packages/synapse-react-client/src/components/AccessRequirementList/AccessApprovalCheckMark.tsx
+++ b/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}
diff --git a/packages/synapse-react-client/src/components/FullWidthAlert/FullWidthAlert.tsx b/packages/synapse-react-client/src/components/FullWidthAlert/FullWidthAlert.tsx
index a0a65e3fa8..d9dd2a10c8 100644
--- a/packages/synapse-react-client/src/components/FullWidthAlert/FullWidthAlert.tsx
+++ b/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}
diff --git a/packages/synapse-react-client/src/components/Markdown/MarkdownPopover.tsx b/packages/synapse-react-client/src/components/Markdown/MarkdownPopover.tsx
index bdc5ceb8e2..4467e32b6f 100644
--- a/packages/synapse-react-client/src/components/Markdown/MarkdownPopover.tsx
+++ b/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"
diff --git a/packages/synapse-react-client/src/components/OrientationBanner/OrientationBanner.tsx b/packages/synapse-react-client/src/components/OrientationBanner/OrientationBanner.tsx
index 9e283244a6..3ad1a054ad 100644
--- a/packages/synapse-react-client/src/components/OrientationBanner/OrientationBanner.tsx
+++ b/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)}
     />
   )
 }
diff --git a/packages/synapse-react-client/src/theme/spreadSx.test.ts b/packages/synapse-react-client/src/theme/spreadSx.test.ts
new file mode 100644
index 0000000000..49abdc5993
--- /dev/null
+++ b/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]])
+  })
+})
diff --git a/packages/synapse-react-client/src/theme/spreadSx.ts b/packages/synapse-react-client/src/theme/spreadSx.ts
new file mode 100644
index 0000000000..283552c183
--- /dev/null
+++ b/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()
+}