@pega/dx-component-builder-sdk 24.2.14 → 24.2.15

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

@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
 import React, { PropsWithChildren, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -28,6 +27,7 @@ import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react
 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 { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
@@ -52,12 +52,27 @@ interface SimpleTableManualProps extends PConnProps {
   displayMode?: string;
   useSeparateViewForEdit: any;
   viewForEditModal: any;
+  validatemessage?: string;
+  required?: boolean;
 }
 
 const useStyles = makeStyles((/* theme */) => ({
   label: {
     margin: '8px'
   },
+  tableLabel: {
+    '&::after': {
+      display: 'inline',
+      content: '" *"',
+      verticalAlign: 'top',
+      color: 'var(--app-error-color)'
+    }
+  },
+  message: {
+    margin: '8px',
+    color: 'var(--app-error-color)',
+    fontSize: '14px'
+  },
   header: {
     background: '#f5f5f5'
   },
@@ -85,9 +100,6 @@ let menuColumnId = '';
 let menuColumnType = '';
 let menuColumnLabel = '';
 
-const filterByColumns: any[] = [];
-let myRows: any[];
-
 export default function SimpleTableManual(props: PropsWithChildren<SimpleTableManualProps>) {
   const classes = useStyles();
   const {
@@ -110,7 +122,9 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     editModeConfig,
     displayMode,
     useSeparateViewForEdit,
-    viewForEditModal
+    viewForEditModal,
+    required,
+    validatemessage
   } = props;
   const pConn = getPConnect();
   const [rowData, setRowData] = useState([]);
@@ -130,7 +144,10 @@ 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;
@@ -176,13 +193,8 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   });
 
   useEffect(() => {
-    if (editableMode && !allowEditingInModal) {
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      buildElementsForTable();
-    }
-  }, [referenceList.length]);
-
-  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    buildElementsForTable();
     if (readOnlyMode || allowEditingInModal) {
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
       generateRowsData();
@@ -201,10 +213,10 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     if (allowEditingInModal) {
       getPConnect()
         .getListActions()
-        // @ts-ignore - An argument for 'uniqueField' was not provided.
         .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-ignore - An argument for 'fields' was not provided
@@ -238,8 +250,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);
   }
@@ -247,21 +261,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 => {
@@ -273,16 +291,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);
     }
   }
@@ -306,9 +327,9 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     if (allowEditingInModal && defaultView) {
       pConn
         .getActionsApi()
+        // @ts-ignore
         .openEmbeddedDataModal(defaultView, pConn, referenceListStr, referenceList.length, PCore.getConstants().RESOURCE_STATUS.CREATE);
     } else {
-      // @ts-ignore - An argument for 'pageRef' was not provided.
       pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
     }
 
@@ -322,6 +343,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     if (typeof selectedRowIndex.current === 'number') {
       pConn
         .getActionsApi()
+        // @ts-ignore
         .openEmbeddedDataModal(
           bUseSeparateViewForEdit ? editView : defaultView,
           pConn,
@@ -334,12 +356,10 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
 
   const deleteRecord = () => {
     setEditAnchorEl(null);
-    // @ts-ignore - An argument for 'pageRef' was not provided.
     pConn.getListActions().deleteEntry(selectedRowIndex.current);
   };
 
   const deleteRecordFromInlineEditable = (index: number) => {
-    // @ts-ignore - An argument for 'pageRef' was not provided.
     pConn.getListActions().deleteEntry(index);
   };
 
@@ -349,7 +369,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
       const data: any = [];
       rawFields.forEach(item => {
         // removing label field from config to hide title in the table cell
-        item = { ...item, config: { ...item.config, label: '' } };
+        item = { ...item, config: { ...item.config, label: '', displayMode: readOnlyMode || allowEditingInModal ? 'DISPLAY_ONLY' : undefined } };
         const referenceListData = getReferenceList(pConn);
         const isDatapage = referenceListData.startsWith('D_');
         const pageReferenceValue = isDatapage
@@ -397,14 +417,15 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
 
   type Order = 'asc' | 'desc';
 
-  function getComparator<Key extends keyof any>(
-    theOrder: Order,
-    orderedBy: Key
-  ): (a: { [key in Key]: number | string }, b: { [key in Key]: number | string }) => number {
-    return theOrder === 'desc' ? (a, b) => descendingComparator(a, b, orderedBy) : (a, b) => -descendingComparator(a, b, orderedBy);
+  interface Comparator<T> {
+    (a: T, b: T): number;
   }
 
-  function stableSort<T>(array: T[], comparator: (a: T, b: T) => number) {
+  function getComparator<Key extends keyof any, T extends Record<Key, any>>(theOrder: Order, orderedBy: Key): Comparator<T> {
+    return theOrder === 'desc' ? (a: T, b: T) => descendingComparator<T>(a, b, orderedBy) : (a: T, b: T) => -descendingComparator<T>(a, b, orderedBy);
+  }
+
+  function stableSort<T>(array: T[], comparator: (a: T, b: T) => number): T[] {
     const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
     stabilizedThis.sort((a, b) => {
       // eslint-disable-next-line @typescript-eslint/no-shadow
@@ -412,8 +433,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
       if (order !== 0) return order;
       return a[1] - b[1];
     });
-
-    return stabilizedThis.map(el => el[0]);
+    return stabilizedThis.map(([el]) => el);
   }
 
   function _menuClick(event, columnId: string, columnType: string, labelValue: string) {
@@ -439,7 +459,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') {
@@ -505,10 +525,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);
@@ -516,7 +536,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) {
@@ -544,7 +564,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
         filterObj.containsFilterValue = displayDialogContainsValue;
       }
 
-      filterByColumns.push(filterObj);
+      filterByColumnsRef.current.push(filterObj);
     }
   }
 
@@ -556,7 +576,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) {
         // eslint-disable-next-line sonarjs/prefer-single-boolean-return
         if (filterObj.containsFilterValue !== '') {
@@ -570,7 +590,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' }}>
@@ -583,19 +603,21 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     <>
       <TableContainer component={Paper} style={{ margin: '4px 0px' }} id='simple-table-manual'>
         {propsToUse.label && (
-          <h3 className={classes.label}>
+          <h3 className={`${classes.label} ${required ? classes.tableLabel : ''}`}>
             {propsToUse.label} {results()}
           </h3>
         )}
+        {validatemessage && <div className={classes.message}>{validatemessage}</div>}
         <Table>
           <TableHead className={classes.header}>
             <TableRow>
               {fieldDefs.map((field: any, index) => {
                 return (
                   <TableCell key={`head-${displayedColumns[index]}`} className={classes.tableCell}>
-                    {readOnlyMode ? (
-                      <div>
+                    {(readOnlyMode || allowEditingInModal) && field.cellRenderer !== 'DeleteIcon' ? (
+                      <div style={{ display: 'flex' }}>
                         <TableSortLabel
+                          style={{ width: '75%' }}
                           active={orderBy === displayedColumns[index]}
                           direction={orderBy === displayedColumns[index] ? order : 'asc'}
                           onClick={createSortHandler(displayedColumns[index])}
@@ -607,8 +629,8 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
                           ) : null}
                         </TableSortLabel>
                         <MoreIcon
+                          style={{ cursor: 'pointer', zIndex: 1000 }}
                           id='menu-icon'
-                          className={classes.moreIcon}
                           onClick={event => {
                             _menuClick(event, field.name, field.meta.type, field.label);
                           }}
@@ -624,11 +646,12 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
           </TableHead>
           <TableBody>
             {editableMode &&
+              !allowEditingInModal &&
               elements.map((row: any, index) => {
                 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}>
@@ -655,59 +678,53 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
             {(readOnlyMode || allowEditingInModal) &&
               rowData &&
               rowData.length > 0 &&
-              stableSort(rowData, getComparator(order, orderBy))
-                .slice(0)
-                .map((row, index) => {
-                  return (
-                    // eslint-disable-next-line react/no-array-index-key
-                    <TableRow key={index}>
-                      {displayedColumns.map(colKey => {
-                        return (
-                          <TableCell key={colKey} className={classes.tableCell}>
-                            {showDeleteButton && colKey === 'DeleteIcon' ? (
-                              <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>
-                            ) : typeof row[colKey] === 'boolean' && !row[colKey] ? (
-                              'False'
-                            ) : typeof row[colKey] === 'boolean' && row[colKey] ? (
-                              'True'
-                            ) : (
-                              row[colKey] || '---'
-                            )}
-                          </TableCell>
-                        );
-                      })}
-                    </TableRow>
-                  );
-                })}
+              stableSort(rowData, getComparator(order, orderBy)).map((row: any, displayIndex) => {
+                const originalIndex = row.__originalIndex;
+                return (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <TableRow key={displayIndex}>
+                    {(elements as any[])[originalIndex]?.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, originalIndex);
+                            }}
+                          />
+                          <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>
+                      </TableCell>
+                    )}
+                  </TableRow>
+                );
+              })}
           </TableBody>
         </Table>
-        {readOnlyMode && rowData && rowData.length === 0 && (
-          <div className='no-records' id='no-records'>
-            No records found.
-          </div>
-        )}
-        {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'>
-            No records found.
+            {getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}
           </div>
         )}
       </TableContainer>
       {showAddRowButton && (
         <div style={{ fontSize: '1rem' }}>
           <Link style={{ cursor: 'pointer' }} onClick={addRecord} underline='hover'>
-            + Add
+            + {localizedVal('Add', localeCategory)}
           </Link>
         </div>
       )}

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

@@ -57,10 +57,8 @@ export default function SimpleTableSelect(props: SimpleTableSelectProps) {
 
   // Need to get this written so typedefs work
   const { datasource: { parameters: fieldParameters = {} } = {}, pageClass } = isMultiSelectMode
-    ? // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'.
-      pConn.getFieldMetadata(`@P .${referenceProp}`)
-    : // @ts-ignore - Property 'getCurrentPageFieldMetadata' is private and only accessible within class 'C11nEnv'.
-      pConn.getCurrentPageFieldMetadata(contextPageReference);
+    ? pConn.getFieldMetadata(`@P .${referenceProp}`)
+    : pConn.getCurrentPageFieldMetadata(contextPageReference);
 
   const compositeKeys: any[] = [];
   Object.values(fieldParameters).forEach((param: any) => {

package/tests/assets/sdk-r/components/create/override-sdk/widget/Attachment/Attachment.css

@@ -34,6 +34,7 @@
 
 .file-error {
   color: var(--app-error-color);
+  font-size: 14px;
 }
 
 .psdk-utility-card {