[ACA-3296] Header - support actions order (#1464)

* header action order property

* apply sort for parents and children

* update tests

* use parent class to set style

* render user component through configuration

* header should allow disable actions rendering

* update e2e header resource

e2e/resources/extensibility-configs/header-ext.json

@@ -908,11 +908,12 @@
             "description": "Application settings",
             "icon": "settings",
             "disabled": true,
+            "order": 10,
             "actions": {
               "click": "app.actions.settings"
             },
             "rules": {
-              "visible": "app.toolbar.canViewFile"
+              "visible": "app.navigation.isNotTrashcan"
             }
           },
           {
@@ -920,11 +921,12 @@
             "title": "New Button",
             "description": "new button description",
             "icon": "alarm_on",
+            "order": 20,
             "actions": {
               "click": "app.actions.settings"
             },
             "rules": {
-              "visible": "app.toolbar.canViewFile"
+              "visible": "app.navigation.isNotTrashcan"
             }
           }
         ]

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

@@ -869,24 +869,118 @@ describe('AppExtensionService', () => {
         features: {
           userActions: [
             {
-              id: 'aca:toolbar/separator-2',
+              id: 'aca:toolbar/action-2',
               order: 2,
-              type: ContentActionType.separator,
+              type: ContentActionType.button,
               title: 'action2'
             },
             {
-              id: 'aca:toolbar/separator-1',
+              id: 'aca:toolbar/action-1',
               order: 1,
-              type: ContentActionType.separator,
+              type: ContentActionType.button,
               title: 'action1'
             }
           ]
         }
       });
 
-      expect(service.userActions.length).toBe(2);
+      const actions = service.getUserActions();
-      expect(service.userActions[0].id).toBe('aca:toolbar/separator-1');
+      expect(actions[0].id).toBe('aca:toolbar/action-1');
-      expect(service.userActions[1].id).toBe('aca:toolbar/separator-2');
+      expect(actions[1].id).toBe('aca:toolbar/action-2');
+    });
+  });
+
+  describe('getHeaderActions', () => {
+    it('should load user actions from the config', () => {
+      applyConfig({
+        $id: 'test',
+        $name: 'test',
+        $version: '1.0.0',
+        $license: 'MIT',
+        $vendor: 'Good company',
+        $runtime: '1.5.0',
+        features: {
+          header: [
+            {
+              id: 'header.action.separator.1',
+              order: 1,
+              type: ContentActionType.separator
+            },
+            {
+              id: 'header.action.separator.2',
+              order: 2,
+              type: ContentActionType.separator
+            }
+          ]
+        }
+      });
+
+      expect(service.headerActions.length).toBe(2);
+    });
+
+    it('should sort header actions by order', () => {
+      applyConfig({
+        $id: 'test',
+        $name: 'test',
+        $version: '1.0.0',
+        $license: 'MIT',
+        $vendor: 'Good company',
+        $runtime: '1.5.0',
+        features: {
+          header: [
+            {
+              id: 'header.action.1',
+              order: 2,
+              type: ContentActionType.button
+            },
+            {
+              id: 'header.action.2',
+              order: 1,
+              type: ContentActionType.button
+            }
+          ]
+        }
+      });
+
+      const actions = service.getHeaderActions();
+      expect(actions[0].id).toBe('header.action.2');
+      expect(actions[1].id).toBe('header.action.1');
+    });
+
+    it('should sort header menu children actions by order', () => {
+      applyConfig({
+        $id: 'test',
+        $name: 'test',
+        $version: '1.0.0',
+        $license: 'MIT',
+        $vendor: 'Good company',
+        $runtime: '1.5.0',
+        features: {
+          header: [
+            {
+              id: 'header.action.1',
+              order: 1,
+              type: ContentActionType.menu,
+              children: [
+                {
+                  id: 'header.action.1',
+                  order: 2,
+                  type: ContentActionType.button
+                },
+                {
+                  id: 'header.action.2',
+                  order: 1,
+                  type: ContentActionType.button
+                }
+              ]
+            }
+          ]
+        }
+      });
+
+      const actions = service.getHeaderActions()[0];
+      expect(actions.children[0].id).toBe('header.action.2');
+      expect(actions.children[1].id).toBe('header.action.1');
     });
   });
 });

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

@@ -499,7 +499,26 @@ export class AppExtensionService implements RuleContext {
   }
 
   getHeaderActions(): Array<ContentActionRef> {
-    return this.headerActions.filter(action => this.filterVisible(action));
+    return this.headerActions
+      .filter(action => this.filterVisible(action))
+      .map(action => {
+        if (action.type === ContentActionType.menu) {
+          const copy = this.copyAction(action);
+          if (copy.children && copy.children.length > 0) {
+            copy.children = copy.children
+              .filter(childAction => this.filterVisible(childAction))
+              .sort(sortByOrder)
+              .reduce(reduceEmptyMenus, [])
+              .reduce(reduceSeparators, []);
+          }
+          return copy;
+        }
+
+        return action;
+      })
+      .sort(sortByOrder)
+      .reduce(reduceEmptyMenus, [])
+      .reduce(reduceSeparators, []);
   }
 
   getAllowedContextMenuActions(): Array<ContentActionRef> {

src/app/app.module.ts

@@ -51,6 +51,7 @@ import { LibrariesComponent } from './components/libraries/libraries.component';
 import { FavoriteLibrariesComponent } from './components/favorite-libraries/favorite-libraries.component';
 import { NodeVersionUploadDialogComponent } from './dialogs/node-version-upload/node-version-upload.dialog';
 import { NodeVersionsDialogComponent } from './dialogs/node-versions/node-versions.dialog';
+import { CurrentUserComponent } from './components/current-user/current-user.component';
 
 import { AppStoreModule } from './store/app-store.module';
 import { MaterialModule } from './material.module';
@@ -177,7 +178,8 @@ registerLocaleData(localeSv);
     NodeVersionsDialogComponent,
     NodeVersionUploadDialogComponent,
     LibraryDialogComponent,
-    CreateFromTemplateDialogComponent
+    CreateFromTemplateDialogComponent,
+    CurrentUserComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/components/header/header.component.html

@@ -13,8 +13,6 @@
 
   <adf-toolbar-divider></adf-toolbar-divider>
 
-  <aca-current-user></aca-current-user>
-
   <ng-container *ngFor="let actionRef of actions; trackBy: trackByActionId">
     <aca-toolbar-action [actionRef]="actionRef" color="default">
     </aca-toolbar-action>

src/app/components/toolbar/toolbar-action/toolbar-actions.component.scss

@@ -1,9 +1,8 @@
 @mixin toolbar-actions-theme($theme) {
   $foreground: map-get($theme, foreground);
 
-  app-toolbar-button,
+  .aca-toolbar-action {
-  app-toolbar-menu,
-  adf-dynamic-component {
     color: mat-color($foreground, text, 0.72);
+    margin: 0 5px;
   }
 }

src/app/extensions/core.extensions.module.ts

@@ -52,6 +52,7 @@ import { ToggleSharedComponent } from '../components/common/toggle-shared/toggle
 import { ViewNodeComponent } from '../components/toolbar/view-node/view-node.component';
 import { LanguagePickerComponent } from '../components/common/language-picker/language-picker.component';
 import { LogoutComponent } from '../components/common/logout/logout.component';
+import { CurrentUserComponent } from '../components/current-user/current-user.component';
 import { AppExtensionService } from '@alfresco/aca-shared';
 
 export function setupExtensions(service: AppExtensionService): Function {
@@ -105,7 +106,8 @@ export class CoreExtensionsModule {
       'app.toolbar.toggleEditOffline': ToggleEditOfflineComponent,
       'app.toolbar.viewNode': ViewNodeComponent,
       'app.languagePicker': LanguagePickerComponent,
-      'app.logout': LogoutComponent
+      'app.logout': LogoutComponent,
+      'app.user': CurrentUserComponent
     });
 
     extensions.setAuthGuards({

src/assets/plugins/app.header.json

@@ -38,6 +38,12 @@
       }
     ],
     "header": [
+      {
+        "id": "app.header.user",
+        "type": "custom",
+        "component": "app.user",
+        "order": 100
+      },
       {
         "id": "app.header.more",
         "type": "menu",
@@ -47,6 +53,7 @@
         "children": [
           {
             "id": "app.header.about",
+            "order": 100,
             "title": "APP.BROWSE.ABOUT.TITLE",
             "description": "APP.BROWSE.ABOUT.TITLE",
             "icon": "info",