refactor: dataset and datastate

.changeset/cold-keys-wash.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/renterd-types': patch
+---
+
+Host and contract responses are now Nullable rather than Maybe, since empty responses return null.

.changeset/cuddly-balloons-raise.md

@@ -0,0 +1,7 @@
+---
+'hostd': patch
+'renterd': patch
+'walletd': patch
+---
+
+Fixed a bug where the transaction list would show pending transactions when viewing pages other than the first page.

.changeset/fluffy-snails-hope.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/react-core': minor
+---
+
+Added maybeFromNullishArrayResponse for casting null empty array responses to [].

.changeset/hip-years-sin.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Refactored useDatasetState to include a noneOnPage state, a renamed loaded state, and a more explicit API.

.changeset/nice-maps-dress.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+PaginationMarker now explicitly takes a nextMarker and does not disable down navigation.

.changeset/old-planes-happen.md

@@ -0,0 +1,5 @@
+---
+'renterd': patch
+---
+
+Fixed a bug where pagination did now work on the file explorer all files mode.

.changeset/slow-tools-cheat.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Added EmptyState component for handling all dataset empty states with custom or default components.

.changeset/spotty-fans-shave.md

@@ -0,0 +1,7 @@
+---
+'hostd': minor
+'renterd': minor
+'walletd': minor
+---
+
+Data tables now show an empty state when viewing a page greater than the first page with no data.

apps/hostd-e2e/src/specs/contracts.spec.ts

@@ -1,7 +1,11 @@
 import { test, expect } from '@playwright/test'
 import { navigateToContracts } from '../fixtures/navigate'
 import { afterTest, beforeTest } from '../fixtures/beforeTest'
-import { getContractRows, getContractRowsAll } from '../fixtures/contracts'
+import {
+  getContractRowByIndex,
+  getContractRows,
+  getContractRowsAll,
+} from '../fixtures/contracts'
 
 test.beforeEach(async ({ page }) => {
   await beforeTest(page, {
@@ -35,3 +39,17 @@ test('new contracts do not show a renewed from or to contract', async ({
   await expect(getContractRows(page).getByTestId('renewedFrom')).toBeHidden()
   await expect(getContractRows(page).getByTestId('renewedTo')).toBeHidden()
 })
+
+test('viewing a page with no data shows the correct empty state', async ({
+  page,
+}) => {
+  await page.goto('/contracts?offset=100')
+  // Check that the empty state is correct.
+  await expect(
+    page.getByText('No data on this page, reset pagination to continue.')
+  ).toBeVisible()
+  await expect(page.getByText('Back to first page')).toBeVisible()
+  await page.getByText('Back to first page').click()
+  // Ensure we are now seeing rows of data.
+  await getContractRowByIndex(page, 0, true)
+})

apps/hostd/components/Contracts/ContractsFiltersBar.tsx

@@ -3,17 +3,16 @@ import { useContracts } from '../../contexts/contracts'
 import { ContractsFilterMenu } from './ContractsFilterMenu'
 
 export function ContractsFiltersBar() {
-  const { offset, limit, totalCount, pageCount, dataState } = useContracts()
+  const { offset, limit, datasetFilteredTotal, datasetState } = useContracts()
 
   return (
     <div className="flex gap-2 justify-between w-full">
       <ContractsFilterMenu />
       <PaginatorKnownTotal
         offset={offset}
         limit={limit}
-        isLoading={dataState === 'loading'}
-        datasetTotal={totalCount}
-        pageTotal={pageCount}
+        isLoading={datasetState === 'loading'}
+        datasetFilteredTotal={datasetFilteredTotal}
       />
     </div>
   )

apps/hostd/components/Contracts/index.tsx

@@ -1,4 +1,4 @@
-import { Table } from '@siafoundation/design-system'
+import { EmptyState, Table } from '@siafoundation/design-system'
 import { useContracts } from '../../contexts/contracts'
 import { StateNoneMatching } from './StateNoneMatching'
 import { StateNoneYet } from './StateNoneYet'
@@ -13,7 +13,7 @@ export function Contracts() {
     sortableColumns,
     toggleSort,
     limit,
-    dataState,
+    datasetState,
     cellContext,
   } = useContracts()
 
@@ -22,15 +22,14 @@ export function Contracts() {
       <Table
         testId="contractsTable"
         context={cellContext}
-        isLoading={dataState === 'loading'}
+        isLoading={datasetState === 'loading'}
         emptyState={
-          dataState === 'noneMatchingFilters' ? (
-            <StateNoneMatching />
-          ) : dataState === 'noneYet' ? (
-            <StateNoneYet />
-          ) : dataState === 'error' ? (
-            <StateError />
-          ) : null
+          <EmptyState
+            datasetState={datasetState}
+            noneMatching={<StateNoneMatching />}
+            noneYet={<StateNoneYet />}
+            error={<StateError />}
+          />
         }
         pageSize={limit}
         data={datasetPage}

apps/hostd/components/Node/Logs.tsx

@@ -4,7 +4,7 @@ import {
   Panel,
   Skeleton,
   Text,
-  useDatasetEmptyState,
+  useDatasetState,
 } from '@siafoundation/design-system'
 import { useLogsSearch } from '@siafoundation/hostd-react'
 import { humanDate } from '@siafoundation/units'
@@ -21,7 +21,7 @@ export function Logs() {
     },
   })
 
-  const loadingState = useDatasetEmptyState(
+  const loadingState = useDatasetState(
     logs.data?.entries,
     logs.isValidating,
     logs.error,

apps/hostd/components/Volumes/Layout.tsx

@@ -1,25 +1,18 @@
-import { Button, Text, Separator } from '@siafoundation/design-system'
+import { Button } from '@siafoundation/design-system'
 import { Add20 } from '@siafoundation/react-icons'
-import { humanBytes } from '@siafoundation/units'
 import {
   HostdAuthedLayout,
   HostdAuthedPageLayoutProps,
 } from '../HostdAuthedLayout'
 import { useDialog } from '../../contexts/dialog'
 import { HostdSidenav } from '../HostdSidenav'
 import { routes } from '../../config/routes'
-import { useVolumes } from '../../contexts/volumes'
 import { VolumesViewDropdownMenu } from './VolumesViewDropdownMenu'
+import { VolumesFiltersBar } from './VolumesFiltersBar'
 
 export const Layout = HostdAuthedLayout
 export function useLayoutProps(): HostdAuthedPageLayoutProps {
   const { openDialog } = useDialog()
-
-  const { dataset } = useVolumes()
-
-  const total = dataset?.reduce((acc, i) => acc + i.totalBytes, 0)
-  const used = dataset?.reduce((acc, i) => acc + i.usedBytes, 0)
-  const free = total - used
   return {
     title: 'Volumes',
     routes,
@@ -34,20 +27,6 @@ export function useLayoutProps(): HostdAuthedPageLayoutProps {
         <VolumesViewDropdownMenu />
       </>
     ),
-    stats: (
-      <div className="flex gap-4">
-        <Text size="12" font="mono" weight="medium">{`${humanBytes(
-          used
-        )} used`}</Text>
-        <Separator variant="vertical" />
-        <Text size="12" font="mono" weight="medium">{`${humanBytes(
-          free
-        )} free`}</Text>
-        <Separator variant="vertical" />
-        <Text size="12" font="mono" weight="medium">{`${humanBytes(
-          total
-        )} total`}</Text>
-      </div>
-    ),
+    stats: <VolumesFiltersBar />,
   }
 }

apps/hostd/components/Volumes/VolumesFiltersBar.tsx

@@ -0,0 +1,37 @@
+import { PaginatorKnownTotal } from '@siafoundation/design-system'
+import { Text, Separator } from '@siafoundation/design-system'
+import { humanBytes } from '@siafoundation/units'
+import { useVolumes } from '../../contexts/volumes'
+
+export function VolumesFiltersBar() {
+  const { dataset, datasetState, datasetFilteredTotal, offset, limit } =
+    useVolumes()
+
+  const total = dataset?.reduce((acc, i) => acc + i.totalBytes, 0)
+  const used = dataset?.reduce((acc, i) => acc + i.usedBytes, 0)
+  const free = total - used
+
+  return (
+    <div className="flex gap-2 justify-between w-full">
+      <div className="flex gap-4">
+        <Text size="12" font="mono" weight="medium">{`${humanBytes(
+          used
+        )} used`}</Text>
+        <Separator variant="vertical" />
+        <Text size="12" font="mono" weight="medium">{`${humanBytes(
+          free
+        )} free`}</Text>
+        <Separator variant="vertical" />
+        <Text size="12" font="mono" weight="medium">{`${humanBytes(
+          total
+        )} total`}</Text>
+      </div>
+      <PaginatorKnownTotal
+        offset={offset}
+        limit={limit}
+        isLoading={datasetState === 'loading'}
+        datasetFilteredTotal={datasetFilteredTotal}
+      />
+    </div>
+  )
+}

apps/hostd/components/Volumes/index.tsx

@@ -1,9 +1,9 @@
-import { Table } from '@siafoundation/design-system'
+import { EmptyState, Table } from '@siafoundation/design-system'
 import { useVolumes } from '../../contexts/volumes'
 import { StateNoneYet } from './StateNoneYet'
 
 export function Volumes() {
-  const { dataset, isLoading, columns } = useVolumes()
+  const { dataset, datasetState, isLoading, columns } = useVolumes()
   return (
     <div className="p-6 min-w-fit">
       <Table
@@ -12,7 +12,9 @@ export function Volumes() {
         pageSize={20}
         data={dataset}
         columns={columns}
-        emptyState={<StateNoneYet />}
+        emptyState={
+          <EmptyState datasetState={datasetState} noneYet={<StateNoneYet />} />
+        }
       />
     </div>
   )

apps/hostd/components/Wallet/WalletFilterBar.tsx

@@ -8,7 +8,7 @@ import { useTransactions } from '../../contexts/transactions'
 export function WalletFilterBar() {
   const { isSynced, syncPercent, isWalletSynced, walletScanPercent } =
     useSyncStatus()
-  const { offset, limit, pageCount, dataState } = useTransactions()
+  const { offset, limit, datasetPageTotal, datasetState } = useTransactions()
   return (
     <div className="flex gap-2 w-full">
       <WalletSyncWarning
@@ -21,8 +21,8 @@ export function WalletFilterBar() {
       <PaginatorUnknownTotal
         offset={offset}
         limit={limit}
-        pageTotal={pageCount}
-        isLoading={dataState === 'loading'}
+        pageTotal={datasetPageTotal}
+        isLoading={datasetState === 'loading'}
       />
     </div>
   )

apps/hostd/components/Wallet/index.tsx

@@ -1,4 +1,8 @@
-import { BalanceEvolution, Table } from '@siafoundation/design-system'
+import {
+  BalanceEvolution,
+  EmptyState,
+  Table,
+} from '@siafoundation/design-system'
 import { useTransactions } from '../../contexts/transactions'
 import { StateNoneMatching } from './StateNoneMatching'
 import { StateNoneYet } from './StateNoneYet'
@@ -8,8 +12,8 @@ export function Wallet() {
   const {
     balances,
     metrics,
-    dataset,
-    dataState,
+    datasetPage,
+    datasetState,
     columns,
     cellContext,
     sortableColumns,
@@ -29,18 +33,17 @@ export function Wallet() {
       ) : null}
       <Table
         testId="eventsTable"
-        isLoading={dataState === 'loading'}
+        isLoading={datasetState === 'loading'}
         emptyState={
-          dataState === 'noneMatchingFilters' ? (
-            <StateNoneMatching />
-          ) : dataState === 'noneYet' ? (
-            <StateNoneYet />
-          ) : dataState === 'error' ? (
-            <StateError />
-          ) : null
+          <EmptyState
+            datasetState={datasetState}
+            noneMatching={<StateNoneMatching />}
+            noneYet={<StateNoneYet />}
+            error={<StateError />}
+          />
         }
         pageSize={defaultPageSize}
-        data={dataset}
+        data={datasetPage}
         context={cellContext}
         columns={columns}
         sortableColumns={sortableColumns}

apps/hostd/contexts/contracts/index.tsx

@@ -1,6 +1,6 @@
 import {
   useTableState,
-  useDatasetEmptyState,
+  useDatasetState,
   useServerFilters,
   getContractsTimeRangeBlockHeight,
   useMultiSelect,
@@ -82,15 +82,6 @@ function useContractsMain() {
     [enabledColumns]
   )
 
-  const isValidating = response.isValidating
-  const error = response.error
-  const dataState = useDatasetEmptyState(
-    _datasetPage,
-    isValidating,
-    error,
-    filters
-  )
-
   const { estimatedBlockHeight, isSynced, nodeBlockHeight } = useSyncStatus()
   const currentHeight = isSynced ? nodeBlockHeight : estimatedBlockHeight
 
@@ -115,6 +106,16 @@ function useContractsMain() {
     })
   }, [_datasetPage, multiSelect])
 
+  const isValidating = response.isValidating
+  const error = response.error
+  const datasetState = useDatasetState({
+    datasetPage,
+    isValidating,
+    error,
+    filters,
+    offset,
+  })
+
   const siascanUrl = useSiascanUrl()
 
   const cellContext = useMemo(
@@ -128,12 +129,12 @@ function useContractsMain() {
   )
 
   return {
-    dataState,
+    datasetState,
     offset,
     limit,
     cellContext,
-    pageCount: datasetPage?.length || 0,
-    totalCount: response.data?.count,
+    datasetPageTotal: datasetPage?.length || 0,
+    datasetFilteredTotal: response.data?.count,
     columns: filteredTableColumns,
     datasetPage,
     configurableColumns,