About Page Title customization support (#3356)

* Add optional title text to title component

* Support custom about page info component

* Undo typo

src/frontend/app/core/customizations.types.ts

@@ -7,6 +7,7 @@ export interface CustomizationsMetadata {
   hasEula?: boolean;
   copyright?: string;
   logoText?: string;
+  aboutInfoComponent?: any;
   supportInfoComponent?: any;
 }
 

src/frontend/app/features/about/about-page/about-page.component.html

@@ -1,11 +1,12 @@
 <app-page-header [showUnderFlow]="true">About</app-page-header>
-<mat-card class="about-page__card">
+<mat-card class="about-page__card" *ngIf="!customizations.aboutInfoComponent; else aboutInfoContainer">
   <app-stratos-title></app-stratos-title>
   <div class="about-page">
     <div class="about-page__version">{{ (versionNumber$ | async) }}</div>
     <div class="about-page__title">Stratos provides an easy-to-use web-based UI that allows developers and administrators to manage their applications and Cloud Foundry deployments</div>
   </div>
 </mat-card>
+<ng-template #aboutInfoContainer></ng-template>
 
 <mat-card *ngIf="customizations.hasEula" class="about-page__card about-page__eula">
   <div>Use of this software is subject to the End-User License Agreement</div>
@@ -15,7 +16,7 @@
 <template #supportInfoContainer></template>
 
 <mat-card *ngIf="(sessionData$ | async) as session" class="about-page__card">
-  <app-metadata-item icon="web_asset" label="Stratos Version">{{ session.version.proxy_version }}</app-metadata-item>
+  <app-metadata-item icon="web_asset" label="Version">{{ session.version.proxy_version }}</app-metadata-item>
   <app-metadata-item icon="person" label="User">{{ session.user.name }}</app-metadata-item>
 </mat-card>
 
@@ -28,4 +29,3 @@
     </div>
   </div>
 </mat-card>
-

src/frontend/app/features/about/about-page/about-page.component.ts

@@ -28,14 +28,18 @@ export class AboutPageComponent implements OnInit, OnDestroy {
   versionNumber$: Observable<string>;
   userIsAdmin$: Observable<boolean>;
 
+  @ViewChild('aboutInfoContainer', { read: ViewContainerRef }) aboutInfoContainer;
   @ViewChild('supportInfoContainer', { read: ViewContainerRef }) supportInfoContainer;
 
+  aboutInfoComponentRef: ComponentRef<any>;
   componentRef: ComponentRef<any>;
 
   constructor(
     private store: Store<AppState>,
     private resolver: ComponentFactoryResolver,
-    @Inject(Customizations) public customizations: CustomizationsMetadata) { }
+    @Inject(Customizations) public customizations: CustomizationsMetadata
+  ) { }
+
   ngOnInit() {
     this.sessionData$ = this.store.select(s => s.auth).pipe(
       filter(auth => !!(auth && auth.sessionData)),
@@ -53,15 +57,27 @@ export class AboutPageComponent implements OnInit, OnDestroy {
       })
     );
 
+    this.addAboutInfoComponent();
     this.addSupportInfo();
   }
 
   ngOnDestroy() {
+    if (this.aboutInfoComponentRef) {
+      this.aboutInfoComponentRef.destroy();
+    }
     if (this.componentRef) {
       this.componentRef.destroy();
     }
   }
 
+  addAboutInfoComponent() {
+    this.aboutInfoContainer.clear();
+    if (this.customizations.aboutInfoComponent) {
+      const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(this.customizations.aboutInfoComponent);
+      this.aboutInfoComponentRef = this.aboutInfoContainer.createComponent(factory);
+    }
+  }
+
   addSupportInfo() {
     this.supportInfoContainer.clear();
     if (this.customizations.supportInfoComponent) {

src/frontend/app/features/about/diagnostics-page/diagnostics-page.component.html

@@ -4,7 +4,7 @@ <h1>Diagnostics</h1>
 
 <div *ngIf="(sessionData$ | async) as session">
   <mat-card class="diagnostics-page__card">
-    <app-metadata-item icon="web_asset" label="Stratos Version">{{ session.version.proxy_version }}</app-metadata-item>
+    <app-metadata-item icon="web_asset" label="Version">{{ session.version.proxy_version }}</app-metadata-item>
     <app-metadata-item icon="date_range" label="Build Date">{{ buildDate }}</app-metadata-item>
     <div *ngIf="(this.userIsAdmin$ | async) as isAdminUser">
       <app-metadata-item *ngIf="!isAdminUser" icon="person" label="User">{{ session.user.name }}</app-metadata-item>

src/frontend/app/shared/components/stratos-title/stratos-title.component.html

@@ -1,4 +1,4 @@
 <div class="stratos-title">
   <img class="stratos-title__logo" src="/assets/logo.png" />
-  <h1 class="mat-h1 stratos-title__header">Stratos</h1>
+  <h1 class="mat-h1 stratos-title__header">{{ title || 'Stratos' }}</h1>
 </div>

src/frontend/app/shared/components/stratos-title/stratos-title.component.ts

@@ -1,8 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-stratos-title',
   templateUrl: './stratos-title.component.html',
   styleUrls: ['./stratos-title.component.scss']
 })
-export class StratosTitleComponent { }
+export class StratosTitleComponent {
+
+  // Optional title
+  @Input() title: string;
+}