fix(renterd): files global view full keys

Author: alexfreska

.changeset/fluffy-timers-allow.md

@@ -0,0 +1,5 @@
+---
+'renterd': patch
+---
+
+Fixed an issue where the global files view was not showing full file paths.

apps/renterd-e2e/src/specs/files.spec.ts

@@ -15,6 +15,7 @@ import {
   createFilesMap,
   expectFilesMap,
   openDirectoryContextMenu,
+  changeExplorerMode,
 } from '../fixtures/files'
 import { afterTest, beforeTest } from '../fixtures/beforeTest'
 import { clearToasts, fillTextInputByName } from '@siafoundation/e2e'
@@ -53,6 +54,25 @@ test('can create directory and delete a directory', async ({ page }) => {
   await fileInList(page, dirPath2)
 })
 
+test('can see full file paths in the all files view mode', async ({ page }) => {
+  const bucketName = 'bucket1'
+  const dirName1 = 'dir1'
+  const dirName2 = 'dir2'
+  const dirPath1 = `${bucketName}/${dirName1}/`
+  const dirPath2 = `${bucketName}/${dirName1}/${dirName2}/`
+  const visiblePath = `${dirName1}/${dirName2}/`
+
+  await navigateToBuckets({ page })
+  await createBucket(page, bucketName)
+  await openBucket(page, bucketName)
+  await createDirectory(page, dirName1)
+  await openDirectory(page, dirPath1)
+  await createDirectory(page, dirName2)
+  await fileInList(page, dirPath2)
+  await changeExplorerMode(page, 'all files')
+  await expect(page.getByText(visiblePath)).toBeVisible()
+})
+
 test('can upload, rename, and delete files', async ({ page }) => {
   const bucketName = 'files-test'
   const dirName = 'test-dir'

apps/renterd/components/Files/FilesViewDropdownMenu.tsx

@@ -8,23 +8,30 @@ import {
   BaseMenuItem,
   MenuSeparator,
   Option,
+  TableColumn,
 } from '@siafoundation/design-system'
 import { CaretDown16, SettingsAdjust16 } from '@siafoundation/react-icons'
 import { sortOptions, SortField } from '../../contexts/filesManager/types'
-import { useFilesManager } from '../../contexts/filesManager'
 import { groupBy } from '@technically/lodash'
 
-export function FilesViewDropdownMenu() {
-  const {
-    configurableColumns,
-    toggleColumnVisibility,
-    resetDefaultColumnVisibility,
-    sortField,
-    setSortField,
-    sortDirection,
-    setSortDirection,
-    visibleColumnIds,
-  } = useFilesManager()
+export function FilesViewDropdownMenu({
+  tableState,
+}: {
+  tableState: {
+    sortField: SortField
+    sortDirection: 'asc' | 'desc'
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    visibleColumns: TableColumn<any, any, any>[]
+    toggleColumnVisibility: (id: string) => void
+    resetDefaultColumnVisibility: () => void
+    setSortField: (field: SortField) => void
+    setSortDirection: (direction: 'asc' | 'desc') => void
+    configurableColumns: {
+      label: string
+      id: string
+    }[]
+  }
+}) {
   return (
     <Popover
       trigger={
@@ -43,9 +50,9 @@ export function FilesViewDropdownMenu() {
         <Label>Order by</Label>
         <MenuItemRightSlot>
           <Select
-            value={sortField}
+            value={tableState.sortField}
             onChange={(e) => {
-              setSortField(e.currentTarget.value as SortField)
+              tableState.setSortField(e.currentTarget.value as SortField)
             }}
           >
             {Object.entries(groupBy(sortOptions, 'category')).map(
@@ -66,12 +73,14 @@ export function FilesViewDropdownMenu() {
         <Label>Direction</Label>
         <MenuItemRightSlot>
           <Select
-            value={sortDirection}
+            value={tableState.sortDirection}
             onClick={(e) => {
               e.stopPropagation()
             }}
             onChange={(e) => {
-              setSortDirection(e.currentTarget.value as 'asc' | 'desc')
+              tableState.setSortDirection(
+                e.currentTarget.value as 'asc' | 'desc'
+              )
             }}
           >
             <Option key="desc" value="desc">
@@ -90,7 +99,7 @@ export function FilesViewDropdownMenu() {
           <Button
             onClick={(e) => {
               e.stopPropagation()
-              resetDefaultColumnVisibility()
+              tableState.resetDefaultColumnVisibility()
             }}
           >
             Reset default
@@ -99,12 +108,12 @@ export function FilesViewDropdownMenu() {
       </BaseMenuItem>
       <BaseMenuItem>
         <PoolCombo
-          options={configurableColumns.map((column) => ({
+          options={tableState.configurableColumns.map((column) => ({
             label: column.label,
             value: column.id,
           }))}
-          values={visibleColumnIds}
-          onChange={(value) => toggleColumnVisibility(value)}
+          values={tableState.visibleColumns.map((column) => column.id)}
+          onChange={(value) => tableState.toggleColumnVisibility(value)}
         />
       </BaseMenuItem>
     </Popover>

apps/renterd/components/FilesDirectory/FilesActionsMenu.tsx

@@ -10,13 +10,15 @@ import { useFilesManager } from '../../contexts/filesManager'
 import { FilesViewDropdownMenu } from '../Files/FilesViewDropdownMenu'
 import { useDialog } from '../../contexts/dialog'
 import { useCanUpload } from '../Files/useCanUpload'
+import { useFilesDirectory } from '../../contexts/filesDirectory'
 import { useUploadsManager } from '../../contexts/uploadsManager'
 // esm compat
 const { useDropzone } = reactDropzone
 
 export function FilesActionsMenu() {
   const { openDialog } = useDialog()
   const { isViewingBuckets } = useFilesManager()
+  const { tableState } = useFilesDirectory()
   const { uploadFiles } = useUploadsManager()
 
   const canUpload = useCanUpload()
@@ -65,7 +67,7 @@ export function FilesActionsMenu() {
           </Button>
         </>
       )}
-      <FilesViewDropdownMenu />
+      <FilesViewDropdownMenu tableState={tableState} />
     </div>
   )
 }

apps/renterd/components/FilesDirectory/FilesExplorer.tsx

@@ -7,14 +7,7 @@ import { pluralize } from '@siafoundation/units'
 import { useUploadsManager } from '../../contexts/uploadsManager'
 
 export function FilesExplorer() {
-  const {
-    sortField,
-    sortDirection,
-    sortableColumns,
-    toggleSort,
-    isViewingBuckets,
-    visibleColumns,
-  } = useFilesManager()
+  const { isViewingBuckets } = useFilesManager()
   const { uploadFiles } = useUploadsManager()
   const {
     datasetPage,
@@ -27,6 +20,7 @@ export function FilesExplorer() {
     onDragCancel,
     onDragMove,
     draggingObjects,
+    tableState,
   } = useFilesDirectory()
   const canUpload = useCanUpload()
   return (
@@ -44,11 +38,11 @@ export function FilesExplorer() {
           pageSize={10}
           data={datasetPage}
           context={cellContext}
-          columns={visibleColumns}
-          sortableColumns={sortableColumns}
-          sortField={sortField}
-          sortDirection={sortDirection}
-          toggleSort={toggleSort}
+          columns={tableState.visibleColumns}
+          sortableColumns={tableState.sortableColumns}
+          sortField={tableState.sortField}
+          sortDirection={tableState.sortDirection}
+          toggleSort={tableState.toggleSort}
           rowSize="dense"
           onDragStart={onDragStart}
           onDragOver={onDragOver}

apps/renterd/components/FilesFlat/FilesActionsMenu.tsx

@@ -2,10 +2,11 @@ import { Button } from '@siafoundation/design-system'
 import { Search16 } from '@siafoundation/react-icons'
 import { useDialog } from '../../contexts/dialog'
 import { FilesViewDropdownMenu } from '../Files/FilesViewDropdownMenu'
+import { useFilesFlat } from '../../contexts/filesFlat'
 
 export function FilesActionsMenu() {
   const { openDialog } = useDialog()
-
+  const { tableState } = useFilesFlat()
   return (
     <div className="flex gap-2">
       <Button
@@ -15,7 +16,7 @@ export function FilesActionsMenu() {
       >
         <Search16 />
       </Button>
-      <FilesViewDropdownMenu />
+      <FilesViewDropdownMenu tableState={tableState} />
     </div>
   )
 }

apps/renterd/components/FilesFlat/FilesExplorer.tsx

@@ -1,12 +1,9 @@
 import { Table } from '@siafoundation/design-system'
 import { EmptyState } from './EmptyState'
 import { useFilesFlat } from '../../contexts/filesFlat'
-import { useFilesManager } from '../../contexts/filesManager'
 
 export function FilesExplorer() {
-  const { sortableColumns, visibleColumns, toggleSort } = useFilesManager()
-  const { datasetPage, datasetState, cellContext, sortField, sortDirection } =
-    useFilesFlat()
+  const { datasetPage, datasetState, cellContext, tableState } = useFilesFlat()
   return (
     <div className="relative">
       <Table
@@ -16,11 +13,11 @@ export function FilesExplorer() {
         pageSize={10}
         data={datasetPage}
         context={cellContext}
-        columns={visibleColumns}
-        sortableColumns={sortableColumns}
-        sortField={sortField}
-        sortDirection={sortDirection}
-        toggleSort={toggleSort}
+        columns={tableState.visibleColumns}
+        sortableColumns={tableState.sortableColumns}
+        sortField={tableState.sortField}
+        sortDirection={tableState.sortDirection}
+        toggleSort={tableState.toggleSort}
         rowSize="dense"
       />
     </div>

apps/renterd/contexts/filesDirectory/dataset.tsx

@@ -6,17 +6,20 @@ import { useFilesManager } from '../filesManager'
 import { defaultDatasetRefreshInterval } from '../../config/swr'
 import { ObjectsParams } from '@siafoundation/renterd-types'
 import { usePaginationMarker } from '@siafoundation/design-system'
+import { SortField } from '../filesManager/types'
 
 const defaultLimit = 50
 
-export function useDataset() {
-  const {
-    activeBucketName,
-    activeDirectoryPath,
-    fileNamePrefixFilter,
-    sortDirection,
-    sortField,
-  } = useFilesManager()
+export function useDataset({
+  tableState,
+}: {
+  tableState: {
+    sortField: SortField
+    sortDirection: 'asc' | 'desc'
+  }
+}) {
+  const { activeBucketName, activeDirectoryPath, fileNamePrefixFilter } =
+    useFilesManager()
   const { limit, marker } = usePaginationMarker(defaultLimit)
   const pathParams = bucketAndKeyParamsFromPath(activeDirectoryPath)
 
@@ -30,8 +33,8 @@ export function useDataset() {
     const p: ObjectsParams = {
       prefix,
       bucket: pathParams.bucket,
-      sortby: sortField,
-      sortdir: sortDirection,
+      sortby: tableState.sortField,
+      sortdir: tableState.sortDirection,
       limit,
       delimiter: '/',
     }
@@ -42,8 +45,8 @@ export function useDataset() {
   }, [
     fileNamePrefixFilter,
     pathParams,
-    sortField,
-    sortDirection,
+    tableState.sortField,
+    tableState.sortDirection,
     marker,
     limit,
   ])
@@ -69,6 +72,7 @@ export function useDataset() {
   const d = useDatasetGeneric({
     id: 'filesDirectory',
     objects,
+    tableState,
   })
 
   return {

apps/renterd/contexts/filesDirectory/index.tsx

@@ -1,28 +1,46 @@
-import { useDatasetState, useMultiSelect } from '@siafoundation/design-system'
+import {
+  useDatasetState,
+  useMultiSelect,
+  useTableState,
+} from '@siafoundation/design-system'
 import {
   createContext,
   MouseEvent,
   useContext,
   useEffect,
   useMemo,
 } from 'react'
-import { CellContext, ObjectData } from '../filesManager/types'
+import {
+  CellContext,
+  columnsDefaultVisible,
+  defaultSortField,
+  sortOptions,
+  ObjectData,
+} from '../filesManager/types'
 import { useDataset } from './dataset'
 import { useMove } from './move'
 import { useFilesManager } from '../filesManager'
+import { columns } from './columns'
 
 function useFilesDirectoryMain() {
+  const tableState = useTableState('renterd/v0/filesDirectory', {
+    columns,
+    columnsDefaultVisible,
+    sortOptions,
+    defaultSortField,
+  })
   const {
     activeDirectory,
     activeBucket,
     setActiveDirectory,
     filters,
-    visibleColumns,
     isViewingBuckets,
   } = useFilesManager()
 
   const { limit, marker, nextMarker, isMore, response, refresh, dataset } =
-    useDataset()
+    useDataset({
+      tableState,
+    })
 
   const multiSelect = useMultiSelect(dataset)
 
@@ -141,7 +159,6 @@ function useFilesDirectoryMain() {
 
   return {
     datasetState,
-    visibleColumns,
     multiSelect,
     cellContext,
     refresh,
@@ -159,6 +176,7 @@ function useFilesDirectoryMain() {
     draggingObjects,
     moveSelectedFiles,
     moveSelectedFilesOperationCount,
+    tableState,
   }
 }