[ACA-1631] more application ngrx actions (#540)

* delete action

* library path evaluator

* extension for sharing files

* upload actions

* delete library

* use extensions for experimental library actions

* unshare nodes

* fix icons and titles

* "create menu" backed by core extension

* support for descriptions, update upload selector

* update code and tests

* support disabled tooltips for navbar

* fix selector

* [ACA-1486] remove double fetch call

* migrate to trashcan actions, element IDs

* cleanup code, remove deprecated directives

* add/remove favorite

* improve rendering performance

* update favorites without reload

* support for adding Sites to favorites

* disable favorites for Libraries for now

* copy action

* move node

* manage versions and permissions

* cleanup code

* toggle info drawer

* card view mode

* use extension layer for favorites toolbar

* fix menu tooltips

* fix 'remove as favorite' tests

* update tests

* test fixes

* fix edit folder for favorites

* fix test

* cleanup favorites layout

* upgrade recent files layout

* update evaluators for shared nodes

* test fixes

* test fixes

* restore recent files layout

* workaround for "favorite" toggle and recent files

* upgrade shared files page

* upgrade files page layout

* fix library evaluator

* workaround for shared files and permissions

* cleanup code

* upgrade search results

* upgrade sidebar and viewer actions

* code cleanup

* code cleanup

* code cleanup

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

@@ -1,75 +1,39 @@
 <div class="sidenav">
     <div class="sidenav__section sidenav__section sidenav_action-menu">
-        <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>
+        <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 *ifExperimental="'extensions'">
-                    <button *ngFor="let entry of createActions"
-                        mat-menu-item
-                        [disabled]="entry.disabled"
-                        (click)="runAction(entry.actions.click)">
-                        <mat-icon>{{ entry.icon }}</mat-icon>
-                        <span>{{ entry.title | translate }}</span>
-                    </button>
+                <ng-container *ngFor="let action of createActions; trackBy: trackById">
+                    <app-toolbar-button
+                        type="menu-item"
+                        [actionRef]="action"></app-toolbar-button>
                 </ng-container>
-                <button
-                    mat-menu-item
-                    [disabled]="!canCreateContent"
-                    (click)="createNewFolder()"
-                    [attr.title]="
-                        ( canCreateContent
-                            ? 'APP.NEW_MENU.TOOLTIPS.CREATE_FOLDER'
-                            : 'APP.NEW_MENU.TOOLTIPS.CREATE_FOLDER_NOT_ALLOWED'
-                        ) | translate">
-                    <mat-icon>create_new_folder</mat-icon>
-                    <span>{{ 'APP.NEW_MENU.MENU_ITEMS.CREATE_FOLDER' | translate }}</span>
-                </button>
-
-                <adf-upload-button
-                    [tooltip]="
-                        (canCreateContent
-                            ? 'APP.NEW_MENU.TOOLTIPS.UPLOAD_FILES'
-                            : 'APP.NEW_MENU.TOOLTIPS.UPLOAD_FILES_NOT_ALLOWED'
-                        ) | translate"
-                    [disabled]="!canCreateContent"
-                    [rootFolderId]="node?.id"
-                    [multipleFiles]="true"
-                    [uploadFolders]="false"
-                    [staticTitle]="'APP.NEW_MENU.MENU_ITEMS.UPLOAD_FILE' | translate">
-                </adf-upload-button>
-
-                <adf-upload-button
-                    [tooltip]="
-                        (canCreateContent
-                            ? 'APP.NEW_MENU.TOOLTIPS.UPLOAD_FOLDERS'
-                            : 'APP.NEW_MENU.TOOLTIPS.UPLOAD_FOLDERS_NOT_ALLOWED'
-                        ) | translate"
-                    [disabled]="!canCreateContent"
-                    [rootFolderId]="node?.id"
-                    [multipleFiles]="true"
-                    [uploadFolders]="true"
-                    [staticTitle]="'APP.NEW_MENU.MENU_ITEMS.UPLOAD_FOLDER' | translate">
-                </adf-upload-button>
             </div>
         </adf-sidebar-action-menu>
     </div>
 
-    <div class="sidenav__section sidenav__section--menu" *ngFor="let group of groups">
+    <div *ngFor="let group of groups; trackBy: trackById"
+        class="sidenav__section sidenav__section--menu" >
         <ul class="sidenav-menu">
-            <li *ngFor="let item of group.items" class="sidenav-menu__item"
+            <li *ngFor="let item of group.items; trackBy: trackById"
+                class="sidenav-menu__item"
                 routerLinkActive
                 #rla="routerLinkActive"
-                title="{{ item.description | translate }}">
+                [attr.title]="item.description | translate">
 
                 <button
+                    [id]="item.id"
+                    mat-icon-button
+                    mat-ripple
                     [routerLink]="item.url"
                     [color]="rla.isActive ? 'accent': 'primary'"
                     [attr.aria-label]="item.title | translate"
-                    mat-icon-button
-                    mat-ripple
                     matRippleColor="primary"
                     [matRippleTrigger]="rippleTrigger"
                     [matRippleCentered]="true">

src/app/components/sidenav/sidenav.component.ts

@@ -25,12 +25,9 @@
 
 import { Subject } from 'rxjs/Rx';
 import { Component, Input, OnInit, OnDestroy } from '@angular/core';
-import { Node } from 'alfresco-js-api';
-import { NodePermissionService } from '../../services/node-permission.service';
 import { ExtensionService } from '../../extensions/extension.service';
 import { Store } from '@ngrx/store';
 import { AppStore } from '../../store/states';
-import { CreateFolderAction } from '../../store/actions';
 import { currentFolder } from '../../store/selectors/app.selectors';
 import { takeUntil } from 'rxjs/operators';
 import { NavBarGroupRef } from '../../extensions/navbar.extensions';
@@ -44,28 +41,23 @@ import { ContentActionRef } from '../../extensions/action.extensions';
 export class SidenavComponent implements OnInit, OnDestroy {
     @Input() showLabel: boolean;
 
-    node: Node = null;
     groups: Array<NavBarGroupRef> = [];
     createActions: Array<ContentActionRef> = [];
-    canCreateContent = false;
     onDestroy$: Subject<boolean> = new Subject<boolean>();
 
     constructor(
         private store: Store<AppStore>,
-        private permission: NodePermissionService,
         private extensions: ExtensionService
-    ) {
-    }
+    ) {}
 
     ngOnInit() {
         this.groups = this.extensions.getNavigationGroups();
 
-        this.store.select(currentFolder)
+        this.store
+            .select(currentFolder)
             .pipe(takeUntil(this.onDestroy$))
-            .subscribe(node => {
-                this.node = node;
+            .subscribe(() => {
                 this.createActions = this.extensions.getCreateActions();
-                this.canCreateContent = node && this.permission.check(node, ['create']);
             });
     }
 
@@ -74,15 +66,7 @@ export class SidenavComponent implements OnInit, OnDestroy {
         this.onDestroy$.complete();
     }
 
-    createNewFolder() {
-        if (this.node && this.node.id) {
-            this.store.dispatch(new CreateFolderAction(this.node.id));
-        }
-    }
-
-    // this is where each application decides how to treat an action and what to do
-    // the ACA maps actions to the NgRx actions as an example
-    runAction(actionId: string) {
-        this.extensions.runActionById(actionId);
+    trackById(index: number, obj: { id: string }) {
+        return obj.id;
     }
 }