@pega/react-sdk-overrides 0.24.4 → 0.25.1

package/lib/template/ListView/ListView.tsx

@@ -3,44 +3,46 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable @typescript-eslint/no-shadow */
 
-import React, { useState, useEffect, useRef } from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TablePagination from '@material-ui/core/TablePagination';
-import TableRow from '@material-ui/core/TableRow';
-import TableSortLabel from '@material-ui/core/TableSortLabel';
-import Paper from '@material-ui/core/Paper';
-import MoreIcon from '@material-ui/icons/MoreVert';
-import FilterListIcon from '@material-ui/icons/FilterList';
-import SubjectIcon from '@material-ui/icons/Subject';
-import SearchIcon from '@material-ui/icons/Search';
-import TextField from '@material-ui/core/TextField';
-import Grid from '@material-ui/core/Grid';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Select from '@material-ui/core/Select';
-import Button from '@material-ui/core/Button';
-import Link from '@material-ui/core/Link';
-import Typography from '@material-ui/core/Typography';
-import Snackbar from '@material-ui/core/Snackbar';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import { Radio } from '@material-ui/core';
-import Checkbox from '@material-ui/core/Checkbox';
-
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Theme } from '@mui/material/styles';
+import createStyles from '@mui/styles/createStyles';
+import makeStyles from '@mui/styles/makeStyles';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Paper from '@mui/material/Paper';
+import MoreIcon from '@mui/icons-material/MoreVert';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import SubjectIcon from '@mui/icons-material/Subject';
+import SearchIcon from '@mui/icons-material/Search';
+import TextField from '@mui/material/TextField';
+import Grid from '@mui/material/Grid';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Select from '@mui/material/Select';
+import Button from '@mui/material/Button';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import { Radio } from '@mui/material';
+import Checkbox from '@mui/material/Checkbox';
 import { filterData } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
 
 import './ListView.css';
 import { getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
+import { getGenericFieldsLocalizedValue } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 
 import useInit from './hooks';
@@ -60,6 +62,9 @@ interface ListViewProps extends PConnProps {
   showDynamicFields?: boolean;
   readonlyContextList?: any;
   value: any;
+  viewName?: string;
+  showRecords?: boolean;
+  displayAs?: string;
 }
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
@@ -86,9 +91,12 @@ export default function ListView(props: ListViewProps) {
     parameters,
     compositeKeys,
     showDynamicFields,
+    viewName,
     readonlyContextList: selectedValues,
-    value
+    value,
+    displayAs
   } = props;
+  let { showRecords } = props;
   const ref = useRef({}).current;
   const cosmosTableRef = useRef();
   // List component context
@@ -96,6 +104,7 @@ export default function ListView(props: ListViewProps) {
   const { meta } = listContext;
   const xRayApis = PCore.getDebugger().getXRayRuntime();
   const xRayUid = xRayApis.startXRay();
+  const { current: uniqueId } = useRef(crypto.randomUUID());
 
   useInit({
     ...props,
@@ -106,8 +115,9 @@ export default function ListView(props: ListViewProps) {
     cosmosTableRef
   });
 
+  useClearSelectionsAndUpdateTable({ getPConnect, uniqueId, viewName });
+
   const thePConn = getPConnect();
-  // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
   const componentConfig = thePConn.getComponentConfig();
   const resolvedConfigProps: any = thePConn.getConfigProps() as ListViewProps;
 
@@ -197,6 +207,37 @@ export default function ListView(props: ListViewProps) {
 
   const classes = useStyles();
 
+  // Hook to clear the selections and update table in AdvancedSearch template when switching between search views
+  function useClearSelectionsAndUpdateTable({ getPConnect, uniqueId, viewName }) {
+    const clearSelectionsAndRefreshList = useCallback(
+      ({ viewName: name, clearSelections }) => {
+        if (name === viewName) {
+          const { selectionMode } = getPConnect().getRawConfigProps();
+          if (!selectionMode) {
+            return;
+          }
+          if (clearSelections) {
+            if (selectionMode === 'single') {
+              getPConnect().getListActions().setSelectedRows({});
+            } else {
+              getPConnect().getListActions().clearSelectedRows();
+            }
+          }
+        }
+      },
+      [getPConnect, viewName]
+    );
+
+    useEffect(() => {
+      const identifier = `clear-and-update-advanced-search-selections-${uniqueId}`;
+      PCore.getPubSubUtils().subscribe('update-advanced-search-selections', clearSelectionsAndRefreshList, identifier);
+
+      return () => {
+        PCore.getPubSubUtils().unsubscribe('update-advanced-search-selections', identifier);
+      };
+    }, [uniqueId, clearSelectionsAndRefreshList]);
+  }
+
   const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof any) => {
     const isAsc = orderBy === property && order === 'asc';
     setOrder(isAsc ? 'desc' : 'asc');
@@ -220,11 +261,12 @@ export default function ListView(props: ListViewProps) {
 
   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 getComparator<T, Key extends keyof T>(theOrder: Order, orderedBy: Key): Comparator<T> {
+    return theOrder === 'desc' ? (a: T, b: T) => descendingComparator(a, b, orderedBy) : (a: T, b: T) => -descendingComparator(a, b, orderedBy);
   }
 
   function stableSort<T>(array: T[], comparator: (a: T, b: T) => number) {
@@ -257,18 +299,24 @@ export default function ListView(props: ListViewProps) {
         theField = theField.substring(1);
       }
       const colIndex = fields.findIndex(ele => ele.name === theField);
-      const displayAsLink = field.config.displayAsLink;
+      // const displayAsLink = field.config.displayAsLink;
+      const { additionalDetails = {} } = field.config;
+      let shouldDisplayAsSemanticLink = additionalDetails.type === 'DISPLAY_LINK';
+      // TODO: This "if" check has been added for backward compatibility, to be removed once the users are notified about the changes in view metadata of US-517164
+      if (!shouldDisplayAsSemanticLink) {
+        shouldDisplayAsSemanticLink = 'displayAsLink' in field.config && field.config.displayAsLink;
+      }
       const headerRow: any = {};
       headerRow.id = fields[index].id;
       headerRow.type = field.type;
-      headerRow.displayAsLink = displayAsLink;
+      headerRow.displayAsLink = shouldDisplayAsSemanticLink;
       headerRow.numeric = field.type === 'Decimal' || field.type === 'Integer' || field.type === 'Percentage' || field.type === 'Currency' || false;
       headerRow.disablePadding = false;
       headerRow.label = fields[index].label;
       if (colIndex > -1) {
         headerRow.classID = fields[colIndex].classID;
       }
-      if (displayAsLink) {
+      if (shouldDisplayAsSemanticLink) {
         headerRow.isAssignmentLink = AssignDashObjects.includes(headerRow.classID);
         if (field.config.value?.startsWith('@CA')) {
           headerRow.isAssociation = true;
@@ -304,32 +352,43 @@ export default function ListView(props: ListViewProps) {
 
   // Will be triggered when EVENT_DASHBOARD_FILTER_CHANGE fires
   function processFilterChange(data) {
-    const { filterId, filterExpression } = data;
+    let filterId;
+    let filterExpression;
+    let isDateRange;
+    let field;
     let dashboardFilterPayload: any = {
       query: {
         filter: {},
         select: []
       }
     };
-
-    filters.current[filterId] = filterExpression;
-    let isDateRange = data.filterExpression?.AND;
-    // Will be AND by default but making it dynamic in case we support dynamic relational ops in future
-    const relationalOp = 'AND';
-
-    let field = getFieldFromFilter(filterExpression, isDateRange);
-    selectParam = [];
-    // Constructing the select parameters list (will be sent in dashboardFilterPayload)
-    columnList.current.forEach(col => {
-      selectParam.push({
-        field: col
+    if (displayAs === 'advancedSearch') {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      Object.entries(data).reduce((acc, [item, value]) => {
+        const { filterId, filterExpression } = value as any;
+        filters.current[filterId] = filterExpression;
+        return acc; // Ensure the accumulator is returned
+      }, {});
+    } else {
+      ({ filterId, filterExpression } = data);
+      filters.current[filterId] = filterExpression;
+      isDateRange = data.filterExpression?.AND;
+      field = getFieldFromFilter(filterExpression, isDateRange);
+      selectParam = [];
+      // Constructing the select parameters list (will be sent in dashboardFilterPayload)
+      columnList.current.forEach(col => {
+        selectParam.push({
+          field: col
+        });
       });
-    });
 
-    // Checking if the triggered filter is applicable for this list
-    if (data.filterExpression !== null && !(columnList.current?.length && columnList.current?.includes(field))) {
-      return;
+      // Checking if the triggered filter is applicable for this list
+      if (data.filterExpression !== null && !(columnList.current?.length && columnList.current?.includes(field))) {
+        return;
+      }
     }
+    // Will be AND by default but making it dynamic in case we support dynamic relational ops in future
+    const relationalOp = 'AND';
     // This is a flag which will be used to reset dashboardFilterPayload in case we don't find any valid filters
     let validFilter = false;
 
@@ -375,7 +434,7 @@ export default function ListView(props: ListViewProps) {
       } else {
         dashboardFilterPayload.query.filter.filterConditions = {
           ...dashboardFilterPayload.query.filter.filterConditions,
-          [`T${index++}`]: { ...filter.condition, ignoreCase: true }
+          [`T${index++}`]: { ...filter.condition, ...(filter.condition.comparator === 'CONTAINS' ? { ignoreCase: true } : {}) }
         };
 
         if (dashboardFilterPayload.query.filter.logic) {
@@ -403,6 +462,9 @@ export default function ListView(props: ListViewProps) {
   }
 
   function fetchAllData(fields): any {
+    if (displayAs === 'advancedSearch' && !showRecords) {
+      return Promise.resolve({ data: null });
+    }
     let query: any = null;
     if (payload) {
       query = payload.query;
@@ -553,8 +615,36 @@ export default function ListView(props: ListViewProps) {
     };
   }
 
+  function prepareFilters(data) {
+    return Object.entries(data.payload).reduce((acc, [field, value]) => {
+      if (value) {
+        let comparator = 'EQ';
+        const filterRecord = listContext.meta.fieldDefs.filter(item => item.id === field);
+        if (filterRecord?.[0]?.meta.type === 'TextInput') {
+          comparator = 'CONTAINS';
+        }
+        acc[field] = {
+          filterExpression: {
+            condition: {
+              lhs: {
+                field
+              },
+              comparator,
+              rhs: {
+                value
+              }
+            }
+          },
+          filterId: field
+        };
+      }
+      return acc;
+    }, {});
+  }
+
   useEffect(() => {
     if (listContext.meta) {
+      const identifier = `promoted-filters-queryable-${uniqueId}`;
       fetchDataFromServer();
       setTimeout(() => {
         PCore.getPubSubUtils().subscribe(
@@ -576,6 +666,15 @@ export default function ListView(props: ListViewProps) {
           false,
           getPConnect().getContextName()
         );
+        PCore.getPubSubUtils().subscribe(
+          PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS,
+          data => {
+            showRecords = data.showRecords;
+            const filterData = prepareFilters(data);
+            processFilterChange(filterData);
+          },
+          identifier
+        );
       }, 0);
 
       return function cleanupSubscriptions() {
@@ -589,6 +688,7 @@ export default function ListView(props: ListViewProps) {
           `dashboard-component-${'id'}`,
           getPConnect().getContextName()
         );
+        PCore.getPubSubUtils().unsubscribe(PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS, identifier);
       };
     }
   }, [listContext]);
@@ -640,7 +740,6 @@ export default function ListView(props: ListViewProps) {
 
     thePConn
       .getActionsApi()
-      // @ts-ignore
       .openAssignment(pzInsKey, pxRefObjectClass, options)
       .then(() => {
         // console.log("openAssignment successful");
@@ -670,7 +769,7 @@ export default function ListView(props: ListViewProps) {
     }
   }
 
-  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+  function handleSnackbarClose(event: React.SyntheticEvent<any> | Event, reason?: string) {
     if (reason === 'clickaway') {
       return;
     }
@@ -873,7 +972,6 @@ export default function ListView(props: ListViewProps) {
         pzInsKey = row[`${associationCategory}:pzInsKey`];
       }
       if (column.isAssignmentLink) {
-        // @ts-ignore
         thePConn.getActionsApi().openAssignment(pzInsKey, pxObjClass, {
           containerName: 'primary',
           channelName: ''
@@ -1032,33 +1130,35 @@ export default function ListView(props: ListViewProps) {
                     </TableRow>
                   </TableHead>
                   <TableBody>
-                    {stableSort(arRows, getComparator(order, orderBy))
-                      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                      .map(row => {
-                        return (
-                          <TableRow key={row.pxRefObjectInsName || row.pyID}>
-                            {arColumns.map(column => {
-                              const value = row[column.id];
-                              return (
-                                <TableCell key={column.id} align={column.align} className={classes.cell}>
-                                  {_showButton(column.id, row) || column.displayAsLink ? (
-                                    <Link
-                                      component='button'
-                                      onClick={() => {
-                                        _listViewClick(row, column);
-                                      }}
-                                    >
-                                      {column.format && typeof value === 'number' ? column.format(value) : value}
-                                    </Link>
-                                  ) : (
-                                    <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
-                                  )}
-                                </TableCell>
-                              );
-                            })}
-                          </TableRow>
-                        );
-                      })}
+                    {arRows &&
+                      stableSort(arRows, getComparator(order, orderBy))
+                        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                        .map(row => {
+                          return (
+                            <TableRow key={row.pxRefObjectInsName || row.pyID}>
+                              {arColumns.map(column => {
+                                const value = row[column.id];
+                                return (
+                                  <TableCell key={column.id} align={column.align} className={classes.cell}>
+                                    {_showButton(column.id, row) || column.displayAsLink ? (
+                                      <Link
+                                        component='button'
+                                        onClick={() => {
+                                          _listViewClick(row, column);
+                                        }}
+                                        underline='hover'
+                                      >
+                                        {column.format && typeof value === 'number' ? column.format(value) : value}
+                                      </Link>
+                                    ) : (
+                                      <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
+                                    )}
+                                  </TableCell>
+                                );
+                              })}
+                            </TableRow>
+                          );
+                        })}
                   </TableBody>
                 </Table>
               </TableContainer>
@@ -1127,7 +1227,9 @@ export default function ListView(props: ListViewProps) {
                         })}
                   </TableBody>
                 </Table>
-                {arRows && arRows.length === 0 && <div className='no-records'>No records found.</div>}
+                {(!arRows || arRows.length === 0) && (
+                  <div className='no-records'>{getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}</div>
+                )}
               </TableContainer>
             )}
           </>
@@ -1158,7 +1260,7 @@ export default function ListView(props: ListViewProps) {
         <DialogContent>
           {containsDateOrTime ? (
             <>
-              <Select value={displayDialogDateFilter} onChange={_dialogDateFilter} fullWidth>
+              <Select variant='standard' value={displayDialogDateFilter} onChange={_dialogDateFilter} fullWidth>
                 <MenuItem value='notequal'>is not equal to</MenuItem>
                 <MenuItem value='after'>after</MenuItem>
                 <MenuItem value='before'>before</MenuItem>
@@ -1167,6 +1269,7 @@ export default function ListView(props: ListViewProps) {
               </Select>
               {filterType === 'Date' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -1178,6 +1281,7 @@ export default function ListView(props: ListViewProps) {
               )}
               {filterType === 'DateTime' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -1189,6 +1293,7 @@ export default function ListView(props: ListViewProps) {
               )}
               {filterType === 'Time' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -1201,12 +1306,13 @@ export default function ListView(props: ListViewProps) {
             </>
           ) : (
             <>
-              <Select fullWidth onChange={_dialogContainsFilter} value={displayDialogContainsFilter}>
+              <Select variant='standard' fullWidth onChange={_dialogContainsFilter} value={displayDialogContainsFilter}>
                 <MenuItem value='contains'>Contains</MenuItem>
                 <MenuItem value='equals'>Equals</MenuItem>
                 <MenuItem value='startswith'>Starts with</MenuItem>
               </Select>
               <TextField
+                variant='standard'
                 autoFocus
                 margin='dense'
                 id='containsFilter'

package/lib/template/ListView/utils.ts

@@ -13,14 +13,21 @@ export const formatConstants = {
 class DataApi {
   mappedPropertyToOriginalProperty: any;
   originalPropertyToMappedProperty: any;
-  constructor() {
+  showRecords: any;
+  constructor(showRecords = true) {
+    this.showRecords = showRecords;
     this.originalPropertyToMappedProperty = {};
     this.mappedPropertyToOriginalProperty = {};
+    this.setShowRecords = this.setShowRecords.bind(this);
     this.setPropertyMaps = this.setPropertyMaps.bind(this);
     this.getMappedProperty = this.getMappedProperty.bind(this);
     this.getOriginalProperty = this.getOriginalProperty.bind(this);
   }
 
+  setShowRecords(showRecords) {
+    this.showRecords = showRecords;
+  }
+
   setPropertyMaps(originalToMappedPropertyObj = {}, mappedToOriginalPropertyObj = {}) {
     this.originalPropertyToMappedProperty = {
       ...this.originalPropertyToMappedProperty,
@@ -202,7 +209,6 @@ export function getConfigEmbeddedFieldsMeta(configFields, classID) {
       if (value.includes('[')) {
         value = value.substring(0, value.indexOf('[')) + value.substring(value.indexOf(']') + 1);
       }
-      // @ts-ignore - Expected 3 arguments, but got 2.
       const meta: any = PCore.getMetadataUtils().getEmbeddedPropertyMetadata(value, classID);
       meta.fieldID = field;
       configEmbeddedFieldsMeta.push(meta);
@@ -537,6 +543,28 @@ function prepareExtraFields(metaFields, configFields, configFieldSet, reportColu
 
 const AssignDashObjects = ['Assign-Worklist', 'Assign-WorkBasket'];
 
+function isFLProperty(label) {
+  return label?.startsWith('@FL');
+}
+
+function getFieldLabel(fieldConfig) {
+  const { label, classID, caption } = fieldConfig;
+  let fieldLabel = (label ?? caption)?.substring(4);
+  const labelSplit = fieldLabel?.split('.');
+  const propertyName = labelSplit?.pop();
+  const fieldMetaData: any = PCore.getMetadataUtils().getPropertyMetadata(propertyName, classID) ?? {};
+  fieldLabel = fieldMetaData.label ?? fieldMetaData.caption ?? propertyName;
+
+  const definedOnClassID = fieldMetaData.definedOnClassID;
+  const localeValue = PCore.getLocaleUtils().getLocaleValue(
+    fieldLabel,
+    `${definedOnClassID ?? fieldMetaData.classID ?? classID}.${propertyName}`,
+    PCore.getLocaleUtils().FIELD_LABELS_BUNDLE_KEY,
+    null
+  );
+  return localeValue || fieldLabel;
+}
+
 function populateRenderingOptions(name, config, field) {
   const shouldDisplayAsSemanticLink = 'displayAsLink' in field.config && field.config.displayAsLink;
   if (shouldDisplayAsSemanticLink) {
@@ -551,6 +579,7 @@ function populateRenderingOptions(name, config, field) {
     config.cellRenderer = formatConstants.Integer;
   }
 }
+
 export function initializeColumns(fields: any[] = [], getMappedProperty: any = null) {
   return fields.map((field, originalColIndex) => {
     let name = field.config.value;
@@ -563,7 +592,9 @@ export function initializeColumns(fields: any[] = [], getMappedProperty: any = n
 
     let label = field.config.label || field.config.caption;
     const { show = true, displayAs } = field.config;
-    if (label.startsWith('@')) {
+    if (isFLProperty(label)) {
+      label = getFieldLabel(field.config);
+    } else if (label.startsWith('@')) {
       label = label.substring(3);
     }
 
@@ -651,10 +682,11 @@ export function updatePageFieldsConfig(configFields, parentClassID) {
 }
 
 export const readContextResponse = async (context, params) => {
-  const { getPConnect, apiContext, setListContext, children, showDynamicFields, referenceList, isDataObject } = params;
-  const { promisesResponseArray, apiContext: otherContext } = context;
+  const { getPConnect, apiContext, setListContext, children, showDynamicFields, referenceList, isDataObject, ref } = params;
+  const { promisesResponseArray, setShowRecords, apiContext: otherContext } = context;
   // eslint-disable-next-line sonarjs/no-unused-collection
   const listOfComponents: any[] = [];
+  ref.setShowRecords = setShowRecords;
   const {
     data: { fields: metaFields, classID, isQueryable }
   } = promisesResponseArray[0];
@@ -678,7 +710,7 @@ export const readContextResponse = async (context, params) => {
     const dataPageKeys = PCore.getDataTypeUtils().getDataPageKeys(dataViewName);
     dataPageKeys?.forEach(item => (item.isAlternateKeyStorage ? compositeKeys.push(item.linkedField) : compositeKeys.push(item.keyName)));
     if (compositeKeys.length) {
-      otherContext.setCompositeKeys(compositeKeys);
+      otherContext?.setCompositeKeys(compositeKeys);
     }
     if (otherContext) {
       otherContext.fetchRowActionDetails = null;

package/lib/template/NarrowWide/NarrowWideDetails/NarrowWideDetails.tsx

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import Grid, { GridSize } from '@material-ui/core/Grid';
+import Grid, { GridSize } from '@mui/material/Grid';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -26,7 +26,7 @@ export default function NarrowWideDetails(props: NarrowWideDetailsProps) {
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
-  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {

package/lib/template/OneColumn/OneColumn/OneColumn.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { Grid } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Grid } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface OneColumnProps extends PConnProps {

package/lib/template/PromotedFilters/PromotedFilters.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState, createElement } from 'react';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
@@ -87,7 +87,6 @@ export default function PromotedFilters(props: PromotedFilterProps) {
     };
     return getPConnect().getContainerManager().addTransientItem({
       id: viewName,
-      // @ts-ignore - Property 'coreHeaders' is missing in type '{ classID: string; }' but required in type '{ coreHeaders: any; }'.
       data: filtersWithClassID
     });
   }, []);

package/lib/template/SimpleTable/SimpleTable/SimpleTable.tsx

@@ -50,11 +50,9 @@ export default function SimpleTable(props: SimpleTableProps) {
 
   let { contextClass } = props;
   if (!contextClass) {
-    // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
     let listName = getPConnect().getComponentConfig().referenceList;
     listName = PCore.getAnnotationUtils().getPropertyName(listName);
     // was... contextClass = getPConnect().getFieldMetadata(listName)?.pageClass;
-    // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'.
     const theFieldMetadata = getPConnect().getFieldMetadata(listName);
     if (theFieldMetadata) {
       contextClass = theFieldMetadata.pageClass;