From 7ec6e86209115d04c995eddb1068dada5c1e2035 Mon Sep 17 00:00:00 2001 From: mashm Date: Wed, 18 Dec 2024 15:29:56 +0530 Subject: [PATCH] mashup code changes --- .../embedded/embedded/embedded.component.html | 11 ++ .../embedded/embedded/embedded.component.scss | 18 ++ .../embedded/embedded.component.spec.ts | 24 +++ .../embedded/embedded/embedded.component.ts | 175 ++++++++++++++++ .../embedded/header/header.component.html | 8 - .../embedded/header/header.component.scss | 27 --- .../embedded/header/header.component.ts | 187 +----------------- projects/angular-test-app/src/app/routes.ts | 12 +- 8 files changed, 240 insertions(+), 222 deletions(-) create mode 100644 projects/angular-test-app/src/app/_samples/embedded/embedded/embedded.component.html create mode 100644 projects/angular-test-app/src/app/_samples/embedded/embedded/embedded.component.scss create mode 100644 projects/angular-test-app/src/app/_samples/embedded/embedded/embedded.component.spec.ts create mode 100644 projects/angular-test-app/src/app/_samples/embedded/embedded/embedded.component.ts diff --git a/projects/angular-test-app/src/app/_samples/embedded/embedded/embedded.component.html b/projects/angular-test-app/src/app/_samples/embedded/embedded/embedded.component.html new file mode 100644 index 00000000..a99e4785 --- /dev/null +++ b/projects/angular-test-app/src/app/_samples/embedded/embedded/embedded.component.html @@ -0,0 +1,11 @@ +
+ +
+ +
+ +
+ +
+ +
diff --git a/projects/angular-test-app/src/app/_samples/embedded/embedded/embedded.component.scss b/projects/angular-test-app/src/app/_samples/embedded/embedded/embedded.component.scss new file mode 100644 index 00000000..0f9398d7 --- /dev/null +++ b/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; +} diff --git a/projects/angular-test-app/src/app/_samples/embedded/embedded/embedded.component.spec.ts b/projects/angular-test-app/src/app/_samples/embedded/embedded/embedded.component.spec.ts new file mode 100644 index 00000000..d94d5c29 --- /dev/null +++ b/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; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [EmbeddedComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EmbeddedComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/angular-test-app/src/app/_samples/embedded/embedded/embedded.component.ts b/projects/angular-test-app/src/app/_samples/embedded/embedded/embedded.component.ts new file mode 100644 index 00000000..60a88a42 --- /dev/null +++ b/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(); + }); + } +} diff --git a/projects/angular-test-app/src/app/_samples/embedded/header/header.component.html b/projects/angular-test-app/src/app/_samples/embedded/header/header.component.html index 007d878e..6b19bbe2 100644 --- a/projects/angular-test-app/src/app/_samples/embedded/header/header.component.html +++ b/projects/angular-test-app/src/app/_samples/embedded/header/header.component.html @@ -1,7 +1,3 @@ -
- -
- {{ applicationLabel }} @@ -12,7 +8,3 @@ - -
- -
diff --git a/projects/angular-test-app/src/app/_samples/embedded/header/header.component.scss b/projects/angular-test-app/src/app/_samples/embedded/header/header.component.scss index a78abb2c..aa721b93 100644 --- a/projects/angular-test-app/src/app/_samples/embedded/header/header.component.scss +++ b/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; -} -*/ diff --git a/projects/angular-test-app/src/app/_samples/embedded/header/header.component.ts b/projects/angular-test-app/src/app/_samples/embedded/header/header.component.ts index a140ea32..26d2bda2 100644 --- a/projects/angular-test-app/src/app/_samples/embedded/header/header.component.ts +++ b/projects/angular-test-app/src/app/_samples/embedded/header/header.component.ts @@ -1,196 +1,21 @@ -import { Component, OnInit, ChangeDetectorRef, OnDestroy } from '@angular/core'; +import { Component, OnInit, Input } 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 { UpdateWorklistService } from '../../../../../../../packages/angular-sdk-components/src/lib/_messages/update-worklist.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 { 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-header', templateUrl: './header.component.html', styleUrls: ['./header.component.scss'], - providers: [Utils], standalone: true, - imports: [CommonModule, MatProgressSpinnerModule, MatToolbarModule, MatIconModule, MatButtonModule, MainScreenComponent] + imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule] }) -export class HeaderComponent implements OnInit, OnDestroy { +export class HeaderComponent implements OnInit { + @Input() applicationLabel: string | undefined; 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 uwservice: UpdateWorklistService, - 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 => { - // debugger; - - // experiment with returning a PConnect that has deferenced the - // referenced View if the c11n is a 'reference' component - // const compType = c11nEnv.getPConnect().getComponentName(); - // console.log( `mc-nav - registerComponentCreator c11nEnv type: ${compType}`); - - return c11nEnv; - - // REACT implementaion: - // const PConnectComp = createPConnectComponent(); - // return ( - // - // ); - }); - - // 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(); - }); - } + // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method + ngOnInit() {} } diff --git a/projects/angular-test-app/src/app/routes.ts b/projects/angular-test-app/src/app/routes.ts index 8942d981..937ea251 100644 --- a/projects/angular-test-app/src/app/routes.ts +++ b/projects/angular-test-app/src/app/routes.ts @@ -1,7 +1,7 @@ import { Routes } from '@angular/router'; import { TopAppMashupComponent } from './_samples/full-portal/top-app-mashup/top-app-mashup.component'; import { NavigationComponent } from './_samples/simple-portal/navigation/navigation.component'; -import { HeaderComponent } from './_samples/embedded/header/header.component'; +import { EmbeddedComponent } from './_samples/embedded/embedded/embedded.component'; import { endpoints } from '../../../../packages/angular-sdk-components/src/lib/_services/endpoints'; // Adding path to remove "Cannot match routes" error at launch @@ -17,15 +17,15 @@ import { endpoints } from '../../../../packages/angular-sdk-components/src/lib/_ // similiar to Nebula/Constellaion) export const routes: Routes = [ - { path: '', component: HeaderComponent }, + { path: '', component: EmbeddedComponent }, { path: endpoints.PORTAL, component: TopAppMashupComponent }, { path: endpoints.PORTALHTML, component: TopAppMashupComponent }, { path: endpoints.FULLPORTAL, component: TopAppMashupComponent }, { path: endpoints.FULLPORTALHTML, component: TopAppMashupComponent }, { path: endpoints.SIMPLEPORTAL, component: NavigationComponent }, { path: endpoints.SIMPLEPORTALHTML, component: NavigationComponent }, - { path: endpoints.EMBEDDED, component: HeaderComponent }, - { path: endpoints.EMBEDDEDHTML, component: HeaderComponent }, - { path: endpoints.MASHUP, component: HeaderComponent }, - { path: endpoints.MASHUPHTML, component: HeaderComponent } + { path: endpoints.EMBEDDED, component: EmbeddedComponent }, + { path: endpoints.EMBEDDEDHTML, component: EmbeddedComponent }, + { path: endpoints.MASHUP, component: EmbeddedComponent }, + { path: endpoints.MASHUPHTML, component: EmbeddedComponent } ];