@pega/dx-component-builder-sdk 25.1.16 → 26.1.11

package/tests/assets/sdk-r/components/create/override-sdk/template/ListView/ListView.tsx

@@ -41,6 +41,7 @@ import { getGenericFieldsLocalizedValue } from '@pega/react-sdk-components/lib/c
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 
 import useInit from './hooks';
+import { useCascadeAndUpdate } from './hooks';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface ListViewProps extends PConnProps {
@@ -56,10 +57,12 @@ interface ListViewProps extends PConnProps {
   compositeKeys?: any;
   showDynamicFields?: boolean;
   readonlyContextList?: any;
+  selectedValues?: any;
   value: any;
   viewName?: string;
   showRecords?: boolean;
   displayAs?: string;
+  localeReference?: string;
 }
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
@@ -87,13 +90,17 @@ export default function ListView(props: ListViewProps) {
     compositeKeys,
     showDynamicFields,
     viewName,
-    readonlyContextList: selectedValues,
+    readonlyContextList,
+    selectedValues: selectedValuesProp,
     value,
-    displayAs
+    displayAs,
+    localeReference
   } = props;
+  // Use selectedValues prop (passed from SimpleTableSelect) with fallback to readonlyContextList
+  const selectedValues = selectedValuesProp ?? readonlyContextList;
   let { showRecords } = props;
   const ref = useRef({}).current;
-  const cosmosTableRef = useRef();
+  const cosmosTableRef = useRef<any>(null);
   // List component context
   const [listContext, setListContext] = useState<any>({});
   const { meta } = listContext;
@@ -135,12 +142,19 @@ export default function ListView(props: ListViewProps) {
 
   const [selectedValue, setSelectedValue] = useState(value);
 
+  useEffect(() => {
+    setSelectedValue(value);
+  }, [value]);
+
+  // Tracks selected row keys for multi-select mode (mirrors Angular's SelectionModel)
+  const [selectedRowSet, setSelectedRowSet] = useState<Set<string>>(new Set());
+
   // This basically will hold the list of all current filters
   const filters = useRef({});
 
   // Will contain the list of columns specific for an instance
   const columnList: any = useRef([]);
-  const filterPayload: any = useRef();
+  const filterPayload: any = useRef(null);
   // Will be sent in the dashboardFilterPayload
   let selectParam: any[] = [];
 
@@ -208,6 +222,7 @@ export default function ListView(props: ListViewProps) {
               getPConnect().getListActions().setSelectedRows({});
             } else {
               getPConnect().getListActions().clearSelectedRows();
+              setSelectedRowSet(new Set());
             }
           }
         }
@@ -445,7 +460,7 @@ export default function ListView(props: ListViewProps) {
     fetchDataFromServer();
   }
 
-  function fetchAllData(fields): any {
+  function fetchAllData(fields, overrideParams?: any): any {
     if (displayAs === 'advancedSearch' && !showRecords) {
       return Promise.resolve({ data: null });
     }
@@ -465,12 +480,13 @@ export default function ListView(props: ListViewProps) {
       query = filterPayload.current?.query;
     }
     const context = getPConnect().getContextName();
+    const resolvedParams = overrideParams ?? dataViewParameters;
     // getDataAsync isn't returning correct data for the Page(i.e. ListView within a page) case
     return !bInForm
       ? // @ts-ignore - 3rd parameter "context" should be optional in getData method
         PCore.getDataApiUtils().getData(referenceList, payload)
       : // @ts-ignore - Argument of type 'null' is not assignable to parameter of type 'object'
-        PCore.getDataPageUtils().getDataAsync(referenceList, context, payload ? payload.dataViewParameters : dataViewParameters, null, query);
+        PCore.getDataPageUtils().getDataAsync(referenceList, context, payload ? payload.dataViewParameters : resolvedParams, null, query);
   }
 
   const buildSelect = (fieldDefs, colId, patchQueryFields = [], compositeKeys = []) => {
@@ -543,60 +559,76 @@ export default function ListView(props: ListViewProps) {
     return fieldsMap;
   };
 
-  async function fetchDataFromServer() {
+  async function fetchDataFromServer(overrideParams?: any) {
     let bCallSetRowsColumns = true;
-    const { fieldDefs, itemKey, patchQueryFields } = meta;
-    let listFields = fieldDefs ? buildSelect(fieldDefs, undefined, patchQueryFields, compositeKeys) : [];
-    listFields = addItemKeyInSelect(fieldDefs, itemKey, listFields, compositeKeys);
-    const workListJSON = await fetchAllData(listFields);
+    try {
+      const { fieldDefs, itemKey, patchQueryFields } = meta;
+      let listFields = fieldDefs ? buildSelect(fieldDefs, undefined, patchQueryFields, compositeKeys) : [];
+      listFields = addItemKeyInSelect(fieldDefs, itemKey, listFields, compositeKeys);
+      const workListJSON = await fetchAllData(listFields, overrideParams);
 
-    // this is an unresovled version of this.fields$, need unresolved, so can get the property reference
-    const columnFields = componentConfig.presets[0].children[0].children;
+      // this is an unresovled version of this.fields$, need unresolved, so can get the property reference
+      const columnFields = componentConfig.presets[0].children[0].children;
 
-    const tableDataResults = !bInForm ? workListJSON.data.data : workListJSON.data;
+      const tableDataResults = !bInForm ? workListJSON.data.data : workListJSON.data;
 
-    const myColumns = getHeaderCells(columnFields, fieldDefs);
+      const myColumns = getHeaderCells(columnFields, fieldDefs);
 
-    const selectParams: any = [];
+      const selectParams: any = [];
 
-    myColumns.forEach(column => {
-      selectParams.push({
-        field: column.id
+      myColumns.forEach(column => {
+        column.label = PCore.getLocaleUtils().getLocaleValue(column.label, localeReference);
+        selectParams.push({
+          field: column.id
+        });
       });
-    });
 
-    const colList: any = [];
+      const colList: any = [];
 
-    selectParams.forEach(col => {
-      colList.push(col.field);
-    });
+      selectParams.forEach(col => {
+        colList.push(col.field);
+      });
 
-    columnList.current = colList;
+      columnList.current = colList;
 
-    setResponse(tableDataResults);
+      setResponse(tableDataResults);
 
-    const usingDataResults = getUsingData(tableDataResults);
+      const usingDataResults = getUsingData(tableDataResults);
 
-    // store globally, so can be searched, filtered, etc.
-    myRows = usingDataResults;
+      // store globally, so can be searched, filtered, etc.
+      myRows = usingDataResults;
 
-    setRowsData(myRows);
-    // At this point, if we have data ready to render and haven't been asked
-    //  to NOT call setRows and setColumns, call them
-    if (bCallSetRowsColumns) {
-      setRows(myRows);
-      setColumns(myColumns);
-    }
+      setRowsData(myRows);
+      // At this point, if we have data ready to render and haven't been asked
+      //  to NOT call setRows and setColumns, call them
+      if (bCallSetRowsColumns) {
+        setRows(myRows);
+        setColumns(myColumns);
 
-    return () => {
-      // Inspired by https://juliangaramendy.dev/blog/use-promise-subscription
-      // The useEffect closure lets us have access to the bCallSetRowsColumns
-      //  variable inside the useEffect and inside the "then" clause of the
-      //  workListData promise
-      //  So, if this cleanup code gets run before the promise .then is called,
-      //  we can avoid calling the useState setters which would otherwise show a warning
-      bCallSetRowsColumns = false;
-    };
+        if (selectionMode === SELECTION_MODE.MULTI && selectedValues?.length > 0) {
+          const readonlyIds = new Set<string>(selectedValues.map((element: any) => element[rowID]));
+          const initialSet = new Set<string>();
+          myRows?.forEach(row => {
+            if (readonlyIds.has(row[rowID])) {
+              initialSet.add(row[rowID]);
+            }
+          });
+          setSelectedRowSet(initialSet);
+        }
+      }
+
+      return () => {
+        // Inspired by https://juliangaramendy.dev/blog/use-promise-subscription
+        // The useEffect closure lets us have access to the bCallSetRowsColumns
+        //  variable inside the useEffect and inside the "then" clause of the
+        //  workListData promise
+        //  So, if this cleanup code gets run before the promise .then is called,
+        //  we can avoid calling the useState setters which would otherwise show a warning
+        bCallSetRowsColumns = false;
+      };
+    } catch (e) {
+      console.error(e);
+    }
   }
 
   function prepareFilters(data) {
@@ -626,6 +658,14 @@ export default function ListView(props: ListViewProps) {
     }, {});
   }
 
+  useCascadeAndUpdate({
+    getPConnect,
+    listContext,
+    referenceList,
+    parameters,
+    fetchDataFromServer
+  });
+
   useEffect(() => {
     if (listContext.meta) {
       const identifier = `promoted-filters-queryable-${uniqueId}`;
@@ -1013,22 +1053,57 @@ export default function ListView(props: ListViewProps) {
     setSelectedValue(value);
   };
 
-  const onCheckboxClick = event => {
-    const value = event?.target?.value;
-    const checked = event?.target?.checked;
+  const getSelectedValue = (row: any, checked: boolean) => {
+    const rowValue = row[rowID];
     const reqObj: any = {};
     if (compositeKeys?.length > 1) {
-      const index = response.findIndex(element => element[rowID] === value);
+      const index = response.findIndex(element => element[rowID] === rowValue);
       const selectedRow = response[index];
       compositeKeys.forEach(element => {
         reqObj[element] = selectedRow[element];
       });
       reqObj.$selected = checked;
     } else {
-      reqObj[rowID] = value;
+      reqObj[rowID] = rowValue;
       reqObj.$selected = checked;
     }
-    getPConnect()?.getListActions()?.setSelectedRows([reqObj]);
+    return reqObj;
+  };
+
+  const onCheckboxClick = (row: any) => {
+    const rowKey = row[rowID];
+    const newSet = new Set(selectedRowSet);
+    if (newSet.has(rowKey)) {
+      newSet.delete(rowKey);
+    } else {
+      newSet.add(rowKey);
+    }
+    setSelectedRowSet(newSet);
+    const checked = newSet.has(rowKey);
+    const requiredValue = getSelectedValue(row, checked);
+    getPConnect()?.getListActions()?.setSelectedRows([requiredValue]);
+  };
+
+  const isAllSelected = (): boolean => {
+    const numSelected = selectedRowSet.size;
+    const numRows = arRows?.length || 0;
+    return numRows > 0 && numSelected === numRows;
+  };
+
+  const toggleAllRows = () => {
+    if (isAllSelected()) {
+      setSelectedRowSet(new Set());
+      getPConnect()?.getListActions()?.clearSelectedRows();
+      return;
+    }
+    if (selectedRowSet.size > 0 && !isAllSelected()) {
+      getPConnect()?.getListActions()?.clearSelectedRows();
+    }
+    const newSet = new Set<string>();
+    arRows.forEach(row => newSet.add(row[rowID]));
+    setSelectedRowSet(newSet);
+    const requiredValues = arRows.map(row => getSelectedValue(row, true));
+    getPConnect()?.getListActions()?.setSelectedRows(requiredValues);
   };
 
   const processColumnValue = (column, value) => {
@@ -1151,7 +1226,16 @@ export default function ListView(props: ListViewProps) {
               <Table>
                 <TableHead>
                   <TableRow>
-                    {(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && <TableCell />}
+                    {selectionMode === SELECTION_MODE.SINGLE && <TableCell padding='checkbox' />}
+                    {selectionMode === SELECTION_MODE.MULTI && (
+                      <TableCell padding='checkbox'>
+                        <Checkbox
+                          indeterminate={selectedRowSet.size > 0 && !isAllSelected()}
+                          checked={arRows?.length > 0 && isAllSelected()}
+                          onChange={toggleAllRows}
+                        />
+                      </TableCell>
+                    )}
                     {arColumns.map(column => {
                       return (
                         <TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
@@ -1179,7 +1263,7 @@ export default function ListView(props: ListViewProps) {
                         return (
                           <TableRow key={row[rowID]}>
                             {selectionMode === SELECTION_MODE.SINGLE && (
-                              <TableCell>
+                              <TableCell padding='checkbox'>
                                 <Radio
                                   onChange={handleChange}
                                   value={row[rowID]}
@@ -1190,12 +1274,8 @@ export default function ListView(props: ListViewProps) {
                               </TableCell>
                             )}
                             {selectionMode === SELECTION_MODE.MULTI && (
-                              <TableCell>
-                                <Checkbox
-                                  onChange={onCheckboxClick}
-                                  checked={selectedValues.some(selectedValue => selectedValue[rowID] === row[rowID])}
-                                  value={row[rowID]}
-                                />
+                              <TableCell padding='checkbox'>
+                                <Checkbox onChange={() => onCheckboxClick(row)} checked={selectedRowSet.has(row[rowID])} />
                               </TableCell>
                             )}
                             {arColumns.map(column => {

package/tests/assets/sdk-r/components/create/override-sdk/template/ListView/hooks.ts

@@ -1,7 +1,70 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { getContext, readContextResponse } from './utils';
 
+/**
+ * Hook that subscribes to parameter field changes and triggers a data re-fetch
+ * when the parameters change. This mirrors the useCascadeAndUpdate hook from
+ * the constellation-frontend codebase.
+ */
+export function useCascadeAndUpdate({ getPConnect, listContext, referenceList, parameters, fetchDataFromServer }) {
+  const isParametersOverride = !!parameters;
+  const fetchRef = useRef(fetchDataFromServer);
+  fetchRef.current = fetchDataFromServer;
+
+  useEffect(() => {
+    if (Object.keys(listContext).length === 0) return;
+
+    const fieldChangeCallback = () => {
+      if (listContext.meta) {
+        // Resolve fresh parameters at callback time since the subscription fires
+        // before React re-renders with updated props
+        const { parameters: freshParams } = getPConnect().getConfigProps();
+        fetchRef.current(freshParams);
+      }
+    };
+
+    const rawViewParameters = getPConnect().getComponentConfig?.()?.parameters;
+    const subscriptionId = crypto.randomUUID();
+
+    const overriddenParamFields: string[] = [];
+
+    // Collect overridden parameter fields that are property references
+    if (rawViewParameters && isParametersOverride) {
+      Object.keys(rawViewParameters).forEach(paramKey => {
+        const paramField = rawViewParameters[paramKey];
+        if (PCore.getAnnotationUtils().isProperty(paramField)) {
+          overriddenParamFields.push(`.${PCore.getAnnotationUtils().getPropertyName(paramField)}`);
+        }
+      });
+    }
+
+    // Subscribe to parameter field changes when parameters are overridden on the view
+    if (overriddenParamFields.length !== 0) {
+      PCore.getDataPageUtils().subscribeToUpdate(
+        referenceList,
+        overriddenParamFields,
+        getPConnect().getContextName(),
+        getPConnect().getPageReference(),
+        fieldChangeCallback,
+        `${subscriptionId}-override-params`
+      );
+    }
+
+    return function cleanup() {
+      if (overriddenParamFields.length !== 0) {
+        PCore.getDataPageUtils().unsubscribe(
+          referenceList,
+          overriddenParamFields,
+          getPConnect().getContextName(),
+          getPConnect().getPageReference(),
+          `${subscriptionId}-override-params`
+        );
+      }
+    };
+  }, [listContext]);
+}
+
 export default function useInit(props) {
   const {
     referenceList,
@@ -72,18 +135,22 @@ export default function useInit(props) {
         compositeKeys,
         isSearchable,
         isCacheable: true
-      }).then(async context => {
-        if (isCompStillMounted) {
-          return readContextResponse(context, {
-            ...props,
-            editing,
-            selectionCountThreshold,
-            ref,
-            selectionMode,
-            cosmosTableRef
-          });
-        }
-      });
+      })
+        .then(async context => {
+          if (isCompStillMounted) {
+            return readContextResponse(context, {
+              ...props,
+              editing,
+              selectionCountThreshold,
+              ref,
+              selectionMode,
+              cosmosTableRef
+            });
+          }
+        })
+        .catch(e => {
+          console.error(e);
+        });
     })();
 
     return () => {

package/tests/assets/sdk-r/components/create/override-sdk/template/ListView/utils.ts

@@ -620,15 +620,25 @@ export function initializeColumns(fields: any[] = [], getMappedProperty: any = n
   });
 }
 
-export const getItemKey = fields => {
+export function getMappedKey(key) {
+  // @ts-ignore
+  const qualifiedKey = PCore.getNameSpaceUtils().getDefaultQualifiedName(key);
+  const mappedKey = PCore.getEnvironmentInfo().getKeyMapping(qualifiedKey);
+  if (!mappedKey) {
+    return qualifiedKey;
+  }
+  return mappedKey;
+}
+
+export function getItemKey(fields) {
   let itemKey;
   if (fields.findIndex(field => field.id === 'pyGUID') > -1) {
     itemKey = 'pyGUID';
   } else {
-    itemKey = 'pzInsKey';
+    itemKey = getMappedKey('pzInsKey');
   }
   return itemKey;
-};
+}
 
 export function preparePatchQueryFields(fields, isDataObject = false, classID = '') {
   const queryFields: any[] = [];

package/tests/assets/sdk-r/components/create/override-sdk/template/MultiReferenceReadOnly/MultiReferenceReadOnly.tsx

@@ -4,12 +4,27 @@ interface MultiReferenceReadOnlyProps extends PConnProps {
   config: { referenceList: any; readonlyContextList: any };
   label: string;
   hideLabel: boolean;
+  displayMode?: any;
+  displayAs?: any;
 }
 
 export default function MultiReferenceReadOnly(props: MultiReferenceReadOnlyProps) {
-  const { getPConnect, label = '', hideLabel = false, config } = props;
+  const { getPConnect, label = '', hideLabel = false, config, displayMode, displayAs } = props;
   const { referenceList, readonlyContextList } = config;
 
+  if (['readonlyMulti', 'combobox', 'checkboxgroup'].includes(displayAs)) {
+    return getPConnect().createComponent({
+      type: 'SimpleTableSelectReadonly',
+      config: {
+        ...config,
+        displayMode,
+        label,
+        hideLabel,
+        displayAs
+      }
+    } as any);
+  }
+
   // When referenceList does not contain selected values, it should be replaced with readonlyContextList while calling SimpleTableManual
   let readonlyContextObject;
   if (!PCore.getAnnotationUtils().isProperty(referenceList)) {