Merge pull request #613 from nickgros/SWC-6627

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

@@ -282,7 +282,7 @@ export const EntityHeaderTable = (props: EntityHeaderTableProps) => {
     })
     setRefsInState(newRowRefs)
   }
-  ;``
+
   const isSelection = selectionCount > 0
   const totalRowCount = data.length
   const filteredRowCount = table.getPrePaginationRowModel().rows.length

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

@@ -1,21 +1,29 @@
 import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
-import { Button } from '@mui/material'
 import { MarkdownPopover, MarkdownPopoverProps } from './MarkdownPopover'
+import { userEvent, within } from '@storybook/testing-library'
+import { InfoTwoTone } from '@mui/icons-material'
 
 const meta = {
   title: 'Markdown/MarkdownPopover',
+  component: MarkdownPopover,
   args: {
+    children: <InfoTwoTone />,
     contentProps: { markdown: '' },
   },
-  render: args => (
-    <MarkdownPopover {...args}>
-      <Button variant="contained" color="primary">
-        Button
-      </Button>
-    </MarkdownPopover>
-  ),
-} satisfies Meta<Omit<MarkdownPopoverProps, 'children'>>
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/0oPm5lLSUva8kyfVNMS6FA/Sage-Style-%26-Component-Library?type=design&node-id=187-6607',
+    },
+  },
+
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const showPopoverButton = canvas.getByRole('button')
+    await userEvent.click(showPopoverButton)
+  },
+} satisfies Meta<MarkdownPopoverProps>
 export default meta
 type Story = StoryObj<typeof meta>
 
@@ -30,7 +38,7 @@ export const WithAction: Story = {
   args: {
     contentProps: {
       markdown:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed tellus lorem. In varius dui nec porttitor tristique. Suspendisse purus orci, dictum at lacus et, egestas commodo tortor. Mauris elementum, ligula in aliquet volutpat, sem arcu vestibulum enim, at scelerisque justo diam ut velit. Fusce iaculis tincidunt velit, vel dignissim dolor condimentum et. Sed ut nibh ac nunc facilisis facilisis.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Phasellus sed tellus lorem](https://synapse.org/). In varius dui nec porttitor tristique. Suspendisse purus orci, dictum at lacus et, egestas commodo tortor. Mauris elementum, ligula in aliquet volutpat, sem arcu vestibulum enim, at scelerisque justo diam ut velit. Fusce iaculis tincidunt velit, vel dignissim dolor condimentum et. Sed ut nibh ac nunc facilisis facilisis.',
     },
     placement: 'right',
     actionButton: {
@@ -51,14 +59,3 @@ export const WikiPage: Story = {
     placement: 'right',
   },
 }
-
-export const NonButtonChild: Story = {
-  args: {
-    contentProps: { markdown: 'Tooltip on a div' },
-  },
-  render: args => (
-    <MarkdownPopover {...args}>
-      <div>Click Me</div>
-    </MarkdownPopover>
-  ),
-}

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

@@ -1,17 +1,17 @@
-import React, { useState } from 'react'
+import React, { useId } from 'react'
 import {
-  Button,
   Box,
-  TooltipProps,
-  tooltipClasses,
+  Button,
   ButtonProps,
+  tooltipClasses,
+  TooltipProps,
+  Typography,
 } from '@mui/material'
 import MarkdownSynapse, { MarkdownSynapseProps } from './MarkdownSynapse'
-import { Typography } from '@mui/material'
 import LightTooltip from '../styled/LightTooltip'
+import { atom, useAtom } from 'jotai'
 
-export type MarkdownPopoverProps = {
-  children: JSX.Element
+export type MarkdownPopoverProps = React.PropsWithChildren<{
   contentProps: MarkdownSynapseProps
   sx?: TooltipProps['sx']
   placement?: TooltipProps['placement']
@@ -25,7 +25,7 @@ export type MarkdownPopoverProps = {
   }
   maxWidth?: string
   minWidth?: string
-}
+}>
 
 const buttonBoxSx = {
   display: 'flex',
@@ -37,6 +37,9 @@ const buttonBoxSx = {
   },
 }
 
+// Register a global atom to track which popover is open, to ensure only one is shown at any given time
+const openMarkdownPopoverAtom = atom<string | null>(null)
+
 export const MarkdownPopover: React.FunctionComponent<MarkdownPopoverProps> = ({
   children,
   contentProps,
@@ -47,7 +50,12 @@ export const MarkdownPopover: React.FunctionComponent<MarkdownPopoverProps> = ({
   maxWidth = '500px',
   minWidth = '300px',
 }: MarkdownPopoverProps) => {
-  const [show, setShow] = useState(false)
+  const id = useId()
+  const [openMarkdownPopoverId, setOpenMarkdownPopoverId] = useAtom(
+    openMarkdownPopoverAtom,
+  )
+
+  const show = openMarkdownPopoverId === id
 
   const content = (
     <Box sx={{ padding: '20px' }}>
@@ -62,15 +70,18 @@ export const MarkdownPopover: React.FunctionComponent<MarkdownPopoverProps> = ({
             onClick={() => {
               actionButton.onClick()
               if (actionButton.closePopoverOnClick) {
-                setShow(false)
+                setOpenMarkdownPopoverId(null)
               }
             }}
           >
             {actionButton.content}
           </Button>
         )}
         {showCloseButton && (
-          <Button variant="outlined" onClick={() => setShow(false)}>
+          <Button
+            variant="outlined"
+            onClick={() => setOpenMarkdownPopoverId(null)}
+          >
             Close
           </Button>
         )}
@@ -82,7 +93,9 @@ export const MarkdownPopover: React.FunctionComponent<MarkdownPopoverProps> = ({
     <LightTooltip
       title={content}
       placement={placement}
-      onClick={() => setShow(!show)}
+      onClick={() =>
+        setOpenMarkdownPopoverId(currentId => (currentId == id ? null : id))
+      }
       open={show}
       sx={{
         ...sx,

packages/synapse-react-client/src/components/styled/LightTooltip.tsx

@@ -1,5 +1,11 @@
 import React from 'react'
-import { Tooltip, TooltipProps, tooltipClasses, styled } from '@mui/material'
+import {
+  Tooltip,
+  TooltipProps,
+  tooltipClasses,
+  styled,
+  linkClasses,
+} from '@mui/material'
 import { StyledComponent } from '@emotion/styled'
 
 export const LightTooltip: StyledComponent<TooltipProps> = styled(
@@ -8,7 +14,7 @@ export const LightTooltip: StyledComponent<TooltipProps> = styled(
   ),
 )(({ theme }) => ({
   [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: theme.palette.common.white,
+    backgroundColor: theme.palette.background.paper,
     color: theme.palette.grey[1000],
     boxShadow: theme.shadows[1],
     border: `1px solid ${theme.palette.grey[500]}`,
@@ -18,7 +24,10 @@ export const LightTooltip: StyledComponent<TooltipProps> = styled(
       boxShadow: theme.shadows[1],
       border: `1px solid ${theme.palette.grey[500]}`,
     },
-    color: theme.palette.common.white,
+    color: theme.palette.background.paper,
+  },
+  [`& .${linkClasses.root}`]: {
+    color: theme.palette.primary.main,
   },
 }))
 

packages/synapse-react-client/src/theme/useTheme.tsx → packages/synapse-react-client/src/theme/ThemeProvider.tsx

@@ -1,16 +1,8 @@
 import { createTheme, StyledEngineProvider, ThemeOptions } from '@mui/material'
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles'
-import { deepmerge } from '@mui/utils'
 import React, { useMemo } from 'react'
 import defaultMuiThemeOptions from './DefaultTheme'
-import type { PartialDeep } from 'type-fest'
-
-export function mergeTheme(
-  themeOverrides: ThemeOptions | PartialDeep<ThemeOptions>,
-): ThemeOptions {
-  // TODO: Handle merging color palettes where an entire palette can be generated from a single base color.
-  return deepmerge(defaultMuiThemeOptions, themeOverrides)
-}
+import { mergeTheme } from './mergeTheme'
 
 export type ThemeProviderProps = React.PropsWithChildren<{
   theme?: ThemeOptions

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

@@ -1,2 +1,3 @@
 export { defaultMuiThemeOptions } from './DefaultTheme'
-export * from './useTheme'
+export * from './ThemeProvider'
+export { mergeTheme } from './mergeTheme'

packages/synapse-react-client/src/utils/hooks/useTheme.test.tsx → packages/synapse-react-client/src/theme/mergeTheme.test.tsx

@@ -1,7 +1,7 @@
-import { mergeTheme } from '../../theme/useTheme'
 import { ThemeOptions } from '@mui/material'
-import defaultMuiThemeOptions from '../../theme/DefaultTheme'
+import defaultMuiThemeOptions from './DefaultTheme'
 import { PartialDeep } from 'type-fest'
+import { mergeTheme } from './mergeTheme'
 
 describe('Synapse Theme tests', () => {
   it('properly merges a custom theme with the default theme', () => {

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

@@ -0,0 +1,11 @@
+import { ThemeOptions } from '@mui/material'
+import type { PartialDeep } from 'type-fest'
+import { deepmerge } from '@mui/utils'
+import defaultMuiThemeOptions from './DefaultTheme'
+
+export function mergeTheme(
+  themeOverrides: ThemeOptions | PartialDeep<ThemeOptions>,
+): ThemeOptions {
+  // TODO: Handle merging color palettes where an entire palette can be generated from a single base color.
+  return deepmerge(defaultMuiThemeOptions, themeOverrides)
+}

packages/synapse-react-client/src/utils/context/FullContextProvider.tsx

@@ -4,7 +4,7 @@ import {
   QueryClientConfig,
   QueryClientProvider,
 } from 'react-query'
-import { ThemeProvider } from '../../theme/useTheme'
+import { ThemeProvider } from '../../theme/ThemeProvider'
 import { ThemeOptions } from '@mui/material'
 import { SynapseContextProvider, SynapseContextType } from './SynapseContext'
 

packages/synapse-react-client/stories/stubs/Tooltip/MuiTooltip.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { Link } from '@mui/material'
+import { InfoTwoTone } from '@mui/icons-material'
+import { Tooltip } from './MuiTooltip'
+import { userEvent, within } from '@storybook/testing-library'
+
+const meta = {
+  title: 'UI/MUI/Tooltip',
+  component: Tooltip,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/0oPm5lLSUva8kyfVNMS6FA/Sage-Style-%26-Component-Library?node-id=187%3A6615',
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const tooltipAnchor = canvas.getByTestId('tooltipAnchor')
+    await userEvent.hover(tooltipAnchor)
+  },
+} satisfies Meta
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Demo: Story = {
+  name: 'Tooltip',
+  args: {
+    children: <InfoTwoTone data-testid={'tooltipAnchor'} />,
+    title: (
+      <p>
+        This is some text, and{' '}
+        <Link href={'https://synapse.org/'}>here is a link</Link>.
+      </p>
+    ),
+  },
+}

packages/synapse-react-client/stories/stubs/Tooltip/MuiTooltip.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import {
+  Tooltip as MuiTooltip,
+  TooltipProps as MuiTooltipProps,
+} from '@mui/material'
+
+export interface TooltipProps extends MuiTooltipProps {}
+
+export const Tooltip = (props: TooltipProps) => <MuiTooltip {...props} />