feat: renterd contract set filter

.changeset/wise-shoes-ring.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+Contracts can now be filtered by contract set.

apps/renterd/components/Contracts/ContractsCmd/ContractsFilterCmd/ContractFilterCmdGroups/ContractSet.tsx

@@ -0,0 +1,68 @@
+import {
+  CommandGroup,
+  CommandItemNav,
+  CommandItemSearch,
+} from '../../../../CmdRoot/Item'
+import { Page } from '../../../../CmdRoot/types'
+import { useDialog } from '../../../../../contexts/dialog'
+import { contractSetsIncludeFilter } from '../../../ContractsFilterContractSetDialog'
+
+export const contractsFilterContractSetPage = {
+  namespace: 'contracts/filterContractSet',
+  label: 'Contracts filter by contract set',
+}
+
+export function ContractSetCmdGroup({
+  select,
+  currentPage,
+}: {
+  currentPage: Page
+  select: () => void
+}) {
+  const filter = contractSetsIncludeFilter('')
+  const { openDialog } = useDialog()
+  return (
+    <CommandGroup
+      currentPage={currentPage}
+      commandPage={contractsFilterContractSetPage}
+    >
+      <CommandItemSearch
+        currentPage={currentPage}
+        commandPage={contractsFilterContractSetPage}
+        onSelect={() => {
+          select()
+          openDialog('contractsFilterContractSet')
+        }}
+      >
+        {filter.label}
+      </CommandItemSearch>
+    </CommandGroup>
+  )
+}
+
+export function ContractSetCmdNav({
+  select,
+  currentPage,
+  parentPage,
+  commandPage,
+}: {
+  currentPage: Page
+  parentPage: Page
+  commandPage: Page
+  select: () => void
+}) {
+  const { openDialog } = useDialog()
+  return (
+    <CommandItemNav
+      currentPage={currentPage}
+      parentPage={parentPage}
+      commandPage={commandPage}
+      onSelect={() => {
+        select()
+        openDialog('contractsFilterContractSet')
+      }}
+    >
+      {contractsFilterContractSetPage.label}
+    </CommandItemNav>
+  )
+}

apps/renterd/components/Contracts/ContractsCmd/ContractsFilterCmd/ContractFilterCmdGroups/index.tsx

@@ -6,6 +6,7 @@ import { Page } from '../../../../CmdRoot/types'
 import { ClientFilterItem } from '@siafoundation/design-system'
 import { AddressCmdGroup } from './Address'
 import { PublicKeyCmdGroup } from './PublicKey'
+import { ContractSetCmdGroup } from './ContractSet'
 
 type Props = {
   currentPage: Page
@@ -17,6 +18,7 @@ export function ContractFilterCmdGroups({ currentPage, select }: Props) {
     <>
       <AddressCmdGroup currentPage={currentPage} select={select} />
       <PublicKeyCmdGroup currentPage={currentPage} select={select} />
+      <ContractSetCmdGroup currentPage={currentPage} select={select} />
       <ExpiryCmdGroup currentPage={currentPage} select={select} />
       <FormationCmdGroup currentPage={currentPage} select={select} />
       <RenewCmdGroup currentPage={currentPage} select={select} />

apps/renterd/components/Contracts/ContractsCmd/ContractsFilterCmd/ContractFilterNav/index.tsx

@@ -5,6 +5,7 @@ import { contractFilterRenewPage } from '../ContractFilterCmdGroups/Renew'
 import { Page } from '../../../../CmdRoot/types'
 import { AddressCmdNav } from '../ContractFilterCmdGroups/Address'
 import { PublicKeyCmdNav } from '../ContractFilterCmdGroups/PublicKey'
+import { ContractSetCmdNav } from '../ContractFilterCmdGroups/ContractSet'
 
 export const commandPage = {
   namespace: 'contracts',
@@ -38,6 +39,12 @@ export function ContractFilterNav({
         commandPage={commandPage}
         select={select}
       />
+      <ContractSetCmdNav
+        currentPage={currentPage}
+        parentPage={parentPage}
+        commandPage={commandPage}
+        select={select}
+      />
       <CommandItemNav
         currentPage={currentPage}
         parentPage={parentPage}

apps/renterd/components/Contracts/ContractsFilterContractSetDialog.tsx

@@ -0,0 +1,112 @@
+import {
+  ConfigFields,
+  Dialog,
+  FieldSelect,
+  FormSubmitButton,
+  useDialogFormHelpers,
+  useOnInvalid,
+} from '@siafoundation/design-system'
+import { useContracts } from '../../contexts/contracts'
+import { ContractData } from '../../contexts/contracts/types'
+import { useForm } from 'react-hook-form'
+import { useCallback } from 'react'
+
+export function contractSetsIncludeFilter(contractSet: string) {
+  return {
+    id: 'contractSetsInclude',
+    value: contractSet,
+    label: `contract in set ${contractSet}`,
+    fn: (d: ContractData) => {
+      return d.contractSets?.includes(contractSet)
+    },
+  }
+}
+
+function getDefaultValues(defaultContractSet?: string) {
+  return {
+    contractSet: defaultContractSet,
+  }
+}
+
+type Values = ReturnType<typeof getDefaultValues>
+
+function getFields({
+  contractSets,
+}: {
+  contractSets: string[]
+}): ConfigFields<Values, never> {
+  return {
+    contractSet: {
+      type: 'select',
+      title: 'Contract set',
+      options: contractSets.map((contractSet) => ({
+        label: contractSet,
+        value: contractSet,
+      })),
+      placeholder: 'autopilot',
+      validation: {
+        required: 'required',
+      },
+    },
+  }
+}
+
+type Props = {
+  trigger?: React.ReactNode
+  open: boolean
+  onOpenChange: (val: boolean) => void
+}
+
+export function ContractsFilterContractSetDialog({
+  trigger,
+  open,
+  onOpenChange,
+}: Props) {
+  const { setFilter, contractSets } = useContracts()
+
+  const defaultValues = getDefaultValues(contractSets.data?.[0])
+  const form = useForm({
+    mode: 'all',
+    defaultValues,
+  })
+
+  const { handleOpenChange, closeAndReset } = useDialogFormHelpers({
+    form,
+    onOpenChange,
+    defaultValues,
+  })
+
+  const fields = getFields({ contractSets: contractSets.data || [] })
+
+  const onValid = useCallback(
+    (values: Values) => {
+      setFilter(contractSetsIncludeFilter(values.contractSet))
+      closeAndReset()
+    },
+    [setFilter, closeAndReset]
+  )
+
+  const onInvalid = useOnInvalid(fields)
+
+  return (
+    <Dialog
+      trigger={trigger}
+      title="Filter by contract set"
+      open={open}
+      onOpenChange={handleOpenChange}
+      contentVariants={{
+        className: 'w-[400px]',
+      }}
+      onSubmit={form.handleSubmit(onValid, onInvalid)}
+    >
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-4">
+          <FieldSelect form={form} fields={fields} name="contractSet" />
+          <FormSubmitButton form={form} size="medium">
+            Filter
+          </FormSubmitButton>
+        </div>
+      </div>
+    </Dialog>
+  )
+}

apps/renterd/contexts/contracts/index.tsx

@@ -8,7 +8,10 @@ import {
   daysInMilliseconds,
 } from '@siafoundation/design-system'
 import { useRouter } from 'next/router'
-import { useContracts as useContractsData } from '@siafoundation/react-renterd'
+import {
+  useContracts as useContractsData,
+  useContractSets,
+} from '@siafoundation/react-renterd'
 import {
   createContext,
   useCallback,
@@ -205,6 +208,8 @@ function useContractsMain() {
   const { contractSetMetrics: contractSetCountMetrics } =
     useContractSetMetrics()
 
+  const contractSets = useContractSets()
+
   return {
     dataState,
     limit,
@@ -244,6 +249,7 @@ function useContractsMain() {
     allContractsSpendingMetrics,
     selectedContractSpendingMetrics,
     contractSetCountMetrics,
+    contractSets,
   }
 }
 

apps/renterd/contexts/dialog.tsx

@@ -11,6 +11,7 @@ import { HostsAllowBlockDialog } from '../components/Hosts/HostsAllowBlockDialog
 import { HostsFilterAddressDialog } from '../components/Hosts/HostsFilterAddressDialog'
 import { ContractsFilterAddressDialog } from '../components/Contracts/ContractsFilterAddressDialog'
 import { ContractsFilterPublicKeyDialog } from '../components/Contracts/ContractsFilterPublicKeyDialog'
+import { ContractsFilterContractSetDialog } from '../components/Contracts/ContractsFilterContractSetDialog'
 import { FilesSearchDialog } from '../components/Files/FilesSearchDialog'
 import { useSyncerConnect, useWallet } from '@siafoundation/react-renterd'
 import { RenterdSendSiacoinDialog } from '../dialogs/RenterdSendSiacoinDialog'
@@ -36,6 +37,7 @@ export type DialogType =
   | 'hostsFilterPublicKey'
   | 'contractsFilterAddress'
   | 'contractsFilterPublicKey'
+  | 'contractsFilterContractSet'
   | 'filesCreateBucket'
   | 'filesDeleteBucket'
   | 'filesCreateDirectory'
@@ -192,6 +194,10 @@ export function Dialogs() {
         open={dialog === 'contractsFilterAddress'}
         onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
       />
+      <ContractsFilterContractSetDialog
+        open={dialog === 'contractsFilterContractSet'}
+        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
+      />
       <ContractsFilterPublicKeyDialog
         open={dialog === 'contractsFilterPublicKey'}
         onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}

apps/walletd/dialogs/WalletAddressesAddDialog.tsx

@@ -7,11 +7,11 @@ import {
   Paragraph,
   triggerErrorToast,
   triggerSuccessToast,
+  useDialogFormHelpers,
 } from '@siafoundation/design-system'
 import { useWalletAddressAdd } from '@siafoundation/react-walletd'
 import { useCallback } from 'react'
 import { useForm } from 'react-hook-form'
-import { useDialogFormHelpers } from '../hooks/useDialogFormHelpers'
 import { useWallets } from '../contexts/wallets'
 import { isValidAddress } from '@siafoundation/units'
 import { uniq } from '@technically/lodash'

apps/walletd/dialogs/WalletAddressesGenerateLedgerDialog/index.tsx

@@ -9,11 +9,11 @@ import {
   Text,
   triggerErrorToast,
   triggerSuccessToast,
+  useDialogFormHelpers,
 } from '@siafoundation/design-system'
 import { useWalletAddressAdd } from '@siafoundation/react-walletd'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import { useDialogFormHelpers } from '../../hooks/useDialogFormHelpers'
 import { useWallets } from '../../contexts/wallets'
 import BigNumber from 'bignumber.js'
 import { DeviceConnectForm } from '../DeviceConnectForm'

apps/walletd/dialogs/WalletAddressesGenerateSeedDialog/index.tsx

@@ -6,11 +6,11 @@ import {
   FormSubmitButton,
   triggerErrorToast,
   triggerSuccessToast,
+  useDialogFormHelpers,
 } from '@siafoundation/design-system'
 import { useWalletAddressAdd } from '@siafoundation/react-walletd'
 import { useCallback, useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import { useDialogFormHelpers } from '../../hooks/useDialogFormHelpers'
 import { getWalletWasm } from '../../lib/wasm'
 import { useWallets } from '../../contexts/wallets'
 import BigNumber from 'bignumber.js'

apps/walletd/dialogs/WalletUnlockDialog.tsx

@@ -3,11 +3,11 @@ import {
   ConfigFields,
   Dialog,
   FormSubmitButton,
+  useDialogFormHelpers,
   useOnInvalid,
 } from '@siafoundation/design-system'
 import { useCallback, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import { useDialogFormHelpers } from '../hooks/useDialogFormHelpers'
 import { getWalletWasm } from '../lib/wasm'
 import { useWallets } from '../contexts/wallets'
 import { getFieldMnemonic, MnemonicFieldType } from '../lib/fieldMnemonic'

apps/walletd/dialogs/WalletUpdateDialog/index.tsx

@@ -7,12 +7,12 @@ import {
   FieldText,
   Badge,
   Label,
+  useDialogFormHelpers,
 } from '@siafoundation/design-system'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useForm } from 'react-hook-form'
 import { useWalletAdd } from '@siafoundation/react-walletd'
 import { useWallets } from '../../contexts/wallets'
-import { useDialogFormHelpers } from '../../hooks/useDialogFormHelpers'
 
 const defaultValues = {
   name: '',

apps/walletd/hooks/useDialogFormHelpers.ts → libs/design-system/src/form/useDialogFormHelpers.ts

@@ -1,13 +1,13 @@
 import { useCallback } from 'react'
-import { UseFormReturn } from 'react-hook-form'
+import { FieldValues, UseFormReturn } from 'react-hook-form'
 
-type Props<Values> = {
+type Props<Values extends FieldValues> = {
   form: UseFormReturn<Values>
   onOpenChange: (open: boolean) => void
   defaultValues: Values
 }
 
-export function useDialogFormHelpers<Values>({
+export function useDialogFormHelpers<Values extends FieldValues>({
   form,
   onOpenChange,
   defaultValues,

libs/design-system/src/index.ts

@@ -126,6 +126,7 @@ export * from './form/FieldSelect'
 export * from './form/useFormServerSynced'
 export * from './form/useFormChangeCount'
 export * from './form/useFormInit'
+export * from './form/useDialogFormHelpers'
 
 // site
 export * from './site/SiteHeading'

libs/react-renterd/src/bus.ts

@@ -479,11 +479,11 @@ export function useContractDelete(
   )
 }
 
-export function useContractsets(args?: HookArgsSwr<void, string[][]>) {
+export function useContractSets(args?: HookArgsSwr<void, string[]>) {
   return useGetSwr({ ...args, route: '/bus/contracts/sets' })
 }
 
-export function useContractsetUpdate(
+export function useContractSetUpdate(
   args: HookArgsCallback<{ name: string }, string[], never>
 ) {
   return usePutFunc({ ...args, route: '/bus/contracts/sets/:set' })