@pega/dx-component-builder-sdk 25.1.16 → 26.1.11

package/tests/assets/sdk-a/components/create/override-sdk/infra/modal-view-container/modal-view-container.component.ts

@@ -1,18 +1,32 @@
-import { Component, OnInit, Input, Output, EventEmitter, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, Output, EventEmitter, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import isEqual from 'fast-deep-equal';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
+import { BannerService } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
-import { getBanners } from '@pega/angular-sdk-components';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 
 /**
  * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
  * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
+// One entry per open modal — supports stacking (e.g. "Create new" opened from within another modal)
+interface ModalEntry {
+  key: string;
+  title: string;
+  createdViewPConn$: any;
+  arChildren$: any[];
+  isMultiRecordData: boolean;
+  isDataObjectModal: boolean;
+  dataRecordKeys: string;
+  dataObjectActionID: string;
+  dataObjectAction: string;
+  dataObjectClassId: string;
+  context: string;
+  updateToken: number;
+}
+
 @Component({
   selector: 'app-modal-view-container',
   templateUrl: './modal-view-container.component.html',
@@ -28,41 +42,33 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
   // Used with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
 
-  arChildren$: any[];
   stateProps$: object;
-  banners: any;
-  templateName$: string;
-  buildName$: string;
-  context$: string;
-  title$ = '';
-  bShowModal$ = false;
-  itemKey$: string;
   formGroup$: FormGroup;
-  oCaseInfo: object = {};
-
-  // for causing a change on assignment
-  updateToken$ = 0;
 
   routingInfoRef: any = {};
 
-  // created object is now a View with a Template
-  //  Use its PConnect to render the CaseView; DON'T replace this.pConn$
-  createdViewPConn$: any;
+  // Stack of open modals — supports one modal opening another (e.g. "Create new" from within a modal).
+  // Keyed the same as PCore's routingInfo.items so open/update/close can be derived from accessedOrder.
+  modalStack: ModalEntry[] = [];
+  private modalCollection: Record<string, object> = {};
 
   bSubscribed = false;
   cancelPConn$?: typeof PConnect;
+  cancelHideDelete$: boolean;
+  cancelIsDataObject$: boolean;
+  cancelSkipReleaseLockRequest$: any;
   bShowCancelAlert$ = false;
   bAlertState: boolean;
   localizedVal: Function;
   localeCategory = 'Data Object';
-  isMultiRecord = false;
   actionsDialog = false;
 
   constructor(
     private angularPConnect: AngularPConnectService,
-    private ngZone: NgZone,
+    private cdRef: ChangeDetectorRef,
     private psService: ProgressSpinnerService,
-    private fb: FormBuilder
+    private fb: FormBuilder,
+    public bannerService: BannerService
   ) {
     // create the formGroup
     this.formGroup$ = fb.group({ hideRequired: false });
@@ -72,22 +78,12 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
 
-    const baseContext = this.pConn$.getContextName();
-    const acName = this.pConn$.getContainerName();
-
-    // for now, in general this should be overridden by updateSelf(), and not be blank
-    if (this.itemKey$ === '') {
-      this.itemKey$ = baseContext.concat('/').concat(acName);
-    }
-
     const containerMgr = this.pConn$.getContainerManager();
 
     containerMgr.initializeContainers({
       type: 'multiple'
     });
 
-    // const { CONTAINER_TYPE, PUB_SUB_EVENTS } = PCore.getConstants();
-
     this.angularPConnect.shouldComponentUpdate(this);
     this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
   }
@@ -115,10 +111,6 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
     // ONLY call updateSelf when the component should update
     if (bUpdateSelf) {
       this.updateSelf();
-    } else if (this.bShowModal$) {
-      // right now onlu get one updated when initial diaplay.  So, once modal is up
-      // let fall through and do a check with "compareCaseInfoIsDifferent" until fixed
-      // this.updateSelf();
     }
   }
 
@@ -135,144 +127,102 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
     } catch (ex) {
       console.log(ex);
     }
-    // const configProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
     this.stateProps$ = this.pConn$.getStateProps();
-    this.banners = this.getBanners();
 
-    if (!loadingInfo) {
-      // turn off spinner
-      // this.psService.sendMessage(false);
+    if (!routingInfo || loadingInfo) {
+      return;
     }
 
-    if (routingInfo && !loadingInfo /* && this.bUpdate */) {
-      const currentOrder = routingInfo.accessedOrder;
+    const { accessedOrder, type } = routingInfo;
 
-      if (undefined == currentOrder) {
-        return;
-      }
-
-      const currentItems = routingInfo.items;
-
-      const { key, latestItem } = this.getKeyAndLatestItem(routingInfo);
-
-      if (currentOrder.length > 0) {
-        if (currentItems[key] && currentItems[key].view && Object.keys(currentItems[key].view).length > 0) {
-          const currentItem = currentItems[key];
-          const rootView = currentItem.view;
-          const { context } = rootView.config;
-          const config: any = { meta: rootView };
-          config.options = {
-            context: currentItem.context,
-            hasForm: true,
-            pageReference: context || this.pConn$.getPageReference()
-          };
-
-          if (!this.bSubscribed) {
-            this.bSubscribed = true;
-            const { PUB_SUB_EVENTS } = PCore.getConstants();
-            PCore.getPubSubUtils().subscribe(
-              PUB_SUB_EVENTS.EVENT_SHOW_CANCEL_ALERT,
-              payload => {
-                this.showAlert(payload);
-              },
-              PUB_SUB_EVENTS.EVENT_SHOW_CANCEL_ALERT
-            );
-          }
-
-          // let configObject = PCore.createPConnect(config);
-
-          // THIS is where the ViewContainer creates a View
-          // The config has meta.config.type = "view"
-          this.createView(routingInfo, currentItem, latestItem, key);
-        }
-      } else {
-        this.hideModal();
-      }
+    if (undefined == accessedOrder) {
+      return;
     }
-  }
 
-  createView(routingInfo, currentItem, latestItem, key) {
-    const configObject = this.getConfigObject(currentItem, null, false);
-    const newComp = configObject?.getPConnect();
-    // const newCompName = newComp.getComponentName();
-    const caseInfo = newComp && newComp.getDataObject() && newComp.getDataObject().caseInfo ? newComp.getDataObject().caseInfo : null;
-    // 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 Nebula/Constellation 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 && this.compareCaseInfoIsDifferent(caseInfo)) {
-      this.psService.sendMessage(false);
-
-      this.ngZone.run(() => {
-        this.createdViewPConn$ = newComp;
-        const newConfigProps = newComp.getConfigProps();
-        this.templateName$ = 'template' in newConfigProps ? (newConfigProps.template as string) : '';
-
-        const { actionName } = latestItem;
-        const theNewCaseInfo = newComp.getCaseInfo();
-        // const caseName = theNewCaseInfo.getName();
-        const ID = theNewCaseInfo.getBusinessID() || theNewCaseInfo.getID();
-
-        const caseTypeName = theNewCaseInfo.getCaseTypeName();
-        const isDataObject = routingInfo.items[latestItem.context].resourceType === PCore.getConstants().RESOURCE_TYPES.DATA;
-        const dataObjectAction = routingInfo.items[latestItem.context].resourceStatus;
-        this.isMultiRecord = routingInfo.items[latestItem.context].isMultiRecordData;
-        this.context$ = latestItem.context;
-        this.title$ =
-          isDataObject || this.isMultiRecord
-            ? this.getModalHeading(dataObjectAction)
-            : this.determineModalHeaderByAction(actionName, caseTypeName, ID, this.createdViewPConn$?.getCaseLocaleReference());
-
-        const bIsRefComponent = this.checkIfRefComponent(newComp);
-
-        if (bIsRefComponent) {
-          const newPConn = ReferenceComponent.normalizePConn(newComp);
-          this.arChildren$ = ReferenceComponent.normalizePConnArray(newPConn.getChildren());
-        } else {
-          // update children with new view's children
-          this.arChildren$ = newComp.getChildren();
+    const { MULTIPLE } = PCore.getConstants().CONTAINER_TYPE;
+    const { key, latestItem } = this.getKeyAndLatestItem(routingInfo);
+
+    if (latestItem && type === MULTIPLE && (this.isOpenModalAction(accessedOrder) || this.isUpdateModalAction(accessedOrder))) {
+      const currentItem = routingInfo.items[key];
+      if (currentItem?.view && Object.keys(currentItem.view).length > 0) {
+        if (!this.bSubscribed) {
+          this.bSubscribed = true;
+          const { PUB_SUB_EVENTS } = PCore.getConstants();
+          PCore.getPubSubUtils().subscribe(
+            PUB_SUB_EVENTS.EVENT_SHOW_CANCEL_ALERT,
+            payload => {
+              this.showAlert(payload);
+            },
+            PUB_SUB_EVENTS.EVENT_SHOW_CANCEL_ALERT
+          );
         }
 
-        this.bShowModal$ = true;
-
-        // for when non modal
-        this.modalVisibleChange.emit(this.bShowModal$);
-
-        // save off itemKey to be used for finishAssignment, etc.
-        this.itemKey$ = key;
-
-        // cause a change for assignment
-        this.updateToken$ = new Date().getTime();
-      });
+        this.upsertModal(routingInfo, latestItem, key, accessedOrder);
+      }
+    } else if (this.isCloseModalAction(accessedOrder)) {
+      this.handleModalClose(accessedOrder);
     }
   }
 
-  hideModal() {
-    if (this.bShowModal$) {
-      // other code in Nebula/Constellation not needed currently, but if so later,
-      // should put here
+  // Builds/refreshes one modal-stack entry and pushes or updates it in-place
+  upsertModal(routingInfo, latestItem, key, accessedOrder) {
+    const entry = this.buildModalEntry(routingInfo, latestItem, key);
+
+    if (this.isUpdateModalAction(accessedOrder)) {
+      this.modalStack = this.modalStack.map(modal => (modal.key === key ? entry : modal));
+    } else if (this.isOpenModalAction(accessedOrder)) {
+      this.handleModalOpen(key);
+      this.modalStack = [...this.modalStack, entry];
     }
 
-    this.ngZone.run(() => {
-      this.bShowModal$ = false;
+    this.psService.sendMessage(false);
+    this.modalVisibleChange.emit(this.modalStack.length > 0);
+    this.cdRef.markForCheck();
+  }
 
-      // for when non modal
-      this.modalVisibleChange.emit(this.bShowModal$);
+  buildModalEntry(routingInfo, latestItem, key): ModalEntry {
+    const configObject = this.getConfigObject(latestItem, null, false);
+    // latestItem is only reached once its view metadata is populated (see updateSelf), so the
+    // created component is always present here — same assumption the old single-modal code made.
+    const newComp = configObject!.getPConnect();
+
+    const { actionName } = latestItem;
+    const theCaseInfo = newComp.getCaseInfo();
+    const ID = theCaseInfo.getBusinessID() || theCaseInfo.getID();
+    const caseTypeName = theCaseInfo.getCaseTypeName();
+
+    const isDataObject = routingInfo.items[latestItem.context].resourceType === PCore.getConstants().RESOURCE_TYPES.DATA;
+    const dataObjectAction = routingInfo.items[latestItem.context].resourceStatus;
+    const isMultiRecordData = routingInfo.items[latestItem.context].isMultiRecordData;
+
+    const title = this.getHeadingValue(
+      latestItem,
+      isMultiRecordData,
+      isDataObject,
+      actionName,
+      dataObjectAction,
+      caseTypeName,
+      ID,
+      newComp?.getCaseLocaleReference()
+    );
 
-      this.oCaseInfo = {};
-    });
+    const bIsRefComponent = this.checkIfRefComponent(newComp);
+    const arChildren$ = bIsRefComponent ? [newComp.getComponent()] : newComp.getChildren();
+
+    return {
+      key,
+      title,
+      createdViewPConn$: newComp,
+      arChildren$,
+      isMultiRecordData,
+      isDataObjectModal: isDataObject && !isMultiRecordData,
+      dataRecordKeys: latestItem.key || '',
+      dataObjectActionID: routingInfo.items[latestItem.context].actionID || '',
+      dataObjectAction: dataObjectAction || '',
+      dataObjectClassId: newComp.getValue('.classID') || '',
+      context: latestItem.context,
+      updateToken: new Date().getTime()
+    };
   }
 
   getConfigObject(item, pConnect, isReverseCoexistence = false) {
@@ -319,13 +269,17 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
     this.bAlertState = bData;
     this.bShowCancelAlert$ = false;
     if (this.bAlertState) {
-      this.hideModal();
+      // Discard confirmed — matches react-sdk: drop the whole stack rather than just the top entry
+      this.modalCollection = {};
+      this.modalStack = [];
+      this.modalVisibleChange.emit(false);
+      this.cdRef.markForCheck();
     }
   }
 
   showAlert(payload) {
     const { latestItem } = this.getKeyAndLatestItem(this.routingInfoRef.current);
-    const { isModalAction } = payload;
+    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
@@ -333,10 +287,12 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
     */
     if (latestItem && isModalAction && !this.actionsDialog) {
       const configObject = this.getConfigObject(latestItem, this.pConn$);
-      this.ngZone.run(() => {
-        this.cancelPConn$ = configObject?.getPConnect();
-        this.bShowCancelAlert$ = true;
-      });
+      this.cancelPConn$ = configObject?.getPConnect();
+      this.cancelHideDelete$ = hideDelete;
+      this.cancelIsDataObject$ = isDataObject;
+      this.cancelSkipReleaseLockRequest$ = skipReleaseLockRequest;
+      this.bShowCancelAlert$ = true;
+      this.cdRef.markForCheck();
     }
   }
 
@@ -358,37 +314,62 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
     return {};
   }
 
-  compareCaseInfoIsDifferent(oCurrentCaseInfo: object): boolean {
-    let bRet = false;
-
-    // fast-deep-equal version
-    if (isEqual !== undefined) {
-      bRet = !isEqual(this.oCaseInfo, oCurrentCaseInfo);
-    } else {
-      const sCurrnentCaseInfo = JSON.stringify(oCurrentCaseInfo);
-      const sOldCaseInfo = JSON.stringify(this.oCaseInfo);
-      // stringify compare version
-      if (sCurrnentCaseInfo != sOldCaseInfo) {
-        bRet = true;
-      }
-    }
+  // Open/update/close are derived purely from how the count of known modals compares to
+  // routingInfo.accessedOrder — mirrors react-sdk's modal-stack fix so that closing one modal
+  // (removing one entry from accessedOrder) can never be mistaken for closing all of them.
+  isOpenModalAction(accessedOrder: string[]): boolean {
+    return Object.keys(this.modalCollection).length < accessedOrder.length;
+  }
 
-    // if different, save off new case info
-    if (bRet) {
-      this.oCaseInfo = JSON.parse(JSON.stringify(oCurrentCaseInfo));
-    }
+  isUpdateModalAction(accessedOrder: string[]): boolean {
+    return Object.keys(this.modalCollection).length === accessedOrder.length;
+  }
+
+  isCloseModalAction(accessedOrder: string[]): boolean {
+    return Object.keys(this.modalCollection).length > accessedOrder.length;
+  }
+
+  handleModalOpen(key: string) {
+    this.modalCollection = { ...this.modalCollection, [key]: {} };
+  }
 
-    return bRet;
+  handleModalClose(accessedOrder: string[]) {
+    const closedModalKey = Object.keys(this.modalCollection).find(modalKey => !accessedOrder.includes(modalKey));
+
+    if (closedModalKey) {
+      const updatedModalCollection = { ...this.modalCollection };
+      delete updatedModalCollection[closedModalKey];
+      this.modalCollection = updatedModalCollection;
+
+      this.modalStack = this.modalStack.filter(modal => modal.key !== closedModalKey);
+      this.modalVisibleChange.emit(this.modalStack.length > 0);
+      this.bannerService.clearBanners(closedModalKey);
+      this.cdRef.markForCheck();
+    }
   }
 
-  getBanners() {
-    return getBanners({ target: this.itemKey$, ...this.stateProps$ });
+  getModalHeading(dataObjectAction, actionName) {
+    switch (dataObjectAction) {
+      case PCore.getConstants().RESOURCE_STATUS.CREATE:
+        return this.localizedVal('Add Record', this.localeCategory);
+      case PCore.getConstants().RESOURCE_STATUS.OPEN_FLOW_ACTION:
+        return this.localizedVal(actionName, this.localeCategory);
+      default:
+        return this.localizedVal('Edit Record', this.localeCategory);
+    }
   }
 
-  getModalHeading(dataObjectAction) {
-    return dataObjectAction === PCore.getConstants().RESOURCE_STATUS.CREATE
-      ? this.localizedVal('Add Record', this.localeCategory)
-      : this.localizedVal('Edit Record', this.localeCategory);
+  getHeadingValue(latestItem, isMultiRecordData, isDataObject, actionName, dataObjectAction, caseTypeName, ID, caseLocaleRef) {
+    if (isMultiRecordData) {
+      return latestItem.heading;
+    }
+    if (isDataObject) {
+      if (actionName) {
+        return this.localizedVal(actionName, this.localeCategory);
+      }
+      return this.getModalHeading(dataObjectAction, actionName);
+    }
+    return this.determineModalHeaderByAction(actionName, caseTypeName, ID, caseLocaleRef);
   }
 
   determineModalHeaderByAction(actionName, caseTypeName, ID, caseLocaleRef) {
@@ -398,15 +379,23 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
     return `${this.localizedVal('Create', this.localeCategory)} ${this.localizedVal(caseTypeName, undefined, caseLocaleRef)} (${ID})`;
   }
 
-  closeActionsDialog = () => {
+  // Closes one modal by key (bound per-instance in the template), or the topmost when omitted
+  closeActionsDialog = (modalKey?: string) => {
     this.actionsDialog = true;
-    // this.ngZone.run(() => {
-    this.bShowModal$ = false;
 
-    // for when non modal
-    this.modalVisibleChange.emit(this.bShowModal$);
+    this.modalStack = modalKey ? this.modalStack.filter(modal => modal.key !== modalKey) : this.modalStack.slice(0, -1);
 
-    this.oCaseInfo = {};
-    // });
+    this.modalVisibleChange.emit(this.modalStack.length > 0);
+    this.bannerService.clearBanners(modalKey ?? '');
+    this.cdRef.markForCheck();
   };
+
+  // Binds closeActionsDialog to a specific modal's key so closing one stacked modal never affects the others
+  closeModalFor(modalKey: string) {
+    return () => this.closeActionsDialog(modalKey);
+  }
+
+  trackByModalKey(index: number, modal: ModalEntry) {
+    return modal.key;
+  }
 }

package/tests/assets/sdk-a/components/create/override-sdk/infra/multi-step/multi-step.component.html

@@ -1,43 +1,35 @@
 <div *ngIf="bShow$">
-  <div *ngIf="bIsVertical$" class="psdk-vertical-stepper">
-    <div *ngFor="let mainStep of arNavigationSteps$; let i = index" class="psdk-vertical-step">
-      <div class="psdk-vertical-step-header">
-        <div class="{{ _getVIconClass(mainStep.visited_status) }}">
-          <div class="psdk-vertical-step-icon-content">
-            <span>{{ i + 1 }}</span>
-          </div>
-        </div>
-        <div class="{{ _getVLabelClass(mainStep.visited_status) }}">
-          {{ mainStep.name }}
-        </div>
-      </div>
-      <div class="{{ _getVBodyClass(i) }}">
-        <ng-container *ngIf="mainStep?.steps && mainStep.visited_status == 'current'">
-          <div *ngFor="let subStep of mainStep.steps">
-            <div *ngIf="subStep.visited_status == 'current'">
-              <component-mapper
-                name="AssignmentCard"
-                [props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
-                [parent]="this"
-                [outputEvents]="{ actionButtonClick: onActionButtonClick }"
-              ></component-mapper>
+  <div
+    *ngIf="isVerticalLayout()"
+    class="psdk-vertical-stepper-container"
+    [class.stepper-start]="stepIndicator$ === 'vertical-start'"
+    [class.stepper-end]="stepIndicator$ === 'vertical'"
+  >
+    <div class="psdk-stepper-rail">
+      <div *ngFor="let mainStep of arNavigationSteps$; let i = index" class="psdk-vertical-step">
+        <div class="psdk-vertical-step-header">
+          <div class="{{ _getVIconClass(mainStep.visited_status) }}">
+            <div class="psdk-vertical-step-icon-content">
+              <span>{{ i + 1 }}</span>
             </div>
           </div>
-        </ng-container>
-
-        <ng-container *ngIf="!mainStep?.steps && mainStep.visited_status == 'current'">
-          <component-mapper
-            name="AssignmentCard"
-            [props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
-            [parent]="this"
-            [outputEvents]="{ actionButtonClick: onActionButtonClick }"
-          ></component-mapper>
-        </ng-container>
+          <div class="{{ _getVLabelClass(mainStep.visited_status) }}">
+            {{ mainStep.name }}
+          </div>
+        </div>
       </div>
     </div>
+    <div class="psdk-stepper-content">
+      <component-mapper
+        name="AssignmentCard"
+        [props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
+        [parent]="this"
+        [outputEvents]="{ actionButtonClick: onActionButtonClick }"
+      ></component-mapper>
+    </div>
   </div>
 
-  <div *ngIf="!bIsVertical$" class="psdk-horizontal-stepper">
+  <div *ngIf="isHorizontalLayout()" class="psdk-horizontal-stepper">
     <div class="psdk-horizontal-stepper-header-container">
       <ng-container *ngFor="let mainStep of arNavigationSteps$; let i = index">
         <div class="psdk-horizontal-step-header">