cozy-ui 74.6.1 → 74.7.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [74.7.0](https://github.com/cozy/cozy-ui/compare/v74.6.1...v74.7.0) (2022-09-16)
+
+
+### Features
+
+* **Viewer:** Add "edit" option ([f40c926](https://github.com/cozy/cozy-ui/commit/f40c926))
+* **Viewer:** Add ActionMenuDesktop component ([e5db778](https://github.com/cozy/cozy-ui/commit/e5db778))
+* **Viewer:** Add ActionMenuMobile component ([87dac4d](https://github.com/cozy/cozy-ui/commit/87dac4d))
+* **Viewer:** Add ActionMenuProvider component ([7938117](https://github.com/cozy/cozy-ui/commit/7938117))
+* **Viewer:** Add buildEditAttributePath helper ([677bff7](https://github.com/cozy/cozy-ui/commit/677bff7))
+* **Viewer:** Add editPathByModelProps prop to ViewerContainer ([c615600](https://github.com/cozy/cozy-ui/commit/c615600))
+* **Viewer:** Add name & fileId props to ActionMenuWrapper ([fbcf1bc](https://github.com/cozy/cozy-ui/commit/fbcf1bc))
+* **Viewer:** Add optionFile & file props to ActionMenuWrapper ([a5f0b2d](https://github.com/cozy/cozy-ui/commit/a5f0b2d))
+* **Viewer:** Remove filename attribute in Viewer information ([8f76f46](https://github.com/cozy/cozy-ui/commit/8f76f46))
+* **Viewer:** Use actionMenuContext in ActionMenuWrapper ([89518aa](https://github.com/cozy/cozy-ui/commit/89518aa))
+
 ## [74.6.1](https://github.com/cozy/cozy-ui/compare/v74.6.0...v74.6.1) (2022-09-15)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "74.6.1",
+  "version": "74.7.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Viewer/Panel/ActionMenuDesktop.jsx

@@ -0,0 +1,68 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import styles from './styles.styl'
+
+import Icon from '../../Icon'
+import Copy from '../../Icons/Copy'
+import Edit from '../../Icons/Rename'
+import ActionMenu, { ActionMenuItem } from '../../ActionMenu'
+import Typography from '../../Typography'
+import { useI18n } from '../../I18n'
+import AppLinker from '../../AppLinker'
+
+const ActionMenuDesktop = forwardRef(
+  ({ onClose, isEditable, actions, appLink, appSlug }, ref) => {
+    const { handleCopy, handleEdit } = actions
+    const { t } = useI18n()
+
+    return (
+      <ActionMenu
+        className={styles['ActionMenuDesktop-ActionMenu']}
+        onClose={onClose}
+        anchorElRef={ref}
+      >
+        {isEditable && (
+          <AppLinker app={{ slug: appSlug }} href={appLink}>
+            {({ onClick, href }) => {
+              return (
+                <a
+                  href={href}
+                  className={
+                    !appLink &&
+                    styles['ActionMenuDesktop-ActionMenu-link-disabled']
+                  }
+                  onClick={() => handleEdit(onClick)}
+                >
+                  <ActionMenuItem left={<Icon icon={Edit} />}>
+                    <Typography>
+                      {t(`Viewer.panel.qualification.actions.edit`)}
+                    </Typography>
+                  </ActionMenuItem>
+                </a>
+              )
+            }}
+          </AppLinker>
+        )}
+        <ActionMenuItem onClick={handleCopy} left={<Icon icon={Copy} />}>
+          <Typography>
+            {t(`Viewer.panel.qualification.actions.copy`)}
+          </Typography>
+        </ActionMenuItem>
+      </ActionMenu>
+    )
+  }
+)
+ActionMenuDesktop.displayName = 'ActionMenuDesktop'
+
+ActionMenuDesktop.propTypes = {
+  onClose: PropTypes.func,
+  isEditable: PropTypes.bool,
+  actions: PropTypes.shape({
+    handleCopy: PropTypes.func,
+    handleEdit: PropTypes.func
+  }),
+  appLink: PropTypes.string,
+  appSlug: PropTypes.string
+}
+
+export default ActionMenuDesktop

package/react/Viewer/Panel/ActionMenuMobile.jsx

@@ -0,0 +1,75 @@
+import React 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 Edit from '../../Icons/Rename'
+import BottomSheet, { BottomSheetItem } from '../../BottomSheet'
+import { useI18n } from '../../I18n'
+import AppLinker from '../../AppLinker'
+
+const ActionMenuMobile = ({
+  onClose,
+  isEditable,
+  actions,
+  appLink,
+  appSlug
+}) => {
+  const { t } = useI18n()
+  const { handleCopy, handleEdit } = actions
+
+  return (
+    <BottomSheet backdrop onClose={onClose}>
+      <BottomSheetItem disableGutters>
+        <List>
+          {isEditable && (
+            <AppLinker app={{ slug: appSlug }} href={appLink}>
+              {({ onClick, href }) => {
+                return (
+                  <ListItem
+                    button
+                    component="a"
+                    href={href}
+                    onClick={() => handleEdit(onClick)}
+                    disabled={!appLink}
+                  >
+                    <ListItemIcon>
+                      <Icon icon={Edit} />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={t(`Viewer.panel.qualification.actions.edit`)}
+                    />
+                  </ListItem>
+                )
+              }}
+            </AppLinker>
+          )}
+          <ListItem button onClick={handleCopy}>
+            <ListItemIcon>
+              <Icon icon={Copy} />
+            </ListItemIcon>
+            <ListItemText
+              primary={t(`Viewer.panel.qualification.actions.copyClipboard`)}
+            />
+          </ListItem>
+        </List>
+      </BottomSheetItem>
+    </BottomSheet>
+  )
+}
+
+ActionMenuMobile.propTypes = {
+  onClose: PropTypes.func,
+  isEditable: PropTypes.bool,
+  actions: PropTypes.shape({
+    handleCopy: PropTypes.func,
+    handleEdit: PropTypes.func
+  }),
+  appLink: PropTypes.string
+}
+
+export default ActionMenuMobile

package/react/Viewer/Panel/ActionMenuProvider.jsx

@@ -0,0 +1,35 @@
+import React, { createContext, useContext } from 'react'
+
+/**
+ * @typedef {object} useActionMenuContextReturn
+ * @property {string} information
+ * @property {string} page
+ */
+
+const ActionMenuContext = createContext()
+
+const ActionMenuProvider = ({ children, editPathByModelProps = {} }) => {
+  return (
+    <ActionMenuContext.Provider value={editPathByModelProps}>
+      {children}
+    </ActionMenuContext.Provider>
+  )
+}
+
+/**
+ * @returns {useActionMenuContextReturn}
+ */
+const useActionMenuContext = () => {
+  const actionMenuContext = useContext(ActionMenuContext)
+  if (!actionMenuContext) {
+    throw new Error(
+      'ActionMenuContext must be used within a ActionMenuProvider'
+    )
+  }
+
+  return actionMenuContext
+}
+
+export default useActionMenuContext
+
+export { ActionMenuProvider }

package/react/Viewer/Panel/ActionMenuWrapper.jsx

@@ -1,23 +1,45 @@
 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 { useAppLinkWithStoreFallback, useClient } from 'cozy-client'
+
 import useBreakpoints from '../../hooks/useBreakpoints'
 import { useI18n } from '../../I18n'
 import useViewerSnackbar from '../snackbar/ViewerSnackbarProvider'
+import { buildEditAttributePath, getCurrentModel } from '../helpers'
+import useActionMenuContext from './ActionMenuProvider'
+import ActionMenuMobile from './ActionMenuMobile'
+import ActionMenuDesktop from './ActionMenuDesktop'
+
+const mespapiersAppSlug = 'mespapiers'
+
+const checkEditableAttribute = name => {
+  const isNotEditableAttributes = ['datetime', 'qualification', 'contact']
+  return !isNotEditableAttributes.includes(name)
+}
 
-const ActionMenuWrapper = forwardRef(({ onClose, value }, ref) => {
+const ActionMenuWrapper = forwardRef(({ onClose, optionFile }, ref) => {
+  const { name, value } = optionFile
+  const editPathByModelProps = useActionMenuContext()
   const { isMobile } = useBreakpoints()
   const { t } = useI18n()
   const { showViewerSnackbar } = useViewerSnackbar()
+  const client = useClient()
+
+  const isEditableAttribute = checkEditableAttribute(name)
+  const currentModel = getCurrentModel(name)
+  const editPath = buildEditAttributePath(
+    editPathByModelProps,
+    currentModel,
+    optionFile.name
+  )
+
+  const { fetchStatus, url } = useAppLinkWithStoreFallback(
+    mespapiersAppSlug,
+    client,
+    editPath
+  )
+  const isAppLinkLoaded = fetchStatus === 'loaded'
 
   const handleCopy = () => {
     if (navigator?.clipboard) {
@@ -32,38 +54,44 @@ const ActionMenuWrapper = forwardRef(({ onClose, value }, ref) => {
     onClose()
   }
 
+  const handleEdit = cb => {
+    if (isAppLinkLoaded) {
+      onClose()
+      cb && cb()
+    }
+  }
+
   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>
+      <ActionMenuMobile
+        onClose={onClose}
+        isEditable={editPath && isEditableAttribute}
+        actions={{ handleCopy, handleEdit }}
+        appLink={url}
+        appSlug={mespapiersAppSlug}
+      />
     )
   }
 
   return (
-    <ActionMenu onClose={onClose} anchorElRef={ref}>
-      <ActionMenuItem onClick={handleCopy} left={<Icon icon={Copy} />}>
-        <Typography>{t(`Viewer.panel.qualification.actions.copy`)}</Typography>
-      </ActionMenuItem>
-    </ActionMenu>
+    <ActionMenuDesktop
+      ref={ref}
+      onClose={onClose}
+      isEditable={editPath && isEditableAttribute}
+      actions={{ handleCopy, handleEdit }}
+      appLink={url}
+      appSlug={mespapiersAppSlug}
+    />
   )
 })
 ActionMenuWrapper.displayName = 'ActionMenuWrapper'
 
 ActionMenuWrapper.propTypes = {
   onClose: PropTypes.func,
-  value: PropTypes.string
+  optionFile: PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.string
+  })
 }
 
 export default ActionMenuWrapper

package/react/Viewer/Panel/Qualification.jsx

@@ -19,19 +19,19 @@ const Qualification = ({ file = {} }) => {
   const { metadata = {} } = file
   const actionBtnRef = useRef([])
   const [optionFile, setOptionFile] = useState({
-    isOpen: false,
     id: '',
+    name: '',
     value: ''
   })
 
   const hideActionsMenu = () => {
-    setOptionFile({ isOpen: false, id: '', value: '' })
+    setOptionFile({ id: '', name: '', value: '' })
   }
 
-  const toggleActionsMenu = (id, value) => {
+  const toggleActionsMenu = (id, name, value) => {
     setOptionFile(prev => {
-      if (prev.isOpen) return { isOpen: false, id: '', value: '' }
-      return { isOpen: true, id, value }
+      if (prev.value) return { id: '', name: '', value: '' }
+      return { id, name, value }
     })
   }
 
@@ -56,7 +56,7 @@ const Qualification = ({ file = {} }) => {
               key={idx}
               ref={actionBtnRef.current[idx]}
               metadataComputed={meta}
-              toggleActionsMenu={val => toggleActionsMenu(idx, val)}
+              toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
             />
           )
         }
@@ -67,13 +67,13 @@ const Qualification = ({ file = {} }) => {
               key={idx}
               ref={actionBtnRef.current[idx]}
               metadataComputed={meta}
-              toggleActionsMenu={val => toggleActionsMenu(idx, val)}
+              toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
             />
           )
         }
 
         if (knowOtherMetadataNames.includes(name)) {
-          if (name === 'owner') {
+          if (name === 'contact') {
             return <QualificationListItemContact key={idx} file={file} />
           }
 
@@ -81,18 +81,18 @@ const Qualification = ({ file = {} }) => {
             <QualificationListItemOther
               key={idx}
               ref={actionBtnRef.current[idx]}
-              filename={file.name}
               metadataComputed={meta}
-              toggleActionsMenu={val => toggleActionsMenu(idx, val)}
+              toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
             />
           )
         }
       })}
 
-      {optionFile.isOpen && (
+      {optionFile.value && (
         <ActionMenuWrapper
           onClose={hideActionsMenu}
-          value={optionFile.value}
+          file={file}
+          optionFile={optionFile}
           ref={actionBtnRef.current[optionFile.id]}
         />
       )}

package/react/Viewer/Panel/QualificationListItemContact.jsx

@@ -16,15 +16,15 @@ const QualificationListItemContact = ({ file }) => {
   const { t } = useI18n()
   const actionBtnRef = useRef()
   const [optionFile, setOptionFile] = useState({
-    isOpen: false,
+    name: '',
     value: ''
   })
 
-  const hideActionsMenu = () => setOptionFile({ isOpen: false, value: '' })
-  const toggleActionsMenu = value =>
+  const hideActionsMenu = () => setOptionFile({ name: '', value: '' })
+  const toggleActionsMenu = (name, value) =>
     setOptionFile(prev => {
-      if (prev.isOpen) return { isOpen: false, value: '' }
-      return { isOpen: true, value }
+      if (prev.value) return { name: '', value: '' }
+      return { name, value }
     })
 
   const { contactName, isLoadingContacts } = useReferencedContactName(file)
@@ -45,23 +45,24 @@ const QualificationListItemContact = ({ file }) => {
     <>
       <ListItem className={'u-ph-2'}>
         <QualificationListItemText
-          primary={t('Viewer.panel.qualification.owner')}
+          primary={t('Viewer.panel.qualification.contact')}
           secondary={contactName}
         />
         <ListItemSecondaryAction>
           <IconButton
             ref={actionBtnRef}
-            onClick={() => toggleActionsMenu(contactName)}
+            onClick={() => toggleActionsMenu('contact', contactName)}
           >
             <Icon icon={Dots} />
           </IconButton>
         </ListItemSecondaryAction>
       </ListItem>
 
-      {optionFile.isOpen && (
+      {optionFile.value && (
         <ActionMenuWrapper
           onClose={hideActionsMenu}
-          value={optionFile.value}
+          file={file}
+          optionFile={optionFile}
           ref={actionBtnRef}
         />
       )}

package/react/Viewer/Panel/QualificationListItemOther.jsx

@@ -19,35 +19,33 @@ const {
 } = models
 
 const QualificationListItemOther = forwardRef(
-  ({ metadataComputed, toggleActionsMenu, filename }, ref) => {
+  ({ metadataComputed, toggleActionsMenu }, ref) => {
     const { t, lang } = useI18n()
     const scannerT = getBoundT(lang)
     const { name, value } = metadataComputed
 
+    if (!value) return null
+
     const currentValueTranslated =
       name === 'qualification'
         ? scannerT(`Scan.items.${value}`)
-        : value
-        ? t(`Viewer.panel.qualification.${value}`)
-        : filename
+        : t(`Viewer.panel.qualification.${value}`)
 
     return (
-      currentValueTranslated && (
-        <ListItem className={'u-pl-2 u-pr-3'}>
-          <QualificationListItemText
-            primary={t(`Viewer.panel.qualification.${name}`)}
-            secondary={<MidEllipsis text={currentValueTranslated} />}
-          />
-          <ListItemSecondaryAction>
-            <IconButton
-              ref={ref}
-              onClick={() => toggleActionsMenu(currentValueTranslated)}
-            >
-              <Icon icon={Dots} />
-            </IconButton>
-          </ListItemSecondaryAction>
-        </ListItem>
-      )
+      <ListItem className={'u-pl-2 u-pr-3'}>
+        <QualificationListItemText
+          primary={t(`Viewer.panel.qualification.${name}`)}
+          secondary={<MidEllipsis text={currentValueTranslated} />}
+        />
+        <ListItemSecondaryAction>
+          <IconButton
+            ref={ref}
+            onClick={() => toggleActionsMenu(currentValueTranslated)}
+          >
+            <Icon icon={Dots} />
+          </IconButton>
+        </ListItemSecondaryAction>
+      </ListItem>
     )
   }
 )

package/react/Viewer/Panel/styles.styl

@@ -0,0 +1,13 @@
+.ActionMenuDesktop-ActionMenu
+    a
+        padding 0
+    .ActionMenuDesktop-ActionMenu-link-disabled
+        > div
+            cursor default
+            &:hover
+                background-color initial
+            > div
+                svg
+                    fill var(--disabledTextColor)
+                p
+                    color var(--disabledTextColor)

package/react/Viewer/Readme.md

@@ -58,14 +58,14 @@ const files = [
     mime: 'application/pdf',
     metadata: {
       carbonCopy: true,
-      datetime: "2022-02-09T09:05:38.000Z",
-      datetimeLabel: "datetime",
+      BObtentionDate: "2022-02-09T09:05:38.000Z",
+      datetimeLabel: "BObtentionDate",
       qualification: {
-        label: "vehicle_registration",
+        label: "driver_license",
         purpose: "attestation",
         sourceCategory: "gov",
         sourceSubCategory: "transport",
-        subjects: ["vehicule", "indentity", "right"]
+        subjects: ["permit", "driving"]
       }
     }
   },
@@ -143,6 +143,10 @@ const getURL = (file) => {
 const toggleViewer = () => setState({ viewerOpened: !state.viewerOpened });
 const handleToggleToolbarClose = () => setState({ showToolbarCloseButton: !state.showToolbarCloseButton });
 const onFileChange = (file, nextIndex) => setState({ currentIndex: nextIndex, currentURL: getURL(file) });
+const editPathByModelProps = {
+  information: `#!/Viewer?metadata=__NAME__`,
+  page: `#!/Viewer`
+};
 
 <DemoProvider>
   <Variants initialVariants={initialVariants}>{
@@ -169,6 +173,7 @@ const onFileChange = (file, nextIndex) => setState({ currentIndex: nextIndex, cu
                 onCloseRequest={toggleViewer}
                 onChangeRequest={onFileChange}
                 showNavigation={variant.navigation}
+                editPathByModelProps={editPathByModelProps}
                 onlyOfficeProps={{
                   isEnabled: variant.onlyOfficeEnabled,
                   opener: () => alert('This is a demo, no Only Office opener here')

package/react/Viewer/ViewerContainer.jsx

@@ -12,9 +12,17 @@ import ViewerInformationsWrapper from './ViewerInformationsWrapper'
 import EncryptedProvider from './EncryptedProvider'
 import { ViewerSnackbarProvider } from './snackbar/ViewerSnackbarProvider'
 import ViewerSnackbar from './snackbar/ViewerSnackbar'
+import { ActionMenuProvider } from './Panel/ActionMenuProvider'
 
 const ViewerContainer = props => {
-  const { className, disableFooter, disablePanel, children, ...rest } = props
+  const {
+    className,
+    disableFooter,
+    disablePanel,
+    editPathByModelProps,
+    children,
+    ...rest
+  } = props
   const { currentIndex, files, currentURL } = props
   const toolbarRef = createRef()
   const { isDesktop } = useBreakpoints()
@@ -27,27 +35,29 @@ const ViewerContainer = props => {
 
   return (
     <ViewerSnackbarProvider>
-      <ViewerWrapper className={className}>
-        <EncryptedProvider url={currentURL}>
-          <Viewer
-            {...rest}
-            currentFile={currentFile}
-            hasPrevious={hasPrevious}
-            hasNext={hasNext}
+      <ActionMenuProvider editPathByModelProps={editPathByModelProps}>
+        <ViewerWrapper className={className}>
+          <EncryptedProvider url={currentURL}>
+            <Viewer
+              {...rest}
+              currentFile={currentFile}
+              hasPrevious={hasPrevious}
+              hasNext={hasNext}
+              validForPanel={validForPanel}
+              toolbarRef={toolbarRef}
+            />
+          </EncryptedProvider>
+          <ViewerInformationsWrapper
+            disableFooter={disableFooter}
             validForPanel={validForPanel}
+            currentFile={currentFile}
             toolbarRef={toolbarRef}
-          />
-        </EncryptedProvider>
-        <ViewerInformationsWrapper
-          disableFooter={disableFooter}
-          validForPanel={validForPanel}
-          currentFile={currentFile}
-          toolbarRef={toolbarRef}
-        >
-          {children}
-        </ViewerInformationsWrapper>
-      </ViewerWrapper>
-      <ViewerSnackbar />
+          >
+            {children}
+          </ViewerInformationsWrapper>
+        </ViewerWrapper>
+        <ViewerSnackbar />
+      </ActionMenuProvider>
     </ViewerSnackbarProvider>
   )
 }

package/react/Viewer/helpers.js

@@ -20,7 +20,18 @@ export const knowNumberMetadataNames = [
   'vinNumber',
   'ibanNumber'
 ]
-export const knowOtherMetadataNames = ['owner', 'page', 'qualification']
+export const knowOtherMetadataNames = ['contact', 'page', 'qualification']
+
+export const getCurrentModel = metadataName => {
+  if (
+    knownDateMetadataNames.includes(metadataName) ||
+    knowNumberMetadataNames.includes(metadataName)
+  ) {
+    return 'information'
+  }
+  if (metadataName === 'contact') return 'contact'
+  if (metadataName === 'page') return 'page'
+}
 
 /**
  * @typedef {object} Reference
@@ -117,3 +128,18 @@ export const formatDate = ({ f, lang, date }) => {
   }
   return f(date, 'DD/MM/YYYY')
 }
+
+/**
+ * @param {{ information: string, page: string }} editPathByModelProps
+ * @param {string} currentModel
+ * @param {string} name
+ * @returns {string}
+ */
+export const buildEditAttributePath = (
+  editPathByModelProps,
+  currentModel,
+  name
+) => {
+  const currentPath = editPathByModelProps[currentModel]
+  return currentPath?.replace(/__NAME__/, name) ?? ''
+}