[AAE-11496] Move 'content-plugin' to projects folder as 'aca-content' (#2817)

* [AAE-11496] Move content-plugin to projects

* Fix unit test

projects/aca-content/src/lib/components/toolbar/document-display-mode/document-display-mode.component.spec.ts

@@ -0,0 +1,63 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * 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 { DocumentDisplayModeComponent } from './document-display-mode.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CoreModule } from '@angular/flex-layout';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppTestingModule } from '../../../testing/app-testing.module';
+import { of } from 'rxjs';
+
+describe('DocumentDisplayModeComponent', () => {
+  let component: DocumentDisplayModeComponent;
+  let fixture: ComponentFixture<DocumentDisplayModeComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot(), CoreModule, AppTestingModule]
+    });
+
+    fixture = TestBed.createComponent(DocumentDisplayModeComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should show the list button when list', async () => {
+    component.displayMode$ = of('list');
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const displayButton: HTMLButtonElement = fixture.nativeElement.querySelector('#app-document-display-mode-button');
+    expect(displayButton.title).toBe('APP.ACTIONS.LIST_MODE');
+  });
+
+  it('should show the gallery button when list', async () => {
+    component.displayMode$ = of('gallery');
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const displayButton: HTMLButtonElement = fixture.nativeElement.querySelector('#app-document-display-mode-button');
+    expect(displayButton.title).toBe('APP.ACTIONS.GALLERY_MODE');
+  });
+});

projects/aca-content/src/lib/components/toolbar/document-display-mode/document-display-mode.component.ts

@@ -0,0 +1,65 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * 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 { Component, ViewEncapsulation } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { AppStore, ToggleDocumentDisplayMode, getDocumentDisplayMode } from '@alfresco/aca-shared/store';
+
+@Component({
+  selector: 'app-document-display-mode',
+  template: `
+    <ng-container *ngIf="displayMode$ | async as displayMode">
+      <button
+        id="app-document-display-mode-button"
+        [attr.title]="getTitle(displayMode) | translate"
+        [attr.aria-label]="getTitle(displayMode) | translate"
+        mat-icon-button
+        color="primary"
+        (click)="onClick()"
+      >
+        <mat-icon *ngIf="displayMode === 'list'">view_comfy</mat-icon>
+        <mat-icon *ngIf="displayMode === 'gallery'">list</mat-icon>
+      </button>
+    </ng-container>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-document-display-mode' }
+})
+export class DocumentDisplayModeComponent {
+  displayMode$: Observable<string>;
+
+  constructor(private store: Store<AppStore>) {
+    this.displayMode$ = store.select(getDocumentDisplayMode);
+  }
+
+  getTitle(displayMode: string): string {
+    return displayMode === 'list' ? 'APP.ACTIONS.LIST_MODE' : 'APP.ACTIONS.GALLERY_MODE';
+  }
+
+  onClick() {
+    this.store.dispatch(new ToggleDocumentDisplayMode());
+  }
+}

projects/aca-content/src/lib/components/toolbar/toggle-edit-offline/toggle-edit-offline.component.spec.ts

@@ -0,0 +1,139 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * 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 { ToggleEditOfflineComponent } from './toggle-edit-offline.component';
+import { CoreModule } from '@alfresco/adf-core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { of } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { NodeEntry } from '@alfresco/js-api';
+import { DownloadNodesAction, EditOfflineAction, SnackbarErrorAction } from '@alfresco/aca-shared/store';
+import { TranslateModule } from '@ngx-translate/core';
+
+describe('ToggleEditOfflineComponent', () => {
+  let fixture: ComponentFixture<ToggleEditOfflineComponent>;
+  let component: ToggleEditOfflineComponent;
+  let store: Store;
+  let dispatchSpy: jasmine.Spy;
+  let selectSpy: jasmine.Spy;
+  let selection: any;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot(), CoreModule.forRoot()],
+      declarations: [ToggleEditOfflineComponent],
+      providers: [
+        {
+          provide: Store,
+          useValue: {
+            select: () => {},
+            dispatch: () => {}
+          }
+        }
+      ]
+    });
+
+    fixture = TestBed.createComponent(ToggleEditOfflineComponent);
+    component = fixture.componentInstance;
+    spyOn(component, 'unlockNode').and.returnValue(Promise.resolve(null));
+    spyOn(component, 'lockNode').and.returnValue(Promise.resolve(null));
+    store = TestBed.inject(Store);
+
+    dispatchSpy = spyOn(store, 'dispatch');
+    selectSpy = spyOn(store, 'select');
+
+    selection = { file: { entry: { name: 'test', properties: {}, isLocked: false } } };
+  });
+
+  it('should initialized with data from store', () => {
+    selectSpy.and.returnValue(of(selection));
+
+    fixture.detectChanges();
+
+    expect(component.selection).toEqual(selection.file as any);
+  });
+
+  it('should download content when node is locked', async () => {
+    selectSpy.and.returnValue(of(selection));
+    fixture.detectChanges();
+
+    selection.file.entry.isLocked = false;
+    await component.onClick();
+
+    fixture.detectChanges();
+
+    expect(dispatchSpy.calls.argsFor(0)).toEqual([new DownloadNodesAction([selection.file as NodeEntry])]);
+  });
+
+  it('should not download content if node is not locked', () => {
+    selectSpy.and.returnValue(of(selection));
+
+    fixture.detectChanges();
+    component.onClick();
+    fixture.detectChanges();
+
+    expect(dispatchSpy.calls.argsFor(0)).not.toEqual([new DownloadNodesAction([selection.file as NodeEntry])]);
+  });
+
+  it('should dispatch EditOfflineAction action', async () => {
+    selectSpy.and.returnValue(of(selection));
+
+    selection.file.entry.isLocked = true;
+
+    fixture.detectChanges();
+    await component.onClick();
+    fixture.detectChanges();
+
+    expect(dispatchSpy.calls.argsFor(0)).toEqual([new EditOfflineAction(selection.file as NodeEntry)]);
+  });
+
+  it('should raise notification on lock error', () => {
+    selectSpy.and.returnValue(of(selection));
+
+    fixture.detectChanges();
+    component.onLockError();
+    fixture.detectChanges();
+
+    expect(dispatchSpy.calls.argsFor(0)).toEqual([
+      new SnackbarErrorAction('APP.MESSAGES.ERRORS.LOCK_NODE', {
+        fileName: 'test'
+      })
+    ]);
+  });
+
+  it('should raise notification on unlock error', () => {
+    selectSpy.and.returnValue(of(selection));
+
+    fixture.detectChanges();
+    component.onUnlockError();
+    fixture.detectChanges();
+
+    expect(dispatchSpy.calls.argsFor(0)).toEqual([
+      new SnackbarErrorAction('APP.MESSAGES.ERRORS.UNLOCK_NODE', {
+        fileName: 'test'
+      })
+    ]);
+  });
+});

projects/aca-content/src/lib/components/toolbar/toggle-edit-offline/toggle-edit-offline.component.ts

@@ -0,0 +1,140 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * 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 { AppStore, DownloadNodesAction, EditOfflineAction, SnackbarErrorAction, getAppSelection } from '@alfresco/aca-shared/store';
+import { MinimalNodeEntity, NodeEntry, SharedLinkEntry, Node, NodesApi } from '@alfresco/js-api';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { isLocked } from '@alfresco/aca-shared';
+import { AlfrescoApiService } from '@alfresco/adf-core';
+
+@Component({
+  selector: 'app-toggle-edit-offline',
+  template: `
+    <button
+      mat-menu-item
+      [attr.title]="(isNodeLocked ? 'APP.ACTIONS.EDIT_OFFLINE_CANCEL' : 'APP.ACTIONS.EDIT_OFFLINE') | translate"
+      (click)="onClick()"
+    >
+      <ng-container *ngIf="isNodeLocked">
+        <mat-icon>cancel</mat-icon>
+        <span>{{ 'APP.ACTIONS.EDIT_OFFLINE_CANCEL' | translate }}</span>
+      </ng-container>
+
+      <ng-container *ngIf="!isNodeLocked">
+        <mat-icon>edit</mat-icon>
+        <span>{{ 'APP.ACTIONS.EDIT_OFFLINE' | translate }}</span>
+      </ng-container>
+    </button>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-toggle-edit-offline' }
+})
+export class ToggleEditOfflineComponent implements OnInit {
+  private nodesApi: NodesApi;
+  selection: MinimalNodeEntity;
+
+  constructor(private store: Store<AppStore>, private alfrescoApiService: AlfrescoApiService) {
+    this.nodesApi = new NodesApi(this.alfrescoApiService.getInstance());
+  }
+
+  ngOnInit() {
+    this.store.select(getAppSelection).subscribe(({ file }) => {
+      this.selection = file;
+    });
+  }
+
+  get isNodeLocked(): boolean {
+    return !!(this.selection && isLocked(this.selection));
+  }
+
+  async onClick() {
+    await this.toggleLock(this.selection);
+  }
+
+  private async toggleLock(node: NodeEntry | SharedLinkEntry) {
+    const id = (node as SharedLinkEntry).entry.nodeId || node.entry.id;
+
+    if (isLocked(this.selection)) {
+      try {
+        const response = await this.unlockNode(id);
+
+        this.update(response?.entry);
+        this.store.dispatch(new EditOfflineAction(this.selection));
+      } catch {
+        this.onUnlockError();
+      }
+    } else {
+      try {
+        const response = await this.lockNode(id);
+
+        this.update(response?.entry);
+        this.store.dispatch(new DownloadNodesAction([this.selection]));
+        this.store.dispatch(new EditOfflineAction(this.selection));
+      } catch {
+        this.onLockError();
+      }
+    }
+  }
+
+  onLockError() {
+    this.store.dispatch(
+      new SnackbarErrorAction('APP.MESSAGES.ERRORS.LOCK_NODE', {
+        fileName: this.selection.entry.name
+      })
+    );
+  }
+
+  onUnlockError() {
+    this.store.dispatch(
+      new SnackbarErrorAction('APP.MESSAGES.ERRORS.UNLOCK_NODE', {
+        fileName: this.selection.entry.name
+      })
+    );
+  }
+
+  lockNode(nodeId: string) {
+    return this.nodesApi.lockNode(nodeId, {
+      type: 'ALLOW_OWNER_CHANGES',
+      lifetime: 'PERSISTENT'
+    });
+  }
+
+  unlockNode(nodeId: string) {
+    return this.nodesApi.unlockNode(nodeId);
+  }
+
+  private update(data: Node) {
+    if (data && data.properties) {
+      const properties = this.selection.entry.properties || {};
+
+      properties['cm:lockLifetime'] = data.properties['cm:lockLifetime'];
+      properties['cm:lockOwner'] = data.properties['cm:lockOwner'];
+      properties['cm:lockType'] = data.properties['cm:lockType'];
+
+      this.selection.entry.properties = properties;
+    }
+  }
+}

projects/aca-content/src/lib/components/toolbar/toggle-favorite-library/toggle-favorite-library.component.spec.ts

@@ -0,0 +1,103 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * 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 { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CoreModule } from '@alfresco/adf-core';
+import { ToggleFavoriteLibraryComponent } from './toggle-favorite-library.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppTestingModule } from '../../../testing/app-testing.module';
+import { of } from 'rxjs';
+import { Router } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppHookService, ContentApiService } from '@alfresco/aca-shared';
+
+describe('ToggleFavoriteLibraryComponent', () => {
+  let fixture: ComponentFixture<ToggleFavoriteLibraryComponent>;
+  let component: ToggleFavoriteLibraryComponent;
+  let appHookService: AppHookService;
+  let contentApiService: any;
+
+  const selection = { library: { entry: { id: 'libraryId' } } };
+  const mockRouter = {
+    url: ''
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot(), CoreModule.forRoot(), AppTestingModule],
+      declarations: [ToggleFavoriteLibraryComponent],
+      providers: [
+        {
+          provide: Router,
+          useValue: mockRouter
+        },
+        {
+          provide: Store,
+          useValue: {
+            dispatch: () => {},
+            select: () => of(selection)
+          }
+        }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    });
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ToggleFavoriteLibraryComponent);
+    component = fixture.componentInstance;
+    contentApiService = TestBed.inject(ContentApiService);
+
+    appHookService = TestBed.inject(AppHookService);
+    spyOn(contentApiService['favoritesApi'], 'getFavoriteSite').and.returnValue(Promise.resolve(null));
+  });
+
+  it('should get library selection from Store', async () => {
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(component.library.entry.id).toEqual(selection.library.entry.id);
+  });
+
+  it('should mark selection as favorite when on favorite libraries route', async () => {
+    mockRouter.url = '/favorite/libraries';
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(component.library.isFavorite).toBe(true);
+  });
+
+  it('should emit onToggleEvent() event', async () => {
+    spyOn(appHookService.favoriteLibraryToggle, 'next');
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    component.onToggleEvent();
+
+    expect(appHookService.favoriteLibraryToggle.next).toHaveBeenCalled();
+  });
+});

projects/aca-content/src/lib/components/toolbar/toggle-favorite-library/toggle-favorite-library.component.ts

@@ -0,0 +1,82 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * 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 { Component, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppHookService } from '@alfresco/aca-shared';
+import { AppStore, getAppSelection } from '@alfresco/aca-shared/store';
+import { SelectionState } from '@alfresco/adf-extensions';
+import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'app-toggle-favorite-library',
+  template: `
+    <button
+      mat-menu-item
+      (toggle)="onToggleEvent()"
+      [adf-favorite-library]="library"
+      [attr.title]="library.isFavorite ? ('APP.ACTIONS.REMOVE_FAVORITE' | translate) : ('APP.ACTIONS.FAVORITE' | translate)"
+    >
+      <mat-icon *ngIf="library.isFavorite">star</mat-icon>
+      <mat-icon *ngIf="!library.isFavorite">star_border</mat-icon>
+      <span>{{ (library.isFavorite ? 'APP.ACTIONS.REMOVE_FAVORITE' : 'APP.ACTIONS.FAVORITE') | translate }}</span>
+    </button>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-toggle-favorite-library' }
+})
+export class ToggleFavoriteLibraryComponent implements OnInit, OnDestroy {
+  library;
+  private onDestroy$: Subject<boolean> = new Subject<boolean>();
+
+  constructor(private store: Store<AppStore>, private appHookService: AppHookService, private router: Router) {}
+
+  ngOnInit() {
+    const isFavoriteLibraries = this.router.url.startsWith('/favorite/libraries');
+
+    this.store
+      .select(getAppSelection)
+      .pipe(distinctUntilChanged(), takeUntil(this.onDestroy$))
+      .subscribe((selection: SelectionState) => {
+        this.library = { ...selection.library };
+
+        // favorite libraries list should already be marked as favorite
+        if (selection.library && isFavoriteLibraries) {
+          this.library.isFavorite = true;
+        }
+      });
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+
+  onToggleEvent() {
+    this.appHookService.favoriteLibraryToggle.next();
+  }
+}

projects/aca-content/src/lib/components/toolbar/toggle-favorite/toggle-favorite.component.spec.ts

@@ -0,0 +1,92 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * 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 { TestBed } from '@angular/core/testing';
+import { ToggleFavoriteComponent } from './toggle-favorite.component';
+import { Store } from '@ngrx/store';
+import { ExtensionService } from '@alfresco/adf-extensions';
+import { CoreModule } from '@alfresco/adf-core';
+import { Router } from '@angular/router';
+import { of } from 'rxjs';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppTestingModule } from '../../../testing/app-testing.module';
+import { ContentDirectiveModule } from '@alfresco/adf-content-services';
+
+describe('ToggleFavoriteComponent', () => {
+  let component: ToggleFavoriteComponent;
+  let fixture;
+  let router;
+  const mockRouter = {
+    url: 'some-url'
+  };
+  const mockStore: any = {
+    dispatch: jasmine.createSpy('dispatch'),
+    select: jasmine.createSpy('select').and.returnValue(
+      of({
+        nodes: []
+      })
+    )
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot(), CoreModule.forRoot(), ContentDirectiveModule, AppTestingModule],
+      declarations: [ToggleFavoriteComponent],
+      providers: [ExtensionService, { provide: Store, useValue: mockStore }, { provide: Router, useValue: mockRouter }]
+    });
+
+    fixture = TestBed.createComponent(ToggleFavoriteComponent);
+    component = fixture.componentInstance;
+    router = TestBed.inject(Router);
+  });
+
+  afterEach(() => {
+    mockStore.dispatch.calls.reset();
+  });
+
+  it('should get selection data on initialization', () => {
+    expect(mockStore.select).toHaveBeenCalled();
+  });
+
+  it('should not dispatch reload if route is not specified', () => {
+    component.data = '["/reload_on_this_route"]';
+    router.url = '/somewhere_over_the_rainbow';
+
+    fixture.detectChanges();
+    component.onToggleEvent();
+
+    expect(mockStore.dispatch).toHaveBeenCalled();
+  });
+
+  it('should dispatch reload if route is specified', () => {
+    component.data = '["/reload_on_this_route"]';
+    router.url = '/reload_on_this_route';
+
+    fixture.detectChanges();
+    component.onToggleEvent();
+
+    expect(mockStore.dispatch).toHaveBeenCalled();
+  });
+});

projects/aca-content/src/lib/components/toolbar/toggle-favorite/toggle-favorite.component.ts

@@ -0,0 +1,65 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * 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 { Component, ViewEncapsulation, OnInit, Input } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { SelectionState } from '@alfresco/adf-extensions';
+import { AppStore, ReloadDocumentListAction, getAppSelection } from '@alfresco/aca-shared/store';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-toggle-favorite',
+  template: `
+    <button mat-menu-item #favorites="adfFavorite" (toggle)="onToggleEvent()" [adf-node-favorite]="(selection$ | async).nodes">
+      <mat-icon *ngIf="favorites.hasFavorites()">star</mat-icon>
+      <mat-icon *ngIf="!favorites.hasFavorites()">star_border</mat-icon>
+      <span>{{ (favorites.hasFavorites() ? 'APP.ACTIONS.REMOVE_FAVORITE' : 'APP.ACTIONS.FAVORITE') | translate }}</span>
+    </button>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-toggle-favorite' }
+})
+export class ToggleFavoriteComponent implements OnInit {
+  @Input() data: any;
+  selection$: Observable<SelectionState>;
+  private reloadOnRoutes: string[] = [];
+
+  constructor(private store: Store<AppStore>, private router: Router) {
+    this.selection$ = this.store.select(getAppSelection);
+  }
+
+  ngOnInit() {
+    if (this.data) {
+      this.reloadOnRoutes = JSON.parse(this.data.replace(/'/g, '"'));
+    }
+  }
+
+  onToggleEvent() {
+    if (this.reloadOnRoutes.includes(this.router.url)) {
+      this.store.dispatch(new ReloadDocumentListAction());
+    }
+  }
+}

projects/aca-content/src/lib/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.spec.ts

@@ -0,0 +1,59 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * 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 { ToggleInfoDrawerComponent } from './toggle-info-drawer.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CoreModule } from '@angular/flex-layout';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppTestingModule } from '../../../testing/app-testing.module';
+import { Subject } from 'rxjs';
+import { Store } from '@ngrx/store';
+
+describe('ToggleInfoDrawerComponent', () => {
+  let fixture: ComponentFixture<ToggleInfoDrawerComponent>;
+  const mockStream = new Subject();
+  const storeMock = {
+    dispatch: jasmine.createSpy('dispatch'),
+    select: () => mockStream
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot(), CoreModule, AppTestingModule],
+      providers: [{ provide: Store, useValue: storeMock }]
+    });
+
+    fixture = TestBed.createComponent(ToggleInfoDrawerComponent);
+  });
+
+  it('should show info drawer button', async () => {
+    mockStream.next(true);
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const infoDrawerButton: HTMLButtonElement = fixture.nativeElement.querySelector('.app-toggle-info-drawer button');
+    expect(infoDrawerButton).not.toBeNull();
+  });
+});

projects/aca-content/src/lib/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts

@@ -0,0 +1,58 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * 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 { Component, ViewEncapsulation } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { ToggleInfoDrawerAction, isInfoDrawerOpened } from '@alfresco/aca-shared/store';
+
+@Component({
+  selector: 'app-toggle-info-drawer',
+  template: `
+    <button
+      mat-icon-button
+      [color]="(infoDrawerOpened$ | async) ? 'primary' : null"
+      [attr.aria-label]="'APP.ACTIONS.DETAILS' | translate"
+      [attr.aria-expanded]="infoDrawerOpened$ | async"
+      [attr.title]="'APP.ACTIONS.DETAILS' | translate"
+      (click)="onClick()"
+    >
+      <mat-icon>menu_open</mat-icon>
+    </button>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-toggle-info-drawer' }
+})
+export class ToggleInfoDrawerComponent {
+  infoDrawerOpened$: Observable<boolean>;
+
+  constructor(private store: Store<any>) {
+    this.infoDrawerOpened$ = this.store.select(isInfoDrawerOpened);
+  }
+
+  onClick() {
+    this.store.dispatch(new ToggleInfoDrawerAction());
+  }
+}

projects/aca-content/src/lib/components/toolbar/toggle-join-library/toggle-join-library-button.component.ts

@@ -0,0 +1,86 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * 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 {
+  AppStore,
+  SetSelectedNodesAction,
+  SnackbarErrorAction,
+  SnackbarInfoAction,
+  getAppSelection,
+  getUserProfile
+} from '@alfresco/aca-shared/store';
+import { AppHookService } from '@alfresco/aca-shared';
+import { ProfileState, SelectionState } from '@alfresco/adf-extensions';
+import { Component, ViewEncapsulation } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { LibraryMembershipErrorEvent, LibraryMembershipToggleEvent } from '@alfresco/adf-content-services';
+
+@Component({
+  selector: 'app-toggle-join-library-button',
+  template: `
+    <button
+      mat-icon-button
+      color="primary"
+      #membership="libraryMembership"
+      (toggle)="onToggleEvent($event)"
+      (error)="onErrorEvent($event)"
+      [adf-library-membership]="(selection$ | async).library"
+      [isAdmin]="(profile$ | async).isAdmin"
+      [attr.title]="(membership.isJoinRequested | async) ? ('APP.ACTIONS.CANCEL_JOIN' | translate) : ('APP.ACTIONS.JOIN' | translate)"
+    >
+      <mat-icon *ngIf="membership.isJoinRequested | async">cancel</mat-icon>
+      <mat-icon *ngIf="!(membership.isJoinRequested | async)" svgIcon="adf:join_library"></mat-icon>
+    </button>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-toggle-join-library' }
+})
+export class ToggleJoinLibraryButtonComponent {
+  selection$: Observable<SelectionState>;
+  profile$: Observable<ProfileState>;
+
+  constructor(private store: Store<AppStore>, private appHookService: AppHookService) {
+    this.selection$ = this.store.select(getAppSelection);
+    this.profile$ = this.store.select(getUserProfile);
+  }
+
+  onToggleEvent(event: LibraryMembershipToggleEvent) {
+    this.store.dispatch(new SnackbarInfoAction(event.i18nKey));
+
+    if (event.shouldReload) {
+      this.appHookService.libraryJoined.next();
+    } else {
+      if (event.updatedEntry) {
+        this.store.dispatch(new SetSelectedNodesAction([{ entry: event.updatedEntry, isLibrary: true } as any]));
+      }
+      this.appHookService.joinLibraryToggle.next();
+    }
+  }
+
+  onErrorEvent(event: LibraryMembershipErrorEvent) {
+    this.store.dispatch(new SnackbarErrorAction(event.i18nKey));
+  }
+}

projects/aca-content/src/lib/components/toolbar/toggle-join-library/toggle-join-library-menu.component.ts

@@ -0,0 +1,56 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * 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 { Component, ViewEncapsulation } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppHookService } from '@alfresco/aca-shared';
+import { AppStore } from '@alfresco/aca-shared/store';
+import { ToggleJoinLibraryButtonComponent } from './toggle-join-library-button.component';
+
+@Component({
+  selector: 'app-toggle-join-library-menu',
+  template: `
+    <button
+      mat-menu-item
+      #membership="libraryMembership"
+      (toggle)="onToggleEvent($event)"
+      (error)="onErrorEvent($event)"
+      [adf-library-membership]="(selection$ | async).library"
+      [isAdmin]="(profile$ | async).isAdmin"
+      [attr.title]="(membership.isJoinRequested | async) ? ('APP.ACTIONS.CANCEL_JOIN' | translate) : ('APP.ACTIONS.JOIN' | translate)"
+    >
+      <mat-icon *ngIf="membership.isJoinRequested | async">cancel</mat-icon>
+      <mat-icon *ngIf="!(membership.isJoinRequested | async)" svgIcon="adf:join_library"></mat-icon>
+      <span>{{ (membership.isJoinRequested | async) ? ('APP.ACTIONS.CANCEL_JOIN' | translate) : ('APP.ACTIONS.JOIN' | translate) }}</span>
+    </button>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-toggle-join-library' }
+})
+export class ToggleJoinLibraryMenuComponent extends ToggleJoinLibraryButtonComponent {
+  constructor(store: Store<AppStore>, appHookService: AppHookService) {
+    super(store, appHookService);
+  }
+}

projects/aca-content/src/lib/components/toolbar/toggle-join-library/toggle-join-library.component.spec.ts

@@ -0,0 +1,123 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * 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 { of } from 'rxjs';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DirectiveModule } from '@alfresco/adf-core';
+import { Store } from '@ngrx/store';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { SnackbarErrorAction, SnackbarInfoAction } from '@alfresco/aca-shared/store';
+import { AppTestingModule } from '../../../testing/app-testing.module';
+import { ToggleJoinLibraryButtonComponent } from './toggle-join-library-button.component';
+import { AppHookService, ContentApiService } from '@alfresco/aca-shared';
+import { ContentDirectiveModule } from '@alfresco/adf-content-services';
+
+describe('ToggleJoinLibraryComponent', () => {
+  let component: ToggleJoinLibraryButtonComponent;
+  let fixture: ComponentFixture<ToggleJoinLibraryButtonComponent>;
+  let appHookService: AppHookService;
+  let contentApiService: any;
+  let store: Store<any>;
+  let entry;
+
+  beforeEach(() => {
+    entry = {
+      id: 'lib-id',
+      joinRequested: true,
+      title: 'test',
+      visibility: 'MODERATED'
+    };
+
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule, DirectiveModule, ContentDirectiveModule],
+      declarations: [ToggleJoinLibraryButtonComponent],
+      providers: [
+        {
+          provide: Store,
+          useValue: {
+            select: () => of({ library: { entry, isLibrary: true } }),
+            dispatch: jasmine.createSpy('dispatch')
+          }
+        }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    });
+
+    store = TestBed.inject(Store);
+    appHookService = TestBed.inject(AppHookService);
+
+    contentApiService = TestBed.inject(ContentApiService);
+    fixture = TestBed.createComponent(ToggleJoinLibraryButtonComponent);
+    component = fixture.componentInstance;
+    spyOn(contentApiService['sitesApi'], 'getSiteMembershipRequestForPerson').and.stub();
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+  });
+
+  it('should get Store selection entry on initialization', (done) => {
+    component.selection$.subscribe((selection) => {
+      expect(selection.library.entry).toEqual(entry);
+      done();
+    });
+  });
+
+  it('should dispatch `SnackbarErrorAction` action on error', () => {
+    const event = { error: {}, i18nKey: 'ERROR_i18nKey' };
+    component.onErrorEvent(event);
+
+    expect(store.dispatch).toHaveBeenCalledWith(new SnackbarErrorAction(event.i18nKey));
+  });
+
+  it('should dispatch `SnackbarInfoAction` action on onToggleEvent', () => {
+    const event = { shouldReload: true, i18nKey: 'SOME_i18nKey' };
+    component.onToggleEvent(event);
+
+    expect(store.dispatch).toHaveBeenCalledWith(new SnackbarInfoAction(event.i18nKey));
+  });
+
+  it('should call libraryJoined.next on contentManagementService onToggleEvent', (done) => {
+    spyOn(appHookService.libraryJoined, 'next').and.callThrough();
+
+    appHookService.libraryJoined.subscribe(() => {
+      expect(appHookService.libraryJoined.next).toHaveBeenCalled();
+      done();
+    });
+    const event = { shouldReload: true, i18nKey: null };
+    component.onToggleEvent(event);
+  });
+
+  it('should call joinLibraryToggle.next on contentManagementService onToggleEvent', (done) => {
+    spyOn(appHookService.joinLibraryToggle, 'next').and.callThrough();
+
+    appHookService.joinLibraryToggle.subscribe(() => {
+      expect(appHookService.joinLibraryToggle.next).toHaveBeenCalled();
+      done();
+    });
+    const event = { shouldReload: false, i18nKey: null };
+    component.onToggleEvent(event);
+  });
+});

projects/aca-content/src/lib/components/toolbar/toolbar.module.ts

@@ -0,0 +1,66 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * 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 { NgModule } from '@angular/core';
+import { DocumentDisplayModeComponent } from './document-display-mode/document-display-mode.component';
+import { ToggleFavoriteComponent } from './toggle-favorite/toggle-favorite.component';
+import { ToggleInfoDrawerComponent } from './toggle-info-drawer/toggle-info-drawer.component';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { ExtensionsModule } from '@alfresco/adf-extensions';
+import { ToggleJoinLibraryButtonComponent } from './toggle-join-library/toggle-join-library-button.component';
+import { ToggleJoinLibraryMenuComponent } from './toggle-join-library/toggle-join-library-menu.component';
+import { DirectivesModule } from '../../directives/directives.module';
+import { ToggleFavoriteLibraryComponent } from './toggle-favorite-library/toggle-favorite-library.component';
+import { ToggleEditOfflineComponent } from './toggle-edit-offline/toggle-edit-offline.component';
+import { ViewNodeComponent } from './view-node/view-node.component';
+import { AppCommonModule } from '../common/common.module';
+import { SharedToolbarModule } from '@alfresco/aca-shared';
+
+@NgModule({
+  imports: [CommonModule, CoreModule.forChild(), AppCommonModule, ExtensionsModule, SharedToolbarModule, DirectivesModule],
+  declarations: [
+    DocumentDisplayModeComponent,
+    ToggleFavoriteComponent,
+    ToggleInfoDrawerComponent,
+    ToggleJoinLibraryButtonComponent,
+    ToggleJoinLibraryMenuComponent,
+    ToggleFavoriteLibraryComponent,
+    ToggleEditOfflineComponent,
+    ViewNodeComponent
+  ],
+  exports: [
+    DocumentDisplayModeComponent,
+    ToggleFavoriteComponent,
+    ToggleInfoDrawerComponent,
+    ToggleJoinLibraryButtonComponent,
+    ToggleJoinLibraryMenuComponent,
+    ToggleFavoriteLibraryComponent,
+    ToggleEditOfflineComponent,
+    ViewNodeComponent,
+    SharedToolbarModule
+  ]
+})
+export class AppToolbarModule {}

projects/aca-content/src/lib/components/toolbar/view-node/view-node.component.spec.ts

@@ -0,0 +1,128 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * 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 { TestBed } from '@angular/core/testing';
+import { ViewNodeComponent } from './view-node.component';
+import { Store } from '@ngrx/store';
+import { CoreModule } from '@alfresco/adf-core';
+import { Router } from '@angular/router';
+import { of } from 'rxjs';
+import { TranslateModule } from '@ngx-translate/core';
+import { ViewNodeAction } from '@alfresco/aca-shared/store';
+
+describe('ViewNodeComponent', () => {
+  let component: ViewNodeComponent;
+  let fixture;
+  const mockRouter = {
+    url: 'some-url'
+  };
+  const mockStore: any = {
+    dispatch: jasmine.createSpy('dispatch'),
+    select: jasmine.createSpy('select').and.returnValue(
+      of({
+        file: {
+          entry: {
+            id: 'nodeId'
+          }
+        }
+      })
+    )
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot(), CoreModule.forRoot()],
+      declarations: [ViewNodeComponent],
+      providers: [
+        { provide: Store, useValue: mockStore },
+        { provide: Router, useValue: mockRouter }
+      ]
+    });
+
+    fixture = TestBed.createComponent(ViewNodeComponent);
+    component = fixture.componentInstance;
+  });
+
+  afterEach(() => {
+    mockStore.dispatch.calls.reset();
+  });
+
+  it('should render as a menu button', () => {
+    component.data = {
+      menuButton: true
+    };
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.mat-menu-item')).not.toBe(null);
+  });
+
+  it('should render as a icon button', () => {
+    component.data = {
+      iconButton: true
+    };
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.mat-icon-button')).not.toBe(null);
+  });
+
+  it('should call ViewNodeAction onClick event', () => {
+    component.data = {
+      iconButton: true
+    };
+
+    fixture.detectChanges();
+
+    component.onClick();
+
+    expect(mockStore.dispatch).toHaveBeenCalled();
+  });
+
+  it('should call ViewNodeAction for `app:filelink` node type', () => {
+    const linkNode = {
+      file: {
+        entry: {
+          id: 'nodeId',
+          nodeType: 'app:filelink',
+          properties: {
+            'cm:destination': 'original-node-id'
+          }
+        }
+      }
+    };
+    component.data = {
+      iconButton: true
+    };
+    mockStore.select.and.returnValue(of(linkNode));
+
+    fixture.detectChanges();
+
+    component.onClick();
+
+    const id = linkNode.file.entry.properties['cm:destination'];
+    expect(mockStore.dispatch).toHaveBeenCalledWith(new ViewNodeAction(id, { location: mockRouter.url }));
+  });
+});

projects/aca-content/src/lib/components/toolbar/view-node/view-node.component.ts

@@ -0,0 +1,75 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * 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 { Component, ViewEncapsulation, Input } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppStore, ViewNodeAction, getAppSelection } from '@alfresco/aca-shared/store';
+import { Router } from '@angular/router';
+import { take } from 'rxjs/operators';
+import { SharedLinkEntry } from '@alfresco/js-api';
+
+@Component({
+  selector: 'app-view-node',
+  template: `
+    <button
+      *ngIf="data.iconButton"
+      mat-icon-button
+      [attr.aria-label]="data.title | translate"
+      [attr.title]="data.title | translate"
+      (click)="onClick()"
+    >
+      <mat-icon>visibility</mat-icon>
+    </button>
+
+    <button *ngIf="data.menuButton" mat-menu-item (click)="onClick()">
+      <mat-icon>visibility</mat-icon>
+      <span>{{ data.title | translate }}</span>
+    </button>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-view-node' }
+})
+export class ViewNodeComponent {
+  @Input() data: { title?: string; menuButton?: boolean; iconButton?: boolean };
+
+  constructor(private store: Store<AppStore>, private router: Router) {}
+
+  onClick() {
+    this.store
+      .select(getAppSelection)
+      .pipe(take(1))
+      .subscribe((selection) => {
+        let id: string;
+
+        if (selection.file.entry.nodeType === 'app:filelink') {
+          id = selection.file.entry.properties['cm:destination'];
+        } else {
+          id = (selection.file as SharedLinkEntry).entry.nodeId || (selection.file as any).entry.guid || selection.file.entry.id;
+        }
+
+        this.store.dispatch(new ViewNodeAction(id, { location: this.router.url }));
+      });
+  }
+}