fix: bulk select mode

clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/monitor-fields.slice.ts

@@ -58,15 +58,14 @@ const monitorFieldApi = baseApi.injectEndpoints({
       query: ({
         path: { monitor_config_id, action_type },
         query: { search, diff_status, confidence_score, ...arrayQueryParams },
-        ...body
+        body,
       }) => {
         const queryParams = buildArrayQueryParams({
           ...arrayQueryParams,
           ...(search ? { search: [search] } : {}),
           ...(diff_status ? { diff_status } : {}),
           ...(confidence_score ? { confidence_score } : {}),
         });
-
         return {
           url: `/plus/discovery-monitor/${monitor_config_id}/fields/${action_type}?${queryParams.toString()}`,
           method: "POST",

clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/page.tsx

@@ -154,14 +154,12 @@ const ActionCenterFields: NextPage = () => {
   );
   const {
     excludedListItems,
-    indeterminate,
-    isBulkSelect,
     listSelectMode,
     resetListSelect,
     selectedListItems,
     updateListItems,
-    updateListSelectMode,
     updateSelectedListItem,
+    checkboxProps,
   } = useBulkListSelect<
     DatastoreStagedResourceAPIResponse & { itemKey: React.Key }
   >({ activeListItem, enableKeyboardShortcuts: true });
@@ -171,7 +169,7 @@ const ActionCenterFields: NextPage = () => {
   };
 
   const onActionDropdownOpenChange = (open: boolean) => {
-    if (open && isBulkSelect) {
+    if (open && listSelectMode === "exclusive") {
       allowedActionsTrigger({
         ...baseMonitorFilters,
         query: {
@@ -193,13 +191,14 @@ const ActionCenterFields: NextPage = () => {
     [hotkeysHelperModalOpen],
   );
 
-  const availableActions = isBulkSelect
-    ? allowedActionsResult?.allowed_actions
-    : getAvailableActions(
-        selectedListItems.flatMap(({ diff_status }) =>
-          diff_status ? [diff_status] : [],
-        ),
-      );
+  const availableActions =
+    listSelectMode === "exclusive"
+      ? allowedActionsResult?.allowed_actions
+      : getAvailableActions(
+          selectedListItems.flatMap(({ diff_status }) =>
+            diff_status ? [diff_status] : [],
+          ),
+        );
   const responseCount = fieldsDataResponse?.total ?? 0;
   const selectedListItemCount =
     listSelectMode === "exclusive" && fieldsDataResponse?.total
@@ -345,7 +344,7 @@ const ActionCenterFields: NextPage = () => {
                           isFetchingAllowedActions ||
                           !availableActions?.includes(actionType),
                         onClick: async () => {
-                          if (isBulkSelect) {
+                          if (listSelectMode === "exclusive") {
                             await bulkActions[actionType](
                               baseMonitorFilters,
                               excludedListItems.map((k) =>
@@ -387,16 +386,7 @@ const ActionCenterFields: NextPage = () => {
               </Flex>
             </Flex>
             <Flex gap="middle" align="center">
-              <Checkbox
-                id="select-all"
-                checked={isBulkSelect}
-                indeterminate={indeterminate}
-                onChange={(e) =>
-                  updateListSelectMode(
-                    e.target.checked ? "exclusive" : "inclusive",
-                  )
-                }
-              />
+              <Checkbox id="select-all" {...checkboxProps} />
               <label htmlFor="select-all">Select all</label>
               {!!selectedListItemCount && (
                 <Text strong>

clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/useBulkListSelect.ts

@@ -1,3 +1,4 @@
+import { AntCheckboxProps as CheckboxProps } from "fidesui";
 import _ from "lodash";
 import { useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -111,23 +112,29 @@ export const useBulkListSelect = <T extends ListItem>(
     [activeListItem, selectedListItems, updateSelectedListItem],
   );
 
-  return {
-    excludedListItems,
+  const checkboxProps: CheckboxProps = {
+    checked:
+      mode === "inclusive"
+        ? selectedListItems.length > 0 &&
+          listItems.length === selectedListItems.length
+        : excludedListItems.length === 0,
     indeterminate:
       mode === "inclusive"
         ? selectedListItems.length > 0 &&
           listItems.length !== selectedListItems.length
         : excludedListItems.length > 0,
-    isBulkSelect:
-      mode === "inclusive"
-        ? selectedListItems.length > 0 &&
-          listItems.length === selectedListItems.length
-        : excludedListItems.length === 0,
+    onChange: (e) =>
+      updateListSelectMode(e.target.checked ? "exclusive" : "inclusive"),
+  };
+
+  return {
+    excludedListItems,
     listSelectMode: mode,
     resetListSelect,
     selectedListItems,
     updateListItems: setListItemsState,
     updateListSelectMode,
     updateSelectedListItem,
+    checkboxProps,
   };
 };

clients/fidesui/src/index.ts

@@ -18,6 +18,7 @@ export type {
 export type {
   AvatarProps as AntAvatarProps,
   ButtonProps as AntButtonProps,
+  CheckboxProps as AntCheckboxProps,
   CollapseProps as AntCollapseProps,
   DatePickerProps as AntDatePickerProps,
   DrawerProps as AntDrawerProps,