feat: Implement duplicating files in shared drive ✨

Author: lethemanh

src/components/FolderPicker/types.ts

@@ -1,6 +1,15 @@
 import { IOCozyFile, NextcloudFile } from 'cozy-client/types/types'
 
-export type File = IOCozyFile | NextcloudFile
+export type File = (IOCozyFile | NextcloudFile) & {
+  cozyMetadata?: {
+    createdOn?: string
+  }
+  attributes?: {
+    cozyMetadata?: {
+      createdOn?: string
+    }
+  }
+}
 
 export interface FolderPickerEntry {
   _id?: string
@@ -11,4 +20,5 @@ export interface FolderPickerEntry {
   dir_id?: string
   class?: string
   path?: string
+  driveId?: string
 }

src/declarations.d.ts

@@ -101,6 +101,21 @@ declare module 'cozy-client/dist/models/file' {
     filename: string,
     driveId: string
   ) => Promise<string>
+  export const moveRelateToSharedDrive: (
+    client: import('cozy-client/types/CozyClient').CozyClient,
+    source: {
+      instance?: string
+      sharing_id?: string
+      file_id?: string
+      dir_id?: string
+    },
+    dest: {
+      instance?: string
+      sharing_id?: string
+      dir_id: string
+    },
+    isCopy?: boolean
+  ) => Promise<void>
 }
 
 declare module 'cozy-client/dist/models/note' {

src/modules/duplicate/components/DuplicateModal.tsx

@@ -2,7 +2,12 @@ import React, { FC, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { useClient } from 'cozy-client'
-import { copy } from 'cozy-client/dist/models/file'
+import {
+  copy,
+  isDirectory,
+  moveRelateToSharedDrive
+} from 'cozy-client/dist/models/file'
+import { IOCozyFile } from 'cozy-client/types/types'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
@@ -18,13 +23,17 @@ interface DuplicateModalProps {
   currentFolder: File
   onClose: () => void | Promise<void>
   showNextcloudFolder?: boolean
+  showSharedDriveFolder?: boolean
+  driveId?: string
 }
 
 const DuplicateModal: FC<DuplicateModalProps> = ({
   entries,
   currentFolder,
   onClose,
-  showNextcloudFolder
+  showNextcloudFolder,
+  showSharedDriveFolder,
+  driveId
 }) => {
   const { t } = useI18n()
   const { showAlert } = useAlert()
@@ -39,7 +48,7 @@ const DuplicateModal: FC<DuplicateModalProps> = ({
       setBusy(true)
       await Promise.all(
         entries.map(async entry => {
-          await registerCancelable(copy(client, entry as Partial<File>, folder))
+          await registerCancelable(handleCopyApi(client, entry, folder))
         })
       )
 
@@ -73,6 +82,35 @@ const DuplicateModal: FC<DuplicateModalProps> = ({
     }
   }
 
+  const handleCopyApi = async (
+    client: unknown,
+    entry: FolderPickerEntry,
+    folder: File
+  ): Promise<void> => {
+    if (driveId || entry.driveId || (folder as IOCozyFile).driveId) {
+      return await moveRelateToSharedDrive(
+        client,
+        {
+          instance: entry.driveId
+            ? currentFolder.attributes?.cozyMetadata?.createdOn
+            : '',
+          file_id: !isDirectory(entry) ? entry._id : '',
+          dir_id: isDirectory(entry) ? entry._id : '',
+          sharing_id: entry.driveId
+        },
+        {
+          instance: (folder as IOCozyFile).driveId
+            ? folder.cozyMetadata?.createdOn
+            : '',
+          sharing_id: (folder as IOCozyFile).driveId,
+          dir_id: folder._id
+        },
+        true
+      )
+    }
+    return await copy(client, entry, folder)
+  }
+
   /**
    * The content from nextcloud queries must be refreshed when coping files
    * This is only a proxy to Nextcloud queries so we don't have real-time or mutations updates
@@ -88,6 +126,7 @@ const DuplicateModal: FC<DuplicateModalProps> = ({
   return (
     <FolderPicker
       showNextcloudFolder={showNextcloudFolder}
+      showSharedDriveFolder={showSharedDriveFolder}
       currentFolder={currentFolder}
       entries={entries}
       // eslint-disable-next-line @typescript-eslint/no-misused-promises

src/modules/navigation/AppRoute.jsx

@@ -35,6 +35,7 @@ import FileOpenerExternal from '@/modules/viewer/FileOpenerExternal'
 import { KonnectorRoutes } from '@/modules/views/Drive/KonnectorRoutes'
 import { FavoritesView } from '@/modules/views/Favorites/FavoritesView'
 import { FolderDuplicateView } from '@/modules/views/Folder/FolderDuplicateView'
+import { SharedDriveDuplicateView } from '@/modules/views/Folder/SharedDriveDuplicateView'
 import { MoveFilesView } from '@/modules/views/Modal/MoveFilesView'
 import { QualifyFileView } from '@/modules/views/Modal/QualifyFileView'
 import { ShareDisplayedFolderView } from '@/modules/views/Modal/ShareDisplayedFolderView'
@@ -141,6 +142,8 @@ const AppRoute = () => (
             />
             <Route path="file/:fileId/revision" element={<FileHistory />} />
             <Route path="file/:fileId/v/revision" element={<FileHistory />} />
+            <Route path="share" element={<ShareDisplayedFolderView />} />
+            <Route path="duplicate" element={<SharedDriveDuplicateView />} />
           </Route>
         </>
       ) : null}

src/modules/shareddrives/components/SharedDriveFolderBody.jsx

@@ -12,6 +12,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { useModalContext } from '@/lib/ModalContext'
 import { download, infos, versions, rename, trash, hr } from '@/modules/actions'
+import { duplicateTo } from '@/modules/actions/components/duplicateTo'
 import { FolderBody } from '@/modules/folder/components/FolderBody'
 
 const SharedDriveFolderBody = ({
@@ -51,7 +52,7 @@ const SharedDriveFolderBody = ({
     refresh
   }
   const actions = makeActions(
-    [download, hr, rename, infos, hr, versions, hr, trash],
+    [download, hr, rename, duplicateTo, infos, hr, versions, hr, trash],
     actionsOptions
   )
 

src/modules/views/Folder/FolderDuplicateView.tsx

@@ -8,6 +8,7 @@ import flag from 'cozy-flags'
 import { LoaderModal } from '@/components/LoaderModal'
 import useDisplayedFolder from '@/hooks/useDisplayedFolder'
 import { DuplicateModal } from '@/modules/duplicate/components/DuplicateModal'
+import { useSharedDrives } from '@/modules/shareddrives/hooks/useSharedDrives'
 import { buildParentsByIdsQuery } from '@/queries'
 
 const FolderDuplicateView: FC = () => {
@@ -16,6 +17,7 @@ const FolderDuplicateView: FC = () => {
     state: { fileIds?: string[] }
   }
   const { displayedFolder } = useDisplayedFolder()
+  const { sharedDrives } = useSharedDrives()
 
   const hasFileIds = state.fileIds != undefined
 
@@ -39,6 +41,7 @@ const FolderDuplicateView: FC = () => {
     return (
       <DuplicateModal
         showNextcloudFolder={!flag('drive.hide-nextcloud-dev')}
+        showSharedDriveFolder={sharedDrives.length > 0}
         currentFolder={displayedFolder}
         entries={fileResult.data}
         onClose={onClose}

src/modules/views/Folder/SharedDriveDuplicateView.tsx

@@ -0,0 +1,49 @@
+import React, { FC } from 'react'
+import { Navigate, useLocation, useNavigate } from 'react-router-dom'
+
+import flag from 'cozy-flags'
+
+import { LoaderModal } from '@/components/LoaderModal'
+import useDisplayedFolder from '@/hooks/useDisplayedFolder'
+import { DuplicateModal } from '@/modules/duplicate/components/DuplicateModal'
+import { useQueryMultipleSharedDriveFolders } from '@/modules/shareddrives/hooks/useQueryMultipleSharedDriveFolders'
+
+const SharedDriveDuplicateView: FC = () => {
+  const navigate = useNavigate()
+  const { state } = useLocation() as {
+    state: { fileIds?: string[] }
+  }
+  const { displayedFolder } = useDisplayedFolder()
+
+  const hasFileIds = state.fileIds != undefined
+
+  const { sharedDriveResults } = useQueryMultipleSharedDriveFolders({
+    folderIds: state.fileIds ?? [],
+    driveId: displayedFolder?.driveId ?? ''
+  })
+
+  if (!hasFileIds) {
+    return <Navigate to=".." replace={true} />
+  }
+
+  if (sharedDriveResults && displayedFolder) {
+    const onClose = (): void => {
+      navigate('..', { replace: true })
+    }
+
+    return (
+      <DuplicateModal
+        showNextcloudFolder={!flag('drive.hide-nextcloud-dev')}
+        showSharedDriveFolder={true}
+        currentFolder={displayedFolder}
+        entries={sharedDriveResults}
+        onClose={onClose}
+        driveId={displayedFolder.driveId}
+      />
+    )
+  }
+
+  return <LoaderModal />
+}
+
+export { SharedDriveDuplicateView }