@pega/angular-sdk-overrides 25.1.12 → 26.1.10

package/lib/field/user-reference/user-reference.component.ts

@@ -9,6 +9,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 import { map, Observable, startWith } from 'rxjs';
 import { handleEvent } from '@pega/angular-sdk-components';
@@ -38,6 +39,7 @@ interface UserReferenceProps extends Omit<PConnFieldProps, 'value'> {
     MatOptionModule,
     MatInputModule,
     MatAutocompleteModule,
+    FieldWarningDirective,
     forwardRef(() => ComponentMapperComponent)
   ]
 })
@@ -54,6 +56,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   options$: any;
   bReadonly$: boolean;
   bRequired$: boolean;
+  bFieldMessageVisible$ = false;
   showAsFormattedText$?: boolean;
   displayAs$?: string;
   testId: string;
@@ -158,12 +161,17 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     this.testId = props.testId;
     this.onRecordChange = props?.onRecordChange;
 
-    const { label, displayAs, value, showAsFormattedText, helperText, placeholder, displayMode } = props;
+    const { label, displayAs, value, showAsFormattedText, helperText, placeholder, displayMode, messageConfig = {}, showFieldMessage } = props;
+    const { readOnly, required } = props;
+    [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
+
+    const isMessageVisible = this.utils.getBooleanValue(messageConfig.visibility);
+    this.bFieldMessageVisible$ = this.utils.getBooleanValue(showFieldMessage) && isMessageVisible && !this.bReadonly$;
 
     this.label$ = label;
     this.showAsFormattedText$ = showAsFormattedText;
     this.displayAs$ = displayAs;
-    this.helperText = helperText;
+    this.helperText = this.bFieldMessageVisible$ ? (messageConfig.content ?? '') : helperText;
     this.placeholder = placeholder || '';
     this.displayMode$ = displayMode;
 
@@ -173,9 +181,6 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
       this.value$ = value || '';
     }
 
-    const { readOnly, required } = props;
-    [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
-
     this.actionsApi = this.pConn$.getActionsApi();
     this.propName = this.pConn$.getStateProps().value;
 
@@ -229,7 +234,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     let key = '';
     if (event?.target?.value) {
       const index = this.options$?.findIndex(element => element.value === event.target.value);
-      key = index > -1 ? (key = this.options$[index].key) : event.target.value;
+      key = index > -1 ? this.options$[index].key : event.target.value;
     }
     const value = key;
     handleEvent(this.actionsApi, 'changeNblur', this.propName, value);

package/lib/infra/Containers/flow-container/flow-container.component.html

@@ -1,7 +1,7 @@
 <div style="text-align: left" class="psdk-flow-container-top">
   <div *ngIf="!bShowConfirm">
     <div *ngIf="!todo_showTodo$">
-      <h2 *ngIf="!isMultiStep">{{ containerName$ }}</h2>
+      <h2 *ngIf="containerName$">{{ containerName$ }}</h2>
       <div *ngIf="banners.length">
         <component-mapper name="AlertBanner" [props]="{ banners }"></component-mapper>
       </div>
@@ -39,6 +39,6 @@
     </mat-card>
   </div>
   <div *ngIf="bShowBanner && bShowConfirm && confirm_pconn">
-    <component-mapper name="View" [props]="{ formGroup$, pConn$: confirm_pconn }"></component-mapper>
+    <component-mapper name="reference" [props]="{ formGroup$, pConn$: confirm_pconn }"></component-mapper>
   </div>
 </div>

package/lib/infra/Containers/flow-container/flow-container.component.ts

@@ -1,10 +1,9 @@
-import { Component, OnInit, Input, ChangeDetectorRef, NgZone, forwardRef, OnDestroy, Injector } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy, Injector } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
 import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { getToDoAssignments, hasAssignments, showBanner } from './helpers';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
@@ -76,7 +75,6 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     private cdRef: ChangeDetectorRef,
     private psService: ProgressSpinnerService,
     private fb: FormBuilder,
-    private ngZone: NgZone,
     private utils: Utils
   ) {
     super(injector);
@@ -124,6 +122,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
       'clearBannerMessages',
       () => {
         this.banners = [];
+        this.cdRef.markForCheck();
       },
       'clearBannerMessages'
     );
@@ -189,10 +188,9 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
   }
 
   showPageMessages(completeProps: FlowContainerProps) {
-    this.ngZone.run(() => {
-      const pageMessages = completeProps.pageMessages;
-      this.banners = [{ messages: pageMessages?.map(msg => this.localizedVal(msg.message, 'Messages')), variant: 'urgent' }];
-    });
+    const pageMessages = completeProps.pageMessages;
+    this.banners = [{ messages: pageMessages?.map(msg => this.localizedVal(msg.message, 'Messages')), variant: 'urgent' }];
+    this.cdRef.markForCheck();
   }
 
   getTodoVisibilty() {
@@ -385,8 +383,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     const { CASE_INFO: CASE_CONSTS } = PCore.getConstants();
 
     setTimeout(() => {
-      this.ngZone.run(() => {
-        /*
+      /*
           *** renove this commmented out code when React/WC is updated
           *** this code is replace with the call to "getToDoAssigments" function below
 
@@ -404,32 +401,32 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
           const caseActions = localPConn.getValue(CASE_CONSTS.CASE_INFO_ACTIONS);
           */
 
-        const todoAssignments = getToDoAssignments(this.pConn$);
+      const todoAssignments = getToDoAssignments(this.pConn$);
 
-        if (todoAssignments && todoAssignments.length > 0) {
-          this.todo_caseInfoID$ = this.pConn$.getValue(CASE_CONSTS.CASE_INFO_ID);
-          this.todo_datasource$ = { source: todoAssignments };
-        }
+      if (todoAssignments && todoAssignments.length > 0) {
+        this.todo_caseInfoID$ = this.pConn$.getValue(CASE_CONSTS.CASE_INFO_ID);
+        this.todo_datasource$ = { source: todoAssignments };
+      }
 
-        /* remove this commented out code when update React/WC */
-        // let kid = this.pConn$.getChildren()[0];
+      /* remove this commented out code when update React/WC */
+      // let kid = this.pConn$.getChildren()[0];
 
-        // kid.getPConnect() can be a Reference component. So normalize it just in case
-        //        let todoKid = ReferenceComponent.normalizePConn(kid.getPConnect()).getChildren()[0];
+      // kid.getPConnect() can be a Reference component. So normalize it just in case
+      //        let todoKid = kid.getPConnect().getChildren()[0];
 
-        //        this.todo_pConn$ = todoKid.getPConnect();
+      //        this.todo_pConn$ = todoKid.getPConnect();
 
-        /* code change here to note for React/WC  */
-        // todo now needs pConn to open the work item on click "go"
-        this.todo_pConn$ = this.pConn$;
+      /* code change here to note for React/WC  */
+      // todo now needs pConn to open the work item on click "go"
+      this.todo_pConn$ = this.pConn$;
 
-        // still needs the context of the original work item
-        this.todo_context$ = localPConn.getContextName();
+      // still needs the context of the original work item
+      this.todo_context$ = localPConn.getContextName();
 
-        this.todo_showTodo$ = true;
+      this.todo_showTodo$ = true;
 
-        this.psService.sendMessage(false);
-      });
+      this.psService.sendMessage(false);
+      this.cdRef.markForCheck();
     });
   }
 
@@ -528,30 +525,25 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     //  the View if it is a Reference component. And need to pass in the getPConnect
     //  to have normalize do a c11Env createComponent (that makes sure options.hasForm
     //  is passed along to all the component's children)
-    const normalizedConfigObject = ReferenceComponent.normalizePConn(configObject.getPConnect());
+    const normalizedConfigObject = configObject.getPConnect();
     // We want the children to be the PConnect itself, not the result of calling getPConnect(),
     //  So need to get the PConnect of the normalized component we just created...
     const normalizedConfigObjectAsPConnect = normalizedConfigObject.getComponent();
 
     // makes sure Angular tracks these changes
-    this.ngZone.run(() => {
-      this.buildName$ = this.getBuildName();
-      // what comes back now in configObject is the children of the flowContainer
+    this.buildName$ = this.getBuildName();
+    // what comes back now in configObject is the children of the flowContainer
 
-      this.arChildren$ = [];
-      this.arChildren$.push(normalizedConfigObjectAsPConnect);
+    this.arChildren$ = [];
+    this.arChildren$.push(normalizedConfigObjectAsPConnect);
 
-      this.psService.sendMessage(false);
+    this.psService.sendMessage(false);
 
-      const oWorkItem = configObject.getPConnect();
-      const oWorkData: any = oWorkItem.getDataObject();
+    const oWorkItem = configObject.getPConnect();
+    const oWorkData: any = oWorkItem.getDataObject();
 
-      this.containerName$ = this.localizedVal(
-        this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0]?.name,
-        undefined,
-        this.localeReference
-      );
-    });
+    this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0]?.name, undefined, this.localeReference);
+    this.cdRef.markForCheck();
   }
 
   getBuildName(): string {

package/lib/infra/Containers/modal-view-container/data-view-action-buttons/data-view-action-buttons.component.html

@@ -0,0 +1,12 @@
+<mat-grid-list cols="2" rowHeight="4.25rem">
+  <mat-grid-tile>
+    <button mat-raised-button variant="contained" color="secondary" [disabled]="bDisabled$" (click)="onCancel()">
+      {{ localizedVal('Cancel', localeCategory) }}
+    </button>
+  </mat-grid-tile>
+  <mat-grid-tile>
+    <button mat-raised-button variant="contained" color="primary" [disabled]="bDisabled$" (click)="onSubmit()">
+      {{ localizedVal(primaryLabel$, localeCategory) }}
+    </button>
+  </mat-grid-tile>
+</mat-grid-list>

package/lib/infra/Containers/modal-view-container/data-view-action-buttons/data-view-action-buttons.component.spec.ts

@@ -0,0 +1,130 @@
+import { provideZonelessChangeDetection } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DataViewActionButtonsComponent } from './data-view-action-buttons.component';
+
+const RESOURCE_STATUS = { CREATE: 'CREATE', UPDATE: 'UPDATE', OPEN_FLOW_ACTION: 'OPEN_FLOW_ACTION' };
+const DATA_EVENTS = { DATA_OBJECT_CREATED: 'DataObjectCreated', DATA_OBJECT_UPDATED: 'DataObjectUpdated' };
+
+describe('DataViewActionButtonsComponent', () => {
+  let component: DataViewActionButtonsComponent;
+  let fixture: ComponentFixture<DataViewActionButtonsComponent>;
+  let actionsApi: {
+    createDataObject: jasmine.Spy;
+    updateDataObject: jasmine.Spy;
+    submitDataObjectAction: jasmine.Spy;
+    cancelDataObject: jasmine.Spy;
+  };
+  let publishSpy: jasmine.Spy;
+
+  beforeEach(async () => {
+    publishSpy = jasmine.createSpy('publish');
+    // PCore is read in a field initializer, so it must exist before the component is created.
+    (globalThis as any).PCore = {
+      getLocaleUtils: () => ({ getLocaleValue: (value: string) => value }),
+      getConstants: () => ({ RESOURCE_STATUS, PUB_SUB_EVENTS: { DATA_EVENTS } }),
+      getPubSubUtils: () => ({ publish: publishSpy })
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [DataViewActionButtonsComponent],
+      providers: [provideZonelessChangeDetection()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DataViewActionButtonsComponent);
+    component = fixture.componentInstance;
+
+    actionsApi = {
+      createDataObject: jasmine.createSpy('createDataObject').and.returnValue(Promise.resolve()),
+      updateDataObject: jasmine.createSpy('updateDataObject').and.returnValue(Promise.resolve()),
+      submitDataObjectAction: jasmine.createSpy('submitDataObjectAction').and.returnValue(Promise.resolve()),
+      cancelDataObject: jasmine.createSpy('cancelDataObject').and.returnValue({})
+    };
+
+    component.pConn$ = { getActionsApi: () => actionsApi } as any;
+    component.context$ = 'app/modal_1';
+    component.dataRecordKeys$ = '{"pyGUID":"abc-123"}';
+    component.classID$ = 'My-Data-Class';
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('labels the primary button "Update" when editing an existing record', () => {
+    component.dataObjectAction$ = RESOURCE_STATUS.UPDATE;
+    expect(component.primaryLabel$).toBe('Update');
+  });
+
+  it('labels the primary button "Submit" when creating a record', () => {
+    component.dataObjectAction$ = RESOURCE_STATUS.CREATE;
+    expect(component.primaryLabel$).toBe('Submit');
+  });
+
+  it('labels the primary button "Submit" for a record action', () => {
+    component.dataObjectAction$ = RESOURCE_STATUS.OPEN_FLOW_ACTION;
+    expect(component.primaryLabel$).toBe('Submit');
+  });
+
+  it('creates the record and publishes the created event', async () => {
+    component.dataObjectAction$ = RESOURCE_STATUS.CREATE;
+
+    component.onSubmit();
+    await fixture.whenStable();
+
+    expect(actionsApi.createDataObject).toHaveBeenCalledWith('app/modal_1');
+    expect(publishSpy).toHaveBeenCalledWith(DATA_EVENTS.DATA_OBJECT_CREATED, { classId: 'My-Data-Class', data: undefined });
+  });
+
+  it('parses the serialised record keys before updating', async () => {
+    component.dataObjectAction$ = RESOURCE_STATUS.UPDATE;
+
+    component.onSubmit();
+    await fixture.whenStable();
+
+    expect(actionsApi.updateDataObject).toHaveBeenCalledWith('app/modal_1', { pyGUID: 'abc-123' });
+    expect(publishSpy).toHaveBeenCalledWith(DATA_EVENTS.DATA_OBJECT_UPDATED, { classId: 'My-Data-Class' });
+  });
+
+  it('submits a record action with its parsed keys and action ID', async () => {
+    component.dataObjectAction$ = RESOURCE_STATUS.OPEN_FLOW_ACTION;
+    component.actionID$ = 'updateCVV';
+
+    component.onSubmit();
+    await fixture.whenStable();
+
+    expect(actionsApi.submitDataObjectAction).toHaveBeenCalledWith('app/modal_1', { pyGUID: 'abc-123' }, 'updateCVV');
+  });
+
+  it('disables both buttons while a save is in flight', () => {
+    let resolveSave: () => void = () => {};
+    actionsApi.createDataObject.and.returnValue(
+      new Promise<void>(resolve => {
+        resolveSave = resolve;
+      })
+    );
+    component.dataObjectAction$ = RESOURCE_STATUS.CREATE;
+
+    component.onSubmit();
+
+    expect(component.bDisabled$).toBeTrue();
+    resolveSave();
+  });
+
+  it('re-enables the buttons and publishes nothing when the save is rejected', async () => {
+    actionsApi.createDataObject.and.returnValue(Promise.reject(new Error('rejected')));
+    component.dataObjectAction$ = RESOURCE_STATUS.CREATE;
+
+    component.onSubmit();
+    await fixture.whenStable();
+
+    expect(publishSpy).not.toHaveBeenCalled();
+    expect(component.bDisabled$).toBeFalse();
+  });
+
+  it('discards the edit through the engine on cancel', () => {
+    component.onCancel();
+
+    expect(actionsApi.cancelDataObject).toHaveBeenCalledWith('app/modal_1');
+  });
+});

package/lib/infra/Containers/modal-view-container/data-view-action-buttons/data-view-action-buttons.component.ts

@@ -0,0 +1,77 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component, Input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatGridListModule } from '@angular/material/grid-list';
+
+@Component({
+  selector: 'app-data-view-action-buttons',
+  templateUrl: './data-view-action-buttons.component.html',
+  imports: [CommonModule, MatGridListModule, MatButtonModule]
+})
+export class DataViewActionButtonsComponent {
+  @Input() pConn$: typeof PConnect;
+  @Input() context$: string;
+  @Input() dataObjectAction$: string;
+  @Input() actionID$ = '';
+  // The container item publishes the record keys JSON-serialised.
+  @Input() dataRecordKeys$ = '';
+  @Input() classID$ = '';
+
+  localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  localeCategory = 'Data Object';
+  bDisabled$ = false;
+
+  constructor(private cdRef: ChangeDetectorRef) {}
+
+  get primaryLabel$(): string {
+    return this.dataObjectAction$ === PCore.getConstants().RESOURCE_STATUS.UPDATE ? 'Update' : 'Submit';
+  }
+
+  onCancel() {
+    // The engine drops the container item, which collapses the modal.
+    this.pConn$.getActionsApi().cancelDataObject(this.context$);
+  }
+
+  onSubmit() {
+    const { RESOURCE_STATUS, PUB_SUB_EVENTS } = PCore.getConstants();
+    const { DATA_OBJECT_CREATED, DATA_OBJECT_UPDATED } = PUB_SUB_EVENTS.DATA_EVENTS;
+    const actionsApi = this.pConn$.getActionsApi();
+    const { publish } = PCore.getPubSubUtils();
+
+    let submitAction: Promise<any>;
+    let publishCompleted: (data?: any) => void;
+
+    switch (this.dataObjectAction$) {
+      case RESOURCE_STATUS.UPDATE:
+        submitAction = actionsApi.updateDataObject(this.context$, this.getRecordKeys());
+        publishCompleted = () => publish(DATA_OBJECT_UPDATED, { classId: this.classID$ });
+        break;
+      case RESOURCE_STATUS.OPEN_FLOW_ACTION:
+        submitAction = actionsApi.submitDataObjectAction(this.context$, this.getRecordKeys(), this.actionID$);
+        publishCompleted = () => publish(DATA_OBJECT_UPDATED, { classId: this.classID$, actionID: this.actionID$ });
+        break;
+      default:
+        submitAction = actionsApi.createDataObject(this.context$);
+        publishCompleted = data => publish(DATA_OBJECT_CREATED, { classId: this.classID$, data });
+    }
+
+    this.bDisabled$ = true;
+
+    submitAction
+      .then(data => {
+        publishCompleted(data);
+      })
+      .catch(() => {
+        // Keep the modal open so the server error banner is visible and the edit can be corrected.
+      })
+      .finally(() => {
+        this.bDisabled$ = false;
+        // Change detection is zoneless, so this async reset needs to be flagged explicitly.
+        this.cdRef.markForCheck();
+      });
+  }
+
+  private getRecordKeys(): Record<string, any> {
+    return this.dataRecordKeys$ ? JSON.parse(this.dataRecordKeys$) : {};
+  }
+}

package/lib/infra/Containers/modal-view-container/modal-view-container.component.html

@@ -1,15 +1,36 @@
-<div id="dialog" *ngIf="bShowModal$" class="psdk-dialog-background">
-  <div class="psdk-modal-view-container-top" id="{{ buildName$ }}">
-    <h3 *ngIf="title$ != ''">{{ title$ }}</h3>
+<div *ngFor="let modal of modalStack; trackBy: trackByModalKey" id="dialog" class="psdk-dialog-background">
+  <div class="psdk-modal-view-container-top" id="{{ modal.key }}">
+    <h3 *ngIf="modal.title != ''">{{ modal.title }}</h3>
     <component-mapper
       name="Assignment"
-      [props]="{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$, isInModal$: true, banners }"
+      [props]="{
+        pConn$: modal.createdViewPConn$,
+        formGroup$,
+        arChildren$: modal.arChildren$,
+        itemKey$: modal.key,
+        isCreateStage$: true,
+        updateToken$: modal.updateToken,
+        isInModal$: true
+      }"
     ></component-mapper>
-    <div *ngIf="isMultiRecord">
+    <div *ngIf="modal.isMultiRecordData">
       <component-mapper
         name="ListViewActionButtons"
-        [props]="{ pConn$: createdViewPConn$, context$ }"
-        [outputEvents]="{ closeActionsDialog: closeActionsDialog }"
+        [props]="{ pConn$: modal.createdViewPConn$, context$: modal.context }"
+        [outputEvents]="{ closeActionsDialog: closeModalFor(modal.key) }"
+      ></component-mapper>
+    </div>
+    <div *ngIf="modal.isDataObjectModal">
+      <component-mapper
+        name="DataViewActionButtons"
+        [props]="{
+          pConn$: modal.createdViewPConn$,
+          context$: modal.context,
+          classID$: modal.dataObjectClassId,
+          dataObjectAction$: modal.dataObjectAction,
+          dataRecordKeys$: modal.dataRecordKeys,
+          actionID$: modal.dataObjectActionID
+        }"
       ></component-mapper>
     </div>
   </div>
@@ -18,7 +39,13 @@
 <div *ngIf="bShowCancelAlert$">
   <component-mapper
     name="CancelAlert"
-    [props]="{ bShowAlert$: bShowCancelAlert$, pConn$: cancelPConn$ }"
+    [props]="{
+      bShowAlert$: bShowCancelAlert$,
+      pConn$: cancelPConn$,
+      hideDelete: cancelHideDelete$,
+      isDataObject: cancelIsDataObject$,
+      skipReleaseLockRequest: cancelSkipReleaseLockRequest$
+    }"
     [parent]="this"
     [outputEvents]="{ onAlertState$: onAlertState }"
   ></component-mapper>