Merge pull request #225 from pegasystems/feat/checkboxrow

improve checkboxrow to add support for selectAll

Author: ricmars

.github/workflows/validatepr.yaml

@@ -3,7 +3,7 @@ name: Validate PRs
 permissions:
   contents: read
   pull-requests: write
-  
+
 on:
   # Event for the workflow to run on
   push:

.storybook/static/CheckboxRow_Configuration2.png

@@ -58,8 +58,8 @@
     "validateAll": "custom-dx-components buildAllComponents"
   },
   "dependencies": {
-    "@arcgis/core": "^4.33.14",
-    "@dagrejs/dagre": "^1.1.5",
+    "@arcgis/core": "^4.34.8",
+    "@dagrejs/dagre": "^1.1.8",
     "@fullcalendar/core": "^6.1.19",
     "@fullcalendar/daygrid": "^6.1.19",
     "@fullcalendar/react": "^6.1.19",
@@ -81,9 +81,9 @@
     "styled-components": "^5.3.11"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
     "@pega/configs": "^0.17.0",
     "@pega/custom-dx-components": "^24.2.18",
     "@pega/eslint-config": "^0.17.0",
@@ -96,33 +96,33 @@
     "@storybook/react-webpack5": "^7.6.19",
     "@storybook/test-runner": "0.16.0",
     "@storybook/theming": "^7.6.19",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^12.1.5",
     "@types/jest": "^30.0.0",
     "@types/react": "^17.0.80",
     "@types/react-dom": "^17.0.25",
     "@types/react-image-magnifiers": "^1.3.5",
-    "@types/styled-components": "^5.1.34",
+    "@types/styled-components": "^5.1.35",
     "axe-playwright": "^2.2.2",
-    "cspell": "^9.2.1",
+    "cspell": "^9.3.1",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jest": "^29.0.1",
+    "eslint-plugin-jest": "^29.1.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-mdx": "^3.6.2",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "jest": "^30.1.3",
+    "jest": "^30.2.0",
     "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^30.1.2",
+    "jest-environment-jsdom": "^30.2.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.6.2",
     "sort-package-json": "^3.4.0",
     "storybook": "^7.6.19",
-    "stylelint": "16.24.0",
-    "ts-jest": "^29.4.4",
-    "typescript": "^5.9.2"
+    "stylelint": "16.25.0",
+    "ts-jest": "^29.4.5",
+    "typescript": "^5.9.3"
   },
   "organization": "Pega"
 }

.storybook/static/CheckboxRow_Runtime.png

@@ -1,4 +1,4 @@
-import { Meta, Primary, Controls, Story } from '@storybook/blocks';
+import { Meta, Primary, Controls, Story } from '@storybook/addon-docs/blocks';
 import * as DemoStories from './demo.stories';
 
 <Meta of={DemoStories} />
@@ -9,6 +9,8 @@ The Checkbox Row component is a specialized component used in the context of an
 
 This component shares the same configuration as the standard checkbox, but it includes an optional property called labelProperty. If you set a field for this property, the checkbox's caption will automatically use that field's value.
 
+The component can also be used outside of the embedded data list to provide the Select All functionality - When configuring the component, set the selectAllProperty to the path of the property that will contain the selection property, for example "Policies.IsSelected".
+
 <Primary />
 
 # Props
@@ -19,6 +21,8 @@ This component shares the same configuration as the standard checkbox, but it in
 
 To use this component, use an embedded data list field configure as an editable inline table. Add a boolean field in the first field of the table and change it to this component. Set labelProperty if needed. Include other boolean fields in the table as editable.
 
+![Configuration](CheckboxRow_Configuration2.png)
+
 ![Configuration](CheckboxRow_Configuration.png)
 
 ![Configuration](CheckboxRow_Configuration1.png)

package-lock.json

@@ -39,6 +39,11 @@
       "name": "labelProperty",
       "label": "Custom label property"
     },
+    {
+      "name": "selectAllProperty",
+      "label": "Select All Property",
+      "format": "TEXT"
+    },
     {
       "name": "readOnly",
       "label": "Edit mode",

package.json

@@ -19,6 +19,11 @@ export default {
         disable: true,
       },
     },
+    selectAllProperty: {
+      table: {
+        disable: true,
+      },
+    },
     variant: {
       table: {
         disable: true,
@@ -156,6 +161,7 @@ export const Default: Story = CheckboxRowDemo({
   labelProperty: '',
   validatemessage: '',
   helperText: '',
+  selectAllProperty: '',
   disabled: false,
   readOnly: false,
   required: false,

src/components/Pega_Extensions_CheckboxRow/Docs.mdx

@@ -1,6 +1,7 @@
 import { useEffect, useState, useRef, type MouseEvent } from 'react';
 import { withConfiguration, Checkbox, Text } from '@pega/cosmos-react-core';
 import '../create-nonce';
+import { updateAllSiblingCheckboxes, updateBooleanFieldsOnPage } from './utils';
 
 export type CheckboxRowProps = {
   getPConnect?: any;
@@ -13,25 +14,13 @@ export type CheckboxRowProps = {
   readOnly?: boolean;
   required?: boolean;
   testId?: string;
+  selectAllProperty?: string;
   fieldMetadata?: any;
   additionalProps?: any;
   /** display mode */
   displayMode?: 'DISPLAY_ONLY' | '';
 };
 
-// Helper function to safely access nested object properties
-const getNestedValue = (obj: any, path: string) => {
-  return path.split('.').reduce((current, key) => {
-    // Handle array indices like 'Policies[0]'
-    if (key.includes('[') && key.includes(']')) {
-      const arrayKey = key.substring(0, key.indexOf('['));
-      const index = parseInt(key.substring(key.indexOf('[') + 1, key.indexOf(']')), 10);
-      return current?.[arrayKey]?.[index];
-    }
-    return current?.[key];
-  }, obj);
-};
-
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
 export const PegaExtensionsCheckboxRow = (props: CheckboxRowProps) => {
@@ -43,6 +32,7 @@ export const PegaExtensionsCheckboxRow = (props: CheckboxRowProps) => {
     value,
     helperText = '',
     testId = '',
+    selectAllProperty = '',
     additionalProps,
     displayMode,
   } = props;
@@ -74,6 +64,32 @@ export const PegaExtensionsCheckboxRow = (props: CheckboxRowProps) => {
   if (displayMode === 'DISPLAY_ONLY') {
     return <Text>{displayComp}</Text>;
   }
+  const handleChange = (checked: boolean) => {
+    setInputValue(checked);
+    if (value === checked) return;
+
+    actions.updateFieldValue(propName, checked);
+    hasValueChange.current = true;
+
+    const contextName = pConn.getContextName();
+    const storeData = (window as any).PCore.getStore().getState().data?.[contextName];
+    if (!storeData) return;
+
+    if (selectAllProperty) {
+      updateAllSiblingCheckboxes({ selectAllProperty, checked, pConn, storeData });
+      return;
+    }
+
+    const pageRef = pConn.options.pageReference; // e.g. caseInfo.content.Policies[0]
+    updateBooleanFieldsOnPage({
+      pageRef,
+      checked,
+      actions,
+      storeData,
+      excludeProp: propName,
+    });
+  };
+
   return (
     <Checkbox
       {...additionalProps}
@@ -85,30 +101,7 @@ export const PegaExtensionsCheckboxRow = (props: CheckboxRowProps) => {
       disabled={disabled}
       readOnly={readOnly}
       required={required}
-      onChange={(e: MouseEvent<HTMLInputElement>) => {
-        setInputValue(e.currentTarget.checked);
-        if (value !== e.currentTarget.checked) {
-          actions.updateFieldValue(propName, e.currentTarget.checked);
-          hasValueChange.current = true;
-          const context = getPConnect().getContextName();
-
-          const storeData = (window as any).PCore.getStore().getState().data?.[context];
-          const pageRef = getPConnect().options.pageReference;
-          /* page Ref could be 'caseInfo.content.Policies[0]' */
-
-          const data: any = getNestedValue(storeData, pageRef);
-
-          /* Iterate over object - if a property is of type boolean - call updateFieldValue to set the value to e.currentTarget.checked */
-          Object.keys(data).forEach((key) => {
-            if (typeof data[key] === 'boolean') {
-              const otherPropName = `.${key}`;
-              if (otherPropName !== propName) {
-                actions.updateFieldValue(otherPropName, e.currentTarget.checked);
-              }
-            }
-          });
-        }
-      }}
+      onChange={(e: MouseEvent<HTMLInputElement>) => handleChange(e.currentTarget.checked)}
       onBlur={(e: MouseEvent<HTMLInputElement>) => {
         if ((!value || hasValueChange.current) && !readOnly) {
           actions.triggerFieldChange(propName, e.currentTarget.checked);

src/components/Pega_Extensions_CheckboxRow/config.json

@@ -0,0 +1,79 @@
+// Helper: safely access nested object properties with optional array indices like Section[0]
+export const getNestedValue = (obj: any, path: string) => {
+  if (!obj || !path) return undefined;
+  return path.split('.').reduce((current, key) => {
+    if (!current) return undefined;
+    if (key.includes('[') && key.includes(']')) {
+      const arrayKey = key.substring(0, key.indexOf('['));
+      const index = parseInt(key.substring(key.indexOf('[') + 1, key.indexOf(']')), 10);
+      const arr = (current as any)?.[arrayKey];
+      if (!Array.isArray(arr) || index < 0 || index >= arr.length) return undefined;
+      return arr[index];
+    }
+    return (current as any)?.[key];
+  }, obj);
+};
+
+// Helper: last segment after dot, or entire string if no dot
+export const getLastPathSegment = (path: string): string => {
+  const idx = path.lastIndexOf('.');
+  return idx === -1 ? path : path.slice(idx + 1);
+};
+
+// Bulk update for sibling checkbox rows inside an embedded page array
+export const updateAllSiblingCheckboxes = (config: {
+  selectAllProperty: string;
+  checked: boolean;
+  pConn: any;
+  storeData: any;
+}) => {
+  const { selectAllProperty, checked, pConn, storeData } = config;
+  if (!selectAllProperty) return;
+
+  // Trim the selectAllProperty and remove any leading dots - Also the value should contain a single dot - e.g. Policies.IsSelected
+  const trimmedSelectAllProperty = selectAllProperty.trim().replace(/^[.]+/, '');
+  if (!/^[^.]+\.[^.]+$/.test(trimmedSelectAllProperty)) return;
+
+  const pageRef = `${pConn.options.pageReference}.${trimmedSelectAllProperty}`;
+  const embeddedPageName = pageRef.substring(0, pageRef.lastIndexOf('.'));
+  const embeddedArray = getNestedValue(storeData, embeddedPageName);
+  if (!Array.isArray(embeddedArray) || embeddedArray.length === 0) return;
+  const contextName = pConn.getContextName();
+  const target = pConn.getTarget();
+  const fieldName = `.${getLastPathSegment(trimmedSelectAllProperty)}`;
+
+  for (let i = 0; i < embeddedArray.length; i += 1) {
+    const messageConfig = {
+      meta: { config: { context: contextName } },
+      options: {
+        context: contextName,
+        pageReference: `${embeddedPageName}[${i}]`,
+        target,
+      },
+    };
+    const c11nEnv = (window as any).PCore.createPConnect(messageConfig);
+    c11nEnv?.getPConnect()?.getActionsApi()?.updateFieldValue(fieldName, checked);
+  }
+};
+
+// Update all boolean fields on the current page, excluding the triggering property
+export const updateBooleanFieldsOnPage = (config: {
+  pageRef: string;
+  checked: boolean;
+  actions: any;
+  storeData: any;
+  excludeProp: string;
+}) => {
+  const { pageRef, checked, actions, storeData, excludeProp } = config;
+  if (!pageRef) return;
+  const pageData = getNestedValue(storeData, pageRef);
+  if (!pageData || typeof pageData !== 'object') return;
+  Object.entries(pageData).forEach(([key, val]) => {
+    if (typeof val === 'boolean') {
+      const otherPropName = `.${key}`;
+      if (otherPropName !== excludeProp) {
+        actions.updateFieldValue(otherPropName, checked);
+      }
+    }
+  });
+};