@pega/angular-sdk-overrides 0.26.1 → 0.26.3

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>

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

@@ -1,24 +1,37 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ChangeDetectorRef } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
 
 import { ModalViewContainerComponent } from './modal-view-container.component';
+import { BannerService } from '@pega/angular-sdk-components';
 
 describe('ModalViewContainerComponent', () => {
   let component: ModalViewContainerComponent;
-  let fixture: ComponentFixture<ModalViewContainerComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ModalViewContainerComponent]
-    }).compileComponents();
-  }));
+  let markForCheckSpy: jasmine.Spy;
+  let clearBannersSpy: jasmine.Spy;
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ModalViewContainerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+    (globalThis as any).PCore = {
+      getConstants: () => ({ PAGE: 'PAGE' })
+    };
+
+    markForCheckSpy = jasmine.createSpy('markForCheck');
+    const cdRef = { markForCheck: markForCheckSpy } as unknown as ChangeDetectorRef;
+    clearBannersSpy = jasmine.createSpy('clearBanners');
+    const bannerService = { clearBanners: clearBannersSpy } as unknown as BannerService;
+
+    component = new ModalViewContainerComponent({} as any, cdRef, {} as any, new FormBuilder(), bannerService);
+    component.pConn$ = { getStateProps: () => ({}) } as any;
+    component.stateProps$ = {};
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('clears banners for the closed modal', () => {
+    component.closeActionsDialog('app/modal_1');
+
+    expect(clearBannersSpy).toHaveBeenCalledWith('app/modal_1');
+    expect(markForCheckSpy).toHaveBeenCalled();
+  });
 });