Added support for custom logo in Wss

Author: samhere06

packages/angular-sdk-components/src/lib/_components/designSystemExtension/wss-quick-create/wss-quick-create.component.scss

@@ -1,3 +1,7 @@
+.quick-link-button:hover .quick-link-icon {
+  transform: scale(1.2) rotateZ(10deg);
+}
+
 .wss-quick-create-header {
   background-color: var(--mat-sys-surface-container);
 }

packages/angular-sdk-components/src/lib/_components/template/app-shell/app-shell.component.html

@@ -3,7 +3,10 @@
     <component-mapper name="NavBar" [props]="{ pConn$, appName$, pages$, caseTypes$ }"></component-mapper>
   </div>
   <div *ngIf="bShowAppShell$ && portalTemplate === 'wss'">
-    <component-mapper name="WssNavBar" [props]="{ pConn$, appName$, homePage: pages$[0], pages$: links, caseTypes$ }"></component-mapper>
+    <component-mapper
+      name="WssNavBar"
+      [props]="{ pConn$, appName$, homePage: pages$[0], pages$: links, caseTypes$, portalLogoImage$: imageURL }"
+    ></component-mapper>
   </div>
   <div [ngClass]="{ 'appshell-main': portalTemplate !== 'wss', 'appshell-main-wss': portalTemplate === 'wss' }">
     <div *ngFor="let kid of arChildren$">

packages/angular-sdk-components/src/lib/_components/template/app-shell/app-shell.component.ts

@@ -5,6 +5,7 @@ import { Subscription } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { ErrorMessagesService } from '../../../_messages/error-messages.service';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+import { Utils } from '../../../_helpers/utils';
 
 interface IPage {
   classID: string;
@@ -24,7 +25,7 @@ interface AppShellProps {
   portalTemplate: string;
   readOnly?: boolean;
   showAppHeaderBar: boolean;
-  showAppName: boolean;
+  showAppName: any;
 }
 
 @Component({
@@ -44,19 +45,22 @@ export class AppShellComponent implements OnInit, OnDestroy {
   caseTypes$?: object[];
   arChildren$: any[];
   bShowAppShell$ = false;
-  appName$ = 'PEGA';
+  appName$ = '';
   errorMessagesSubscription: Subscription;
   sErrorMessages = '';
   snackBarRef: any;
   bOkDisplayError = false;
   portalTemplate: string;
   links: any = [];
+  imageURL: string | Blob;
+  localizedVal = PCore.getLocaleUtils().getLocaleValue;
 
   constructor(
     private angularPConnect: AngularPConnectService,
     private erService: ErrorMessagesService,
     private snackBar: MatSnackBar,
-    private ngZone: NgZone
+    private ngZone: NgZone,
+    private utils: Utils
   ) {}
 
   ngOnInit() {
@@ -142,6 +146,12 @@ export class AppShellComponent implements OnInit, OnDestroy {
   updateSelf() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as AppShellProps;
 
+    const showAppName = this.configProps$.showAppName;
+    const envInfo = PCore.getEnvironmentInfo();
+    const appNameToDisplay = showAppName ? envInfo.getApplicationLabel() : '';
+    const portalClass = this.pConn$.getValue('.classID', ''); // 2nd arg empty string until typedef marked correctly
+    const envPortalName = envInfo.getPortalName();
+
     this.ngZone.run(() => {
       // making a copy, so can add info
       this.pages$ = this.configProps$.pages;
@@ -153,6 +163,30 @@ export class AppShellComponent implements OnInit, OnDestroy {
       this.caseTypes$ = this.configProps$.caseTypes;
       this.arChildren$ = this.pConn$.getChildren();
     });
+
+    const portalLogo = this.configProps$.portalLogo;
+    // using the default icon then fetch it from the static folder (not auth involved)
+    if (
+      !portalLogo ||
+      portalLogo.toLowerCase().includes('pzpega-logo-mark') ||
+      portalLogo.toLowerCase().includes('py-logo') ||
+      portalLogo.toLowerCase().includes('py-full-logo')
+    ) {
+      const portalLogoImage = this.utils.getIconPath(this.utils.getSDKStaticContentUrl()).concat('pzpega-logo-mark.svg');
+      this.imageURL = portalLogoImage;
+    }
+    // not using default icon to fetch it using the way which uses authentication
+    else {
+      PCore.getAssetLoader()
+        .getSvcImageUrl(portalLogo)
+        .then(data => {
+          this.imageURL = data;
+        })
+        .catch(() => {
+          console.error(`${this.localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`);
+        });
+    }
+    this.appName$ = this.localizedVal(appNameToDisplay || '', '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase());
   }
 
   // fpr show/hiding error messages in the SnackBar component

packages/angular-sdk-components/src/lib/_components/template/wss-nav-bar/wss-nav-bar.component.html

@@ -5,17 +5,19 @@
         <img src="{{ portalLogoImage$ }}" class="psdk-nav-logo" />
       </div>
       <div class="psdk-nav-portal-info">
-        <div class="psdk-nav-portal-app">{{ portalApp$ }}</div>
+        <div class="psdk-nav-portal-app">{{ appName$ }}</div>
       </div>
     </div>
 
+    <span class="spacer"></span>
+
     <div *ngFor="let page of navPages$">
-      <div class="flex-box mat-list-item" style="cursor: pointer" (click)="navPanelButtonClick(page)">
+      <div class="flex-box mat-list-item" style="cursor: pointer; font-size: 1rem; text-transform: capitalize" (click)="navPanelButtonClick(page)">
         <div mat-button class="psdk-nav-button-span">{{ page.pyLabel }}</div>
       </div>
     </div>
 
-    <span class="spacer"></span>
+    <!-- <span class="spacer"></span> -->
 
     <mat-list>
       <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">

packages/angular-sdk-components/src/lib/_components/template/wss-nav-bar/wss-nav-bar.component.scss

@@ -21,9 +21,8 @@
 }
 
 .psdk-nav-logo {
-  width: 3.75rem;
-  padding: 0.625rem;
-  margin-right: 1.25rem;
+  max-width: 100%;
+  height: 3rem;
 }
 
 .psdk-nav-svg-icon {

packages/angular-sdk-components/src/lib/_components/template/wss-nav-bar/wss-nav-bar.component.ts

@@ -27,6 +27,7 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
   @Input() pages$: any[];
   @Input() caseTypes$: any[];
   @Input() homePage: any;
+  @Input() portalLogoImage$: string;
 
   // For interaction with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
@@ -36,10 +37,6 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
   navExpandCollapse$: string;
   bShowCaseTypes$ = false;
 
-  portalApp$: string | undefined = '';
-  portalLogoImage$: string;
-  showAppName$ = false;
-
   portalOperator$: string | undefined;
   portalOperatorInitials$: string;
 
@@ -126,12 +123,8 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
 
       // const oData = this.pConn$.getDataObject();
 
-      this.portalLogoImage$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
       this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
       this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
-      this.showAppName$ = this.configProps$.showAppName;
-
-      this.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();
     });
   }