User menu improvements

examples/custom-src/frontend/sass/custom/acme.scss

@@ -19,6 +19,15 @@ $acme-side-nav-active: #003358;
     }
   }
 
+  .page-header__divider {
+    color: #333;
+  }
+
+  .page-header__menu-button-icon {
+    background-color: $acme-primary-color;
+    color: $acme-text;
+  }
+
   .mat-tab-nav-bar.mat-primary.mat-background-primary {
     .mat-tab-links {
       background-color: #fff;

src/frontend/app/features/applications/application/application-tabs-base/application-tabs-base.component.html

@@ -1,45 +1,43 @@
 <app-page-header [breadcrumbs]="breadcrumbs$ | async" [tabs]="tabLinks">
-  <div *ngIf="applicationService.application$ | async as application" class="app-page-header">
-    <h1>{{ application?.app?.entity?.name }} </h1>
-    <div>
-      <a class="app-page-header__anchor" mat-icon-button *ngIf="(applicationService.applicationUrl$ | async) != null && application?.app.entity.state === 'STARTED'"
-        href="{{applicationService.applicationUrl$ | async}}" target="_blank" matTooltip="Visit">
-        <mat-icon>launch</mat-icon>
-      </a>
-      <span *ngIf="isBusyUpdating$ | async as busy">
-        <span *ngIf="applicationService.appSpace$ | async as space">
-          <span class="manage-application-actions" *appUserPermission="manageAppPermission;spaceGuid:space.metadata.guid;endpointGuid:this.applicationService.cfGuid">
-            <button mat-icon-button name="edit" *ngIf="(this.applicationService.applicationState$ | async)" routerLink="/applications/{{applicationService.cfGuid}}/{{applicationService.appGuid}}/edit"
-              matTooltip="Edit">
-              <mat-icon>edit</mat-icon>
+  <h1>{{ (applicationService.application$ | async)?.app?.entity?.name }} </h1>
+  <div class="page-header-right">
+    <a class="app-page-header__anchor" mat-icon-button *ngIf="(applicationService.applicationUrl$ | async) != null && (applicationService.application$ | async)?.app.entity.state === 'STARTED'"
+      href="{{applicationService.applicationUrl$ | async}}" target="_blank" matTooltip="Visit">
+      <mat-icon>launch</mat-icon>
+    </a>
+    <span *ngIf="isBusyUpdating$ | async as busy">
+      <span *ngIf="applicationService.appSpace$ | async as space">
+        <span class="manage-application-actions" *appUserPermission="manageAppPermission;spaceGuid:space.metadata.guid;endpointGuid:this.applicationService.cfGuid">
+          <button mat-icon-button name="edit" *ngIf="(this.applicationService.applicationState$ | async)" routerLink="/applications/{{applicationService.cfGuid}}/{{applicationService.appGuid}}/edit"
+            matTooltip="Edit">
+            <mat-icon>edit</mat-icon>
+          </button>
+          <button mat-icon-button name="delete" (click)="redirectToDeletePage()" matTooltip="Delete">
+            <mat-icon>delete</mat-icon>
+          </button>
+          <div *ngIf="applicationService.applicationState$ | async as appState" class="app-page-header__actions">
+            <button mat-icon-button name="restart" [disabled]="busy.updating || !appState.actions.restart" (click)="restartApplication()"
+              matTooltip="Restart">
+              <mat-icon>settings_backup_restore</mat-icon>
             </button>
-            <button mat-icon-button name="delete" (click)="redirectToDeletePage()" matTooltip="Delete">
-              <mat-icon>delete</mat-icon>
+            <button mat-icon-button name="stop" [disabled]="busy.updating" *ngIf="appState.actions.stop;else startButton"
+              (click)="stopApplication()" matTooltip="Stop">
+              <mat-icon>stop</mat-icon>
             </button>
-            <div *ngIf="applicationService.applicationState$ | async as appState" class="app-page-header__actions">
-              <button mat-icon-button name="restart" [disabled]="busy.updating || !appState.actions.restart" (click)="restartApplication()"
-                matTooltip="Restart">
-                <mat-icon>settings_backup_restore</mat-icon>
+            <ng-template #startButton>
+              <button mat-icon-button name="start" [disabled]="busy.updating || !appState.actions.start && !appState.actions.stop"
+                (click)="startApplication()" matTooltip="Start">
+                <mat-icon>play_arrow</mat-icon>
               </button>
-              <button mat-icon-button name="stop" [disabled]="busy.updating" *ngIf="appState.actions.stop;else startButton"
-                (click)="stopApplication()" matTooltip="Stop">
-                <mat-icon>stop</mat-icon>
-              </button>
-              <ng-template #startButton>
-                <button mat-icon-button name="start" [disabled]="busy.updating || !appState.actions.start && !appState.actions.stop"
-                  (click)="startApplication()" matTooltip="Start">
-                  <mat-icon>play_arrow</mat-icon>
-                </button>
-              </ng-template>
-              <button mat-icon-button name="restage" [disabled]="busy.updating || !appState.actions.restage" (click)="restageApplication()"
-                matTooltip="Restage">
-                <mat-icon>redo</mat-icon>
-              </button>
-            </div>
-          </span>
+            </ng-template>
+            <button mat-icon-button name="restage" [disabled]="busy.updating || !appState.actions.restage" (click)="restageApplication()"
+              matTooltip="Restage">
+              <mat-icon>redo</mat-icon>
+            </button>
+          </div>
         </span>
       </span>
-    </div>
+    </span>
   </div>
 </app-page-header>
 <app-loading-page [entityId]="applicationService.appGuid" [entitySchema]="schema" deleteText="Deleting application"

src/frontend/app/features/setup/upgrade-page/upgrade-page.component.spec.ts

@@ -11,15 +11,15 @@ describe('UpgradePageComponent', () => {
   let component: UpgradePageComponent;
   let fixture: ComponentFixture<UpgradePageComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [ UpgradePageComponent, IntroScreenComponent, StratosTitleComponent ],
+      declarations: [UpgradePageComponent, IntroScreenComponent, StratosTitleComponent],
       imports: [
         MDAppModule,
       ]
     })
-    .compileComponents();
-  }));
+      .compileComponents();
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(UpgradePageComponent);

src/frontend/app/features/setup/upgrade-page/upgrade-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-upgrade-page',

src/frontend/app/features/user-profile/edit-profile-info/edit-profile-info.component.spec.ts

@@ -13,9 +13,9 @@ describe('EditProfileInfoComponent', () => {
   let component: EditProfileInfoComponent;
   let fixture: ComponentFixture<EditProfileInfoComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [ EditProfileInfoComponent ],
+      declarations: [EditProfileInfoComponent],
       imports: [
         CommonModule,
         CoreModule,
@@ -26,8 +26,8 @@ describe('EditProfileInfoComponent', () => {
       ],
       providers: [UserProfileService]
     })
-    .compileComponents();
-  }));
+      .compileComponents();
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(EditProfileInfoComponent);

src/frontend/app/shared/components/page-header/page-header.component.html

@@ -17,25 +17,40 @@
         </div>
         <ng-content></ng-content>
         <div class="page-header__filler"></div>
-        <app-extension-buttons *ngIf="actionsKey" [type]="actionsKey"></app-extension-buttons>
-        <ng-content select=".page-header-right"></ng-content>
-        <button *ngIf="!hideMenu" mat-icon-button [matMenuTriggerFor]="menu">
-          <mat-icon>more_vert</mat-icon>
+        <div #extensionRef>
+          <app-extension-buttons *ngIf="actionsKey" [type]="actionsKey"></app-extension-buttons>
+        </div>
+        <div #ref>
+          <ng-content select=".page-header-right"></ng-content>
+        </div>
+        <span class="page-header__divider" *ngIf="(extensionRef.children[0] && extensionRef.children[0].children && extensionRef.children[0].children.length > 0) || ref.children.length > 0">
+          |
+        </span>
+        <button *ngIf="!hideMenu" class="page-header__menu-button" mat-icon-button [matMenuTriggerFor]="menu">
+          <div class="page-header__menu-button-icon"> {{ userNameFirstLetter$ | async }} </div>
         </button>
         <mat-menu #menu="matMenu" [overlapTrigger]="false" class="page-header__menu">
-          <div *ngIf="!logoutOnly">
-            <button mat-menu-item routerLink="/about">
-              <span>About</span>
+          <div class="page-header__menu-inner">
+            <div class="page-header__username">
+              <div class="page-header__username-icon"> {{ userNameFirstLetter$ | async }} </div>
+              <div class="page-header__username-text">
+                <div class="page-header__username-subtext">user</div>
+                <div>{{ username$ | async }}</div>
+              </div>
+            </div>
+            <div *ngIf="!logoutOnly">
+              <button mat-menu-item routerLink="/about">
+                <span>About</span>
+              </button>
+              <button mat-menu-item routerLink="/user-profile">
+                <span>Profile</span>
+              </button>
+              <div class="page-header__menu-separator"></div>
+            </div>
+            <button mat-menu-item (click)="logout()">
+              <span>Logout</span>
             </button>
-            <div class="page-header__menu-separator"></div>
-            <button mat-menu-item routerLink="/user-profile">
-              <span>Profile</span>
-            </button>
-            <div class="page-header__menu-separator"></div>
           </div>
-          <button mat-menu-item (click)="logout()">
-            <span>Logout</span>
-          </button>
         </mat-menu>
       </mat-toolbar>
     </div>

src/frontend/app/shared/components/page-header/page-header.component.scss

@@ -50,6 +50,46 @@ $bottom-index: $top-index - 1;
   &__underflow {
     height: 20vh;
   }
+  &__divider {
+    opacity: .3;
+    padding: 0 10px 0 5px;
+  }
+  &__menu-button-icon {
+    $menu-button-height: 30px;
+    border-radius: 50%;
+    height: $menu-button-height;
+    line-height: $menu-button-height;
+    width: $menu-button-height;
+  }
+  &__username-icon {
+    $menu-button-height: 50px;
+    border-radius: 50%;
+    font-size: 24px;
+    height: $menu-button-height;
+    line-height: $menu-button-height;
+    text-align: center;
+    width: $menu-button-height;
+  }
+  &__username-subtext {
+    font-size: 12px;
+    opacity: .6;
+  }
+  &__menu-button {
+    display: flex;
+    justify-content: center;
+  }
+  &__username {
+    align-items: center;
+    display: flex;
+    padding: 5px 15px 15px 12px;
+  }
+  &__username-text {
+    margin-left: 10px;
+  }
+  &__menu-inner {
+    max-width: 400px;
+    min-width: 200px;
+  }
 }
 
 .mat-toolbar-row,

src/frontend/app/shared/components/page-header/page-header.component.theme.scss

@@ -14,9 +14,16 @@
     &__underflow {
       background-color: mat-color($primary);
     }
-  } // Menu size changes - done in theme otherwise would need ViewEncapsulation.None
-  .mat-menu-panel.page-header__menu {
-    max-width: 400px;
-    min-width: 200px;
+    &__divider {
+      color: mat-contrast($primary, 500);
+    }
+    &__menu-button-icon {
+      background-color: mat-contrast($primary, 500);
+      color: mat-color($primary);
+    }
+    &__username-icon {
+      background-color: mat-color($primary);
+      color: mat-contrast($primary, 500);
+    }
   }
 }

src/frontend/app/shared/components/page-header/page-header.component.ts

@@ -2,7 +2,9 @@ import { Component, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { Logout } from '../../../store/actions/auth.actions';
+import { AuthState } from '../../../store/reducers/auth.reducer';
 import { InternalEventSeverity } from '../../../store/types/internal-events.types';
 import { ISubHeaderTabs } from '../page-subheader/page-subheader.types';
 import { ToggleSideNav } from './../../../store/actions/dashboard-actions';
@@ -30,6 +32,8 @@ export class PageHeaderComponent {
   tabs: ISubHeaderTabs[];
   @Input() showUnderFlow = false;
 
+  public userNameFirstLetter$: Observable<string>;
+  public username$: Observable<string>;
   public actionsKey: String;
 
   @Input()
@@ -67,6 +71,12 @@ export class PageHeaderComponent {
   constructor(private store: Store<AppState>, private route: ActivatedRoute) {
     this.actionsKey = this.route.snapshot.data ? this.route.snapshot.data.extensionsActionsKey : null;
     this.breadcrumbKey = route.snapshot.queryParams[BREADCRUMB_URL_PARAM] || null;
+    this.username$ = store.select(s => s.auth).pipe(
+      map((auth: AuthState) => auth && auth.sessionData ? auth.sessionData.user.name : 'Unknown')
+    );
+    this.userNameFirstLetter$ = this.username$.pipe(
+      map(name => name[0].toLocaleUpperCase())
+    );
   }
 
 }