@pega/react-sdk-overrides 23.1.10 → 23.1.12

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

@@ -0,0 +1,65 @@
+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={() => {
+          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,56 +1,86 @@
-import React, { useEffect, useRef, useState, createElement } from 'react';
-import isEqual from 'fast-deep-equal';
+import { createElement, useEffect, useRef, useState } from 'react';
 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 type { PConnProps } from '../../../../types/PConnProps';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-// Can't use ModalViewContainerProps until getContainerManager() knows about initializeContainers
-//  Currently just expects "object"
-// interface ModalViewContainerProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   loadingInfo?: string,
-//   routingInfo?: any,
-//   pageMessages?: Array<string>
-// }
+interface ModalViewContainerProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  loadingInfo?: string;
+  routingInfo?: any;
+  pageMessages?: string[];
+}
 
+function isOpenModalAction(prevModalCollection, currentModalList) {
+  return prevModalCollection && currentModalList ? Object.keys(prevModalCollection).length < currentModalList.length : false;
+}
 
-// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 8 errors)
-declare const PCore: any;
+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);
@@ -64,95 +94,111 @@ 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),
   }
 }));
 
-export default function ModalViewContainer(props /* : ModalViewContainerProps */) {
+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 Assignment = getComponentFromMap('Assignment');
+  const CancelAlert = getComponentFromMap('CancelAlert');
+  const ListViewActionButtons = getComponentFromMap('ListViewActionButtons');
 
   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<Array<any>>([]);
+  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 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) {
-      const configObject = getConfigObject(latestItem, pConn);
-      setCancelPConn(configObject.getPConnect());
+      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) {
+    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();
@@ -160,177 +206,140 @@ 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;
-  }, [routingInfo]);
+  });
 
   useEffect(() => {
-    if (routingInfoRef.current && !loadingInfo) {
-      const currentOrder = routingInfo.accessedOrder;
-
-      if (undefined === currentOrder) {
-        return;
-      }
+    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 = { 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();
-          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);
-
-            const { actionName } = latestItem;
-            const theNewCaseInfo = newComp.getCaseInfo();
-            const caseName = theNewCaseInfo.getName();
-            const ID = theNewCaseInfo.getID();
-
-            setTitle(actionName || `${localizedVal('New', localeCategory)} ${caseName} (${ID})`);
-
-            let arChildrenAsReact: Array<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().map(child => {
-                // 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);
       }
     }
-  });
-
-  // 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);
-  // }
+  }, [routingInfo]);
 
-  // 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;
+    setShowModal(false);
+  }
 
   return (
     <>
       <Dialog open={bShowModal} aria-labelledby='form-dialog-title'>
-        <DialogTitle id='form-dialog-title' className={classes.dlgTitle}>
+        <DialogTitle id='form-dialog-title' className={`${classes.dlgTitle} psdk-dialog-title`}>
           {title}
         </DialogTitle>
-        <DialogContent className={classes.dlgContent}>
+        <DialogContent className={`${classes.dlgContent} psdk-dialog-content`}>
           {bShowModal ? (
-            <Assignment
-              getPConnect={createdView.getPConnect}
-              itemKey={itemKey}
-              isInModal
-              banners={getBanners({
-                target: itemKey,
-                pageMessages
-              })}
-            >
-              {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 {...cancelAlertProps} dismiss={dismissCancelAlert} />}
     </>
   );
-};
+}

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

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