feat(nextcloud): Delete a file

src/locales/en.json

@@ -800,5 +800,13 @@
   },
   "FolderPickerContentRoot": {
     "myDrive": "My Drive"
+  },
+  "NextcloudDeleteConfirm": {
+    "title": "Delete %{filename}? |||| Delete %{smart_count} %{type}?",
+    "trash": "This item will be moved to the Nextcloud trash. |||| These items will be moved to the Nextcloud trash.",
+    "restore": "You can always restore it whenever you want from Nextcloud.",
+    "error": "An error occurred, please try again.",
+    "cancel": "Cancel",
+    "delete": "Delete"
   }
 }

src/locales/fr.json

@@ -801,5 +801,13 @@
   },
   "FolderPickerContentRoot": {
     "myDrive": "Mon Drive"
+  },
+  "NextcloudDeleteConfirm": {
+    "title": "Supprimer %{filename} ? |||| Supprimer %{smart_count} %{type} ?",
+    "trash": "Cet élément sera déplacé dans la corbeille de Nextcloud. |||| Ces éléments seront déplacés dans la corbeille de Nextcloud.",
+    "restore": "Vous pouvez toujours le restaurer quand vous voulez depuis Nextcloud.",
+    "error": "Une erreur est survenue, merci de réessayer.",
+    "cancel": "Annuler",
+    "delete": "Supprimer"
   }
 }

src/modules/navigation/AppRoute.jsx

@@ -28,6 +28,7 @@ import { MoveFilesView } from 'modules/views/Modal/MoveFilesView'
 import { QualifyFileView } from 'modules/views/Modal/QualifyFileView'
 import { ShareDisplayedFolderView } from 'modules/views/Modal/ShareDisplayedFolderView'
 import { ShareFileView } from 'modules/views/Modal/ShareFileView'
+import { NextcloudDeleteView } from 'modules/views/Nextcloud/NextcloudDeleteView'
 import { NextcloudFolderView } from 'modules/views/Nextcloud/NextcloudFolderView'
 import { NextcloudMoveView } from 'modules/views/Nextcloud/NextcloudMoveView'
 
@@ -65,6 +66,7 @@ const AppRoute = () => (
           element={<NextcloudFolderView />}
         >
           <Route path="move" element={<NextcloudMoveView />} />
+          <Route path="delete" element={<NextcloudDeleteView />} />
         </Route>
       ) : null}
 

src/modules/nextcloud/components/NextcloudDeleteConfirm.jsx

@@ -0,0 +1,99 @@
+import React, { useState } from 'react'
+
+import { useClient } from 'cozy-client'
+import { splitFilename } from 'cozy-client/dist/models/file'
+import Buttons from 'cozy-ui/transpiled/react/Buttons'
+import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import ForbiddenIcon from 'cozy-ui/transpiled/react/Icons/Forbidden'
+import RestoreIcon from 'cozy-ui/transpiled/react/Icons/Restore'
+import List from 'cozy-ui/transpiled/react/List'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { getEntriesTypeTranslated } from 'lib/entries'
+import { computeNextcloudFolderQueryId } from 'modules/nextcloud/queries'
+
+const NextcloudDeleteConfirm = ({ files, onClose }) => {
+  const { t } = useI18n()
+  const client = useClient()
+  const { showAlert } = useAlert()
+
+  const [isBusy, setBusy] = useState(false)
+
+  const onDelete = async () => {
+    try {
+      setBusy(true)
+      await client
+        .collection('io.cozy.remote.nextcloud.files')
+        .destroyAll(files)
+      client.resetQuery(
+        computeNextcloudFolderQueryId({
+          sourceAccount: files[0].cozyMetadata.sourceAccount,
+          path: files[0].parentPath
+        })
+      )
+    } catch (e) {
+      showAlert({
+        message: t('NextcloudDeleteConfirm.error'),
+        severity: 'error'
+      })
+    } finally {
+      onClose()
+      setBusy(false)
+    }
+  }
+
+  const entriesType = getEntriesTypeTranslated(t, files)
+  return (
+    <ConfirmDialog
+      open={true}
+      onClose={onClose}
+      title={t('NextcloudDeleteConfirm.title', {
+        filename: splitFilename(files[0]).filename,
+        smart_count: files.length,
+        type: entriesType
+      })}
+      content={
+        <List>
+          <ListItem gutters="disabled" size="small" ellipsis={false}>
+            <ListItemIcon>
+              <Icon icon={ForbiddenIcon} />
+            </ListItemIcon>
+            <ListItemText
+              primary={t(`NextcloudDeleteConfirm.trash`, {
+                smart_count: files.length
+              })}
+            />
+          </ListItem>
+          <ListItem gutters="disabled" size="small" ellipsis={false}>
+            <ListItemIcon>
+              <Icon icon={RestoreIcon} />
+            </ListItemIcon>
+            <ListItemText primary={t(`NextcloudDeleteConfirm.restore`)} />
+          </ListItem>
+        </List>
+      }
+      actions={
+        <>
+          <Buttons
+            variant="secondary"
+            onClick={onClose}
+            label={t('NextcloudDeleteConfirm.cancel')}
+          />
+          <Buttons
+            busy={isBusy}
+            color="error"
+            label={t('NextcloudDeleteConfirm.delete')}
+            onClick={onDelete}
+          />
+        </>
+      }
+    />
+  )
+}
+
+export { NextcloudDeleteConfirm }

src/modules/nextcloud/components/NextcloudFolderBody.jsx

@@ -10,11 +10,11 @@ import { moveNextcloud } from './actions/moveNextcloud'
 import { joinPath } from 'lib/path'
 import { hr } from 'modules/actions'
 import { FolderBody } from 'modules/folder/components/FolderBody'
+import { deleteNextcloudFile } from 'modules/nextcloud/components/actions/deleteNextcloudFile'
 import { downloadNextcloudFile } from 'modules/nextcloud/components/actions/downloadNextcloudFile'
 import { openWithinNextcloud } from 'modules/nextcloud/components/actions/openWithinNextcloud'
 import { rename } from 'modules/nextcloud/components/actions/rename'
 import { shareNextcloudFile } from 'modules/nextcloud/components/actions/shareNextcloudFile'
-import { trash } from 'modules/nextcloud/components/actions/trash'
 
 const NextcloudFolderBody = ({ path, queryResults }) => {
   const [searchParams, setSearchParams] = useSearchParams()
@@ -42,7 +42,7 @@ const NextcloudFolderBody = ({ path, queryResults }) => {
       duplicateNextcloudFile,
       openWithinNextcloud,
       hr,
-      trash
+      deleteNextcloudFile
     ],
     {
       t,

src/modules/nextcloud/components/actions/deleteNextcloudFile.jsx

@@ -0,0 +1,42 @@
+import React, { forwardRef } from 'react'
+
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+
+import { navigateToModalWithMultipleFile } from 'modules/actions/helpers'
+
+export const deleteNextcloudFile = ({ t, pathname, navigate, search }) => {
+  const label = t('SelectionBar.trash')
+  const icon = TrashIcon
+
+  return {
+    name: 'deleteNextcloudFile',
+    label,
+    icon,
+    action: files => {
+      navigateToModalWithMultipleFile({
+        files,
+        pathname,
+        navigate,
+        path: 'delete',
+        search
+      })
+    },
+    Component: forwardRef(function DeleteNextcloudFile(props, ref) {
+      return (
+        <ActionsMenuItem {...props} ref={ref}>
+          <ListItemIcon>
+            <Icon icon={icon} color="var(--errorColor)" />
+          </ListItemIcon>
+          <ListItemText
+            primary={label}
+            primaryTypographyProps={{ color: 'error' }}
+          />
+        </ActionsMenuItem>
+      )
+    })
+  }
+}

src/modules/views/Nextcloud/NextcloudDeleteView.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import {
+  Navigate,
+  useLocation,
+  useParams,
+  useNavigate,
+  useSearchParams
+} from 'react-router-dom'
+
+import { hasQueryBeenLoaded } from 'cozy-client'
+
+import { LoaderModal } from 'components/LoaderModal'
+import { getParentPath } from 'lib/path'
+import { NextcloudDeleteConfirm } from 'modules/nextcloud/components/NextcloudDeleteConfirm'
+import { useNextcloudFolder } from 'modules/nextcloud/hooks/useNextcloudFolder'
+import { useNextcloudPath } from 'modules/nextcloud/hooks/useNextcloudPath'
+
+const NextcloudDeleteView = () => {
+  const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
+  const { sourceAccount } = useParams()
+  const path = useNextcloudPath()
+  const { state, pathname } = useLocation()
+
+  const { nextcloudResult } = useNextcloudFolder({
+    sourceAccount,
+    path
+  })
+
+  const newPath = getParentPath(pathname) + `?${searchParams.toString()}`
+
+  const handleClose = () => {
+    navigate(newPath, { replace: true })
+  }
+
+  if (!state?.fileIds) {
+    return <Navigate to={newPath} replace />
+  }
+
+  if (hasQueryBeenLoaded(nextcloudResult) && nextcloudResult.data) {
+    const entries = nextcloudResult.data.filter(({ _id }) =>
+      state.fileIds.includes(_id)
+    )
+    return <NextcloudDeleteConfirm files={entries} onClose={handleClose} />
+  }
+
+  return <LoaderModal />
+}
+
+export { NextcloudDeleteView }