feat: Use a route instead pushModal to open MoveModal

src/drive/web/modules/actions/helpers.js

@@ -4,3 +4,15 @@ export const navigateToModal = ({ navigate, pathname, files, path }) => {
     `${pathname}${pathname.endsWith('/') ? '' : '/'}file/${file.id}/${path}`
   )
 }
+
+export const navigateToModalWithMultipleFile = ({
+  navigate,
+  pathname,
+  files,
+  path
+}) => {
+  const documents = Array.isArray(files) ? files : [files]
+  navigate(`${pathname}${pathname.endsWith('/') ? '' : '/'}${path}`, {
+    state: { fileIds: documents.map(file => file.id) }
+  })
+}

src/drive/web/modules/actions/index.jsx

@@ -22,7 +22,6 @@ import Divider from 'cozy-ui/transpiled/react/Divider'
 
 import { isEncryptedFolder, isEncryptedFile } from 'drive/lib/encryption'
 import DeleteConfirm from 'drive/web/modules/drive/DeleteConfirm'
-import MoveModal from 'drive/web/modules/move/MoveModal'
 import MakeAvailableOfflineMenuItem from 'drive/web/modules/drive/MakeAvailableOfflineMenuItem'
 import DestroyConfirm from 'drive/web/modules/trash/components/DestroyConfirm'
 import { startRenamingAsync } from 'drive/web/modules/drive/rename'
@@ -34,7 +33,10 @@ import {
   restoreFiles
 } from './utils'
 import { useI18n } from 'cozy-ui/transpiled/react'
-import { navigateToModal } from 'drive/web/modules/actions/helpers'
+import {
+  navigateToModal,
+  navigateToModalWithMultipleFile
+} from 'drive/web/modules/actions/helpers'
 
 export { share } from './share'
 
@@ -186,18 +188,19 @@ export const rename = ({ hasWriteAccess, dispatch }) => {
   }
 }
 
-export const move = ({ canMove, pushModal, popModal }) => {
+export const move = ({ canMove, pathname, navigate }) => {
   return {
     name: 'moveto',
     icon: 'moveto',
     displayCondition: () => canMove,
-    action: files =>
-      pushModal(
-        <MoveModal
-          entries={Array.isArray(files) ? files : [files]}
-          onClose={popModal}
-        />
-      ),
+    action: files => {
+      navigateToModalWithMultipleFile({
+        files,
+        pathname,
+        navigate,
+        path: 'move'
+      })
+    },
     Component: forwardRef(function MoveTo(props, ref) {
       const { t } = useI18n()
       return (

src/drive/web/modules/actions/useActions.spec.jsx

@@ -5,7 +5,6 @@ import { isMobileApp } from 'cozy-device-helper'
 
 import AppLike from 'test/components/AppLike'
 import DeleteConfirm from 'drive/web/modules/drive/DeleteConfirm'
-import MoveModal from 'drive/web/modules/move/MoveModal'
 import DestroyConfirm from 'drive/web/modules/trash/components/DestroyConfirm'
 import { createStore } from 'redux'
 import {
@@ -386,17 +385,16 @@ describe('useActions', () => {
     })
 
     it('shows the move modal when activated', () => {
-      const moveAction = getAction('moveto')
-      const mockDocuments = [{ id: 'abc' }]
-      moveAction.action(mockDocuments)
-      const actuallyCalledModal =
-        mockModalContextValue.pushModal.mock.calls[0][0]
-      expect(mockModalContextValue.pushModal).toHaveBeenCalledWith(
-        <MoveModal
-          entries={mockDocuments}
-          onClose={actuallyCalledModal.props.onClose} // needs exact comparison
-        />
-      )
+      const navigate = jest.fn()
+      const moveAction = getAction('moveto', {
+        navigate,
+        pathname: 'folder/:folderId'
+      })
+      const mockDocument = { id: 'abc' }
+      moveAction.action([mockDocument])
+      expect(navigate).toHaveBeenCalledWith('folder/:folderId/move', {
+        state: { fileIds: ['abc'] }
+      })
     })
   })
 

src/drive/web/modules/navigation/AppRoute.jsx

@@ -28,6 +28,7 @@ import FilesViewerRecent from '../views/Recent/FilesViewerRecent'
 import { ShareDisplayedFolderView } from 'drive/web/modules/views/Modal/ShareDisplayedFolderView'
 import { ShareFileView } from 'drive/web/modules/views/Modal/ShareFileView'
 import { QualifyFileView } from 'drive/web/modules/views/Modal/QualifyFileView'
+import { MoveFilesView } from 'drive/web/modules/views/Modal/MoveFilesView'
 
 const FilesRedirect = () => {
   const { folderId } = useParams()
@@ -46,13 +47,15 @@ const AppRoute = () => (
 
       <Route path="folder" element={<DriveView />}>
         {/* For FilesViewer and FileHistory, we want 2 routes to match: `/folder/:folderId/file/:fileId` and `/folder/file/:fileId`. The `:folderId` is not present when opening a file from the root folder. */}
+        <Route path="move" element={<MoveFilesView />} />
         <Route path=":folderId">
           <Route path="file/:fileId" element={<FilesViewerDrive />} />
           <Route path="file/:fileId/revision" element={<FileHistory />} />
           <Route path="file/:fileId/share" element={<ShareFileView />} />
           <Route path="file/:fileId/qualify" element={<QualifyFileView />} />
           <Route path="paywall" element={<OnlyOfficePaywallView />} />
           <Route path="share" element={<ShareDisplayedFolderView />} />
+          <Route path="move" element={<MoveFilesView />} />
         </Route>
         <Route path="file/:fileId" element={<FilesViewerDrive />} />
         <Route path="file/:fileId/revision" element={<FileHistory />} />
@@ -66,6 +69,7 @@ const AppRoute = () => (
         <Route path="file/:fileId/share" element={<ShareFileView />} />
         <Route path="file/:fileId/qualify" element={<QualifyFileView />} />
         <Route path="share" element={<ShareDisplayedFolderView />} />
+        <Route path="move" element={<MoveFilesView />} />
       </Route>
 
       <Route path="trash">
@@ -84,6 +88,7 @@ const AppRoute = () => (
           <Route path="file/:fileId/revision" element={<FileHistory />} />
           <Route path="file/:fileId/share" element={<ShareFileView />} />
           <Route path="file/:fileId/qualify" element={<QualifyFileView />} />
+          <Route path="move" element={<MoveFilesView />} />
         </Route>
         {/* This route must be inside the /sharing path for the nav to have an activate state */}
         <Route path=":folderId" element={<SharingsFolderView />}>
@@ -93,6 +98,7 @@ const AppRoute = () => (
           <Route path="file/:fileId/share" element={<ShareFileView />} />
           <Route path="file/:fileId/qualify" element={<QualifyFileView />} />
           <Route path="share" element={<ShareDisplayedFolderView />} />
+          <Route path="move" element={<MoveFilesView />} />
         </Route>
       </Route>
       <Route path="onlyoffice/:fileId" element={<OnlyOfficeView />}>

src/drive/web/modules/views/Modal/MoveFilesView.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Navigate, useLocation, useNavigate } from 'react-router-dom'
+
+import { hasQueryBeenLoaded, useQuery } from 'cozy-client'
+
+import MoveModal from 'drive/web/modules/move/MoveModal'
+import { buildParentsByIdsQuery } from 'drive/web/modules/queries'
+import { LoaderModal } from 'drive/components/LoaderModal'
+
+const MoveFilesView = () => {
+  const navigate = useNavigate()
+  const { state } = useLocation()
+
+  const hasFileIds = state?.fileIds != undefined
+
+  const fileQuery = buildParentsByIdsQuery(hasFileIds ? state.fileIds : [])
+  const fileResult = useQuery(fileQuery.definition, {
+    ...fileQuery.options,
+    enabled: hasFileIds
+  })
+
+  if (!hasFileIds) {
+    return <Navigate to=".." replace={true} />
+  }
+
+  if (hasQueryBeenLoaded(fileResult) && fileResult.data) {
+    const onClose = () => {
+      navigate('..', { replace: true })
+    }
+
+    return <MoveModal entries={fileResult.data} onClose={onClose} />
+  }
+
+  return <LoaderModal />
+}
+
+export { MoveFilesView }