@pega/angular-sdk-overrides 0.26.2 → 0.26.4

package/lib/field/cancel-alert/cancel-alert.component.ts

@@ -14,6 +14,9 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 export class CancelAlertComponent implements OnChanges {
   @Input() pConn$: typeof PConnect;
   @Input() bShowAlert$: boolean;
+  @Input() hideDelete: boolean;
+  @Input() isDataObject: boolean;
+  @Input() skipReleaseLockRequest: any;
   @Output() onAlertState$: EventEmitter<boolean> = new EventEmitter<boolean>();
 
   itemKey: string;
@@ -61,7 +64,6 @@ export class CancelAlertComponent implements OnChanges {
   }
 
   buttonClick({ action }) {
-    const actionsAPI = this.pConn$.getActionsApi();
     this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
 
     switch (action) {
@@ -70,23 +72,44 @@ export class CancelAlertComponent implements OnChanges {
         break;
       case 'discard':
         this.psService.sendMessage(true);
-
-        // eslint-disable-next-line no-case-declarations
-        const deletePromise = actionsAPI.deleteCaseInCreateStage(this.itemKey);
-
-        deletePromise
-          .then(() => {
-            this.psService.sendMessage(false);
-            this.dismissAlert();
-            PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
-          })
-          .catch(() => {
-            this.psService.sendMessage(false);
-            this.sendMessage(this.localizedVal('Delete failed.', this.localeCategory));
-          });
+        this.handleDiscard();
         break;
       default:
         break;
     }
   }
+
+  // Data objects and local/bulk actions don't have a create-stage case to delete, so each needs its own engine API
+  handleDiscard() {
+    const actionsAPI = this.pConn$.getActionsApi();
+    // @ts-ignore - Property 'options' is private and only accessible within class 'C11nEnv'.
+    const isBulkAction = (this.pConn$ as any)?.options?.isBulkAction;
+    const isLocalAction = this.pConn$.getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION);
+
+    if (!this.isDataObject && !isLocalAction && !isBulkAction) {
+      actionsAPI
+        .deleteCaseInCreateStage(this.itemKey, this.hideDelete)
+        .then(() => {
+          this.psService.sendMessage(false);
+          this.dismissAlert();
+          PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
+        })
+        .catch(() => {
+          this.psService.sendMessage(false);
+          this.sendMessage(this.localizedVal('Delete failed.', this.localeCategory));
+        });
+    } else if (isLocalAction) {
+      this.psService.sendMessage(false);
+      this.dismissAlert();
+      actionsAPI.cancelAssignment(this.itemKey, false);
+    } else if (isBulkAction) {
+      this.psService.sendMessage(false);
+      this.dismissAlert();
+      actionsAPI.cancelBulkAction(this.itemKey);
+    } else {
+      this.psService.sendMessage(false);
+      this.dismissAlert();
+      this.pConn$.getContainerManager().removeContainerItem({ containerItemID: this.itemKey, skipReleaseLockRequest: this.skipReleaseLockRequest });
+    }
+  }
 }

package/lib/field/group/group.component.html

@@ -3,7 +3,7 @@
     name="FieldGroup"
     [props]="{
       name: showHeading$ ? heading$ : undefined,
-      collapsible: collapsible$,
+      collapseOnLoad: configProps$.collapseOnLoad,
       instructions: instructions$,
       childrenTemplate: childrenTemplate
     }"

package/lib/field/group/group.component.ts

@@ -10,7 +10,7 @@ interface GroupProps extends PConnFieldProps {
   showHeading: boolean;
   heading: string;
   instructions: string;
-  collapsible: boolean;
+  collapseOnLoad?: 'none' | 'expanded' | 'collapsed';
 }
 
 @Component({
@@ -32,7 +32,6 @@ export class GroupComponent implements OnInit, OnDestroy {
   showHeading$?: boolean;
   heading$: string;
   instructions$: string;
-  collapsible$: boolean;
 
   constructor(private angularPConnect: AngularPConnectService) {}
 
@@ -74,7 +73,6 @@ export class GroupComponent implements OnInit, OnDestroy {
     this.showHeading$ = this.configProps$.showHeading;
     this.heading$ = this.configProps$.heading;
     this.instructions$ = this.configProps$.instructions;
-    this.collapsible$ = this.configProps$.collapsible;
 
     if (this.configProps$.visibility === undefined) {
       this.visibility$ = this.pConn$.getComputedVisibility();

package/lib/field/semantic-link/semantic-link.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="bVisible$ !== false">
-  <a *ngIf="!isLinkTextEmpty; else noLink" class="psdk-value" href="#" (click)="openLinkClick($event)">{{ value$ || '---' }}</a>
+  <a *ngIf="!isLinkTextEmpty; else noLink" class="psdk-value psdk-semantic-link" href="#" (click)="openLinkClick($event)">{{ value$ || '---' }}</a>
 </div>
 <ng-template #noLink>
   <div class="psdk-value">{{ value$ || '---' }}</div>

package/lib/field/semantic-link/semantic-link.component.scss

@@ -1,3 +1,7 @@
 .psdk-value {
   margin: 8px 0px;
 }
+
+.psdk-semantic-link {
+  color: var(--mat-sys-primary);
+}

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>

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>