fix(ui)!: bulk selection and useSelection hook losing types of the IDs its returning (#8194)

This PR changes the type of `selected` returned from the `useSelection`
hook from the `SelectionProvider` from an object to a Map.

This fixes a bug where in some situations we lose the type of the ID
which can break data entry when using postgres, due to keys being cast
to strings inside of objects which doesn't happen when using a Map.

This PR also fixes a CSS bug with the checkbox when it should be
partially selected.

```ts
// before
selected: Record<number | string, boolean>

// after
selected: Map<number | string, boolean>
```

This means you now need to read the data differently than before.

```ts
// before
Object.entries(selected).forEach(([key, value]) => {
  // do something
})

// after
for (const [key, value] of selected) {
  // do something
}
```

Author: paulpopus

packages/ui/src/elements/SelectRow/index.tsx

@@ -14,7 +14,7 @@ export const SelectRow: React.FC = () => {
 
   return (
     <CheckboxInput
-      checked={selected?.[rowData?.id]}
+      checked={Boolean(selected.get(rowData.id))}
       className={[baseClass, `${baseClass}__checkbox`].join(' ')}
       onToggle={() => setSelection(rowData.id)}
     />

packages/ui/src/fields/Checkbox/Input.tsx

@@ -76,7 +76,7 @@ export const CheckboxInput: React.FC<CheckboxInputProps> = ({
           type="checkbox"
         />
         <span
-          className={[`${inputBaseClass}__icon`, !checked && partialChecked ? 'check' : 'partial']
+          className={[`${inputBaseClass}__icon`, !checked && partialChecked ? 'partial' : 'check']
             .filter(Boolean)
             .join(' ')}
         >

packages/ui/src/fields/Checkbox/index.scss

@@ -102,6 +102,19 @@
     }
   }
 
+  .checkbox-input__icon {
+    .icon--line {
+      width: 1.4rem;
+      height: 1.4rem;
+    }
+
+    &.partial {
+      svg {
+        opacity: 1;
+      }
+    }
+  }
+
   &--read-only {
     .checkbox-input__input {
       @include readOnly;

packages/ui/src/fields/Upload/Input.tsx

@@ -290,12 +290,14 @@ export function UploadInput(props: UploadInputProps) {
   // only hasMany can bulk select
   const onListBulkSelect = React.useCallback<NonNullable<ListDrawerProps['onBulkSelect']>>(
     async (docs) => {
-      const selectedDocIDs = Object.entries(docs).reduce<string[]>((acc, [docID, isSelected]) => {
+      const selectedDocIDs = []
+
+      for (const [id, isSelected] of docs) {
         if (isSelected) {
-          acc.push(docID)
+          selectedDocIDs.push(id)
         }
-        return acc
-      }, [])
+      }
+
       const loadedDocs = await populateDocs(selectedDocIDs, activeRelationTo)
       if (loadedDocs) {
         setPopulatedDocs((currentDocs) => [

packages/ui/src/providers/Selection/index.tsx

@@ -20,7 +20,7 @@ type SelectionContext = {
   disableBulkEdit?: boolean
   getQueryParams: (additionalParams?: Where) => string
   selectAll: SelectAllStatus
-  selected: Record<number | string, boolean>
+  selected: Map<number | string, boolean>
   setSelection: (id: number | string) => void
   toggleAll: (allAvailable?: boolean) => void
   totalDocs: number
@@ -30,6 +30,7 @@ const Context = createContext({} as SelectionContext)
 
 type Props = {
   readonly children: React.ReactNode
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   readonly docs: any[]
   readonly totalDocs: number
 }
@@ -39,35 +40,33 @@ export const SelectionProvider: React.FC<Props> = ({ children, docs = [], totalD
 
   const { code: locale } = useLocale()
   const [selected, setSelected] = useState<SelectionContext['selected']>(() => {
-    const rows = {}
+    const rows = new Map()
     docs.forEach(({ id }) => {
-      rows[id] = false
+      rows.set(id, false)
     })
     return rows
   })
+
   const [selectAll, setSelectAll] = useState<SelectAllStatus>(SelectAllStatus.None)
   const [count, setCount] = useState(0)
   const { searchParams } = useSearchParams()
 
   const toggleAll = useCallback(
     (allAvailable = false) => {
-      const rows = {}
+      const rows = new Map()
       if (allAvailable) {
         setSelectAll(SelectAllStatus.AllAvailable)
         docs.forEach(({ id }) => {
-          rows[id] = true
+          rows.set(id, true)
         })
       } else if (
         selectAll === SelectAllStatus.AllAvailable ||
         selectAll === SelectAllStatus.AllInPage
       ) {
         setSelectAll(SelectAllStatus.None)
-        docs.forEach(({ id }) => {
-          rows[id] = false
-        })
       } else {
         docs.forEach(({ id }) => {
-          rows[id] = selectAll !== SelectAllStatus.Some
+          rows.set(id, selectAll !== SelectAllStatus.Some)
         })
       }
       setSelected(rows)
@@ -77,15 +76,18 @@ export const SelectionProvider: React.FC<Props> = ({ children, docs = [], totalD
 
   const setSelection = useCallback(
     (id) => {
-      const isSelected = !selected[id]
-      const newSelected = {
-        ...selected,
-        [id]: isSelected,
-      }
-      if (!isSelected) {
-        setSelectAll(SelectAllStatus.Some)
+      const existingValue = selected.get(id)
+      const isSelected = typeof existingValue === 'boolean' ? !existingValue : true
+
+      let newMap = new Map()
+
+      if (isSelected) {
+        newMap = new Map(selected.set(id, isSelected))
+      } else {
+        newMap = new Map(selected.set(id, false))
       }
-      setSelected(newSelected)
+
+      setSelected(newMap)
     },
     [selected],
   )
@@ -99,11 +101,17 @@ export const SelectionProvider: React.FC<Props> = ({ children, docs = [], totalD
           id: { not_equals: '' },
         }
       } else {
+        const ids = []
+
+        for (const [key, value] of selected) {
+          if (value) {
+            ids.push(key)
+          }
+        }
+
         where = {
           id: {
-            in: Object.keys(selected)
-              .filter((id) => selected[id])
-              .map((id) => id),
+            in: ids,
           },
         }
       }
@@ -130,30 +138,42 @@ export const SelectionProvider: React.FC<Props> = ({ children, docs = [], totalD
     let some = false
     let all = true
 
-    if (!Object.values(selected).length) {
+    if (!selected.size) {
       all = false
       some = false
     } else {
-      Object.values(selected).forEach((val) => {
-        all = all && val
-        some = some || val
-      })
+      for (const [_, value] of selected) {
+        all = all && value
+        some = some || value
+      }
     }
 
-    if (all) {
+    if (all && selected.size === docs.length) {
+      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
       setSelectAll(SelectAllStatus.AllInPage)
     } else if (some) {
+      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
       setSelectAll(SelectAllStatus.Some)
     } else {
+      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
       setSelectAll(SelectAllStatus.None)
     }
-  }, [selectAll, selected])
+  }, [selectAll, selected, totalDocs, docs])
 
   useEffect(() => {
-    const newCount =
-      selectAll === SelectAllStatus.AllAvailable
-        ? totalDocs
-        : Object.keys(selected).filter((id) => selected[id]).length
+    let newCount = 0
+
+    if (selectAll === SelectAllStatus.AllAvailable) {
+      newCount = totalDocs
+    } else {
+      for (const [_, value] of selected) {
+        if (value) {
+          newCount++
+        }
+      }
+    }
+
+    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
     setCount(newCount)
   }, [selectAll, selected, totalDocs])