cozy-ui 131.1.0-beta.9 → 131.2.0

package/react/Dialog/DialogEffects.spec.tsx

@@ -0,0 +1,430 @@
+import { Theme } from '@material-ui/core'
+import '@testing-library/jest-dom'
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import { WebviewIntentProvider, WebviewService } from 'cozy-intent'
+
+import Dialog from '.'
+import { DOMStrings, makeOnMount, makeOnUnmount } from './DialogEffects'
+import { ThemeColor } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import DemoProvider from '../providers/DemoProvider'
+
+const theme = {
+  palette: {
+    background: {
+      paper: DOMStrings.BackgroundPaper,
+      default: DOMStrings.BackgroundDefault
+    }
+  }
+} as Theme
+
+const cozybar = document.createElement('div')
+const cozybarBackground = 'rgb(153, 153, 153)'
+cozybar.style.backgroundColor = cozybarBackground
+
+const sidebar = document.createElement('div')
+
+const rootModal = document.createElement('div')
+const rootModalColor = 'rgba(29, 33, 42, 0.9)'
+rootModal.style.color = rootModalColor
+
+const Wrapper = ({
+  open,
+  service
+}: {
+  open?: boolean
+  service: WebviewService
+}): JSX.Element => {
+  return (
+    <WebviewIntentProvider webviewService={service}>
+      <DemoProvider>
+        <Dialog open={open} />
+      </DemoProvider>
+    </WebviewIntentProvider>
+  )
+}
+
+it('should provide overlay UI when opened non-fullscreen', () => {
+  expect(
+    makeOnMount({
+      cozybar,
+      theme
+    })
+  ).toEqual({
+    bottomBackground: theme.palette.background[DOMStrings.BackgroundPaper],
+    bottomOverlay: DOMStrings.OverlayActive,
+    bottomTheme: ThemeColor.Light,
+    topBackground: cozybarBackground,
+    topOverlay: DOMStrings.OverlayActive,
+    topTheme: ThemeColor.Light
+  })
+})
+
+it('should provide fullscreen UI when opened fullscreen', () => {
+  expect(
+    makeOnMount({
+      fullscreen: true,
+      theme
+    })
+  ).toEqual({
+    bottomBackground: theme.palette.background[DOMStrings.BackgroundPaper],
+    bottomTheme: ThemeColor.Dark,
+    topBackground: theme.palette.background[DOMStrings.BackgroundPaper],
+    topTheme: ThemeColor.Dark
+  })
+})
+
+it('should provide limited overlay UI when opened non-fullscreen as a stacked Dialog', () => {
+  expect(
+    makeOnMount({
+      rootModal,
+      sidebar,
+      theme
+    })
+  ).toEqual({
+    bottomOverlay: DOMStrings.OverlayActive,
+    bottomTheme: ThemeColor.Light,
+    topOverlay: DOMStrings.OverlayActive,
+    topTheme: ThemeColor.Light
+  })
+})
+
+it('should provide overloaded overlay UI with sidebar background if existing', () => {
+  expect(
+    makeOnMount({
+      sidebar,
+      theme
+    })
+  ).toEqual({
+    bottomBackground: theme.palette.background[DOMStrings.BackgroundDefault],
+    bottomOverlay: DOMStrings.OverlayActive,
+    bottomTheme: ThemeColor.Light,
+    topOverlay: DOMStrings.OverlayActive,
+    topTheme: ThemeColor.Light
+  })
+})
+
+it('should provide a basic overlay UI when opened as a stacked Dialog', () => {
+  expect(
+    makeOnMount({
+      rootModal,
+      theme
+    })
+  ).toEqual({
+    bottomOverlay: DOMStrings.OverlayActive,
+    bottomTheme: ThemeColor.Light,
+    topOverlay: DOMStrings.OverlayActive,
+    topTheme: ThemeColor.Light
+  })
+})
+
+it('should provide a basic overlay UI when opened as a stacked Dialog regardless of CozyBar', () => {
+  expect(
+    makeOnMount({
+      cozybar,
+      rootModal,
+      theme
+    })
+  ).toEqual({
+    bottomOverlay: DOMStrings.OverlayActive,
+    bottomTheme: ThemeColor.Light,
+    topOverlay: DOMStrings.OverlayActive,
+    topTheme: ThemeColor.Light
+  })
+})
+
+it('should provide an inversed overlay UI when leaving overlay mode', () => {
+  expect(
+    makeOnUnmount({
+      rootModal,
+      theme
+    })
+  ).toEqual({
+    bottomOverlay: DOMStrings.OverlayTransparent,
+    bottomTheme: ThemeColor.Dark,
+    topOverlay: DOMStrings.OverlayTransparent,
+    topTheme: ThemeColor.Dark
+  })
+})
+
+it('should provide an inversed overlay UI when leaving overlay mode regardless of immersive or stacked mode', () => {
+  expect(
+    makeOnUnmount({
+      immersive: true,
+      rootModal,
+      theme
+    })
+  ).toEqual({
+    bottomOverlay: DOMStrings.OverlayTransparent,
+    bottomTheme: ThemeColor.Dark,
+    topOverlay: DOMStrings.OverlayTransparent,
+    topTheme: ThemeColor.Dark
+  })
+})
+
+it('should provide a strong reset when unmounting a Dialog in presence of a Sidebar', () => {
+  expect(
+    makeOnUnmount({
+      sidebar,
+      theme,
+      isLight: true
+    })
+  ).toEqual({
+    bottomBackground: theme.palette.background[DOMStrings.BackgroundDefault],
+    bottomOverlay: DOMStrings.OverlayTransparent,
+    bottomTheme: ThemeColor.Dark,
+    topBackground: undefined,
+    topOverlay: DOMStrings.OverlayTransparent,
+    topTheme: ThemeColor.Dark
+  })
+})
+
+it('should provide the default black on white UI when unmounting in simple contexts', () => {
+  expect(
+    makeOnUnmount({
+      theme,
+      isLight: true
+    })
+  ).toEqual({
+    bottomBackground: theme.palette.background[DOMStrings.BackgroundPaper],
+    bottomOverlay: DOMStrings.OverlayTransparent,
+    bottomTheme: ThemeColor.Dark,
+    topOverlay: DOMStrings.OverlayTransparent,
+    topTheme: ThemeColor.Dark
+  })
+})
+
+it('should provide the default immersive UI when unmounting in immersive context', () => {
+  expect(
+    makeOnUnmount({
+      immersive: true,
+      theme
+    })
+  ).toEqual({
+    bottomBackground: theme.palette.background[DOMStrings.BackgroundPaper],
+    bottomOverlay: DOMStrings.OverlayTransparent,
+    bottomTheme: ThemeColor.Light,
+    topBackground: undefined,
+    topOverlay: DOMStrings.OverlayTransparent,
+    topTheme: ThemeColor.Light
+  })
+})
+
+it('should provide the default black on white UI with the Cozybar background on bottom', () => {
+  expect(
+    makeOnUnmount({
+      cozybar,
+      theme,
+      isLight: true
+    })
+  ).toEqual({
+    bottomBackground: theme.palette.background[DOMStrings.BackgroundPaper],
+    bottomOverlay: DOMStrings.OverlayTransparent,
+    bottomTheme: ThemeColor.Dark,
+    topBackground: cozybarBackground,
+    topOverlay: DOMStrings.OverlayTransparent,
+    topTheme: ThemeColor.Dark
+  })
+})
+
+it('should provide the inversed UI when Cozybar is not black on white, but white on blue', () => {
+  cozybar.classList.add('coz-theme-primary')
+
+  expect(
+    makeOnUnmount({
+      cozybar,
+      theme,
+      isLight: true
+    })
+  ).toEqual({
+    bottomBackground: theme.palette.background[DOMStrings.BackgroundPaper],
+    bottomOverlay: DOMStrings.OverlayTransparent,
+    bottomTheme: ThemeColor.Dark,
+    topBackground: cozybarBackground,
+    topOverlay: DOMStrings.OverlayTransparent,
+    topTheme: ThemeColor.Light
+  })
+})
+
+jest.mock('cozy-device-helper', () => ({
+  isFlagshipApp: (): boolean => true
+}))
+jest.mock('../hooks/useSetFlagshipUi/helpers', () => ({
+  getFlagshipMetadata: (): Record<string, never> => ({}),
+  setRsgFlagshipElements: (): null => null
+}))
+
+const onOpenMountExpected = {
+  bottomBackground: '#fff',
+  bottomOverlay: 'rgba(0, 0, 0, 0.5)',
+  bottomTheme: 'light',
+  topOverlay: 'rgba(0, 0, 0, 0.5)',
+  topTheme: 'light'
+}
+
+const onOpenUnmountExpected = {
+  bottomBackground: '#fff',
+  bottomOverlay: 'transparent',
+  bottomTheme: 'dark',
+  topOverlay: 'transparent',
+  topTheme: 'dark'
+}
+
+it('should emit onMount() immediately and onUnmount() when the whole tree is deleted', () => {
+  const caller = jest.fn<void, unknown[]>()
+  const service = {
+    call: (...args: unknown[]): void => caller(...args)
+  } as unknown as WebviewService
+
+  const { unmount } = render(<Wrapper service={service} open={true} />)
+
+  expect(caller).toHaveBeenNthCalledWith(
+    1,
+    'setFlagshipUI',
+    onOpenMountExpected,
+    'cozy-ui/Dialog (onOpenMount)'
+  )
+
+  unmount()
+
+  expect(caller).toHaveBeenNthCalledWith(
+    2,
+    'setFlagshipUI',
+    onOpenUnmountExpected,
+    'cozy-ui/Dialog (onOpenUnmount)'
+  )
+})
+
+it('should emit onMount() immediately and onUnmount() when Dialog is deleted from the tree', () => {
+  const caller = jest.fn<void, unknown[]>()
+  const service = {
+    call: (...args: unknown[]): void => caller(...args)
+  } as unknown as WebviewService
+
+  const { rerender } = render(<Wrapper service={service} open={true} />)
+
+  expect(caller).toHaveBeenNthCalledWith(
+    1,
+    'setFlagshipUI',
+    onOpenMountExpected,
+    'cozy-ui/Dialog (onOpenMount)'
+  )
+
+  rerender(
+    <WebviewIntentProvider webviewService={service}></WebviewIntentProvider>
+  )
+
+  expect(caller).toHaveBeenNthCalledWith(
+    2,
+    'setFlagshipUI',
+    onOpenUnmountExpected,
+    'cozy-ui/Dialog (onOpenUnmount)'
+  )
+})
+
+it('should not emit onMount() if mounted as open:false, then emit onMount() on open:true, then emit onUnmount() on switch back to open:false, then emit onMount() again on switch back to open:true, then emit onUnmount() again when the tree is deleted', () => {
+  const caller = jest.fn<void, unknown[]>()
+  const service = {
+    call: (...args: unknown[]): void => caller(...args)
+  } as unknown as WebviewService
+
+  const { rerender, unmount } = render(
+    <Wrapper service={service} open={false} />
+  )
+
+  expect(caller).not.toHaveBeenCalled()
+
+  rerender(<Wrapper service={service} open={true} />)
+
+  expect(caller).toHaveBeenNthCalledWith(
+    1,
+    'setFlagshipUI',
+    onOpenMountExpected,
+    'cozy-ui/Dialog (onOpenMount)'
+  )
+
+  rerender(<Wrapper service={service} open={false} />)
+
+  expect(caller).toHaveBeenNthCalledWith(
+    2,
+    'setFlagshipUI',
+    onOpenUnmountExpected,
+    'cozy-ui/Dialog (onOpenUnmount)'
+  )
+
+  rerender(<Wrapper service={service} open={true} />)
+
+  expect(caller).toHaveBeenNthCalledWith(
+    3,
+    'setFlagshipUI',
+    onOpenMountExpected,
+    'cozy-ui/Dialog (onOpenMount)'
+  )
+
+  unmount()
+
+  expect(caller).toHaveBeenNthCalledWith(
+    4,
+    'setFlagshipUI',
+    onOpenUnmountExpected,
+    'cozy-ui/Dialog (onOpenUnmount)'
+  )
+})
+
+it('when provided with a faulty <Dialog /> that has no open prop, it should emit nothing at mount or unmount', () => {
+  /** Using Dialog without open prop is forbidden, so we acknowledge that but since we need to test it we silence the console */
+  jest.spyOn(console, 'error').mockImplementation(() => {
+    // do nothing
+  })
+
+  const caller = jest.fn<void, unknown[]>()
+  const service = {
+    call: (...args: unknown[]): void => caller(...args)
+  } as WebviewService
+
+  const { unmount } = render(<Wrapper service={service} />)
+
+  expect(caller).not.toHaveBeenCalled()
+
+  unmount()
+
+  /** As it was mounted without the open prop, and we never changed it, then it never sent an onMount message.
+   * In this scenario, it is only logical that it does not send an unMount message either since it never showed up.
+   */
+  expect(caller).not.toHaveBeenCalled()
+})
+
+it('when provided with a faulty <Dialog /> that has no open prop, and then fixed at runtime, it should emit mount and unmount messages as shown earlier', () => {
+  const caller = jest.fn<void, unknown[]>()
+  const service = {
+    call: (...args: unknown[]): void => caller(...args)
+  } as unknown as WebviewService
+
+  const { rerender, unmount } = render(<Wrapper service={service} />)
+
+  expect(caller).not.toHaveBeenCalled()
+
+  rerender(<Wrapper service={service} open={true} />)
+
+  expect(caller).toHaveBeenNthCalledWith(
+    1,
+    'setFlagshipUI',
+    onOpenMountExpected,
+    'cozy-ui/Dialog (onOpenMount)'
+  )
+
+  rerender(<Wrapper service={service} open={false} />)
+
+  expect(caller).toHaveBeenNthCalledWith(
+    2,
+    'setFlagshipUI',
+    onOpenUnmountExpected,
+    'cozy-ui/Dialog (onOpenUnmount)'
+  )
+
+  unmount()
+
+  /** Checking it doesn't send two unmount messages in a row */
+  expect(caller).toHaveBeenCalledTimes(2)
+})

package/react/Dialog/DialogEffects.ts

@@ -0,0 +1,208 @@
+import { getLuminance, Theme, useTheme } from '@material-ui/core'
+import { useEffect } from 'react'
+
+import { isFlagshipApp } from 'cozy-device-helper'
+import { useWebviewIntent } from 'cozy-intent'
+
+import { getFlagshipMetadata } from '../hooks/useSetFlagshipUi/helpers'
+import { isRsg } from '../hooks/useSetFlagshipUi/helpers'
+import {
+  FlagshipUI,
+  ThemeColor,
+  parseArg
+} from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import { useCozyTheme } from '../providers/CozyTheme'
+
+interface DialogEffectsOptions {
+  cozybar?: Element | null
+  fullscreen?: boolean
+  immersive?: boolean
+  sidebar?: HTMLElement | Element | null
+  rootModal?: HTMLElement | Element | null
+  theme: Theme
+  isLight?: boolean
+}
+
+export enum DOMStrings {
+  BackgroundDefault = 'default',
+  BackgroundPaper = 'paper',
+  CozyBarBackground = 'background-color',
+  CozyBarClass = '.coz-bar-wrapper',
+  CozyBarPrimaryClass = 'coz-theme-primary',
+  DialogClass = '.MuiPaper-root',
+  OverlayActive = 'rgba(0, 0, 0, 0.5)',
+  OverlayTransparent = 'transparent',
+  RootModalColor = 'color',
+  SidebarID = 'sidebar'
+}
+
+const LUMINANCE_BREAKPOINT = 0.5
+
+export const makeOnMount = ({
+  cozybar,
+  fullscreen,
+  sidebar,
+  rootModal,
+  theme
+}: DialogEffectsOptions): FlagshipUI => {
+  const hasBottomBackground = !rootModal
+  const hasTopBackground = cozybar && !rootModal
+
+  return fullscreen
+    ? {
+        bottomBackground: theme.palette.background.paper,
+        bottomTheme: ThemeColor.Dark,
+        topBackground: theme.palette.background.paper,
+        topTheme: ThemeColor.Dark
+      }
+    : {
+        bottomBackground: hasBottomBackground
+          ? theme.palette.background[
+              sidebar
+                ? DOMStrings.BackgroundDefault
+                : DOMStrings.BackgroundPaper
+            ]
+          : undefined,
+        bottomTheme: ThemeColor.Light,
+        bottomOverlay: DOMStrings.OverlayActive,
+        topOverlay: DOMStrings.OverlayActive,
+        topBackground: hasTopBackground
+          ? getComputedStyle(cozybar).getPropertyValue(
+              DOMStrings.CozyBarBackground
+            )
+          : undefined,
+        topTheme: ThemeColor.Light
+      }
+}
+
+export const makeOnUnmount = ({
+  rootModal,
+  theme,
+  immersive,
+  sidebar,
+  cozybar,
+  isLight
+}: DialogEffectsOptions): FlagshipUI => {
+  const hasDarkRoot =
+    rootModal &&
+    getLuminance(
+      getComputedStyle(rootModal).getPropertyValue(DOMStrings.RootModalColor)
+    ) < LUMINANCE_BREAKPOINT
+  const hasBottomBackground = !rootModal
+  const hasDarkBottomTheme = hasDarkRoot || (!immersive && isLight)
+  const hasTopBackground = cozybar && !rootModal
+  const hasDarkTopTheme =
+    hasDarkRoot ||
+    (!immersive &&
+      !(
+        cozybar && cozybar.classList.contains(DOMStrings.CozyBarPrimaryClass)
+      ) &&
+      isLight)
+
+  return {
+    bottomBackground: hasBottomBackground
+      ? theme.palette.background[
+          sidebar ? DOMStrings.BackgroundDefault : DOMStrings.BackgroundPaper
+        ]
+      : undefined,
+    bottomTheme: hasDarkBottomTheme ? ThemeColor.Dark : ThemeColor.Light,
+    bottomOverlay: DOMStrings.OverlayTransparent,
+    topOverlay: DOMStrings.OverlayTransparent,
+    topBackground: hasTopBackground
+      ? getComputedStyle(cozybar).getPropertyValue(DOMStrings.CozyBarBackground)
+      : undefined,
+    topTheme: hasDarkTopTheme ? ThemeColor.Dark : ThemeColor.Light
+  }
+}
+
+const makeCaller = (
+  fullScreen: boolean,
+  hasAnotherDialog: boolean,
+  immersive: boolean
+): string =>
+  [
+    'cozy-ui/Dialog',
+    fullScreen ? '--fullScreen' : '',
+    hasAnotherDialog ? '--stacked' : '',
+    immersive ? '--immersive' : ''
+  ].join('')
+
+const getRootModal = (): HTMLElement | null => {
+  const modals = document.querySelectorAll(DOMStrings.DialogClass)
+
+  /**
+   * If we have more than one modal, we are in a stacked dialog scenario.
+   * In this case we want to have access to the DOM element of the root modal.
+   * This will allow us to apply the correct background color if a root modal exists, for instance.
+   */
+  return modals.length > 1 ? (modals[0] as HTMLElement) : null
+}
+
+const useHook = (open: boolean, fullscreen?: boolean): void => {
+  const theme = useTheme()
+  const { isLight } = useCozyTheme()
+  const cozybar = document.querySelector(DOMStrings.CozyBarClass)
+  const sidebar = document.getElementById(DOMStrings.SidebarID)
+  const rootModal = getRootModal()
+  const immersive = Boolean(getFlagshipMetadata().immersive)
+
+  useDialogSetFlagshipUI(
+    open,
+    makeOnMount({ fullscreen, theme, sidebar, rootModal, cozybar, isLight }),
+    makeOnUnmount({ rootModal, theme, immersive, sidebar, cozybar, isLight }),
+    makeCaller(!!fullscreen, !!rootModal, immersive)
+  )
+}
+
+/**
+ * Custom version of useSetFlagshipUi() that is aware of the Dialog component.
+ *
+ * The difference here is that we send messages to the Native app when a props change.
+ * In the original version, we send the mount message as soon as the component is rendered.
+ *
+ * Dialog can be rendered but hidden, so we need to wait for the open prop to be true
+ */
+export const useDialogSetFlagshipUI = (
+  open: boolean,
+  onMount: FlagshipUI,
+  onUnmount?: FlagshipUI,
+  caller?: string
+): void => {
+  const webviewIntent = useWebviewIntent()
+
+  useEffect(() => {
+    if (open)
+      parseArg(webviewIntent, onMount, `${caller || 'unknown'} (onOpenMount)`)
+
+    return () => {
+      /**
+       * As we are listening to the open prop, we still want to send an unmount message when the prop changes to false.
+       * To avoid false positives, we need to ensure the component is currently showing.
+       * We do that by checking if value of open during this cleanup cycle is false,
+       * if it is, that means the component is currently showing and is in the process of hiding.
+       *
+       * Note that this will also handle abrupt unmounting, as in hiding the dialog without using the open prop.
+       */
+      if (!open || open === undefined) return
+
+      parseArg(
+        webviewIntent,
+        onUnmount,
+        `${caller || 'unknown'} (onOpenUnmount)`
+      )
+    }
+
+    /**
+     * We don't want to listen to onMount/onUnmount arguments
+     * It will create far too many unwanted calls
+     * We only care about webviewIntent or open props presence,
+     * Open should always be present, webviewIntent is more uncertain
+     */
+  }, [open, webviewIntent]) // eslint-disable-line react-hooks/exhaustive-deps
+}
+
+export const useDialogEffects =
+  isFlagshipApp() || isRsg
+    ? useHook
+    : // eslint-disable-next-line @typescript-eslint/no-empty-function
+      (): void => {}

package/react/Dialog/DialogTitle.jsx

@@ -0,0 +1,3 @@
+import DialogTitle from '@material-ui/core/DialogTitle'
+
+export default DialogTitle