@pega/dx-component-builder-sdk 23.1.15 → 24.1.11

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

@@ -0,0 +1,288 @@
+import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ProgressSpinnerService } from '@pega/angular-sdk-components';
+import { ReferenceComponent } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+/**
+ * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
+ * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
+ * is totally at your own risk.
+ */
+
+interface ViewContainerProps {
+  // If any, enter additional props that only exist on this component
+  mode?: string;
+  name?: string;
+  limit?: number;
+  template?: string;
+  title?: string;
+  routingInfo: object;
+  readOnly?: boolean;
+}
+
+@Component({
+  selector: 'app-view-container',
+  templateUrl: './view-container.component.html',
+  styleUrls: ['./view-container.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class ViewContainerComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+  @Input() displayOnlyFA$: boolean;
+
+  // For interaction with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: ViewContainerProps;
+
+  arChildren$: any[];
+  templateName$: string;
+  buildName$: string;
+  context$: string;
+  title$ = '';
+
+  viewPConn$: any;
+
+  isViewContainer$ = true;
+
+  // JA - created object is now a View with a Template
+  //  Use its PConnect to render the CaseView; DON'T replace this.pConn$
+  createdViewPConn$: any;
+  state: any;
+  dispatchObject: any;
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private psService: ProgressSpinnerService,
+    private ngZone: NgZone
+  ) {}
+
+  ngOnInit() {
+    if (this.displayOnlyFA$ == null) {
+      this.displayOnlyFA$ = false;
+    }
+
+    // debugger;
+
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    // Then, continue on with other initialization
+
+    //    this.configProps$ = this.pConn$.getConfigProps();
+    // children may have a 'reference' so normalize the children array
+    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+
+    this.buildName$ = this.buildName();
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as ViewContainerProps;
+    this.templateName$ = this.configProps$.template || '';
+    this.title$ = this.configProps$.title || '';
+    const { CONTAINER_TYPE, APP } = PCore.getConstants();
+    const { name, mode, limit } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as ViewContainerProps;
+
+    this.pConn$.isBoundToState();
+
+    const containerMgr: any = this.pConn$.getContainerManager();
+
+    this.prepareDispatchObject = this.prepareDispatchObject.bind(this);
+
+    this.dispatchObject = this.prepareDispatchObject();
+
+    // TODO: Plan is to rename window.constellationCore to window.pega (or similar)
+    //    And expose less via ui-bootstrap.js
+    this.state = {
+      dispatchObject: this.dispatchObject,
+      // PCore is defined in pxBootstrapShell - eventually will be exported in place of constellationCore
+
+      visible: !PCore.checkIfSemanticURL()
+    };
+
+    // here, to match Nebula/Constellation, the constructor of ViewContainer is only called once, and thus init/add container is only
+    // called once.  Because of Angular creating and destroy components if the parent changes a lot, this component will be
+    // created and destroyed more than once.  So the sessionStore "hasViewContainer" is set to false in rootContainer and then
+    // after first round is true here.  Subsequent ViewContainer creation will not init/add more containers.
+
+    if (sessionStorage.getItem('hasViewContainer') == 'false') {
+      // unlike Nebula/Constellation, have to initializeContainer after we create a dispatcObject and state, otherwise, when calling
+      // initializeContainer before, code will get executed that needs state that wasn't defined.
+
+      containerMgr.initializeContainers({
+        type: mode === CONTAINER_TYPE.MULTIPLE ? CONTAINER_TYPE.MULTIPLE : CONTAINER_TYPE.SINGLE
+      });
+
+      if (mode === CONTAINER_TYPE.MULTIPLE && limit) {
+        /* NOTE: setContainerLimit use is temporary. It is a non-public, unsupported API. */
+        PCore.getContainerUtils().setContainerLimit(`${APP.APP}/${name}`, limit);
+      }
+    }
+
+    if (sessionStorage.getItem('hasViewContainer') == 'false') {
+      if (this.pConn$.getMetadata().children) {
+        containerMgr.addContainerItem(this.dispatchObject);
+      }
+
+      sessionStorage.setItem('hasViewContainer', 'true');
+    }
+
+    // cannot call checkAndUpdate becasue first time through, will call updateSelf and that is incorrect (causes issues).
+    // however, need angularPConnect to be initialized with currentProps for future updates, so calling shouldComponentUpdate directly
+    // without checking to update here in init, will initialize and this is correct
+    this.angularPConnect.shouldComponentUpdate(this);
+  }
+
+  ngOnDestroy() {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  checkAndUpdate() {
+    // Should always check the bridge to see if the component should
+    // update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // ONLY call updateSelf when the component should update
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    //   *** DON'T call updateSelf in ngInit!!  ***
+
+    if (this.arChildren$ == null) {
+      // children may have a 'reference' so normalize the children array
+      this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+    }
+
+    // routingInfo was added as component prop in populateAdditionalProps
+    const routingInfo = this.angularPConnect.getComponentProp(this, 'routingInfo');
+
+    let loadingInfo;
+    try {
+      // @ts-ignore - Property 'getLoadingStatus' is private and only accessible within class 'C11nEnv'
+      loadingInfo = this.pConn$.getLoadingStatus();
+
+      this.psService.sendMessage(loadingInfo);
+    } catch (ex) {
+      /* empty */
+    }
+
+    // const buildName = this.buildName();
+    const { CREATE_DETAILS_VIEW_NAME } = PCore.getConstants();
+    if (routingInfo) {
+      const { accessedOrder, items } = routingInfo;
+      if (accessedOrder && items) {
+        const key = accessedOrder[accessedOrder.length - 1];
+        let componentVisible = accessedOrder.length > 0;
+        const { visible } = this.state;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        componentVisible = visible || componentVisible;
+        if (items[key] && items[key].view && Object.keys(items[key].view).length > 0) {
+          const latestItem = items[key];
+          const rootView = latestItem.view;
+          const { context, name: viewName } = rootView.config;
+          const config: any = { meta: rootView };
+          config.options = {
+            context: latestItem.context,
+            pageReference: context || this.pConn$.getPageReference(),
+            containerName: this.pConn$.getContainerName(),
+            containerItemName: key,
+            hasForm: viewName === CREATE_DETAILS_VIEW_NAME
+          };
+          const configObject = PCore.createPConnect(config);
+
+          // THIS is where the ViewContainer creates a View
+          //    The config has meta.config.type = "view"
+          const newComp = configObject.getPConnect();
+          // const newCompName = newComp.getComponentName();
+          // The metadata for pyDetails changed such that the "template": "CaseView"
+          //  is no longer a child of the created View but is in the created View's
+          //  config. So, we DON'T want to replace this.pConn$ since the created
+          //  component is a View (and not a ViewContainer). We now look for the
+          //  "template" type directly in the created component (newComp) and NOT
+          //  as a child of the newly created component.
+
+          // Use the newly created component (View) info but DO NOT replace
+          //  this ViewContainer's pConn$, etc.
+          //  Note that we're now using the newly created View's PConnect in the
+          //  ViewContainer HTML template to guide what's rendered similar to what
+          //  the Nebula/Constellation return of React.Fragment does
+
+          this.ngZone.run(() => {
+            if (newComp.getComponentName() === 'reference') {
+              // if a refernece, it will de reference to a "view"
+              // so hand this off to the "View" component to do that
+              this.isViewContainer$ = false;
+              this.viewPConn$ = newComp;
+
+              /*
+               ***  this commmented out code should be removed, once we test out that
+               ***  handing off refernce to View component always works
+               */
+
+              // When newComp is a reference, we want to de-reference
+              //  it (to get the View) and then use that View to get the
+              //  template, title, children, etc.
+
+              /*
+
+              const theDereferencedView = ReferenceComponent.normalizePConn(newComp);
+              const newConfigProps = theDereferencedView.getConfigProps();
+
+              // children may have a 'reference' so normalize the children arra
+
+              const theDereferencedViewChildren = ReferenceComponent.normalizePConnArray(theDereferencedView.getChildren());
+              this.templateName$ = ('template' in newConfigProps) ? newConfigProps["template"] : "";
+              this.title$ = ('title' in newConfigProps) ? newConfigProps["title"] : "";
+              this.arChildren$ = theDereferencedViewChildren;
+              this.createdViewPConn$ = theDereferencedView;
+              */
+            } else {
+              // old style when newComp is NOT a 'reference'
+              this.isViewContainer$ = true;
+
+              console.error(`ViewContainer has a newComp that is NOT a reference!`);
+
+              this.createdViewPConn$ = newComp;
+              const newConfigProps: any = newComp.getConfigProps();
+              this.templateName$ = newConfigProps.template || '';
+              this.title$ = newConfigProps.title || '';
+              // update children with new view's children
+              // children may have a 'reference' so normalize the children array
+              this.arChildren$ = ReferenceComponent.normalizePConnArray(newComp.getChildren());
+            }
+          });
+        }
+      }
+    }
+  }
+
+  prepareDispatchObject(): any {
+    const baseContext = this.pConn$.getContextName();
+    // const { acName = "primary" } = pConn.getContainerName(); // doesn't work with 8.23 typings
+    const acName = this.pConn$.getContainerName() || 'primary';
+
+    return {
+      semanticURL: '',
+      context: baseContext,
+      acName
+    };
+  }
+
+  buildName(): string {
+    const sContext = this.pConn$.getContextName();
+    const sName = this.pConn$.getContainerName();
+
+    return `${sContext.toUpperCase()}/${sName.toUpperCase()}`;
+  }
+}

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

@@ -0,0 +1,12 @@
+<component-mapper
+  name="Banner"
+  [props]="{
+    configProps$,
+    arChildren$,
+    title,
+    message,
+    backgroundImage,
+    layout$,
+    divClass$
+  }"
+></component-mapper>

package/tests/assets/sdk-a/components/createAll/override-sdk/template/banner-page/banner-page.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BannerPageComponent } from './banner-page.component';
+
+describe('BannerPageComponent', () => {
+  let component: BannerPageComponent;
+  let fixture: ComponentFixture<BannerPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [BannerPageComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BannerPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/tests/assets/sdk-a/components/createAll/override-sdk/template/banner-page/banner-page.component.ts

@@ -0,0 +1,65 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges, forwardRef } from '@angular/core';
+
+import { ReferenceComponent } from '@pega/angular-sdk-components';
+import { CommonModule } from '@angular/common';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+interface BannerPageProps {
+  // If any, enter additional props that only exist on this component
+  layout?: string;
+  title?: string;
+  message?: string;
+  backgroundImage?: string;
+}
+
+@Component({
+  selector: 'app-banner-page',
+  templateUrl: './banner-page.component.html',
+  styleUrls: ['./banner-page.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class BannerPageComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: any;
+
+  configProps$: BannerPageProps;
+  arChildren$: any[];
+  title?: string;
+  message: any;
+  backgroundImage?: string;
+  layout$?: string;
+  divClass$: string;
+
+  constructor() {
+    this.backgroundImage = this.configProps$?.backgroundImage;
+  }
+
+  ngOnInit() {
+    // console.log(`ngOnInit (no registerAndSubscribe!): Region`);
+    this.backgroundImage = this.configProps$?.backgroundImage;
+    this.updateSelf();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { pConn$ } = changes;
+    this.backgroundImage = this.configProps$?.backgroundImage;
+
+    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as BannerPageProps;
+    console.log(`url(${this.backgroundImage})`);
+
+    this.layout$ = this.configProps$.layout;
+    this.title = this.configProps$.title;
+    this.message = this.configProps$.message;
+    this.backgroundImage = this.configProps$.backgroundImage;
+
+    // The children may contain 'reference' components, so normalize the children...
+    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+  }
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/template/banner-page/config-ext.json

@@ -0,0 +1,10 @@
+{
+    "componentKey": "BannerPage",
+    "name": "BannerPage",
+    "label": "Banner",
+    "description": "Banner Page Template",
+    "type": "Template",
+    "subtype": "PAGE",
+    "icon": "BannerPage.svg",
+    "properties": []
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/template/case-summary/case-summary.component.ts

@@ -92,9 +92,43 @@ export class CaseSummaryComponent implements OnInit, OnDestroy, OnChanges {
       this.primaryFields$.push(kid.resolveConfigProps(kid.getRawMetadata()));
     }
 
-    for (const oField of this.arChildren$[1].getPConnect().getChildren()) {
+    const secondarySummaryFields = this.prepareCaseSummaryData(this.arChildren$[1].getPConnect());
+    const secondaryChildren = this.arChildren$[1].getPConnect().getChildren();
+    secondaryChildren.forEach((oField, index) => {
       const kid = oField.getPConnect();
-      this.secondaryFields$.push({ ...kid.resolveConfigProps(kid.getRawMetadata()), kid });
-    }
+      const displayLabel = secondarySummaryFields[index].value.getPConnect().getConfigProps().label;
+      this.secondaryFields$.push({ ...kid.resolveConfigProps(kid.getRawMetadata()), kid, displayLabel });
+    });
+  }
+
+  prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
+    const { config, children } = pConnectMeta;
+    const pConnect = getPConnect();
+
+    const caseSummaryComponentObject: any = {};
+
+    const { type } = pConnectMeta;
+    const createdComponent = pConnect.createComponent({
+      type,
+      children: children ? [...children] : [],
+      config: {
+        ...config
+      }
+    });
+
+    caseSummaryComponentObject.value = createdComponent;
+    return caseSummaryComponentObject;
+  }
+
+  prepareCaseSummaryData(summaryFieldChildren) {
+    const convertChildrenToSummaryData = kid => {
+      return kid?.map((childItem, index) => {
+        const childMeta = childItem.getPConnect().meta;
+        const caseSummaryComponentObject = this.prepareComponentInCaseSummary(childMeta, childItem.getPConnect);
+        caseSummaryComponentObject.id = index + 1;
+        return caseSummaryComponentObject;
+      });
+    };
+    return summaryFieldChildren ? convertChildrenToSummaryData(summaryFieldChildren?.getChildren()) : undefined;
   }
 }

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

@@ -6,11 +6,11 @@
           <img class="psdk-case-svg-icon" src="{{ svgCase$ }}" />
         </div>
         <div class="psdk-case-view-heading">
-          <div id="current-caseID" [hidden]="true">{{ currentCaseID }}</div>
-          <div class="psdk-case-view-heading-id" id="caseId">{{ id$ }}</div>
           <div>
-            <h1>{{ heading$ }}</h1>
+            <h1 id="case-name">{{ heading$ }}</h1>
           </div>
+          <div id="current-caseID" [hidden]="true">{{ currentCaseID }}</div>
+          <div class="psdk-case-view-heading-id" id="caseId">{{ id$ }}</div>
         </div>
       </mat-toolbar-row>
     </mat-toolbar>

package/tests/assets/sdk-a/components/createAll/override-sdk/template/case-view/case-view.component.scss

@@ -48,6 +48,8 @@ h1 {
   width: 25rem;
   float: left;
   padding: 0rem 0.3125rem 0rem 0rem;
+  margin-left: 0.5rem;
+  margin-top: 0.5rem;
   height: 100%; /* Should be removed. Only for demonstration */
   background-color: var(--app-form-color);
 }

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

@@ -106,9 +106,7 @@ export class CaseViewComponent implements OnInit, OnDestroy {
   }
 
   hasCaseIDChanged(): boolean {
-    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
     if (this.currentCaseID !== this.pConn$.getDataObject().caseInfo.ID) {
-      // @ts-ignore - parameter “contextName” for getDataObject method should be optional
       this.currentCaseID = this.pConn$.getDataObject().caseInfo.ID;
       return true;
     }
@@ -117,13 +115,11 @@ export class CaseViewComponent implements OnInit, OnDestroy {
 
   updateHeaderAndSummary() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as CaseViewProps;
-    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
     const hasNewAttachments = this.pConn$.getDataObject().caseInfo?.hasNewAttachments;
 
     if (hasNewAttachments !== this.bHasNewAttachments) {
       this.bHasNewAttachments = hasNewAttachments;
       if (this.bHasNewAttachments) {
-        // @ts-ignore - Argument of type 'boolean' is not assignable to parameter of type 'object'
         PCore.getPubSubUtils().publish((PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
       }
     }
@@ -142,7 +138,6 @@ export class CaseViewComponent implements OnInit, OnDestroy {
 
       this.heading$ = PCore.getLocaleUtils().getLocaleValue(this.configProps$.header, '', this.localeKey);
       this.id$ = this.configProps$.subheader;
-      // @ts-ignore - second parameter pageReference for getValue method should be optional
       this.status$ = this.pConn$.getValue('.pyStatusWork');
     });
   }
@@ -158,7 +153,6 @@ export class CaseViewComponent implements OnInit, OnDestroy {
 
     this.arChildren$ = this.pConn$.getChildren() as any[];
 
-    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
     const caseInfo = this.pConn$.getDataObject().caseInfo;
     this.currentCaseID = caseInfo.ID;
     this.arAvailableActions$ = caseInfo?.availableActions ? caseInfo.availableActions : [];

package/tests/assets/sdk-a/components/createAll/override-sdk/template/data-reference/data-reference.component.ts

@@ -176,10 +176,8 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
   handleSelection(event) {
     const caseKey = this.pConn$.getCaseInfo().getKey();
     const refreshOptions = { autoDetectRefresh: true };
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     if (this.canBeChangedInReviewMode && this.pConn$.getValue('__currentPageTabViewName')) {
-      // @ts-ignore - second parameter pageReference for getValue method should be optional
-      this.pConn$.getActionsApi().refreshCaseView(caseKey, this.pConn$.getValue('__currentPageTabViewName'), null, refreshOptions);
+      this.pConn$.getActionsApi().refreshCaseView(caseKey, this.pConn$.getValue('__currentPageTabViewName'), '', refreshOptions);
       PCore.getDeferLoadManager().refreshActiveComponents(this.pConn$.getContextName());
     } else {
       const pgRef = this.pConn$.getPageReference().replace('caseInfo.content', '');

package/tests/assets/sdk-a/components/createAll/override-sdk/template/dynamic-tabs/config-ext.json

@@ -0,0 +1,37 @@
+{
+    "componentKey": "DynamicTabs",
+    "name": "DynamicTabs",
+    "label": "Dynamic tabs (list)",
+    "description": "Dynamic tabs (list)",
+    "type": "Template",
+    "subtype": "DETAILS",
+    "icon": "DynamicTabs.svg",
+    "hideTemplateEdit": true,
+    "hideFromTemplatePicker": true,
+    "viewHeadingLabel": "Default heading",
+    "properties": [
+        {
+            "name": "referenceList",
+            "label": "Data page",
+            "format": "CONTENTPICKERSOURCE"
+        },
+        {
+            "name": "parameters",
+            "label": "Parameters",
+            "format": "PARAMETERS",
+            "showOverride": false
+        },
+        {
+            "name": "tablabel",
+            "label": "Tab label",
+            "format": "PROPERTY",
+            "ofContextClass": true
+        },
+        {
+            "format": "VIEWPICKER",
+            "name": "Views",
+            "label": "Tab content",
+            "ofContextClass": true
+        }
+    ]
+}

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

@@ -0,0 +1,5 @@
+<mat-tab-group id="dynamic-tabs" mat-stretch-tabs="false" animationDuration="0">
+  <mat-tab *ngFor="let tab of tabsItems" [label]="tab.name">
+    <component-mapper name="View" [props]="{ pConn$: tab.content.getPConnect() }"></component-mapper>
+  </mat-tab>
+</mat-tab-group>

package/tests/assets/sdk-a/components/createAll/override-sdk/template/dynamic-tabs/dynamic-tabs.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DynamicTabsComponent } from './dynamic-tabs.component';
+
+describe('DynamicTabsComponent', () => {
+  let component: DynamicTabsComponent;
+  let fixture: ComponentFixture<DynamicTabsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DynamicTabsComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DynamicTabsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});