refactor: visible columns

SiaFoundation · Dec 20, 2024 · 5a8824d · 5a8824d
1 parent ab7ee70
commit 5a8824d
Show file tree

Hide file tree

Showing 44 changed files with 192 additions and 290 deletions.
diff --git a/.changeset/cyan-lamps-hang.md b/.changeset/cyan-lamps-hang.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+useTableState now handles column filtering.
diff --git a/.changeset/silly-zebras-collect.md b/.changeset/silly-zebras-collect.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Renamed enabledColumns to visibleColumns and removed disabled categories from useTableState.
diff --git a/apps/hostd/components/Contracts/ContractsViewDropdownMenu.tsx b/apps/hostd/components/Contracts/ContractsViewDropdownMenu.tsx
@@ -30,7 +30,7 @@ export function ContractsViewDropdownMenu() {
     setSortField,
     sortDirection,
     setSortDirection,
-    enabledColumns,
+    visibleColumnIds,
   } = useContracts()
 
   const generalColumns = configurableColumns
@@ -128,42 +128,42 @@ export function ContractsViewDropdownMenu() {
       <MenuSectionLabelToggleAll
         label="General"
         columns={generalColumns.map((c) => c.value)}
-        enabled={enabledColumns}
+        enabled={visibleColumnIds}
         setColumnsVisible={setColumnsVisible}
         setColumnsHidden={setColumnsHidden}
       />
       <BaseMenuItem>
         <PoolCombo
           options={generalColumns}
-          values={enabledColumns}
+          values={visibleColumnIds}
           onChange={(value) => toggleColumnVisibility(value)}
         />
       </BaseMenuItem>
       <MenuSectionLabelToggleAll
         label="Time"
         columns={timeColumns.map((c) => c.value)}
-        enabled={enabledColumns}
+        enabled={visibleColumnIds}
         setColumnsVisible={setColumnsVisible}
         setColumnsHidden={setColumnsHidden}
       />
       <BaseMenuItem>
         <PoolCombo
           options={timeColumns}
-          values={enabledColumns}
+          values={visibleColumnIds}
           onChange={(value) => toggleColumnVisibility(value)}
         />
       </BaseMenuItem>
       <MenuSectionLabelToggleAll
         label="Usage"
         columns={financialColumns.map((c) => c.value)}
-        enabled={enabledColumns}
+        enabled={visibleColumnIds}
         setColumnsVisible={setColumnsVisible}
         setColumnsHidden={setColumnsHidden}
       />
       <BaseMenuItem>
         <PoolCombo
           options={financialColumns}
-          values={enabledColumns}
+          values={visibleColumnIds}
           onChange={(value) => toggleColumnVisibility(value)}
         />
       </BaseMenuItem>

diff --git a/apps/hostd/components/Contracts/index.tsx b/apps/hostd/components/Contracts/index.tsx
@@ -6,7 +6,7 @@ import { StateError } from './StateError'
 
 export function Contracts() {
   const {
-    columns,
+    visibleColumns,
     datasetPage,
     sortField,
     sortDirection,
@@ -33,7 +33,7 @@ export function Contracts() {
         }
         pageSize={limit}
         data={datasetPage}
-        columns={columns}
+        columns={visibleColumns}
         sortableColumns={sortableColumns}
         sortDirection={sortDirection}
         sortField={sortField}

diff --git a/apps/hostd/components/Volumes/VolumesViewDropdownMenu.tsx b/apps/hostd/components/Volumes/VolumesViewDropdownMenu.tsx
@@ -21,7 +21,7 @@ export function VolumesViewDropdownMenu() {
     resetDefaultColumnVisibility,
     setColumnsVisible,
     setColumnsHidden,
-    enabledColumns,
+    visibleColumnIds,
   } = useVolumes()
 
   const generalColumns = configurableColumns
@@ -68,28 +68,28 @@ export function VolumesViewDropdownMenu() {
       <MenuSectionLabelToggleAll
         label="General"
         columns={generalColumns.map((c) => c.value)}
-        enabled={enabledColumns}
+        enabled={visibleColumnIds}
         setColumnsVisible={setColumnsVisible}
         setColumnsHidden={setColumnsHidden}
       />
       <BaseMenuItem>
         <PoolCombo
           options={generalColumns}
-          values={enabledColumns}
+          values={visibleColumnIds}
           onChange={(value) => toggleColumnVisibility(value)}
         />
       </BaseMenuItem>
       <MenuSectionLabelToggleAll
         label="Operations"
         columns={opsColumns.map((c) => c.value)}
-        enabled={enabledColumns}
+        enabled={visibleColumnIds}
         setColumnsVisible={setColumnsVisible}
         setColumnsHidden={setColumnsHidden}
       />
       <BaseMenuItem>
         <PoolCombo
           options={opsColumns}
-          values={enabledColumns}
+          values={visibleColumnIds}
           onChange={(value) => toggleColumnVisibility(value)}
         />
       </BaseMenuItem>

diff --git a/apps/hostd/components/Volumes/index.tsx b/apps/hostd/components/Volumes/index.tsx
@@ -3,15 +3,15 @@ import { useVolumes } from '../../contexts/volumes'
 import { StateNoneYet } from './StateNoneYet'
 
 export function Volumes() {
-  const { dataset, datasetState, isLoading, columns } = useVolumes()
+  const { dataset, datasetState, isLoading, visibleColumns } = useVolumes()
   return (
     <div className="p-6 min-w-fit">
       <Table
         testId="volumesTable"
         isLoading={isLoading}
         pageSize={20}
         data={dataset}
-        columns={columns}
+        columns={visibleColumns}
         emptyState={
           <EmptyState datasetState={datasetState} noneYet={<StateNoneYet />} />
         }

diff --git a/apps/hostd/components/Wallet/index.tsx b/apps/hostd/components/Wallet/index.tsx
@@ -14,7 +14,7 @@ export function Wallet() {
     metrics,
     datasetPage,
     datasetState,
-    columns,
+    visibleColumns,
     cellContext,
     sortableColumns,
     sortDirection,
@@ -45,7 +45,7 @@ export function Wallet() {
         pageSize={defaultPageSize}
         data={datasetPage}
         context={cellContext}
-        columns={columns}
+        columns={visibleColumns}
         sortableColumns={sortableColumns}
         sortDirection={sortDirection}
         sortField={sortField}

diff --git a/apps/hostd/contexts/contracts/index.tsx b/apps/hostd/contexts/contracts/index.tsx
@@ -14,9 +14,7 @@ import {
   columnsDefaultVisible,
   ContractData,
   defaultSortField,
-  SortField,
   sortOptions,
-  TableColumnId,
 } from './types'
 import { columns } from './columns'
 import { useDataset } from './dataset'
@@ -33,7 +31,8 @@ function useContractsMain() {
 
   const {
     configurableColumns,
-    enabledColumns,
+    visibleColumnIds,
+    visibleColumns,
     sortableColumns,
     toggleColumnVisibility,
     setColumnsVisible,
@@ -44,7 +43,7 @@ function useContractsMain() {
     sortField,
     sortDirection,
     resetDefaultColumnVisibility,
-  } = useTableState<TableColumnId, SortField>('hostd/v0/contracts', {
+  } = useTableState('hostd/v0/contracts', {
     columns,
     columnsDefaultVisible,
     sortOptions,
@@ -75,11 +74,6 @@ function useContractsMain() {
     response,
   })
 
-  const filteredTableColumns = useMemo(
-    () => columns.filter((column) => enabledColumns.includes(column.id)),
-    [enabledColumns]
-  )
-
   const { estimatedBlockHeight, isSynced, nodeBlockHeight } = useSyncStatus()
   const currentHeight = isSynced ? nodeBlockHeight : estimatedBlockHeight
 
@@ -133,10 +127,10 @@ function useContractsMain() {
     cellContext,
     datasetPageTotal: datasetPage?.length || 0,
     datasetFilteredTotal: response.data?.count,
-    columns: filteredTableColumns,
+    visibleColumns,
     datasetPage,
     configurableColumns,
-    enabledColumns,
+    visibleColumnIds,
     sortableColumns,
     toggleColumnVisibility,
     setColumnsVisible,

diff --git a/apps/hostd/contexts/transactions/index.tsx b/apps/hostd/contexts/transactions/index.tsx
@@ -107,7 +107,8 @@ function useTransactionsMain() {
 
   const {
     configurableColumns,
-    enabledColumns,
+    visibleColumnIds,
+    visibleColumns,
     sortableColumns,
     toggleColumnVisibility,
     setColumnsVisible,
@@ -125,14 +126,6 @@ function useTransactionsMain() {
     defaultSortField,
   })
 
-  const filteredTableColumns = useMemo(
-    () =>
-      columns.filter(
-        (column) => column.fixed || enabledColumns.includes(column.id)
-      ),
-    [enabledColumns]
-  )
-
   const siascanUrl = useSiascanUrl()
   const cellContext = useMemo<CellContext>(
     () => ({
@@ -190,7 +183,7 @@ function useTransactionsMain() {
     defaultPageSize,
     cellContext,
     configurableColumns,
-    enabledColumns,
+    visibleColumnIds,
     sortableColumns,
     toggleColumnVisibility,
     setColumnsVisible,
@@ -206,8 +199,7 @@ function useTransactionsMain() {
     removeFilter,
     removeLastFilter,
     resetFilters,
-    filteredTableColumns,
-    columns,
+    visibleColumns,
   }
 }
 

diff --git a/apps/hostd/contexts/volumes/index.tsx b/apps/hostd/contexts/volumes/index.tsx
@@ -7,8 +7,8 @@ import {
 } from '@siafoundation/design-system'
 import { VolumeMeta } from '@siafoundation/hostd-types'
 import { useVolumes as useVolumesData } from '@siafoundation/hostd-react'
-import { createContext, useContext, useMemo } from 'react'
-import { columnsDefaultVisible, TableColumnId, VolumeData } from './types'
+import { createContext, useContext } from 'react'
+import { columnsDefaultVisible, VolumeData } from './types'
 import { columns } from './columns'
 import { useDataset } from './dataset'
 import { defaultDatasetRefreshInterval } from '../../config/swr'
@@ -22,7 +22,8 @@ function useVolumesMain() {
 
   const {
     configurableColumns,
-    enabledColumns,
+    visibleColumnIds,
+    visibleColumns,
     toggleColumnVisibility,
     setColumnsVisible,
     setColumnsHidden,
@@ -32,7 +33,7 @@ function useVolumesMain() {
     sortField,
     sortDirection,
     resetDefaultColumnVisibility,
-  } = useTableState<TableColumnId, never>('hostd/v0/volumes', {
+  } = useTableState('hostd/v0/volumes', {
     columns,
     columnsDefaultVisible,
   })
@@ -61,11 +62,6 @@ function useVolumesMain() {
     limit,
   })
 
-  const filteredTableColumns = useMemo(
-    () => columns.filter((column) => enabledColumns.includes(column.id)),
-    [enabledColumns]
-  )
-
   const isValidating = response.isValidating
   const error = response.error
   const datasetState = useDatasetState({
@@ -80,13 +76,13 @@ function useVolumesMain() {
     datasetFilteredTotal: datasetFiltered?.length || 0,
     datasetPageTotal: datasetPage?.length || 0,
     isLoading: response.isValidating,
-    columns: filteredTableColumns,
+    visibleColumns,
     dataset,
     datasetPage,
     offset,
     limit,
     configurableColumns,
-    enabledColumns,
+    visibleColumnIds,
     toggleColumnVisibility,
     setColumnsVisible,
     setColumnsHidden,

diff --git a/apps/renterd/components/Alerts/AlertsViewDropdownMenu.tsx b/apps/renterd/components/Alerts/AlertsViewDropdownMenu.tsx
@@ -21,7 +21,7 @@ export function AlertsViewDropdownMenu() {
     resetDefaultColumnVisibility,
     setColumnsVisible,
     setColumnsHidden,
-    enabledColumns,
+    visibleColumnIds,
   } = useAlerts()
 
   const generalColumns = configurableColumns
@@ -62,14 +62,14 @@ export function AlertsViewDropdownMenu() {
       <MenuSectionLabelToggleAll
         label="General"
         columns={generalColumns.map((c) => c.value)}
-        enabled={enabledColumns}
+        enabled={visibleColumnIds}
         setColumnsVisible={setColumnsVisible}
         setColumnsHidden={setColumnsHidden}
       />
       <BaseMenuItem>
         <PoolCombo
           options={generalColumns}
-          values={enabledColumns}
+          values={visibleColumnIds}
           onChange={(value) => toggleColumnVisibility(value)}
         />
       </BaseMenuItem>

diff --git a/apps/renterd/components/Alerts/index.tsx b/apps/renterd/components/Alerts/index.tsx
@@ -6,7 +6,7 @@ import { useAlerts } from '../../contexts/alerts'
 
 export function Alerts() {
   const {
-    columns,
+    visibleColumns,
     datasetPage,
     sortField,
     sortDirection,
@@ -32,7 +32,7 @@ export function Alerts() {
         sortableColumns={sortableColumns}
         pageSize={limit}
         data={datasetPage}
-        columns={columns}
+        columns={visibleColumns}
         sortDirection={sortDirection}
         sortField={sortField}
         toggleSort={toggleSort}