fix: Display correct right click menu in file viewer 🐛

src/components/RightClick/RightClickAddMenu.jsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react'
+import { useLocation } from 'react-router-dom'
 
 import { useSharingContext } from 'cozy-sharing'
 import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
@@ -14,9 +15,12 @@ const AddMenu = ({ children, ...props }) => {
   const { onOpen } = useRightClick()
   const { handleToggle, handleOfflineClick, isOffline } =
     useContext(AddMenuContext)
+  const location = useLocation()
+
+  const isInViewerMode = location.pathname.includes('/file/')
 
   if (!children) return null
-  if (!isDesktop)
+  if (!isDesktop || isInViewerMode)
     return React.Children.map(children, child =>
       React.isValidElement(child)
         ? React.cloneElement(child, {
@@ -46,11 +50,15 @@ const RightClickAddMenu = ({ children, ...props }) => {
   const { isOpen, position } = useRightClick()
   const { displayedFolder } = useDisplayedFolder()
   const { hasWriteAccess } = useSharingContext()
+  const location = useLocation()
 
   const isFolderReadOnly = displayedFolder
     ? !hasWriteAccess(displayedFolder._id, displayedFolder.driveId)
     : false
 
+  const isInViewerMode = location.pathname.includes('/file/')
+  const shouldShowAddMenu = isOpen('AddMenu') && !isInViewerMode
+
   return (
     <AddMenuProvider
       canCreateFolder={true}
@@ -62,7 +70,7 @@ const RightClickAddMenu = ({ children, ...props }) => {
       componentsProps={{
         AddMenu: {
           anchorReference: 'anchorPosition',
-          anchorPosition: isOpen('AddMenu')
+          anchorPosition: shouldShowAddMenu
             ? { top: position.mouseY, left: position.mouseX }
             : undefined
         }

src/components/RightClick/RightClickFileMenu.jsx

@@ -4,13 +4,23 @@ import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
 import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 import { useRightClick } from '@/components/RightClick/RightClickProvider'
+import { getContextMenuActions } from '@/modules/actions/helpers'
 import { useSelectionContext } from '@/modules/selection/SelectionProvider'
 
-const RightClickFileMenu = ({ doc, actions, disabled, children, ...props }) => {
+const RightClickFileMenu = ({
+  doc,
+  actions,
+  disabled,
+  children,
+  prefixMenuId,
+  ...props
+}) => {
   const { position, isOpen, onOpen, onClose } = useRightClick()
   const { isDesktop } = useBreakpoints()
   const { selectedItems, isItemSelected } = useSelectionContext()
 
+  const contextMenuActions = getContextMenuActions(actions)
+
   if (!children) return null
   if (disabled || !isDesktop)
     return React.Children.map(children, child =>
@@ -28,16 +38,18 @@ const RightClickFileMenu = ({ doc, actions, disabled, children, ...props }) => {
           ? React.cloneElement(child, {
               ...props,
               onContextMenu: ev => {
-                onOpen(ev, `FileMenu-${doc._id}`)
+                onOpen(ev, `${prefixMenuId ?? 'FileMenu'}-${doc._id}}`)
+                ev.preventDefault()
+                ev.stopPropagation()
               }
             })
           : null
       )}
-      {isOpen(`FileMenu-${doc._id}`) && (
+      {isOpen(`${prefixMenuId ?? 'FileMenu'}-${doc._id}}`) && (
         <ActionsMenu
           open
           docs={isItemSelected(doc._id) ? selectedItems : [doc]}
-          actions={actions}
+          actions={contextMenuActions}
           anchorReference="anchorPosition"
           anchorPosition={{ top: position.mouseY, left: position.mouseX }}
           autoClose

src/hooks/useMoreMenuActions.jsx

@@ -50,7 +50,6 @@ export const useMoreMenuActions = file => {
   const showPrintAction = isPDFDoc && isPrintAvailable
   const isCozySharing = window.location.pathname === '/preview'
   const isSharedDrive = window.location.href.includes('/shareddrive/')
-  const isDisplayInSharedDrive = !(isSharedDrive && !canWriteToCurrentFolder)
 
   const actions = makeActions(
     [
@@ -61,10 +60,10 @@ export const useMoreMenuActions = file => {
       download,
       showPrintAction && print,
       hr,
-      moveTo,
-      isDisplayInSharedDrive && duplicateTo,
-      isDisplayInSharedDrive && addToFavorites,
-      isDisplayInSharedDrive && removeFromFavorites,
+      !isSharedDrive && moveTo, // TO DO: Remove condtion when moving is available in shared drive
+      !isSharedDrive && duplicateTo, // TO DO: Remove condtion when duplicating is available in shared drive
+      addToFavorites,
+      removeFromFavorites,
       hr,
       versions,
       hr,
@@ -80,7 +79,7 @@ export const useMoreMenuActions = file => {
       refresh: () => navigate('..'),
       navigate,
       hasWriteAccess: canWriteToCurrentFolder,
-      canMove: isDisplayInSharedDrive,
+      canMove: canWriteToCurrentFolder,
       isPublic: false,
       allLoaded,
       showAlert,

src/modules/actions/components/addToFavorites.tsx

@@ -32,7 +32,9 @@ const addToFavorites = ({
     label,
     icon,
     displayCondition: docs =>
-      docs.length > 0 && docs.every(doc => !doc.cozyMetadata?.favorite),
+      docs.length > 0 &&
+      docs.every(doc => !doc.cozyMetadata?.favorite) &&
+      !docs[0]?.driveId,
     action: async (files): Promise<void> => {
       try {
         for (const file of files) {

src/modules/actions/components/removeFromFavorites.tsx

@@ -28,7 +28,9 @@ const removeFromFavorites = ({
     label,
     icon,
     displayCondition: docs =>
-      docs.length > 0 && docs.every(doc => doc.cozyMetadata?.favorite),
+      docs.length > 0 &&
+      docs.every(doc => doc.cozyMetadata?.favorite) &&
+      !docs[0]?.driveId,
     action: async (files): Promise<void> => {
       try {
         for (const file of files) {

src/modules/actions/helpers.js

@@ -25,3 +25,14 @@ export const navigateToModalWithMultipleFile = ({
     }
   )
 }
+
+/**
+ * Returns the context menu visible actions
+ *
+ * @param {Object[]} actions - the list of actions
+ * @returns {Object[]} - the list of actions to be displayed
+ */
+export const getContextMenuActions = (actions = []) =>
+  actions.filter(
+    action => Object.values(action)[0]?.displayInContextMenu !== false
+  )

src/modules/actions/helpers.spec.js

@@ -0,0 +1,173 @@
+import {
+  navigateToModal,
+  navigateToModalWithMultipleFile,
+  getContextMenuActions
+} from './helpers'
+
+jest.mock('@/lib/path', () => ({
+  joinPath: jest.fn((...paths) => paths.join('/'))
+}))
+
+describe('actions helpers', () => {
+  describe('navigateToModal', () => {
+    let mockNavigate
+
+    beforeEach(() => {
+      mockNavigate = jest.fn()
+    })
+
+    afterEach(() => {
+      jest.clearAllMocks()
+    })
+
+    it('should navigate to modal with pathname and single file', () => {
+      const params = {
+        navigate: mockNavigate,
+        pathname: '/folder/123',
+        files: { id: 'file-123', name: 'test.pdf' },
+        path: 'preview'
+      }
+
+      navigateToModal(params)
+
+      expect(mockNavigate).toHaveBeenCalledWith(
+        '/folder/123/file/file-123/preview'
+      )
+    })
+
+    it('should navigate to modal with pathname and array of files', () => {
+      const params = {
+        navigate: mockNavigate,
+        pathname: '/folder/456',
+        files: [
+          { id: 'file-1', name: 'first.pdf' },
+          { id: 'file-2', name: 'second.pdf' }
+        ],
+        path: 'edit'
+      }
+
+      navigateToModal(params)
+
+      expect(mockNavigate).toHaveBeenCalledWith('/folder/456/file/file-1/edit')
+    })
+  })
+
+  describe('navigateToModalWithMultipleFile', () => {
+    let mockNavigate
+
+    beforeEach(() => {
+      mockNavigate = jest.fn()
+    })
+
+    afterEach(() => {
+      jest.clearAllMocks()
+    })
+
+    it('should navigate with pathname, multiple files, and search params', () => {
+      const params = {
+        navigate: mockNavigate,
+        pathname: '/folder/123',
+        files: [
+          { id: 'file-1', name: 'doc1.pdf' },
+          { id: 'file-2', name: 'doc2.pdf' },
+          { id: 'file-3', name: 'doc3.pdf' }
+        ],
+        path: 'share',
+        search: 'tab=link'
+      }
+
+      navigateToModalWithMultipleFile(params)
+
+      expect(mockNavigate).toHaveBeenCalledWith(
+        {
+          pathname: '/folder/123/share',
+          search: '?tab=link'
+        },
+        {
+          state: { fileIds: ['file-1', 'file-2', 'file-3'] }
+        }
+      )
+    })
+
+    it('should navigate with pathname and multiple files without search params', () => {
+      const params = {
+        navigate: mockNavigate,
+        pathname: '/recent',
+        files: [
+          { id: 'file-a', name: 'image1.jpg' },
+          { id: 'file-b', name: 'image2.jpg' }
+        ],
+        path: 'move'
+      }
+
+      navigateToModalWithMultipleFile(params)
+
+      expect(mockNavigate).toHaveBeenCalledWith(
+        {
+          pathname: '/recent/move',
+          search: ''
+        },
+        {
+          state: { fileIds: ['file-a', 'file-b'] }
+        }
+      )
+    })
+
+    it('should handle empty search parameter', () => {
+      const params = {
+        navigate: mockNavigate,
+        pathname: '/folder/456',
+        files: [
+          { id: 'file-1', name: 'test1.pdf' },
+          { id: 'file-2', name: 'test2.pdf' }
+        ],
+        path: 'delete',
+        search: ''
+      }
+
+      navigateToModalWithMultipleFile(params)
+
+      expect(mockNavigate).toHaveBeenCalledWith(
+        {
+          pathname: '/folder/456/delete',
+          search: ''
+        },
+        {
+          state: { fileIds: ['file-1', 'file-2'] }
+        }
+      )
+    })
+  })
+
+  describe('getContextMenuActions', () => {
+    it('should return all actions when all have displayInContextMenu !== false', () => {
+      const actions = [
+        { download: { displayInContextMenu: true, name: 'Download' } },
+        { share: { name: 'Share' } }, // undefined displayInContextMenu should be included
+        { rename: { displayInContextMenu: undefined, name: 'Rename' } }
+      ]
+
+      const result = getContextMenuActions(actions)
+
+      expect(result).toEqual(actions)
+      expect(result).toHaveLength(3)
+    })
+
+    it('should filter out actions with displayInContextMenu: false', () => {
+      const actions = [
+        { download: { displayInContextMenu: true, name: 'Download' } },
+        { share: { displayInContextMenu: false, name: 'Share' } },
+        { rename: { name: 'Rename' } },
+        { delete: { displayInContextMenu: false, name: 'Delete' } }
+      ]
+
+      const result = getContextMenuActions(actions)
+
+      expect(result).toEqual([
+        { download: { displayInContextMenu: true, name: 'Download' } },
+        { rename: { name: 'Rename' } }
+      ])
+      expect(result).toHaveLength(2)
+    })
+  })
+})

src/modules/actions/selectAll.jsx

@@ -32,6 +32,8 @@ export const selectAllItems = ({ t, selectAll, isSelectAll, isMobile }) => {
     name: 'selectAllItems',
     label,
     icon,
+    displayInSelectionBar: true,
+    displayInContextMenu: false,
     displayCondition: files => files.length > 0,
     action: () => selectAll(),
     Component: makeComponent(label, icon)

src/modules/actions/share.jsx

@@ -26,7 +26,8 @@ const share = ({ t, hasWriteAccess, navigate, pathname, allLoaded }) => {
         hasWriteAccess &&
         files?.length === 1 &&
         !isEncryptedFileOrFolder(files[0]) &&
-        !isSharedDriveFolder(files[0])
+        !isSharedDriveFolder(files[0]) &&
+        !files[0]?.driveId
       )
     },
     action: files =>