[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

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-back"]')).not.toBeNull();
+                expect(element.querySelector('[data-automation-id="adf-toolbar-left-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;