[ACA-1830] create menu enhancements (#670)

* nested menus for create button

* evaluate sub-menu permissions

* demo plugin

* "create library" action

* unit tests and proper effect name

src/app/components/create-menu/create-menu.component.html

@@ -1,14 +1,26 @@
-<adf-sidebar-action-menu
-  [expanded]="showLabel"
-  [attr.title]="'APP.NEW_MENU.TOOLTIP' | translate"
-  [title]="'APP.NEW_MENU.LABEL' | translate">
-  <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
-  <div sidebar-menu-expand-icon>
-    <mat-icon [title]="'APP.NEW_MENU.TOOLTIP' | translate">queue</mat-icon>
-  </div>
-  <div sidebar-menu-options>
-    <ng-container *ngFor="let action of createActions; trackBy: trackById">
-      <app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
-    </ng-container>
-  </div>
-</adf-sidebar-action-menu>
+<ng-container *ngIf="expanded">
+  <button
+    data-automation-id="create-button"
+    mat-raised-button
+    [matMenuTriggerFor]="rootMenu"
+    title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}">
+    <span class="app-create-menu__text">{{ 'APP.NEW_MENU.LABEL' | translate }}</span>
+    <mat-icon title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}">arrow_drop_down</mat-icon>
+  </button>
+</ng-container>
+
+<ng-container *ngIf="!expanded">
+  <button
+    class="app-create-menu--collapsed"
+    data-automation-id="create-button"
+    [matMenuTriggerFor]="rootMenu"
+    title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}">
+    <mat-icon title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}">queue</mat-icon>
+  </button>
+</ng-container>
+
+<mat-menu #rootMenu="matMenu" class="app-create-menu__root-menu app-create-menu__sub-menu" [overlapTrigger]="false" yPosition="below">
+  <ng-container *ngFor="let action of createActions; trackBy: trackById">
+    <app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
+  </ng-container>
+</mat-menu>

src/app/components/create-menu/create-menu.component.scss

@@ -1,3 +1,87 @@
-.app-create-menu {
-  width: 100%;
+@mixin app-create-menu-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $accent: map-get($theme, accent);
+  $primary: map-get($theme, primary);
+
+  .app-create-menu {
+    width: 100%;
+
+    .mat-raised-button {
+      width: 100%;
+      display: block;
+      box-shadow: none !important;
+      height: 37.5px;
+      background-color: mat-color($accent);
+      color: mat-color($primary, default-contrast) !important;
+      border-radius: 4px;
+      font-size: 12.7px;
+      font-weight: normal;
+      text-transform: uppercase;
+
+      .mat-icon {
+        width: 24px;
+        height: 25px;
+        color: mat-color($primary, default-contrast) !important;
+      }
+
+      &__text {
+        width: 100%;
+        height: 20px;
+        text-align: left;
+      }
+    }
+
+    &__root-menu {
+      max-width: 290px !important;
+      width: 290px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      & > .mat-menu-content {
+        width: 100%;
+      }
+    }
+
+    &--collapsed {
+      color: mat-color($foreground, text, 0.54);
+      cursor: pointer;
+      &:hover {
+        color: mat-color($primary);
+      }
+      margin: 0;
+      border: none;
+      background: none;
+    }
+
+    &__sub-menu {
+      .mat-menu-item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        font-size: 14px;
+        color: mat-color($foreground, text, 0.54);
+        line-height: 48px;
+        box-shadow: none;
+        transform: none;
+        transition: unset;
+        font-weight: normal;
+        text-transform: capitalize;
+        color: mat-color($primary);
+
+        &:hover {
+          color: mat-color($accent);
+        }
+      }
+
+      .mat-menu-item[disabled],
+      .mat-menu-item[disabled]:hover {
+        color: mat-color($foreground, text, 0.38);
+
+        .mat-icon {
+          color: mat-color($foreground, text, 0.38);
+        }
+      }
+    }
+  }
 }

src/app/components/create-menu/create-menu.component.ts

@@ -52,6 +52,9 @@ export class CreateMenuComponent implements OnInit, OnDestroy {
   @Input()
   showLabel: boolean;
 
+  @Input()
+  expanded: boolean;
+
   constructor(
     private store: Store<AppStore>,
     private extensions: AppExtensionService

src/app/components/libraries/libraries.component.spec.ts

@@ -41,6 +41,8 @@ import { LibrariesComponent } from './libraries.component';
 import { AppTestingModule } from '../../testing/app-testing.module';
 import { ContentApiService } from '../../services/content-api.service';
 import { ExperimentalDirective } from '../../directives/experimental.directive';
+import { EffectsModule } from '@ngrx/effects';
+import { LibraryEffects } from 'src/app/store/effects';
 
 describe('LibrariesComponent', () => {
   let fixture: ComponentFixture<LibrariesComponent>;
@@ -69,7 +71,7 @@ describe('LibrariesComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [AppTestingModule],
+      imports: [AppTestingModule, EffectsModule.forRoot([LibraryEffects])],
       declarations: [
         DataTableComponent,
         TimeAgoPipe,
@@ -153,13 +155,8 @@ describe('LibrariesComponent', () => {
   });
 
   describe('Node navigation', () => {
-    let routerSpy;
-
-    beforeEach(() => {
-      routerSpy = spyOn(router, 'navigate');
-    });
-
     it('does not navigate when id is not passed', () => {
+      spyOn(router, 'navigate').and.stub();
       component.navigate(null);
 
       expect(router.navigate).not.toHaveBeenCalled();
@@ -167,11 +164,12 @@ describe('LibrariesComponent', () => {
 
     it('navigates to node id', () => {
       const document = { id: 'documentId' };
+      spyOn(router, 'navigate').and.stub();
       spyOn(contentApi, 'getNode').and.returnValue(of({ entry: document }));
 
       component.navigate(node.id);
 
-      expect(routerSpy.calls.argsFor(0)[0]).toEqual(['./', document.id]);
+      expect(router.navigate).toHaveBeenCalledWith(['libraries', 'documentId']);
     });
   });
 

src/app/components/libraries/libraries.component.ts

@@ -24,18 +24,15 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
 import { ShareDataRow } from '@alfresco/adf-content-services';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-
 import { PageComponent } from '../page.component';
 import { Store } from '@ngrx/store';
 import { AppStore } from '../../store/states/app.state';
 import { SiteEntry } from 'alfresco-js-api';
 import { ContentManagementService } from '../../services/content-management.service';
-import { ContentApiService } from '../../services/content-api.service';
 import { AppExtensionService } from '../../extensions/extension.service';
-import { map } from 'rxjs/operators';
+import { NavigateLibraryAction } from 'src/app/store/actions';
 
 @Component({
   templateUrl: './libraries.component.html'
@@ -44,12 +41,9 @@ export class LibrariesComponent extends PageComponent implements OnInit {
   isSmallScreen = false;
 
   constructor(
-    private route: ActivatedRoute,
     content: ContentManagementService,
-    private contentApi: ContentApiService,
     store: Store<AppStore>,
     extensions: AppExtensionService,
-    private router: Router,
     private breakpointObserver: BreakpointObserver
   ) {
     super(store, extensions, content);
@@ -60,9 +54,6 @@ export class LibrariesComponent extends PageComponent implements OnInit {
 
     this.subscriptions.push(
       this.content.libraryDeleted.subscribe(() => this.reload()),
-      this.content.libraryCreated.subscribe((node: SiteEntry) => {
-        this.navigate(node.entry.guid);
-      }),
 
       this.breakpointObserver
         .observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape])
@@ -101,15 +92,6 @@ export class LibrariesComponent extends PageComponent implements OnInit {
   }
 
   navigate(libraryId: string) {
-    if (libraryId) {
-      this.contentApi
-        .getNode(libraryId, { relativePath: '/documentLibrary' })
-        .pipe(map(node => node.entry))
-        .subscribe(documentLibrary => {
-          this.router.navigate(['./', documentLibrary.id], {
-            relativeTo: this.route
-          });
-        });
-    }
+    this.store.dispatch(new NavigateLibraryAction(libraryId));
   }
 }

src/app/components/sidenav/sidenav.component.html

@@ -1,6 +1,6 @@
 <div class="sidenav">
     <div class="sidenav__section sidenav__section sidenav_action-menu">
-      <app-create-menu [showLabel]="showLabel"></app-create-menu>
+      <app-create-menu [expanded]="showLabel"></app-create-menu>
     </div>
 
     <div *ngFor="let group of groups; trackBy: trackById"

src/app/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.html

@@ -1,14 +1,46 @@
-<button
-  [id]="actionRef.id"
-  mat-menu-item
-  color="primary"
-  [disabled]="actionRef.disabled"
-  [attr.title]="(
-    actionRef.disabled
-    ? actionRef['description-disabled']
-    : actionRef.description || actionRef.title
-  ) | translate"
-  (click)="runAction()">
-  <mat-icon>{{ actionRef.icon }}</mat-icon>
-  <span>{{ actionRef.title | translate }}</span>
-</button>
+<ng-container [ngSwitch]="actionRef.type">
+
+  <ng-container *ngSwitchCase="'menu'">
+    <button
+      mat-menu-item
+      [disabled]="actionRef.disabled"
+      [matMenuTriggerFor]="childMenu">
+      <mat-icon>{{ actionRef.icon }}</mat-icon>
+      <span>{{ actionRef.title | translate }}</span>
+    </button>
+
+    <mat-menu #childMenu="matMenu" class="app-create-menu__sub-menu">
+      <ng-container *ngFor="let child of actionRef.children; trackBy: trackById">
+        <app-toolbar-menu-item [actionRef]="child"></app-toolbar-menu-item>
+      </ng-container>
+      </mat-menu>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'separator'">
+    <mat-divider></mat-divider>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'custom'">
+    <adf-dynamic-component [id]="actionRef.component"></adf-dynamic-component>
+  </ng-container>
+
+  <ng-container *ngSwitchDefault>
+    <button
+      [id]="actionRef.id"
+      mat-menu-item
+      color="primary"
+      [disabled]="actionRef.disabled"
+      [attr.title]="(
+        actionRef.disabled
+        ? actionRef['description-disabled']
+        : actionRef.description || actionRef.title
+      ) | translate"
+      (click)="runAction()">
+      <mat-icon>{{ actionRef.icon }}</mat-icon>
+      <span>{{ actionRef.title | translate }}</span>
+    </button>
+  </ng-container>
+
+</ng-container>
+
+

src/app/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.ts

@@ -51,4 +51,8 @@ export class ToolbarMenuItemComponent {
     }
     return false;
   }
+
+  trackById(index: number, obj: { id: string }) {
+    return obj.id;
+  }
 }

src/app/extensions/extension.service.ts

@@ -196,7 +196,8 @@ export class AppExtensionService implements RuleContext {
 
   getCreateActions(): Array<ContentActionRef> {
     return this.createActions
-      .filter(action => this.filterByRules(action))
+      .map(action => this.copyAction(action))
+      .map(action => this.buildMenu(action))
       .map(action => {
         let disabled = false;
 
@@ -211,6 +212,39 @@ export class AppExtensionService implements RuleContext {
       });
   }
 
+  private buildMenu(actionRef: ContentActionRef): ContentActionRef {
+    if (
+      actionRef.type === ContentActionType.menu &&
+      actionRef.children &&
+      actionRef.children.length > 0
+    ) {
+      const children = actionRef.children
+        .filter(action => this.filterByRules(action))
+        .map(action => this.buildMenu(action));
+
+      actionRef.children = children
+        .map(action => {
+          let disabled = false;
+
+          if (action.rules && action.rules.enabled) {
+            disabled = !this.extensions.evaluateRule(
+              action.rules.enabled,
+              this
+            );
+          }
+
+          return {
+            ...action,
+            disabled
+          };
+        })
+        .reduce(reduceEmptyMenus, [])
+        .reduce(reduceSeparators, []);
+    }
+
+    return actionRef;
+  }
+
   // evaluates content actions for the selection and parent folder node
   getAllowedToolbarActions(): Array<ContentActionRef> {
     return this.toolbarActions

src/app/services/content-management.service.ts

@@ -234,7 +234,7 @@ export class ContentManagementService {
     });
   }
 
-  createLibrary() {
+  createLibrary(): Observable<SiteEntry> {
     const dialogInstance = this.dialogRef.open(LibraryDialogComponent, {
       width: '400px'
     });
@@ -243,11 +243,9 @@ export class ContentManagementService {
       this.store.dispatch(new SnackbarErrorAction(message));
     });
 
-    dialogInstance.afterClosed().subscribe((node: SiteEntry) => {
-      if (node) {
-        this.libraryCreated.next(node);
-      }
-    });
+    return dialogInstance
+      .afterClosed()
+      .pipe(tap(node => this.libraryCreated.next(node)));
   }
 
   deleteLibrary(id: string): void {

src/app/store/actions/library.actions.ts

@@ -27,6 +27,7 @@ import { Action } from '@ngrx/store';
 
 export const DELETE_LIBRARY = 'DELETE_LIBRARY';
 export const CREATE_LIBRARY = 'CREATE_LIBRARY';
+export const NAVIGATE_LIBRARY = 'NAVIGATE_LIBRARY';
 
 export class DeleteLibraryAction implements Action {
   readonly type = DELETE_LIBRARY;
@@ -37,3 +38,8 @@ export class CreateLibraryAction implements Action {
   readonly type = CREATE_LIBRARY;
   constructor() {}
 }
+
+export class NavigateLibraryAction implements Action {
+  readonly type = NAVIGATE_LIBRARY;
+  constructor(public payload?: string) {}
+}

src/app/store/app-store.module.ts

@@ -39,7 +39,7 @@ import {
   DownloadEffects,
   ViewerEffects,
   SearchEffects,
-  SiteEffects,
+  LibraryEffects,
   UploadEffects,
   FavoriteEffects,
   ModalsEffects
@@ -57,7 +57,7 @@ import {
       DownloadEffects,
       ViewerEffects,
       SearchEffects,
-      SiteEffects,
+      LibraryEffects,
       UploadEffects,
       FavoriteEffects,
       ModalsEffects

src/app/store/effects/library.effects.ts

@@ -25,24 +25,30 @@
 
 import { Effect, Actions, ofType } from '@ngrx/effects';
 import { Injectable } from '@angular/core';
-import { map, take } from 'rxjs/operators';
+import { map, take, switchMap } from 'rxjs/operators';
 import {
   DeleteLibraryAction,
   DELETE_LIBRARY,
   CreateLibraryAction,
-  CREATE_LIBRARY
+  CREATE_LIBRARY,
+  NavigateLibraryAction,
+  NAVIGATE_LIBRARY
 } from '../actions';
 import { ContentManagementService } from '../../services/content-management.service';
 import { Store } from '@ngrx/store';
 import { AppStore } from '../states';
 import { appSelection } from '../selectors/app.selectors';
+import { ContentApiService } from '../../services/content-api.service';
+import { Router } from '@angular/router';
 
 @Injectable()
-export class SiteEffects {
+export class LibraryEffects {
   constructor(
     private store: Store<AppStore>,
     private actions$: Actions,
-    private content: ContentManagementService
+    private content: ContentManagementService,
+    private contentApi: ContentApiService,
+    private router: Router
   ) {}
 
   @Effect({ dispatch: false })
@@ -64,11 +70,26 @@ export class SiteEffects {
     })
   );
 
-  @Effect({ dispatch: false })
+  @Effect()
   createLibrary$ = this.actions$.pipe(
     ofType<CreateLibraryAction>(CREATE_LIBRARY),
+    switchMap(() => this.content.createLibrary()),
+    map(node => new NavigateLibraryAction(node.entry.guid))
+  );
+
+  @Effect({ dispatch: false })
+  navigateLibrary$ = this.actions$.pipe(
+    ofType<NavigateLibraryAction>(NAVIGATE_LIBRARY),
     map(action => {
-      this.content.createLibrary();
+      const libraryId = action.payload;
+      if (libraryId) {
+        this.contentApi
+          .getNode(libraryId, { relativePath: '/documentLibrary' })
+          .pipe(map(node => node.entry))
+          .subscribe(documentLibrary => {
+            this.router.navigate(['libraries', documentLibrary.id]);
+          });
+      }
     })
   );
 }

src/app/ui/custom-theme.scss

@@ -10,12 +10,12 @@
 @import '../components/permissions/permission-manager/permission-manager.component.theme';
 @import '../components/context-menu/context-menu.component.theme';
 @import '../dialogs/node-versions/node-versions.dialog.theme';
+@import '../components/create-menu/create-menu.component.scss';
 
 @import './overrides/adf-toolbar.theme';
 @import './overrides/adf-search-filter.theme';
 @import './overrides/adf-info-drawer.theme';
 @import './overrides/adf-upload-button.theme';
-@import './overrides/adf-sidebar-action-menu.theme';
 @import './overrides/adf-upload-dialog.theme';
 @import './overrides/adf-pagination.theme';
 @import './overrides/adf-sidenav-layout.theme';
@@ -74,7 +74,6 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
   @include adf-search-filter-theme($theme);
   @include adf-info-drawer-theme($theme);
   @include adf-upload-button-theme($theme);
-  @include adf-sidebar-action-menu-theme($theme);
   @include adf-pagination-theme($theme);
   @include adf-sidenav-layout-theme($theme);
   @include adf-document-list-theme($theme);
@@ -95,4 +94,5 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
   @include aca-about-component-theme($theme);
   @include aca-current-user-theme($theme);
   @include aca-context-menu-theme($theme);
+  @include app-create-menu-theme($theme);
 }

src/app/ui/overrides/adf-sidebar-action-menu.theme.scss

@@ -1,74 +0,0 @@
-@mixin adf-sidebar-action-menu-theme($theme) {
-  $foreground: map-get($theme, foreground);
-  $accent: map-get($theme, accent);
-  $primary: map-get($theme, primary);
-
-  .adf-sidebar-action-menu {
-    .adf-sidebar-action-menu-button {
-      font-size: 12.7px;
-      font-weight: normal;
-      text-transform: uppercase;
-    }
-  }
-
-  .mat-menu-panel.adf-sidebar-action-menu-panel {
-    max-width: 290px !important;
-  }
-
-  .adf-sidebar-action-menu-panel {
-    width: 290px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .adf-sidebar-action-menu-panel .mat-menu-content {
-    width: 100%;
-  }
-
-  .adf-sidebar-action-menu-icon {
-    margin: 0;
-  }
-
-  .adf-sidebar-action-menu-icon div[sidebar-menu-expand-icon] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .adf-sidebar-action-menu {
-    width: 100%;
-  }
-
-  .adf-sidebar-action-menu-options {
-    width: 100% !important;
-
-    .mat-menu-item {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      font-size: 14px;
-      color: mat-color($foreground, text, 0.54);
-      line-height: 48px;
-      box-shadow: none;
-      transform: none;
-      transition: unset;
-      font-weight: normal;
-      text-transform: capitalize;
-      color: mat-color($primary);
-
-      &:hover {
-        color: mat-color($accent);
-      }
-    }
-
-    .mat-menu-item[disabled],
-    .mat-menu-item[disabled]:hover {
-      color: mat-color($foreground, text, 0.38);
-
-      .mat-icon {
-        color: mat-color($foreground, text, 0.38);
-      }
-    }
-  }
-}