fix menu population, user info

projects/aca-content/assets/app.extensions.json

@@ -85,19 +85,19 @@
         "component": "app.notification-center",
         "order": 50
       },
-      {
-        "id": "app.header.user",
-        "type": "custom",
-        "component": "app.user",
-        "order": 100
-      },
       {
         "id": "app.header.more",
         "type": "menu",
         "order": 10000,
-        "icon": "more_vert",
+        "icon": "apps",
         "title": "APP.ACTIONS.MORE",
         "children": [
+          {
+            "id": "app.header.user",
+            "type": "custom",
+            "component": "app.user",
+            "order": 100
+          },
           {
             "id": "app.languagePicker",
             "order": 100,

projects/aca-content/src/lib/components/common/common.module.ts

@@ -34,9 +34,10 @@ import { LanguagePickerComponent } from './language-picker/language-picker.compo
 import { LogoutComponent } from './logout/logout.component';
 import { ContentModule } from '@alfresco/adf-content-services';
 import { UserInfoComponent } from './user-info/user-info.component';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
-  imports: [CommonModule, CoreModule.forChild(), ContentModule.forChild(), ExtensionsModule, GenericErrorModule],
+  imports: [CommonModule, CoreModule.forChild(), ContentModule.forChild(), ExtensionsModule, GenericErrorModule, RouterModule],
   declarations: [LocationLinkComponent, ToggleSharedComponent, LanguagePickerComponent, LogoutComponent, UserInfoComponent],
   exports: [
     ExtensionsModule,

projects/aca-content/src/lib/components/common/user-info/user-info.component.html

@@ -1,14 +1,4 @@
-<ng-container>
+<button mat-menu-item [routerLink]="['/profile']" title="{{'APP.TOOLTIPS.MY_PROFILE' | translate}}">
-    <adf-content-user-info 
+  <mat-icon>account_circle</mat-icon>
-        *ngIf="mode === userInfoMode.CONTENT || mode === userInfoMode.CONTENT_SSO"
+  <span>{{ (displayName$ | async) }}</span>
-        [ecmUser]="ecmUser$ | async"
+</button>
-        [identityUser]="identityUser$ | async"
-        [isLoggedIn]="isLoggedIn"
-        [mode]="mode"
-    ></adf-content-user-info>
-    <adf-identity-user-info 
-        *ngIf="mode === userInfoMode.SSO"
-        [identityUser]="identityUser$ | async"
-        [isLoggedIn]="isLoggedIn"
-    ></adf-identity-user-info>
-</ng-container>

projects/aca-content/src/lib/components/common/user-info/user-info.component.ts

@@ -6,21 +6,18 @@
  * agreement is prohibited.
  */
 
-import { IdentityUserModel, IdentityUserService, AuthenticationService, UserInfoMode } from '@alfresco/adf-core';
+import { IdentityUserService, AuthenticationService } from '@alfresco/adf-core';
 import { Component, OnInit } from '@angular/core';
 import { Observable, of } from 'rxjs';
-import { EcmUserModel, PeopleContentService } from '@alfresco/adf-content-services';
+import { PeopleContentService } from '@alfresco/adf-content-services';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-user-info',
   templateUrl: './user-info.component.html'
 })
 export class UserInfoComponent implements OnInit {
-  mode: UserInfoMode;
+  displayName$: Observable<string>;
-  ecmUser$: Observable<EcmUserModel>;
-  identityUser$: Observable<IdentityUserModel>;
-  selectedIndex: number;
-  userInfoMode = UserInfoMode;
 
   constructor(
     private peopleContentService: PeopleContentService,
@@ -35,15 +32,12 @@ export class UserInfoComponent implements OnInit {
   getUserInfo() {
     if (this.authService.isOauth()) {
       this.loadIdentityUserInfo();
-      this.mode = UserInfoMode.SSO;
 
       if (this.authService.isECMProvider() && this.authService.isEcmLoggedIn()) {
-        this.mode = UserInfoMode.CONTENT_SSO;
         this.loadEcmUserInfo();
       }
     } else if (this.isEcmLoggedIn()) {
       this.loadEcmUserInfo();
-      this.mode = UserInfoMode.CONTENT;
     }
   }
 
@@ -55,11 +49,21 @@ export class UserInfoComponent implements OnInit {
   }
 
   private loadEcmUserInfo(): void {
-    this.ecmUser$ = this.peopleContentService.getCurrentUserInfo();
+    this.displayName$ = this.peopleContentService.getCurrentUserInfo().pipe(map((model) => this.parseDisplayName(model)));
   }
 
   private loadIdentityUserInfo() {
-    this.identityUser$ = of(this.identityUserService.getCurrentUserInfo());
+    this.displayName$ = of(this.identityUserService.getCurrentUserInfo()).pipe(map((model) => this.parseDisplayName(model)));
+  }
+
+  private parseDisplayName(model: { firstName?: string; email?: string }): string {
+    let result = model.firstName;
+
+    if (model.email) {
+      result = `${model.firstName} (${model.email})`;
+    }
+
+    return result;
   }
 
   private isEcmLoggedIn() {

projects/aca-content/src/lib/components/sidenav/components/sidenav-header.component.html

@@ -13,7 +13,8 @@
       {{ appName$ | async | translate }}
     </div>
 
-    <adf-notification-history></adf-notification-history>
+    <ng-container *ngFor="let actionRef of actions; trackBy: trackByActionId">
-    <app-navigation-menu></app-navigation-menu>
+      <aca-toolbar-action [actionRef]="actionRef"></aca-toolbar-action>
+    </ng-container>
   </div>
 </div>

projects/aca-content/src/lib/components/sidenav/components/sidenav-header.component.ts

@@ -23,11 +23,14 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { AppStore, getAppName, getLogoPath } from '@alfresco/aca-shared/store';
 import { AppConfigService } from '@alfresco/adf-core';
+import { ContentActionRef } from '@alfresco/adf-extensions';
+import { AppExtensionService } from '@alfresco/aca-shared';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-sidenav-header',
@@ -35,17 +38,38 @@ import { AppConfigService } from '@alfresco/adf-core';
   encapsulation: ViewEncapsulation.None,
   host: { class: 'app-sidenav-header' }
 })
-export class SidenavHeaderComponent {
+export class SidenavHeaderComponent implements OnInit, OnDestroy {
+  private onDestroy$ = new Subject<boolean>();
+
   appName$: Observable<string>;
   logo$: Observable<string>;
   landingPage: string;
+  actions: Array<ContentActionRef> = [];
 
   @Output()
   toggleNavBar = new EventEmitter();
 
-  constructor(public store: Store<AppStore>, private appConfigService: AppConfigService) {
+  constructor(public store: Store<AppStore>, private appConfigService: AppConfigService, private appExtensions: AppExtensionService) {
     this.appName$ = store.select(getAppName);
     this.logo$ = store.select(getLogoPath);
     this.landingPage = this.appConfigService.get('landingPage', '/personal-files');
   }
+
+  ngOnInit() {
+    this.appExtensions
+      .getHeaderActions()
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((actions) => {
+        this.actions = actions;
+      });
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+
+  trackByActionId(_: number, action: ContentActionRef) {
+    return action.id;
+  }
 }

projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.html

@@ -1,26 +0,0 @@
-<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="matMenu">
-    <mat-icon title="{{'APP.TOOLTIPS.OPTIONS_SETTINGS' | translate}}">apps</mat-icon>
-</button>
-<mat-menu #menu="matMenu" xPosition="before">
-    <div *ngIf="displayName" mat-menu-item [routerLink]="['/profile']" title="{{'APP.TOOLTIPS.MY_PROFILE' | translate}}">
-        <mat-icon>account_circle</mat-icon>
-        <span>{{ displayName }}</span>
-    </div>
-    <mat-divider></mat-divider>
-    <button mat-menu-item data-automation-id="language-menu-button" [matMenuTriggerFor]="langMenu">
-        <mat-icon>language</mat-icon>
-        <span>{{ 'APP.LANGUAGE' | translate }}</span>
-    </button>
-    <mat-menu #langMenu="matMenu" class="adf-menu">
-        <adf-language-menu></adf-language-menu>
-    </mat-menu>
-    <button mat-menu-item data-automation-id="about" [routerLink]="['/about']">
-        <mat-icon>info</mat-icon>
-        {{ 'APP.BROWSE.ABOUT.TITLE' | translate }}
-    </button>
-    <mat-divider></mat-divider>
-    <button mat-menu-item data-automation-id="sign-out" adf-logout>
-        <mat-icon>exit_to_app</mat-icon>
-        {{ 'APP.SIGN_OUT' | translate }}
-    </button>
-</mat-menu>

projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.ts

@@ -1,33 +0,0 @@
-/*
- * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
- *
- * License rights for this program may be obtained from Alfresco Software, Ltd.
- * pursuant to a written agreement and any use of this program without such an
- * agreement is prohibited.
- */
-
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { ContentApiService } from '@alfresco/aca-shared';
-
-@Component({
-  selector: 'app-navigation-menu',
-  templateUrl: './navigation-menu.component.html',
-  encapsulation: ViewEncapsulation.None
-})
-export class NavigationMenuComponent implements OnInit {
-  displayName = '';
-
-  constructor(private contentApi: ContentApiService) {}
-
-  ngOnInit() {
-    this.contentApi.getPerson('-me-').subscribe((person) => {
-      const personDetails = person?.entry;
-
-      this.displayName = personDetails.displayName;
-
-      if (personDetails.email) {
-        this.displayName = `${personDetails.displayName} (${personDetails.email})`;
-      }
-    });
-  }
-}

projects/aca-content/src/lib/components/sidenav/sidenav.module.ts

@@ -35,11 +35,11 @@ import { ActiveLinkDirective } from './directives/active-link.directive';
 import { ExpandMenuComponent } from './components/expand-menu.component';
 import { ButtonMenuComponent } from './components/button-menu.component';
 import { ActionDirective } from './directives/action.directive';
-import { NavigationMenuComponent } from './navigation-menu/navigation-menu.component';
 import { SidenavHeaderComponent } from './components/sidenav-header.component';
+import { SharedToolbarModule } from '@alfresco/aca-shared';
 
 @NgModule({
-  imports: [CoreModule.forChild(), ExtensionsModule.forChild(), RouterModule, AppCreateMenuModule],
+  imports: [CoreModule.forChild(), ExtensionsModule.forChild(), RouterModule, AppCreateMenuModule, SharedToolbarModule],
   declarations: [
     MenuPanelDirective,
     ExpansionPanelDirective,
@@ -48,7 +48,6 @@ import { SidenavHeaderComponent } from './components/sidenav-header.component';
     ExpandMenuComponent,
     ButtonMenuComponent,
     SidenavComponent,
-    NavigationMenuComponent,
     SidenavHeaderComponent
   ],
   exports: [