@pega/react-sdk-overrides 0.23.26 → 0.23.27

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

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import Button from '@material-ui/core/Button';
+import { makeStyles } from '@material-ui/core/styles';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+const useStyles = makeStyles((/* theme */) => ({
+  button: {
+    width: '50%',
+    margin: '4px'
+  },
+  div: {
+    display: 'flex',
+    margin: '8px'
+  }
+}));
+
+interface ListViewActionButtonsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  context: string;
+  closeActionsDialog: Function;
+}
+
+function ListViewActionButtons(props: ListViewActionButtonsProps) {
+  const { getPConnect, context, closeActionsDialog } = props;
+  const classes = useStyles();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Data Object';
+  const [isDisabled, setIsDisabled] = useState(false);
+
+  return (
+    <div className={classes.div}>
+      <Button
+        className={classes.button}
+        variant='contained'
+        color='secondary'
+        onClick={() => {
+          closeActionsDialog();
+          getPConnect().getActionsApi().cancelDataObject(context);
+        }}
+      >
+        {localizedVal('Cancel', localeCategory)}
+      </Button>
+      <Button
+        className={classes.button}
+        variant='contained'
+        color='primary'
+        disabled={isDisabled}
+        onClick={() => {
+          setIsDisabled(true);
+          getPConnect()
+            .getActionsApi()
+            .submitEmbeddedDataModal(context)
+            .then(() => {})
+            .finally(() => {
+              setIsDisabled(false);
+              closeActionsDialog();
+            });
+        }}
+      >
+        {localizedVal('Submit', localeCategory)}
+      </Button>
+    </div>
+  );
+}
+
+export default ListViewActionButtons;

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

@@ -0,0 +1 @@
+export { default } from './ListViewActionButtons';

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

@@ -1,16 +1,25 @@
-import React, { useEffect, useRef, useState, createElement } from 'react';
-import PropTypes from 'prop-types';
+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 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';
+import { MuiPickersUtilsProvider } from '@material-ui/pickers';
+import DayjsUtils from '@date-io/dayjs';
 
-declare const PCore;
+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 {
+  // If any, enter additional props that only exist on this component
+  loadingInfo?: string;
+  routingInfo?: any;
+  pageMessages?: string[];
+}
 
 function buildName(pConnect, name = '') {
   const context = pConnect.getContextName();
@@ -67,11 +76,16 @@ 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 ListViewActionButtons = getComponentFromMap('ListViewActionButtons');
+
   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 },
@@ -84,9 +98,14 @@ const ModalViewContainer = props => {
   const [oCaseInfo, setOCaseInfo] = useState({});
   const [createdView, setCreatedView] = useState<any>(null);
   const [title, setTitle] = useState('');
-  const [arNewChildrenAsReact, setArNewChildrenAsReact] = useState<Array<any>>([]);
+  const [arNewChildrenAsReact, setArNewChildrenAsReact] = useState<any[]>([]);
   const [itemKey, setItemKey] = useState('');
   const [cancelPConn, setCancelPConn] = useState(null);
+  const [isMultiRecordData, setMultiRecordData] = useState(false);
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Data Object';
+
+  const actionsDialog = useRef(false);
 
   function showAlert(payload) {
     const { latestItem } = getKeyAndLatestItem(routingInfoRef.current, pConn);
@@ -96,9 +115,9 @@ const ModalViewContainer = props => {
       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) {
+    if (latestItem && isModalAction && !actionsDialog.current) {
       const configObject = getConfigObject(latestItem, pConn);
-      setCancelPConn(configObject.getPConnect());
+      setCancelPConn(configObject?.getPConnect() as any);
       setShowCancelAlert(true);
     }
   }
@@ -131,6 +150,19 @@ const ModalViewContainer = props => {
     setShowModal(modalFlag);
   };
 
+  function getModalHeading(dataObjectAction) {
+    return dataObjectAction === PCore.getConstants().RESOURCE_STATUS.CREATE
+      ? localizedVal('Add Record', localeCategory)
+      : localizedVal('Edit Record', localeCategory);
+  }
+
+  function determineModalHeaderByAction(actionName, caseTypeName, ID, caseLocaleRef) {
+    if (actionName) {
+      return localizedVal(actionName, localeCategory);
+    }
+    return `${localizedVal('Create', localeCategory)} ${localizedVal(caseTypeName, undefined, caseLocaleRef)} (${ID})`;
+  }
+
   useEffect(() => {
     // Establish the necessary containers
     const containerMgr = pConn.getContainerManager();
@@ -140,9 +172,6 @@ const ModalViewContainer = props => {
   useEffect(() => {
     // Update routingInfoRef.current whenever routingInfo changes
     routingInfoRef.current = routingInfo;
-  }, [routingInfo]);
-
-  useEffect(() => {
     if (routingInfoRef.current && !loadingInfo) {
       const currentOrder = routingInfo.accessedOrder;
 
@@ -153,20 +182,15 @@ const ModalViewContainer = props => {
       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 &&
-          !Utils.isEmptyObject(currentItems[key].view)
-        ) {
+        if (currentItems[key] && currentItems[key].view && !isEmptyObject(currentItems[key].view)) {
           const currentItem = currentItems[key];
           const rootView = currentItem.view;
           const { context } = rootView.config;
-          const config = { meta: rootView };
-          config['options'] = {
+          const config: any = { meta: rootView };
+          config.options = {
             context: currentItem.context,
             hasForm: true,
             pageReference: context || pConn.getPageReference()
@@ -174,11 +198,7 @@ const ModalViewContainer = props => {
 
           if (!bSubscribed) {
             setSubscribed(true);
-            subscribe(
-              EVENT_SHOW_CANCEL_ALERT,
-              showAlert,
-              EVENT_SHOW_CANCEL_ALERT /* Unique string for subscription */
-            );
+            subscribe(EVENT_SHOW_CANCEL_ALERT, showAlert, EVENT_SHOW_CANCEL_ALERT /* Unique string for subscription */);
           }
 
           const configObject = PCore.createPConnect(config);
@@ -187,10 +207,8 @@ const ModalViewContainer = props => {
           //    The config has meta.config.type = "view"
           const newComp = configObject.getPConnect();
           // const newCompName = newComp.getComponentName();
-          const caseInfo =
-            newComp && newComp.getDataObject() && newComp.getDataObject().caseInfo
-              ? newComp.getDataObject().caseInfo
-              : null;
+          // @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}`);
 
@@ -211,16 +229,30 @@ const ModalViewContainer = props => {
           // 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);
+            setCreatedView({ configObject, latestItem });
 
             const { actionName } = latestItem;
             const theNewCaseInfo = newComp.getCaseInfo();
             const caseName = theNewCaseInfo.getName();
-            const ID = theNewCaseInfo.getID();
-
-            setTitle(actionName || `New ${caseName} (${ID})`);
-
-            let arChildrenAsReact: Array<any> = [];
+            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.
@@ -236,10 +268,13 @@ const ModalViewContainer = props => {
               // 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().map(child => {
+              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 });
+                return createElement(createPConnectComponent(), {
+                  ...child,
+                  key: caseSummaryID
+                });
               });
             }
 
@@ -255,12 +290,12 @@ const ModalViewContainer = props => {
         if (bShowModal) {
           setShowModal(false);
         }
-        if (!Utils.isEmptyObject(oCaseInfo)) {
+        if (!isEmptyObject(oCaseInfo)) {
           setOCaseInfo({});
         }
       }
     }
-  });
+  }, [routingInfo]);
 
   // function placeholderModalClose() {
   //   // Intentionally a no-op. Similar behavior in other SDKs.
@@ -278,6 +313,11 @@ const ModalViewContainer = props => {
   //   console.log(`--> arNewChildrenAsReact: ${JSON.stringify(arNewChildrenAsReact)}`);
   // }
 
+  function closeActionsDialog() {
+    actionsDialog.current = true;
+    setShowModal(false);
+  }
+
   return (
     <>
       <Dialog open={bShowModal} aria-labelledby='form-dialog-title'>
@@ -286,35 +326,30 @@ const ModalViewContainer = props => {
         </DialogTitle>
         <DialogContent className={classes.dlgContent}>
           {bShowModal ? (
-            <Assignment getPConnect={createdView.getPConnect} itemKey={itemKey} isInModal>
-              {arNewChildrenAsReact}
-            </Assignment>
-          ) : (
-            <></>
-          )}
+            <MuiPickersUtilsProvider utils={DayjsUtils}>
+              <Assignment
+                getPConnect={createdView.configObject.getPConnect}
+                itemKey={itemKey}
+                isInModal
+                banners={getBanners({
+                  target: itemKey,
+                  pageMessages
+                })}
+              >
+                {arNewChildrenAsReact}
+              </Assignment>
+            </MuiPickersUtilsProvider>
+          ) : null}
         </DialogContent>
+        {isMultiRecordData && (
+          <ListViewActionButtons
+            getPConnect={createdView.configObject.getPConnect}
+            context={createdView.latestItem.context}
+            closeActionsDialog={closeActionsDialog}
+          />
+        )}
       </Dialog>
-      {bShowCancelAlert && (
-        <CancelAlert
-          pConn={cancelPConn}
-          showAlert={bShowCancelAlert}
-          updateAlertState={updateAlertState}
-        />
-      )}
+      {bShowCancelAlert && <CancelAlert pConn={cancelPConn} showAlert={bShowCancelAlert} updateAlertState={updateAlertState} />}
     </>
   );
-};
-
-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/ModalViewContainer/index.tsx

@@ -1 +1 @@
-export { default } from './ModalViewContainer';
+export { default } from './ModalViewContainer';

package/lib/infra/Containers/SimpleView/SimpleView.tsx

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+
+import { getActiveContainerItemID, getActiveContainerRootViewElement, getPConnectOfActiveContainerItem, useContainerInitializer } from './helper';
+
+const SimpleViewContainer = props => {
+  const { CONTAINER_TYPE } = PCore.getConstants();
+
+  const { getPConnect, mode = CONTAINER_TYPE.SINGLE, routingInfo: containerInfo, isAssignmentView, options = {} } = props;
+
+  const rootViewElement = useMemo(() => {
+    return getActiveContainerRootViewElement(containerInfo, {
+      isAssignmentView,
+      parentGetPConnect: getPConnect
+    });
+  }, [containerInfo, isAssignmentView, getPConnect]);
+
+  useContainerInitializer(getPConnect, options.mode || mode);
+
+  return rootViewElement;
+};
+
+export const withSimpleViewContainerRenderer =
+  (Component, options: any = {}) =>
+  props => {
+    const { CONTAINER_TYPE } = PCore.getConstants();
+
+    const { getPConnect, mode = CONTAINER_TYPE.SINGLE, routingInfo: containerInfo, isAssignmentView } = props;
+
+    const rootViewElement = <SimpleViewContainer {...props} options={options} />;
+    const activeContainerItemID = getActiveContainerItemID(containerInfo);
+    const getPConnectOfActiveItem = getPConnectOfActiveContainerItem(containerInfo, {
+      isAssignmentView,
+      parentGetPConnect: getPConnect
+    });
+
+    useContainerInitializer(getPConnect, options.mode || mode);
+
+    return (
+      <Component
+        {...props}
+        rootViewElement={rootViewElement}
+        activeContainerItemID={activeContainerItemID}
+        getPConnectOfActiveContainerItem={getPConnectOfActiveItem}
+      />
+    );
+  };
+
+export default SimpleViewContainer;

package/lib/infra/Containers/SimpleView/helper.ts

@@ -0,0 +1,125 @@
+import { useEffect, createElement } from 'react';
+
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import { isContainerInitialized } from '@pega/react-sdk-components/lib/components/helpers';
+
+const processRootViewDetails = (rootView, containerItem, options) => {
+  const {
+    config: { context: viewContext, name: viewName }
+  } = rootView;
+  const { context: containerContext } = containerItem;
+  const { parentGetPConnect } = options;
+  let resolvedViewName = viewName;
+  let resolvedViewContext = viewContext;
+
+  const isAnnotedViewName = PCore.getAnnotationUtils().isProperty(viewName);
+  const isAnnotedViewContext = PCore.getAnnotationUtils().isProperty(viewContext);
+
+  // resolving annoted view context
+  if (isAnnotedViewContext) {
+    const viewContextProperty = PCore.getAnnotationUtils().getPropertyName(viewContext);
+    resolvedViewContext = PCore.getStoreValue(
+      `.${viewContextProperty}`,
+      viewContextProperty.startsWith('.') ? parentGetPConnect().getPageReference() : '',
+      containerContext
+    );
+  }
+
+  if (!resolvedViewContext) {
+    resolvedViewContext = parentGetPConnect().getPageReference();
+  }
+
+  // resolving annoted view name
+  if (isAnnotedViewName) {
+    const viewNameProperty = PCore.getAnnotationUtils().getPropertyName(viewName);
+    resolvedViewName = PCore.getStoreValue(`.${viewNameProperty}`, resolvedViewContext, containerContext);
+  }
+
+  /* Special case where context and viewname are dynamic values
+    Use case - split for each shape
+
+    Ex - (caseInfo.content.SCRequestWorkQueues[1]):context --> .pyViewName:viewName
+  */
+  if (isAnnotedViewName && isAnnotedViewContext && resolvedViewName !== '') {
+    /* Allow context processor to resolve view and context when both are dynamic */
+    resolvedViewName = viewName;
+    resolvedViewContext = viewContext;
+  }
+
+  return {
+    viewName: resolvedViewName,
+    viewContext: resolvedViewContext
+  };
+};
+
+export const getPConnectOfActiveContainerItem = (containerInfo, options) => {
+  const { accessedOrder, items } = containerInfo;
+  const { isAssignmentView = false, parentGetPConnect } = options;
+  const containerName = parentGetPConnect().getContainerName();
+  const { CONTAINER_NAMES } = PCore.getContainerUtils();
+  const { CREATE_DETAILS_VIEW_NAME } = PCore.getConstants();
+
+  if (accessedOrder && items) {
+    const activeContainerItemKey = accessedOrder[accessedOrder.length - 1];
+
+    if (items[activeContainerItemKey] && items[activeContainerItemKey].view && Object.keys(items[activeContainerItemKey].view).length > 0) {
+      const activeContainerItem = items[activeContainerItemKey];
+      const target = activeContainerItemKey.substring(0, activeContainerItemKey.lastIndexOf('_'));
+
+      const { view: rootView, context } = activeContainerItem;
+      const { viewName, viewContext } = processRootViewDetails(rootView, activeContainerItem, { parentGetPConnect });
+
+      if (!viewName) return null;
+
+      const config = {
+        meta: rootView,
+        options: {
+          context,
+          pageReference: viewContext || parentGetPConnect().getPageReference(),
+          containerName,
+          containerItemID: activeContainerItemKey,
+          parentPageReference: parentGetPConnect().getPageReference(),
+          hasForm:
+            isAssignmentView ||
+            containerName === CONTAINER_NAMES.WORKAREA ||
+            containerName === CONTAINER_NAMES.MODAL ||
+            viewName === CREATE_DETAILS_VIEW_NAME,
+          target
+        }
+      };
+
+      return PCore.createPConnect(config).getPConnect;
+    }
+  }
+  return null;
+};
+
+export const getActiveContainerRootViewElement = (containerInfo, options) => {
+  const getPConnect = getPConnectOfActiveContainerItem(containerInfo, options);
+  if (getPConnect) {
+    return createElement(createPConnectComponent(), { getPConnect });
+  }
+  return null;
+};
+
+export const getActiveContainerItemID = containerInfo => {
+  const { accessedOrder } = containerInfo;
+  if (accessedOrder && accessedOrder.length > 0) {
+    return accessedOrder[accessedOrder.length - 1];
+  }
+  return '';
+};
+
+export const useContainerInitializer = (getPConnect, mode) => {
+  const pConnect = getPConnect();
+  const containerName = pConnect.getContainerName();
+  const containerManager = pConnect.getContainerManager();
+  useEffect(() => {
+    if (!isContainerInitialized(pConnect)) {
+      containerManager.initializeContainers({
+        type: mode,
+        name: containerName
+      });
+    }
+  });
+};

package/lib/infra/Containers/SimpleView/index.tsx

@@ -0,0 +1 @@
+export { default } from './SimpleView';