Fixes #37307 - Add more control over SelectAllCheckbox

theforeman · Apr 24, 2024 · 7878a4a · 7878a4a
1 parent 7a77b3c
commit 7878a4a
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 12 deletions.
diff --git a/...sets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox/index.js b/...sets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox/index.js
@@ -13,8 +13,10 @@ import './SelectAllCheckbox.scss';
 
 const SelectAllCheckbox = ({
   selectNone,
+  selectDefault,
   selectPage,
   selectedCount,
+  selectedDefaultCount,
   pageRowCount,
   totalCount,
   areAllRowsOnPageSelected,
@@ -36,8 +38,10 @@ const SelectAllCheckbox = ({
       } else {
         selectAll(true);
       }
-    } else {
+    } else if (selectDefault === null) {
       selectNone();
+    } else {
+      selectDefault();
     }
   };
 
@@ -59,6 +63,11 @@ const SelectAllCheckbox = ({
     setSelectionToggle(false);
     selectNone();
   };
+  const handleSelectDefault = () => {
+    setSelectAllDropdownOpen(false);
+    setSelectionToggle(false);
+    selectDefault();
+  };
 
   useEffect(() => {
     let newCheckedState = null; // null is partially-checked state
@@ -72,15 +81,6 @@ const SelectAllCheckbox = ({
   }, [selectedCount, areAllRowsSelected]);
 
   const selectAllDropdownItems = [
-    <DropdownItem
-      key="select-none"
-      ouiaId="select-none"
-      component="button"
-      isDisabled={selectedCount === 0}
-      onClick={handleSelectNone}
-    >
-      {`${__('Select none')} (0)`}
-    </DropdownItem>,
     <DropdownItem
       key="select-page"
       ouiaId="select-page"
@@ -91,6 +91,31 @@ const SelectAllCheckbox = ({
       {`${__('Select page')} (${pageRowCount})`}
     </DropdownItem>,
   ];
+  if (selectDefault === null) {
+    selectAllDropdownItems.unshift(
+      <DropdownItem
+        key="select-none"
+        ouiaId="select-none"
+        component="button"
+        isDisabled={selectedCount === 0}
+        onClick={handleSelectNone}
+      >
+        {`${__('Select none')} (0)`}
+      </DropdownItem>
+    );
+  } else {
+    selectAllDropdownItems.unshift(
+      <DropdownItem
+        key="select-default"
+        ouiaId="select-default"
+        component="button"
+        isDisabled={totalCount === 0}
+        onClick={handleSelectDefault}
+      >
+        {`${__('Select default')} (${selectedDefaultCount})`}
+      </DropdownItem>
+    );
+  }
   if (canSelectAll) {
     selectAllDropdownItems.push(
       <DropdownItem
@@ -141,6 +166,8 @@ SelectAllCheckbox.propTypes = {
   selectNone: PropTypes.func.isRequired,
   selectPage: PropTypes.func.isRequired,
   selectAll: PropTypes.func,
+  selectDefault: PropTypes.func,
+  selectedDefaultCount: PropTypes.number,
   pageRowCount: PropTypes.number,
   totalCount: PropTypes.number,
   areAllRowsOnPageSelected: PropTypes.bool.isRequired,
@@ -149,8 +176,10 @@ SelectAllCheckbox.propTypes = {
 
 SelectAllCheckbox.defaultProps = {
   selectAll: noop,
+  selectDefault: null,
   pageRowCount: 0,
   totalCount: 0,
+  selectedDefaultCount: 0,
 };
 
 export default SelectAllCheckbox;
diff --git a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/TableHooks.js b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/TableHooks.js
@@ -62,6 +62,7 @@ export const useSet = initialArry => {
 export const useSelectionSet = ({
   results,
   metadata,
+  defaultArry = [],
   initialArry = [],
   idColumn = 'id',
   isSelectable = () => true,
@@ -117,6 +118,15 @@ export const useSelectionSet = ({
       }
     }
   };
+  const selectDefault = () => {
+    selectNone();
+    selectionSet.addAll(defaultArry);
+    defaultArry.forEach(id => {
+      selectedResults.current[id] = results.find(
+        result => result[idColumn] === id
+      );
+    });
+  };
 
   const selectedCount = selectionSet.size;
 
@@ -132,6 +142,7 @@ export const useSelectionSet = ({
     areAllRowsSelected,
     selectPage,
     selectNone,
+    selectDefault,
     isSelected,
     isSelectable: canSelect,
     selectionSet,
@@ -152,21 +163,25 @@ export const useBulkSelect = ({
   results,
   metadata,
   initialArry = [],
+  initialExclusionArry = [],
+  defaultArry = [],
   initialSearchQuery = '',
   idColumn = 'id',
   filtersQuery = '',
   isSelectable,
+  initialSelectAllMode = false,
 }) => {
   const { selectionSet: inclusionSet, ...selectOptions } = useSelectionSet({
     results,
     metadata,
     initialArry,
+    defaultArry,
     idColumn,
     isSelectable,
   });
-  const exclusionSet = useSet([]);
+  const exclusionSet = useSet(initialExclusionArry);
   const [searchQuery, updateSearchQuery] = useState(initialSearchQuery);
-  const [selectAllMode, setSelectAllMode] = useState(false);
+  const [selectAllMode, setSelectAllMode] = useState(initialSelectAllMode);
   const selectedCount = selectAllMode
     ? Number(metadata.selectable || metadata.total) - exclusionSet.size
     : selectOptions.selectedCount;
@@ -224,6 +239,11 @@ export const useBulkSelect = ({
     }
   };
 
+  const selectDefault = () => {
+    selectNone();
+    selectOptions.selectDefault();
+  };
+
   const fetchBulkParams = ({
     idColumnName = idColumn,
     selectAllQuery = '',
@@ -269,6 +289,7 @@ export const useBulkSelect = ({
     selectPage,
     selectNone,
     selectAll,
+    selectDefault,
     selectAllMode,
     isSelected,
     selectedCount,
@@ -278,6 +299,8 @@ export const useBulkSelect = ({
     selectOne,
     areAllRowsOnPageSelected,
     areAllRowsSelected,
+    inclusionSet,
+    exclusionSet,
   };
 };