move upload and create to extensions

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

@@ -188,34 +188,6 @@
         }
       }
     ],
-    "upload": [
-      {
-        "id": "app.create.uploadFile",
-        "order": 100,
-        "icon": "file_upload",
-        "title": "APP.NEW_MENU.MENU_ITEMS.UPLOAD_FILE",
-        "description": "APP.NEW_MENU.TOOLTIPS.UPLOAD_FILES",
-        "actions": {
-          "click": "UPLOAD_FILES"
-        },
-        "rules": {
-          "visible": "app.isUploadSupported"
-        }
-      },
-      {
-        "id": "app.create.uploadFolder",
-        "order": 200,
-        "icon": "file_upload",
-        "title": "APP.NEW_MENU.MENU_ITEMS.UPLOAD_FOLDER",
-        "description": "APP.NEW_MENU.TOOLTIPS.UPLOAD_FOLDERS",
-        "actions": {
-          "click": "UPLOAD_FOLDER"
-        },
-        "rules": {
-          "visible": "app.isUploadSupported"
-        }
-      }
-    ],
     "navbar": [
       {
         "id": "app.navbar.primary",
@@ -287,10 +259,116 @@
       }
     ],
     "toolbar": [
+      {
+        "id": "app.toolbar.create",
+        "type": "menu",
+        "order": 10,
+        "title": "APP.HEADER.BUTTONS.CREATE",
+        "description": "APP.HEADER.BUTTONS.CREATE_TOOLTIP",
+        "data": {
+          "menuType": "button"
+        },
+        "children": [
+          {
+            "id": "app.create.folder",
+            "order": 100,
+            "icon": "create_new_folder",
+            "title": "APP.NEW_MENU.MENU_ITEMS.CREATE_FOLDER",
+            "description": "APP.NEW_MENU.TOOLTIPS.CREATE_FOLDER",
+            "description-disabled": "APP.NEW_MENU.TOOLTIPS.CREATE_FOLDER_NOT_ALLOWED",
+            "actions": {
+              "click": "CREATE_FOLDER"
+            },
+            "rules": {
+              "visible": "app.navigation.folder.canCreate"
+            }
+          },
+          {
+            "id": "app.create.library",
+            "order": 200,
+            "title": "APP.NEW_MENU.MENU_ITEMS.CREATE_LIBRARY",
+            "description": "APP.NEW_MENU.TOOLTIPS.CREATE_LIBRARY",
+            "icon": "create_new_folder",
+            "actions": {
+              "click": "CREATE_LIBRARY"
+            },
+            "rules": {
+              "visible": "app.canCreateLibrary"
+            }
+          },
+          {
+            "id": "app.create.fileFromTemplate",
+            "order": 300,
+            "icon": "description",
+            "title": "APP.NEW_MENU.MENU_ITEMS.FILE_TEMPLATE",
+            "description": "APP.NEW_MENU.MENU_ITEMS.FILE_TEMPLATE",
+            "description-disabled": "APP.NEW_MENU.TOOLTIPS.CREATE_FILE_NOT_ALLOWED",
+            "actions": {
+              "click": "FILE_FROM_TEMPLATE"
+            },
+            "rules": {
+              "visible": "app.navigation.folder.canUpload"
+            }
+          },
+          {
+            "id": "app.create.folderFromTemplate",
+            "order": 400,
+            "icon": "create_new_folder",
+            "title": "APP.NEW_MENU.MENU_ITEMS.FOLDER_TEMPLATE",
+            "description": "APP.NEW_MENU.MENU_ITEMS.FOLDER_TEMPLATE",
+            "description-disabled": "APP.NEW_MENU.TOOLTIPS.CREATE_FOLDER_NOT_ALLOWED",
+            "actions": {
+              "click": "FOLDER_FROM_TEMPLATE"
+            },
+            "rules": {
+              "visible": "app.navigation.folder.canUpload"
+            }
+          }
+        ]
+      },
+      {
+        "id": "app.toolbar.upload",
+        "type": "menu",
+        "order": 20,
+        "title": "APP.HEADER.BUTTONS.UPLOAD",
+        "description": "APP.HEADER.BUTTONS.UPLOAD_TOOLTIP",
+        "data": {
+          "menuType": "flat-button",
+          "color": "primary"
+        },
+        "children": [
+          {
+            "id": "app.create.uploadFile",
+            "order": 100,
+            "icon": "file_upload",
+            "title": "APP.NEW_MENU.MENU_ITEMS.UPLOAD_FILE",
+            "description": "APP.NEW_MENU.TOOLTIPS.UPLOAD_FILES",
+            "actions": {
+              "click": "UPLOAD_FILES"
+            },
+            "rules": {
+              "visible": "app.isUploadSupported"
+            }
+          },
+          {
+            "id": "app.create.uploadFolder",
+            "order": 200,
+            "icon": "file_upload",
+            "title": "APP.NEW_MENU.MENU_ITEMS.UPLOAD_FOLDER",
+            "description": "APP.NEW_MENU.TOOLTIPS.UPLOAD_FOLDERS",
+            "actions": {
+              "click": "UPLOAD_FOLDER"
+            },
+            "rules": {
+              "visible": "app.isUploadSupported"
+            }
+          }
+        ]
+      },
       {
         "id": "app.toolbar.search.separator",
         "type": "separator",
-        "order": 90
+        "order": 89
       },
       {
         "id": "app.toolbar.search",
@@ -414,7 +492,7 @@
         "type": "menu",
         "order": 10000,
         "icon": "more_vert",
-        "title": "APP.ACTIONS.MORE",
+        "description": "APP.ACTIONS.MORE",
         "children": [
           {
             "id": "app.toolbar.toggleLock",

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

@@ -1,25 +1,3 @@
 <adf-toolbar class="adf-toolbar--inline">
-  <button mat-flat-button data-automation-id="create-button" *ngIf="canShowCreateButton()"
-    [matMenuTriggerFor]="createMenu"
-    [attr.title]="'APP.HEADER.BUTTONS.CREATE_TOOLTIP' | translate">
-    {{ 'APP.HEADER.BUTTONS.CREATE' | translate }}
-  </button>
-  <mat-menu #createMenu="matMenu" role="menu" class="app-create-menu__root-menu app-create-menu__sub-menu" [overlapTrigger]="false" yPosition="below">
-    <div *ngFor="let action of createActions; trackBy: trackByActionId">
-      <app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
-    </div>
-  </mat-menu>
-
-  <button mat-flat-button color="primary" data-automation-id="upload-button" *ngIf="canShowUploadButton()"
-    [matMenuTriggerFor]="uploadMenu"
-    [attr.title]="'APP.HEADER.BUTTONS.UPLOAD_TOOLTIP' | translate">
-    {{ 'APP.HEADER.BUTTONS.UPLOAD' | translate }}
-  </button>
-  <mat-menu #uploadMenu="matMenu" role="menu" class="app-upload-menu__root-menu app-upload-menu__sub-menu" [overlapTrigger]="false" yPosition="below">
-    <div *ngFor="let action of uploadActions; trackBy: trackByActionId">
-      <app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
-    </div>
-  </mat-menu>
-
   <aca-search-input class="app-search-input"></aca-search-input>
 </adf-toolbar>

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

@@ -1,106 +0,0 @@
-/*!
- * @license
- * Copyright 2019 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { AppTestingModule } from '../../testing/app-testing.module';
-import { HeaderActionsComponent } from './header-actions.component';
-import { ContentActionType } from '@alfresco/adf-extensions';
-import { AppExtensionService } from '@alfresco/aca-shared';
-import { of } from 'rxjs';
-import { By } from '@angular/platform-browser';
-import { CoreModule } from '@alfresco/adf-core';
-import { AppHeaderActionsModule } from './header-actions.module';
-import { RouterTestingModule } from '@angular/router/testing';
-import { Router } from '@angular/router';
-
-describe('HeaderActionsComponent', () => {
-  let fixture: ComponentFixture<HeaderActionsComponent>;
-  let router: Router;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [AppTestingModule, CoreModule.forRoot(), AppHeaderActionsModule, RouterTestingModule],
-      declarations: [HeaderActionsComponent]
-    });
-
-    const extensionService = TestBed.inject(AppExtensionService);
-    spyOn(extensionService, 'getCreateActions').and.returnValue(
-      of([
-        {
-          id: 'action1',
-          type: ContentActionType.button,
-          title: 'create action one'
-        },
-        {
-          id: 'action2',
-          type: ContentActionType.button,
-          title: 'create action two'
-        }
-      ])
-    );
-
-    spyOn(extensionService, 'getUploadActions').and.returnValue(
-      of([
-        {
-          id: 'action3',
-          type: ContentActionType.button,
-          title: 'upload action one'
-        }
-      ])
-    );
-
-    router = TestBed.inject(Router);
-
-    fixture = TestBed.createComponent(HeaderActionsComponent);
-    fixture.detectChanges();
-  });
-
-  const getCreateButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('[data-automation-id="create-button"]')).nativeElement;
-  const getUploadButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('[data-automation-id="upload-button"]')).nativeElement;
-
-  it('should render menu items when create menu is opened', async () => {
-    spyOnProperty(router, 'url').and.returnValue('/personal-files');
-
-    fixture.detectChanges();
-    await fixture.whenStable();
-
-    getCreateButton().click();
-
-    const menuItems = fixture.debugElement.queryAll(By.css('.app-toolbar-menu-item'));
-    expect(menuItems.length).toBe(2);
-
-    const menuItemOne = (menuItems[0].nativeElement as HTMLButtonElement).querySelector<HTMLSpanElement>('[data-automation-id="menu-item-title"]');
-    const menuItemTwo = (menuItems[1].nativeElement as HTMLButtonElement).querySelector<HTMLSpanElement>('[data-automation-id="menu-item-title"]');
-    expect(menuItemOne.innerText).toBe('create action one');
-    expect(menuItemTwo.innerText).toBe('create action two');
-  });
-
-  it('should render menu items when upload menu is opened', async () => {
-    spyOnProperty(router, 'url').and.returnValue('/personal-files');
-
-    fixture.detectChanges();
-    await fixture.whenStable();
-
-    getUploadButton().click();
-
-    const menuItems = fixture.debugElement.queryAll(By.css('.app-toolbar-menu-item'));
-    expect(menuItems.length).toBe(1);
-
-    const menuItemOne = (menuItems[0].nativeElement as HTMLButtonElement).querySelector<HTMLSpanElement>('[data-automation-id="menu-item-title"]');
-    expect(menuItemOne.innerText).toBe('upload action one');
-  });
-});

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

@@ -23,12 +23,10 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { AppExtensionService } from '@alfresco/aca-shared';
 import { SetCurrentFolderAction, AppStore } from '@alfresco/aca-shared/store';
 import { ContentActionRef } from '@alfresco/adf-extensions';
-import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 
 @Component({
@@ -37,29 +35,10 @@ import { Subject } from 'rxjs';
   styleUrls: ['./header-actions.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-export class HeaderActionsComponent implements OnInit, OnDestroy {
+export class HeaderActionsComponent implements OnDestroy {
   private onDestroy$ = new Subject<boolean>();
 
-  createActions: Array<ContentActionRef> = [];
-  uploadActions: Array<ContentActionRef> = [];
-
-  constructor(private store: Store<AppStore>, private extensions: AppExtensionService) {}
-
-  ngOnInit(): void {
-    this.extensions
-      .getCreateActions()
-      .pipe(takeUntil(this.onDestroy$))
-      .subscribe((actions) => {
-        this.createActions = actions;
-      });
-
-    this.extensions
-      .getUploadActions()
-      .pipe(takeUntil(this.onDestroy$))
-      .subscribe((actions) => {
-        this.uploadActions = actions;
-      });
-  }
+  constructor(private store: Store<AppStore>) {}
 
   ngOnDestroy() {
     this.onDestroy$.next(true);
@@ -70,12 +49,4 @@ export class HeaderActionsComponent implements OnInit, OnDestroy {
   trackByActionId(_: number, action: ContentActionRef) {
     return action.id;
   }
-
-  canShowCreateButton(): boolean {
-    return this.createActions.length > 0;
-  }
-
-  canShowUploadButton(): boolean {
-    return this.uploadActions.length > 0;
-  }
 }

projects/aca-shared/src/lib/components/document-base-page/document-base-page.component.ts

@@ -69,7 +69,6 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
   showHeader = ShowHeaderMode.Data;
   filterSorting = 'name-asc';
   createActions: Array<ContentActionRef> = [];
-  uploadActions: Array<ContentActionRef> = [];
 
   protected subscriptions: Subscription[] = [];
 
@@ -83,13 +82,6 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
         this.createActions = actions;
       });
 
-    this.extensions
-      .getUploadActions()
-      .pipe(takeUntil(this.onDestroy$))
-      .subscribe((actions) => {
-        this.uploadActions = actions;
-      });
-
     this.sharedPreviewUrl$ = this.store.select(getSharedUrl);
     this.infoDrawerOpened$ = this.store.select(isInfoDrawerOpened).pipe(map((infoDrawerState) => !this.isOutletPreviewUrl() && infoDrawerState));
 

projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.html

@@ -10,7 +10,7 @@
   <adf-toolbar-divider *ngSwitchCase="'separator'" [id]="actionRef.id"></adf-toolbar-divider>
 
   <ng-container *ngSwitchCase="'menu'">
-    <app-toolbar-menu [actionRef]="actionRef" [color]="color"> </app-toolbar-menu>
+    <app-toolbar-menu [actionRef]="actionRef" [color]="color" [data]="actionRef.data"></app-toolbar-menu>
   </ng-container>
 
   <ng-container *ngSwitchCase="'custom'">

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.html

@@ -1,15 +1,49 @@
-<button
+<ng-container [ngSwitch]="type">
+  <ng-container *ngSwitchCase="'button'">
+    <button
       [id]="actionRef.id"
-  [color]="color"
+      [color]="data?.color || color"
+      mat-button
+      [attr.aria-label]="actionRef.description || actionRef.title | translate"
+      [attr.title]="actionRef.description || actionRef.title | translate"
+      [matMenuTriggerFor]="menu"
+      [disabled]="actionRef.disabled"
+      #matTrigger="matMenuTrigger"
+    >
+      <span *ngIf="actionRef.title" data-automation-id="menu-item-title">{{ actionRef.title | translate }}</span>
+    </button>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'flat-button'">
+    <button
+      [id]="actionRef.id"
+      [color]="data?.color || color"
+      mat-flat-button
+      [attr.aria-label]="actionRef.description || actionRef.title | translate"
+      [attr.title]="actionRef.description || actionRef.title | translate"
+      [matMenuTriggerFor]="menu"
+      [disabled]="actionRef.disabled"
+      #matTrigger="matMenuTrigger"
+    >
+      <span *ngIf="actionRef.title" data-automation-id="menu-item-title">{{ actionRef.title | translate }}</span>
+    </button>
+  </ng-container>
+
+  <ng-container *ngSwitchDefault>
+    <button
+      [id]="actionRef.id"
+      [color]="data?.color || color"
       mat-icon-button
       [attr.aria-label]="actionRef.description || actionRef.title | translate"
       [attr.title]="actionRef.description || actionRef.title | translate"
       [matMenuTriggerFor]="menu"
       [disabled]="actionRef.disabled"
       #matTrigger="matMenuTrigger"
->
-  <adf-icon [value]="actionRef.icon"></adf-icon>
-</button>
+    >
+      <adf-icon *ngIf="actionRef.icon" [value]="actionRef.icon"></adf-icon>
+    </button>
+  </ng-container>
+</ng-container>
 
 <mat-menu #menu="matMenu" [overlapTrigger]="false">
   <ng-container *ngFor="let child of actionRef.children; trackBy: trackByActionId">

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.ts

@@ -51,6 +51,16 @@ export class ToolbarMenuComponent implements AfterViewInit {
   @ViewChildren(ToolbarMenuItemComponent)
   toolbarMenuItems: QueryList<ToolbarMenuItemComponent>;
 
+  @Input()
+  data: {
+    menuType?: string;
+    color?: string;
+  };
+
+  get type(): string {
+    return this.data?.menuType || 'default';
+  }
+
   @HostListener('document:keydown.Escape')
   handleKeydownEscape() {
     this.matTrigger.closeMenu();

projects/aca-shared/src/lib/services/app.extension.service.ts

@@ -79,7 +79,6 @@ export class AppExtensionService implements RuleContext {
   private _contextMenuActions = new BehaviorSubject<Array<ContentActionRef>>([]);
   private _openWithActions = new BehaviorSubject<Array<ContentActionRef>>([]);
   private _createActions = new BehaviorSubject<Array<ContentActionRef>>([]);
-  private _uploadActions = new BehaviorSubject<Array<ContentActionRef>>([]);
   private _mainActions = new BehaviorSubject<ContentActionRef>(null);
   private _sidebarActions = new BehaviorSubject<Array<ContentActionRef>>([]);
 
@@ -159,7 +158,6 @@ export class AppExtensionService implements RuleContext {
     this._contextMenuActions.next(this.loader.getContentActions(config, 'features.contextMenu'));
     this._openWithActions.next(this.loader.getContentActions(config, 'features.viewer.openWith'));
     this._createActions.next(this.loader.getElements<ContentActionRef>(config, 'features.create'));
-    this._uploadActions.next(this.loader.getElements<ContentActionRef>(config, 'features.upload'));
     this._mainActions.next(this.loader.getFeatures(config).mainAction);
 
     this.navbar = this.loadNavBar(config);
@@ -362,18 +360,6 @@ export class AppExtensionService implements RuleContext {
     );
   }
 
-  getUploadActions(): Observable<Array<ContentActionRef>> {
-    return this._uploadActions.pipe(
-      map((uploadActions) =>
-        uploadActions
-          .filter((action) => this.filterVisible(action))
-          .map((action) => this.copyAction(action))
-          .map((action) => this.buildMenu(action))
-          .map((action) => this.setActionDisabledFromRule(action))
-      )
-    );
-  }
-
   getMainAction(): Observable<ContentActionRef> {
     return this._mainActions.pipe(
       filter((mainAction) => mainAction && this.filterVisible(mainAction)),

projects/aca-testing-shared/src/components/sidenav/sidenav.ts

@@ -31,7 +31,7 @@ import { Component } from '../component';
 export class Sidenav extends Component {
   links = this.component.all(by.css('.item'));
   activeLink = this.byCss('.action-button--active');
-  newButton = element(By.css(('[data-automation-id="create-button"]')));
+  newButton = element(By.css(('[id="app.toolbar.create"]')));
   personalFiles = this.byCss(`[data-automation-id='app.navbar.personalFiles']`);
   fileLibraries = this.byCss(`[data-automation-id='app.navbar.libraries.menu']`);
   myLibraries = this.byCss(`[data-automation-id='app.navbar.libraries.files']`, browser);
@@ -53,7 +53,7 @@ export class Sidenav extends Component {
   }
 
   async closeNewMenu(): Promise<void> {
-    await BrowserActions.click(element(by.css('button[data-automation-id="create-button"] span span')));
+    await BrowserActions.click(element(by.css('button[id="app.toolbar.create"] span span')));
     await this.menu.waitForMenuToClose();
   }