[ADF-3332][ADF-3352] Add property e2e test and leftsidebar viewer (#3814)

* new viewer test
left sidebar
fix height width no overlay viewer

* fix lint and failing e2e

* missing semi column

* fix test

* fix template

* documentation

.gitignore

@@ -28,3 +28,4 @@ src/environments/
 /lib/config/export-check/exportCheck.js
 /docs/sourceinfo
 /docs/docs.json
+/protractorFailuresReport

demo-shell/src/app/components/file-view/file-view.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="nodeId">
 
-    <ng-template let-node="node" #sidebarTemplate>
+    <ng-template let-node="node" #sidebarRightTemplate>
         <adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE' | translate">
 
             <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.COMMENTS' | translate">
@@ -79,7 +79,9 @@
                                    data-automation-id="adf-text-custom-preset">
                         </mat-form-field>
 
-                        <button  mat-raised-button  id="adf-metadata-aplly" (click)="applyCustomPreset()" color="primary">Apply</button>
+                        <button mat-raised-button id="adf-metadata-aplly" (click)="applyCustomPreset()" color="primary">
+                            Apply
+                        </button>
 
                     </ng-container>
                 </p>
@@ -98,24 +100,194 @@
         </adf-info-drawer>
     </ng-template>
 
+
+    <ng-template let-node="node" #sidebarLeftTemplate>
+        <adf-info-drawer [title]="'Viewer Options'">
+
+            <adf-info-drawer-tab [label]="">
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-switch-custoname"
+                        [color]="'primary'"
+                        (change)="toggleCustomName()"
+                        [checked]="customName">
+                        Custom Name
+                    </mat-slide-toggle>
+                </p>
+
+                <p class="toggle">
+                    <ng-container *ngIf="customName">
+                        <mat-form-field floatPlaceholder="float">
+                            <input matInput
+                                   placeholder="Custom Name"
+                                   [(ngModel)]="displayName"
+                                   data-automation-id="adf-text-custom-name">
+                        </mat-form-field>
+                    </ng-container>
+                </p>
+
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-switch-fileurl"
+                        [color]="'primary'"
+                        (change)="toggleFileUrl()"
+                        [checked]="fileUrlSwitch">
+                        Url File
+                    </mat-slide-toggle>
+                </p>
+
+                <p class="toggle">
+                    <ng-container *ngIf="fileUrlSwitch">
+                        <mat-form-field floatPlaceholder="float">
+                            <input matInput
+                                   placeholder="Url File"
+                                   [(ngModel)]="urlFile"
+                                   data-automation-id="adf-text-file-url">
+                        </mat-form-field>
+                    </ng-container>
+                </p>
+
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-switch-toolbar"
+                        [color]="'primary'"
+                        (change)="toggleShowToolbar()"
+                        [checked]="showToolbar">
+                        Show Toolbar
+                    </mat-slide-toggle>
+                </p>
+
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-switch-goback"
+                        [color]="'primary'"
+                        (change)="toggleAllowGoBack()"
+                        [checked]="allowGoBack">
+                        Allow GoBack
+                    </mat-slide-toggle>
+                </p>
+
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-switch-openwith"
+                        [color]="'primary'"
+                        (change)="toggleOpenWith()"
+                        [checked]="openWith">
+                        Open With
+                    </mat-slide-toggle>
+                </p>
+
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-switch-moreactions"
+                        [color]="'primary'"
+                        (change)="toggleOpenMoreActions()"
+                        [checked]="moreActions">
+                        More Actions
+                    </mat-slide-toggle>
+                </p>
+
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-switch-download"
+                        [color]="'primary'"
+                        (change)="toggleAllowDownload()"
+                        [checked]="allowDownload">
+                        Allow Download
+                    </mat-slide-toggle>
+                </p>
+
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-switch-print"
+                        [color]="'primary'"
+                        (change)="toggleAllowPrint()"
+                        [checked]="allowPrint">
+                        Allow Print
+                    </mat-slide-toggle>
+                </p>
+
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-switch-share"
+                        [color]="'primary'"
+                        (change)="toggleAllowShare()"
+                        [checked]="allowShare">
+                        Allow Share
+                    </mat-slide-toggle>
+                </p>
+
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-switch-allowsidebar"
+                        [color]="'primary'"
+                        (change)="toggleAllowSidebar()"
+                        [checked]="allowSidebar">
+                        Allow Sidebar
+                    </mat-slide-toggle>
+                </p>
+
+                <p class="toggle">
+                    <button mat-raised-button id="adf-switch-showrightsidebar" (click)="toggleShowRightSidebar()" color="primary">
+                      Toggle Right Sidebar
+                    </button>
+                </p>
+
+                <p class="toggle">
+                    <button mat-raised-button id="adf-switch-showleftsidebar" (click)="hideLeftSidebar()" color="primary">
+                         Hide Left Sidebar
+                    </button>
+                </p>
+
+            </adf-info-drawer-tab>
+
+        </adf-info-drawer>
+    </ng-template>
+
     <adf-viewer
         [nodeId]="nodeId"
-        [allowPrint]="true"
+        [showSidebar]="showRightSidebar"
-        [allowSidebar]="true"
+        [showLeftSidebar]="showLeftSidebar"
-        [sidebarTemplate]="sidebarTemplate">
+        [allowGoBack]="allowGoBack"
+        [displayName]="displayName"
+        [showToolbar]="showToolbar"
+        [allowShare]="allowShare"
+        [allowPrint]="allowPrint"
+        [allowDownload]="allowDownload"
+        [allowSidebar]="allowSidebar"
+        [urlFile]="urlFile"
+        [sidebarLeftTemplate]="sidebarLeftTemplate"
+        [sidebarTemplate]="sidebarRightTemplate">
 
-        <adf-viewer-toolbar-actions>
+        <adf-viewer-toolbar-actions *ngIf="moreActions">
-            <button mat-icon-button>
+            <button mat-icon-button id="adf-viewer-time">
                 <mat-icon>alarm</mat-icon>
             </button>
-            <button mat-icon-button>
+            <button mat-icon-button id="adf-viewer-upload">
                 <mat-icon>backup</mat-icon>
             </button>
-            <button mat-icon-button>
+            <button mat-icon-button id="adf-viewer-bug">
                 <mat-icon>bug_report</mat-icon>
             </button>
         </adf-viewer-toolbar-actions>
 
+        <ng-container *ngIf="openWith">
+            <adf-viewer-open-with>
+                <button mat-menu-item>
+                    <mat-icon>dialpad</mat-icon>
+                    <span>Option 1</span>
+                </button>
+                <button mat-menu-item disabled>
+                    <mat-icon>voicemail</mat-icon>
+                    <span>Option 2</span>
+                </button>
+                <button mat-menu-item>
+                    <mat-icon>notifications_off</mat-icon>
+                    <span>Option 3</span>
+                </button>
+            </adf-viewer-open-with>
+        </ng-container>
+
         <!--
         <adf-viewer-extension [supportedExtensions]="['json']">
             <ng-template let-urlFileContent="urlFileContent" let-extension="extension">

demo-shell/src/app/components/file-view/file-view.component.ts

@@ -36,6 +36,20 @@ export class FileViewComponent implements OnInit {
     isPreset = false;
     customPreset: string = null;
     displayDefaultProperties = true;
+    showToolbar = true;
+    displayName = null;
+    urlFile = null;
+    allowGoBack = true;
+    openWith = false;
+    allowDownload = true;
+    allowPrint = true;
+    allowShare = true;
+    allowSidebar = true;
+    moreActions = true;
+    customName = false;
+    fileUrlSwitch = false;
+    showLeftSidebar = null;
+    showRightSidebar = false;
 
     constructor(private router: Router,
                 private route: ActivatedRoute,
@@ -44,7 +58,6 @@ export class FileViewComponent implements OnInit {
     }
 
     ngOnInit() {
-
         this.route.params.subscribe(params => {
             const id = params.nodeId;
             if (id) {
@@ -82,6 +95,62 @@ export class FileViewComponent implements OnInit {
         this.displayDefaultProperties = !this.displayDefaultProperties;
     }
 
+    toggleShowToolbar() {
+        this.showToolbar = !this.showToolbar;
+    }
+
+    toggleAllowGoBack() {
+        this.allowGoBack = !this.allowGoBack;
+    }
+
+    toggleOpenWith() {
+        this.openWith = !this.openWith;
+    }
+
+    toggleAllowDownload() {
+        this.allowDownload = !this.allowDownload;
+    }
+
+    toggleAllowPrint() {
+        this.allowPrint = !this.allowPrint;
+    }
+
+    toggleAllowShare() {
+        this.allowShare = !this.allowShare;
+    }
+
+    toggleOpenMoreActions() {
+        this.moreActions = !this.moreActions;
+    }
+
+    toggleShowRightSidebar() {
+        this.showRightSidebar = !this.showRightSidebar;
+    }
+
+    hideLeftSidebar() {
+        this.showLeftSidebar = false;
+    }
+
+    toggleAllowSidebar() {
+        this.allowSidebar = !this.allowSidebar;
+    }
+
+    toggleCustomName() {
+        this.customName = !this.customName;
+
+        if (!this.customName) {
+            this.displayName = null;
+        }
+    }
+
+    toggleFileUrl() {
+        this.fileUrlSwitch = !this.fileUrlSwitch;
+
+        if (!this.fileUrlSwitch) {
+            this.urlFile = null;
+        }
+    }
+
     togglePreset() {
         this.isPreset = !this.isPreset;
         if (!this.isPreset) {

docs/core/viewer.component.md

@@ -93,9 +93,11 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
 | nodeId | `string` | null | Node Id of the file to load. |
 | overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
 | sharedLinkId | `string` | null | Shared link id (to display shared file). |
+| showLeftSidebar | `boolean` | false | Toggles left sidebar visibility. Requires `allowSidebar` to be set to `true`. |
 | showSidebar | `boolean` | false | Toggles sidebar visibility. Requires `allowSidebar` to be set to `true`. |
 | showToolbar | `boolean` | true | Hide or show the toolbar |
 | showViewer | `boolean` | true | Hide or show the viewer |
+| sidebarLeftTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the left sidebar. The template context contains the loaded node data. |
 | sidebarPosition | `string` | "right" | The position of the sidebar. Can be `left` or `right`. |
 | sidebarTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the sidebar. The template context contains the loaded node data. |
 | thumbnailsTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the pdf thumbnails. |

e2e/content-services/tag_component.e2e.ts

@@ -28,6 +28,7 @@ import AlfrescoApi = require('alfresco-js-api-node');
 import { UploadActions } from '../actions/ACS/upload.actions';
 
 import Util = require('../util/util');
+import { browser } from 'protractor';
 
 describe('Tag component', () => {
 
@@ -105,6 +106,9 @@ describe('Tag component', () => {
     it('[C260378] Multiple tags', () => {
         tagPage.insertNodeId(pdfFileModel.id);
         tagPage.addTag(tagList[2]);
+
+        browser.driver.sleep(3000); // wait CS return tags
+
         tagPage.checkTagListIsOrderedAscending();
         tagPage.checkTagListByNodeIdIsOrderedAscending();
         tagPage.checkTagListContentServicesIsOrderedAscending();

e2e/core/viewer_properties.e2e.ts

@@ -0,0 +1,180 @@
+/*!
+ * @license
+ * Copyright 2016 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 { browser } from 'protractor';
+
+import TestConfig = require('../test.config');
+
+import LoginPage = require('../pages/adf/loginPage');
+import ContentServicesPage = require('../pages/adf/contentServicesPage');
+import ViewerPage = require('../pages/adf/viewerPage');
+
+import resources = require('../util/resources');
+
+import FileModel = require('../models/ACS/fileModel');
+import AcsUserModel = require('../models/ACS/acsUserModel');
+
+import AlfrescoApi = require('alfresco-js-api-node');
+import { UploadActions } from '../actions/ACS/upload.actions';
+
+describe('Viewer - properties', () => {
+
+    let acsUser = new AcsUserModel();
+    let viewerPage = new ViewerPage();
+    let contentServicesPage = new ContentServicesPage();
+    let loginPage = new LoginPage();
+
+    let pngFile = new FileModel({
+        'name': resources.Files.ADF_DOCUMENTS.PNG.file_name,
+        'location': resources.Files.ADF_DOCUMENTS.PNG.file_location
+    });
+
+    beforeAll(async (done) => {
+        let uploadActions = new UploadActions();
+
+        this.alfrescoJsApi = new AlfrescoApi({
+            provider: 'ECM',
+            hostEcm: TestConfig.adf.url
+        });
+
+        await this.alfrescoJsApi.login(TestConfig.adf.adminEmail, TestConfig.adf.adminPassword);
+
+        await this.alfrescoJsApi.core.peopleApi.addPerson(acsUser);
+
+        await this.alfrescoJsApi.login(acsUser.id, acsUser.password);
+
+        let pngFileUploaded = await uploadActions.uploadFile(this.alfrescoJsApi, pngFile.location, pngFile.name, '-my-');
+        Object.assign(pngFile, pngFileUploaded.entry);
+
+        loginPage.loginToContentServicesUsingUserModel(acsUser);
+
+        contentServicesPage.goToDocumentList();
+
+        contentServicesPage.checkAcsContainer();
+
+        viewerPage.viewFile(pngFile.name);
+
+        viewerPage.clickLeftSidebarButton();
+        viewerPage.checkLeftSideBarIsDisplayed();
+
+        done();
+    });
+
+    afterAll(async (done) => {
+        let uploadActions = new UploadActions();
+
+        await uploadActions.deleteFilesOrFolder(this.alfrescoJsApi, pngFile.getId());
+
+        done();
+    });
+
+    it('[C260066] Should Show/Hide viewer toolbar when showToolbar is true/false', () => {
+        viewerPage.checkToolbarIsDisplayed();
+        viewerPage.disableToolbar();
+        viewerPage.checkToolbarIsNotDisplayed();
+        viewerPage.enableToolbar();
+    });
+
+    it('[C260076] Should Show/Hide back button when allowGoBack is true/false', () => {
+        viewerPage.checkGoBackIsDisplayed();
+        viewerPage.disableGoBack();
+        viewerPage.checkGoBackIsNotDisplayed();
+        viewerPage.enableGoBack();
+    });
+
+    it('[C260077] Should Show toolbar options dropdown when adf-viewer-open-with directive is used', () => {
+        viewerPage.checkToolbarOptionsIsNotDisplayed();
+        viewerPage.enableToolbarOptions();
+        viewerPage.checkToolbarOptionsIsDisplayed();
+        viewerPage.disableToolbarOptions();
+    });
+
+    it('[C260079] Should Show/Hide download button when allowDownload is true/false', () => {
+        viewerPage.checkDownloadButtonDisplayed();
+        viewerPage.disableDownload();
+        viewerPage.checkDownloadButtonIsNotDisplayed();
+        viewerPage.enableDownload();
+    });
+
+    it('[C260082] Should Show/Hide print button when allowPrint is true/false', () => {
+        viewerPage.checkPrintButtonIsDisplayed();
+        viewerPage.disablePrint();
+        viewerPage.checkPrintButtonIsNotDisplayed();
+        viewerPage.enablePrint();
+    });
+
+    it('[C260087] Should Show/Hide share button when allowShare is true/false', () => {
+        viewerPage.checkShareButtonDisplayed();
+        viewerPage.disableShare();
+        viewerPage.checkShareButtonIsNotDisplayed();
+        viewerPage.enableShare();
+    });
+
+    it('[C260092] Should show adf-viewer-toolbar-actions directive buttons when adf-viewer-toolbar-actions is used', () => {
+        viewerPage.checkMoreActionsDisplayed();
+
+        viewerPage.disableMoreActions();
+
+        viewerPage.checkMoreActionsIsNotDisplayed();
+
+        viewerPage.enableMoreActions();
+    });
+
+    it('[C260074] Should show a custom file name when displayName property is used', () => {
+        viewerPage.checkFileNameIsDisplayed(pngFile.name);
+
+        viewerPage.enableCustomName();
+
+        viewerPage.enterCustomName('test custom title');
+        viewerPage.checkFileNameIsDisplayed('test custom title');
+
+        viewerPage.disableCustomName();
+    });
+
+    it('[C260090] Sould showSidebar allow right info-drawer to be shown', () => {
+        viewerPage.clickToggleRightSidebar();
+        viewerPage.checkInfoSideBarIsDisplayed();
+
+        viewerPage.clickToggleRightSidebar();
+        viewerPage.checkInfoSideBarIsNotDisplayed();
+    });
+
+    it('[C286442] Sould showLeftSidebar allow left info-drawer to be shown', () => {
+        viewerPage.clickToggleLeftSidebar();
+        viewerPage.checkLeftSideBarIsNotDisplayed();
+        viewerPage.clickLeftSidebarButton();
+        viewerPage.checkLeftSideBarIsDisplayed();
+    });
+
+    it('[C260089] Should Show/Hide info-drawer if allowSidebar true/false', () => {
+        viewerPage.clickInfoButton();
+
+        viewerPage.checkLeftSideBarIsDisplayed();
+        viewerPage.checkInfoSideBarIsDisplayed();
+
+        viewerPage.checkInfoButtonIsDisplayed();
+        viewerPage.checkLeftSideBarButtonIsDisplayed();
+
+        viewerPage.disableAllowSidebar();
+
+        viewerPage.checkInfoButtonIsNotDisplayed();
+        viewerPage.checkLeftSideBarButtonIsNotDisplayed();
+
+        viewerPage.checkLeftSideBarIsNotDisplayed();
+        viewerPage.checkInfoSideBarIsNotDisplayed();
+    });
+});

e2e/pages/adf/versionManagerPage.ts

@@ -96,7 +96,7 @@ export class VersionManagePage {
     }
 
     /**
-     * disables download
+     * disables readOnly
      */
     disableReadOnly() {
         Util.waitUntilElementIsVisible(this.readOnlySwitch);
@@ -108,7 +108,7 @@ export class VersionManagePage {
     }
 
     /**
-     * enables download
+     * enables readOnly
      */
     enableReadOnly() {
         Util.waitUntilElementIsVisible(this.readOnlySwitch);

e2e/pages/adf/viewerPage.js

@@ -21,8 +21,8 @@ var ViewerToolbarPage = function () {
 
     var closeButton = element(by.css("button[data-automation-id='adf-toolbar-back']"));
     var fileName = element(by.id("adf-viewer-display-name"));
-    var downloadButton = element(by.css("button[data-automation-id='adf-toolbar-download'] > span > mat-icon"));
     var infoButton = element(by.css("button[data-automation-id='adf-toolbar-sidebar']"));
+    var leftSideBarButton = element(by.css("button[data-automation-id='adf-toolbar-left-sidebar']"));
     var previousPageButton = element(by.id("viewer-previous-page-button"));
     var nextPageButton = element(by.id("viewer-next-page-button"));
     var zoomInButton = element(by.id("viewer-zoom-in-button"));
@@ -50,12 +50,42 @@ var ViewerToolbarPage = function () {
     var passwordSubmitDisabled = element(by.css("button[data-automation-id='adf-password-dialog-submit'][disabled]"));
     var passwordInput = element(by.css("input[data-automation-id='adf-password-dialog-input']"));
     var passwordError = element(by.css("mat-error[data-automation-id='adf-password-dialog-error']"));
-    var infoSideBar = element(by.css("div[class='adf-info-drawer-layout-header']"));
+    var infoSideBar = element(by.id("adf-right-sidebar"));
+    var leftSideBar = element(by.id("adf-left-sidebar"));
     var unsupportedFileContainer = element(by.cssContainingText(".label", "Document preview could not be loaded"));
     var pageCanvas = element.all(by.css("div[class='canvasWrapper']")).first();
     var activeTab = element(by.css("div[class*='mat-tab-label-active']"));
     var uploadNewVersionButton = element(by.css("input[data-automation-id='upload-single-file']"));
     var rightChevron = element(by.css("div[class*='header-pagination-after']"));
+    var toolbarSwitch = element(by.id('adf-switch-toolbar'));
+    var toolbar = element(by.id('adf-viewer-toolbar'));
+    var goBackSwitch = element(by.id('adf-switch-goback'));
+
+    var openWithSwitch = element(by.id('adf-switch-openwith'));
+    var openWith = element(by.id('adf-viewer-openwith'));
+
+    var customNameSwitch = element(by.id('adf-switch-custoname'));
+
+    var showRightSidebarSwitch = element(by.id('adf-switch-showrightsidebar'));
+    var showLeftSidebarSwitch = element(by.id('adf-switch-showleftsidebar'));
+
+    var moreActionsSwitch = element(by.id('adf-switch-moreactions'));
+    var moreActions = element(by.id('adf-viewer-moreactions'));
+
+    var downloadSwitch = element(by.id('adf-switch-download'));
+    var downloadButton = element(by.id('adf-viewer-download'));
+
+    var printSwitch = element(by.id('adf-switch-print'));
+    var printButton = element(by.id('adf-viewer-print'));
+
+    var allowSidebarSwitch = element(by.id('adf-switch-allowsidebar'));
+
+    var shareSwitch = element(by.id('adf-switch-share'));
+    var shareButton = element(by.id('adf-viewer-share'));
+
+    var uploadButton = element(by.id('adf-viewer-upload'));
+    var timeButton = element(by.id('adf-viewer-time'));
+    var bugButton = element(by.id('adf-viewer-bug'));
 
     this.canvasHeight = function () {
         var deferred = protractor.promise.defer();
@@ -164,6 +194,10 @@ var ViewerToolbarPage = function () {
         Util.waitUntilElementIsVisible(infoButton);
     };
 
+    this.checkInfoButtonIsNotDisplayed = function () {
+        Util.waitUntilElementIsNotVisible(infoButton);
+    };
+
     this.checkFileThumbnailIsDisplayed = function () {
         Util.waitUntilElementIsVisible(fileThumbnail);
     };
@@ -287,11 +321,32 @@ var ViewerToolbarPage = function () {
         Util.waitUntilElementIsNotOnPage(infoSideBar);
     };
 
+    this.checkLeftSideBarButtonIsNotDisplayed = function () {
+        Util.waitUntilElementIsNotOnPage(leftSideBarButton);
+    };
+
+    this.checkLeftSideBarButtonIsDisplayed = function () {
+        Util.waitUntilElementIsOnPage(leftSideBarButton);
+    };
+
     this.clickInfoButton = function () {
         Util.waitUntilElementIsVisible(infoButton);
         return infoButton.click();
     };
 
+    this.clickLeftSidebarButton = function () {
+        Util.waitUntilElementIsVisible(leftSideBarButton);
+        return leftSideBarButton.click();
+    };
+
+    this.checkLeftSideBarIsDisplayed = function () {
+        Util.waitUntilElementIsVisible(leftSideBar);
+    };
+
+    this.checkLeftSideBarIsNotDisplayed = function () {
+        Util.waitUntilElementIsNotOnPage(leftSideBar);
+    };
+
     this.clickPasswordSubmit = function () {
         Util.waitUntilElementIsVisible(passwordSubmit);
         passwordSubmit.click();
@@ -430,6 +485,259 @@ var ViewerToolbarPage = function () {
         return this;
     };
 
+    this.disableToolbar = function () {
+        Util.waitUntilElementIsVisible(toolbarSwitch);
+        toolbarSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') >= 0) {
+                toolbarSwitch.click();
+            }
+        });
+    }
+
+    this.enableToolbar = function () {
+        Util.waitUntilElementIsVisible(toolbarSwitch);
+        toolbarSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') < 0) {
+                toolbarSwitch.click();
+            }
+        });
+    }
+
+    this.checkToolbarIsDisplayed = function () {
+        Util.waitUntilElementIsVisible(toolbar);
+        return this;
+    };
+
+    this.checkToolbarIsNotDisplayed = function () {
+        Util.waitUntilElementIsNotVisible(toolbar);
+        return this;
+    };
+
+    this.disableGoBack = function () {
+        Util.waitUntilElementIsVisible(goBackSwitch);
+        goBackSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') >= 0) {
+                goBackSwitch.click();
+            }
+        });
+    }
+
+    this.enableGoBack = function () {
+        Util.waitUntilElementIsVisible(goBackSwitch);
+        goBackSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') < 0) {
+                goBackSwitch.click();
+            }
+        });
+    }
+
+    this.checkGoBackIsDisplayed = function () {
+        Util.waitUntilElementIsVisible(closeButton);
+        return this;
+    };
+
+    this.checkGoBackIsNotDisplayed = function () {
+        Util.waitUntilElementIsNotVisible(closeButton);
+        return this;
+    };
+
+    this.disableToolbarOptions = function () {
+        Util.waitUntilElementIsVisible(openWithSwitch);
+        openWithSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') >= 0) {
+                openWithSwitch.click();
+            }
+        });
+    }
+
+    this.enableToolbarOptions = function () {
+        Util.waitUntilElementIsVisible(openWithSwitch);
+        openWithSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') < 0) {
+                openWithSwitch.click();
+            }
+        });
+    }
+
+    this.checkToolbarOptionsIsDisplayed = function () {
+        Util.waitUntilElementIsVisible(openWith);
+        return this;
+    };
+
+    this.checkToolbarOptionsIsNotDisplayed = function () {
+        Util.waitUntilElementIsNotVisible(openWith);
+        return this;
+    };
+
+    this.disableDownload = function () {
+        Util.waitUntilElementIsVisible(downloadSwitch);
+        downloadSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') >= 0) {
+                downloadSwitch.click();
+            }
+        });
+    }
+
+    this.enableDownload = function () {
+        Util.waitUntilElementIsVisible(openWithSwitch);
+        downloadSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') < 0) {
+                downloadSwitch.click();
+            }
+        });
+    }
+
+    this.checkDownloadButtonDisplayed = function () {
+        Util.waitUntilElementIsVisible(downloadButton);
+        return this;
+    };
+
+    this.checkDownloadButtonIsNotDisplayed = function () {
+        Util.waitUntilElementIsNotVisible(downloadButton);
+        return this;
+    };
+
+    this.disablePrint = function () {
+        Util.waitUntilElementIsVisible(printSwitch);
+        printSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') >= 0) {
+                printSwitch.click();
+            }
+        });
+    }
+
+    this.enablePrint = function () {
+        Util.waitUntilElementIsVisible(printSwitch);
+        printSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') < 0) {
+                printSwitch.click();
+            }
+        });
+    }
+
+    this.checkPrintButtonIsDisplayed = function () {
+        Util.waitUntilElementIsVisible(printButton);
+        return this;
+    };
+
+    this.checkPrintButtonIsNotDisplayed = function () {
+        Util.waitUntilElementIsNotVisible(printButton);
+        return this;
+    };
+
+    this.disableShare = function () {
+        Util.waitUntilElementIsVisible(shareSwitch);
+        shareSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') >= 0) {
+                shareSwitch.click();
+            }
+        });
+    }
+
+    this.enableShare = function () {
+        Util.waitUntilElementIsVisible(shareSwitch);
+        shareSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') < 0) {
+                shareSwitch.click();
+            }
+        });
+    }
+
+    this.disableAllowSidebar = function () {
+        Util.waitUntilElementIsVisible(allowSidebarSwitch);
+        allowSidebarSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') >= 0) {
+                allowSidebarSwitch.click();
+            }
+        });
+    }
+
+    this.enableAllowSidebar = function () {
+        Util.waitUntilElementIsVisible(allowSidebarSwitch);
+        allowSidebarSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') < 0) {
+                allowSidebarSwitch.click();
+            }
+        });
+    }
+
+    this.checkShareButtonDisplayed = function () {
+        Util.waitUntilElementIsVisible(shareButton);
+        return this;
+    };
+
+    this.checkShareButtonIsNotDisplayed = function () {
+        Util.waitUntilElementIsNotVisible(shareButton);
+        return this;
+    };
+
+    this.checkMoreActionsDisplayed = function () {
+        Util.waitUntilElementIsVisible(bugButton);
+        Util.waitUntilElementIsVisible(timeButton);
+        Util.waitUntilElementIsVisible(uploadButton);
+        return this;
+    };
+
+    this.checkMoreActionsIsNotDisplayed = function () {
+        Util.waitUntilElementIsNotVisible(bugButton);
+        Util.waitUntilElementIsNotVisible(timeButton);
+        Util.waitUntilElementIsNotVisible(uploadButton);
+        return this;
+    };
+
+    this.disableMoreActions = function () {
+        Util.waitUntilElementIsVisible(moreActionsSwitch);
+        moreActionsSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') >= 0) {
+                moreActionsSwitch.click();
+            }
+        });
+    }
+
+    this.enableMoreActions = function () {
+        Util.waitUntilElementIsVisible(moreActionsSwitch);
+        moreActionsSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') < 0) {
+                moreActionsSwitch.click();
+            }
+        });
+    }
+
+    this.disableCustomName = function () {
+        Util.waitUntilElementIsVisible(customNameSwitch);
+        customNameSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') >= 0) {
+                customNameSwitch.click();
+            }
+        });
+    }
+
+    this.enableCustomName = function () {
+        Util.waitUntilElementIsVisible(customNameSwitch);
+        customNameSwitch.getAttribute('class').then((check) => {
+            if (check.indexOf('mat-checked') < 0) {
+                customNameSwitch.click();
+            }
+        });
+    }
+
+    this.clickToggleRightSidebar = function () {
+        Util.waitUntilElementIsVisible(showRightSidebarSwitch);
+        showRightSidebarSwitch.click();
+    }
+
+    this.clickToggleLeftSidebar = function () {
+        Util.waitUntilElementIsVisible(showLeftSidebarSwitch);
+        showLeftSidebarSwitch.click();
+    }
+
+    this.enterCustomName = function (text) {
+        const textField = element(by.css('input[data-automation-id="adf-text-custom-name"]'));
+        Util.waitUntilElementIsVisible(textField);
+        textField.sendKeys('');
+        textField.clear().sendKeys(text);
+        return this;
+    };
 };
 
 module.exports = ViewerToolbarPage;

lib/core/viewer/components/viewer.component.html

@@ -6,9 +6,21 @@
     <div class="adf-viewer-content" fxLayout="column">
         <ng-content select="adf-viewer-toolbar"></ng-content>
         <ng-container *ngIf="showToolbar && !toolbar">
-            <adf-toolbar color="default" class="adf-viewer-toolbar">
+            <adf-toolbar color="default" id="adf-viewer-toolbar" class="adf-viewer-toolbar">
 
                 <adf-toolbar-title>
+
+                    <ng-container *ngIf="allowSidebar">
+                        <button
+                            mat-icon-button
+                            title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
+                            data-automation-id="adf-toolbar-left-sidebar"
+                            [color]="showLeftSidebar ? 'accent' : 'default'"
+                            (click)="toggleLeftSidebar()">
+                            <mat-icon>info_outline</mat-icon>
+                        </button>
+                    </ng-container>
+
                     <button *ngIf="allowGoBack"
                             class="adf-viewer-close-button"
                             data-automation-id="adf-toolbar-back"
@@ -44,6 +56,7 @@
 
                 <ng-container *ngIf="mnuOpenWith" data-automation-id='adf-toolbar-custom-btn'>
                     <button
+                        id="adf-viewer-openwith"
                         mat-button
                         [matMenuTriggerFor]="mnuOpenWith"
                         data-automation-id="adf-toolbar-open-with">
@@ -58,6 +71,7 @@
                 <adf-toolbar-divider></adf-toolbar-divider>
 
                 <button
+                    id="adf-viewer-download"
                     *ngIf="allowDownload"
                     mat-icon-button
                     title="{{ 'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate }}"
@@ -67,6 +81,7 @@
                 </button>
 
                 <button
+                    id="adf-viewer-print"
                     *ngIf="allowPrint"
                     mat-icon-button
                     title="{{ 'ADF_VIEWER.ACTIONS.PRINT' | translate }}"
@@ -76,6 +91,7 @@
                 </button>
 
                 <button
+                    id="adf-viewer-share"
                     *ngIf="allowShare"
                     mat-icon-button
                     title="{{ 'ADF_VIEWER.ACTIONS.SHARE' | translate }}"
@@ -85,6 +101,7 @@
                 </button>
 
                 <button
+                    id="adf-viewer-fullscreen"
                     *ngIf="viewerType !== 'media' && allowFullScreen"
                     mat-icon-button
                     title="{{ 'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate }}"
@@ -95,6 +112,7 @@
 
                 <ng-container *ngIf="mnuMoreActions">
                     <button
+                        id="adf-viewer-moreactions"
                         mat-icon-button
                         [matMenuTriggerFor]="mnuMoreActions"
                         title="{{ 'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate }}"
@@ -117,15 +135,18 @@
                         (click)="toggleSidebar()">
                         <mat-icon>info_outline</mat-icon>
                     </button>
+
                 </ng-container>
 
             </adf-toolbar>
         </ng-container>
 
         <div fxLayout="row" fxFlex="1 1 auto">
+            showSidebar 1 {{showSidebar}}
 
             <ng-container *ngIf="allowSidebar && showSidebar">
-                <div class="adf-viewer__sidebar" [ngClass]="getSideBarStyle()" fxFlexOrder="{{sidebarPosition === 'left'? 1 : 4 }}">
+                showSidebar {{showSidebar}}
+                <div class="adf-viewer__sidebar" [ngClass]="'adf-viewer__sidebar__right'" fxFlexOrder="4"  id="adf-right-sidebar" >
                     <ng-container *ngIf="sidebarTemplate">
                         <ng-container *ngTemplateOutlet="sidebarTemplate;context:sidebarTemplateContext"></ng-container>
                     </ng-container>
@@ -133,6 +154,15 @@
                 </div>
             </ng-container>
 
+            <ng-container *ngIf="allowSidebar && showLeftSidebar">
+                <div class="adf-viewer__sidebar" [ngClass]="'adf-viewer__sidebar__left'" fxFlexOrder="1"  id="adf-left-sidebar" >
+                    <ng-container *ngIf="sidebarLeftTemplate">
+                        <ng-container *ngTemplateOutlet="sidebarLeftTemplate;context:sidebarLeftTemplateContext"></ng-container>
+                    </ng-container>
+                    <ng-content *ngIf="!sidebarLeftTemplate" select="adf-viewer-sidebar"></ng-content>
+                </div>
+            </ng-container>
+
             <div  *ngIf="isLoading"  class="adf-viewer-main" fxFlexOrder="{{sidebarPosition !== 'left'? 1 : 4}}" fxFlex="1 1 auto">
                 <div class="adf-viewer-layout-content adf-viewer__fullscreen-container">
                     <div class="adf-viewer-content-container">

lib/core/viewer/components/viewer.component.scss

@@ -11,6 +11,10 @@
 
     .adf-viewer {
 
+        position: absolute;
+        width: 100%;
+        height: 100%;
+
         .mat-toolbar {
             color: mat-color($foreground, text, 0.54);
         }

lib/core/viewer/components/viewer.component.spec.ts

@@ -251,39 +251,46 @@ describe('ViewerComponent', () => {
             it('should NOT display sidebar if is not allowed', () => {
                 component.showSidebar = true;
                 component.allowSidebar = false;
-                component.sidebarPosition = 'left';
                 fixture.detectChanges();
-                let sidebar = element.querySelector('.adf-viewer__sidebar');
+
+                fixture.whenStable().then(() => {
+                    let sidebar = element.querySelector('#adf-right-sidebar');
                     expect(sidebar).toBeNull();
                 });
-
-            it('should display sidebar on the left side', () => {
-                component.showSidebar = true;
-                component.allowSidebar = true;
-                component.sidebarPosition = 'left';
-                fixture.detectChanges();
-                let sidebar = element.querySelector('.adf-viewer__sidebar');
-                expect(getComputedStyle(sidebar).order).toEqual('1');
             });
 
             it('should display sidebar on the right side', () => {
                 component.showSidebar = true;
-                component.allowSidebar = true;
-                component.sidebarPosition = 'right';
                 fixture.detectChanges();
-                let sidebar = element.querySelector('.adf-viewer__sidebar');
+
+                fixture.whenStable().then(() => {
+                    let sidebar = element.querySelector('#adf-right-sidebar');
                     expect(getComputedStyle(sidebar).order).toEqual('4');
                 });
+            });
 
-            it('should display sidebar on the right side as fallback', () => {
+            it('should NOT display left sidebar if is not allowed', () => {
-                component.showSidebar = true;
+                component.showLeftSidebar = true;
-                component.allowSidebar = true;
+                component.allowSidebar = false;
-                component.sidebarPosition = 'unknown-value';
                 fixture.detectChanges();
-                let sidebar = element.querySelector('.adf-viewer__sidebar');
+
+                fixture.whenStable().then(() => {
+                    let sidebar = element.querySelector('#adf-left-sidebar');
+                    expect(sidebar).toBeNull();
+                });
+
+            });
+
+            it('should display sidebar on the left side', () => {
+                component.showLeftSidebar = true;
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    let sidebar = element.querySelector('#adf-left-sidebar');
                     expect(getComputedStyle(sidebar).order).toEqual('4');
                 });
             });
+        });
 
         describe('Toolbar', () => {
 

lib/core/viewer/components/viewer.component.ts

@@ -114,6 +114,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     @Input()
     allowPrint = false;
 
+    /**  @deprecated 2.5.0 inkect the share button directive as custom button */
     /** Toggles sharing. */
     @Input()
     allowShare = false;
@@ -144,18 +145,29 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     @Input()
     allowThumbnails = true;
 
+    /** @deprecated 2.5.0 will be renamed showRightSidebar in 3.0.0  */
     /** Toggles sidebar visibility. Requires `allowSidebar` to be set to `true`. */
     @Input()
     showSidebar = false;
 
+    /** Toggles left sidebar visibility. Requires `allowSidebar` to be set to `true`. */
+    @Input()
+    showLeftSidebar = false;
+
+    /** @deprecated 2.5.0 use sidebarTemplateLeft */
     /** The position of the sidebar. Can be `left` or `right`. */
     @Input()
     sidebarPosition = 'right';
 
+    /**  @deprecated 2.5.0 rename sidebarRight */
     /** The template for the sidebar. The template context contains the loaded node data. */
     @Input()
     sidebarTemplate: TemplateRef<any> = null;
 
+    /** The template for the left sidebar. The template context contains the loaded node data. */
+    @Input()
+    sidebarLeftTemplate: TemplateRef<any> = null;
+
     /** The template for the pdf thumbnails. */
     @Input()
     thumbnailsTemplate: TemplateRef<any> = null;
@@ -224,6 +236,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     otherMenu: any;
     extension: string;
     sidebarTemplateContext: { node: MinimalNodeEntryEntity } = { node: null };
+    sidebarLeftTemplateContext: { node: MinimalNodeEntryEntity } = { node: null };
     fileTitle: string;
 
     private cacheBusterNumber;
@@ -377,6 +390,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
 
         this.extensionChange.emit(this.extension);
         this.sidebarTemplateContext.node = data;
+        this.sidebarLeftTemplateContext.node = data;
         this.scrollTop();
 
         return setupNode;
@@ -413,6 +427,16 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
         }
     }
 
+    toggleLeftSidebar() {
+        this.showLeftSidebar = !this.showLeftSidebar;
+        if (this.showSidebar && this.nodeId) {
+            this.apiService.getInstance().nodes.getNodeInfo(this.nodeId, { include: ['allowableOperations'] })
+                .then((data: MinimalNodeEntryEntity) => {
+                    this.sidebarLeftTemplateContext.node = data;
+                });
+        }
+    }
+
     private getDisplayName(name) {
         return this.displayName || name ;
     }
@@ -724,10 +748,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
         });
     }
 
-    getSideBarStyle(): string {
-        return this.sidebarPosition === 'left' ? 'adf-viewer__sidebar__left' : 'adf-viewer__sidebar__right';
-    }
-
     private generateCacheBusterNumber() {
         this.cacheBusterNumber = Date.now();
     }

lib/process-services/task-list/components/task-details.component.ts

@@ -292,7 +292,6 @@ export class TaskDetailsComponent implements OnInit, OnChanges {
      */
     private loadDetails(taskId: string) {
         this.taskPeople = [];
-        this.readOnlyForm = false;
         this.taskFormName = null;
 
         if (taskId) {
@@ -305,8 +304,10 @@ export class TaskDetailsComponent implements OnInit, OnChanges {
                         this.taskDetails.name = 'No name';
                     }
 
-                    let endDate: any = res.endDate;
+                    if (endDate && !isNaN(endDate.getTime())) {
-                    this.readOnlyForm = this.readOnlyForm ? this.readOnlyForm : !!(endDate && !isNaN(endDate.getTime()));
+                        this.readOnlyForm = true;
+                    }
+
                     if (this.taskDetails && this.taskDetails.involvedPeople) {
                         this.taskDetails.involvedPeople.forEach((user) => {
                             this.taskPeople.push(new UserProcessModel(user));