From e65b5430a1f0b6f7290c42567acc5680523c4c59 Mon Sep 17 00:00:00 2001 From: Anukriti Singh <106949107+AnukritiGL@users.noreply.github.com> Date: Tue, 2 Jan 2024 19:55:37 +0530 Subject: [PATCH] [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 --- .../components/alfresco-viewer.component.md | 4 +- docs/core/components/viewer.component.md | 4 +- .../components/alfresco-viewer.component.html | 2 + .../alfresco-viewer.component.spec.ts | 8 +-- .../components/alfresco-viewer.component.ts | 9 +++ .../viewer/components/viewer.component.html | 19 +++++- .../components/viewer.component.spec.ts | 59 ++++++++++++++++++- .../lib/viewer/components/viewer.component.ts | 16 ++++- .../src/lib/viewer/models/viewer.model.ts | 5 ++ .../lib/protractor/core/pages/viewer.page.ts | 2 +- 10 files changed, 114 insertions(+), 14 deletions(-) diff --git a/docs/content-services/components/alfresco-viewer.component.md b/docs/content-services/components/alfresco-viewer.component.md index 609493d4e54..5e5331d3d83 100644 --- a/docs/content-services/components/alfresco-viewer.component.md +++ b/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. | diff --git a/docs/core/components/viewer.component.md b/docs/core/components/viewer.component.md index 6597e20d046..54c5bec5c27 100644 --- a/docs/core/components/viewer.component.md +++ b/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. | diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html index 2103fb55c00..314fc146201 100644 --- a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html +++ b/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" diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts index 70130e0ffc0..886b8d1809a 100644 --- a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts +++ b/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-back"]')).not.toBeNull(); + expect(element.querySelector('[data-automation-id="adf-toolbar-left-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(); }); }); diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts index edc4a313c79..c6be71e9328 100644 --- a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts +++ b/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 = null; diff --git a/lib/core/src/lib/viewer/components/viewer.component.html b/lib/core/src/lib/viewer/components/viewer.component.html index 343485d8ca6..2eb3b764600 100644 --- a/lib/core/src/lib/viewer/components/viewer.component.html +++ b/lib/core/src/lib/viewer/components/viewer.component.html @@ -23,9 +23,9 @@ - - + + + diff --git a/lib/core/src/lib/viewer/components/viewer.component.spec.ts b/lib/core/src/lib/viewer/components/viewer.component.spec.ts index 1784e1a753b..6d38519e58d 100644 --- a/lib/core/src/lib/viewer/components/viewer.component.spec.ts +++ b/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('[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('[data-automation-id="adf-toolbar-right-back"]'); + const getLeftCloseButton = () => element.querySelector('[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(() => { diff --git a/lib/core/src/lib/viewer/components/viewer.component.ts b/lib/core/src/lib/viewer/components/viewer.component.ts index b4ce06dfe23..3789c3c7f30 100644 --- a/lib/core/src/lib/viewer/components/viewer.component.ts +++ b/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 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 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. */ diff --git a/lib/core/src/lib/viewer/models/viewer.model.ts b/lib/core/src/lib/viewer/models/viewer.model.ts index 43becafaa9e..a54b2248b50 100644 --- a/lib/core/src/lib/viewer/models/viewer.model.ts +++ b/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; diff --git a/lib/testing/src/lib/protractor/core/pages/viewer.page.ts b/lib/testing/src/lib/protractor/core/pages/viewer.page.ts index 27c01ca1d50..a9c858ab433 100644 --- a/lib/testing/src/lib/protractor/core/pages/viewer.page.ts +++ b/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');