[ACA-3257] Add actions extension capability to info drawer (#1471)

* info drawer action added

* actions added

* * improved docs

* * added unit test

* fixed e2e

* * rename actions to toolbar

* * minor changes

* Update application-features.md

Co-authored-by: Eugenio Romano <eromano@users.noreply.github.com>

projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html

@@ -7,6 +7,12 @@
     cdkTrapFocus
     cdkTrapFocusAutoCapture
   >
+    <adf-toolbar class="adf-toolbar--inline" info-drawer-buttons>
+      <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
+        <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
+      </ng-container>
+    </adf-toolbar>
+
     <adf-info-drawer-tab
       *ngFor="let tab of tabs"
       [icon]="tab.icon"

projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.spec.ts

@@ -22,18 +22,20 @@
  * You should have received a copy of the GNU Lesser General Public License
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
+import { ContentActionRef } from '@alfresco/adf-extensions';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { InfoDrawerComponent } from './info-drawer.component';
-import { TestBed, ComponentFixture, async } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Store } from '@ngrx/store';
 import {
   SetInfoDrawerStateAction,
   ToggleInfoDrawerAction
 } from '@alfresco/aca-shared/store';
+import { of, Subject } from 'rxjs';
+import { InfoDrawerComponent } from './info-drawer.component';
 import { LibTestingModule } from '../../testing/lib-testing-module';
 import { AppExtensionService } from '../../services/app.extension.service';
 import { ContentApiService } from '../../services/content-api.service';
-import { of } from 'rxjs';
+import { SharedToolbarModule } from '../tool-bar/shared-toolbar.module';
 
 describe('InfoDrawerComponent', () => {
   let fixture: ComponentFixture<InfoDrawerComponent>;
@@ -41,16 +43,26 @@ describe('InfoDrawerComponent', () => {
   let contentApiService: ContentApiService;
   let tab;
   let appExtensionService: AppExtensionService;
+  const mockStream = new Subject();
   const storeMock = {
-    dispatch: jasmine.createSpy('dispatch')
+    dispatch: jasmine.createSpy('dispatch'),
+    select: () => mockStream
   };
   const extensionServiceMock = {
-    getSidebarTabs: () => {}
+    getSidebarTabs: () => {},
+    getAllowedSidebarActions: () => [
+      {
+        id: 'app.sidebar.close',
+        order: 100,
+        title: 'close',
+        icon: 'highlight_off'
+      }
+    ]
   };
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [LibTestingModule],
+      imports: [LibTestingModule, SharedToolbarModule],
       declarations: [InfoDrawerComponent],
       providers: [
         ContentApiService,
@@ -166,4 +178,17 @@ describe('InfoDrawerComponent', () => {
       new ToggleInfoDrawerAction()
     );
   });
+
+  it('should show the icons from extension', () => {
+    fixture.detectChanges();
+    mockStream.next();
+    expect(component.actions).toEqual([
+      {
+        id: 'app.sidebar.close',
+        order: 100,
+        title: 'close',
+        icon: 'highlight_off'
+      } as ContentActionRef
+    ]);
+  });
 });

projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts

@@ -36,14 +36,17 @@ import {
   MinimalNodeEntryEntity,
   SiteEntry
 } from '@alfresco/js-api';
-import { SidebarTabRef } from '@alfresco/adf-extensions';
+import { ContentActionRef, SidebarTabRef } from '@alfresco/adf-extensions';
 import { Store } from '@ngrx/store';
 import {
+  getAppSelection,
   SetInfoDrawerStateAction,
   ToggleInfoDrawerAction
 } from '@alfresco/aca-shared/store';
 import { AppExtensionService } from '../../services/app.extension.service';
 import { ContentApiService } from '../../services/content-api.service';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 @Component({
   selector: 'aca-info-drawer',
@@ -58,6 +61,8 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
   isLoading = false;
   displayNode: MinimalNodeEntryEntity | SiteEntry;
   tabs: Array<SidebarTabRef> = [];
+  actions: Array<ContentActionRef> = [];
+  onDestroy$ = new Subject<boolean>();
 
   @HostListener('keydown.escape')
   onEscapeKeyboardEvent(): void {
@@ -72,9 +77,17 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
 
   ngOnInit() {
     this.tabs = this.extensions.getSidebarTabs();
+    this.store
+      .select(getAppSelection)
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe(() => {
+        this.actions = this.extensions.getAllowedSidebarActions();
+      });
   }
 
   ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
     this.store.dispatch(new SetInfoDrawerStateAction(false));
   }
 
@@ -91,6 +104,10 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
     }
   }
 
+  trackByActionId(_: number, action: ContentActionRef) {
+    return action.id;
+  }
+
   private close() {
     this.store.dispatch(new ToggleInfoDrawerAction());
   }

projects/aca-shared/src/lib/components/info-drawer/shared-info-drawer.module.ts

@@ -26,16 +26,19 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { InfoDrawerComponent } from './info-drawer.component';
-import { InfoDrawerModule } from '@alfresco/adf-core';
+import { InfoDrawerModule, ToolbarModule } from '@alfresco/adf-core';
 import { ExtensionsModule } from '@alfresco/adf-extensions';
 import { MatProgressBarModule } from '@angular/material';
+import { SharedToolbarModule } from '../tool-bar/shared-toolbar.module';
 
 @NgModule({
   imports: [
     CommonModule,
     InfoDrawerModule,
     MatProgressBarModule,
-    ExtensionsModule
+    ExtensionsModule,
+    ToolbarModule,
+    SharedToolbarModule
   ],
   declarations: [InfoDrawerComponent],
   exports: [InfoDrawerComponent]

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

@@ -83,7 +83,8 @@ export class AppExtensionService implements RuleContext {
   openWithActions: Array<ContentActionRef> = [];
   createActions: Array<ContentActionRef> = [];
   navbar: Array<NavBarGroupRef> = [];
-  sidebar: Array<SidebarTabRef> = [];
+  sidebarTabs: Array<SidebarTabRef> = [];
+  sidebarActions: Array<ContentActionRef> = [];
   contentMetadata: any;
   viewerRules: ViewerRules = {};
   userActions: Array<ContentActionRef> = [];
@@ -163,6 +164,10 @@ export class AppExtensionService implements RuleContext {
       config,
       'features.header'
     );
+    this.sidebarActions = this.loader.getContentActions(
+      config,
+      'features.sidebar.toolbar'
+    );
     this.toolbarActions = this.loader.getContentActions(
       config,
       'features.toolbar'
@@ -189,9 +194,9 @@ export class AppExtensionService implements RuleContext {
       'features.create'
     );
     this.navbar = this.loadNavBar(config);
-    this.sidebar = this.loader.getElements<SidebarTabRef>(
+    this.sidebarTabs = this.loader.getElements<SidebarTabRef>(
       config,
-      'features.sidebar'
+      'features.sidebar.tabs'
     );
     this.userActions = this.loader.getContentActions(
       config,
@@ -382,7 +387,7 @@ export class AppExtensionService implements RuleContext {
   }
 
   getSidebarTabs(): Array<SidebarTabRef> {
-    return this.sidebar.filter(action => this.filterVisible(action));
+    return this.sidebarTabs.filter(action => this.filterVisible(action));
   }
 
   getComponentById(id: string): Type<{}> {
@@ -486,6 +491,10 @@ export class AppExtensionService implements RuleContext {
       .reduce(reduceSeparators, []);
   }
 
+  getAllowedSidebarActions(): Array<ContentActionRef> {
+    return this.getAllowedActions(this.sidebarActions);
+  }
+
   getAllowedToolbarActions(): Array<ContentActionRef> {
     return this.getAllowedActions(this.toolbarActions);
   }