[MNT-23433] configure position for close button on Viewer (#9143)

* [MNT-23433] configure position for close button

* [MNT-23433]  added documentation

* [MNT-23433] unit test title fix

* [MNT-23433] setting close button position

* [MNT-23433] removed extra space

* [MNT-23433] lint issue resolved

* [MNT-23433] setting default position to left

* [MNT-23433] updated the type

* [MNT-23433] add check for info button

* [MNT-23433] indentation fix

* [MNT-23433] documentation added

* [MNT-23433] unit test updated

* [MNT-23433] linting issue resolved

* [MNT-23433] update unit test

* [MNT-23433] lint issue resolved

docs/content-services/components/alfresco-viewer.component.md

@@ -67,7 +67,9 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
 | ---- | ---- | ------------- | ----------- |
 | allowDownload | `boolean` | true | Toggles downloading. |
 | allowFullScreen | `boolean` | true | Toggles the 'Full Screen' feature. |
-| allowGoBack | `boolean` | true | Allows `back` navigation |
+| allowGoBack | `boolean` | true | Allows `back` navigation. |
+| closeButtonPosition | `CloseButtonPosition` | `left` | Set close button position right/left. |
+| hideInfoButton | `boolean` | false | Toggles Info button. |
 | allowLeftSidebar | `boolean` | false | Allow the left the sidebar. |
 | allowNavigate | `boolean` | false | Toggles before/next navigation. You can use the arrow buttons to navigate between documents in the collection. |
 | allowPrint | `boolean` | false | Toggles printing. |

docs/core/components/viewer.component.md

@@ -61,7 +61,9 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
 | allowFullScreen | `boolean` | true | Toggles the 'Full Screen' feature. |
-| allowGoBack | `boolean` | true | Allows `back` navigation |
+| allowGoBack | `boolean` | true | Allows `back` navigation. |
+| closeButtonPosition | `CloseButtonPosition` | `left` | Set close button position right/left. |
+| hideInfoButton | `boolean` | false | Toggles Info button. |
 | allowLeftSidebar | `boolean` | false | Allow the left the sidebar. |
 | allowNavigate | `boolean` | false | Toggles before/next navigation. You can use the arrow buttons to navigate between documents in the collection. |
 | allowRightSidebar | `boolean` | false | Allow the right sidebar. |

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html

@@ -16,6 +16,8 @@
     [sidebarLeftTemplate]="sidebarLeftTemplate"
     [sidebarRightTemplateContext]="sidebarRightTemplateContext"
     [sidebarLeftTemplateContext]="sidebarLeftTemplateContext"
+    [closeButtonPosition]="closeButtonPosition"
+    [hideInfoButton]="hideInfoButton"
     [fileName]="fileName"
     [mimeType]="mimeType"
     [originalMimeType]="originalMimeType"

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts

@@ -26,7 +26,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { ContentInfo, Node, NodeEntry, VersionEntry } from '@alfresco/js-api';
 import { AlfrescoViewerComponent, NodeActionsService, RenditionService } from '@alfresco/adf-content-services';
-import { CoreTestingModule, EventMock, ViewUtilService, ViewerComponent } from '@alfresco/adf-core';
+import { CloseButtonPosition, CoreTestingModule, EventMock, ViewUtilService, ViewerComponent } from '@alfresco/adf-core';
 import { NodesApiService } from '../../common/services/nodes-api.service';
 import { UploadService } from '../../common/services/upload.service';
 import { FileModel } from '../../common/models/file.model';
@@ -691,11 +691,11 @@ describe('AlfrescoViewerComponent', () => {
         });
 
         it('should render close viewer button if it is not a shared link', (done) => {
+            component.closeButtonPosition = CloseButtonPosition.Left;
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
-                expect(element.querySelector('[data-automation-id="adf-toolbar-back"]')).toBeDefined();
+                expect(element.querySelector('[data-automation-id="adf-toolbar-left-back"]')).not.toBeNull();
-                expect(element.querySelector('[data-automation-id="adf-toolbar-back"]')).not.toBeNull();
                 done();
             });
         });
@@ -709,7 +709,7 @@ describe('AlfrescoViewerComponent', () => {
             component.ngOnChanges();
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
-                expect(element.querySelector('[data-automation-id="adf-toolbar-back"]')).toBeNull();
+                expect(element.querySelector('[data-automation-id="adf-toolbar-left-back"]')).toBeNull();
                 done();
             });
         });

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts

@@ -31,6 +31,7 @@ import {
 } from '@angular/core';
 import {
     AlfrescoApiService,
+    CloseButtonPosition,
     LogService,
     Track,
     ViewerComponent,
@@ -160,6 +161,14 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
     @Input()
     allowFullScreen = true;
 
+    /** Toggles the 'Info Button' */
+    @Input()
+    hideInfoButton = false;
+
+    /** Change the close button position Right/Left */
+    @Input()
+    closeButtonPosition = CloseButtonPosition.Left;
+
     /** The template for the right sidebar. The template context contains the loaded node data. */
     @Input()
     sidebarRightTemplate: TemplateRef<any> = null;

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

@@ -23,9 +23,9 @@
                         </button>
                     </ng-container>
 
-                    <button *ngIf="allowGoBack"
+                    <button *ngIf="allowGoBack && closeButtonPosition === CloseButtonPosition.Left"
                             class="adf-viewer-close-button"
-                            data-automation-id="adf-toolbar-back"
+                            data-automation-id="adf-toolbar-left-back"
                             [attr.aria-label]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
                             mat-icon-button
                             title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
@@ -90,7 +90,7 @@
                     <mat-icon>fullscreen</mat-icon>
                 </button>
 
-                <ng-container *ngIf="allowRightSidebar">
+                <ng-container *ngIf="allowRightSidebar && !hideInfoButton">
                     <adf-toolbar-divider></adf-toolbar-divider>
 
                     <button mat-icon-button
@@ -120,6 +120,19 @@
                     </mat-menu>
                 </ng-container>
 
+                <ng-container *ngIf="allowGoBack && closeButtonPosition === CloseButtonPosition.Right">
+                    <adf-toolbar-divider></adf-toolbar-divider>
+
+                    <button class="adf-viewer-close-button"
+                            data-automation-id="adf-toolbar-right-back"
+                            [attr.aria-label]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
+                            mat-icon-button
+                            title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
+                            (click)="onClose()">
+                        <mat-icon>close</mat-icon>
+                    </button>
+                </ng-container>
+
             </adf-toolbar>
         </ng-container>
 

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

@@ -29,7 +29,8 @@ import {
     ViewUtilService,
     AppConfigService,
     DownloadPromptDialogComponent,
-    DownloadPromptActions
+    DownloadPromptActions,
+    CloseButtonPosition
 } from '@alfresco/adf-core';
 import { of } from 'rxjs';
 import { ViewerWithCustomMoreActionsComponent } from './mock/adf-viewer-container-more-actions.component.mock';
@@ -351,11 +352,11 @@ describe('ViewerComponent', () => {
         });
 
         it('should render close viewer button if it is not a shared link', (done) => {
+            component.closeButtonPosition = CloseButtonPosition.Left;
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
-                expect(element.querySelector('[data-automation-id="adf-toolbar-back"]')).toBeDefined();
+                expect(element.querySelector('[data-automation-id="adf-toolbar-left-back"]')).not.toBeNull();
-                expect(element.querySelector('[data-automation-id="adf-toolbar-back"]')).not.toBeNull();
                 done();
             });
         });
@@ -422,6 +423,26 @@ describe('ViewerComponent', () => {
             });
         });
 
+        describe('Info Button', () => {
+            const infoButton = () => element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-sidebar"]');
+
+            it('should NOT display info button on the right side', () => {
+                component.allowRightSidebar = true;
+                component.hideInfoButton = true;
+                fixture.detectChanges();
+
+                expect(infoButton()).toBeNull();
+            });
+
+            it('should display info button on the right side', () => {
+                component.allowRightSidebar = true;
+                component.hideInfoButton = false;
+                fixture.detectChanges();
+
+                expect(infoButton()).not.toBeNull();
+            });
+        });
+
         describe('View', () => {
 
             describe('Overlay mode true', () => {
@@ -525,6 +546,38 @@ describe('ViewerComponent', () => {
             });
         });
 
+        describe('Close Button', () => {
+
+            const getRightCloseButton = () => element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-right-back"]');
+            const getLeftCloseButton = () => element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-left-back"]');
+
+            it('should show close button on left side when closeButtonPosition is left and allowGoBack is true', () => {
+                component.allowGoBack = true;
+                component.closeButtonPosition = CloseButtonPosition.Left;
+                fixture.detectChanges();
+
+                expect(getLeftCloseButton()).not.toBeNull();
+                expect(getRightCloseButton()).toBeNull();
+            });
+
+            it('should show close button on right side when closeButtonPosition is right and allowGoBack is true', () => {
+                component.allowGoBack = true;
+                component.closeButtonPosition =  CloseButtonPosition.Right;
+                fixture.detectChanges();
+
+                expect(getRightCloseButton()).not.toBeNull();
+                expect(getLeftCloseButton()).toBeNull();
+            });
+
+            it('should hide close button allowGoBack is false', () => {
+                component.allowGoBack = false;
+                fixture.detectChanges();
+
+                expect(getRightCloseButton()).toBeNull();
+                expect(getLeftCloseButton()).toBeNull();
+            });
+        });
+
         describe('Viewer component - Full Screen Mode - Mocking fixture element', () => {
 
             beforeEach(() => {

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

@@ -37,7 +37,7 @@ import { ViewerOpenWithComponent } from './viewer-open-with.component';
 import { ViewerMoreActionsComponent } from './viewer-more-actions.component';
 import { ViewerSidebarComponent } from './viewer-sidebar.component';
 import { filter, first, skipWhile, takeUntil } from 'rxjs/operators';
-import { Track } from '../models/viewer.model';
+import { CloseButtonPosition, Track } from '../models/viewer.model';
 import { ViewUtilService } from '../services/view-util.service';
 import { DownloadPromptDialogComponent } from './download-prompt-dialog/download-prompt-dialog.component';
 import { AppConfigService } from '../../app-config';
@@ -71,6 +71,10 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
     @ContentChild(ViewerMoreActionsComponent)
     mnuMoreActions: ViewerMoreActionsComponent;
 
+    get CloseButtonPosition() {
+        return CloseButtonPosition;
+    }
+
     /**
      * If you want to load an external file that does not come from ACS you
      * can use this URL to specify where to load the file from.
@@ -176,6 +180,16 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
     @Input()
     sidebarLeftTemplateContext: T = null;
 
+    /**
+     * Change the close button position Right/Left.
+     */
+    @Input()
+    closeButtonPosition = CloseButtonPosition.Left;
+
+    /** Toggles the 'Info Button' */
+    @Input()
+    hideInfoButton = false;
+
     /**
      * Enable dialog box to allow user to download the previewed file, in case the preview is not responding for a set period of time.
      */

lib/core/src/lib/viewer/models/viewer.model.ts

@@ -15,6 +15,11 @@
  * limitations under the License.
  */
 
+export enum CloseButtonPosition {
+    Right = 'right',
+    Left = 'left'
+}
+
 export interface Track {
     src: string;
     label?: string;

lib/testing/src/lib/protractor/core/pages/viewer.page.ts

@@ -25,7 +25,7 @@ const MAX_LOADING_TIME = 120000;
 
 export class ViewerPage {
     tabsPage = new TabsPage();
-    closeButton = $('button[data-automation-id="adf-toolbar-back"]');
+    closeButton = $('button.adf-viewer-close-button');
     fileName = $('#adf-viewer-display-name');
     infoButton = $('button[data-automation-id="adf-toolbar-sidebar"]');
     previousPageButton = $('#viewer-previous-page-button');