fix: editing and saving share dialog triggers hover state

apps/journeys-admin/src/components/Editor/Toolbar/Items/ShareItem/ShareItem.spec.tsx

@@ -436,4 +436,40 @@ describe('ShareItem', () => {
     const shareIcon = shareButton.querySelector('svg')
     expect(shareIcon).not.toBeInTheDocument()
   })
+
+  it('should call setHasOpenDialog when opening and closing dialog', async () => {
+    const setHasOpenDialog = jest.fn()
+
+    render(
+      <SnackbarProvider>
+        <MockedProvider mocks={[journeyForSharingMock]}>
+          <JourneyProvider
+            value={{ journey: defaultJourney, variant: 'admin' }}
+          >
+            <ShareItem
+              variant="button"
+              journey={defaultJourney}
+              setHasOpenDialog={setHasOpenDialog}
+            />
+          </JourneyProvider>
+        </MockedProvider>
+      </SnackbarProvider>
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Share' }))
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    expect(setHasOpenDialog).toHaveBeenCalledWith(true)
+    expect(setHasOpenDialog).toHaveBeenCalledTimes(1)
+
+    const closeButton = screen.getByTestId('dialog-close-button')
+    fireEvent.click(closeButton)
+
+    await waitFor(() => {
+      expect(setHasOpenDialog).toHaveBeenCalledWith(false)
+    })
+    expect(setHasOpenDialog).toHaveBeenCalledTimes(2)
+  })
 })

apps/journeys-admin/src/components/Editor/Toolbar/Items/ShareItem/ShareItem.tsx

@@ -50,6 +50,7 @@ interface ShareItemProps {
   handleCloseMenu?: () => void
   handleKeepMounted?: () => void
   buttonVariant?: 'icon' | 'default'
+  setHasOpenDialog?: (hasOpenDialog: boolean) => void
 }
 
 /**
@@ -68,7 +69,8 @@ export function ShareItem({
   journey,
   handleCloseMenu,
   handleKeepMounted,
-  buttonVariant = 'icon'
+  buttonVariant = 'icon',
+  setHasOpenDialog
 }: ShareItemProps): ReactElement {
   const { t } = useTranslation('apps-journeys-admin')
   const { enqueueSnackbar } = useSnackbar()
@@ -105,6 +107,7 @@ export function ShareItem({
     setAnchorEl(event.currentTarget)
     handleKeepMounted?.()
     handleCloseMenu?.()
+    setHasOpenDialog?.(true)
   }
   function setRoute(param: string): void {
     void router.push({ query: { ...router.query, param } }, undefined, {
@@ -128,6 +131,7 @@ export function ShareItem({
         open={Boolean(anchorEl)}
         onClose={() => {
           setAnchorEl(null)
+          setHasOpenDialog?.(false)
         }}
         dialogTitle={{ title: t('Share'), closeButton: true }}
         sx={{ minWidth: 350 }}

apps/journeys-admin/src/components/JourneyList/JourneyCard/JourneyCard.spec.tsx

@@ -1,5 +1,5 @@
 import { MockedProvider, MockedResponse } from '@apollo/client/testing'
-import { render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { SnackbarProvider } from 'notistack'
 
 import { useNavigationState } from '@core/journeys/ui/useNavigationState'
@@ -218,6 +218,50 @@ describe('JourneyCard', () => {
     expect(screen.getByTestId('JourneyCardInfo')).toBeInTheDocument()
   })
 
+  it('does not change hover state when dialog is open', async () => {
+    render(
+      <SnackbarProvider>
+        <MockedProvider>
+          <ThemeProvider>
+            <JourneyCard journey={defaultJourney} />
+          </ThemeProvider>
+        </MockedProvider>
+      </SnackbarProvider>
+    )
+
+    const card = screen.getByTestId('JourneyCard-journey-id')
+    const overlay = screen.getByTestId('JourneyCardOverlayBox')
+
+    expect(overlay).toHaveStyle({ opacity: '0' })
+
+    fireEvent.mouseEnter(card)
+    expect(overlay).toHaveStyle({ opacity: '1' })
+
+    fireEvent.mouseLeave(card)
+    expect(overlay).toHaveStyle({ opacity: '0' })
+
+    fireEvent.click(screen.getByTestId('JourneyCardMenuButton'))
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('menuitem', { name: 'Edit Details' })
+      ).toBeInTheDocument()
+    })
+
+    const editDetailsMenuItem = screen.getByRole('menuitem', {
+      name: 'Edit Details'
+    })
+    fireEvent.click(editDetailsMenuItem)
+
+    await waitFor(() => {
+      fireEvent.mouseLeave(card)
+    })
+
+    fireEvent.mouseEnter(card)
+
+    expect(overlay).toHaveStyle({ opacity: '0' })
+  })
+
   // MARK: Remove this once Siyang Cao + Mike Alison implement updated journey analytics feature
   it('TEMP - should not show journey analytics for local template card', () => {
     render(

apps/journeys-admin/src/components/JourneyList/JourneyCard/JourneyCard.tsx

@@ -75,6 +75,7 @@ export function JourneyCard({
   const [isCardHovered, setIsCardHovered] = useState(false)
   const [isImageLoading, setIsImageLoading] = useState(true)
   const [breakdownDialogOpen, setBreakdownDialogOpen] = useState(false)
+  const [hasOpenDialog, setHasOpenDialog] = useState(false)
 
   const isTemplateCard =
     journey.template === true && journey.team?.id !== 'jfp-team'
@@ -88,6 +89,12 @@ export function JourneyCard({
     }
   }, [duplicatedJourneyId, journey])
 
+  const updateHoverState = (hovered: boolean) => {
+    if (!hasOpenDialog) {
+      setIsCardHovered(hovered)
+    }
+  }
+
   return (
     <Card
       ref={
@@ -112,8 +119,8 @@ export function JourneyCard({
         boxShadow: isCardHovered ? 2 : 0
       }}
       data-testid={`JourneyCard-${journey.id}`}
-      onMouseEnter={() => setIsCardHovered(true)}
-      onMouseLeave={() => setIsCardHovered(false)}
+      onMouseEnter={() => updateHoverState(true)}
+      onMouseLeave={() => updateHoverState(false)}
     >
       <>
         <Box
@@ -133,8 +140,9 @@ export function JourneyCard({
             refetch={refetch}
             journey={journey}
             hovered={isCardHovered}
-            onMenuClose={() => setIsCardHovered(false)}
+            onMenuClose={() => updateHoverState(false)}
             template={journey.template ?? false}
+            setHasOpenDialog={setHasOpenDialog}
           />
         </Box>
         <CardActionArea
@@ -341,6 +349,7 @@ export function JourneyCard({
               />
             )}
             <Box
+              data-testid="JourneyCardOverlayBox"
               aria-hidden
               sx={{
                 position: 'absolute',

apps/journeys-admin/src/components/JourneyList/JourneyCard/JourneyCardMenu/DefaultMenu/DefaultMenu.tsx

@@ -71,6 +71,7 @@ interface DefaultMenuProps {
   handleKeepMounted?: () => void
   template?: boolean
   refetch?: () => Promise<ApolloQueryResult<GetAdminJourneys>>
+  setHasOpenDialog?: (hasOpenDialog: boolean) => void
 }
 
 /**
@@ -109,7 +110,8 @@ export function DefaultMenu({
   setOpenTranslateDialog,
   handleKeepMounted,
   template,
-  refetch
+  refetch,
+  setHasOpenDialog
 }: DefaultMenuProps): ReactElement {
   const { t } = useTranslation('apps-journeys-admin')
   const { activeTeam } = useTeam()
@@ -186,6 +188,7 @@ export function DefaultMenu({
         onClick={() => {
           setOpenDetailsDialog()
           handleCloseMenu()
+          setHasOpenDialog?.(true)
         }}
       />
       <Divider />
@@ -196,6 +199,7 @@ export function DefaultMenu({
           onClick={() => {
             setOpenAccessDialog()
             handleCloseMenu()
+            setHasOpenDialog?.(true)
           }}
         />
       )}
@@ -218,6 +222,7 @@ export function DefaultMenu({
         journey={journeyFromLazyQuery?.journey}
         handleCloseMenu={handleCloseMenu}
         handleKeepMounted={handleKeepMounted}
+        setHasOpenDialog={setHasOpenDialog}
       />
       <Divider sx={{ my: 1 }} />
       {template !== true && activeTeam != null && (
@@ -233,6 +238,7 @@ export function DefaultMenu({
             onClick={() => {
               setOpenTranslateDialog()
               handleCloseMenu()
+              setHasOpenDialog?.(true)
             }}
           />
           <Divider />
@@ -267,6 +273,7 @@ export function DefaultMenu({
           handleCloseMenu={handleCloseMenu}
           handleKeepMounted={handleKeepMounted}
           journey={journey}
+          setHasOpenDialog={setHasOpenDialog}
         />
       )}
       {activeTeam != null && (
@@ -285,6 +292,7 @@ export function DefaultMenu({
             onClick={() => {
               setOpenTrashDialog()
               handleCloseMenu()
+              setHasOpenDialog?.(true)
             }}
             disabled={cantManageJourney}
           />