mashup code changes

projects/angular-test-app/src/app/_samples/embedded/embedded/embedded.component.html

@@ -0,0 +1,11 @@
+<div class="progress-box" *ngIf="isProgress$">
+  <mat-spinner class="progress-spinner"></mat-spinner>
+</div>
+
+<div>
+  <app-header [applicationLabel]="applicationLabel"></app-header>
+</div>
+
+<div *ngIf="bLoggedIn$ == true && bHasPConnect$ == true">
+  <app-main-screen [pConn$]="pConn$"></app-main-screen>
+</div>

projects/angular-test-app/src/app/_samples/embedded/embedded/embedded.component.scss

@@ -0,0 +1,18 @@
+.progress-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: var(--app-background-color);
+  position: fixed;
+  z-index: 99999;
+  top: 0px;
+  left: 0px;
+  opacity: 0.5;
+}
+
+.progress-spinner {
+  text-align: center;
+}

projects/angular-test-app/src/app/_samples/embedded/embedded/embedded.component.spec.ts

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

projects/angular-test-app/src/app/_samples/embedded/embedded/embedded.component.ts

@@ -0,0 +1,175 @@
+import { Component, OnInit, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Title } from '@angular/platform-browser';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { Subscription } from 'rxjs';
+import { loginIfNecessary, logout, sdkSetAuthHeader, sdkSetCustomTokenParamsCB } from '@pega/auth/lib/sdk-auth-manager';
+
+import { ProgressSpinnerService } from '../../../../../../../packages/angular-sdk-components/src/lib/_messages/progress-spinner.service';
+import { endpoints } from '../../../../../../../packages/angular-sdk-components/src/lib/_services/endpoints';
+import { ServerConfigService } from '../../../../../../../packages/angular-sdk-components/src/lib/_services/server-config.service';
+import { Utils } from '../../../../../../../packages/angular-sdk-components/src/lib/_helpers/utils';
+import { compareSdkPCoreVersions } from '../../../../../../../packages/angular-sdk-components/src/lib/_helpers/versionHelpers';
+import { HeaderComponent } from '../header/header.component';
+import { MainScreenComponent } from '../main-screen/main-screen.component';
+
+import { getSdkComponentMap } from '../../../../../../../packages/angular-sdk-components/src/lib/_bridge/helpers/sdk_component_map';
+import localSdkComponentMap from '../../../../../../../packages/angular-sdk-components/src/sdk-local-component-map';
+
+declare global {
+  interface Window {
+    myLoadMashup: Function;
+  }
+}
+
+@Component({
+  selector: 'app-embedded',
+  templateUrl: './embedded.component.html',
+  styleUrls: ['./embedded.component.scss'],
+  providers: [Utils],
+  standalone: true,
+  imports: [CommonModule, MatProgressSpinnerModule, MatToolbarModule, MatIconModule, MatButtonModule, HeaderComponent, MainScreenComponent]
+})
+export class EmbeddedComponent implements OnInit, OnDestroy {
+  starterPackVersion$: string = endpoints.SP_VERSION;
+  pConn$: typeof PConnect;
+
+  applicationLabel: string | undefined = '';
+  bLoggedIn$ = false;
+  bPConnectLoaded$ = false;
+  bHasPConnect$ = false;
+  isProgress$ = false;
+
+  progressSpinnerSubscription: Subscription;
+
+  bootstrapShell: any;
+
+  constructor(
+    private cdRef: ChangeDetectorRef,
+    private psservice: ProgressSpinnerService,
+    private titleService: Title,
+    private scservice: ServerConfigService
+  ) {}
+
+  ngOnInit() {
+    this.scservice.readSdkConfig().then(() => {
+      this.initialize();
+    });
+  }
+
+  ngOnDestroy() {
+    this.progressSpinnerSubscription.unsubscribe();
+  }
+
+  async initialize() {
+    this.titleService.setTitle('Media Co');
+
+    sessionStorage.clear();
+
+    // handle showing and hiding the progress spinner
+    this.progressSpinnerSubscription = this.psservice.getMessage().subscribe(message => {
+      this.showHideProgress(message.show);
+    });
+
+    // Add event listener for when logged in and constellation bootstrap is loaded
+    document.addEventListener('SdkConstellationReady', () => {
+      this.bLoggedIn$ = true;
+      // start the portal
+      this.startMashup();
+    });
+
+    // Add event listener for when logged out
+    document.addEventListener('SdkLoggedOut', () => {
+      this.bLoggedIn$ = false;
+    });
+
+    const sdkConfigAuth = await this.scservice.getSdkConfigAuth();
+
+    if ((sdkConfigAuth.mashupGrantType === 'none' || !sdkConfigAuth.mashupClientId) && sdkConfigAuth.customAuthType === 'Basic') {
+      // Service package to use custom auth with Basic
+      const sB64 = window.btoa(`${sdkConfigAuth.mashupUserIdentifier}:${window.atob(sdkConfigAuth.mashupPassword)}`);
+      sdkSetAuthHeader(`Basic ${sB64}`);
+    }
+
+    if ((sdkConfigAuth.mashupGrantType === 'none' || !sdkConfigAuth.mashupClientId) && sdkConfigAuth.customAuthType === 'BasicTO') {
+      const now = new Date();
+      const expTime = new Date(now.getTime() + 5 * 60 * 1000);
+      let sISOTime = `${expTime.toISOString().split('.')[0]}Z`;
+      const regex = /[-:]/g;
+      sISOTime = sISOTime.replace(regex, '');
+      // Service package to use custom auth with Basic
+      const sB64 = window.btoa(`${sdkConfigAuth.mashupUserIdentifier}:${window.atob(sdkConfigAuth.mashupPassword)}:${sISOTime}`);
+      sdkSetAuthHeader(`Basic ${sB64}`);
+    }
+
+    if (sdkConfigAuth.mashupGrantType === 'customBearer' && sdkConfigAuth.customAuthType === 'CustomIdentifier') {
+      // Use custom bearer with specific custom parameter to set the desired operator via
+      //  a userIdentifier property.  (Caution: highly insecure...being used for simple demonstration)
+      sdkSetCustomTokenParamsCB(() => {
+        return { userIdentifier: sdkConfigAuth.mashupUserIdentifier };
+      });
+    }
+
+    // Login if needed, without doing an initial main window redirect
+    // eslint-disable-next-line no-restricted-globals
+    const sAppName = location.pathname.substring(location.pathname.indexOf('/') + 1);
+    loginIfNecessary({ appName: sAppName, mainRedirect: false });
+  }
+
+  startMashup() {
+    PCore.onPCoreReady(renderObj => {
+      console.log('PCore ready!');
+      // Check that we're seeing the PCore version we expect
+      compareSdkPCoreVersions();
+      this.applicationLabel = PCore.getEnvironmentInfo().getApplicationLabel();
+
+      this.titleService.setTitle(this.applicationLabel ?? '');
+
+      // Initialize the SdkComponentMap (local and pega-provided)
+      getSdkComponentMap(localSdkComponentMap).then((theComponentMap: any) => {
+        console.log(`SdkComponentMap initialized`, theComponentMap);
+
+        // Don't call initialRender until SdkComponentMap is fully initialized
+        this.initialRender(renderObj);
+      });
+    });
+
+    window.myLoadMashup('app-root', false); // this is defined in bootstrap shell that's been loaded already
+  }
+
+  initialRender(renderObj) {
+    // Need to register the callback function for PCore.registerComponentCreator
+    //  This callback is invoked if/when you call a PConnect createComponent
+    PCore.registerComponentCreator(c11nEnv => {
+      return c11nEnv;
+    });
+
+    // Change to reflect new use of arg in the callback:
+    const { props } = renderObj;
+
+    this.pConn$ = props.getPConnect();
+
+    this.bHasPConnect$ = true;
+    this.bPConnectLoaded$ = true;
+
+    this.showHideProgress(false);
+
+    sessionStorage.setItem('pCoreUsage', 'AngularSDKMashup');
+  }
+
+  showHideProgress(bShow: boolean) {
+    this.isProgress$ = bShow;
+    // causing failure on actions buttons in emebedded mode
+    // this.cdRef.detectChanges();
+  }
+
+  logOff() {
+    logout().then(() => {
+      // Reload the page to kick off the login
+      window.location.reload();
+    });
+  }
+}

projects/angular-test-app/src/app/_samples/embedded/header/header.component.html

@@ -1,7 +1,3 @@
-<div class="progress-box" *ngIf="isProgress$">
-  <mat-spinner class="progress-spinner"></mat-spinner>
-</div>
-
 <mat-toolbar color="primary" class="mc-toolbar">
   <mat-toolbar-row class="mc-toolbar-row">
     {{ applicationLabel }}
@@ -12,7 +8,3 @@
     <button mat-button>v {{ starterPackVersion$ }}</button>
   </mat-toolbar-row>
 </mat-toolbar>
-
-<div *ngIf="bLoggedIn$ == true && bHasPConnect$ == true">
-  <app-main-screen [pConn$]="pConn$"></app-main-screen>
-</div>

projects/angular-test-app/src/app/_samples/embedded/header/header.component.scss

@@ -2,25 +2,6 @@
   flex: 1 1 auto;
 }
 
-.progress-box {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  background-color: var(--app-background-color);
-  position: fixed;
-  z-index: 99999;
-  top: 0px;
-  left: 0px;
-  opacity: 0.5;
-}
-
-.progress-spinner {
-  text-align: center;
-}
-
 .example-container {
   min-height: 100%;
   height: 100%;
@@ -63,11 +44,3 @@
   height: 80px;
   width: 60px;
 }
-
-/*
-.mc-header-svg-icon {
-    width: 1.4rem;
-    display: inline-block;
-    filter: $app-primary-color-filter;
-}
-*/