refactor: improve multiselect behaviours

SiaFoundation · Dec 10, 2024 · c90882c · c90882c
1 parent f3d2a95
commit c90882c
Show file tree

Hide file tree

Showing 33 changed files with 845 additions and 520 deletions.
diff --git a/.changeset/flat-days-camp.md b/.changeset/flat-days-camp.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Renamed selectionMap to selection in the useMultiSelect hook API.
diff --git a/.changeset/real-paws-accept.md b/.changeset/real-paws-accept.md
@@ -0,0 +1,7 @@
+---
+'hostd': minor
+'renterd': minor
+'walletd': minor
+---
+
+Multi-select now supports single select, toggle select, and range selection interactions, with click, ctrl-click, and shift-click.
diff --git a/.changeset/wicked-radios-tie.md b/.changeset/wicked-radios-tie.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Table now prevents default on any mouse down with shift held. This ensures the user does not highlight text while shift selecting a range of rows.
diff --git a/apps/hostd-e2e/src/specs/contracts.spec.ts b/apps/hostd-e2e/src/specs/contracts.spec.ts
@@ -16,9 +16,8 @@ test.afterEach(async () => {
 test('contracts bulk integrity check', async ({ page }) => {
   await navigateToContracts(page)
   const rows = await getContractRowsAll(page)
-  for (const row of rows) {
-    await row.click()
-  }
+  rows.at(0).click()
+  rows.at(-1).click({ modifiers: ['Shift'] })
 
   const menu = page.getByLabel('contract multi-select menu')
 

diff --git a/apps/hostd/components/Contracts/ContractsBulkMenu/ContractsBulkIntegrityCheck.tsx b/apps/hostd/components/Contracts/ContractsBulkMenu/ContractsBulkIntegrityCheck.tsx
@@ -17,8 +17,8 @@ export function ContractsBulkIntegrityCheck() {
   const integrityCheck = useContractsIntegrityCheck()
 
   const ids = useMemo(
-    () => Object.entries(multiSelect.selectionMap).map(([_, item]) => item.id),
-    [multiSelect.selectionMap]
+    () => Object.entries(multiSelect.selection).map(([_, item]) => item.id),
+    [multiSelect.selection]
   )
   const checkAll = useCallback(async () => {
     await handleBatchOperation(

diff --git a/apps/hostd/contexts/contracts/index.tsx b/apps/hostd/contexts/contracts/index.tsx
@@ -110,7 +110,7 @@ function useContractsMain() {
         ...datum,
         onClick: (e: React.MouseEvent<HTMLTableRowElement>) =>
           multiSelect.onSelect(datum.id, e),
-        isSelected: !!multiSelect.selectionMap[datum.id],
+        isSelected: !!multiSelect.selection[datum.id],
       }
     })
   }, [_datasetPage, multiSelect])

diff --git a/apps/renterd-e2e/src/specs/contracts.spec.ts b/apps/renterd-e2e/src/specs/contracts.spec.ts
@@ -66,9 +66,8 @@ test('contracts prunable size', async ({ page }) => {
 test('contracts bulk delete', async ({ page }) => {
   await navigateToContracts({ page })
   const rows = await getContractRowsAll(page)
-  for (const row of rows) {
-    await row.click()
-  }
+  rows.at(0).click()
+  rows.at(-1).click({ modifiers: ['Shift'] })
 
   // Delete selected contracts.
   const menu = page.getByLabel('contract multi-select menu')
@@ -82,9 +81,8 @@ test('contracts bulk delete', async ({ page }) => {
 test('contracts bulk allowlist', async ({ page }) => {
   await navigateToContracts({ page })
   const rows = await getContractRowsAll(page)
-  for (const row of rows) {
-    await row.click()
-  }
+  rows.at(0).click()
+  rows.at(-1).click({ modifiers: ['Shift'] })
 
   const menu = page.getByLabel('contract multi-select menu')
   const dialog = page.getByRole('dialog')
@@ -101,9 +99,8 @@ test('contracts bulk allowlist', async ({ page }) => {
   ).toHaveCount(3)
   await dialog.getByLabel('close').click()
 
-  for (const row of rows) {
-    await row.click()
-  }
+  rows.at(0).click()
+  rows.at(-1).click({ modifiers: ['Shift'] })
 
   // Remove selected contract hosts from the allowlist.
   await menu.getByLabel('remove host public keys from allowlist').click()
@@ -118,9 +115,8 @@ test('contracts bulk allowlist', async ({ page }) => {
 test('contracts bulk blocklist', async ({ page }) => {
   await navigateToContracts({ page })
   const rows = await getContractRowsAll(page)
-  for (const row of rows) {
-    await row.click()
-  }
+  rows.at(0).click()
+  rows.at(-1).click({ modifiers: ['Shift'] })
 
   const menu = page.getByLabel('contract multi-select menu')
   const dialog = page.getByRole('dialog')
@@ -137,9 +133,8 @@ test('contracts bulk blocklist', async ({ page }) => {
   await expect(dialog.getByText('The allowlist is empty')).toBeVisible()
   await dialog.getByLabel('close').click()
 
-  for (const row of rows) {
-    await row.click()
-  }
+  rows.at(0).click()
+  rows.at(-1).click({ modifiers: ['Shift'] })
 
   // Remove selected contract hosts from the blocklist.
   await menu.getByLabel('remove host addresses from blocklist').click()

diff --git a/apps/renterd-e2e/src/specs/filesMove.spec.ts b/apps/renterd-e2e/src/specs/filesMove.spec.ts
@@ -50,7 +50,7 @@ test('move two files by selecting and dragging from one directory out to another
   const file3 = await getFileRowById(page, 'bucket1/dir2/file3.txt', true)
   await file3.click()
   const dir3 = await getFileRowById(page, 'bucket1/dir2/dir3/', true)
-  await dir3.click()
+  await dir3.click({ modifiers: ['ControlOrMeta'] })
 
   // Move all selected files by dragging one of them.
   await moveMouseOver(page, file3)
@@ -108,7 +108,7 @@ test('move a file via drag and drop while leaving a separate set of selected fil
   const file3 = await getFileRowById(page, 'bucket1/dir2/file3.txt', true)
   await file3.click()
   const file4 = await getFileRowById(page, 'bucket1/dir2/file4.txt', true)
-  await file4.click()
+  await file4.click({ modifiers: ['ControlOrMeta'] })
 
   // Move file5 which is not in the selection.
   const file5 = await getFileRowById(page, 'bucket1/dir2/file5.txt', true)
@@ -165,7 +165,7 @@ test('move files by selecting and using the docked menu bulk action', async ({
   const file3 = await getFileRowById(page, 'bucket1/dir2/file3.txt', true)
   await file3.click()
   const dir3 = await getFileRowById(page, 'bucket1/dir2/dir3/', true)
-  await dir3.click()
+  await dir3.click({ modifiers: ['ControlOrMeta'] })
 
   await navigateToParentDirectory(page)
 

diff --git a/apps/renterd-e2e/src/specs/hosts.spec.ts b/apps/renterd-e2e/src/specs/hosts.spec.ts
@@ -32,9 +32,8 @@ test('hosts explorer shows all hosts', async ({ page }) => {
 test('hosts bulk allowlist', async ({ page }) => {
   await navigateToHosts({ page })
   const rows = await getHostRowsAll(page)
-  for (const row of rows) {
-    await row.click()
-  }
+  rows.at(0).click()
+  rows.at(-1).click({ modifiers: ['Shift'] })
 
   const menu = page.getByLabel('host multi-select menu')
   const dialog = page.getByRole('dialog')
@@ -57,9 +56,8 @@ test('hosts bulk allowlist', async ({ page }) => {
     getHostRows(page).getByTestId('allow').getByTestId('allowed')
   ).toHaveCount(3)
 
-  for (const row of rows) {
-    await row.click()
-  }
+  rows.at(0).click()
+  rows.at(-1).click({ modifiers: ['Shift'] })
 
   // Remove selected hosts from the allowlist.
   await menu.getByLabel('remove host public keys from allowlist').click()
@@ -81,9 +79,8 @@ test('hosts bulk allowlist', async ({ page }) => {
 test('hosts bulk blocklist', async ({ page }) => {
   await navigateToHosts({ page })
   const rows = await getHostRowsAll(page)
-  for (const row of rows) {
-    await row.click()
-  }
+  rows[0].click()
+  rows[rows.length - 1].click({ modifiers: ['Shift'] })
 
   const menu = page.getByLabel('host multi-select menu')
   const dialog = page.getByRole('dialog')
@@ -106,9 +103,8 @@ test('hosts bulk blocklist', async ({ page }) => {
     getHostRows(page).getByTestId('allow').getByTestId('allowed')
   ).toHaveCount(0)
 
-  for (const row of rows) {
-    await row.click()
-  }
+  rows[0].click()
+  rows[rows.length - 1].click({ modifiers: ['Shift'] })
 
   // Remove selected hosts from the blocklist.
   await menu.getByLabel('remove host addresses from blocklist').click()

diff --git a/apps/renterd/components/Contracts/ContractsBulkMenu/ContractsAddAllowlist.tsx b/apps/renterd/components/Contracts/ContractsBulkMenu/ContractsAddAllowlist.tsx
@@ -7,8 +7,8 @@ export function ContractsAddAllowlist() {
 
   const publicKeys = useMemo(
     () =>
-      Object.entries(multiSelect.selectionMap).map(([_, item]) => item.hostKey),
-    [multiSelect.selectionMap]
+      Object.entries(multiSelect.selection).map(([_, item]) => item.hostKey),
+    [multiSelect.selection]
   )
 
   return <BulkAddAllowlist multiSelect={multiSelect} publicKeys={publicKeys} />

diff --git a/apps/renterd/components/Contracts/ContractsBulkMenu/ContractsAddBlocklist.tsx b/apps/renterd/components/Contracts/ContractsBulkMenu/ContractsAddBlocklist.tsx
@@ -6,9 +6,8 @@ export function ContractsAddBlocklist() {
   const { multiSelect } = useContracts()
 
   const hostAddresses = useMemo(
-    () =>
-      Object.entries(multiSelect.selectionMap).map(([_, item]) => item.hostIp),
-    [multiSelect.selectionMap]
+    () => Object.entries(multiSelect.selection).map(([_, item]) => item.hostIp),
+    [multiSelect.selection]
   )
   return (
     <BulkAddBlocklist multiSelect={multiSelect} hostAddresses={hostAddresses} />

diff --git a/apps/renterd/components/Contracts/ContractsBulkMenu/ContractsBulkDelete.tsx b/apps/renterd/components/Contracts/ContractsBulkMenu/ContractsBulkDelete.tsx
@@ -14,8 +14,8 @@ export function ContractsBulkDelete() {
   const { multiSelect } = useContracts()
 
   const ids = useMemo(
-    () => Object.entries(multiSelect.selectionMap).map(([_, item]) => item.id),
-    [multiSelect.selectionMap]
+    () => Object.entries(multiSelect.selection).map(([_, item]) => item.id),
+    [multiSelect.selection]
   )
   const { openConfirmDialog } = useDialog()
   const deleteContract = useContractDelete()

diff --git a/apps/renterd/components/Contracts/ContractsBulkMenu/ContractsRemoveAllowlist.tsx b/apps/renterd/components/Contracts/ContractsBulkMenu/ContractsRemoveAllowlist.tsx
@@ -7,8 +7,8 @@ export function ContractsRemoveAllowlist() {
 
   const publicKeys = useMemo(
     () =>
-      Object.entries(multiSelect.selectionMap).map(([_, item]) => item.hostKey),
-    [multiSelect.selectionMap]
+      Object.entries(multiSelect.selection).map(([_, item]) => item.hostKey),
+    [multiSelect.selection]
   )
 
   return (

diff --git a/apps/renterd/components/Contracts/ContractsBulkMenu/ContractsRemoveBlocklist.tsx b/apps/renterd/components/Contracts/ContractsBulkMenu/ContractsRemoveBlocklist.tsx
@@ -6,9 +6,8 @@ export function ContractsRemoveBlocklist() {
   const { multiSelect } = useContracts()
 
   const hostAddresses = useMemo(
-    () =>
-      Object.entries(multiSelect.selectionMap).map(([_, item]) => item.hostIp),
-    [multiSelect.selectionMap]
+    () => Object.entries(multiSelect.selection).map(([_, item]) => item.hostIp),
+    [multiSelect.selection]
   )
 
   return (

diff --git a/apps/renterd/components/Files/bulkActions/FilesBulkDelete.tsx b/apps/renterd/components/Files/bulkActions/FilesBulkDelete.tsx
@@ -18,11 +18,11 @@ export function FilesBulkDelete({
 }) {
   const filesToDelete = useMemo(
     () =>
-      Object.entries(multiSelect.selectionMap).map(([_, item]) => ({
+      Object.entries(multiSelect.selection).map(([_, item]) => ({
         bucket: item.bucket.name,
         prefix: item.key,
       })),
-    [multiSelect.selectionMap]
+    [multiSelect.selection]
   )
   const { openConfirmDialog } = useDialog()
   const objectsRemove = useObjectsRemove()

diff --git a/apps/renterd/components/Hosts/HostsBulkMenu/HostsAddAllowlist.tsx b/apps/renterd/components/Hosts/HostsBulkMenu/HostsAddAllowlist.tsx
@@ -7,10 +7,8 @@ export function HostsAddAllowlist() {
 
   const publicKeys = useMemo(
     () =>
-      Object.entries(multiSelect.selectionMap).map(
-        ([_, item]) => item.publicKey
-      ),
-    [multiSelect.selectionMap]
+      Object.entries(multiSelect.selection).map(([_, item]) => item.publicKey),
+    [multiSelect.selection]
   )
 
   return <BulkAddAllowlist multiSelect={multiSelect} publicKeys={publicKeys} />

diff --git a/apps/renterd/components/Hosts/HostsBulkMenu/HostsAddBlocklist.tsx b/apps/renterd/components/Hosts/HostsBulkMenu/HostsAddBlocklist.tsx
@@ -7,10 +7,8 @@ export function HostsAddBlocklist() {
 
   const hostAddresses = useMemo(
     () =>
-      Object.entries(multiSelect.selectionMap).map(
-        ([_, item]) => item.netAddress
-      ),
-    [multiSelect.selectionMap]
+      Object.entries(multiSelect.selection).map(([_, item]) => item.netAddress),
+    [multiSelect.selection]
   )
   return (
     <BulkAddBlocklist multiSelect={multiSelect} hostAddresses={hostAddresses} />

diff --git a/apps/renterd/components/Hosts/HostsBulkMenu/HostsRemoveAllowlist.tsx b/apps/renterd/components/Hosts/HostsBulkMenu/HostsRemoveAllowlist.tsx
@@ -7,10 +7,8 @@ export function HostsRemoveAllowlist() {
 
   const publicKeys = useMemo(
     () =>
-      Object.entries(multiSelect.selectionMap).map(
-        ([_, item]) => item.publicKey
-      ),
-    [multiSelect.selectionMap]
+      Object.entries(multiSelect.selection).map(([_, item]) => item.publicKey),
+    [multiSelect.selection]
   )
 
   return (

diff --git a/apps/renterd/components/Hosts/HostsBulkMenu/HostsRemoveBlocklist.tsx b/apps/renterd/components/Hosts/HostsBulkMenu/HostsRemoveBlocklist.tsx
@@ -7,10 +7,8 @@ export function HostsRemoveBlocklist() {
 
   const hostAddresses = useMemo(
     () =>
-      Object.entries(multiSelect.selectionMap).map(
-        ([_, item]) => item.netAddress
-      ),
-    [multiSelect.selectionMap]
+      Object.entries(multiSelect.selection).map(([_, item]) => item.netAddress),
+    [multiSelect.selection]
   )
 
   return (

diff --git a/apps/renterd/components/Hosts/HostsBulkMenu/HostsResetLostSectorCount.tsx b/apps/renterd/components/Hosts/HostsBulkMenu/HostsResetLostSectorCount.tsx
@@ -11,10 +11,8 @@ export function HostsResetLostSectorCount() {
 
   const publicKeys = useMemo(
     () =>
-      Object.entries(multiSelect.selectionMap).map(
-        ([_, item]) => item.publicKey
-      ),
-    [multiSelect.selectionMap]
+      Object.entries(multiSelect.selection).map(([_, item]) => item.publicKey),
+    [multiSelect.selection]
   )
   const resetAll = useCallback(async () => {
     await handleBatchOperation(

diff --git a/apps/renterd/components/Keys/KeysBulkMenu/KeysBulkDelete.tsx b/apps/renterd/components/Keys/KeysBulkMenu/KeysBulkDelete.tsx
@@ -18,8 +18,8 @@ export function KeysBulkDelete() {
   const { multiSelect } = useKeys()
 
   const keys = useMemo(
-    () => Object.entries(multiSelect.selectionMap).map(([_, item]) => item.key),
-    [multiSelect.selectionMap]
+    () => Object.entries(multiSelect.selection).map(([_, item]) => item.key),
+    [multiSelect.selection]
   )
   const { openConfirmDialog } = useDialog()
   const settingsS3 = useSettingsS3()

diff --git a/apps/renterd/contexts/contracts/index.tsx b/apps/renterd/contexts/contracts/index.tsx
@@ -130,7 +130,7 @@ function useContractsMain() {
         ...datum,
         onClick: (e: React.MouseEvent<HTMLTableRowElement>) =>
           multiSelect.onSelect(datum.id, e),
-        isSelected: !!multiSelect.selectionMap[datum.id],
+        isSelected: !!multiSelect.selection[datum.id],
       }
     })
   }, [_datasetPage, multiSelect])

diff --git a/apps/renterd/contexts/filesDirectory/index.tsx b/apps/renterd/contexts/filesDirectory/index.tsx
@@ -95,7 +95,7 @@ function useFilesDirectoryMain() {
       }
       return {
         ...datum,
-        isSelected: !!multiSelect.selectionMap[datum.id],
+        isSelected: !!multiSelect.selection[datum.id],
         onClick: (e: MouseEvent<HTMLTableRowElement>) =>
           multiSelect.onSelect(datum.id, e),
       }

diff --git a/apps/renterd/contexts/filesDirectory/move.tsx b/apps/renterd/contexts/filesDirectory/move.tsx
@@ -148,7 +148,7 @@ export function useMove({
       const id = String(e.active.id)
       if (multiSelect.selectedIds.includes(id)) {
         setDraggingObjects(
-          Object.entries(multiSelect.selectionMap).map(([, obj]) => obj)
+          Object.entries(multiSelect.selection).map(([, obj]) => obj)
         )
       } else {
         const ob = dataset?.find((d) => d.id === e.active.id)

diff --git a/apps/renterd/contexts/filesFlat/index.tsx b/apps/renterd/contexts/filesFlat/index.tsx
@@ -65,7 +65,7 @@ function useFilesFlatMain() {
     return _datasetPage.map((datum) => {
       return {
         ...datum,
-        isSelected: !!multiSelect.selectionMap[datum.id],
+        isSelected: !!multiSelect.selection[datum.id],
         onClick: (e: MouseEvent<HTMLTableRowElement>) =>
           multiSelect.onSelect(datum.id, e),
       }

diff --git a/apps/renterd/contexts/hosts/index.tsx b/apps/renterd/contexts/hosts/index.tsx
@@ -190,7 +190,7 @@ function useHostsMain() {
         ...datum,
         onClick: (e: React.MouseEvent<HTMLTableRowElement>) =>
           multiSelect.onSelect(datum.id, e),
-        isSelected: !!multiSelect.selectionMap[datum.id],
+        isSelected: !!multiSelect.selection[datum.id],
       }
     })
   }, [dataset, multiSelect])

diff --git a/apps/renterd/contexts/keys/index.tsx b/apps/renterd/contexts/keys/index.tsx
@@ -97,7 +97,7 @@ function useKeysMain() {
         ...datum,
         onClick: (e: React.MouseEvent<HTMLTableRowElement>) =>
           multiSelect.onSelect(datum.id, e),
-        isSelected: !!multiSelect.selectionMap[datum.id],
+        isSelected: !!multiSelect.selection[datum.id],
       }
     })
   }, [_datasetPage, multiSelect])

diff --git a/libs/design-system/src/components/Table/index.tsx b/libs/design-system/src/components/Table/index.tsx
@@ -207,6 +207,11 @@ export function Table<
       <Panel>
         <table
           data-testid={testId}
+          onMouseDown={(e) => {
+            if (e.shiftKey) {
+              e.preventDefault()
+            }
+          }}
           data-loading={show === 'skeleton'}
           className="relative z-10 table-auto border-collapse w-full"
         >