[ADF-4424] Pdf Viewer - password dialog does not close when pressing Escape (#4622)

* return to previous page on close

* update e2e

* [ADF-4424] Improve PreviousRouteService to use it in pdfViewer

* change previous Url logic

* remove navigation logic

* remove test

* Update pdfViewer.component.spec.ts

* back button logic for viewer outlet

* unit tests

* remove fdescribe

* remove unused service

* e2e

* return to location

* remove click filter step

* remove unnecessary test steps

* remove un existen export

* unify preview between PS and CS in demo shell

* fix dispalyname property

demo-shell/src/app/app.routes.ts

@@ -93,7 +93,7 @@ export const appRoutes: Routes = [
         children: [
             {
                 path: '',
-                loadChildren: 'app/components/blob-preview/blob-preview.module#BlobPreviewModule'
+                loadChildren: 'app/components/file-view/file-view.module#FileViewModule'
             }
         ]
     },

demo-shell/src/app/components/blob-preview/blob-preview.component.ts

@@ -1,38 +0,0 @@
-/*!
- * @license
- * Copyright 2019 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 { Component } from '@angular/core';
-import { PreviewService } from '../../services/preview.service';
-import { Router } from '@angular/router';
-
-@Component({
-    templateUrl: 'bob-preview.component.html'
-})
-export class BlobPreviewComponent {
-    content: Blob;
-    name: string;
-
-    constructor(preview: PreviewService, router: Router) {
-        if (preview.content === null || preview.name === null) {
-            router.navigate([{ outlets: { overlay: null } }]);
-            return;
-        }
-
-        this.content = preview.content;
-        this.name = preview.name;
-    }
-}

demo-shell/src/app/components/blob-preview/blob-preview.module.ts

@@ -1,49 +0,0 @@
-/*!
- * @license
- * Copyright 2019 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 { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { CommonModule } from '@angular/common';
-import { CoreModule, InfoDrawerModule } from '@alfresco/adf-core';
-import { ContentDirectiveModule, ContentMetadataModule, VersionManagerModule } from '@alfresco/adf-content-services';
-import { BlobPreviewComponent } from './blob-preview.component';
-
-const routes: Routes = [
-    {
-        path: '',
-        component: BlobPreviewComponent
-    }
-];
-
-@NgModule({
-    imports: [
-        CommonModule,
-        RouterModule.forChild(routes),
-        CoreModule.forChild(),
-        InfoDrawerModule,
-        ContentDirectiveModule,
-        ContentMetadataModule,
-        VersionManagerModule
-    ],
-    declarations: [
-        BlobPreviewComponent
-    ],
-    exports: [
-        BlobPreviewComponent
-    ]
-})
-export class BlobPreviewModule {}

demo-shell/src/app/components/blob-preview/bob-preview.component.html

@@ -1,5 +0,0 @@
-<adf-viewer 
-    [showViewer]="true" 
-    [blobFile]="content" 
-    [displayName]="name">
-</adf-viewer>

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

@@ -1,4 +1,4 @@
-<ng-container *ngIf="nodeId">
+<ng-container *ngIf="nodeId || content">
 
     <ng-template let-node="node" #sidebarRightTemplate>
         <adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE' | translate">
@@ -284,13 +284,15 @@
                 </p>
 
                 <p class="toggle">
-                    <button mat-raised-button id="adf-switch-showrightsidebar" (click)="toggleShowRightSidebar()" color="primary">
+                    <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">
+                    <button mat-raised-button id="adf-switch-showleftsidebar" (click)="hideLeftSidebar()"
+                            color="primary">
                         Hide Left Sidebar
                     </button>
                 </p>
@@ -314,6 +316,7 @@
     </ng-template>
 
     <adf-viewer
+        [blobFile]="content"
         [nodeId]="nodeId"
         [showRightSidebar]="showRightSidebar"
         [showLeftSidebar]="showLeftSidebar"
@@ -325,6 +328,7 @@
         [allowRightSidebar]="allowRightSidebar"
         [allowLeftSidebar]="allowLeftSidebar"
         [urlFile]="urlFile"
+        (showViewerChange)="onViewerVisibilityChanged($event)"
         [sidebarLeftTemplate]="sidebarLeftTemplate"
         [sidebarRightTemplate]="sidebarRightTemplate">
 

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

@@ -16,9 +16,10 @@
  */
 
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, PRIMARY_OUTLET } from '@angular/router';
 import { ContentService, AllowableOperationsEnum, PermissionsEnum, NodesApiService } from '@alfresco/adf-core';
 import { MatSnackBar } from '@angular/material';
+import { PreviewService } from '../../services/preview.service';
 
 @Component({
     selector: 'app-file-view',
@@ -57,12 +58,15 @@ export class FileViewComponent implements OnInit {
     showTabWithIconAndLabel = false;
     desiredAspect: string = null;
     showAspect: string = null;
+    content: Blob;
+    name: string;
 
     constructor(private router: Router,
                 private route: ActivatedRoute,
                 private snackBar: MatSnackBar,
                 private nodeApiService: NodesApiService,
-                private contentServices: ContentService) {
+                private contentServices: ContentService,
+                private preview: PreviewService) {
     }
 
     ngOnInit() {
@@ -81,10 +85,18 @@ export class FileViewComponent implements OnInit {
                     },
                     () => this.router.navigate(['/files', id])
                 );
+            } else if (this.preview.content) {
+                this.content = this.preview.content;
+                this.displayName = this.preview.name;
             }
         });
     }
 
+    onViewerVisibilityChanged() {
+        const primaryUrl = this.router.parseUrl(this.router.url).root.children[PRIMARY_OUTLET].toString();
+        this.router.navigateByUrl(primaryUrl);
+    }
+
     onUploadError(errorMessage: string) {
         this.snackBar.open(errorMessage, '', { duration: 4000 });
     }

e2e/core/viewer/viewer-content-services-component.e2e.ts

@@ -401,4 +401,11 @@ describe('Content Services Viewer', () => {
 
         viewerPage.clickCloseButton();
     });
+
+    it('[C307985] Should close the viewer when password dialog is cancelled', () => {
+        viewerPage.viewFile(protectedFile.name);
+        viewerPage.checkPasswordDialogIsDisplayed();
+        viewerPage.clickClosePasswordDialog();
+        contentServicesPage.checkContentIsDisplayed(protectedFile.name);
+    });
 });

e2e/pages/adf/viewerPage.ts

@@ -50,6 +50,7 @@ export class ViewerPage {
     lastThumbnailDisplayed = element.all(by.css('adf-pdf-thumb')).last();
     passwordDialog = element(by.css('adf-pdf-viewer-password-dialog'));
     passwordSubmit = element(by.css('button[data-automation-id="adf-password-dialog-submit"]'));
+    passwordDialogClose = element(by.css('button[data-automation-id="adf-password-dialog-close"]'));
     passwordSubmitDisabled = element(by.css('button[data-automation-id="adf-password-dialog-submit"][disabled]'));
     passwordInput = element(by.css('input[data-automation-id="adf-password-dialog-input"]'));
     passwordError = element(by.css('mat-error[data-automation-id="adf-password-dialog-error"]'));
@@ -149,6 +150,11 @@ export class ViewerPage {
         BrowserVisibility.waitUntilElementIsVisible(this.pdfPageLoaded, 30000, `not loaded ${fileName}`);
     }
 
+    clickClosePasswordDialog() {
+        BrowserVisibility.waitUntilElementIsVisible(this.passwordDialogClose);
+        this.passwordDialogClose.click();
+    }
+
     checkImgViewerIsDisplayed() {
         BrowserVisibility.waitUntilElementIsOnPage(this.imgViewer);
     }

e2e/process-services/task-attachmentList-actionMenu.e2e.ts

@@ -101,15 +101,11 @@ describe('Attachment list action menu for tasks', () => {
         viewerPage.checkFileNameIsDisplayed(pngFile.name);
         viewerPage.clickCloseButton();
 
-        taskPage.filtersPage().goToFilter(CONSTANTS.TASK_FILTERS.MY_TASKS);
-
         attachmentListPage.doubleClickFile(pngFile.name);
 
         viewerPage.checkFileNameIsDisplayed(pngFile.name);
         viewerPage.clickCloseButton();
 
-        taskPage.filtersPage().goToFilter(CONSTANTS.TASK_FILTERS.MY_TASKS);
-
         attachmentListPage.downloadFile(pngFile.name);
 
         browser.driver.sleep(1000);
@@ -139,9 +135,6 @@ describe('Attachment list action menu for tasks', () => {
         viewerPage.checkFileNameIsDisplayed(pngFile.name);
         viewerPage.clickCloseButton();
 
-        taskPage.filtersPage().goToFilter(CONSTANTS.TASK_FILTERS.COMPLETED_TASKS);
-        taskPage.tasksListPage().selectRow(taskName.completed);
-
         attachmentListPage.downloadFile(pngFile.name);
 
         browser.driver.sleep(1000);

lib/core/services/previous-route.service.spec.ts

@@ -1,61 +0,0 @@
-/*!
- * @license
- * Copyright 2019 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 { TestBed } from '@angular/core/testing';
-import { setupTestBed } from '../testing/setupTestBed';
-import { PreviousRouteService } from './previous-route.service';
-import { Router, NavigationEnd } from '@angular/router';
-import { Observable } from 'rxjs';
-import { CoreTestingModule } from 'core/testing/core.testing.module';
-
-class MockRouter {
-    firstUrl = new NavigationEnd(0, '/files', '/files');
-    secondUrl = new NavigationEnd(0, '/home', '/home');
-    events = new Observable((observer) => {
-        observer.next(this.firstUrl);
-        observer.next(this.secondUrl);
-        observer.complete();
-    });
-}
-
-describe('Previous route service ', () => {
-
-    let previousRouteService: PreviousRouteService;
-
-    setupTestBed({
-        imports: [
-            CoreTestingModule
-        ],
-        providers: [
-            { provide: Router, useClass: MockRouter },
-            PreviousRouteService
-        ]
-    });
-
-    beforeEach(() => {
-        previousRouteService = TestBed.get(PreviousRouteService);
-    });
-
-    it('should be able to create the service', () => {
-        expect(previousRouteService).not.toBeNull();
-        expect(previousRouteService).toBeDefined();
-    });
-
-    it('should set curent url when new page loads', () => {
-        expect(previousRouteService.getPreviousUrl()).toBe('/files');
-    });
-});

lib/core/services/previous-route.service.ts

@@ -1,42 +0,0 @@
-/*!
- * @license
- * Copyright 2019 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 { Injectable } from '@angular/core';
-import { Router, NavigationEnd } from '@angular/router';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class PreviousRouteService {
-
-    private previousUrl: string;
-    private currentUrl: string;
-
-    constructor(private router: Router) {
-        this.currentUrl = this.router.url;
-        this.router.events.subscribe((event) => {
-            if (event instanceof NavigationEnd) {
-                this.previousUrl = this.currentUrl;
-                this.currentUrl = event.url;
-            }
-        });
-    }
-
-    public getPreviousUrl(): string {
-        return this.previousUrl;
-    }
-}

lib/core/services/public-api.ts

@@ -55,5 +55,4 @@ export * from './jwt-helper.service';
 export * from './download-zip.service';
 export * from './lock.service';
 export * from './automation.service';
-export * from './previous-route.service';
 export * from './automation.service';

lib/core/viewer/components/pdfViewer-password-dialog.html

@@ -19,7 +19,7 @@
 <mat-dialog-actions class="adf-dialog-buttons">
     <span class="adf-fill-remaining-space"></span>
 
-    <button mat-button mat-dialog-close>{{ 'ADF_VIEWER.PDF_DIALOG.CLOSE' | translate }}</button>
+    <button mat-button mat-dialog-close data-automation-id='adf-password-dialog-close'>{{ 'ADF_VIEWER.PDF_DIALOG.CLOSE' | translate }}</button>
 
     <button mat-button
             data-automation-id='adf-password-dialog-submit'

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

@@ -331,6 +331,7 @@ describe('Test PdfViewer component', () => {
         let fixtureUrlTestPasswordComponent: ComponentFixture<UrlTestPasswordComponent>;
         let componentUrlTestPasswordComponent: UrlTestPasswordComponent;
 
+        describe('Open password dialog', () => {
             beforeEach((done) => {
                 fixtureUrlTestPasswordComponent = TestBed.createComponent(UrlTestPasswordComponent);
                 componentUrlTestPasswordComponent = fixtureUrlTestPasswordComponent.componentInstance;
@@ -393,6 +394,45 @@ describe('Test PdfViewer component', () => {
             });
         });
 
+        describe('Close password dialog ', () => {
+            beforeEach((done) => {
+                fixtureUrlTestPasswordComponent = TestBed.createComponent(UrlTestPasswordComponent);
+                componentUrlTestPasswordComponent = fixtureUrlTestPasswordComponent.componentInstance;
+
+                spyOn(dialog, 'open').and.callFake(() => {
+                    return {
+                        afterClosed: () => {
+                            done();
+                            return of('');
+                        }
+                    };
+                });
+
+                spyOn(componentUrlTestPasswordComponent.pdfViewerComponent.close, 'emit');
+
+                fixtureUrlTestPasswordComponent.detectChanges();
+
+                componentUrlTestPasswordComponent.pdfViewerComponent.rendered.subscribe(() => {
+                    done();
+                });
+            });
+
+            afterEach(() => {
+                document.body.removeChild(fixtureUrlTestPasswordComponent.nativeElement);
+            });
+
+            it('should try to access protected pdf', (done) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+
+                    expect(componentUrlTestPasswordComponent.pdfViewerComponent.close.emit).toHaveBeenCalledWith();
+                    done();
+                });
+            });
+        });
+    });
+
     describe('User interaction', () => {
 
         let fixtureUrlTestComponent: ComponentFixture<UrlTestComponent>;

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

@@ -79,6 +79,9 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
     @Output()
     error = new EventEmitter<any>();
 
+    @Output()
+    close = new EventEmitter<any>();
+
     loadingTask: any;
     currentPdfDocument: any;
     page: number;
@@ -188,11 +191,11 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
 
             this.currentPdfDocument.getPage(1).then(() => {
                 this.scalePage('auto');
-            }, (error) => {
+            }, () => {
                 this.error.emit();
             });
 
-        }, (error) => {
+        }, () => {
             this.error.emit();
         });
     }
@@ -461,12 +464,13 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
         this.dialog
             .open(PdfPasswordDialogComponent, {
                 width: '400px',
-                disableClose: true,
                 data: { reason }
             })
             .afterClosed().subscribe((password) => {
                 if (password) {
                     callback(password);
+                } else {
+                    this.close.emit();
                 }
         });
     }

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

@@ -171,7 +171,7 @@
                     <div class="adf-viewer-content-container" [ngSwitch]="viewerType">
 
                         <ng-container *ngSwitchCase="'pdf'">
-                            <adf-pdf-viewer [thumbnailsTemplate]="thumbnailsTemplate" [allowThumbnails]="allowThumbnails" [blobFile]="blobFile" [urlFile]="urlFileContent" [nameFile]="displayName"></adf-pdf-viewer>
+                            <adf-pdf-viewer (close)="onBackButtonClick()" [thumbnailsTemplate]="thumbnailsTemplate" [allowThumbnails]="allowThumbnails" [blobFile]="blobFile" [urlFile]="urlFileContent" [nameFile]="displayName"></adf-pdf-viewer>
                         </ng-container>
 
                         <ng-container *ngSwitchCase="'image'">

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

@@ -23,16 +23,14 @@ import { AlfrescoApiService, RenditionsService } from '../../services';
 
 import { CoreModule } from '../../core.module';
 
-import { throwError, Observable } from 'rxjs';
+import { throwError } from 'rxjs';
 import { EventMock } from '../../mock/event.mock';
 import { RenderingQueueServices } from '../services/rendering-queue.services';
 import { ViewerComponent } from './viewer.component';
 import { setupTestBed } from '../../testing/setupTestBed';
 import { AlfrescoApiServiceMock } from '../../mock/alfresco-api.service.mock';
 import { NodeEntry } from '@alfresco/js-api';
-import { PreviousRouteService } from 'core/services/previous-route.service';
 import { RouterTestingModule } from '@angular/router/testing';
-import { Router, NavigationEnd } from '@angular/router';
 
 @Component({
     selector: 'adf-viewer-container-toolbar',
@@ -123,22 +121,11 @@ class ViewerWithCustomOpenWithComponent {
 class ViewerWithCustomMoreActionsComponent {
 }
 
-class MockRouter {
-    navigate = jasmine.createSpy('navigate');
-    firstUrl = new NavigationEnd(0, '/files', '/files');
-    events = new Observable((observer) => {
-        observer.next(this.firstUrl);
-        observer.complete();
-    });
-}
-
 describe('ViewerComponent', () => {
 
     let component: ViewerComponent;
     let fixture: ComponentFixture<ViewerComponent>;
     let alfrescoApiService: AlfrescoApiService;
-    let previousRouteService: PreviousRouteService;
-    let router: Router;
     let element: HTMLElement;
 
     setupTestBed({
@@ -162,9 +149,7 @@ describe('ViewerComponent', () => {
                     }
                 }
             },
-            { provide: Router, useClass: MockRouter },
             RenderingQueueServices,
-            PreviousRouteService,
             { provide: Location, useClass: SpyLocation }
         ]
     });
@@ -175,8 +160,6 @@ describe('ViewerComponent', () => {
         component = fixture.componentInstance;
 
         alfrescoApiService = TestBed.get(AlfrescoApiService);
-        previousRouteService = TestBed.get(PreviousRouteService);
-        router = TestBed.get(Router);
     });
 
     describe('Extension Type Test', () => {
@@ -661,9 +644,9 @@ describe('ViewerComponent', () => {
                 });
             });
 
-            it('should go back when back button is clicked', async(() => {
+            it('should emit `showViewerChange` event on close', async(() => {
 
-                spyOn(previousRouteService, 'getPreviousUrl').and.returnValue('home');
+                spyOn(component.showViewerChange, 'emit');
 
                 const button: HTMLButtonElement = element.querySelector('[data-automation-id="adf-toolbar-back"]') as HTMLButtonElement;
                 button.click();
@@ -671,11 +654,11 @@ describe('ViewerComponent', () => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
-                    expect(router.navigate).toHaveBeenCalled();
+                    expect(component.showViewerChange.emit).toHaveBeenCalled();
                 });
             }));
 
-            it('should render close viewer button if it is a shared link', (done) => {
+            it('should not render close viewer button if it is a shared link', (done) => {
                 spyOn(alfrescoApiService.getInstance().core.sharedlinksApi, 'getSharedLink')
                     .and.returnValue(Promise.reject({}));
 

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

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-import { Location } from '@angular/common';
 import {
     Component, ContentChild, EventEmitter, HostListener, ElementRef,
     Input, OnChanges, Output, SimpleChanges, TemplateRef,
@@ -25,7 +24,6 @@ import { RenditionPaging, SharedLinkEntry, Node, RenditionEntry, NodeEntry } fro
 import { BaseEvent } from '../../events';
 import { AlfrescoApiService } from '../../services/alfresco-api.service';
 import { LogService } from '../../services/log.service';
-import { PreviousRouteService } from '../../services/previous-route.service';
 import { ViewerMoreActionsComponent } from './viewer-more-actions.component';
 import { ViewerOpenWithComponent } from './viewer-open-with.component';
 import { ViewerSidebarComponent } from './viewer-sidebar.component';
@@ -33,7 +31,6 @@ import { ViewerToolbarComponent } from './viewer-toolbar.component';
 import { Subscription } from 'rxjs';
 import { ViewUtilService } from '../services/view-util.service';
 import { AppExtensionService, ViewerExtensionRef } from '@alfresco/adf-extensions';
-import { Router } from '@angular/router';
 
 @Component({
     selector: 'adf-viewer',
@@ -98,6 +95,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     @Input()
     displayName: string;
 
+    /** @deprecated 3.2.0 */
     /** Allows `back` navigation */
     @Input()
     allowGoBack = true;
@@ -239,11 +237,8 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     constructor(private apiService: AlfrescoApiService,
                 private viewUtils: ViewUtilService,
                 private logService: LogService,
-                private location: Location,
                 private extensionService: AppExtensionService,
-                private el: ElementRef,
+                private el: ElementRef) {
-                private router: Router,
-                private previousRouteService: PreviousRouteService) {
     }
 
     isSourceDefined(): boolean {
@@ -477,23 +472,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     }
 
     onBackButtonClick() {
-        if (this.overlayMode) {
         this.close();
-        } else {
-            const event = new BaseEvent<any>();
-            this.goBack.next(event);
-
-            if (!event.defaultPrevented) {
-
-                const previousUrl = this.previousRouteService.getPreviousUrl();
-
-                if (previousUrl && previousUrl.includes('login') || window.history.length <= 2) {
-                    this.router.navigate([{outlets: {overlay: null, primary: ['home']}}]);
-                } else {
-                    this.location.back();
-                }
-            }
-        }
     }
 
     onNavigateBeforeClick() {