@pega/dx-component-builder-sdk 0.25.6 → 0.26.1

package/tests/assets/sdk-r/components/createAll/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)) {

package/tests/assets/sdk-r/components/createAll/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { type PropsWithChildren, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -28,9 +28,10 @@ import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getReferenceList } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 import { getGenericFieldsLocalizedValue } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
-import { buildFieldsForTable, filterData, getContext } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
+import { buildFieldsForTable, filterData, getConfigFields, getContext } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
+import { initializeColumns } from '@pega/react-sdk-components/lib/components/template/ListView/utils';
 
 interface SimpleTableManualProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -54,6 +55,8 @@ interface SimpleTableManualProps extends PConnProps {
   viewForEditModal: any;
   validatemessage?: string;
   required?: boolean;
+  targetClassLabel?: string;
+  uniqueField?: string;
 }
 
 const useStyles = makeStyles((/* theme */) => ({
@@ -100,9 +103,6 @@ let menuColumnId = '';
 let menuColumnType = '';
 let menuColumnLabel = '';
 
-const filterByColumns: any[] = [];
-let myRows: any[];
-
 export default function SimpleTableManual(props: PropsWithChildren<SimpleTableManualProps>) {
   const classes = useStyles();
   const {
@@ -127,8 +127,11 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     useSeparateViewForEdit,
     viewForEditModal,
     required,
-    validatemessage
+    validatemessage,
+    targetClassLabel,
+    uniqueField
   } = props;
+  const normalizedUniqueField = uniqueField?.charAt(0) === '.' ? uniqueField.substring(1) : uniqueField;
   const pConn = getPConnect();
   const [rowData, setRowData] = useState([]);
   const [elements, setElementsData] = useState([]);
@@ -147,12 +150,15 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   const [displayDialogDateFilter, setDisplayDialogDateFilter] = useState<string>('notequal');
   const [displayDialogDateValue, setDisplayDialogDateValue] = useState<string>('');
   const selectedRowIndex: any = useRef(null);
+  const myRowsRef = useRef<any[]>([]);
+  const filterByColumnsRef = useRef<any[]>([]);
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'SimpleTable';
   const parameters = fieldMetadata?.datasource?.parameters;
   const { referenceListStr } = getContext(getPConnect());
   const label = labelProp || propertyLabel;
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+
   if (propsToUse.showLabel === false) {
     propsToUse.label = '';
   }
@@ -163,13 +169,17 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   const menuIconOverride$ = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
 
   const resolvedFields = children?.[0]?.children || presets?.[0].children?.[0].children;
-  const primaryFieldsViewIndex = resolvedFields.findIndex(field => field.config.value === 'pyPrimaryFields');
+  // @ts-ignore
+  const qualifiedPrimaryFields = PCore.getNameSpaceUtils().getDefaultQualifiedName('pyPrimaryFields');
+  const primaryFieldsViewIndex = resolvedFields?.findIndex(field => {
+    const value = field.config.value;
+    return value === 'pyPrimaryFields' || value === qualifiedPrimaryFields;
+  });
   // NOTE: props has each child.config with datasource and value undefined
   //  but getRawMetadata() has each child.config with datasource and value showing their unresolved values (ex: "@P thePropName")
   //  We need to use the prop name as the "glue" to tie the table dataSource, displayColumns and data together.
   //  So, in the code below, we'll use the unresolved config.value (but replacing the space with an underscore to keep things happy)
   const rawMetadata: any = getPConnect().getRawMetadata();
-
   // get raw config since @P and other annotations are processed and don't appear in the resolved config.
   //  Destructure "raw" children into array var: "rawFields"
   //  NOTE: when config.listType == "associated", the property can be found in either
@@ -186,12 +196,41 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   const allowEditingInModal =
     (editMode ? editMode === 'modal' : addAndEditRowsWithin === 'modal') && !(renderMode === 'ReadOnly' || isDisplayModeEnabled);
   const showDeleteButton = editableMode && !hideDeleteRow;
+  const { allowRowDelete: allowRowDeleteConfig } = pConn.getComponentConfig?.() ?? {};
+
+  const isDeleteAllowedForRow = (index: number): boolean => {
+    if (!showDeleteButton) return false;
+    if (allowRowDeleteConfig === undefined || allowRowDeleteConfig === true) return true;
+    if (typeof allowRowDeleteConfig === 'string' && allowRowDeleteConfig.startsWith('@E ')) {
+      try {
+        const expression = allowRowDeleteConfig.replace('@E ', '');
+        // @ts-expect-error - options param is optional per corejs docs
+        return PCore.getExpressionEngine().evaluate(expression, referenceList[index]);
+      } catch {
+        return true;
+      }
+    }
+    return false;
+  };
+
   const defaultView = editModeConfig ? editModeConfig.defaultView : viewForAddAndEditModal;
   const bUseSeparateViewForEdit = editModeConfig ? editModeConfig.useSeparateViewForEdit : useSeparateViewForEdit;
   const editView = editModeConfig ? editModeConfig.editView : viewForEditModal;
-
-  const fieldsWithPropNames = rawFields.map((field, index) => {
-    return { ...resolvedFields[index], propName: field.config.value.replace('@P .', '') };
+  const editType = editModeConfig?.editType;
+  const defaultActionId = editType === 'action' ? editModeConfig?.defaultAction : undefined;
+  const editActionId = editType === 'action' && editModeConfig?.useSeparateActionForEdit ? editModeConfig?.editAction : editModeConfig?.defaultAction;
+  const configFields = getConfigFields(rawFields, contextClass, primaryFieldsViewIndex);
+  const addLabel = targetClassLabel ? localizedVal('Add {0}', 'SimpleTable').replace('{0}', targetClassLabel) : localizedVal('Add', 'SimpleTable');
+
+  const fieldsWithPropNames = configFields.map(field => {
+    let propName = field.config.value;
+    if (propName.startsWith('@')) {
+      propName = propName.substring(propName.indexOf(' ') + 1);
+    }
+    if (propName.startsWith('.')) {
+      propName = propName.substring(1);
+    }
+    return { ...field, propName };
   });
 
   useEffect(() => {
@@ -207,10 +246,15 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   //  Constellation DX Components do). It will also have the "label", and "meta" contains the original,
   //  unchanged config info. For now, much of the info here is carried over from
   //  Constellation DX Components.
-  const fieldDefs = buildFieldsForTable(rawFields, getPConnect(), showDeleteButton, {
-    primaryFieldsViewIndex,
-    fields: resolvedFields
-  });
+
+  const fieldDefs = useMemo(
+    () =>
+      isDisplayModeEnabled || readOnlyMode
+        ? initializeColumns(configFields, undefined)
+        : // For inline edit table
+          buildFieldsForTable(configFields, getPConnect(), showDeleteButton, { primaryFieldsViewIndex, fields: resolvedFields }),
+    []
+  );
 
   useLayoutEffect(() => {
     if (allowEditingInModal) {
@@ -218,11 +262,12 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
         .getListActions()
         .initDefaultPageInstructions(
           getPConnect().getReferenceList(),
-          fieldDefs.filter(item => item.name).map(item => item.name)
+          // Temporary filter for attachments to align with constellation payload behavior.
+          fieldDefs.filter(item => item.name && item.meta?.type !== 'Attachment').map(item => item.name)
         );
     } else {
-      // @ts-expect-error - An argument for 'fields' was not provided
-      getPConnect().getListActions().initDefaultPageInstructions(getPConnect().getReferenceList());
+      // @ts-ignore - fields param is optional, uniqueField passed as 3rd arg for page instructions
+      getPConnect().getListActions().initDefaultPageInstructions(getPConnect().getReferenceList(), undefined, uniqueField);
     }
   }, []);
 
@@ -252,8 +297,10 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     // See what data (if any) we have to display
     const refKeys: string[] = inColKey?.split('.');
     let valBuilder = inRowData;
+    let index = 0;
     for (const key of refKeys) {
-      valBuilder = valBuilder[key];
+      index += 1;
+      valBuilder = valBuilder[key] !== undefined || index === refKeys.length ? valBuilder[key] : valBuilder;
     }
     return getFormattedValue(valBuilder, inColKey);
   }
@@ -261,21 +308,25 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   const formatRowsData = data => {
     if (!data) return {};
 
-    return data.map(item => {
-      return displayedColumns.reduce((dataForRow, colKey) => {
-        dataForRow[colKey] = getRowValue(item, colKey);
-        return dataForRow;
-      }, {});
+    return data.map((item, idx) => {
+      const dataForRow = displayedColumns.reduce((acc, colKey) => {
+        acc[colKey] = getRowValue(item, colKey);
+        return acc;
+      }, {} as any);
+      dataForRow.__originalIndex = idx;
+      return dataForRow;
     });
   };
 
   function generateRowsData() {
+    myRowsRef.current = [];
+
     // if referenceList is empty and dataPageName property value exists then make a datapage fetch call and get the list of data.
     if (!referenceList.length && dataPageName) {
       getDataPage(dataPageName, parameters, context)
         .then(listData => {
           const data = formatRowsData(listData);
-          myRows = data;
+          myRowsRef.current = data || [];
           setRowData(data);
         })
         .catch(e => {
@@ -286,16 +337,19 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
       //  in the table. So, iterate over referenceList to create the dataRows that
       //  we're using as the table's dataSource
       const data: any = [];
-      for (const row of referenceList) {
-        const dataForRow: object = {};
+      referenceList.forEach((row, idx) => {
+        const dataForRow: any = {};
         for (const col of displayedColumns) {
           const colKey: string = col;
           const theVal = getRowValue(row, colKey);
           dataForRow[colKey] = theVal || '';
         }
+        // Preserve the original position so stableSort can look up the right
+        // entry in `elements` even after filtering shrinks rowData.
+        dataForRow.__originalIndex = idx;
         data.push(dataForRow);
-        myRows = data;
-      }
+      });
+      myRowsRef.current = data;
       setRowData(data);
     }
   }
@@ -316,13 +370,27 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   // console.log(JSON.stringify(rowData));
 
   const addRecord = () => {
-    if (allowEditingInModal && defaultView) {
+    if (allowEditingInModal && (defaultView || defaultActionId)) {
       pConn
         .getActionsApi()
-        // @ts-expect-error
-        .openEmbeddedDataModal(defaultView, pConn, referenceListStr, referenceList.length, PCore.getConstants().RESOURCE_STATUS.CREATE);
+
+        .openEmbeddedDataModal(
+          defaultView,
+          // @ts-expect-error
+          pConn,
+          referenceListStr,
+          referenceList.length,
+          PCore.getConstants().RESOURCE_STATUS.CREATE,
+          targetClassLabel,
+          editType,
+          defaultActionId
+        );
     } else {
-      pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
+      const payload: any = { classID: contextClass };
+      if (normalizedUniqueField) {
+        payload[normalizedUniqueField] = crypto.randomUUID();
+      }
+      pConn.getListActions().insert(payload, referenceList.length);
     }
 
     getPConnect().clearErrorMessages({
@@ -335,13 +403,17 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     if (typeof selectedRowIndex.current === 'number') {
       pConn
         .getActionsApi()
-        // @ts-expect-error
+
         .openEmbeddedDataModal(
           bUseSeparateViewForEdit ? editView : defaultView,
+          // @ts-expect-error
           pConn,
           referenceListStr,
           selectedRowIndex.current,
-          PCore.getConstants().RESOURCE_STATUS.UPDATE
+          PCore.getConstants().RESOURCE_STATUS.UPDATE,
+          targetClassLabel,
+          editType,
+          editActionId
         );
     }
   };
@@ -359,7 +431,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     const eleData: any = [];
     referenceList.forEach((element, index) => {
       const data: any = [];
-      rawFields.forEach(item => {
+      configFields.forEach(item => {
         // removing label field from config to hide title in the table cell
         if (!item.config.hide) {
           item = { ...item, config: { ...item.config, label: '', displayMode: readOnlyMode || allowEditingInModal ? 'DISPLAY_ONLY' : undefined } };
@@ -426,12 +498,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
       if (order !== 0) return order;
       return a[1] - b[1];
     });
-
-    const newElements = new Array(stabilizedThis.length);
-    stabilizedThis.forEach((el, index) => {
-      newElements[index] = elements[el[1]];
-    });
-    return newElements;
+    return stabilizedThis.map(([el]) => el);
   }
 
   function _menuClick(event, columnId: string, columnType: string, labelValue: string) {
@@ -457,7 +524,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
 
     let bFound = false;
 
-    for (const filterObj of filterByColumns) {
+    for (const filterObj of filterByColumnsRef.current) {
       if (filterObj.ref === menuColumnId) {
         setFilterBy(menuColumnLabel);
         if (filterObj.type === 'Date' || filterObj.type === 'DateTime' || filterObj.type === 'Time') {
@@ -523,10 +590,10 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
 
   function filterSortGroupBy() {
     // get original data set
-    let theData: any = myRows.slice();
+    let theData: any = myRowsRef.current?.slice();
 
     // last filter config data is global
-    theData = theData.filter(filterData(filterByColumns));
+    theData = theData?.filter(filterData(filterByColumnsRef.current));
 
     // move data to array and then sort
     setRowData(theData);
@@ -534,7 +601,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
 
   function updateFilterWithInfo() {
     let bFound = false;
-    for (const filterObj of filterByColumns) {
+    for (const filterObj of filterByColumnsRef.current) {
       if (filterObj.ref === menuColumnId) {
         filterObj.type = filterType;
         if (containsDateOrTime) {
@@ -562,7 +629,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
         filterObj.containsFilterValue = displayDialogContainsValue;
       }
 
-      filterByColumns.push(filterObj);
+      filterByColumnsRef.current.push(filterObj);
     }
   }
 
@@ -574,7 +641,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   }
 
   function _showFilteredIcon(columnId) {
-    for (const filterObj of filterByColumns) {
+    for (const filterObj of filterByColumnsRef.current) {
       if (filterObj.ref === columnId) {
         if (filterObj.containsFilterValue !== '') {
           return true;
@@ -587,7 +654,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   }
 
   function results() {
-    const len = editableMode ? elements.length : rowData.length;
+    const len = editableMode ? elements?.length : rowData?.length;
 
     return len ? (
       <span style={{ fontSize: '0.9em', opacity: '0.7' }}>
@@ -596,6 +663,10 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     ) : null;
   }
 
+  if (!rawFields) {
+    return null;
+  }
+
   return (
     <>
       <TableContainer component={Paper} style={{ margin: '4px 0px' }} id='simple-table-manual'>
@@ -651,7 +722,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
                 const theKey = `row-${index}`;
                 return (
                   <TableRow key={theKey}>
-                    {row.map((item, childIndex) => {
+                    {row?.map((item, childIndex) => {
                       const theColKey = `data-${index}-${childIndex}`;
                       return (
                         <TableCell key={theColKey} className={classes.tableCell}>
@@ -661,15 +732,17 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
                     })}
                     {showDeleteButton && (
                       <TableCell>
-                        <button
-                          type='button'
-                          className='psdk-utility-button'
-                          id='delete-button'
-                          aria-label='Delete Cell'
-                          onClick={() => deleteRecordFromInlineEditable(index)}
-                        >
-                          <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$} />
-                        </button>
+                        {isDeleteAllowedForRow(index) && (
+                          <button
+                            type='button'
+                            className='psdk-utility-button'
+                            id='delete-button'
+                            aria-label='Delete Cell'
+                            onClick={() => deleteRecordFromInlineEditable(index)}
+                          >
+                            <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$} />
+                          </button>
+                        )}
                       </TableCell>
                     )}
                   </TableRow>
@@ -678,51 +751,52 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
             {(readOnlyMode || allowEditingInModal) &&
               rowData &&
               rowData.length > 0 &&
-              stableSort(rowData, getComparator(order, orderBy))
-                .slice(0)
-                .map((row, index) => {
-                  return (
-                    <TableRow key={index}>
-                      {row.map((item, childIndex) => {
-                        const theColKey = displayedColumns[childIndex];
-                        return (
-                          <TableCell key={theColKey} className={classes.tableCell}>
-                            {item}
-                          </TableCell>
-                        );
-                      })}
-                      {showDeleteButton && (
-                        <TableCell key='DeleteIcon' className={classes.tableCell}>
-                          <div>
-                            <MoreIcon
-                              id='table-edit-menu-icon'
-                              className={classes.moreIcon}
-                              onClick={event => {
-                                editMenuClick(event, index);
-                              }}
-                            />
-                            <Menu id='table-edit-menu' anchorEl={editAnchorEl} keepMounted open={Boolean(editAnchorEl)} onClose={_menuClose}>
-                              <MenuItem onClick={() => editRecord()}>Edit</MenuItem>
-                              <MenuItem onClick={() => deleteRecord()}>Delete</MenuItem>
-                            </Menu>
-                          </div>
+              stableSort(rowData, getComparator(order, orderBy)).map((row: any, displayIndex) => {
+                const originalIndex = row.__originalIndex;
+                return (
+                  <TableRow key={displayIndex}>
+                    {(elements as any[])[originalIndex]?.map((item, childIndex) => {
+                      const theColKey = displayedColumns[childIndex];
+                      return (
+                        <TableCell key={theColKey} className={classes.tableCell}>
+                          {item}
                         </TableCell>
-                      )}
-                    </TableRow>
-                  );
-                })}
+                      );
+                    })}
+                    {showDeleteButton && (
+                      <TableCell key='DeleteIcon' className={classes.tableCell}>
+                        <div>
+                          <MoreIcon
+                            id='table-edit-menu-icon'
+                            className={classes.moreIcon}
+                            onClick={event => {
+                              editMenuClick(event, originalIndex);
+                            }}
+                          />
+                          <Menu id='table-edit-menu' anchorEl={editAnchorEl} keepMounted open={Boolean(editAnchorEl)} onClose={_menuClose}>
+                            <MenuItem onClick={() => editRecord()}>Edit</MenuItem>
+                            {isDeleteAllowedForRow(originalIndex) && <MenuItem onClick={() => deleteRecord()}>Delete</MenuItem>}
+                          </Menu>
+                        </div>
+                      </TableCell>
+                    )}
+                  </TableRow>
+                );
+              })}
           </TableBody>
         </Table>
-        {((readOnlyMode && (!rowData || rowData?.length === 0)) || (editableMode && (!referenceList || referenceList?.length === 0))) && (
+        {((readOnlyMode && (!rowData || rowData?.length === 0)) ||
+          (editableMode && (!referenceList || referenceList?.length === 0)) ||
+          (allowEditingInModal && (!rowData || rowData?.length === 0))) && (
           <div className='no-records' id='no-records'>
-            {getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}
+            {getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.')}
           </div>
         )}
       </TableContainer>
       {showAddRowButton && (
         <div style={{ fontSize: '1rem' }}>
           <Link style={{ cursor: 'pointer' }} onClick={addRecord} underline='hover'>
-            + {localizedVal('Add', localeCategory)}
+            + {localizedVal(addLabel, localeCategory)}
           </Link>
         </div>
       )}