@pega/dx-component-builder-sdk 24.2.11 → 24.2.13

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/assignment/assignment.component.ts

@@ -6,9 +6,18 @@ import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ErrorMessagesService } from '@pega/angular-sdk-components';
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
+import { BannerService } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
+function getRefreshProps(refreshConditions) {
+  // refreshConditions cuurently supports only "Changes" event
+  if (!refreshConditions) {
+    return [];
+  }
+  return refreshConditions.filter(item => item.event && item.event === 'Changes').map(item => [item.field, item.field?.substring(1)]) || [];
+}
+
 interface AssignmentProps {
   // If any, enter additional props that only exist on this component
   template: string;
@@ -29,7 +38,6 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   @Input() isCreateStage$: boolean;
   @Input() updateToken$: number;
   @Input() isInModal$ = false;
-  @Input() banners;
 
   // For interaction with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
@@ -69,12 +77,15 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   localeCategory = 'Assignment';
   localeReference;
 
+  snackBarRef;
+
   constructor(
     private angularPConnect: AngularPConnectService,
     private psService: ProgressSpinnerService,
     private erService: ErrorMessagesService,
     private ngZone: NgZone,
-    private snackBar: MatSnackBar
+    private snackBar: MatSnackBar,
+    public bannerService: BannerService
   ) {}
 
   ngOnInit(): void {
@@ -105,6 +116,8 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     // Should always check the bridge to see if the component should update itself (re-render)
     const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
 
+    this.bannerService.updateBanners(this.itemKey$);
+
     // ONLY call updateSelf when the component should update
     //    AND removing the "gate" that was put there since shouldComponentUpdate
     //      should be the real "gate"
@@ -128,6 +141,8 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   updateChanges() {
+    this.registerForRefresh();
+
     // pConn$ may be a 'reference' component, so normalize it
     this.newPConn$ = ReferenceComponent.normalizePConn(this.pConn$);
 
@@ -285,6 +300,9 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   buttonClick(sAction, sButtonType) {
+    this.snackBarRef?.dismiss();
+    this.bannerService.clearBanners();
+    PCore.getPubSubUtils().publish('clearBannerMessages');
     // right now, done on an individual basis, setting bReInit to true
     // upon the next flow container state change, will cause the flow container
     // to re-initialize
@@ -308,21 +326,21 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
       switch (sAction) {
         case 'navigateToStep':
           this.erService.sendMessage('publish', '');
-          if (this.formValid()) {
-            this.bReInit = true;
-            this.psService.sendMessage(true);
 
-            const navigatePromise = this.navigateToStep('previous', this.itemKey$);
-            navigatePromise
-              .then(() => {
-                this.updateChanges();
-                this.psService.sendMessage(false);
-              })
-              .catch(() => {
-                this.psService.sendMessage(false);
-                this.snackBar.open(`${this.localizedVal('Navigation failed!', this.localeCategory)}`, 'Ok');
-              });
-          }
+          this.bReInit = true;
+          this.psService.sendMessage(true);
+
+          const navigatePromise = this.navigateToStep('previous', this.itemKey$);
+          navigatePromise
+            .then(() => {
+              this.updateChanges();
+              this.psService.sendMessage(false);
+            })
+            .catch(() => {
+              this.psService.sendMessage(false);
+              this.snackBarRef = this.snackBar.open(`${this.localizedVal('Navigation failed!', this.localeCategory)}`, 'Ok');
+            });
+
           break;
 
         case 'saveAssignment': {
@@ -338,7 +356,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
             })
             .catch(() => {
               this.psService.sendMessage(false);
-              this.snackBar.open(`${this.localizedVal('Save failed', this.localeCategory)}`, 'Ok');
+              this.snackBarRef = this.snackBar.open(`${this.localizedVal('Save failed', this.localeCategory)}`, 'Ok');
             });
 
           break;
@@ -362,7 +380,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
               })
               .catch(() => {
                 this.psService.sendMessage(false);
-                this.snackBar.open(`${this.localizedVal('Cancel failed!', this.localeCategory)}`, 'Ok');
+                this.snackBarRef = this.snackBar.open(`${this.localizedVal('Cancel failed!', this.localeCategory)}`, 'Ok');
               });
           } else {
             this.psService.sendMessage(true);
@@ -379,7 +397,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
               })
               .catch(() => {
                 this.psService.sendMessage(false);
-                this.snackBar.open(`${this.localizedVal('Cancel failed!', this.localeCategory)}`, 'Ok');
+                this.snackBarRef = this.snackBar.open(`${this.localizedVal('Cancel failed!', this.localeCategory)}`, 'Ok');
               });
           }
           break;
@@ -391,7 +409,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
             .then(() => {})
             .catch(() => {
               this.psService.sendMessage(false);
-              this.snackBar.open(`${this.localizedVal('Rejection failed!', this.localeCategory)}`, 'Ok');
+              this.snackBarRef = this.snackBar.open(`${this.localizedVal('Rejection failed!', this.localeCategory)}`, 'Ok');
             });
 
           break;
@@ -404,23 +422,18 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
       switch (sAction) {
         case 'finishAssignment':
           this.erService.sendMessage('publish', '');
-          if (this.formValid()) {
-            this.bReInit = true;
-            this.psService.sendMessage(true);
-            const finishPromise = this.finishAssignment(this.itemKey$); // JA - was itemID but Nebula/Constellation uses itemKey
-            finishPromise
-              .then(() => {
-                this.psService.sendMessage(false);
-                this.updateChanges();
-              })
-              .catch(() => {
-                this.psService.sendMessage(false);
-                this.snackBar.open(`${this.localizedVal('Submit failed!', this.localeCategory)}`, 'Ok');
-              });
-          } else {
-            // let snackBarRef = this.snackBar.open("Please fix errors on form.",  "Ok");
-            this.erService.sendMessage('show', this.localizedVal('Please fix errors on form.', this.localeCategory));
-          }
+          this.bReInit = true;
+          this.psService.sendMessage(true);
+          const finishPromise = this.finishAssignment(this.itemKey$); // JA - was itemID but Nebula/Constellation uses itemKey
+          finishPromise
+            .then(() => {
+              this.psService.sendMessage(false);
+              this.updateChanges();
+            })
+            .catch(() => {
+              this.psService.sendMessage(false);
+              this.snackBarRef = this.snackBar.open(`${this.localizedVal('Submit failed!', this.localeCategory)}`, 'Ok');
+            });
           break;
 
         case 'approveCase': {
@@ -430,7 +443,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
             .then(() => {})
             .catch(() => {
               this.psService.sendMessage(false);
-              this.snackBar.open(`${this.localizedVal('Approve failed!', this.localeCategory)}`, 'Ok');
+              this.snackBarRef = this.snackBar.open(`${this.localizedVal('Approve failed!', this.localeCategory)}`, 'Ok');
             });
 
           break;
@@ -452,10 +465,40 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     });
   }
 
-  // eslint-disable-next-line sonarjs/no-identical-functions
   topViewRefresh(): void {
     Object.values(this.formGroup$.controls).forEach((control: any) => {
       control.markAsTouched();
     });
   }
+
+  registerForRefresh() {
+    const refreshConditions = this.pConn$.getCaseInfo()?.getActionRefreshConditions();
+    const pageReference = this.pConn$.getPageReference();
+    const context = this.pConn$.getContextName();
+
+    // refresh api de-registration
+    PCore.getRefreshManager().deRegisterForRefresh(context);
+
+    // refresh api registration
+    const refreshProps = getRefreshProps(refreshConditions);
+    const caseKey = this.pConn$.getCaseInfo().getKey();
+    const refreshOptions = {
+      autoDetectRefresh: true,
+      preserveClientChanges: false
+    };
+    if (refreshProps.length > 0) {
+      refreshProps.forEach(prop => {
+        PCore.getRefreshManager().registerForRefresh(
+          'PROP_CHANGE',
+          this.pConn$.getActionsApi().refreshCaseView.bind(this.pConn$.getActionsApi(), caseKey, '', pageReference, {
+            ...refreshOptions,
+            refreshFor: prop[0]
+          }),
+          `${pageReference}.${prop[1]}`,
+          `${context}/${pageReference}`,
+          context
+        );
+      });
+    }
+  }
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/assignment-card/assignment-card.component.html

@@ -18,6 +18,7 @@
   <div class="psdk-case-view-divider"></div>
 
   <component-mapper
+    *ngIf="arMainButtons$ && arSecondaryButtons$"
     name="ActionButtons"
     [props]="{ arMainButtons$, arSecondaryButtons$ }"
     [parent]="this"

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/defer-load/defer-load.component.ts

@@ -38,6 +38,7 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
   CASE: any;
   PAGE: any;
   DATA: any;
+  lastUpdateCaseTime;
   constructor(private angularPConnect: AngularPConnectService) {
     this.constants = PCore.getConstants();
   }
@@ -58,8 +59,10 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
     // Should always check the bridge to see if the component should
     // update itself (re-render)
     const theRequestedAssignment = this.pConn$.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENT_LABEL);
-    if (theRequestedAssignment !== this.currentLoadedAssignment) {
+    const lastUpdateCaseTime = this.pConn$.getValue('caseInfo.lastUpdateTime');
+    if (theRequestedAssignment !== this.currentLoadedAssignment || (lastUpdateCaseTime && lastUpdateCaseTime !== this.lastUpdateCaseTime)) {
       this.currentLoadedAssignment = theRequestedAssignment;
+      this.lastUpdateCaseTime = lastUpdateCaseTime;
       this.loadActiveTab();
     }
   }

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/flow-container/flow-container.component.ts

@@ -6,7 +6,7 @@ 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, showBanner } from './helpers';
+import { getToDoAssignments, hasAssignments, showBanner } from './helpers';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { FlowContainerBaseComponent } from '@pega/angular-sdk-components';
 
@@ -121,6 +121,14 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
       },
       'cancelPressed'
     );
+
+    PCore.getPubSubUtils().subscribe(
+      'clearBannerMessages',
+      () => {
+        this.banners = [];
+      },
+      'clearBannerMessages'
+    );
   }
 
   ngOnDestroy() {
@@ -131,6 +139,8 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, 'cancelAssignment');
 
     PCore.getPubSubUtils().unsubscribe('cancelPressed', 'cancelPressed');
+
+    PCore.getPubSubUtils().unsubscribe('clearBannerMessages', 'clearBannerMessages');
   }
 
   handleCancel() {
@@ -155,13 +165,15 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     const caseViewModeFromProps = this.angularPConnect.getComponentProp(this, 'caseViewMode');
     const caseViewModeFromRedux = pConn.getValue('context_data.caseViewMode', '');
 
+    const completeProps = this.angularPConnect.getCurrentCompleteProps(this) as FlowContainerProps;
+
     // ONLY call updateSelf when the component should update
     //    AND removing the "gate" that was put there since shouldComponentUpdate
     //      should be the real "gate"
+    // eslint-disable-next-line sonarjs/no-collapsible-if
     if (bUpdateSelf || caseViewModeFromProps !== caseViewModeFromRedux) {
       // don't want to redraw the flow container when there are page messages, because
       // the redraw causes us to loose the errors on the elements
-      const completeProps = this.angularPConnect.getCurrentCompleteProps(this) as FlowContainerProps;
       if (!completeProps.pageMessages || completeProps.pageMessages.length == 0) {
         // with a cancel, need to timeout so todo will update correctly
         if (this.bHasCancel) {
@@ -172,10 +184,10 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
         } else {
           this.updateSelf();
         }
-      } else {
-        this.showPageMessages(completeProps);
       }
     }
+
+    this.showPageMessages(completeProps);
   }
 
   showPageMessages(completeProps: FlowContainerProps) {
@@ -277,41 +289,6 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     this.psService.sendMessage(false);
   }
 
-  hasAssignments() {
-    let hasAssignments = false;
-    const assignmentsList = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
-    // const thisOperator = PCore.getEnvironmentInfo().getOperatorIdentifier();
-    // 8.7 includes assignments in Assignments List that may be assigned to
-    //  a different operator. So, see if there are any assignments for
-    //  the current operator
-    const isEmbedded = window.location.href.includes('embedded');
-    let bAssignmentsForThisOperator = false;
-
-    if (isEmbedded) {
-      const thisOperator = PCore.getEnvironmentInfo().getOperatorIdentifier();
-      for (const assignment of assignmentsList) {
-        if (assignment.assigneeInfo.ID === thisOperator) {
-          bAssignmentsForThisOperator = true;
-        }
-      }
-    } else {
-      bAssignmentsForThisOperator = true;
-    }
-
-    // Bail if there is no assignmentsList
-    if (!assignmentsList) {
-      return hasAssignments;
-    }
-
-    const hasChildCaseAssignments = this.hasChildCaseAssignments();
-
-    if (bAssignmentsForThisOperator || hasChildCaseAssignments || this.isCaseWideLocalAction()) {
-      hasAssignments = true;
-    }
-
-    return hasAssignments;
-  }
-
   isCaseWideLocalAction() {
     const actionID = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.ACTIVE_ACTION_ID);
     const caseActions = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.AVAILABLEACTIONS);
@@ -461,7 +438,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     this.caseMessages$ = this.localizedVal(this.pConn$.getValue('caseMessages'), this.localeCategory);
     // caseMessages's behavior has changed in 24.2, and hence it doesn't let Optional Action work.
     // Changing the below condition for now. Was: (theCaseMessages || !hasAssignments())
-    if (!this.hasAssignments()) {
+    if (!hasAssignments(this.pConn$)) {
       this.bHasCaseMessages$ = true;
       this.bShowConfirm = true;
       this.checkSvg$ = this.utils.getImageSrc('check', this.utils.getSDKStaticContentUrl());
@@ -471,9 +448,6 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
         this.caseMessages$ = this.localizedVal('Thank you! The next step in this case has been routed appropriately.', this.localeCategory);
       }
 
-      // publish this "assignmentFinished" for mashup, need to get approved as a standard
-      PCore.getPubSubUtils().publish('assignmentFinished');
-
       this.psService.sendMessage(false);
     } else {
       this.bHasCaseMessages$ = false;

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/flow-container/helpers.ts

@@ -28,12 +28,12 @@ function getChildCaseAssignments(pConnect) {
   return allAssignments;
 }
 
-function hasAssignments(pConnect) {
+export function hasAssignments(pConnect) {
   const { CASE_INFO } = PCore.getConstants();
   const assignments = pConnect.getValue(CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
   const childCasesAssignments = getChildCaseAssignments(pConnect);
 
-  return assignments || childCasesAssignments || isCaseWideLocalAction(pConnect);
+  return assignments || childCasesAssignments?.length || isCaseWideLocalAction(pConnect);
 }
 
 export const showBanner = getPConnect => {

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/modal-view-container/modal-view-container.component.html

@@ -1,4 +1,4 @@
-<div id="dialog" *ngIf="bShowModal$ && bShowAsModal$" class="psdk-dialog-background">
+<div id="dialog" *ngIf="bShowModal$" class="psdk-dialog-background">
   <div class="psdk-modal-view-container-top" id="{{ buildName$ }}">
     <h3 *ngIf="title$ != ''">{{ title$ }}</h3>
     <component-mapper
@@ -15,16 +15,6 @@
   </div>
 </div>
 
-<div *ngIf="bShowModal$ && !bShowAsModal$">
-  <div id="{{ buildName$ }}">
-    <h3 *ngIf="title$ != ''">{{ title$ }}</h3>
-    <component-mapper
-      name="Assignment"
-      [props]="{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$ }"
-    ></component-mapper>
-  </div>
-</div>
-
 <div *ngIf="bShowCancelAlert$">
   <component-mapper
     name="CancelAlert"

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/modal-view-container/modal-view-container.component.ts

@@ -23,7 +23,6 @@ import { ReferenceComponent } from '@pega/angular-sdk-components';
 })
 export class ModalViewContainerComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
-  @Input() displayOnlyFA$: boolean;
 
   // for when non modal
   @Output() modalVisibleChange = new EventEmitter<boolean>();
@@ -39,7 +38,6 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
   context$: string;
   title$ = '';
   bShowModal$ = false;
-  bShowAsModal$ = true;
   itemKey$: string;
   formGroup$: FormGroup;
   oCaseInfo: Object = {};
@@ -73,11 +71,6 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    if (this.displayOnlyFA$) {
-      // for when non modal
-      this.bShowAsModal$ = false;
-    }
-
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
 

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/navbar/navbar.component.ts

@@ -7,8 +7,6 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 
-declare const window: any;
-
 interface NavBarProps {
   // If any, enter additional props that only exist on this component
   showAppName?: boolean;

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/root-container/root-container.component.html

@@ -5,20 +5,11 @@
 <div *ngIf="bShowRoot$">
   <div [ngSwitch]="componentName$">
     <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ pConn$, displayOnlyFA$ }"></component-mapper>
-    <!-- <app-reference *ngSwitchCase="'reference'" [pConn$]="pConn$" [displayOnlyFA$]="displayOnlyFA$"></app-reference> -->
     <component-mapper
       *ngSwitchCase="'ViewContainer'"
       name="ViewContainer"
-      [props]="{ pConn$: displayOnlyFA$ ? viewContainerPConn$ : pConn$, displayOnlyFA$ }"
+      [props]="{ pConn$: viewContainerPConn$, displayOnlyFA$ }"
     ></component-mapper>
-    <app-hybrid-view-container *ngSwitchCase="'HybridViewContainer'" [pConn$]="pConn$" [displayOnlyFA$]="displayOnlyFA$"></app-hybrid-view-container>
-    <app-modal-view-container
-      *ngSwitchCase="'ModalViewContainer'"
-      [pConn$]="pConn$"
-      [displayOnlyFA$]="displayOnlyFA$"
-      (modalVisibleChange)="modalVisibleChanged($event)"
-    ></app-modal-view-container>
-    <div *ngSwitchCase="''"></div>
     <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>
   </div>
 </div>
@@ -28,9 +19,5 @@
 </div>
 
 <div *ngIf="mConn$ != null">
-  <app-modal-view-container
-    [pConn$]="mConn$"
-    [displayOnlyFA$]="displayOnlyFA$"
-    (modalVisibleChange)="modalVisibleChanged($event)"
-  ></app-modal-view-container>
+  <app-modal-view-container [pConn$]="mConn$"></app-modal-view-container>
 </div>

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/root-container/root-container.component.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { interval, Subscription } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ServerConfigService } from '@pega/angular-sdk-components';
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { PreviewViewContainerComponent } from '@pega/angular-sdk-components';
@@ -37,6 +38,8 @@ export class RootContainerComponent implements OnInit, OnDestroy {
   @Input() displayOnlyFA$: boolean;
   @Input() isMashup$: boolean;
 
+  scService = inject(ServerConfigService);
+
   // For interaction with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
 
@@ -62,8 +65,6 @@ export class RootContainerComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    const myContext = 'app';
-
     const { containers } = PCore.getStore().getState();
     const items = Object.keys(containers).filter(item => item.includes('root'));
 
@@ -84,24 +85,11 @@ export class RootContainerComponent implements OnInit, OnDestroy {
 
     this.pvConn$ = configObjPreview.getPConnect();
 
-    const configObjModal = PCore.createPConnect({
-      meta: {
-        type: 'ModalViewContainer',
-        config: {
-          name: 'modal'
-        }
-      },
-      options: {
-        pageReference: 'pyPortal',
-        context: myContext
-      }
-    });
+    this.configureModalContainer();
 
     // clear out hasViewContainer
     sessionStorage.setItem('hasViewContainer', 'false');
 
-    this.mConn$ = configObjModal.getPConnect();
-
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
 
@@ -128,16 +116,6 @@ export class RootContainerComponent implements OnInit, OnDestroy {
     }
   }
 
-  modalVisibleChanged(isVisible) {
-    if (this.displayOnlyFA$) {
-      if (isVisible) {
-        this.bShowRoot$ = false;
-      } else {
-        this.bShowRoot$ = true;
-      }
-    }
-  }
-
   updateSelf() {
     // need to call this.getCurrentCompleteProps (not this.thePConn.getConfigProps)
     //  to get full set of props that affect this component in Redux
@@ -191,6 +169,25 @@ export class RootContainerComponent implements OnInit, OnDestroy {
     }
   }
 
+  async configureModalContainer() {
+    const sdkConfig = await this.scService.getSdkConfig();
+    const showModalsInEmbeddedMode = sdkConfig.serverConfig.showModalsInEmbeddedMode;
+
+    if (!this.displayOnlyFA$ || showModalsInEmbeddedMode) {
+      const configObjModal = PCore.createPConnect({
+        meta: {
+          type: 'ModalViewContainer',
+          config: {
+            name: 'modal'
+          }
+        },
+        options
+      });
+
+      this.mConn$ = configObjModal.getPConnect();
+    }
+  }
+
   generateViewContainerForNoPortal() {
     // bootstrap loadMashup resolves to here
     const arChildren = this.pConn$.getChildren() as any[];

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/view/view.component.ts

@@ -8,6 +8,20 @@ import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
 const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs'];
+const DETAILS_TEMPLATES = [
+  'Details',
+  'DetailsFields',
+  'DetailsOneColumn',
+  'DetailsSubTabs',
+  'DetailsThreeColumn',
+  'DetailsTwoColumn',
+  'NarrowWideDetails',
+  'WideNarrowDetails'
+];
+
+function isDetailsTemplate(template) {
+  return DETAILS_TEMPLATES.includes(template);
+}
 
 /**
  * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
@@ -146,7 +160,7 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
     this.templateName$ = this.configProps$.template || '';
     this.title$ = this.configProps$.title || '';
     this.label$ = this.configProps$.label || '';
-    this.showLabel$ = this.configProps$.showLabel || this.showLabel$;
+    this.showLabel$ = this.configProps$.showLabel || isDetailsTemplate(this.templateName$) || this.showLabel$;
     // label & showLabel within inheritedProps takes precedence over configProps
     this.label$ = this.inheritedProps$.label || this.label$;
     this.showLabel$ = this.inheritedProps$.showLabel || this.showLabel$;

package/tests/assets/sdk-a/components/createAll/override-sdk/template/confirmation/confirmation.component.html

@@ -14,7 +14,7 @@
       <button mat-raised-button color="primary" (click)="onConfirmViewClose()">Done</button>
     </div>
   </div>
-  <div *ngIf="toDoList?.length > 0">
+  <div *ngIf="!showConfirmView && toDoList?.length > 0">
     <component-mapper
       name="Todo"
       [props]="{ pConn$, datasource$: { source: toDoList }, headerText$: 'Tasks', type$: CONSTS.TODO, isConfirm: true }"