@pega/angular-sdk-overrides 0.26.1 → 0.26.3

package/lib/template/self-service-case-view/self-service-case-view.component.spec.ts

@@ -1,24 +1,109 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
 import { SelfServiceCaseViewComponent } from './self-service-case-view.component';
 
 describe('SelfServiceCaseViewComponent', () => {
   let component: SelfServiceCaseViewComponent;
-  let fixture: ComponentFixture<SelfServiceCaseViewComponent>;
+  let actionsApi: { openDataObjectAction: jasmine.Spy; createWork: jasmine.Spy };
+  let dataInfoActions: any;
+  let configProps: any;
+  let dataRecord: any;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [SelfServiceCaseViewComponent]
-    }).compileComponents();
-  }));
+  const utilityChild = {
+    getPConnect: () => ({ getRawMetadata: () => ({ type: 'region', name: 'Utilities', children: [] }) })
+  };
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SelfServiceCaseViewComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+    (globalThis as any).PCore = {
+      getLocaleUtils: () => ({ getLocaleValue: (value: string) => value }),
+      getCaseUtils: () => ({ isObjectCaseType: () => false })
+    };
+
+    actionsApi = {
+      openDataObjectAction: jasmine.createSpy('openDataObjectAction'),
+      createWork: jasmine.createSpy('createWork')
+    };
+    dataInfoActions = undefined;
+    dataRecord = { PlanID: 'P-1' };
+    // Summary region is switched off so the test does not depend on case summary metadata.
+    configProps = { icon: 'case', header: 'Header', subheader: 'ID-1', showSummaryRegion: false, showCaseActions: true };
+
+    const utils = {
+      getImageSrc: () => '',
+      getSDKStaticContentUrl: () => '',
+      getBooleanValue: (value: any) => value === true || value === 'true'
+    } as any;
+
+    component = new SelfServiceCaseViewComponent({} as any, utils);
+    component.pConn$ = {
+      resolveConfigProps: () => configProps,
+      getConfigProps: () => configProps,
+      getCaseLocaleReference: () => 'MY-CLASS!CASE!MY-CASE',
+      getChildren: () => [utilityChild, utilityChild, utilityChild, utilityChild, utilityChild],
+      getLocalizationService: () => ({ getLocalizedText: (value: string) => value }),
+      getDataObject: () => ({ caseInfo: { ID: 'C-1', availableActions: [], availableProcesses: [] } }),
+      getValue: (prop: string, context?: string) => {
+        if (prop === '.actions' && context === 'dataInfo') return dataInfoActions;
+        if (prop === '.content' && context === 'dataInfo') return dataRecord;
+        if (prop === '.classID' && context === 'dataInfo.content') return 'My-Data-Class';
+        if (context === '') return dataRecord[prop.slice(1)];
+        return undefined;
+      },
+      getActionsApi: () => actionsApi
+    } as any;
+    component.localizedVal = (value: string) => value;
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('lists data object actions published under dataInfo', () => {
+    dataInfoActions = {
+      availableActions: [{ ID: 'Edit', name: 'Edit' }],
+      availableCreateCaseActions: [{ ID: 'My-Work-Class', name: 'Request Plan Change' }]
+    };
+
+    component.fullUpdate();
+
+    expect(component.arDataObjectActions$.length).toBe(1);
+    expect(component.arCreateCaseActions$.length).toBe(1);
+    expect(component.bActionsMenuDisabled$).toBeFalse();
+  });
+
+  it('falls back to empty arrays and disables the menu when nothing is available', () => {
+    component.fullUpdate();
+
+    expect(component.arDataObjectActions$).toEqual([]);
+    expect(component.arCreateCaseActions$).toEqual([]);
+    expect(component.bActionsMenuDisabled$).toBeTrue();
+  });
+
+  it('keeps honouring the showCaseActions configuration flag', () => {
+    configProps = { ...configProps, showCaseActions: false };
+
+    component.fullUpdate();
+
+    expect(component.showCaseActions).toBeFalse();
+  });
+
+  it('preserves the case locale reference used for action labels', () => {
+    component.fullUpdate();
+
+    expect(component.localeKey).toBe('MY-CLASS!CASE!MY-CASE');
+  });
+
+  it('opens a data object action with the record class and content', () => {
+    component._menuDataObjectActionClick({ ID: 'updateCVV', name: 'Update CVV' });
+
+    expect(actionsApi.openDataObjectAction).toHaveBeenCalledWith('My-Data-Class', dataRecord, 'updateCVV', 'Update CVV');
+  });
+
+  it('starts a new case with starting fields nested under the target reference field', () => {
+    component._menuCreateCaseActionClick({
+      ID: 'My-Work-Class',
+      name: 'Request Plan Change',
+      targetDataReferenceField: { field: 'PlanRef', inputs: [{ linkedField: 'PlanID' }] }
+    });
+
+    expect(actionsApi.createWork).toHaveBeenCalledWith('My-Work-Class', { startingFields: { PlanRef: { PlanID: 'P-1' } } });
+  });
 });

package/lib/template/self-service-case-view/self-service-case-view.component.ts

@@ -9,6 +9,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { prepareCaseSummaryData } from '@pega/angular-sdk-components';
+import { CreateCaseAction, DataObjectAction, DataObjectActions } from '@pega/angular-sdk-components';
 
 interface SelfServiceCaseViewProps {
   // If any, enter additional props that only exist on this component
@@ -45,6 +46,9 @@ export class SelfServiceCaseViewComponent implements OnInit, OnDestroy {
 
   arAvailableActions$: any[] = [];
   arAvailabeProcesses$: any[] = [];
+  arDataObjectActions$: DataObjectAction[] = [];
+  arCreateCaseActions$: CreateCaseAction[] = [];
+  bActionsMenuDisabled$ = true;
 
   caseSummaryPConn$: any;
   currentCaseID = '';
@@ -102,10 +106,31 @@ export class SelfServiceCaseViewComponent implements OnInit, OnDestroy {
         sessionStorage.setItem('okToInitFlowContainer', 'true');
       } else {
         this.updateHeaderAndSummary();
+        this.updateCaseActions();
       }
     }
   }
 
+  // React re-reads every action source on each render. Here fullUpdate is gated on a case ID
+  // change and so runs once, while actions (and a data object's `dataInfo.actions`) arrive
+  // later, so they are all refreshed on every store update instead.
+  updateCaseActions() {
+    const caseInfo = this.pConn$.getDataObject()?.caseInfo ?? {};
+    this.arAvailableActions$ = caseInfo.availableActions ?? [];
+    this.arAvailabeProcesses$ = caseInfo.availableProcesses ?? [];
+    this.editAction = this.arAvailableActions$.find(action => action.ID === 'pyUpdateCaseDetails');
+
+    const dataInfoActions: DataObjectActions = this.pConn$.getValue('.actions', 'dataInfo') ?? {};
+    this.arDataObjectActions$ = dataInfoActions.availableActions ?? [];
+    this.arCreateCaseActions$ = dataInfoActions.availableCreateCaseActions ?? [];
+
+    this.bActionsMenuDisabled$ =
+      this.arAvailableActions$.length === 0 &&
+      this.arAvailabeProcesses$.length === 0 &&
+      this.arDataObjectActions$.length === 0 &&
+      this.arCreateCaseActions$.length === 0;
+  }
+
   hasCaseIDChanged(): boolean {
     if (this.currentCaseID !== this.pConn$.getDataObject().caseInfo.ID) {
       this.currentCaseID = this.pConn$.getDataObject().caseInfo.ID;
@@ -144,9 +169,8 @@ export class SelfServiceCaseViewComponent implements OnInit, OnDestroy {
 
     const caseInfo = this.pConn$.getDataObject().caseInfo;
     this.currentCaseID = caseInfo.ID;
-    this.arAvailableActions$ = caseInfo?.availableActions ? caseInfo.availableActions : [];
-    this.editAction = this.arAvailableActions$.find(action => action.ID === 'pyUpdateCaseDetails');
-    this.arAvailabeProcesses$ = caseInfo?.availableProcesses ? caseInfo.availableProcesses : [];
+
+    this.updateCaseActions();
 
     const { showCaseLifecycle = true, showSummaryRegion = true, showUtilitiesRegion = true, showCaseActions = true, caseClass } = this.configProps$;
     this.showCaseLifecycle = this.utils.getBooleanValue(showCaseLifecycle);
@@ -204,4 +228,29 @@ export class SelfServiceCaseViewComponent implements OnInit, OnDestroy {
 
     openProcessAction(data.ID, { ...data });
   }
+
+  _menuDataObjectActionClick(action: DataObjectAction) {
+    const actionsAPI = this.pConn$.getActionsApi();
+    const openDataObjectAction = actionsAPI.openDataObjectAction.bind(actionsAPI);
+    const classID = this.pConn$.getValue('.classID', 'dataInfo.content');
+    const dataRecord = this.pConn$.getValue('.content', 'dataInfo');
+
+    openDataObjectAction(classID, dataRecord, action.ID, this.localizedVal(action.name, '', this.localeKey));
+  }
+
+  _menuCreateCaseActionClick(action: CreateCaseAction) {
+    const actionsAPI = this.pConn$.getActionsApi();
+    const createWork = actionsAPI.createWork.bind(actionsAPI);
+    const { field, inputs } = action.targetDataReferenceField ?? {};
+    const startingFields: Record<string, any> = {};
+
+    // The engine expects the linked values nested under the target reference field.
+    if (field) {
+      inputs?.forEach(input => {
+        startingFields[field] = { ...startingFields[field], [input.linkedField]: this.pConn$.getValue(`.${input.linkedField}`, '') };
+      });
+    }
+
+    createWork(action.ID, { startingFields });
+  }
 }

package/lib/template/simple-table-manual/helpers.ts

@@ -148,12 +148,33 @@ const SUPPORTED_FIELD_TYPES = [
   'RichText'
 ];
 
+// PCore.getNameSpaceUtils() exists at runtime but is missing from the pcore typedefs.
+export const getQualifiedPrimaryFieldsName = (): string =>
+  (PCore as any).getNameSpaceUtils?.()?.getDefaultQualifiedName(PRIMARY_FIELDS) ?? PRIMARY_FIELDS;
+
+export const isPrimaryFieldsValue = (value): boolean => value === PRIMARY_FIELDS || value === getQualifiedPrimaryFieldsName();
+
+/**
+ * Strips annotation prefixes (ex: "@P .FirstName") and the leading dot from a raw config value.
+ */
+export const getPropertyNameFromConfigValue = (configValue): string => {
+  let name = configValue ?? '';
+  if (name.startsWith('@')) {
+    name = name.substring(name.indexOf(' ') + 1);
+  }
+  if (name.startsWith('.')) {
+    name = name.substring(1);
+  }
+  return name;
+};
+
 export const getConfigFields = (rawFields, contextClass, primaryFieldsViewIndex) => {
   let primaryFields: any = [];
   let configFields: any = [];
+  const safeRawFields = rawFields || [];
 
   if (primaryFieldsViewIndex > -1) {
-    let primaryFieldVMD: any = PCore.getMetadataUtils().resolveView(PRIMARY_FIELDS);
+    let primaryFieldVMD: any = PCore.getMetadataUtils().resolveView(getQualifiedPrimaryFieldsName());
     if (Array.isArray(primaryFieldVMD)) {
       primaryFieldVMD = primaryFieldVMD.find(primaryFieldView => primaryFieldView.classID === contextClass);
       primaryFields = primaryFieldVMD?.children?.[0]?.children || [];
@@ -166,7 +187,7 @@ export const getConfigFields = (rawFields, contextClass, primaryFieldsViewIndex)
     }
   }
 
-  configFields = [...rawFields.slice(0, primaryFieldsViewIndex), ...primaryFields, ...rawFields.slice(primaryFieldsViewIndex + 1)];
+  configFields = [...safeRawFields.slice(0, primaryFieldsViewIndex), ...primaryFields, ...safeRawFields.slice(primaryFieldsViewIndex + 1)];
   // filter duplicate fields after combining raw fields and primary fields
   return configFields.filter((field, index) => configFields.findIndex(_field => field.config?.value === _field.config?.value) === index);
 };
@@ -200,7 +221,7 @@ export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex,
   const { columnsRawConfig = [] } = options;
   fields.forEach((field, idx) => {
     const rawColumnConfig = columnsRawConfig[idx]?.config;
-    if (field.config.value === PRIMARY_FIELDS) {
+    if (isPrimaryFieldsValue(field.config.value)) {
       labelsOfFields.push('');
     } else if (isFLProperty(rawColumnConfig?.label ?? rawColumnConfig?.caption)) {
       labelsOfFields.push(getFieldLabel(rawColumnConfig) || field.config.label || field.config.caption);
@@ -217,7 +238,7 @@ export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex,
         let label = configFields[i].config?.label;
         if (isFLProperty(label)) {
           label = getFieldLabel(configFields[i].config);
-        } else if (label.startsWith('@')) {
+        } else if (label?.startsWith('@')) {
           label = label.substring(3);
         }
         if (pConnect) {
@@ -233,7 +254,7 @@ export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex,
   return labelsOfFields;
 };
 
-export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, options) => {
+export const buildFieldsForTable = (configFields, pConnect, showActionColumn, options) => {
   const { primaryFieldsViewIndex, fields } = options;
 
   // get resolved field labels for primary fields raw config included in configFields
@@ -247,7 +268,7 @@ export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, op
       label: fieldsLabels[index],
       fillAvailableSpace: !!field.config.fillAvailableSpace,
       id: `${index}`,
-      name: field.config.value.substr(4),
+      name: getPropertyNameFromConfigValue(field.config.value),
       cellRenderer: TABLE_CELL,
       sort: false,
       noContextMenu: true,
@@ -256,12 +277,12 @@ export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, op
         ...field
       },
       // BUG-615253: Workaround for autosize in table with lazy loading components
-      width: getFieldWidth(field, fields[index].config.label)
+      width: getFieldWidth(field, fieldsLabels[index])
     };
   });
 
-  // ONLY add DELETE_ICON to fields when the table is requested as EDITABLE
-  if (showDeleteButton) {
+  // Add the action column when either edit or delete is available.
+  if (showActionColumn) {
     fieldDefs.push({
       type: 'text',
       label: '',

package/lib/template/simple-table-manual/simple-table-manual.component.html

@@ -3,7 +3,14 @@
     <h3 *ngIf="label" className="label" style="font-weight: bold">
       {{ label }} <span class="results-count">{{ getResultsText() }}</span>
     </h3>
-    <table *ngIf="readOnlyMode || allowEditingInModal" mat-table [dataSource]="elementsData" class="mat-elevation-z8" id="readonly-table" matSort>
+    <table
+      *ngIf="readOnlyMode || allowEditingInModal || hideEditRow"
+      mat-table
+      [dataSource]="elementsData"
+      class="mat-elevation-z8"
+      id="readonly-table"
+      matSort
+    >
       <ng-container *ngFor="let dCol of processedFields; let i = index" [matColumnDef]="dCol.config.name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header (click)="_headerSortClick($event, dCol)" arrowPosition="before">
           <div>{{ dCol.config.label }}</div>
@@ -39,20 +46,25 @@
         </td>
       </ng-container>
       <ng-container matColumnDef="DeleteIcon">
-        <div *ngIf="allowEditingInModal">
-          <th mat-header-cell *matHeaderCellDef></th>
-          <td mat-cell *matCellDef="let element; index as j">
-            <div class="header-icon">
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let element; index as j">
+          <ng-container *ngIf="allowEditingInModal; else deleteOnly">
+            <div *ngIf="rowActions[j]?.hasAnyAction" class="header-icon">
               <button mat-icon-button [matMenuTriggerFor]="utilityMenu">
                 <mat-icon>more_vert</mat-icon>
               </button>
               <mat-menu #utilityMenu="matMenu" overlapTrigger="false">
-                <button mat-menu-item (click)="editRecord(element, j)">Edit</button>
-                <button mat-menu-item (click)="deleteRecord(j)">Delete</button>
+                <button *ngIf="rowActions[j]?.canEdit" mat-menu-item (click)="editRecord(element, element.__originalIndex)">Edit</button>
+                <button *ngIf="rowActions[j]?.canDelete" mat-menu-item (click)="deleteRecord(element.__originalIndex)">Delete</button>
               </mat-menu>
             </div>
-          </td>
-        </div>
+          </ng-container>
+          <ng-template #deleteOnly>
+            <button *ngIf="rowActions[j]?.canDelete" id="delete-button" mat-icon-button (click)="deleteRecord(j)">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </ng-template>
+        </td>
       </ng-container>
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
@@ -62,7 +74,13 @@
         </td>
       </tr>
     </table>
-    <table *ngIf="editableMode && !allowEditingInModal" mat-table [dataSource]="elementsData" class="mat-elevation-z8" id="editable-table">
+    <table
+      *ngIf="editableMode && !allowEditingInModal && !hideEditRow"
+      mat-table
+      [dataSource]="elementsData"
+      class="mat-elevation-z8"
+      id="editable-table"
+    >
       <ng-container *ngFor="let dCol of fieldDefs; let i = index">
         <ng-container *ngIf="dCol.name != 'DeleteIcon'" [matColumnDef]="dCol.name">
           <th mat-header-cell *matHeaderCellDef class="psdk-mat-header">{{ dCol.label }}</th>
@@ -81,7 +99,7 @@
       <ng-container matColumnDef="DeleteIcon">
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element; index as j">
-          <button id="delete-button" mat-icon-button (click)="deleteRecord(j)">
+          <button *ngIf="rowActions[j]?.canDelete" id="delete-button" mat-icon-button (click)="deleteRecord(j)">
             <mat-icon>delete</mat-icon>
           </button>
         </td>
@@ -95,9 +113,7 @@
       </tr>
     </table>
   </div>
-  <button *ngIf="showAddRowButton" mat-button color="primary" style="font-size: 16px" (click)="addRecord()">
-    + {{ localizedVal('Add', localeCategory) }}
-  </button>
+  <button *ngIf="showAddRowButton" mat-button color="primary" style="font-size: 16px" (click)="addRecord()">+ {{ addButtonLabel$ }}</button>
 </ng-container>
 
 <!-- pop overs for filters-->

package/lib/template/simple-table-manual/simple-table-manual.component.scss

@@ -165,6 +165,10 @@ tr.mat-mdc-header-row {
   text-align: center;
   border: 1px solid var(--mat-sys-outline-variant);
   border-top: none;
+
+  td.mat-cell {
+    text-align: center;
+  }
 }
 
 .psdk-utility-card-action-svg-icon {