Viewer: adjust behavior with sharing

packages/cozy-viewer/src/Footer/BottomSheetContent.jsx

@@ -5,7 +5,7 @@ import { BottomSheetItem } from 'cozy-ui/transpiled/react/BottomSheet'
 
 import getPanelBlocks, { getPanelBlocksSpecs } from '../Panel/getPanelBlocks'
 
-const BottomSheetContent = ({ file, isPublic }) => {
+const BottomSheetContent = ({ file, isPublic, isReadOnly }) => {
   const panelBlocks = getPanelBlocks({
     panelBlocksSpecs: getPanelBlocksSpecs(isPublic),
     file
@@ -17,14 +17,15 @@ const BottomSheetContent = ({ file, isPublic }) => {
       disableGutters
       disableElevation={index === panelBlocks.length - 1}
     >
-      <PanelBlock file={file} isPublic={isPublic} />
+      <PanelBlock file={file} isPublic={isPublic} isReadOnly={isReadOnly} />
     </BottomSheetItem>
   ))
 }
 
 BottomSheetContent.propTypes = {
   file: PropTypes.object.isRequired,
-  isPublic: PropTypes.bool
+  isPublic: PropTypes.bool,
+  isReadOnly: PropTypes.bool
 }
 
 export default BottomSheetContent

packages/cozy-viewer/src/Footer/FooterContent.jsx

@@ -39,7 +39,13 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
-const FooterContent = ({ file, toolbarRef, children, isPublic }) => {
+const FooterContent = ({
+  file,
+  toolbarRef,
+  children,
+  isPublic,
+  isReadOnly
+}) => {
   const styles = useStyles()
 
   const toolbarProps = useMemo(() => ({ ref: toolbarRef }), [toolbarRef])
@@ -69,7 +75,11 @@ const FooterContent = ({ file, toolbarRef, children, isPublic }) => {
           FooterActionButtonsWithFile={FooterActionButtonsWithFile}
         />
       </BottomSheetHeader>
-      <BottomSheetContent file={file} isPublic={isPublic} />
+      <BottomSheetContent
+        file={file}
+        isPublic={isPublic}
+        isReadOnly={isReadOnly}
+      />
     </BottomSheet>
   )
 }
@@ -78,6 +88,7 @@ FooterContent.propTypes = {
   file: PropTypes.object.isRequired,
   toolbarRef: PropTypes.object,
   isPublic: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
   children: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.arrayOf(PropTypes.node)

packages/cozy-viewer/src/Panel/ActionMenuWrapper.jsx

@@ -9,38 +9,54 @@ import ActionMenuDesktop from './ActionMenuDesktop'
 import ActionMenuMobile from './ActionMenuMobile'
 import { isEditableAttribute } from '../helpers'
 
-const ActionMenuWrapper = forwardRef(({ file, optionFile, onClose }, ref) => {
-  const { name, value } = optionFile
-  const { isMobile } = useBreakpoints()
-  const { t } = useI18n()
-  const { showAlert } = useAlert()
+const ActionMenuWrapper = forwardRef(
+  ({ file, optionFile, isReadOnly, onClose }, ref) => {
+    const { name, value } = optionFile
+    const { isMobile } = useBreakpoints()
+    const { t } = useI18n()
+    const { showAlert } = useAlert()
 
-  const isEditable = isEditableAttribute(name, file)
-  const editPath = `${file.metadata.qualification.label}/${file._id}/edit/information?metadata=${optionFile.name}`
+    const isEditable = isEditableAttribute(name, file) && !isReadOnly
+    const editPath = `${file.metadata.qualification.label}/${file._id}/edit/information?metadata=${optionFile.name}`
 
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(value)
-      showAlert({
-        message: t(`Viewer.snackbar.copiedToClipboard.success`),
-        severity: 'success',
-        variant: 'filled',
-        icon: false
-      })
-    } catch (error) {
-      showAlert({
-        message: t(`Viewer.snackbar.copiedToClipboard.error`),
-        severity: 'error',
-        variant: 'filled',
-        icon: false
-      })
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(value)
+        showAlert({
+          message: t(`Viewer.snackbar.copiedToClipboard.success`),
+          severity: 'success',
+          variant: 'filled',
+          icon: false
+        })
+      } catch (error) {
+        showAlert({
+          message: t(`Viewer.snackbar.copiedToClipboard.error`),
+          severity: 'error',
+          variant: 'filled',
+          icon: false
+        })
+      }
+      onClose()
+    }
+
+    if (isMobile) {
+      return (
+        <ActionMenuMobile
+          file={file}
+          optionFile={optionFile}
+          actions={{
+            copy: { onClick: handleCopy },
+            edit: { path: editPath }
+          }}
+          isEditable={isEditable}
+          onClose={onClose}
+        />
+      )
     }
-    onClose()
-  }
 
-  if (isMobile) {
     return (
-      <ActionMenuMobile
+      <ActionMenuDesktop
+        ref={ref}
         file={file}
         optionFile={optionFile}
         actions={{
@@ -52,21 +68,7 @@ const ActionMenuWrapper = forwardRef(({ file, optionFile, onClose }, ref) => {
       />
     )
   }
-
-  return (
-    <ActionMenuDesktop
-      ref={ref}
-      file={file}
-      optionFile={optionFile}
-      actions={{
-        copy: { onClick: handleCopy },
-        edit: { path: editPath }
-      }}
-      isEditable={isEditable}
-      onClose={onClose}
-    />
-  )
-})
+)
 
 ActionMenuWrapper.displayName = 'ActionMenuWrapper'
 
@@ -76,6 +78,7 @@ ActionMenuWrapper.propTypes = {
     name: PropTypes.string,
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   }),
+  isReadOnly: PropTypes.bool,
   onClose: PropTypes.func
 }
 

packages/cozy-viewer/src/Panel/Qualification.jsx

@@ -34,7 +34,7 @@ const ComponentFromMetadataQualificationType = {
   bills: QualificationListItemInformation
 }
 
-const Qualification = ({ file, isReadOnly }) => {
+const Qualification = ({ file, isPublic, isReadOnly }) => {
   const { metadata = {} } = file
   const actionBtnRef = useRef([])
   const [showQualifModal, setShowQualifModal] = useState(false)
@@ -75,13 +75,13 @@ const Qualification = ({ file, isReadOnly }) => {
       {hasSupportedQualification(file) ? (
         <QualificationListItemQualification
           file={file}
-          isReadOnly={isReadOnly}
+          isReadOnly={isPublic ? true : isReadOnly}
           onClick={() => setShowQualifModal(true)}
         />
       ) : (
         <QualificationListItemQualificationEmpty
           file={file}
-          isReadOnly={isReadOnly}
+          isReadOnly={isPublic ? true : isReadOnly}
           onClick={() => setShowQualifModal(true)}
         />
       )}
@@ -109,7 +109,7 @@ const Qualification = ({ file, isReadOnly }) => {
               <Fragment key={idx}>
                 <QualificationListItemComp
                   file={file}
-                  isReadOnly={isReadOnly}
+                  isReadOnly={isPublic ? true : isReadOnly}
                   ref={actionBtnRef.current[idx]}
                   formattedMetadataQualification={meta}
                   toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
@@ -124,6 +124,7 @@ const Qualification = ({ file, isReadOnly }) => {
               file={file}
               optionFile={optionFile}
               ref={actionBtnRef.current[optionFile.id]}
+              isReadOnly={isPublic ? true : isReadOnly}
             />
           )}
         </List>

packages/cozy-viewer/src/Panel/QualificationListItemContact.jsx

@@ -88,6 +88,7 @@ const QualificationListItemContact = ({ file, isReadOnly }) => {
           file={file}
           optionFile={optionFile}
           ref={actionBtnRef}
+          isReadOnly={isReadOnly}
         />
       )}
     </>

packages/cozy-viewer/src/ViewerContainer.jsx

@@ -4,6 +4,7 @@ import React, { createRef, useState, useEffect } from 'react'
 
 import { useClient } from 'cozy-client'
 import { isDocumentReadOnly } from 'cozy-client/dist/models/permission'
+import { useSharingContext } from 'cozy-sharing'
 import Modal from 'cozy-ui/transpiled/react/Modal'
 import { FileDoctype } from 'cozy-ui/transpiled/react/proptypes'
 import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
@@ -34,6 +35,8 @@ const ViewerContainer = props => {
   const [isReadOnly, setIsReadOnly] = useState(true)
   const client = useClient()
   useExtendI18n(locales)
+  const { hasWriteAccess } = useSharingContext()
+
   const currentFile = files[currentIndex]
   const fileCount = files.length
   const hasPrevious = currentIndex > 0
@@ -51,16 +54,18 @@ const ViewerContainer = props => {
 
   useEffect(() => {
     const getIsReadOnly = async () => {
-      const res = await isDocumentReadOnly({
-        document: currentFile,
-        client
-      })
+      const res = isPublic
+        ? await isDocumentReadOnly({
+            document: currentFile,
+            client
+          })
+        : !hasWriteAccess(currentFile._id)
 
       setIsReadOnly(res)
     }
 
     getIsReadOnly()
-  }, [client, currentFile])
+  }, [client, currentFile, hasWriteAccess, isPublic])
 
   return (
     <AlertProvider>

packages/cozy-viewer/src/ViewerInformationsWrapper.jsx

@@ -42,6 +42,7 @@ const ViewerInformationsWrapper = ({
             file={currentFile}
             toolbarRef={toolbarRef}
             isPublic={isPublic}
+            isReadOnly={isReadOnly}
           >
             {children}
           </FooterContent>

packages/cozy-viewer/src/components/ViewerControls.jsx

@@ -141,7 +141,7 @@ class ViewerControls extends Component {
             showFilePath={showFilePath}
             onMouseEnter={this.showControls}
             onMouseLeave={this.hideControls}
-            onClose={showClose && onClose}
+            onClose={showClose ? onClose : undefined}
           >
             {children}
           </Toolbar>