@pega/react-sdk-overrides 0.23.26 → 8.8.20

package/lib/infra/Containers/FlowContainer/FlowContainer.tsx

@@ -1,23 +1,36 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable camelcase */
 import React, { useState, useEffect, useContext, createElement } from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import { Card, CardHeader, Avatar, Typography } from '@material-ui/core';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { Alert } from '@material-ui/lab';
 
-import Assignment from '@pega/react-sdk-components/lib/components/infra/Assignment';
-import ToDo from '@pega/react-sdk-components/lib/components/widget/ToDo';
-
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
 import DayjsUtils from '@date-io/dayjs';
 import { MuiPickersUtilsProvider } from '@material-ui/pickers';
 
 import { addContainerItem, getToDoAssignments, showBanner } from './helpers';
-
-declare const PCore;
+import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// import type { PConnProps } from '../../../../types/PConnProps';
+
+// Can't use PConnProps until getPConnect().getChildren() types are ok
+// interface FlowContainerProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+//   // eslint-disable-next-line react/no-unused-prop-types
+//   children?: Array<any>,
+//   // eslint-disable-next-line react/no-unused-prop-types
+//   name?: string,
+//   routingInfo?: any,
+//   // eslint-disable-next-line react/no-unused-prop-types
+//   pageMessages: Array<any>
+// }
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 3 errors)
+declare const PCore: any;
 
 //
 // WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
@@ -46,14 +59,20 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export default function FlowContainer(props) {
+export default function FlowContainer(props /* : FlowContainerProps */) {
+  // Get the proper implementation (local or Pega-provided) for these components that are emitted below
+  const Assignment = getComponentFromMap('Assignment');
+  const ToDo = getComponentFromMap('Todo');  // NOTE: ConstellationJS Engine uses "Todo" and not "ToDo"!!!
+  const AlertBanner = getComponentFromMap("AlertBanner");
+
   const pCoreConstants = PCore.getConstants();
+  const PCoreVersion = PCore.getPCoreVersion();
   const { TODO } = pCoreConstants;
   const todo_headerText = 'To do';
 
-  const { getPConnect, routingInfo } = props;
+  const { getPConnect, routingInfo, pageMessages } = props;
 
-  const { displayOnlyFA } = useContext(StoreContext);
+  const { displayOnlyFA } = useContext<any>(StoreContext);
 
   const thePConn = getPConnect();
 
@@ -78,6 +97,10 @@ export default function FlowContainer(props) {
   const [containerName, setContainerName] = useState('');
   const [buildName, setBuildName] = useState('');
   const [bShowConfirm, setShowConfirm] = useState(false);
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Messages';
+  const caseInfo = getPConnect().getCaseInfo();
+  const localeReference = `${caseInfo?.getClassName()}!CASE!${caseInfo.getName()}`.toUpperCase();
 
   const classes = useStyles();
 
@@ -116,7 +139,7 @@ export default function FlowContainer(props) {
   }
 
   function getTodoVisibility() {
-    const caseViewMode = getPConnect().getValue('context_data.caseViewMode');
+    const caseViewMode = getPConnect().getValue('context_data.caseViewMode', ''); // 2nd arg empty string until typedefs properly allow optional
     if (caseViewMode && caseViewMode === 'review') {
       return true;
     }
@@ -171,7 +194,7 @@ export default function FlowContainer(props) {
 
     if (bLoadChildren && oWorkData) {
       // debugger;
-      setContainerName(oWorkData.caseInfo.assignments?.[0].name);
+      setContainerName(localizedVal(oWorkData.caseInfo.assignments?.[0].name, undefined, localeReference));
     }
 
     // debugger;
@@ -187,8 +210,8 @@ export default function FlowContainer(props) {
   function isCaseWideLocalAction() {
     const ourPConn = getPConnect();
 
-    const actionID = ourPConn.getValue(pCoreConstants.CASE_INFO.ACTIVE_ACTION_ID);
-    const caseActions = ourPConn.getValue(pCoreConstants.CASE_INFO.AVAILABLEACTIONS);
+    const actionID = ourPConn.getValue(pCoreConstants.CASE_INFO.ACTIVE_ACTION_ID, ''); // 2nd arg empty string until typedefs properly allow optional
+    const caseActions = ourPConn.getValue(pCoreConstants.CASE_INFO.AVAILABLEACTIONS, ''); // 2nd arg empty string until typedefs properly allow optional
     let bCaseWideAction = false;
     if (caseActions && actionID) {
       const actionObj = caseActions.find(caseAction => caseAction.ID === actionID);
@@ -202,7 +225,7 @@ export default function FlowContainer(props) {
   function hasChildCaseAssignments() {
     const ourPConn = getPConnect();
 
-    const childCases = ourPConn.getValue(pCoreConstants.CASE_INFO.CHILD_ASSIGNMENTS);
+    const childCases = ourPConn.getValue(pCoreConstants.CASE_INFO.CHILD_ASSIGNMENTS, ''); // 2nd arg empty string until typedefs properly allow optional
     // const allAssignments = [];
     // eslint-disable-next-line sonarjs/prefer-single-boolean-return
     if (childCases && childCases.length > 0) {
@@ -216,25 +239,28 @@ export default function FlowContainer(props) {
 
     let bHasAssignments = false;
     const assignmentsList: Array<any> = ourPConn.getValue(
-      pCoreConstants.CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS
-    );
-    const thisOperator = PCore.getEnvironmentInfo().getOperatorIdentifier();
+      pCoreConstants.CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS, ''
+    ); // 2nd arg empty string until typedefs properly allow optional
+    const isEmbedded = window.location.href.includes('embedded');
+    let bAssignmentsForThisOperator = false;
     // 8.7 includes assignments in Assignments List that may be assigned to
     //  a different operator. So, see if there are any assignments for
     //  the current operator
-    let bAssignmentsForThisOperator = false;
-
+    if (PCoreVersion?.includes('8.7') || isEmbedded) {
+      const thisOperator = PCore.getEnvironmentInfo().getOperatorIdentifier();
+      for (const assignment of assignmentsList) {
+        if (assignment['assigneeInfo']['ID'] === thisOperator) {
+          bAssignmentsForThisOperator = true;
+        }
+      }
+    } else {
+      bAssignmentsForThisOperator = true;
+    }
     // Bail out if there isn't an assignmentsList
     if (!assignmentsList) {
       return bHasAssignments;
     }
 
-    for (const assignment of assignmentsList) {
-      if (assignment['assigneeInfo']['ID'] === thisOperator) {
-        bAssignmentsForThisOperator = true;
-      }
-    }
-
     const bHasChildCaseAssignments = hasChildCaseAssignments();
 
     if (bAssignmentsForThisOperator || bHasChildCaseAssignments || isCaseWideLocalAction()) {
@@ -251,8 +277,8 @@ export default function FlowContainer(props) {
 
     const { CASE_INFO: CASE_CONSTS } = pCoreConstants;
 
-    const caseActions = ourPConn.getValue(CASE_CONSTS.CASE_INFO_ACTIONS);
-    const activeActionID = ourPConn.getValue(CASE_CONSTS.ACTIVE_ACTION_ID);
+    const caseActions = ourPConn.getValue(CASE_CONSTS.CASE_INFO_ACTIONS, ''); // 2nd arg empty string until typedefs properly allow optionalv
+    const activeActionID = ourPConn.getValue(CASE_CONSTS.ACTIVE_ACTION_ID, ''); // 2nd arg empty string until typedefs properly allow optional
     const activeAction = caseActions?.find(action => action.ID === activeActionID);
     if (activeAction) {
       activeActionLabel = activeAction.name;
@@ -271,7 +297,7 @@ export default function FlowContainer(props) {
 
     let loadingInfo: any;
     try {
-      loadingInfo = thePConn.getLoadingStatus();
+      loadingInfo = thePConn.getLoadingStatus(''); // 1st arg empty string until typedefs properly allow optional
     } catch (ex) {
       // eslint-disable-next-line no-console
       console.error(`${thePConn.getComponentName()}: loadingInfo catch block`);
@@ -284,14 +310,14 @@ export default function FlowContainer(props) {
       // this.psService.sendMessage(false);
     }
 
-    const caseViewMode = thePConn.getValue('context_data.caseViewMode');
+    const caseViewMode = thePConn.getValue('context_data.caseViewMode', ''); // 2nd arg empty string until typedefs properly allow optional
     const { CASE_INFO: CASE_CONSTS } = pCoreConstants;
     if (caseViewMode && caseViewMode === 'review') {
       setTimeout(() => {
         // updated for 8.7 - 30-Mar-2022
         const todoAssignments = getToDoAssignments(thePConn);
         if (todoAssignments && todoAssignments.length > 0) {
-          setCaseInfoID(thePConn.getValue(CASE_CONSTS.CASE_INFO_ID));
+          setCaseInfoID(thePConn.getValue(CASE_CONSTS.CASE_INFO_ID, '')); // 2nd arg empty string until typedefs properly allow optional
           setTodoDatasource({ source: todoAssignments });
         }
         setShowTodo(true);
@@ -313,13 +339,13 @@ export default function FlowContainer(props) {
     }
 
     // if have caseMessage show message and end
-    const theCaseMessages = thePConn.getValue('caseMessages');
+    const theCaseMessages = localizedVal(thePConn.getValue('caseMessages', ''), localeCategory); // 2nd arg empty string until typedefs properly allow optional
 
     if (theCaseMessages || !hasAssignments()) {
       // Temp fix for 8.7 change: confirmationNote no longer coming through in caseMessages$.
       // So, if we get here and caseMessages$ is empty, use default value in DX API response
       setCaseMessages(
-        theCaseMessages || 'Thank you! The next step in this case has been routed appropriately.'
+        theCaseMessages || localizedVal('Thank you! The next step in this case has been routed appropriately.', localeCategory)
       );
       setHasCaseMessages(true);
       setShowConfirm(true);
@@ -328,7 +354,7 @@ export default function FlowContainer(props) {
       PCore.getPubSubUtils().publish('assignmentFinished');
 
       // debugger;
-      setCheckSvg(Utils.getImageSrc('check', PCore.getAssetLoader().getStaticServerUrl()));
+      setCheckSvg(Utils.getImageSrc('check', Utils.getSDKStaticConentUrl()));
     } else {
       // debugger;
       setHasCaseMessages(false);
@@ -357,7 +383,7 @@ export default function FlowContainer(props) {
           currentItems[key] &&
           currentItems[key].view &&
           type === 'single' &&
-          !Utils.isEmptyObject(currentItems[key].view)
+          !isEmptyObject(currentItems[key].view)
         ) {
           const currentItem = currentItems[key];
           const rootView = currentItem.view;
@@ -395,7 +421,7 @@ export default function FlowContainer(props) {
           // check if have oWorkData, there are times due to timing of state change, when this
           // may not be available
           if (oWorkData) {
-            setContainerName(getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name);
+            setContainerName(localizedVal(getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name, undefined, localeReference));
           }
         }
       }
@@ -407,13 +433,20 @@ export default function FlowContainer(props) {
     ? getPConnect().getCaseSummary().assignments?.[0].urgency
     : '';
   const operatorInitials = Utils.getInitials(PCore.getEnvironmentInfo().getOperatorName());
-  let instructionText = thePConn.getCaseSummary()?.assignments?.[0]?.instructions;
-  if (instructionText === undefined) {
-    instructionText = '';
-  }
 
   const bShowBanner = showBanner(getPConnect);
 
+  const displayPageMessages = () => {
+    let hasBanner = false;
+    const messages = pageMessages
+      ? pageMessages.map(msg => localizedVal(msg.message, 'Messages'))
+      : pageMessages;
+    hasBanner = messages && messages.length > 0;
+    return (
+      hasBanner && <AlertBanner id='flowContainerBanner' variant='urgent' messages={messages} />
+    );
+  };
+
   return (
     <div style={{ textAlign: 'left' }} id={buildName} className='psdk-flow-container-top'>
       {!bShowConfirm &&
@@ -425,9 +458,7 @@ export default function FlowContainer(props) {
                 subheader={`Task in ${caseId} \u2022 Priority ${urgency}`}
                 avatar={<Avatar className={classes.avatar}>{operatorInitials}</Avatar>}
               ></CardHeader>
-              {instructionText !== '' ? (
-                <Typography variant='caption'>{instructionText}</Typography>
-              ) : null}
+              {displayPageMessages()}
               <MuiPickersUtilsProvider utils={DayjsUtils}>
                 <Assignment getPConnect={getPConnect} itemKey={itemKey}>
                   {arNewChildrenAsReact}
@@ -437,9 +468,7 @@ export default function FlowContainer(props) {
           ) : (
             <Card className={classes.root}>
               <Typography variant='h6'>{containerName}</Typography>
-              {instructionText !== '' ? (
-                <Typography variant='caption'>{instructionText}</Typography>
-              ) : null}
+              {displayPageMessages()}
               <MuiPickersUtilsProvider utils={DayjsUtils}>
                 <Assignment getPConnect={getPConnect} itemKey={itemKey}>
                   {arNewChildrenAsReact}
@@ -450,6 +479,7 @@ export default function FlowContainer(props) {
         ) : (
           <div>
             <ToDo
+              key={Math.random()}
               getPConnect={getPConnect}
               caseInfoID={todo_caseInfoID}
               datasource={todo_datasource}
@@ -458,6 +488,7 @@ export default function FlowContainer(props) {
               type={TODO}
               context={todo_context}
               itemKey={itemKey}
+              isConfirm={bHasCaseMessages}
             ></ToDo>
           </div>
         ))}
@@ -470,22 +501,3 @@ export default function FlowContainer(props) {
     </div>
   );
 }
-
-FlowContainer.defaultProps = {
-  children: null,
-  getPConnect: null,
-  name: '',
-  routingInfo: null,
-  pageMessages: null
-};
-
-FlowContainer.propTypes = {
-  // eslint-disable-next-line react/no-unused-prop-types
-  children: PropTypes.node,
-  getPConnect: PropTypes.func,
-  // eslint-disable-next-line react/no-unused-prop-types
-  name: PropTypes.string,
-  routingInfo: PropTypes.objectOf(PropTypes.any),
-  // eslint-disable-next-line react/no-unused-prop-types
-  pageMessages: PropTypes.arrayOf(PropTypes.any)
-};

package/lib/infra/Containers/FlowContainer/{helpers.js → helpers.ts}

@@ -1,4 +1,4 @@
-//  From CosmosReact DX Components
+
 
 //  Moved PCore.getConstants() into each function in which it's used until we can
 //  make sure that this code isn't run until PCore is defined (after onPCoreReady)
@@ -14,8 +14,8 @@ export const addContainerItem = (pConnect) => {
 
   if(caseViewMode !== "review") {
     const target = contextName.substring(0, contextName.lastIndexOf("_"));
-    const activeContainerItemID = window.PCore.getContainerUtils().getActiveContainerItemName(target);
-    const containerItemData = window.PCore.getContainerUtils().getContainerItemData(target, activeContainerItemID);
+    const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(target);
+    const containerItemData = PCore.getContainerUtils().getContainerItemData(target, activeContainerItemID);
 
     if(containerItemData) {
       ({ key, flowName } = containerItemData);
@@ -35,11 +35,11 @@ export const addContainerItem = (pConnect) => {
 export const hasContainerItems = (pConnect) => {
   const contextName = pConnect.getContextName();
   const containerName = pConnect.getContainerName();
-  return window.PCore.getContainerUtils().hasContainerItems(`${contextName}/${containerName}`);
+  return PCore.getContainerUtils().hasContainerItems(`${contextName}/${containerName}`);
 }
 
 export const getActiveCaseActionName = (pConnect) => {
-  const { CASE_INFO } = window.PCore.getConstants();
+  const { CASE_INFO } = PCore.getConstants();
   const caseActions = pConnect.getValue(CASE_INFO.CASE_INFO_ACTIONS);
   const activeActionID = pConnect.getValue(CASE_INFO.ACTIVE_ACTION_ID);
   const activeAction = caseActions.find(
@@ -49,7 +49,7 @@ export const getActiveCaseActionName = (pConnect) => {
 };
 
 export const getFirstCaseActionName = (pConnect) => {
-  const { CASE_INFO } = window.PCore.getConstants();
+  const { CASE_INFO } = PCore.getConstants();
   const caseActions = pConnect.getValue(CASE_INFO.CASE_INFO_ACTIONS);
   return caseActions[0]?.name || "";
 };
@@ -59,7 +59,7 @@ export const hasNotificationMessages = (pConnect) => {
 };
 
 export const isCaseWideLocalAction = (pConnect) => {
-  const { CASE_INFO } = window.PCore.getConstants();
+  const { CASE_INFO } = PCore.getConstants();
   const actionID = pConnect.getValue(CASE_INFO.ACTIVE_ACTION_ID);
   const caseActions = pConnect.getValue(CASE_INFO.CASE_INFO_ACTIONS);
   if (caseActions && actionID) {
@@ -72,23 +72,25 @@ export const isCaseWideLocalAction = (pConnect) => {
 };
 
 export const getChildCaseAssignments = (pConnect) => {
-  const { CASE_INFO } = window.PCore.getConstants();
+  const { CASE_INFO } = PCore.getConstants();
   const childCases = pConnect.getValue(CASE_INFO.CHILD_ASSIGNMENTS);
   let allAssignments = [];
   if (childCases && childCases.length > 0) {
-    childCases.forEach(({ assignments = [], Name }) => {
-      const childCaseAssignments = assignments.map((assignment) => ({
-        ...assignment,
-        caseName: Name
-      }));
-      allAssignments = allAssignments.concat(childCaseAssignments);
+    childCases.forEach(({ assignments, Name }) => {
+      if (assignments) {
+        const childCaseAssignments = assignments.map((assignment) => ({
+          ...assignment,
+          caseName: Name
+        }));
+        allAssignments = allAssignments.concat(childCaseAssignments);
+      }
     });
   }
   return allAssignments;
 };
 
 export const hasAssignments = (pConnect) => {
-  const { CASE_INFO } = window.PCore.getConstants();
+  const { CASE_INFO } = PCore.getConstants();
   const assignments = pConnect.getValue(CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
   const childCasesAssignments = getChildCaseAssignments(pConnect);
 
@@ -118,7 +120,7 @@ export const isRenderWithToDoWrapper = (getPConnect, options) => {
 };
 
 export const getToDoAssignments = (pConnect) => {
-  const { CASE_INFO } = window.PCore.getConstants();
+  const { CASE_INFO } = PCore.getConstants();
   const caseActions = pConnect.getValue(CASE_INFO.CASE_INFO_ACTIONS);
   const assignmentLabel = pConnect.getValue(CASE_INFO.ASSIGNMENT_LABEL);
   const assignments =

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

@@ -1,16 +1,28 @@
 import React, { useEffect, useRef, useState, createElement } from 'react';
-import PropTypes from 'prop-types';
 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 createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
-import Assignment from '@pega/react-sdk-components/lib/components/infra/Assignment';
-import CancelAlert from '@pega/react-sdk-components/lib/components/field/CancelAlert';
-import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+// 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 type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface ModalViewContainerProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  loadingInfo?: string,
+  routingInfo?: any,
+  pageMessages?: Array<string>
+}
+
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 8 errors)
+declare const PCore: any;
 
-declare const PCore;
 
 function buildName(pConnect, name = '') {
   const context = pConnect.getContextName();
@@ -67,11 +79,15 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const ModalViewContainer = props => {
+export default function ModalViewContainer(props: ModalViewContainerProps) {
+  // Get the proper implementation (local or Pega-provided) for these components that are emitted below
+  const Assignment = getComponentFromMap("Assignment");
+  const CancelAlert = getComponentFromMap("CancelAlert");
+
   const classes = useStyles();
 
   const routingInfoRef = useRef({});
-  const { getPConnect, routingInfo, loadingInfo } = props;
+  const { getPConnect, routingInfo = null, loadingInfo = '', pageMessages = [] } = props;
   const pConn = getPConnect();
   const {
     CONTAINER_TYPE: { MULTIPLE },
@@ -88,6 +104,10 @@ const ModalViewContainer = props => {
   const [itemKey, setItemKey] = useState('');
   const [cancelPConn, setCancelPConn] = useState(null);
 
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Data Object';
+
+
   function showAlert(payload) {
     const { latestItem } = getKeyAndLatestItem(routingInfoRef.current, pConn);
     const { isModalAction } = payload;
@@ -160,7 +180,7 @@ const ModalViewContainer = props => {
         if (
           currentItems[key] &&
           currentItems[key].view &&
-          !Utils.isEmptyObject(currentItems[key].view)
+          !isEmptyObject(currentItems[key].view)
         ) {
           const currentItem = currentItems[key];
           const rootView = currentItem.view;
@@ -188,8 +208,8 @@ const ModalViewContainer = props => {
           const newComp = configObject.getPConnect();
           // const newCompName = newComp.getComponentName();
           const caseInfo =
-            newComp && newComp.getDataObject() && newComp.getDataObject().caseInfo
-              ? newComp.getDataObject().caseInfo
+            newComp && newComp.getDataObject() && newComp.getDataObject(newComp.getContextName()).caseInfo
+              ? newComp.getDataObject(newComp.getContextName()).caseInfo
               : null;
 
           // console.log(`ModalViewContainer just created newComp: ${newCompName}`);
@@ -218,7 +238,7 @@ const ModalViewContainer = props => {
             const caseName = theNewCaseInfo.getName();
             const ID = theNewCaseInfo.getID();
 
-            setTitle(actionName || `New ${caseName} (${ID})`);
+            setTitle(actionName || `${localizedVal('New', localeCategory)} ${caseName} (${ID})`);
 
             let arChildrenAsReact: Array<any> = [];
 
@@ -255,7 +275,7 @@ const ModalViewContainer = props => {
         if (bShowModal) {
           setShowModal(false);
         }
-        if (!Utils.isEmptyObject(oCaseInfo)) {
+        if (!isEmptyObject(oCaseInfo)) {
           setOCaseInfo({});
         }
       }
@@ -286,7 +306,15 @@ const ModalViewContainer = props => {
         </DialogTitle>
         <DialogContent className={classes.dlgContent}>
           {bShowModal ? (
-            <Assignment getPConnect={createdView.getPConnect} itemKey={itemKey} isInModal>
+            <Assignment
+              getPConnect={createdView.getPConnect}
+              itemKey={itemKey}
+              isInModal
+              banners={getBanners({
+                target: itemKey,
+                pageMessages
+              })}
+            >
               {arNewChildrenAsReact}
             </Assignment>
           ) : (
@@ -304,17 +332,3 @@ const ModalViewContainer = props => {
     </>
   );
 };
-
-export default ModalViewContainer;
-
-ModalViewContainer.defaultProps = {
-  getPConnect: null,
-  loadingInfo: false,
-  routingInfo: null
-};
-
-ModalViewContainer.propTypes = {
-  getPConnect: PropTypes.func,
-  loadingInfo: PropTypes.bool,
-  routingInfo: PropTypes.objectOf(PropTypes.any)
-};

package/lib/infra/Containers/ViewContainer/ViewContainer.tsx

@@ -1,15 +1,24 @@
 import React, { useEffect, useState, useContext, createElement } from "react";
-import PropTypes from "prop-types";
 import { Box, CircularProgress } from "@material-ui/core";
 import createPConnectComponent from "@pega/react-sdk-components/lib/bridge/react_pconnect";
 import StoreContext from "@pega/react-sdk-components/lib/bridge/Context/StoreContext";
-import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
+
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface ViewContainerProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  name?: string,
+  loadingInfo?: any,    // can't be boolean until setDispatchObjState expects loadingInfo to be type null
+  routingInfo?: any,
+  mode?: string,
+  limit?: number
+}
+
 
 // ViewContainer can emit View
 // import View from '../View';
 
-declare const PCore;
-
 //
 // WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
 // Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
@@ -17,11 +26,11 @@ declare const PCore;
 //
 
 
-export default function ViewContainer(props) {
+export default function ViewContainer(props: ViewContainerProps) {
   // const { getPConnect, children, routingInfo, name } = props;
-  const { getPConnect, name, mode, limit, loadingInfo, routingInfo } = props;
+  const { getPConnect, name = '', mode = 'single', limit = 16, loadingInfo = false, routingInfo = null} = props;
 
-  const { displayOnlyFA } = useContext(StoreContext);
+  const { displayOnlyFA } = useContext<any>(StoreContext);
 
 
   const { CONTAINER_TYPE, APP } = PCore.getConstants();
@@ -43,7 +52,7 @@ export default function ViewContainer(props) {
   // beginning of functions for use by ViewContainer
 
   function buildName() {
-    const context = thePConn.getContextName();
+    const context = thePConn?.getContextName();
     let viewContainerName = name;
     if (!viewContainerName) viewContainerName = "";
     return `${context.toUpperCase()}/${viewContainerName.toUpperCase()}`;
@@ -119,7 +128,7 @@ export default function ViewContainer(props) {
     }
 
     // Getting default view label
-    const navPages = pConn.getValue("pyPortal.pyPrimaryNavPages");
+    const navPages = pConn.getValue("pyPortal.pyPrimaryNavPages", '');  // 2nd arg empty string until typedefs allow optional
     const defaultViewLabel =
       Array.isArray(navPages) && navPages[0] ? navPages[0].pyLabel : "";
     // TODO: Plan is to rename window.constellationCore to window.pega (or similar)
@@ -157,7 +166,7 @@ export default function ViewContainer(props) {
       if (
         items[key] &&
         items[key].view &&
-        !Utils.isEmptyObject(items[key].view)
+        !isEmptyObject(items[key].view)
       ) {
         const latestItem = items[key];
         const rootView = latestItem.view;
@@ -196,21 +205,3 @@ export default function ViewContainer(props) {
   );
 
 }
-
-ViewContainer.defaultProps = {
-  getPConnect: null,
-  name: "",
-  loadingInfo: false,
-  routingInfo: null,
-  mode: "single",
-  limit: 16
-};
-
-ViewContainer.propTypes = {
-  getPConnect: PropTypes.func,
-  name: PropTypes.string,
-  loadingInfo: PropTypes.bool,
-  routingInfo: PropTypes.objectOf(PropTypes.any),
-  mode: PropTypes.string,
-  limit: PropTypes.number
-};