feat: Refactor setFlagshipUI feature

- Better CSS value fetching
- Typescript instead of JavaScript

react/ActionMenu/index.jsx

@@ -104,7 +104,7 @@ const ActionMenu = ({
   containerElRef
 }) => {
   const theme = useTheme()
-  const sidebar = document.querySelector('[class*="sidebar"]')
+  const sidebar = document.getElementById('sidebar')
 
   useSetFlagshipUI(
     {

react/Dialog/index.jsx

@@ -1,11 +1,13 @@
 import React from 'react'
-import { default as MUIDialog } from '@material-ui/core/Dialog'
 import { RemoveScroll } from 'react-remove-scroll'
+import { default as MUIDialog } from '@material-ui/core/Dialog'
+import { styles } from '@material-ui/core/Backdrop/Backdrop'
+import { useTheme } from '@material-ui/core'
+
 import useBreakpoints from '../hooks/useBreakpoints'
 import { useCozyTheme } from '../CozyTheme'
 import themesStyles from '../../stylus/settings/palette.styl'
 import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
-import { useTheme } from '@material-ui/core'
 
 const Dialog = props => {
   const { isMobile, isTablet } = useBreakpoints()
@@ -39,8 +41,8 @@ const Dialog = props => {
       : {
           bottomBackground: theme.palette.background.default,
           bottomTheme: 'light',
-          bottomOverlay: 'rgba(0, 0, 0, 0.5)',
-          topOverlay: 'rgba(0, 0, 0, 0.5)',
+          bottomOverlay: styles.root.backgroundColor,
+          topOverlay: styles.root.backgroundColor,
           topBackground: theme.palette.background.paper,
           topTheme: 'light'
         },

react/hooks/useSetFlagshipUi/useSetFlagshipUI.spec.js → react/hooks/useSetFlagshipUi/useSetFlagshipUI.spec.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 import { renderHook } from '@testing-library/react-hooks'
 import { useSetFlagshipUI } from './useSetFlagshipUI'
 import { useWebviewIntent } from 'cozy-intent'

react/hooks/useSetFlagshipUi/useSetFlagshipUI.ts

@@ -0,0 +1,41 @@
+import { useEffect } from 'react'
+import pickBy from 'lodash/pickBy'
+import identity from 'lodash/identity'
+import isEmpty from 'lodash/isEmpty'
+import isObject from 'lodash/isObject'
+
+import { useWebviewIntent } from 'cozy-intent'
+import { FlagshipUI } from 'cozy-intent/dist/api/models/applications'
+import { WebviewService } from 'cozy-intent/dist/api/services/WebviewService'
+
+const parseArg = (
+  webviewIntent?: WebviewService | void,
+  arg?: FlagshipUI
+): void => {
+  if (!webviewIntent) return
+
+  const sanitized = isObject(arg) && pickBy(arg, identity)
+  const validUI = !isEmpty(sanitized) && sanitized
+
+  validUI && webviewIntent.call('setFlagshipUI', validUI)
+}
+
+export const useSetFlagshipUI = (
+  onMount: FlagshipUI,
+  onUnmount?: FlagshipUI
+): void => {
+  const webviewIntent = useWebviewIntent()
+
+  useEffect(() => {
+    parseArg(webviewIntent, onMount)
+
+    return () => parseArg(webviewIntent, onUnmount)
+
+    /**
+     * We don't want to listen to onMount/onUnmount arguments
+     * It will create far too many unwanted calls
+     * We only care about webviewIntent presence,
+     * which should be undefined on first call (not guaranteed)
+     */
+  }, [webviewIntent]) // eslint-disable-line react-hooks/exhaustive-deps
+}