Make "X selected" part of BulkSelect clickable (#147)

* feat(BulkSelect): Make X selected clickable * Update snapshot * Fix bulk select example logic * Fix bulkCheckbox intermediate state condition * Clean the code
patternfly · Jun 21, 2024 · 193adb7 · 193adb7
1 parent 0e40ad7
commit 193adb7
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 24 deletions.
diff --git a/cypress/component/BulkSelect.cy.tsx b/cypress/component/BulkSelect.cy.tsx
@@ -14,10 +14,15 @@ const BulkSelectTestComponent = ({ canSelectAll, isDataPaginated }: Omit<BulkSel
   const pageSelected = pageDataNames.every(item => selected.find(selectedItem => selectedItem.name === item));
 
   const handleBulkSelect = (value: BulkSelectValue) => {
+    if (value === BulkSelectValue.page) {
+      const updatedSelection = [ ...selected ];
+      pageData.forEach(item => !updatedSelection.some(selectedItem => selectedItem.name === item.name) && updatedSelection.push(item));
+      setSelected(updatedSelection);
+    }
+    value === BulkSelectValue.nonePage && setSelected(selected.filter(item => !pageDataNames.includes(item.name)))
     value === BulkSelectValue.none && setSelected([]);
-    value === BulkSelectValue.page && setSelected(pageData);
     value === BulkSelectValue.all && setSelected(allData);
-    value === BulkSelectValue.nonePage && setSelected(selected.filter(item => !pageDataNames.includes(item.name)))};
+  };
 
   return (
     <BulkSelect
@@ -92,6 +97,6 @@ describe('BulkSelect', () => {
     // Select page
     cy.get('[data-ouia-component-id="BulkSelect-toggle"]').first().click({ force: true });
     cy.get('[data-ouia-component-id="BulkSelect-select-page"]').first().click();
-    cy.contains('5 selected').should('exist');
+    cy.contains('6 selected').should('exist');
   });
 });
diff --git a/...fly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectAllExample.tsx b/...fly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectAllExample.tsx
@@ -11,7 +11,7 @@ export const BasicExample: React.FunctionComponent = () => {
     value === BulkSelectValue.none && setSelected([]);
     value === BulkSelectValue.all && setSelected(allData);
     value === BulkSelectValue.nonePage && setSelected(selected.filter(item => !pageData.includes(item)));
-    value === BulkSelectValue.page && setSelected(pageData);
+    value === BulkSelectValue.page && setSelected(Array.from(new Set([ ...selected, ...pageData ])));
   };
 
   return (

diff --git a/...ernfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectExample.tsx b/...ernfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectExample.tsx
@@ -11,7 +11,7 @@ export const BasicExample: React.FunctionComponent = () => {
     value === BulkSelectValue.none && setSelected([]);
     value === BulkSelectValue.all && setSelected(allData);
     value === BulkSelectValue.nonePage && setSelected(selected.filter(item => !pageData.includes(item)));
-    value === BulkSelectValue.page && setSelected(pageData);
+    value === BulkSelectValue.page && setSelected(Array.from(new Set([ ...selected, ...pageData ])));
   };
 
   return (

diff --git a/packages/module/src/BulkSelect/BulkSelect.tsx b/packages/module/src/BulkSelect/BulkSelect.tsx
@@ -7,8 +7,7 @@ import {
   MenuToggle,
   MenuToggleCheckbox,
   MenuToggleCheckboxProps,
-  MenuToggleElement,
-  Text
+  MenuToggleElement
 } from '@patternfly/react-core';
 
 export const BulkSelectValue = {
@@ -52,7 +51,7 @@ export const BulkSelect: React.FC<BulkSelectProps> = ({
   pagePartiallySelected,
   pageCount,
   selectedCount = 0,
-  totalCount,
+  totalCount = 0,
   ouiaId = 'BulkSelect',
   onSelect,
   menuToggleCheckboxProps,
@@ -84,6 +83,8 @@ export const BulkSelect: React.FC<BulkSelectProps> = ({
   const allOption = isDataPaginated ? BulkSelectValue.page : BulkSelectValue.all;
   const noneOption = isDataPaginated ? BulkSelectValue.nonePage : BulkSelectValue.none;
 
+  const onToggleClick = () => setOpen(!isOpen);
+
   return (
     <Dropdown
       shouldFocusToggleOnSelect
@@ -98,7 +99,7 @@ export const BulkSelect: React.FC<BulkSelectProps> = ({
         <MenuToggle
           ref={toggleRef}
           isExpanded={isOpen}
-          onClick={() => setOpen(!isOpen)}
+          onClick={onToggleClick}
           aria-label="Bulk select toggle"
           data-ouia-component-id={`${ouiaId}-toggle`}
           splitButtonOptions={{
@@ -110,17 +111,17 @@ export const BulkSelect: React.FC<BulkSelectProps> = ({
                 aria-label={`Select ${allOption}`}
                 isChecked={
                   (isDataPaginated && pagePartiallySelected) ||
-                  (!isDataPaginated && selectedCount > 0)
+                  (!isDataPaginated && selectedCount > 0 && selectedCount < totalCount)
                     ? null
                     : pageSelected || selectedCount === totalCount
                 }
                 onChange={(checked) => onSelect?.(!checked || checked === null ? noneOption : allOption)}
                 {...menuToggleCheckboxProps}
               />,
               selectedCount > 0 ? (
-                <Text ouiaId={`${ouiaId}-text`} key="bulk-select-text">
+                <span onClick={onToggleClick} data-ouia-component-id={`${ouiaId}-text`} key="bulk-select-text">
                   {`${selectedCount} selected`}
-                </Text>
+                </span>
               ) : null
             ]
           }}

diff --git a/packages/module/src/BulkSelect/__snapshots__/BulkSelect.test.tsx.snap b/packages/module/src/BulkSelect/__snapshots__/BulkSelect.test.tsx.snap
@@ -23,15 +23,11 @@ exports[`BulkSelect component should render 1`] = `
             type="checkbox"
           />
         </label>
-        <p
-          class=""
+        <span
           data-ouia-component-id="BulkSelect-text"
-          data-ouia-component-type="PF5/Text"
-          data-ouia-safe="true"
-          data-pf-content="true"
         >
           2 selected
-        </p>
+        </span>
         <button
           aria-expanded="false"
           aria-label="Bulk select toggle"
@@ -83,15 +79,11 @@ exports[`BulkSelect component should render 1`] = `
           type="checkbox"
         />
       </label>
-      <p
-        class=""
+      <span
         data-ouia-component-id="BulkSelect-text"
-        data-ouia-component-type="PF5/Text"
-        data-ouia-safe="true"
-        data-pf-content="true"
       >
         2 selected
-      </p>
+      </span>
       <button
         aria-expanded="false"
         aria-label="Bulk select toggle"