From 09142864b733e61874c474ffbf1cb4366aa48ec2 Mon Sep 17 00:00:00 2001
From: Alex Freska <alex.freska@gmail.com>
Date: Fri, 18 Oct 2024 11:44:18 -0400
Subject: [PATCH] refactor: refine multiselect API

---
 .changeset/popular-guests-carry.md            |  5 ++
 .changeset/stupid-planets-hide.md             |  5 ++
 apps/renterd-e2e/src/specs/keys.spec.ts       |  4 +-
 .../Keys/KeysBatchMenu/KeysBatchDelete.tsx    | 16 ++---
 .../components/Keys/KeysBatchMenu/index.tsx   | 12 +---
 .../components/Keys/KeysStatsMenu/index.tsx   | 18 +++++
 apps/renterd/components/Keys/index.tsx        |  2 +
 apps/renterd/contexts/keys/columns.tsx        | 21 ++----
 apps/renterd/contexts/keys/index.tsx          | 44 ++++++------
 apps/renterd/contexts/keys/types.ts           |  7 +-
 .../src/components/Table/TableRow.tsx         | 13 +++-
 .../src/components/Table/index.tsx            |  4 +-
 libs/design-system/src/core/Tooltip.tsx       |  4 +-
 .../src/multi/MultiSelectionMenu.tsx          | 43 ++++++------
 .../src/multi/useMultiSelect.tsx              | 68 ++++++++++++++++---
 15 files changed, 166 insertions(+), 100 deletions(-)
 create mode 100644 .changeset/popular-guests-carry.md
 create mode 100644 .changeset/stupid-planets-hide.md
 create mode 100644 apps/renterd/components/Keys/KeysStatsMenu/index.tsx

diff --git a/.changeset/popular-guests-carry.md b/.changeset/popular-guests-carry.md
new file mode 100644
index 000000000..52065f7ae
--- /dev/null
+++ b/.changeset/popular-guests-carry.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Table row data now supports an isSelected prop.
diff --git a/.changeset/stupid-planets-hide.md b/.changeset/stupid-planets-hide.md
new file mode 100644
index 000000000..7d8b1b2d2
--- /dev/null
+++ b/.changeset/stupid-planets-hide.md
@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The keys table now has pagination controls.
diff --git a/apps/renterd-e2e/src/specs/keys.spec.ts b/apps/renterd-e2e/src/specs/keys.spec.ts
index bee5151e7..d937d13a8 100644
--- a/apps/renterd-e2e/src/specs/keys.spec.ts
+++ b/apps/renterd-e2e/src/specs/keys.spec.ts
@@ -39,8 +39,8 @@ test('batch delete multiple keys', async ({ page }) => {
   const rowIdx3 = getKeyRowByIndex(page, 3)
 
   // Select all 4 keys.
-  await rowIdx0.getByLabel('select key').click()
-  await rowIdx3.getByLabel('select key').click({ modifiers: ['Shift'] })
+  await rowIdx0.click()
+  await rowIdx3.click({ modifiers: ['Shift'] })
 
   // Delete all 4 keys.
   const menu = page.getByLabel('key multiselect menu')
diff --git a/apps/renterd/components/Keys/KeysBatchMenu/KeysBatchDelete.tsx b/apps/renterd/components/Keys/KeysBatchMenu/KeysBatchDelete.tsx
index 6d0433cec..1fd8c5bb9 100644
--- a/apps/renterd/components/Keys/KeysBatchMenu/KeysBatchDelete.tsx
+++ b/apps/renterd/components/Keys/KeysBatchMenu/KeysBatchDelete.tsx
@@ -15,15 +15,11 @@ import { useDialog } from '../../../contexts/dialog'
 import { useKeys } from '../../../contexts/keys'
 
 export function KeysBatchDelete() {
-  const { selectionMap, deselect } = useKeys()
+  const { multiSelect } = useKeys()
 
-  const ids = useMemo(
-    () => Object.entries(selectionMap).map(([_, item]) => item.id),
-    [selectionMap]
-  )
   const keys = useMemo(
-    () => Object.entries(selectionMap).map(([_, item]) => item.key),
-    [selectionMap]
+    () => Object.entries(multiSelect.selectionMap).map(([_, item]) => item.key),
+    [multiSelect.selectionMap]
   )
   const { openConfirmDialog } = useDialog()
   const settingsS3 = useSettingsS3()
@@ -43,13 +39,13 @@ export function KeysBatchDelete() {
         },
       },
     })
-    deselect(ids)
+    multiSelect.deselectAll()
     if (response.error) {
       triggerErrorToast({ title: 'Error deleting keys', body: response.error })
     } else {
       triggerSuccessToast({ title: `Keys deleted` })
     }
-  }, [settingsS3.data, settingsS3Update, deselect, keys, ids])
+  }, [settingsS3.data, settingsS3Update, multiSelect, keys])
 
   return (
     <Button
@@ -64,7 +60,7 @@ export function KeysBatchDelete() {
             <div className="flex flex-col gap-1">
               <Paragraph size="14">
                 Are you sure you would like to delete the{' '}
-                {ids.length.toLocaleString()} selected keys?
+                {multiSelect.selectionCount.toLocaleString()} selected keys?
               </Paragraph>
             </div>
           ),
diff --git a/apps/renterd/components/Keys/KeysBatchMenu/index.tsx b/apps/renterd/components/Keys/KeysBatchMenu/index.tsx
index 973c4369e..2de5888d2 100644
--- a/apps/renterd/components/Keys/KeysBatchMenu/index.tsx
+++ b/apps/renterd/components/Keys/KeysBatchMenu/index.tsx
@@ -3,18 +3,10 @@ import { useKeys } from '../../../contexts/keys'
 import { KeysBatchDelete } from './KeysBatchDelete'
 
 export function KeysBatchMenu() {
-  const { selectionCount, isPageAllSelected, pageCount, deselectAll } =
-    useKeys()
+  const { multiSelect } = useKeys()
 
   return (
-    <MultiSelectionMenu
-      isVisible={selectionCount > 0}
-      selectionCount={selectionCount}
-      isPageAllSelected={isPageAllSelected}
-      deselectAll={deselectAll}
-      pageCount={pageCount}
-      entityWord="key"
-    >
+    <MultiSelectionMenu multiSelect={multiSelect} entityWord="key">
       <KeysBatchDelete />
     </MultiSelectionMenu>
   )
diff --git a/apps/renterd/components/Keys/KeysStatsMenu/index.tsx b/apps/renterd/components/Keys/KeysStatsMenu/index.tsx
new file mode 100644
index 000000000..7e5d4de82
--- /dev/null
+++ b/apps/renterd/components/Keys/KeysStatsMenu/index.tsx
@@ -0,0 +1,18 @@
+import { PaginatorKnownTotal } from '@siafoundation/design-system'
+import { useKeys } from '../../../contexts/keys'
+
+export function KeysStatsMenu() {
+  const { limit, offset, datasetCount, pageCount, dataState } = useKeys()
+  return (
+    <div className="flex w-full">
+      <div className="flex-1" />
+      <PaginatorKnownTotal
+        offset={offset}
+        limit={limit}
+        datasetTotal={datasetCount}
+        pageTotal={pageCount}
+        isLoading={dataState === 'loading'}
+      />
+    </div>
+  )
+}
diff --git a/apps/renterd/components/Keys/index.tsx b/apps/renterd/components/Keys/index.tsx
index 7f13752d3..14edfb85c 100644
--- a/apps/renterd/components/Keys/index.tsx
+++ b/apps/renterd/components/Keys/index.tsx
@@ -9,6 +9,7 @@ import { KeysActionsMenu } from './KeysActionsMenu'
 import { StateError } from './StateError'
 import { useKeys } from '../../contexts/keys'
 import { KeysBatchMenu } from './KeysBatchMenu'
+import { KeysStatsMenu } from './KeysStatsMenu'
 
 export function Keys() {
   const { openDialog } = useDialog()
@@ -31,6 +32,7 @@ export function Keys() {
       sidenav={<RenterdSidenav />}
       openSettings={() => openDialog('settings')}
       actions={<KeysActionsMenu />}
+      stats={<KeysStatsMenu />}
     >
       <div className="p-6 min-w-fit">
         <KeysBatchMenu />
diff --git a/apps/renterd/contexts/keys/columns.tsx b/apps/renterd/contexts/keys/columns.tsx
index 31017edfd..43eca02d8 100644
--- a/apps/renterd/contexts/keys/columns.tsx
+++ b/apps/renterd/contexts/keys/columns.tsx
@@ -1,6 +1,5 @@
 import {
   Checkbox,
-  ControlGroup,
   TableColumn,
   ValueCopyable,
 } from '@siafoundation/design-system'
@@ -19,21 +18,13 @@ export const columns: KeysTableColumn[] = [
     fixed: true,
     contentClassName: '!pl-3 !pr-4',
     cellClassName: 'w-[20px] !pl-0 !pr-0',
-    heading: ({ context: { onSelectPage, isPageAllSelected } }) => (
-      <ControlGroup className="flex h-4">
-        <Checkbox onClick={onSelectPage} checked={isPageAllSelected} />
-      </ControlGroup>
-    ),
-    render: ({ data: { id, key }, context: { selectionMap, onSelect } }) => (
-      <ControlGroup className="flex h-4">
-        <Checkbox
-          aria-label="select key"
-          onClick={(e) => onSelect(id, e)}
-          checked={!!selectionMap[id]}
-        />
-        <KeyContextMenu s3Key={key} />
-      </ControlGroup>
+    heading: ({ context: { multiSelect } }) => (
+      <Checkbox
+        onClick={multiSelect.onSelectPage}
+        checked={multiSelect.isPageAllSelected}
+      />
     ),
+    render: ({ data: { key } }) => <KeyContextMenu s3Key={key} />,
   },
   {
     id: 'key',
diff --git a/apps/renterd/contexts/keys/index.tsx b/apps/renterd/contexts/keys/index.tsx
index 4fa91c7a9..cda8f7b6f 100644
--- a/apps/renterd/contexts/keys/index.tsx
+++ b/apps/renterd/contexts/keys/index.tsx
@@ -79,13 +79,29 @@ function useKeysMain() {
     sortDirection,
   })
 
-  const datasetPage = useMemo<KeyData[] | undefined>(() => {
+  const _datasetPage = useMemo<KeyData[] | undefined>(() => {
     if (!datasetFiltered) {
       return undefined
     }
     return datasetFiltered.slice(offset, offset + limit)
   }, [datasetFiltered, offset, limit])
 
+  const multiSelect = useMultiSelect(_datasetPage)
+
+  const datasetPage = useMemo(() => {
+    if (!_datasetPage) {
+      return undefined
+    }
+    return _datasetPage.map((datum) => {
+      return {
+        ...datum,
+        onClick: (e: React.MouseEvent<HTMLTableRowElement>) =>
+          multiSelect.onSelect(datum.id, e),
+        isSelected: !!multiSelect.selectionMap[datum.id],
+      }
+    })
+  }, [_datasetPage, multiSelect])
+
   const filteredTableColumns = useMemo(
     () =>
       columns.filter(
@@ -95,31 +111,18 @@ function useKeysMain() {
   )
 
   const dataState = useDatasetEmptyState(
-    datasetFiltered,
+    datasetPage,
     response.isValidating,
     response.error,
     filters
   )
 
-  const {
-    onSelect,
-    deselect,
-    deselectAll,
-    selectionMap,
-    selectionCount,
-    onSelectPage,
-    isPageAllSelected,
-  } = useMultiSelect(dataset)
-
   const cellContext = useMemo(
     () =>
       ({
-        selectionMap,
-        onSelect,
-        onSelectPage,
-        isPageAllSelected,
+        multiSelect,
       } as CellContext),
-    [selectionMap, onSelect, onSelectPage, isPageAllSelected]
+    [multiSelect]
   )
 
   return {
@@ -132,12 +135,7 @@ function useKeysMain() {
     datasetCount: dataset?.length || 0,
     datasetFilteredCount: datasetFiltered?.length || 0,
     columns: filteredTableColumns,
-    selectionMap,
-    selectionCount,
-    onSelectPage,
-    isPageAllSelected,
-    deselect,
-    deselectAll,
+    multiSelect,
     cellContext,
     dataset,
     datasetPage,
diff --git a/apps/renterd/contexts/keys/types.ts b/apps/renterd/contexts/keys/types.ts
index b6e51c16a..0fcab6305 100644
--- a/apps/renterd/contexts/keys/types.ts
+++ b/apps/renterd/contexts/keys/types.ts
@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react'
+import { MultiSelect } from '@siafoundation/design-system'
 
 export type KeyData = {
   id: string
@@ -7,10 +7,7 @@ export type KeyData = {
 }
 
 export type CellContext = {
-  selectionMap: Record<string, KeyData>
-  onSelect: (id: string, e: MouseEvent<HTMLButtonElement>) => void
-  onSelectPage: () => void
-  isPageAllSelected: boolean | 'indeterminate'
+  multiSelect: MultiSelect<KeyData>
 }
 
 export type TableColumnId = 'selection' | 'actions' | 'key' | 'secret'
diff --git a/libs/design-system/src/components/Table/TableRow.tsx b/libs/design-system/src/components/Table/TableRow.tsx
index b1b21acfa..518d59bb8 100644
--- a/libs/design-system/src/components/Table/TableRow.tsx
+++ b/libs/design-system/src/components/Table/TableRow.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { CSSProperties, forwardRef, useMemo } from 'react'
+import { CSSProperties, forwardRef, MouseEvent, useMemo } from 'react'
 import { cx } from 'class-variance-authority'
 import { useDroppable, useDraggable } from '@dnd-kit/core'
 import {
@@ -13,7 +13,8 @@ type Data = {
   isDraggable?: boolean
   isDroppable?: boolean
   className?: string
-  onClick?: () => void
+  onClick?: (e: MouseEvent<HTMLTableRowElement>) => void
+  isSelected?: boolean
 }
 
 export type Row<Data, Context> = {
@@ -91,7 +92,13 @@ export function createTableRow<
           data-testid={data.id}
           onClick={data.onClick}
           className={cx(
-            'border-b border-gray-200/50 dark:border-graydark-100',
+            'border-b',
+            data.isSelected
+              ? [
+                  'bg-blue-400 border-blue-500/30',
+                  'dark:bg-blue-600/50 dark:border-blue-600/20',
+                ]
+              : 'border-gray-200/50 dark:border-graydark-100',
             data.onClick ? 'cursor-pointer' : '',
             data.className,
             className
diff --git a/libs/design-system/src/components/Table/index.tsx b/libs/design-system/src/components/Table/index.tsx
index 851888dca..216446edd 100644
--- a/libs/design-system/src/components/Table/index.tsx
+++ b/libs/design-system/src/components/Table/index.tsx
@@ -3,7 +3,7 @@
 import { Tooltip } from '../../core/Tooltip'
 import { Panel } from '../../core/Panel'
 import { Text } from '../../core/Text'
-import { useCallback, useMemo } from 'react'
+import { MouseEvent, useCallback, useMemo } from 'react'
 import { cx } from 'class-variance-authority'
 import { ChevronDown16, ChevronUp16 } from '@siafoundation/react-icons'
 import { times } from '@technically/lodash'
@@ -30,7 +30,7 @@ type Data = {
   id: string
   isDraggable?: boolean
   isDroppable?: boolean
-  onClick?: () => void
+  onClick?: (e: MouseEvent<HTMLTableRowElement>) => void
 }
 
 export type Row<Data, Context> = {
diff --git a/libs/design-system/src/core/Tooltip.tsx b/libs/design-system/src/core/Tooltip.tsx
index d8e9d47b3..d146777ea 100644
--- a/libs/design-system/src/core/Tooltip.tsx
+++ b/libs/design-system/src/core/Tooltip.tsx
@@ -93,7 +93,9 @@ export function Tooltip({
                     panelStyles()
                   )}
                 >
-                  {typeof content === 'string' || Array.isArray(content) ? (
+                  {typeof content === 'string' ||
+                  (React.isValidElement(content) &&
+                    content?.type === React.Fragment) ? (
                     <Paragraph size="12">{content}</Paragraph>
                   ) : (
                     content
diff --git a/libs/design-system/src/multi/MultiSelectionMenu.tsx b/libs/design-system/src/multi/MultiSelectionMenu.tsx
index fd6b1f5e6..b5d855d06 100644
--- a/libs/design-system/src/multi/MultiSelectionMenu.tsx
+++ b/libs/design-system/src/multi/MultiSelectionMenu.tsx
@@ -6,26 +6,20 @@ import { Panel } from '../core/Panel'
 import { Text } from '../core/Text'
 import { pluralize } from '@siafoundation/units'
 import { Close16 } from '@siafoundation/react-icons'
+import { MultiSelect, MultiSelectItem } from './useMultiSelect'
 
-export function MultiSelectionMenu({
-  isVisible,
-  selectionCount,
-  isPageAllSelected,
-  deselectAll,
-  pageCount,
+export function MultiSelectionMenu<Item extends MultiSelectItem>({
+  multiSelect,
   children,
   entityWord,
   entityWordPlural,
 }: {
-  isVisible: boolean
-  selectionCount: number
-  isPageAllSelected: boolean | 'indeterminate'
-  pageCount: number
+  multiSelect: MultiSelect<Item>
   children: React.ReactNode
-  deselectAll: () => void
   entityWord: string
   entityWordPlural?: string
 }) {
+  const isVisible = multiSelect.selectionCount > 0
   return (
     <div className="z-20 fixed bottom-5 left-0 right-0 flex justify-center dark pointer-events-none">
       <AnimatePresence>
@@ -40,20 +34,31 @@ export function MultiSelectionMenu({
               aria-label={entityWord + ' multiselect menu'}
               className="pl-3 pr-2 py-2 min-w-[250px] flex gap-2 items-center rounded-lg light:bg-black pointer-events-auto"
             >
-              {!!selectionCount && (
+              {!!multiSelect.selectionCount && (
                 <Text size="14">
-                  {pluralize(selectionCount, entityWord, {
+                  {`${pluralize(multiSelect.selectionCount, entityWord, {
                     plural: entityWordPlural,
-                  })}{' '}
-                  selected
+                  })} selected${
+                    multiSelect.someSelectedItemsOutsideCurrentPage &&
+                    multiSelect.someSelectedOnCurrentPage
+                      ? ' on this and other pages'
+                      : !multiSelect.someSelectedItemsOutsideCurrentPage &&
+                        multiSelect.someSelectedOnCurrentPage
+                      ? ''
+                      : multiSelect.someSelectedItemsOutsideCurrentPage &&
+                        !multiSelect.someSelectedOnCurrentPage
+                      ? ' on other pages'
+                      : ''
+                  }`}
                 </Text>
               )}
-              {isPageAllSelected && selectionCount > pageCount && (
-                <Text>across multiple pages</Text>
-              )}
               <div className="flex-1" />
               {children}
-              <Button tip="Deselect all" onClick={deselectAll} size="small">
+              <Button
+                tip="Deselect all"
+                onClick={multiSelect.deselectAll}
+                size="small"
+              >
                 <Close16 />
               </Button>
             </Panel>
diff --git a/libs/design-system/src/multi/useMultiSelect.tsx b/libs/design-system/src/multi/useMultiSelect.tsx
index 54ba4a182..e2f361ab3 100644
--- a/libs/design-system/src/multi/useMultiSelect.tsx
+++ b/libs/design-system/src/multi/useMultiSelect.tsx
@@ -2,6 +2,12 @@
 
 import { MouseEvent, useCallback, useMemo, useState } from 'react'
 
+export type MultiSelectItem = { id: string }
+
+export type MultiSelect<Item extends MultiSelectItem> = ReturnType<
+  typeof useMultiSelect<Item>
+>
+
 export function useMultiSelect<Item extends { id: string }>(dataset?: Item[]) {
   const [selectionMap, setSelectionMap] = useState<Record<string, Item>>({})
   const [, setLastSelectedItem] = useState<{
@@ -10,7 +16,7 @@ export function useMultiSelect<Item extends { id: string }>(dataset?: Item[]) {
   }>()
 
   const onSelect = useCallback(
-    (id: string, e: MouseEvent<HTMLButtonElement>) => {
+    (id: string, e: MouseEvent<HTMLElement>) => {
       if (!dataset) {
         return
       }
@@ -61,6 +67,31 @@ export function useMultiSelect<Item extends { id: string }>(dataset?: Item[]) {
     return getIsPageAllSelected({ dataset, selectionMap })
   }, [dataset, selectionMap])
 
+  const selectedIds = useMemo(
+    () =>
+      Object.entries(selectionMap)
+        .filter(([_, item]) => !!item)
+        .map(([id]) => id),
+    [selectionMap]
+  )
+
+  const someSelectedItemsOutsideCurrentPage = useMemo(() => {
+    if (!dataset) {
+      if (selectedIds.length === 0) {
+        return false
+      }
+      return true
+    }
+    return selectedIds.some((id) => !dataset.some((datum) => datum.id === id))
+  }, [dataset, selectedIds])
+
+  const someSelectedOnCurrentPage = useMemo(() => {
+    if (!dataset) {
+      return false
+    }
+    return dataset.some((datum) => selectionMap[datum.id])
+  }, [dataset, selectionMap])
+
   const onSelectPage = useCallback(() => {
     if (!dataset) {
       return
@@ -112,15 +143,32 @@ export function useMultiSelect<Item extends { id: string }>(dataset?: Item[]) {
     [selectionMap]
   )
 
-  return {
-    onSelect,
-    onSelectPage,
-    selectionMap,
-    isPageAllSelected,
-    selectionCount,
-    deselect,
-    deselectAll,
-  }
+  return useMemo(
+    () => ({
+      onSelect,
+      onSelectPage,
+      selectionMap,
+      selectedIds,
+      isPageAllSelected,
+      selectionCount,
+      someSelectedItemsOutsideCurrentPage,
+      someSelectedOnCurrentPage,
+      deselect,
+      deselectAll,
+    }),
+    [
+      onSelect,
+      onSelectPage,
+      selectionMap,
+      selectedIds,
+      isPageAllSelected,
+      selectionCount,
+      someSelectedItemsOutsideCurrentPage,
+      someSelectedOnCurrentPage,
+      deselect,
+      deselectAll,
+    ]
+  )
 }
 
 function getIsPageAllSelected<Item extends { id: string }>({