cozy-ui 74.4.0 → 74.5.0

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+# [74.5.0](https://github.com/cozy/cozy-ui/compare/v74.4.2...v74.5.0) (2022-09-09)
+
+
+### Bug Fixes
+
+* Change defaultProps to Snackbar component ([c749957](https://github.com/cozy/cozy-ui/commit/c749957))
+* Disabling the Portal on the BottomSheet component in the Viewer ([35ede40](https://github.com/cozy/cozy-ui/commit/35ede40))
+* Translations of the Qualification Viewer ([489f27a](https://github.com/cozy/cozy-ui/commit/489f27a))
+
+
+### Features
+
+* Add ActionMenuWrapper component ([653e7d5](https://github.com/cozy/cozy-ui/commit/653e7d5))
+* Add arrays of known metadata names ([ab84458](https://github.com/cozy/cozy-ui/commit/ab84458))
+* Add helper for formatting all known metadata ([2fa5906](https://github.com/cozy/cozy-ui/commit/2fa5906))
+* Add QualificationListItem's components ([93f2dd1](https://github.com/cozy/cozy-ui/commit/93f2dd1))
+* Add QualificationListItem's components to Qualification ([c987346](https://github.com/cozy/cozy-ui/commit/c987346))
+* Add ViewerSnackbar component to display alerts in Viewer ([1aef68c](https://github.com/cozy/cozy-ui/commit/1aef68c))
+* Add ViewerSnackbarContext to manage internal Snackbar component ([ce4d2f1](https://github.com/cozy/cozy-ui/commit/ce4d2f1))
+* Create an alert when the attribute is copied ([ccbd467](https://github.com/cozy/cozy-ui/commit/ccbd467))
+* Implement ViewerSnackbar in ViewerContainer component ([3c5eeae](https://github.com/cozy/cozy-ui/commit/3c5eeae))
+* Move `useReferencedContactName` call to Qualification component ([39ccd6e](https://github.com/cozy/cozy-ui/commit/39ccd6e))
+* Update Viewer locales files ([f418f95](https://github.com/cozy/cozy-ui/commit/f418f95))
+
+## [74.4.2](https://github.com/cozy/cozy-ui/compare/v74.4.1...v74.4.2) (2022-09-08)
+
+
+### Bug Fixes
+
+* isLoadingContacts on useReferencedContactName hook  ([dab3e09](https://github.com/cozy/cozy-ui/commit/dab3e09))
+
+## [74.4.1](https://github.com/cozy/cozy-ui/compare/v74.4.0...v74.4.1) (2022-09-08)
+
+
+### Bug Fixes
+
+* Restore BottomSheet items' gap in `FooterContent` container ([7ba1caf](https://github.com/cozy/cozy-ui/commit/7ba1caf))
+
 # [74.4.0](https://github.com/cozy/cozy-ui/compare/v74.3.0...v74.4.0) (2022-09-06)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "74.4.0",
+  "version": "74.5.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -65,6 +65,7 @@
     "intersection-observer"
   ],
   "devDependencies": {
+    "@argos-ci/cli": "^0.2.1",
     "@babel/cli": "7.17.6",
     "@babel/core": "7.17.8",
     "@babel/helper-builder-react-jsx": "7.16.7",
@@ -80,7 +81,6 @@
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "^3.2.1",
     "@testing-library/user-event": "^14.4.2",
-    "argos-cli": "^0.3.3",
     "autoprefixer-stylus": "1.0.0",
     "babel-loader": "8.2.4",
     "babel-plugin-css-modules-transform": "1.6.2",

package/react/Snackbar/Readme.md

@@ -7,6 +7,9 @@ import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import InfoIcon from 'cozy-ui/transpiled/react/Icons/Info'
+import {
+  BreakpointsProvider
+} from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 
 initialState = { open: false }
 
@@ -14,7 +17,7 @@ const handleToggle = () => {setState(state => ({ open: !state.open }))}
 
 ;
 
-<>
+<BreakpointsProvider>
   <Button
     variant="ghost"
     size="small"
@@ -34,7 +37,7 @@ const handleToggle = () => {setState(state => ({ open: !state.open }))}
     }
     onClose={handleToggle}
   />
-</>
+</BreakpointsProvider>
 ```
 
 ### With `Alert` inside the `Snackbar`
@@ -44,6 +47,9 @@ import Snackbar from 'cozy-ui/transpiled/react/Snackbar'
 import Alert from 'cozy-ui/transpiled/react/Alert'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Variants from 'cozy-ui/docs/components/Variants'
+import {
+  BreakpointsProvider
+} from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 
 initialState = { open: isTesting() }
 
@@ -54,7 +60,7 @@ const initialVariants = [{ primary: true, secondary: true, success: false, error
 
 ;
 
-<>
+<BreakpointsProvider>
   <Variants initialVariants={initialVariants} radio>
     {variant => (
       <>
@@ -77,5 +83,5 @@ const initialVariants = [{ primary: true, secondary: true, success: false, error
     label="Open snackbar"
     onClick={handleToggle}
   />
-</>
+</BreakpointsProvider>
 ```

package/react/Snackbar/index.js

@@ -1,9 +1,19 @@
 import React, { forwardRef } from 'react'
 import MuiSnackbar from '@material-ui/core/Snackbar'
+import useBreakpoints from '../hooks/useBreakpoints'
 
 const Snackbar = forwardRef(({ children, ...props }, ref) => {
+  const { isDesktop } = useBreakpoints()
+
   return (
-    <MuiSnackbar ref={ref} {...props}>
+    <MuiSnackbar
+      ref={ref}
+      anchorOrigin={{
+        vertical: !isDesktop ? 'bottom' : 'top',
+        horizontal: 'center'
+      }}
+      {...props}
+    >
       {children}
     </MuiSnackbar>
   )
@@ -12,10 +22,7 @@ const Snackbar = forwardRef(({ children, ...props }, ref) => {
 Snackbar.displayName = 'Snackbar'
 
 Snackbar.defaultProps = {
-  anchorOrigin: {
-    vertical: 'top',
-    horizontal: 'center'
-  }
+  autoHideDuration: 2000
 }
 
 export default Snackbar

package/react/Viewer/Footer/BottomSheetContent.jsx

@@ -5,7 +5,7 @@ import { BottomSheetItem } from '../../BottomSheet'
 
 import getPanelBlocks, { panelBlocksSpecs } from '../Panel/getPanelBlocks'
 
-const BottomSheetContent = ({ file, contactsFullname }) => {
+const BottomSheetContent = ({ file }) => {
   const panelBlocks = getPanelBlocks({ panelBlocksSpecs, file })
 
   return panelBlocks.map((PanelBlock, index) => (
@@ -14,7 +14,7 @@ const BottomSheetContent = ({ file, contactsFullname }) => {
       disableGutters
       disableElevation={index === panelBlocks.length - 1}
     >
-      <PanelBlock file={file} contactsFullname={contactsFullname} />
+      <PanelBlock file={file} />
     </BottomSheetItem>
   ))
 }

package/react/Viewer/Footer/FooterContent.jsx

@@ -1,12 +1,12 @@
 import React, { useMemo, Children, cloneElement, isValidElement } from 'react'
 import PropTypes from 'prop-types'
 import { makeStyles } from '@material-ui/core/styles'
+import cx from 'classnames'
 
 import BottomSheet, { BottomSheetHeader } from '../../BottomSheet'
 
 import { isValidForPanel } from '../helpers'
 import BottomSheetContent from './BottomSheetContent'
-import useReferencedContactName from './useReferencedContactName'
 
 const useStyles = makeStyles(theme => ({
   footer: {
@@ -18,6 +18,9 @@ const useStyles = makeStyles(theme => ({
     paddingRight: '1rem',
     borderTop: `1px solid ${theme.palette.divider}`,
     columnGap: '0.5rem'
+  },
+  bottomSheetHeader: {
+    columnGap: '0.5rem'
   }
 }))
 
@@ -26,8 +29,6 @@ const FooterContent = ({ file, toolbarRef, children }) => {
 
   const toolbarProps = useMemo(() => ({ ref: toolbarRef }), [toolbarRef])
 
-  const { contactName, isLoadingContacts } = useReferencedContactName(file)
-
   const FooterActionButtons =
     Children.toArray(children).find(child => {
       return (
@@ -42,14 +43,18 @@ const FooterContent = ({ file, toolbarRef, children }) => {
       })
     : null
 
-  // We have to wait for the Contact request to finish before rendering `BottomSheet`, because it doesn't handle async well.
-  if (isValidForPanel({ file }) && !isLoadingContacts) {
+  if (isValidForPanel({ file })) {
     return (
-      <BottomSheet toolbarProps={toolbarProps}>
-        <BottomSheetHeader className="u-ph-1 u-pb-1">
+      <BottomSheet
+        toolbarProps={toolbarProps}
+        portalProps={{ disablePortal: true }}
+      >
+        <BottomSheetHeader
+          className={cx('u-ph-1 u-pb-1', styles.bottomSheetHeader)}
+        >
           {FooterActionButtonsWithFile}
         </BottomSheetHeader>
-        <BottomSheetContent file={file} contactsFullname={contactName} />
+        <BottomSheetContent file={file} />
       </BottomSheet>
     )
   }

package/react/Viewer/Panel/ActionMenuWrapper.jsx

@@ -0,0 +1,69 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import List from '../../MuiCozyTheme/List'
+import ListItem from '../../MuiCozyTheme/ListItem'
+import ListItemIcon from '../../MuiCozyTheme/ListItemIcon'
+import ListItemText from '../../ListItemText'
+import Icon from '../../Icon'
+import Copy from '../../Icons/Copy'
+import BottomSheet, { BottomSheetItem } from '../../BottomSheet'
+import ActionMenu, { ActionMenuItem } from '../../ActionMenu'
+import Typography from '../../Typography'
+import useBreakpoints from '../../hooks/useBreakpoints'
+import { useI18n } from '../../I18n'
+import useViewerSnackbar from '../snackbar/ViewerSnackbarProvider'
+
+const ActionMenuWrapper = forwardRef(({ onClose, value }, ref) => {
+  const { isMobile } = useBreakpoints()
+  const { t } = useI18n()
+  const { showViewerSnackbar } = useViewerSnackbar()
+
+  const handleCopy = () => {
+    if (navigator?.clipboard) {
+      navigator.clipboard.writeText(value)
+      showViewerSnackbar(
+        'secondary',
+        t(`Viewer.snackbar.copiedToClipboard.success`)
+      )
+    } else {
+      showViewerSnackbar('error', t(`Viewer.snackbar.copiedToClipboard.error`))
+    }
+    onClose()
+  }
+
+  if (isMobile) {
+    return (
+      <BottomSheet backdrop onClose={onClose}>
+        <BottomSheetItem disableGutters>
+          <List>
+            <ListItem button onClick={handleCopy}>
+              <ListItemIcon>
+                <Icon icon={Copy} />
+              </ListItemIcon>
+              <ListItemText
+                primary={t(`Viewer.panel.qualification.actions.copyClipboard`)}
+              />
+            </ListItem>
+          </List>
+        </BottomSheetItem>
+      </BottomSheet>
+    )
+  }
+
+  return (
+    <ActionMenu onClose={onClose} anchorElRef={ref}>
+      <ActionMenuItem onClick={handleCopy} left={<Icon icon={Copy} />}>
+        <Typography>{t(`Viewer.panel.qualification.actions.copy`)}</Typography>
+      </ActionMenuItem>
+    </ActionMenu>
+  )
+})
+ActionMenuWrapper.displayName = 'ActionMenuWrapper'
+
+ActionMenuWrapper.propTypes = {
+  onClose: PropTypes.func,
+  value: PropTypes.string
+}
+
+export default ActionMenuWrapper

package/react/Viewer/Panel/Qualification.jsx

@@ -1,84 +1,107 @@
-import React from 'react'
+import React, { useRef, useState, createRef, useMemo, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
-import { models } from 'cozy-client'
-
 import List from '../../MuiCozyTheme/List'
-import ListItem from '../../MuiCozyTheme/ListItem'
-import QualificationListItemText from './QualificationListItemText'
 import { withViewerLocales } from '../withViewerLocales'
-import MidEllipsis from '../../MidEllipsis'
+import {
+  formatMetadataQualification,
+  knownDateMetadataNames,
+  knowNumberMetadataNames,
+  knowOtherMetadataNames
+} from '../helpers'
+import QualificationListItemContact from './QualificationListItemContact'
+import ActionMenuWrapper from './ActionMenuWrapper'
+import QualificationListItemDate from './QualificationListItemDate'
+import QualificationListItemNumber from './QualificationListItemNumber'
+import QualificationListItemOther from './QualificationListItemOther'
+
+const Qualification = ({ file = {} }) => {
+  const { metadata = {} } = file
+  const actionBtnRef = useRef([])
+  const [optionFile, setOptionFile] = useState({
+    isOpen: false,
+    id: '',
+    value: ''
+  })
+
+  const hideActionsMenu = () => {
+    setOptionFile({ isOpen: false, id: '', value: '' })
+  }
 
-const {
-  document: {
-    locales: { getBoundT }
+  const toggleActionsMenu = (id, value) => {
+    setOptionFile(prev => {
+      if (prev.isOpen) return { isOpen: false, id: '', value: '' }
+      return { isOpen: true, id, value }
+    })
   }
-} = models
 
-const Qualification = ({ file = {}, contactsFullname, t, f, lang }) => {
-  const scannerT = getBoundT(lang)
+  const metadataComputed = useMemo(() => {
+    return formatMetadataQualification(metadata)
+  }, [metadata])
 
-  const { name: filename, metadata = {} } = file
-  const {
-    qualification = {},
-    page: pageLabel,
-    datetime,
-    datetimeLabel
-  } = metadata
+  useEffect(() => {
+    actionBtnRef.current = metadataComputed.map(
+      (_, idx) => actionBtnRef.current[idx] ?? createRef()
+    )
+  }, [metadataComputed])
 
   return (
     <List className={'u-pv-1'}>
-      {datetime && (
-        <ListItem className={'u-ph-2'}>
-          <QualificationListItemText
-            primary={t(
-              `Viewer.panel.qualification.date.title.${
-                datetimeLabel === 'datetime' || datetimeLabel === undefined
-                  ? 'addedOn'
-                  : datetimeLabel
-              }`
-            )}
-            secondary={f(datetime, 'DD/MM/YYYY')}
-          />
-        </ListItem>
-      )}
-      {contactsFullname && (
-        <ListItem className={'u-ph-2'}>
-          <QualificationListItemText
-            primary={t('Viewer.panel.qualification.identity')}
-            secondary={contactsFullname}
-          />
-        </ListItem>
-      )}
-      <ListItem className={'u-ph-2'}>
-        <QualificationListItemText
-          primary={t('Viewer.panel.qualification.label.title')}
-          secondary={
-            <MidEllipsis
-              text={
-                pageLabel
-                  ? t(`Viewer.panel.qualification.label.${pageLabel}`)
-                  : filename
-              }
+      {metadataComputed.map((meta, idx) => {
+        const { name } = meta
+
+        if (knownDateMetadataNames.includes(name)) {
+          return (
+            <QualificationListItemDate
+              key={idx}
+              ref={actionBtnRef.current[idx]}
+              metadataComputed={meta}
+              toggleActionsMenu={val => toggleActionsMenu(idx, val)}
             />
+          )
+        }
+
+        if (knowNumberMetadataNames.includes(name)) {
+          return (
+            <QualificationListItemNumber
+              key={idx}
+              ref={actionBtnRef.current[idx]}
+              metadataComputed={meta}
+              toggleActionsMenu={val => toggleActionsMenu(idx, val)}
+            />
+          )
+        }
+
+        if (knowOtherMetadataNames.includes(name)) {
+          if (name === 'owner') {
+            return <QualificationListItemContact key={idx} file={file} />
           }
+
+          return (
+            <QualificationListItemOther
+              key={idx}
+              ref={actionBtnRef.current[idx]}
+              filename={file.name}
+              metadataComputed={meta}
+              toggleActionsMenu={val => toggleActionsMenu(idx, val)}
+            />
+          )
+        }
+      })}
+
+      {optionFile.isOpen && (
+        <ActionMenuWrapper
+          onClose={hideActionsMenu}
+          value={optionFile.value}
+          ref={actionBtnRef.current[optionFile.id]}
         />
-      </ListItem>
-      <ListItem className={'u-ph-2'}>
-        <QualificationListItemText
-          primary={t('Viewer.panel.qualification.qualification')}
-          secondary={scannerT(`Scan.items.${qualification.label}`)}
-        />
-      </ListItem>
+      )}
     </List>
   )
 }
 
 Qualification.propTypes = {
-  file: PropTypes.object.isRequired,
-  t: PropTypes.func.isRequired,
-  f: PropTypes.func.isRequired,
-  lang: PropTypes.string.isRequired
+  file: PropTypes.object
 }
 
-export default withViewerLocales(Qualification)
+export default withViewerLocales(React.memo(Qualification))

package/react/Viewer/Panel/QualificationListItemContact.jsx

@@ -0,0 +1,76 @@
+import React, { useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+
+import ListItem from '../../MuiCozyTheme/ListItem'
+import ListItemSecondaryAction from '../../MuiCozyTheme/ListItemSecondaryAction'
+import IconButton from '../../IconButton'
+import Icon from '../../Icon'
+import Dots from '../../Icons/Dots'
+import QualificationListItemText from './QualificationListItemText'
+import Spinner from '../../Spinner'
+import useReferencedContactName from '../hooks/useReferencedContactName'
+import { useI18n } from '../../I18n'
+import ActionMenuWrapper from './ActionMenuWrapper'
+
+const QualificationListItemContact = ({ file }) => {
+  const { t } = useI18n()
+  const actionBtnRef = useRef()
+  const [optionFile, setOptionFile] = useState({
+    isOpen: false,
+    value: ''
+  })
+
+  const hideActionsMenu = () => setOptionFile({ isOpen: false, value: '' })
+  const toggleActionsMenu = value =>
+    setOptionFile(prev => {
+      if (prev.isOpen) return { isOpen: false, value: '' }
+      return { isOpen: true, value }
+    })
+
+  const { contactName, isLoadingContacts } = useReferencedContactName(file)
+
+  if (isLoadingContacts) {
+    return (
+      <ListItem className={'u-pl-2 u-pr-3'}>
+        <Spinner color="var(--secondaryTextColor)" />
+      </ListItem>
+    )
+  }
+
+  if (!isLoadingContacts && !contactName) {
+    return null
+  }
+
+  return (
+    <>
+      <ListItem className={'u-ph-2'}>
+        <QualificationListItemText
+          primary={t('Viewer.panel.qualification.owner')}
+          secondary={contactName}
+        />
+        <ListItemSecondaryAction>
+          <IconButton
+            ref={actionBtnRef}
+            onClick={() => toggleActionsMenu(contactName)}
+          >
+            <Icon icon={Dots} />
+          </IconButton>
+        </ListItemSecondaryAction>
+      </ListItem>
+
+      {optionFile.isOpen && (
+        <ActionMenuWrapper
+          onClose={hideActionsMenu}
+          value={optionFile.value}
+          ref={actionBtnRef}
+        />
+      )}
+    </>
+  )
+}
+
+QualificationListItemContact.propTypes = {
+  file: PropTypes.object.isRequired
+}
+
+export default QualificationListItemContact

package/react/Viewer/Panel/QualificationListItemDate.jsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import ListItem from '../../MuiCozyTheme/ListItem'
+import ListItemSecondaryAction from '../../MuiCozyTheme/ListItemSecondaryAction'
+import IconButton from '../../IconButton'
+import Icon from '../../Icon'
+import Dots from '../../Icons/Dots'
+import QualificationListItemText from './QualificationListItemText'
+import { useI18n } from '../../I18n'
+import { formatDate } from '../helpers'
+
+const QualificationListItemDate = forwardRef(
+  ({ metadataComputed, toggleActionsMenu }, ref) => {
+    const { t, f, lang } = useI18n()
+    const { name, value } = metadataComputed
+    const formattedDate = formatDate({ f, lang, date: value })
+
+    return (
+      <ListItem className={'u-pl-2 u-pr-3'}>
+        <QualificationListItemText
+          primary={t(`Viewer.panel.qualification.date.title.${name}`)}
+          secondary={formattedDate}
+        />
+        <ListItemSecondaryAction>
+          <IconButton
+            ref={ref}
+            onClick={() => toggleActionsMenu(formattedDate)}
+          >
+            <Icon icon={Dots} />
+          </IconButton>
+        </ListItemSecondaryAction>
+      </ListItem>
+    )
+  }
+)
+QualificationListItemDate.displayName = 'QualificationListItemDate'
+
+QualificationListItemDate.propTypes = {
+  metadataComputed: PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.string
+  }).isRequired,
+  toggleActionsMenu: PropTypes.func.isRequired
+}
+
+export default QualificationListItemDate

package/react/Viewer/Panel/QualificationListItemNumber.jsx

@@ -0,0 +1,42 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import ListItem from '../../MuiCozyTheme/ListItem'
+import ListItemSecondaryAction from '../../MuiCozyTheme/ListItemSecondaryAction'
+import IconButton from '../../IconButton'
+import Icon from '../../Icon'
+import Dots from '../../Icons/Dots'
+import QualificationListItemText from './QualificationListItemText'
+import { useI18n } from '../../I18n'
+
+const QualificationListItemNumber = forwardRef(
+  ({ metadataComputed, toggleActionsMenu }, ref) => {
+    const { t } = useI18n()
+    const { name, value } = metadataComputed
+
+    return (
+      <ListItem className={'u-pl-2 u-pr-3'}>
+        <QualificationListItemText
+          primary={t(`Viewer.panel.qualification.number.title.${name}`)}
+          secondary={value}
+        />
+        <ListItemSecondaryAction>
+          <IconButton ref={ref} onClick={() => toggleActionsMenu(value)}>
+            <Icon icon={Dots} />
+          </IconButton>
+        </ListItemSecondaryAction>
+      </ListItem>
+    )
+  }
+)
+QualificationListItemNumber.displayName = 'QualificationListItemNumber'
+
+QualificationListItemNumber.propTypes = {
+  metadataComputed: PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.string
+  }).isRequired,
+  toggleActionsMenu: PropTypes.func.isRequired
+}
+
+export default QualificationListItemNumber