@pega/react-sdk-overrides 0.23.27 → 0.23.29

package/lib/designSystemExtension/Operator/Operator.tsx

@@ -19,6 +19,7 @@ interface OperatorProps extends PConnProps {
   updateDateTime: string;
   updateLabel: string;
   updateOperator: { userName: string; userId: string };
+  displayLabel?: any;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -36,18 +37,19 @@ export default function Operator(props: OperatorProps) {
   // const componentName = "Operator";
   const classes = useStyles();
 
-  const fieldLabel = props.label.toLowerCase();
+  const fieldLabel = props?.label?.toLowerCase();
+  const displayLabel = props?.displayLabel?.toLowerCase();
   let caseOpLabel = '---';
   let caseOpName = '---';
   let caseOpId = '';
   let caseTime = '';
 
-  if (fieldLabel === 'create operator') {
+  if (fieldLabel === 'create operator' || displayLabel === 'create operator') {
     caseOpLabel = props.createLabel;
     caseOpName = props.createOperator.userName;
     caseTime = props.createDateTime;
     caseOpId = props.createOperator.userId;
-  } else if (fieldLabel === 'update operator') {
+  } else if (fieldLabel === 'update operator' || displayLabel === 'update operator') {
     caseOpLabel = props.updateLabel;
     caseOpName = props.updateOperator.userName;
     caseTime = props.updateDateTime;

package/lib/infra/Assignment/Assignment.tsx

@@ -70,6 +70,20 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
     return arIndicies;
   }
 
+  function getStepsInfo(steps, formedSteps: any = []) {
+    steps.forEach(step => {
+      if (step.name) {
+        step.name = PCore.getLocaleUtils().getLocaleValue(step.name, undefined, localeReference);
+      }
+      if (step.steps) {
+        formedSteps = getStepsInfo(step.steps, formedSteps);
+      } else {
+        formedSteps.push(step);
+      }
+    });
+    return formedSteps;
+  }
+
   useEffect(() => {
     if (children) {
       const firstChild = Array.isArray(children) ? children[0] : children;
@@ -97,13 +111,13 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
           } else {
             setIsVertical(false);
           }
-          const steps = JSON.parse(JSON.stringify(oCaseInfo?.navigation?.steps));
-          steps.forEach(step => {
-            if (step.name) {
-              step.name = PCore.getLocaleUtils().getLocaleValue(step.name, undefined, localeReference);
-            }
-          });
-          setArNavigationSteps(steps);
+
+          if (oCaseInfo?.navigation?.steps) {
+            const steps = JSON.parse(JSON.stringify(oCaseInfo?.navigation?.steps));
+            const formedSteps = getStepsInfo(steps);
+            setArNavigationSteps(formedSteps);
+          }
+
           setArCurrentStepIndicies(findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0));
         }
       }

package/lib/infra/Containers/ModalViewContainer/CancelAlert/CancelAlert.tsx

@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import { Button, Grid, IconButton, Snackbar } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import './CancelAlert.css';
+
+interface CancelAlertProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on CancelAlert here
+  heading: string;
+  content: string;
+  itemKey: string;
+  hideDelete: boolean;
+  isDataObject: boolean;
+  skipReleaseLockRequest: any;
+  dismiss: Function;
+}
+
+export default function CancelAlert(props: CancelAlertProps) {
+  const { heading, content, getPConnect, itemKey: containerItemID, hideDelete, isDataObject, skipReleaseLockRequest, dismiss } = props;
+  const actionsAPI = getPConnect().getActionsApi();
+  const containerManagerAPI = getPConnect().getContainerManager();
+  const isLocalAction = getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION);
+  const isBulkAction = getPConnect()?.options?.isBulkAction;
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const broadCastUtils: any = PCore.getCoexistenceManager().getBroadcastUtils();
+  const isReverseCoexistence = broadCastUtils.isReverseCoexistenceCaseLoaded();
+  const localeCategory = 'ModalContainer';
+  const btnIds = {
+    SAVE_AND_CLOSE: 'saveAndClose',
+    CONTINUE_WORKING: 'continueWorking',
+    DELETE: 'delete'
+  };
+
+  const [buttonsState, setButtonsState] = useState({
+    [btnIds.SAVE_AND_CLOSE]: false,
+    [btnIds.DELETE]: false
+  });
+
+  const [showSnackbar, setShowSnackbar] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState('');
+
+  function disableButton(id) {
+    setButtonsState(prevState => ({
+      ...prevState,
+      [id]: true
+    }));
+  }
+
+  function enableButton(id) {
+    setButtonsState(prevState => ({
+      ...prevState,
+      [id]: false
+    }));
+  }
+
+  function cancelHandler() {
+    if (isReverseCoexistence) {
+      dismiss(true);
+      // @ts-ignore - An argument for 'payload' was not provided.
+      PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.REVERSE_COEXISTENCE_EVENTS.HANDLE_DISCARD);
+    } else if (!isDataObject && !isLocalAction && !isBulkAction) {
+      disableButton(btnIds.DELETE);
+      actionsAPI
+        .deleteCaseInCreateStage(containerItemID, hideDelete)
+        .then(() => {
+          // @ts-ignore - An argument for 'payload' was not provided.
+          PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
+        })
+        .catch(() => {
+          setSnackbarMessage(localizedVal('Delete failed.', localeCategory));
+          setShowSnackbar(true);
+        })
+        .finally(() => {
+          enableButton(btnIds.DELETE);
+          dismiss(true);
+        });
+    } else if (isLocalAction) {
+      dismiss(true);
+      actionsAPI.cancelAssignment(containerItemID);
+    } else if (isBulkAction) {
+      dismiss(true);
+      actionsAPI.cancelBulkAction(containerItemID);
+    } else {
+      dismiss(true);
+      containerManagerAPI.removeContainerItem({ containerItemID, skipReleaseLockRequest });
+    }
+  }
+
+  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setShowSnackbar(false);
+  }
+
+  const leftButton = (
+    <Button
+      name={btnIds.CONTINUE_WORKING}
+      variant='contained'
+      color='secondary'
+      onClick={() => {
+        dismiss();
+        if (isReverseCoexistence) {
+          broadCastUtils.setCallBackFunction(null);
+          broadCastUtils.setIsDirtyDialogActive(false);
+        }
+      }}
+    >
+      {localizedVal('Go back', localeCategory)}
+    </Button>
+  );
+
+  const rightButton = (
+    <Button name={btnIds.DELETE} variant='contained' color='primary' disabled={buttonsState[btnIds.DELETE]} onClick={cancelHandler}>
+      {localizedVal('Discard', localeCategory)}
+    </Button>
+  );
+
+  return (
+    <>
+      <div className='cancel-alert-background'>
+        <div className='cancel-alert-top'>
+          <h3>{localizedVal(heading, localeCategory)}</h3>
+          <div>
+            <p>{localizedVal(content, localeCategory)}</p>
+          </div>
+          <div className='action-controls'>
+            <Grid container spacing={4} justifyContent='space-between'>
+              <Grid item>{leftButton}</Grid>
+              <Grid item>{rightButton}</Grid>
+            </Grid>
+          </div>
+        </div>
+      </div>
+      <Snackbar
+        open={showSnackbar}
+        autoHideDuration={3000}
+        onClose={handleSnackbarClose}
+        message={snackbarMessage}
+        action={
+          <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
+            <CloseIcon fontSize='small' />
+          </IconButton>
+        }
+      />
+    </>
+  );
+}

package/lib/infra/Containers/ModalViewContainer/ListViewActionButtons/ListViewActionButtons.tsx

@@ -34,7 +34,6 @@ function ListViewActionButtons(props: ListViewActionButtonsProps) {
         variant='contained'
         color='secondary'
         onClick={() => {
-          closeActionsDialog();
           getPConnect().getActionsApi().cancelDataObject(context);
         }}
       >

package/lib/infra/Containers/ModalViewContainer/ModalViewContainer.tsx

@@ -1,17 +1,16 @@
 import { createElement, useEffect, useRef, useState } from 'react';
-import isEqual from 'fast-deep-equal';
 import Dialog from '@material-ui/core/Dialog';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import { makeStyles } from '@material-ui/core/styles';
 import { MuiPickersUtilsProvider } from '@material-ui/pickers';
 import DayjsUtils from '@date-io/dayjs';
+import difference from 'lodash.difference';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 // Need to get correct implementation from component map for Assignment and CancelAlert
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { getBanners } from '@pega/react-sdk-components/lib/components/helpers/case-utils';
-import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface ModalViewContainerProps extends PConnProps {
@@ -21,31 +20,67 @@ interface ModalViewContainerProps extends PConnProps {
   pageMessages?: string[];
 }
 
+function isOpenModalAction(prevModalCollection, currentModalList) {
+  return prevModalCollection && currentModalList ? Object.keys(prevModalCollection).length < currentModalList.length : false;
+}
+
+function isUpdateModalAction(prevModalCollection, currentModalList) {
+  return prevModalCollection && currentModalList ? Object.keys(prevModalCollection).length === currentModalList.length : false;
+}
+
+function isCloseModalAction(prevModalCollection, currentModalList) {
+  return prevModalCollection && currentModalList ? Object.keys(prevModalCollection).length > currentModalList.length : false;
+}
+
 function buildName(pConnect, name = '') {
   const context = pConnect.getContextName();
   return `${context}/${name}`;
 }
 
-function getKeyAndLatestItem(routinginfo, pConn) {
+function getKeyAndLatestItem(routinginfo, pConn, options) {
   const containerName = pConn.getContainerName();
+  const { acTertiary = false } = options || {};
   if (PCore.getContainerUtils().hasContainerItems(buildName(pConn, containerName))) {
     const { accessedOrder, items } = routinginfo;
-    const key = accessedOrder[accessedOrder.length - 1];
+    let key;
+    // eslint-disable-next-line no-plusplus
+    for (let i = accessedOrder.length - 1; i >= 0; i--) {
+      const tempkey = accessedOrder[i];
+      if ((acTertiary && items[tempkey].acTertiary) || (!acTertiary && !items[tempkey].acTertiary)) {
+        key = tempkey;
+        break;
+      }
+    }
     const latestItem = items[key];
     return { key, latestItem };
   }
   return {};
 }
 
-function getConfigObject(item, pConnect) {
+function getConfigObject(item, pConnect, isReverseCoexistence = false) {
+  let config;
+  if (isReverseCoexistence) {
+    config = {
+      options: {
+        pageReference: pConnect?.getPageReference(),
+        hasForm: true,
+        containerName: pConnect?.getContainerName() || PCore.getConstants().MODAL
+      }
+    };
+    return PCore.createPConnect(config);
+  }
   if (item) {
-    const { context, view } = item;
-    const config = {
+    const { context, view, isBulkAction } = item;
+    const target = PCore.getContainerUtils().getTargetFromContainerItemID(context);
+    config = {
       meta: view,
       options: {
         context,
         pageReference: view.config.context || pConnect.getPageReference(),
-        hasForm: true
+        hasForm: true,
+        ...(isBulkAction && { isBulkAction }),
+        containerName: pConnect?.getContainerName() || PCore.getConstants().MODAL,
+        target
       }
     };
     return PCore.createPConnect(config);
@@ -59,20 +94,12 @@ const useStyles = makeStyles(theme => ({
     marginRight: theme.spacing(2),
     marginTop: theme.spacing(2),
     marginBottom: theme.spacing(0)
-    // paddingLeft: theme.spacing(0),
-    // paddingRight: theme.spacing(0),
-    // paddingTop: theme.spacing(0),
-    // paddingBottom: theme.spacing(0),
   },
   dlgContent: {
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(2),
     marginTop: theme.spacing(0),
     marginBottom: theme.spacing(2)
-    // paddingLeft: theme.spacing(0),
-    // paddingRight: theme.spacing(0),
-    // paddingTop: theme.spacing(0),
-    // paddingBottom: theme.spacing(0),
   }
 }));
 
@@ -84,70 +111,79 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
 
   const classes = useStyles();
 
+  const modalCollection = useRef({});
   const routingInfoRef = useRef({});
-  const { getPConnect, routingInfo = null, loadingInfo = '', pageMessages = [] } = props;
+  const { getPConnect, routingInfo = null, pageMessages = [] } = props;
   const pConn = getPConnect();
+  const { acTertiary } = pConn.getConfigProps() as any;
   const {
     CONTAINER_TYPE: { MULTIPLE },
     PUB_SUB_EVENTS: { EVENT_SHOW_CANCEL_ALERT }
   } = PCore.getConstants();
-  const { subscribe } = PCore.getPubSubUtils();
+  const { subscribe, unsubscribe } = PCore.getPubSubUtils();
   const [bShowModal, setShowModal] = useState(false);
-  const [bSubscribed, setSubscribed] = useState(false);
   const [bShowCancelAlert, setShowCancelAlert] = useState(false);
-  const [oCaseInfo, setOCaseInfo] = useState({});
   const [createdView, setCreatedView] = useState<any>(null);
   const [title, setTitle] = useState('');
   const [arNewChildrenAsReact, setArNewChildrenAsReact] = useState<any[]>([]);
   const [itemKey, setItemKey] = useState('');
-  const [cancelPConn, setCancelPConn] = useState(null);
+  const [cancelAlertProps, setCancelAlertProps] = useState({});
   const [isMultiRecordData, setMultiRecordData] = useState(false);
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'Data Object';
 
-  const actionsDialog = useRef(false);
+  const ERROR_WHILE_RENDERING = 'ERROR_WHILE_RENDERING';
 
   function showAlert(payload) {
-    const { latestItem } = getKeyAndLatestItem(routingInfoRef.current, pConn);
-    const { isModalAction } = payload;
+    const { latestItem } = getKeyAndLatestItem(routingInfoRef.current, pConn, { acTertiary });
+    const isReverseCoexistence = (PCore.getCoexistenceManager().getBroadcastUtils() as any).isReverseCoexistenceCaseLoaded();
+    const { isModalAction, hideDelete, isDataObject, skipReleaseLockRequest } = payload;
 
     /*
       If we are in create stage full page mode, created a new case and trying to click on cancel button
       it will show two alert dialogs which is not expected. Hence isModalAction flag to avoid that.
     */
-    if (latestItem && isModalAction && !actionsDialog.current) {
-      const configObject = getConfigObject(latestItem, pConn);
-      setCancelPConn(configObject?.getPConnect() as any);
+    if (latestItem && isModalAction) {
+      const configObject = getConfigObject(latestItem, pConn, isReverseCoexistence);
+      const contextName = configObject?.getPConnect().getContextName();
+      setCancelAlertProps({
+        heading: 'Discard unsaved changes?',
+        content: 'You have unsaved changes. You can discard them or go back to keep working.',
+        getPConnect: configObject?.getPConnect,
+        itemKey: contextName,
+        hideDelete,
+        isDataObject,
+        skipReleaseLockRequest
+      });
       setShowCancelAlert(true);
     }
   }
 
-  function compareCaseInfoIsDifferent(oCurrentCaseInfo: Object): boolean {
-    let bRet = false;
-
-    // fast-deep-equal version
-    if (isEqual !== undefined) {
-      bRet = !isEqual(oCaseInfo, oCurrentCaseInfo);
-    } else {
-      const sCurrentCaseInfo = JSON.stringify(oCurrentCaseInfo);
-      const sOldCaseInfo = JSON.stringify(oCaseInfo);
-      // stringify compare version
-      if (sCurrentCaseInfo !== sOldCaseInfo) {
-        bRet = true;
-      }
-    }
+  function handleModalOpen(key) {
+    modalCollection.current = {
+      ...modalCollection.current,
+      [key]: {}
+    };
+  }
 
-    // if different, save off new case info
-    if (bRet) {
-      setOCaseInfo(JSON.parse(JSON.stringify(oCurrentCaseInfo)));
-    }
+  function handleModalClose(accessedOrder) {
+    const tempModalCollection = modalCollection.current;
+    const [closedModalKey] = difference(Object.keys(tempModalCollection), accessedOrder);
 
-    return bRet;
+    if (closedModalKey && tempModalCollection[closedModalKey]) {
+      const modifiedModalCollection = { ...tempModalCollection };
+      delete modifiedModalCollection[closedModalKey];
+      modalCollection.current = modifiedModalCollection;
+      setShowModal(false);
+    }
   }
 
-  const updateAlertState = modalFlag => {
+  const dismissCancelAlert = dismissAllModals => {
     setShowCancelAlert(false);
-    setShowModal(modalFlag);
+
+    if (dismissAllModals) {
+      setShowModal(false);
+    }
   };
 
   function getModalHeading(dataObjectAction) {
@@ -170,151 +206,104 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
   }, [MULTIPLE, pConn]);
 
   useEffect(() => {
-    // Update routingInfoRef.current whenever routingInfo changes
+    // Persisting routing information between the renders in showAlert
     routingInfoRef.current = routingInfo;
-    if (routingInfoRef.current && !loadingInfo) {
-      const currentOrder = routingInfo.accessedOrder;
+  });
 
-      if (undefined === currentOrder) {
-        return;
-      }
+  useEffect(() => {
+    subscribe(EVENT_SHOW_CANCEL_ALERT, showAlert, EVENT_SHOW_CANCEL_ALERT /* Unique string for subscription */);
+    subscribe(
+      ERROR_WHILE_RENDERING,
+      error => {
+        // setError(true);
+        // eslint-disable-next-line no-console
+        console.error(error);
+      },
+      `${ERROR_WHILE_RENDERING}-mc-${getPConnect().getContextName()}`,
+      false,
+      getPConnect().getContextName()
+    );
+
+    // Unsubscribe on component unmount
+    return () => {
+      unsubscribe(EVENT_SHOW_CANCEL_ALERT, EVENT_SHOW_CANCEL_ALERT /* Should be same unique string passed during subscription */);
+    };
+  });
 
-      const currentItems = routingInfo.items;
-
-      const { key, latestItem } = getKeyAndLatestItem(routingInfoRef.current, pConn);
-      // console.log(`ModalViewContainer: key: ${key} latestItem: ${JSON.stringify(latestItem)}`);
-
-      if (currentOrder.length > 0) {
-        if (currentItems[key] && currentItems[key].view && !isEmptyObject(currentItems[key].view)) {
-          const currentItem = currentItems[key];
-          const rootView = currentItem.view;
-          const { context } = rootView.config;
-          const config: any = { meta: rootView };
-          config.options = {
-            context: currentItem.context,
-            hasForm: true,
-            pageReference: context || pConn.getPageReference()
-          };
-
-          if (!bSubscribed) {
-            setSubscribed(true);
-            subscribe(EVENT_SHOW_CANCEL_ALERT, showAlert, EVENT_SHOW_CANCEL_ALERT /* Unique string for subscription */);
-          }
-
-          const configObject = PCore.createPConnect(config);
-
-          // THIS is where the ViewContainer creates a View
-          //    The config has meta.config.type = "view"
-          const newComp = configObject.getPConnect();
-          // const newCompName = newComp.getComponentName();
-          // @ts-ignore - parameter “contextName” for getDataObject method should be optional
-          const caseInfo = newComp && newComp.getDataObject() && newComp.getDataObject().caseInfo ? newComp.getDataObject().caseInfo : null;
-
-          // console.log(`ModalViewContainer just created newComp: ${newCompName}`);
-
-          // The metadata for pyDetails changed such that the "template": "CaseView"
-          //  is no longer a child of the created View but is in the created View's
-          //  config. So, we DON'T want to replace this.pConn$ since the created
-          //  component is a View (and not a ViewContainer). We now look for the
-          //  "template" type directly in the created component (newComp) and NOT
-          //  as a child of the newly created component.
-          // console.log(`---> ModalViewContainer created new ${newCompName}`);
-
-          // Use the newly created component (View) info but DO NOT replace
-          //  this ModalViewContainer's pConn$, etc.
-          //  Note that we're now using the newly created View's PConnect in the
-          //  ViewContainer HTML template to guide what's rendered similar to what
-          //  the React return of React.Fragment does
-
-          // right now need to check caseInfo for changes, to trigger redraw, not getting
-          // changes from angularPconnect except for first draw
-          if (newComp && caseInfo && compareCaseInfoIsDifferent(caseInfo)) {
-            setCreatedView({ configObject, latestItem });
-
-            const { actionName } = latestItem;
-            const theNewCaseInfo = newComp.getCaseInfo();
-            const caseName = theNewCaseInfo.getName();
-            const ID = theNewCaseInfo.getBusinessID() || theNewCaseInfo.getID();
-            const caseTypeName = theNewCaseInfo.getCaseTypeName();
-            const isDataObject = routingInfo.items[latestItem.context].resourceType === PCore.getConstants().RESOURCE_TYPES.DATA;
-            const dataObjectAction = routingInfo.items[latestItem.context].resourceStatus;
-            const isMultiRecord = routingInfo.items[latestItem.context].isMultiRecordData;
-            setMultiRecordData(isMultiRecord);
-            const headingValue =
-              isDataObject || isMultiRecord
-                ? getModalHeading(dataObjectAction)
-                : determineModalHeaderByAction(
-                    actionName,
-                    caseTypeName,
-                    ID,
-                    `${theNewCaseInfo?.getClassName()}!CASE!${theNewCaseInfo.getName()}`.toUpperCase()
-                  );
-
-            setTitle(headingValue);
-
-            let arChildrenAsReact: any[] = [];
-
-            if (newComp.getComponentName() === 'reference') {
-              // Reference component doesn't have children. It can build the View we want.
-              //  The Reference component getPConnect is in configObject
-
-              arChildrenAsReact.push(
-                createElement(createPConnectComponent(), {
-                  ...configObject,
-                  key: `${caseName}-${ID}`
-                })
-              );
-            } else {
-              // This is the 8.6 implementation. Leaving it in for reference for now.
-              // And create a similar array of the children as React components
-              //  passed to Assignment component when rendered
-              arChildrenAsReact = (newComp.getChildren() as []).map((child: any) => {
-                // Use Case Summary ID as the React element's key
-                const caseSummaryID = child.getPConnect().getCaseSummary().ID;
-                return createElement(createPConnectComponent(), {
-                  ...child,
-                  key: caseSummaryID
-                });
-              });
-            }
-
-            if (arChildrenAsReact.length > 0) setArNewChildrenAsReact(arChildrenAsReact);
-
-            setShowModal(true);
-
-            // save off itemKey to be used for finishAssignment, etc.
-            setItemKey(key);
-          }
-        }
-      } else {
-        if (bShowModal) {
-          setShowModal(false);
+  useEffect(() => {
+    if (routingInfo) {
+      const { accessedOrder, type } = routingInfo;
+      const { key, latestItem } = getKeyAndLatestItem(routingInfo, pConn, { acTertiary });
+
+      if (
+        latestItem &&
+        type === MULTIPLE &&
+        (isOpenModalAction(modalCollection.current, accessedOrder) || isUpdateModalAction(modalCollection.current, accessedOrder))
+      ) {
+        const { actionName } = latestItem;
+        // const { isDockable = false } = latestItem?.modalOptions || {};
+        const configObject: any = getConfigObject(latestItem, null, false);
+        const pConnect = configObject.getPConnect();
+        const caseInfo: any = pConnect.getCaseInfo();
+        const caseName = caseInfo.getName();
+        const caseTypeName = caseInfo.getCaseTypeName();
+        const ID = caseInfo.getBusinessID() || caseInfo.getID();
+        const isDataObject = routingInfo.items[latestItem.context].resourceType === PCore.getConstants().RESOURCE_TYPES.DATA;
+        const dataObjectAction = routingInfo.items[latestItem.context].resourceStatus;
+        const isMultiRecord = routingInfo.items[latestItem.context].isMultiRecordData;
+        const headingValue =
+          isDataObject || isMultiRecord
+            ? getModalHeading(dataObjectAction)
+            : determineModalHeaderByAction(actionName, caseTypeName, ID, `${caseInfo?.getClassName()}!CASE!${caseInfo.getName()}`.toUpperCase());
+
+        let arChildrenAsReact: any[] = [];
+
+        if (pConnect.getComponentName() === 'reference') {
+          // Reference component doesn't have children. It can build the View we want.
+          // The Reference component getPConnect is in configObject
+
+          arChildrenAsReact.push(
+            createElement(createPConnectComponent(), {
+              ...configObject,
+              key: `${caseName}-${ID}`
+            })
+          );
+        } else {
+          // This is the 8.6 implementation. Leaving it in for reference for now.
+          // And create a similar array of the children as React components
+          // passed to Assignment component when rendered
+          arChildrenAsReact = (pConnect.getChildren() as []).map((child: any) => {
+            // Use Case Summary ID as the React element's key
+            const caseSummaryID = child.getPConnect().getCaseSummary().ID;
+            return createElement(createPConnectComponent(), {
+              ...child,
+              key: caseSummaryID
+            });
+          });
         }
-        if (!isEmptyObject(oCaseInfo)) {
-          setOCaseInfo({});
+
+        if (arChildrenAsReact.length > 0) setArNewChildrenAsReact(arChildrenAsReact);
+        setMultiRecordData(isMultiRecord);
+        setTitle(headingValue);
+        setCreatedView({ configObject, latestItem });
+        setItemKey(key);
+        setShowModal(true);
+
+        // Update modal use case which happens when assignment in submitted in modal.
+        if (isUpdateModalAction(modalCollection.current, accessedOrder)) {
+          // handleModalUpdate(key);
+        } else if (isOpenModalAction(modalCollection.current, accessedOrder)) {
+          // New modal open scenario
+          handleModalOpen(key);
         }
+      } else if (isCloseModalAction(modalCollection.current, accessedOrder)) {
+        handleModalClose(accessedOrder);
       }
     }
   }, [routingInfo]);
 
-  // function placeholderModalClose() {
-  //   // Intentionally a no-op. Similar behavior in other SDKs.
-  //   //  Does NOT close the window. This forces the user to use
-  //   //  the cancel or submit button to close the modal (which, in turn, gets the right
-  //   //  Constellation code to run to clean up the containers, data, etc.)
-
-  //   // console.log(`ModalViewContainer: placeholderModalClose setting bShowModal to false`)    setShowModal(false);
-  // }
-
-  // if (bShowModal) {
-  //   console.log(`ModalViewContainer about to show modal with`);
-  //   console.log(`--> createdView: ${createdView} createdView.getPConnect: ${typeof createdView.getPConnect}`);
-  //   console.log(`--> itemKey: ${itemKey}`);
-  //   console.log(`--> arNewChildrenAsReact: ${JSON.stringify(arNewChildrenAsReact)}`);
-  // }
-
   function closeActionsDialog() {
-    actionsDialog.current = true;
+    // actionsDialog.current = true;
     setShowModal(false);
   }
 
@@ -341,6 +330,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
             </MuiPickersUtilsProvider>
           ) : null}
         </DialogContent>
+
         {isMultiRecordData && (
           <ListViewActionButtons
             getPConnect={createdView.configObject.getPConnect}
@@ -349,7 +339,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
           />
         )}
       </Dialog>
-      {bShowCancelAlert && <CancelAlert pConn={cancelPConn} showAlert={bShowCancelAlert} updateAlertState={updateAlertState} />}
+      {bShowCancelAlert && <CancelAlert {...cancelAlertProps} dismiss={dismissCancelAlert} />}
     </>
   );
 }

package/lib/infra/NavBar/NavBar.tsx

@@ -116,6 +116,8 @@ export default function NavBar(props: NavBarProps) {
   const [bShowCaseTypes, setBShowCaseTypes] = useState(true);
   const [bShowOperatorButtons, setBShowOperatorButtons] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
+  const localeUtils = PCore.getLocaleUtils();
+  const localeReference = pConn.getValue('.pyLocaleReference');
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'AppShell';
@@ -231,7 +233,7 @@ export default function NavBar(props: NavBarProps) {
               <ListItemIcon>
                 <WorkOutlineIcon fontSize='large' />
               </ListItemIcon>
-              <ListItemText primary={caseType.pyLabel} />
+              <ListItemText primary={localeUtils.getLocaleValue(caseType.pyLabel, '', localeReference)} />
             </ListItem>
           ))}
         </List>
@@ -240,7 +242,7 @@ export default function NavBar(props: NavBarProps) {
         {navPages.map(page => (
           <ListItem button onClick={() => navPanelButtonClick(page)} key={page.pyLabel}>
             <ListItemIcon>{iconMap[page.pxPageViewIcon]}</ListItemIcon>
-            <ListItemText primary={page.pyLabel} />
+            <ListItemText primary={localeUtils.getLocaleValue(page.pyLabel, '', localeReference)} />
           </ListItem>
         ))}
       </List>
@@ -278,7 +280,7 @@ export default function NavBar(props: NavBarProps) {
               <ListItemIcon>
                 <ArrowBackIcon fontSize='large' />
               </ListItemIcon>
-              <Typography variant='inherit'>{localizedVal('Logout', localeCategory)}</Typography>
+              <Typography variant='inherit'>{localizedVal('Log off', localeCategory)}</Typography>
             </MenuItem>
           </Menu>
         </>

package/lib/template/CaseSummary/CaseSummary.tsx

@@ -17,7 +17,8 @@ export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>)
   // const { status, showStatus } = theConfigProps;
   const status = theConfigProps.status;
   const showStatus = theConfigProps.showStatus;
-
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'ModalContainer';
   // from Constellation DX Components
   // get the primary and secondary fields with the raw data (which has the non-resolved property values)
   // const regionsRaw = getPConnect().getRawMetadata().children;
@@ -29,13 +30,54 @@ export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>)
   let arPrimaryFields: any[] = [];
   let arSecondaryFields: any[] = [];
 
+  /* eslint-disable @typescript-eslint/no-shadow */
+  function prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
+    const { config, children } = pConnectMeta;
+    const pConnect = getPConnect();
+
+    const caseSummaryComponentObject: any = {};
+
+    const { type } = pConnectMeta;
+    const createdComponent = pConnect.createComponent({
+      type,
+      children: children ? [...children] : [],
+      config: {
+        ...config
+      }
+    });
+
+    caseSummaryComponentObject.value = createdComponent;
+    return caseSummaryComponentObject;
+  }
+
+  function prepareCaseSummaryData(summaryFieldChildren) {
+    const convertChildrenToSummaryData = kid => {
+      return kid?.map((childItem, index) => {
+        const childMeta = childItem.getPConnect().meta;
+        const caseSummaryComponentObject = prepareComponentInCaseSummary(childMeta, childItem.getPConnect);
+        caseSummaryComponentObject.id = index + 1;
+        return caseSummaryComponentObject;
+      });
+    };
+    return summaryFieldChildren ? convertChildrenToSummaryData(summaryFieldChildren?.getChildren()) : undefined;
+  }
+
   for (const child of children as ReactElement[]) {
     const childPConn = (child as ReactElement).props.getPConnect();
     const childPConnData = childPConn.resolveConfigProps(childPConn.getRawMetadata());
     if (childPConnData.name.toLowerCase() === 'primary fields') {
       arPrimaryFields = childPConnData.children;
+      arPrimaryFields.forEach(field => {
+        if (field.config?.value && typeof field.config?.value === 'string') {
+          field.config.value = localizedVal(field.config.value, localeCategory);
+        }
+      });
     } else if (childPConnData.name.toLowerCase() === 'secondary fields') {
+      const secondarySummaryFields = prepareCaseSummaryData(childPConn);
       arSecondaryFields = childPConnData.children;
+      arSecondaryFields.forEach((field, index) => {
+        field.config.displayLabel = secondarySummaryFields[index]?.value?.props?.label;
+      });
     }
   }
 

package/lib/template/CaseView/CaseView.tsx

@@ -178,7 +178,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
     const actionsAPI = thePConn.getActionsApi();
     const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
 
-    openLocalAction(editAction.ID, { ...editAction });
+    openLocalAction(editAction.ID, { ...editAction, containerName: 'modal', type: 'express' });
   }
 
   function getActionButtonsHtml(): any {

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

@@ -141,7 +141,6 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   // Getting current context
   const context = getPConnect().getContextName();
   const resolvedList = getReferenceList(pConn);
-  const pageReference = `${pConn.getPageReference()}${resolvedList}`;
   pConn.setReferenceList(resolvedList);
   const menuIconOverride$ = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
 
@@ -288,10 +287,8 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
       pConn
         .getActionsApi()
         .openEmbeddedDataModal(defaultView, pConn, referenceListStr, referenceList.length, PCore.getConstants().RESOURCE_STATUS.CREATE);
-    } else if (PCore.getPCoreVersion()?.includes('8.7')) {
-      pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
     } else {
-      pConn.getListActions().insert({ classID: contextClass }, referenceList.length, ''); // 3rd arg null until typedef marked correctly as optional
+      pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
     }
   };
 
@@ -312,11 +309,11 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
 
   const deleteRecord = () => {
     setEditAnchorEl(null);
-    if (PCore.getPCoreVersion()?.includes('8.7')) {
-      pConn.getListActions().deleteEntry(selectedRowIndex.current, pageReference);
-    } else {
-      pConn.getListActions().deleteEntry(selectedRowIndex.current, ''); // 2nd arg empty string until typedef marked correctly as optional
-    }
+    pConn.getListActions().deleteEntry(selectedRowIndex.current);
+  };
+
+  const deleteRecordFromInlineEditable = (index: number) => {
+    pConn.getListActions().deleteEntry(index);
   };
 
   function buildElementsForTable() {
@@ -616,7 +613,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
                           className='psdk-utility-button'
                           id='delete-button'
                           aria-label='Delete Cell'
-                          onClick={() => deleteRecord()}
+                          onClick={() => deleteRecordFromInlineEditable(index)}
                         >
                           <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$} />
                         </button>
@@ -632,7 +629,8 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
                 .slice(0)
                 .map((row, index) => {
                   return (
-                    <TableRow key={row[displayedColumns[0]]}>
+                    // eslint-disable-next-line react/no-array-index-key
+                    <TableRow key={index}>
                       {displayedColumns.map(colKey => {
                         return (
                           <TableCell key={colKey} className={classes.tableCell}>

package/lib/template/WideNarrow/WideNarrow/WideNarrow.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { PConnProps } from 'packages/react-sdk-components/src/types/PConnProps';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WideNarrow.css';
 
 interface WideNarrowProps extends PConnProps {

package/lib/template/WssNavBar/WssNavBar.tsx

@@ -54,6 +54,9 @@ export default function WssNavBar(props: WssNavBarProps) {
   const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
   const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
 
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'AppShell';
+
   const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorElNav(event.currentTarget);
   };
@@ -144,7 +147,7 @@ export default function WssNavBar(props: WssNavBarProps) {
                 onClose={handleCloseUserMenu}
               >
                 <MenuItem onClick={logout}>
-                  <Typography>Logout</Typography>
+                  <Typography>{localizedVal('Log off', localeCategory)}</Typography>
                 </MenuItem>
               </Menu>
             </Box>

package/lib/widget/Attachment/Attachment.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/jsx-boolean-value */
 /* eslint-disable react/no-array-index-key */
+/* eslint-disable no-nested-ternary */
 import { useState, useEffect, useCallback } from 'react';
 import { CircularProgress, IconButton, Menu, MenuItem, Button } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
@@ -39,7 +40,10 @@ export default function Attachment(props: AttachmentProps) {
   [required, disabled] = [required, disabled].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
   const pConn = getPConnect();
   const caseID = PCore.getStoreValue('.pyID', 'caseInfo.content', pConn.getContextName());
-
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'CosmosFields';
+  const uploadMultipleFilesLabel = localizedVal('file_upload_text_multiple', localeCategory);
+  const uploadSingleFileLabel = localizedVal('file_upload_text_one', localeCategory);
   let categoryName = '';
   if (value && value.pyCategoryName) {
     categoryName = value.pyCategoryName;
@@ -379,7 +383,13 @@ export default function Attachment(props: AttachmentProps) {
             onChange={onFileAdded}
           />
           <Button style={{ textTransform: 'none' }} variant='outlined' color='primary' component='span'>
-            {allowMultiple === 'true' ? 'Upload files' : 'Upload a file'}
+            {allowMultiple === 'true'
+              ? uploadMultipleFilesLabel === 'file_upload_text_multiple'
+                ? 'Choose files'
+                : uploadMultipleFilesLabel
+              : uploadSingleFileLabel === 'file_upload_text_one'
+                ? 'Choose a file'
+                : uploadSingleFileLabel}
           </Button>
         </label>
       </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-overrides",
-  "version": "0.23.27",
+  "version": "0.23.29",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [

package/lib/field/CancelAlert/CancelAlert.tsx

@@ -1,132 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Grid, IconButton, Snackbar } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
-
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-import './CancelAlert.css';
-
-interface CancelAlertProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on CancelAlert here
-  pConn: any;
-  updateAlertState: any;
-}
-
-export default function CancelAlert(props: CancelAlertProps) {
-  const { pConn, updateAlertState } = props;
-  const [showSnackbar, setShowSnackbar] = useState(false);
-  const [snackbarMessage, setSnackbarMessage] = useState('');
-
-  const itemKey = pConn.getContextName();
-  const caseInfo = pConn.getCaseInfo();
-  const caseName = caseInfo.getName();
-  const ID = caseInfo.getID();
-  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
-  const localeCategory = 'ModalContainer';
-
-  function showToast(message: string) {
-    setSnackbarMessage(message);
-    setShowSnackbar(true);
-  }
-
-  const dismissCancelAlertOnly = () => {
-    updateAlertState(true);
-  };
-
-  const dismissModal = () => {
-    updateAlertState(false);
-  };
-
-  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
-    if (reason === 'clickaway') {
-      return;
-    }
-    setShowSnackbar(false);
-  }
-
-  const buttonClick = action => {
-    const actionsAPI = pConn.getActionsApi();
-
-    switch (action) {
-      case 'save':
-        // eslint-disable-next-line no-case-declarations
-        const savePromise = actionsAPI.saveAndClose(itemKey);
-
-        savePromise
-          .then(() => {
-            dismissModal();
-
-            // @ts-ignore - second parameter “payload” for publish method should be optional
-            PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CASE_CREATED);
-          })
-          .catch(() => {
-            showToast(localizedVal('Save failed', localeCategory));
-          });
-        break;
-
-      case 'continue':
-        dismissCancelAlertOnly();
-        break;
-
-      case 'delete':
-        // eslint-disable-next-line no-case-declarations
-        const deletePromise = actionsAPI.deleteCaseInCreateStage(itemKey);
-
-        deletePromise
-          .then(() => {
-            dismissModal();
-
-            // @ts-ignore - second parameter “payload” for publish method should be optional
-            PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
-          })
-          .catch(() => {
-            showToast(localizedVal('Delete failed.', localeCategory));
-          });
-        break;
-
-      default:
-        break;
-    }
-  };
-
-  return (
-    <>
-      <div className='cancel-alert-background'>
-        <div className='cancel-alert-top'>
-          <h3>{`Delete ${caseName}(${ID})`}</h3>
-          <div>
-            <p>{`${localizedVal('Are you sure you want to delete', localeCategory)} ${caseName} (${ID})?`}</p>
-            <p>{localizedVal('Alternatively, you can continue working or save your work for later.', localeCategory)}</p>
-          </div>
-          <div className='action-controls'>
-            <Grid container spacing={4} justifyContent='space-between'>
-              <Grid item>
-                <Button variant='outlined' color='primary' onClick={() => buttonClick('save')}>
-                  {localizedVal('Save for later', localeCategory)}
-                </Button>
-              </Grid>
-              <Grid item>
-                <Button variant='outlined' color='primary' onClick={() => buttonClick('continue')}>
-                  {localizedVal('Continue Working', localeCategory)}
-                </Button>
-                <Button variant='contained' color='primary' onClick={() => buttonClick('delete')}>
-                  {localizedVal('Delete', localeCategory)}
-                </Button>
-              </Grid>
-            </Grid>
-          </div>
-        </div>
-      </div>
-      <Snackbar
-        open={showSnackbar}
-        autoHideDuration={3000}
-        onClose={handleSnackbarClose}
-        message={snackbarMessage}
-        action={
-          <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
-            <CloseIcon fontSize='small' />
-          </IconButton>
-        }
-      />
-    </>
-  );
-}