@pega/angular-sdk-overrides 0.26.1 → 0.26.3

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

@@ -17,7 +17,7 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { DatapageService } from '@pega/angular-sdk-components';
 import { getReferenceList } from '@pega/angular-sdk-components';
-import { buildFieldsForTable, filterDataByCommonFields, filterDataByDate, getContext } from './helpers';
+import { buildFieldsForTable, filterDataByCommonFields, filterDataByDate, getConfigFields, getContext, isPrimaryFieldsValue } from './helpers';
 import { evaluateAllowRowAction } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { getSeconds } from '@pega/angular-sdk-components';
@@ -39,6 +39,7 @@ interface SimpleTableManualProps {
   allowActions?: any;
   allowTableEdit?: boolean;
   allowRowDelete?: any;
+  allowRowEdit?: any;
   editMode?: string;
   addAndEditRowsWithin?: any;
   viewForAddAndEditModal?: any;
@@ -46,7 +47,8 @@ interface SimpleTableManualProps {
   displayMode?: string;
   useSeparateViewForEdit: any;
   viewForEditModal: any;
-  targetClassLabel: string;
+  targetClassLabel?: string;
+  uniqueField?: string;
 }
 
 class Group {
@@ -59,6 +61,12 @@ class Group {
   }
 }
 
+interface RowActions {
+  canEdit: boolean;
+  canDelete: boolean;
+  hasAnyAction: boolean;
+}
+
 @Component({
   selector: 'app-simple-table-manual',
   templateUrl: './simple-table-manual.component.html',
@@ -108,6 +116,9 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   elementsData: MatTableDataSource<any>;
   originalElementsData: MatTableDataSource<any>;
   rawFields: any;
+  configFields: any[] = [];
+  uniqueField?: string;
+  normalizedUniqueField?: string;
   label?: string = '';
   searchIcon$: string;
 
@@ -165,9 +176,16 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   settingsSvgIcon$: string;
 
   isInitialized = false;
-  targetClassLabel: string;
+  targetClassLabel = '';
+  addButtonLabel$ = '';
   localizedVal = PCore.getLocaleUtils().getLocaleValue;
   localeCategory = 'SimpleTable';
+  hideEditRow: any;
+  hideDeleteRow: boolean;
+  showEditButton: boolean;
+  showDeleteButton: boolean;
+  showActionColumn: boolean;
+  rowActions: RowActions[] = [];
   constructor(
     private angularPConnect: AngularPConnectService,
     public utils: Utils,
@@ -238,7 +256,6 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       presets,
       allowActions,
       allowTableEdit,
-      allowRowDelete,
       label: labelProp,
       propertyLabel,
       fieldMetadata,
@@ -249,9 +266,15 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       displayMode,
       useSeparateViewForEdit,
       viewForEditModal,
-      targetClassLabel
+      targetClassLabel,
+      uniqueField
     } = this.configProps$;
 
+    // uniqueField is authored as a property reference (ex: ".EmbedListUUID__"); page instructions expect it
+    // with the leading dot while the inserted row payload expects the bare property name.
+    this.uniqueField = uniqueField;
+    this.normalizedUniqueField = uniqueField?.startsWith('.') ? uniqueField.substring(1) : uniqueField;
+
     const simpleTableManualProps: any = {};
     if (this.checkIfAllowActionsOrRowEditingExist(allowActions) && editMode) {
       simpleTableManualProps.hideAddRow = allowActions?.allowAdd === false;
@@ -267,7 +290,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     this.referenceListStr = getContext(this.pConn$).referenceListStr;
     this.label = labelProp || propertyLabel;
     this.parameters = fieldMetadata?.datasource?.parameters;
-    this.targetClassLabel = targetClassLabel;
+    this.targetClassLabel = targetClassLabel ?? '';
+    this.addButtonLabel$ = this.getAddButtonLabel();
     let { contextClass } = this.configProps$;
     this.referenceList = referenceList;
     if (!contextClass) {
@@ -304,10 +328,16 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     this.readOnlyMode = renderMode === 'ReadOnly';
     this.editableMode = renderMode === 'Editable';
     const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
-    this.showAddRowButton = !this.readOnlyMode && !simpleTableManualProps.hideAddRow;
+    this.showAddRowButton = this.getShowAddRowButton(simpleTableManualProps.hideAddRow);
+    this.hideEditRow = simpleTableManualProps.hideEditRow;
+    this.hideDeleteRow = simpleTableManualProps.hideDeleteRow;
     this.allowEditingInModal =
       (editMode ? editMode === 'modal' : addAndEditRowsWithin === 'modal') && !(renderMode === 'ReadOnly' || isDisplayModeEnabled);
-    const showDeleteButton = this.editableMode && !simpleTableManualProps.hideDeleteRow && evaluateAllowRowAction(allowRowDelete, this.rowData);
+    this.showEditButton = this.allowEditingInModal && !this.hideEditRow;
+    this.showDeleteButton = this.editableMode && !this.hideDeleteRow;
+    this.showActionColumn = this.showEditButton || this.showDeleteButton;
+    const { allowRowEdit, allowRowDelete } = this.pConn$.getComponentConfig?.() ?? {};
+    this.rowActions = this.referenceList.map(row => this.getRowActions(row, allowRowEdit, allowRowDelete));
     this.defaultView = editModeConfig ? editModeConfig.defaultView : viewForAddAndEditModal;
     this.bUseSeparateViewForEdit = editModeConfig ? editModeConfig.useSeparateViewForEdit : useSeparateViewForEdit;
     this.editView = editModeConfig ? editModeConfig.editView : viewForEditModal;
@@ -315,9 +345,14 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     this.defaultActionId = this.editType === 'action' ? editModeConfig?.defaultAction : undefined;
     this.editActionId =
       this.editType === 'action' && editModeConfig?.useSeparateActionForEdit ? editModeConfig?.editAction : editModeConfig?.defaultAction;
-    const primaryFieldsViewIndex = resolvedFields.findIndex(field => field.config.value === 'pyPrimaryFields');
+    const primaryFieldsViewIndex = resolvedFields?.findIndex(field => isPrimaryFieldsValue(field.config.value)) ?? -1;
     // const showDeleteButton = !this.readOnlyMode && !hideDeleteRow;
 
+    // "pyPrimaryFields" is a single authored column that expands into several real columns, so the
+    // resolved/raw children can no longer be used directly - configFields is the expanded column list.
+    const configFields = getConfigFields(rawFields, contextClass, primaryFieldsViewIndex);
+    this.configFields = configFields.filter(field => !(field?.config?.hide === true));
+
     // Nebula has other handling for isReadOnlyMode but has Cosmos-specific code
     //  so ignoring that for now...
     // fieldDefs will be an array where each entry will have a "name" which will be the
@@ -326,7 +361,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  Nebula does). It will also have the "label", and "meta" contains the original,
     //  unchanged config info. For now, much of the info here is carried over from
     //  Nebula and we may not end up using it all.
-    this.fieldDefs = buildFieldsForTable(rawFields, this.pConn$, showDeleteButton, {
+    this.fieldDefs = buildFieldsForTable(configFields, this.pConn$, this.showActionColumn, {
       primaryFieldsViewIndex,
       fields: resolvedFields
     });
@@ -342,7 +377,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       return field.name ? field.name : field.cellRenderer;
     });
 
-    // And now we can process the resolvedFields to add in the "name"
+    // And now we can process the configFields to add in the "name"
     //  from from the fieldDefs. This "name" is the value that
     //  we'll share to connect things together in the table.
 
@@ -350,12 +385,9 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       return { ...acc, [curr.name]: curr.label };
     }, {});
 
-    this.processedFields = [];
-
-    this.processedFields = resolvedFields.map((field, i) => {
-      field.config.name = this.displayedColumns[i]; // .config["value"].replace(/ ./g,"_");   // replace space dot with underscore
-      field.config.label = labelsMap[field.config.name] || field.config.label;
-      return field;
+    this.processedFields = this.configFields.map((field, i) => {
+      const name = this.displayedColumns[i];
+      return { ...field, config: { ...field.config, name, label: labelsMap[name] || field.config.label } };
     });
 
     // for adding rows to table when editable and not modal view
@@ -364,7 +396,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     }
 
     // for edit and adding rows in modal view and to generate readonly list
-    if (!isEqual(this.prevReferenceList, this.referenceList) && (this.readOnlyMode || this.allowEditingInModal)) {
+    if (!isEqual(this.prevReferenceList, this.referenceList) && (this.readOnlyMode || this.allowEditingInModal || this.hideEditRow)) {
       this.generateRowsData();
     }
 
@@ -391,15 +423,22 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   }
 
   initializeDefaultPageInstructions() {
+    if (!this.isInitialized) {
+      return;
+    }
+
+    this.isInitialized = false;
+
     if (this.allowEditingInModal) {
       this.pConn$.getListActions().initDefaultPageInstructions(
         this.pConn$.getReferenceList(),
-        this.fieldDefs.filter(item => item.name).map(item => item.name)
+        // Temporary filter for attachments to align with constellation payload behavior.
+        this.fieldDefs.filter(item => item.name && item.meta?.type !== 'Attachment').map(item => item.name),
+        this.uniqueField
       );
-    } else if (this.isInitialized) {
-      this.isInitialized = false;
-      // @ts-ignore - An argument for 'propertyNames' was not provided.
-      this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList());
+    } else {
+      // @ts-ignore - 'propertyNames' is optional at runtime; uniqueField is passed as the 3rd argument.
+      this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList(), undefined, this.uniqueField);
     }
   }
 
@@ -408,6 +447,31 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     return `${recordsCount || 0} result${recordsCount > 1 ? 's' : ''}`;
   }
 
+  private getRowActions(row: any, allowRowEdit: any, allowRowDelete: any): RowActions {
+    const canEdit = this.showEditButton && evaluateAllowRowAction(allowRowEdit, row);
+    const canDelete = this.showDeleteButton && this.isDeleteAllowedForRow(row, allowRowDelete);
+
+    return {
+      canEdit,
+      canDelete,
+      hasAnyAction: canEdit || canDelete
+    };
+  }
+
+  private isDeleteAllowedForRow(row: any, allowRowDelete: any): boolean {
+    if (allowRowDelete === undefined || allowRowDelete === true) return true;
+    if (typeof allowRowDelete === 'string' && allowRowDelete.startsWith('@E ')) {
+      try {
+        const expression = allowRowDelete.replace('@E ', '');
+        // @ts-expect-error - options param is optional per corejs docs
+        return PCore.getExpressionEngine().evaluate(expression, row);
+      } catch {
+        return true;
+      }
+    }
+    return false;
+  }
+
   sortCompare(a, b): number {
     let aValue = a[0][this.compareRef];
     let bValue = b[0][this.compareRef];
@@ -927,9 +991,13 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     // See what data (if any) we have to display
     const refKeys: string[] = inColKey.split('.');
     let valBuilder = inRowData;
+    let index = 0;
+
     for (const key of refKeys) {
-      valBuilder = valBuilder[key] ? valBuilder[key] : valBuilder;
+      index += 1;
+      valBuilder = valBuilder[key] !== undefined || index === refKeys.length ? valBuilder[key] : valBuilder;
     }
+
     return valBuilder;
   }
 
@@ -977,7 +1045,11 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
           this.defaultActionId
         );
     } else {
-      this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
+      const payload: any = { classID: this.contextClass };
+      if (this.normalizedUniqueField) {
+        payload[this.normalizedUniqueField] = crypto.randomUUID();
+      }
+      this.pConn$.getListActions().insert(payload, this.referenceList.length);
     }
 
     this.pConn$.clearErrorMessages({
@@ -985,8 +1057,20 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     });
   }
 
+  getAddButtonLabel(): string {
+    const addLabel = this.targetClassLabel
+      ? this.localizedVal('Add {0}', this.localeCategory).replace('{0}', this.targetClassLabel)
+      : this.localizedVal('Add', this.localeCategory);
+
+    return this.localizedVal(addLabel, this.localeCategory);
+  }
+
+  getShowAddRowButton(hideAddRow?: boolean): boolean {
+    return !this.readOnlyMode && !hideAddRow;
+  }
+
   editRecord(data, index) {
-    if (data) {
+    if (data && Number.isInteger(index) && index >= 0 && index < this.referenceList.length) {
       const viewForEdit = this.bUseSeparateViewForEdit ? this.editView : this.defaultView;
       this.pConn$
         .getActionsApi()
@@ -1004,22 +1088,27 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   }
 
   deleteRecord(index) {
-    this.pConn$.getListActions().deleteEntry(index);
+    if (Number.isInteger(index) && index >= 0 && index < this.referenceList.length) {
+      this.pConn$.getListActions().deleteEntry(index);
+    }
   }
 
   buildElementsForTable() {
     const context = this.pConn$.getContextName();
+    const { allowRowEdit } = this.pConn$.getComponentConfig?.() ?? {};
     const eleData: any = [];
     this.referenceList.forEach((element, index) => {
+      const isRowEditable = evaluateAllowRowAction(allowRowEdit, element);
       const data: any = [];
-      this.rawFields?.forEach(item => {
+      data.__originalIndex = index;
+      this.configFields?.forEach(item => {
         if (!item?.config?.hide) {
           item = {
             ...item,
             config: {
               ...item.config,
               label: '',
-              displayMode: this.readOnlyMode || this.allowEditingInModal ? 'DISPLAY_ONLY' : undefined
+              displayMode: this.readOnlyMode || this.allowEditingInModal || this.hideEditRow || !isRowEditable ? 'DISPLAY_ONLY' : undefined
             }
           };
           const referenceListData = getReferenceList(this.pConn$);

package/lib/template/single-reference-readonly/single-reference-readonly.component.html

@@ -1,4 +1,4 @@
-<div [ngClass]="displayMode ? 'psdk-grid-display' : 'psdk-grid-nondisplay'">
+<div [ngClass]="displayMode ? 'psdk-grid-display' : 'psdk-grid-nondisplay'" [class.psdk-details-reference-value]="isDetails$">
   <div *ngIf="label" class="psdk-grid-label">{{ label }}</div>
   <component-mapper name="SemanticLink" [props]="{ pConn$: newPconn, formGroup$ }"></component-mapper>
 </div>

package/lib/template/single-reference-readonly/single-reference-readonly.component.scss

@@ -7,8 +7,8 @@
   margin-top: 1rem;
 }
 
-.psdk-grid-nondisplay {
-  margin-top: 1rem;
+.psdk-details-reference-value {
+  margin-top: 0;
 }
 
 .psdk-label {

package/lib/template/single-reference-readonly/single-reference-readonly.component.ts

@@ -14,7 +14,8 @@ import { getDataRelationshipContextFromKey } from '@pega/angular-sdk-components'
 export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
-  @Input() dataRelationshipContext?: any;
+  @Input() dataRelationshipContext: any = null;
+  @Input() isDetails$ = false;
 
   angularPConnectData: AngularPConnectData = {};
   configProps: any;
@@ -66,9 +67,8 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
     const hideLabel = this.configProps.hideLabel;
     // const additionalFields = this.configProps.additionalFields;
     const displayAs = this.configProps.displayAs ?? 'readonly';
-    const dataRelationshipContext = (rawViewMetadata?.config as any)?.displayField
-      ? getDataRelationshipContextFromKey((rawViewMetadata?.config as any)?.displayField)
-      : this.dataRelationshipContext;
+    const dataRelationshipContext =
+      this.dataRelationshipContext ?? getDataRelationshipContextFromKey((rawViewMetadata?.config as any)?.displayField ?? '');
     if (propsToUse.showLabel === false) {
       propsToUse.label = '';
     }

package/lib/template/wss-nav-bar/wss-nav-bar.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatListModule } from '@angular/material/list';
@@ -52,7 +52,6 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
     private angularPConnect: AngularPConnectService,
     private cdRef: ChangeDetectorRef,
     private psService: ProgressSpinnerService,
-    private ngZone: NgZone,
     private utils: Utils
   ) {}
 
@@ -102,30 +101,29 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
   }
 
   initComponent() {
-    this.ngZone.run(() => {
-      this.navIcon$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
-      this.navExpandCollapse$ = this.utils.getImageSrc('plus', this.utils.getSDKStaticContentUrl());
+    this.navIcon$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
+    this.navExpandCollapse$ = this.utils.getImageSrc('plus', this.utils.getSDKStaticContentUrl());
 
-      // Then, continue on with other initialization
+    // Then, continue on with other initialization
 
-      // making a copy, so can add info
-      this.navPages$ = JSON.parse(JSON.stringify(this.pages$));
+    // making a copy, so can add info
+    this.navPages$ = JSON.parse(JSON.stringify(this.pages$));
 
-      this.navPages$.forEach(page => {
-        page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
-      });
+    this.navPages$.forEach(page => {
+      page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
+    });
 
-      this.actionsAPI = this.pConn$.getActionsApi();
-      this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
-      this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
-      this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as WssNavBarProps;
-      this.logout = this.actionsAPI.logout.bind(this.actionsAPI);
+    this.actionsAPI = this.pConn$.getActionsApi();
+    this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
+    this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as WssNavBarProps;
+    this.logout = this.actionsAPI.logout.bind(this.actionsAPI);
 
-      // const oData = this.pConn$.getDataObject();
+    // const oData = this.pConn$.getDataObject();
 
-      this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
-      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
-    });
+    this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
+    this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
+    this.cdRef.markForCheck();
   }
 
   navPanelButtonClick(oPageData: any) {

package/lib/widget/attachment/AttachmentUtils.ts

@@ -270,18 +270,26 @@ export const onFileDownload = (responseProps, context) => {
 
 // Prepares new structure as per Cosmos component
 export const transformAttachments = attachments => {
-  const transformedFiles = [...attachments];
   let deleteIndex = -1;
-  transformedFiles.forEach(attachment => {
-    attachment.props.id = attachment.responseProps.ID;
-    attachment.props.format = attachment.props.name.split('.').pop();
-    if (attachment.props.error) {
-      attachment.responseProps.deleteIndex = deleteIndex;
-    } else {
+
+  return attachments.map(attachment => {
+    const props = {
+      ...attachment.props,
+      id: attachment.responseProps.ID,
+      format: attachment.props.name.split('.').pop()
+    };
+
+    if (!props.error) {
       deleteIndex += 1;
-      attachment.responseProps.deleteIndex = deleteIndex;
     }
-  });
 
-  return transformedFiles;
+    return {
+      ...attachment,
+      props,
+      responseProps: {
+        ...attachment.responseProps,
+        deleteIndex
+      }
+    };
+  });
 };

package/lib/widget/attachment/attachment.component.html

@@ -1,6 +1,6 @@
 <div class="file-upload-container" *ngIf="bVisible$">
   <span class="attachment-label" [ngClass]="{ 'file-label': bRequired$ }">{{ label$ }}</span>
-  <div *ngIf="(files.length === 0 && !allowMultiple$) || allowMultiple$">
+  <div *ngIf="displayMode !== 'DISPLAY_ONLY' && ((files.length === 0 && !allowMultiple$) || allowMultiple$)">
     <div
       style="margin-bottom: 10px"
       id="attachment-container"
@@ -36,18 +36,28 @@
           <div *ngIf="file.props.meta" [ngStyle]="{ color: file.props.error ? 'red' : null }">{{ file.props.meta }}</div>
         </div>
         <div class="psdk-attachment-action">
-          <button id="delete-attachment" *ngIf="file.ID" class="psdk-utility-button" (click)="deleteFile(file, i)">
-            <img class="psdk-utility-card-action-svg-icon" src="{{ deleteIcon }}" />
-          </button>
-          <div *ngIf="!file.ID">
+          <div *ngIf="displayMode === 'DISPLAY_ONLY'; else editableActions">
             <button id="setting-button" mat-icon-button [matMenuTriggerFor]="actionMenu">
               <mat-icon>more_vert</mat-icon>
             </button>
             <mat-menu #actionMenu="matMenu">
               <button mat-menu-item (click)="downloadFile(file.responseProps ? file.responseProps : {})">Download</button>
-              <button mat-menu-item (click)="deleteFile(file, i)">Delete</button>
             </mat-menu>
           </div>
+          <ng-template #editableActions>
+            <button id="delete-attachment" *ngIf="file.ID" class="psdk-utility-button" (click)="deleteFile(file, i)">
+              <img class="psdk-utility-card-action-svg-icon" src="{{ deleteIcon }}" />
+            </button>
+            <div *ngIf="!file.ID">
+              <button id="setting-button" mat-icon-button [matMenuTriggerFor]="actionMenu">
+                <mat-icon>more_vert</mat-icon>
+              </button>
+              <mat-menu #actionMenu="matMenu">
+                <button mat-menu-item (click)="downloadFile(file.responseProps ? file.responseProps : {})">Download</button>
+                <button mat-menu-item (click)="deleteFile(file, i)">Delete</button>
+              </mat-menu>
+            </div>
+          </ng-template>
         </div>
       </div>
     </div>

package/lib/widget/attachment/attachment.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, OnDestroy, ViewChild, ElementRef } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, OnDestroy, ViewChild, ElementRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
@@ -76,7 +76,8 @@ export class AttachmentComponent implements OnInit, OnDestroy {
 
   constructor(
     private angularPConnect: AngularPConnectService,
-    private utils: Utils
+    private utils: Utils,
+    private cdRef: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
@@ -96,6 +97,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
         PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION,
         () => {
           this.overrideLocalState = true;
+          this.cdRef.markForCheck();
         },
         this.caseID
       );
@@ -207,6 +209,13 @@ export class AttachmentComponent implements OnInit, OnDestroy {
           isArrayDeepMerge: false,
           removePropertyFromChangedList: true
         });
+      } else if (this.filesWithError.length === 0) {
+        const hasActiveUpload = this.files.some(file => file.inProgress);
+        if (!hasActiveUpload) {
+          this.files = transformAttachments(this.attachments);
+          this.attachmentCount = this.attachments.length;
+          this.filesWithError = [];
+        }
       }
     }
   }
@@ -336,6 +345,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
       }
       return localFile;
     });
+    this.cdRef.markForCheck();
   }
 
   populateErrorAndUpdateRedux(file) {

package/lib/widget/case-history/case-history.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { Utils } from '@pega/angular-sdk-components';
@@ -23,7 +23,10 @@ export class CaseHistoryComponent implements OnInit {
   displayedColumns$ = Array<any>();
   waitingForData = false;
 
-  constructor(private utils: Utils) {}
+  constructor(
+    private utils: Utils,
+    private cdRef: ChangeDetectorRef
+  ) {}
 
   ngOnInit(): void {
     this.configProps$ = this.pConn$.getConfigProps();
@@ -54,6 +57,7 @@ export class CaseHistoryComponent implements OnInit {
       this.repeatList$ = new MatTableDataSource(tableDataResults);
 
       this.waitingForData = false;
+      this.cdRef.markForCheck();
     });
   }
   // This method isn't being used anywhere, keeping it as a reference for now