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/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,12 +10,16 @@ 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 { uploadFiles, isViewingBuckets } = useFilesManager()
+  const { isViewingBuckets } = useFilesManager()
+  const { tableState } = useFilesDirectory()
+  const { uploadFiles } = useUploadsManager()
 
   const canUpload = useCanUpload()
 
@@ -63,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,19 @@ 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({
+  sortField,
+  sortDirection,
+}: {
+  sortField: SortField
+  sortDirection: 'asc' | 'desc'
+}) {
+  const { activeBucketName, activeDirectoryPath, fileNamePrefixFilter } =
+    useFilesManager()
   const { limit, marker } = usePaginationMarker(defaultLimit)
   const pathParams = bucketAndKeyParamsFromPath(activeDirectoryPath)
 

apps/renterd/contexts/filesDirectory/index.tsx

@@ -1,28 +1,47 @@
-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({
+      sortField: tableState.sortField,
+      sortDirection: tableState.sortDirection,
+    })
 
   const multiSelect = useMultiSelect(dataset)
 
@@ -141,7 +160,6 @@ function useFilesDirectoryMain() {
 
   return {
     datasetState,
-    visibleColumns,
     multiSelect,
     cellContext,
     refresh,
@@ -159,6 +177,7 @@ function useFilesDirectoryMain() {
     draggingObjects,
     moveSelectedFiles,
     moveSelectedFilesOperationCount,
+    tableState,
   }
 }
 

apps/renterd/contexts/filesFlat/index.tsx

@@ -1,4 +1,8 @@
-import { useDatasetState, useMultiSelect } from '@siafoundation/design-system'
+import {
+  useDatasetState,
+  useMultiSelect,
+  useTableState,
+} from '@siafoundation/design-system'
 import {
   createContext,
   MouseEvent,
@@ -8,21 +12,26 @@ import {
 } from 'react'
 import { useDataset } from './dataset'
 import { useFilesManager } from '../filesManager'
-import { CellContext } from '../filesManager/types'
+import {
+  CellContext,
+  columnsDefaultVisible,
+  defaultSortField,
+  sortOptions,
+} from '../filesManager/types'
+import { columns } from './columns'
 
 function useFilesFlatMain() {
-  const {
-    activeBucket,
-    sortDirection,
-    sortField,
-    filters,
-    visibleColumns,
-    isViewingBuckets,
-  } = useFilesManager()
+  const tableState = useTableState('renterd/v0/filesFlat', {
+    columns,
+    columnsDefaultVisible,
+    sortOptions,
+    defaultSortField,
+  })
+  const { activeBucket, filters, isViewingBuckets } = useFilesManager()
   const { limit, marker, nextMarker, response, isMore, refresh, dataset } =
     useDataset({
-      sortField,
-      sortDirection,
+      sortField: tableState.sortField,
+      sortDirection: tableState.sortDirection,
     })
 
   const _datasetPage = useMemo(() => {
@@ -77,14 +86,11 @@ function useFilesFlatMain() {
     refresh,
     limit,
     datasetPage,
-    visibleColumns,
     marker,
     nextMarker,
     isMore,
     datasetPageTotal: dataset?.length || 0,
-    sortField,
-    filters,
-    sortDirection,
+    tableState,
   }
 }