renterd ability to move and rename files and directories

.changeset/modern-bags-exercise.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+Files can now be moved by dragging into or out of directories. Closes https://github.com/SiaFoundation/renterd/issues/418

.changeset/sour-snakes-train.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+The Table now supports drag and drop on rows.

.changeset/strong-dingos-pay.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/react-renterd': minor
+---
+
+Added useObjectRename.

.changeset/wet-mayflies-smash.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+Files and directories can now be renamed via the context menu. Closes https://github.com/SiaFoundation/renterd/issues/418

README.md

@@ -37,7 +37,7 @@ The Sia web libraries provide developers with convenient TypeScript SDKs for usi
 ### Go
 
 - [go.sia.tech/web/ui](ui) - Library for embedding NextJS applications in Go.
-- [go.sia.tech/web/sdk](sdk) - SDK for encoding RPCs, computing merkle proofs, and more. Compiled with WASM for use in the TypeScript SDK.
+- [go.sia.tech/web/sdk](sdk) - SDK for encoding RPCs, computing merkle roots, and more. Compiled with WASM for use in the TypeScript SDK.
 - [go.sia.tech/web/walletd/wasm](walletd/wasm) - Wallet library for signing transactions. Compiled with WASM for use in the `walletd` application.
 - [go.sia.tech/web/walletd](walletd) - HTTP handler with embedded `walletd` application.
 - [go.sia.tech/web/renterd](renterd) - HTTP handler with embedded `renterd` application.

apps/renterd/components/Files/DirectoryContextMenu.tsx

@@ -5,8 +5,9 @@ import {
   DropdownMenuLeftSlot,
   DropdownMenuLabel,
 } from '@siafoundation/design-system'
-import { Delete16, FolderIcon } from '@siafoundation/react-icons'
+import { Delete16, Edit16, FolderIcon } from '@siafoundation/react-icons'
 import { useDirectoryDelete } from './useDirectoryDelete'
+import { useDialog } from '../../contexts/dialog'
 
 type Props = {
   path: string
@@ -15,6 +16,7 @@ type Props = {
 
 export function DirectoryContextMenu({ path, size }: Props) {
   const directoryConfirmDelete = useDirectoryDelete()
+  const { openDialog } = useDialog()
 
   return (
     <DropdownMenu
@@ -23,9 +25,24 @@ export function DirectoryContextMenu({ path, size }: Props) {
           <FolderIcon size={16} />
         </Button>
       }
-      contentProps={{ align: 'start' }}
+      contentProps={{
+        align: 'start',
+        onClick: (e) => {
+          e.stopPropagation()
+        },
+      }}
     >
       <DropdownMenuLabel>Actions</DropdownMenuLabel>
+      <DropdownMenuItem
+        onSelect={() => {
+          openDialog('fileRename', path)
+        }}
+      >
+        <DropdownMenuLeftSlot>
+          <Edit16 />
+        </DropdownMenuLeftSlot>
+        Rename directory
+      </DropdownMenuItem>
       <DropdownMenuItem
         onSelect={() => {
           directoryConfirmDelete(path, size)

apps/renterd/components/Files/FileContextMenu/index.tsx

@@ -16,11 +16,13 @@ import {
   Document16,
   Warning16,
   Filter16,
+  Edit16,
 } from '@siafoundation/react-icons'
 import { useFiles } from '../../../contexts/files'
 import { useFileDelete } from '../useFileDelete'
 import { CopyMetadataMenuItem } from './CopyMetadataMenuItem'
 import { getFilename } from '../../../contexts/files/paths'
+import { useDialog } from '../../../contexts/dialog'
 
 type Props = {
   path: string
@@ -29,6 +31,7 @@ type Props = {
 export function FileContextMenu({ path }: Props) {
   const { downloadFiles, getFileUrl, navigateToFile } = useFiles()
   const deleteFile = useFileDelete()
+  const { openDialog } = useDialog()
 
   return (
     <DropdownMenu
@@ -50,6 +53,12 @@ export function FileContextMenu({ path }: Props) {
         </DropdownMenuLeftSlot>
         Download file
       </DropdownMenuItem>
+      <DropdownMenuItem onSelect={() => openDialog('fileRename', path)}>
+        <DropdownMenuLeftSlot>
+          <Edit16 />
+        </DropdownMenuLeftSlot>
+        Rename file
+      </DropdownMenuItem>
       <DropdownMenuItem onSelect={() => deleteFile(path)}>
         <DropdownMenuLeftSlot>
           <Delete16 />

apps/renterd/components/Files/FileRenameDialog.tsx

@@ -0,0 +1,137 @@
+import {
+  Dialog,
+  triggerErrorToast,
+  triggerSuccessToast,
+  ConfigFields,
+  useOnInvalid,
+  FormSubmitButton,
+  FieldText,
+} from '@siafoundation/design-system'
+import { useCallback, useEffect, useMemo } from 'react'
+import { useForm } from 'react-hook-form'
+import { useDialog } from '../../contexts/dialog'
+import { useObjectRename } from '@siafoundation/react-renterd'
+import { getFilename, isDirectory } from '../../contexts/files/paths'
+import { getRenameFileRenameParams } from '../../contexts/files/rename'
+import { useFiles } from '../../contexts/files'
+
+function getDefaultValues(currentName: string) {
+  return {
+    name: currentName,
+  }
+}
+
+type Values = ReturnType<typeof getDefaultValues>
+
+function getFields({
+  currentName,
+}: {
+  currentName: string
+}): ConfigFields<Values, never> {
+  return {
+    name: {
+      type: 'text',
+      title: 'Name',
+      placeholder: currentName,
+      validation: {
+        required: 'required',
+        validate: {
+          noSlash: (val) => {
+            if (val.includes('/')) {
+              return 'Name cannot contain slashes'
+            }
+            return true
+          },
+        },
+      },
+    },
+  }
+}
+
+type Props = {
+  id: string
+  trigger?: React.ReactNode
+  open: boolean
+  onOpenChange: (val: boolean) => void
+}
+
+// Renames a file or directory
+export function FileRenameDialog({
+  id: originalPath,
+  trigger,
+  open,
+  onOpenChange,
+}: Props) {
+  const { closeDialog } = useDialog()
+  const { refresh } = useFiles()
+
+  let name = getFilename(originalPath || '')
+  name = name.endsWith('/') ? name.slice(0, -1) : name
+  const defaultValues = getDefaultValues(name)
+
+  const objectRename = useObjectRename()
+  const form = useForm({
+    mode: 'all',
+    defaultValues,
+  })
+  // Reset the form when the name changes
+  useEffect(() => {
+    form.reset(getDefaultValues(name))
+  }, [form, name])
+
+  const onSubmit = useCallback(
+    async (values: Values) => {
+      const { bucket, to, from, mode } = getRenameFileRenameParams(
+        originalPath,
+        values.name
+      )
+      const response = await objectRename.post({
+        payload: {
+          bucket,
+          to,
+          from,
+          mode,
+          force: false,
+        },
+      })
+      if (response.error) {
+        triggerErrorToast(response.error)
+      } else {
+        refresh()
+        form.reset()
+        closeDialog()
+        triggerSuccessToast(
+          isDirectory(originalPath) ? 'Directory renamed.' : 'File renamed.'
+        )
+      }
+    },
+    [form, originalPath, refresh, objectRename, closeDialog]
+  )
+
+  const fields = useMemo(() => getFields({ currentName: name }), [name])
+
+  const onInvalid = useOnInvalid(fields)
+
+  return (
+    <Dialog
+      title="Rename file"
+      trigger={trigger}
+      open={open}
+      onOpenChange={(val) => {
+        if (!val) {
+          form.reset(defaultValues)
+        }
+        onOpenChange(val)
+      }}
+      contentVariants={{
+        className: 'w-[400px]',
+      }}
+      onSubmit={form.handleSubmit(onSubmit, onInvalid)}
+    >
+      <div className="flex flex-col gap-4">
+        <FieldText name="name" form={form} fields={fields} autoComplete="off" />
+        <FormSubmitButton form={form}>Save</FormSubmitButton>
+      </div>
+    </Dialog>
+  )
+}

apps/renterd/components/Files/FilesExplorer.tsx

@@ -14,6 +14,12 @@ export function FilesExplorer() {
     sortDirection,
     sortableColumns,
     toggleSort,
+    onDragEnd,
+    onDragOver,
+    onDragStart,
+    onDragCancel,
+    onDragMove,
+    draggingObject,
   } = useFiles()
   const canUpload = useCanUpload()
   return (
@@ -34,6 +40,12 @@ export function FilesExplorer() {
           sortDirection={sortDirection}
           toggleSort={toggleSort}
           rowSize="dense"
+          onDragStart={onDragStart}
+          onDragOver={onDragOver}
+          onDragEnd={onDragEnd}
+          onDragCancel={onDragCancel}
+          onDragMove={onDragMove}
+          draggingDatum={draggingObject}
         />
       </Dropzone>
     </div>

apps/renterd/contexts/dialog.tsx

@@ -21,6 +21,7 @@ import { HostsFilterPublicKeyDialog } from '../components/Hosts/HostsFilterPubli
 import { FilesBucketDeleteDialog } from '../components/Files/FilesBucketDeleteDialog'
 import { FilesBucketPolicyDialog } from '../components/Files/FilesBucketPolicyDialog'
 import { FilesBucketCreateDialog } from '../components/Files/FilesBucketCreateDialog'
+import { FileRenameDialog } from '../components/Files/FileRenameDialog'
 import { KeysCreateDialog } from '../components/Keys/KeysCreateDialog'
 
 export type DialogType =
@@ -44,6 +45,7 @@ export type DialogType =
   | 'filesCreateDirectory'
   | 'filesBucketPolicy'
   | 'filesSearch'
+  | 'fileRename'
   | 'keysCreate'
   | 'alerts'
   | 'confirm'
@@ -121,6 +123,7 @@ export function DialogProvider({ children }: Props) {
 
 export function Dialogs() {
   const {
+    id,
     dialog,
     openDialog,
     onOpenChange,
@@ -180,6 +183,11 @@ export function Dialogs() {
         open={dialog === 'filesSearch'}
         onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
       />
+      <FileRenameDialog
+        id={id}
+        open={dialog === 'fileRename'}
+        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
+      />
       <HostsAllowBlockDialog
         open={dialog === 'hostsManageAllowBlock'}
         onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}

apps/renterd/contexts/files/dataset.tsx

@@ -9,11 +9,10 @@ import { useContracts } from '../contracts'
 import { ObjectData, SortField } from './types'
 import {
   bucketAndKeyParamsFromPath,
-  bucketAndResponseKeyToFilePath,
   getBucketFromPath,
-  getDirPath,
+  buildDirectoryPath,
   getFilename,
-  getFilePath,
+  join,
   isDirectory,
 } from './paths'
 import {
@@ -24,6 +23,7 @@ import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 
 type Props = {
+  setActiveDirectory: (func: (directory: string[]) => string[]) => void
   activeDirectoryPath: string
   uploadsList: ObjectData[]
   sortDirection: 'asc' | 'desc'
@@ -34,6 +34,7 @@ type Props = {
 const defaultLimit = 50
 
 export function useDataset({
+  setActiveDirectory,
   activeDirectoryPath,
   uploadsList,
   sortDirection,
@@ -99,34 +100,41 @@ export function useDataset({
       if (!activeBucket) {
         buckets.data?.forEach((bucket) => {
           const name = bucket.name
-          const path = getDirPath(name, '')
+          const path = buildDirectoryPath(name, '')
           dataMap[name] = {
             id: path,
             path,
             bucket,
             size: 0,
             health: 0,
             name,
+            onClick: () => {
+              setActiveDirectory((p) => p.concat(name))
+            },
             type: 'bucket',
           }
         })
       } else if (response.data) {
         response.data.entries?.forEach(({ name: key, size, health }) => {
-          const path = bucketAndResponseKeyToFilePath(activeBucketName, key)
+          const path = join(activeBucketName, key)
+          const name = getFilename(key)
           dataMap[path] = {
             id: path,
             path,
             bucket: activeBucket,
             size,
             health,
-            name: getFilename(key),
+            name,
+            onClick: isDirectory(key)
+              ? () => {
+                  setActiveDirectory((p) => p.concat(name.slice(0, -1)))
+                }
+              : undefined,
             type: isDirectory(key) ? 'directory' : 'file',
           }
         })
         uploadsList
-          .filter(
-            ({ path, name }) => path === getFilePath(activeDirectoryPath, name)
-          )
+          .filter(({ path, name }) => path === join(activeDirectoryPath, name))
           .forEach((upload) => {
             dataMap[upload.path] = upload
           })
@@ -150,5 +158,6 @@ export function useDataset({
     offset,
     response,
     dataset: d.data,
+    refresh: response.mutate,
   }
 }