@pega/dx-component-builder-sdk 0.25.5 → 0.25.7

package/tests/assets/sdk-r/components/create/override-sdk/infra/ModalViewContainer/ModalViewContainer.tsx

@@ -0,0 +1,346 @@
+import { createElement, useEffect, useRef, useState } from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import makeStyles from '@mui/styles/makeStyles';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+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 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?: 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, options) {
+  const containerName = pConn.getContainerName();
+  const { acTertiary = false } = options || {};
+  if (PCore.getContainerUtils().hasContainerItems(buildName(pConn, containerName))) {
+    const { accessedOrder, items } = routinginfo;
+    let key;
+
+    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, 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, isBulkAction } = item;
+    const target = PCore.getContainerUtils().getTargetFromContainerItemID(context);
+    config = {
+      meta: view,
+      options: {
+        context,
+        pageReference: view.config.context || pConnect.getPageReference(),
+        hasForm: true,
+        ...(isBulkAction && { isBulkAction }),
+        containerName: pConnect?.getContainerName() || PCore.getConstants().MODAL,
+        target
+      }
+    };
+    return PCore.createPConnect(config);
+  }
+  return null;
+}
+
+const useStyles = makeStyles(theme => ({
+  dlgTitle: {
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(2),
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(0)
+  },
+  dlgContent: {
+    paddingTop: `${theme.spacing(1)} !important`,
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(2),
+    marginTop: theme.spacing(0),
+    marginBottom: theme.spacing(2)
+  }
+}));
+
+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 modalCollection = useRef({});
+  const routingInfoRef = useRef({});
+  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, unsubscribe } = PCore.getPubSubUtils();
+  const [bShowModal, setShowModal] = useState(false);
+  const [bShowCancelAlert, setShowCancelAlert] = useState(false);
+  const [createdView, setCreatedView] = useState<any>(null);
+  const [title, setTitle] = useState('');
+  const [arNewChildrenAsReact, setArNewChildrenAsReact] = useState<any[]>([]);
+  const [itemKey, setItemKey] = useState('');
+  const [cancelAlertProps, setCancelAlertProps] = useState({});
+  const [isMultiRecordData, setMultiRecordData] = useState(false);
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'ModalContainer';
+
+  const ERROR_WHILE_RENDERING = 'ERROR_WHILE_RENDERING';
+
+  function showAlert(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, 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 handleModalOpen(key) {
+    modalCollection.current = {
+      ...modalCollection.current,
+      [key]: {}
+    };
+  }
+
+  function handleModalClose(accessedOrder) {
+    const tempModalCollection = modalCollection.current;
+    const [closedModalKey] = difference(Object.keys(tempModalCollection), accessedOrder);
+
+    if (closedModalKey && tempModalCollection[closedModalKey]) {
+      const modifiedModalCollection = { ...tempModalCollection };
+      delete modifiedModalCollection[closedModalKey];
+      modalCollection.current = modifiedModalCollection;
+      setShowModal(false);
+    }
+  }
+
+  const dismissCancelAlert = dismissAllModals => {
+    setShowCancelAlert(false);
+
+    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();
+    containerMgr.initializeContainers({ type: MULTIPLE });
+  }, [MULTIPLE, pConn]);
+
+  useEffect(() => {
+    // Persisting routing information between the renders in showAlert
+    routingInfoRef.current = routingInfo;
+  });
+
+  useEffect(() => {
+    subscribe(EVENT_SHOW_CANCEL_ALERT, showAlert, EVENT_SHOW_CANCEL_ALERT /* Unique string for subscription */);
+    subscribe(
+      ERROR_WHILE_RENDERING,
+      error => {
+        // setError(true);
+
+        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 */);
+    };
+  });
+
+  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, pConnect?.getCaseLocaleReference());
+
+        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 (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 closeActionsDialog() {
+    // actionsDialog.current = true;
+    setShowModal(false);
+  }
+
+  return (
+    <>
+      <Dialog open={bShowModal} aria-labelledby='form-dialog-title' maxWidth={false}>
+        <DialogTitle id='form-dialog-title' className={`${classes.dlgTitle} psdk-dialog-title`}>
+          {title}
+        </DialogTitle>
+        <DialogContent className={`${classes.dlgContent} psdk-dialog-content`}>
+          {bShowModal ? (
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <Assignment
+                getPConnect={createdView.configObject.getPConnect}
+                itemKey={itemKey}
+                isInModal
+                banners={getBanners({
+                  target: itemKey,
+                  pageMessages
+                })}
+              >
+                {arNewChildrenAsReact}
+              </Assignment>
+            </LocalizationProvider>
+          ) : null}
+        </DialogContent>
+
+        {isMultiRecordData && (
+          <ListViewActionButtons
+            getPConnect={createdView.configObject.getPConnect}
+            context={createdView.latestItem.context}
+            closeActionsDialog={closeActionsDialog}
+          />
+        )}
+      </Dialog>
+      {bShowCancelAlert && <CancelAlert {...cancelAlertProps} dismiss={dismissCancelAlert} />}
+    </>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/infra/ModalViewContainer/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/infra/MultiStep/MultiStep.css

@@ -17,7 +17,7 @@
 
 .psdk-current-svg-icon {
   width: 1rem;
-  filter: var(--app-primary-color-filter);
+  filter: var(--svg-color);
 }
 
 .psdk-not-current-svg-icon {
@@ -40,7 +40,7 @@ mat-horizontal-stepper {
 
 .psdk-sub-step-not-current {
   padding-left: 0.625rem;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--step-label-color);
 }
 
 .psdk-flow-container-top {
@@ -79,36 +79,37 @@ mat-horizontal-stepper {
 
 .psdk-vertical-step-icon {
   margin-right: 12px;
-  background-color: var(--app-neutral-color);
-  color: #fff;
   border-radius: 50%;
   height: 24px;
   width: 24px;
-  flex-shrink: 0;
   position: relative;
 }
 
+.success .psdk-vertical-step-icon {
+  background-color: var(--stepper-completed-bg-color);
+  color: var(--app-text-color);
+}
+
+.future .psdk-vertical-step-icon {
+  color: var(--app-neutral-color);
+  border: 1px solid var(--app-neutral-color);
+}
+
+.current .psdk-vertical-step-icon {
+  background-color: var(--app-primary-color);
+  color: var(--app-text-color);
+  flex-shrink: 0;
+}
+
 .psdk-vertical-step-icon-content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: #fff;
-}
-
-.psdk-vertical-step-icon-selected {
-  margin-right: 12px;
-  background-color: var(--app-primary-color);
-  color: #fff;
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  flex-shrink: 0;
-  position: relative;
 }
 
 .psdk-vertical-step-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--step-label-color);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -119,16 +120,8 @@ mat-horizontal-stepper {
   font-weight: 500;
 }
 
-.psdk-vertical-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 50px;
-  vertical-align: middle;
-  font-size: 14px;
-  font-weight: 500;
+.current .psdk-vertical-step-label {
+  color: var(--text-primary-color);
 }
 
 .psdk-vertical-step-body {
@@ -150,7 +143,7 @@ mat-horizontal-stepper {
   border-left-style: solid;
   top: -16px;
   bottom: -16px;
-  border-left-color: rgba(0, 0, 0, 0.12);
+  border-left-color: var(--app-neutral-color);
 }
 
 .psdk-horizontal-stepper {
@@ -162,33 +155,39 @@ mat-horizontal-stepper {
   white-space: nowrap;
   display: flex;
   align-items: center;
-  text-align: left;
 }
 
 .psdk-horizontal-step-header {
-  overflow: hidden;
   outline: none;
   cursor: pointer;
   position: relative;
   box-sizing: content-box;
   display: flex;
   height: 72px;
-  overflow: hidden;
   align-items: center;
-  padding: 0 24px;
 }
 
 .psdk-horizontal-step-icon {
-  background-color: var(--app-neutral-color);
-  color: #fff;
+  color: white;
   border-radius: 50%;
   height: 24px;
   width: 24px;
-  flex-shrink: 0;
   position: relative;
-  display: block;
-  margin-right: 8px;
-  flex: none;
+}
+
+.future .psdk-horizontal-step-icon {
+  color: var(--app-neutral-color);
+  border: 1px solid var(--app-neutral-color);
+}
+
+.current .psdk-horizontal-step-icon {
+  color: var(--app-text-color);
+  background-color: var(--app-primary-color);
+}
+
+.success .psdk-horizontal-step-icon {
+  color: var(--app-text-color);
+  background-color: var(--stepper-completed-bg-color);
 }
 
 .psdk-horizontal-step-icon-content {
@@ -199,45 +198,24 @@ mat-horizontal-stepper {
   transform: translate(-50%, -50%);
 }
 
-.psdk-horizontal-step-icon-selected {
-  background-color: var(--app-primary-color);
-  color: #fff;
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  flex-shrink: 0;
-  position: relative;
-  display: block;
-  margin-right: 8px;
-  flex: none;
-}
-
 .psdk-horizontal-step-label {
-  color: rgba(0, 0, 0, 0.54);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
+  color: var(--text-secondary-color);
   font-size: 14px;
   font-weight: 500;
   white-space: initial;
 }
 
-.psdk-horizontal-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
-  font-size: 14px;
-  font-weight: 500;
-  white-space: initial;
+.current .psdk-horizontal-step-label {
+  color: var(--text-primary-color);
+  margin-left: 8px;
 }
 
-.psdk-horizontal-step-line {
-  border-top-color: rgba(0, 0, 0, 0.12);
-  border-top-width: 1px;
-  border-top-style: solid;
+.flex-auto {
   flex: auto;
-  height: 0;
-  margin: 0 -16px;
+}
+
+.psdk-horizontal-step-line {
+  border-top: 1px solid var(--app-neutral-color);
   min-width: 32px;
+  margin: 0px 8px;
 }