SF-3349 Prompt user when leaving draft sources with unsaved changes (#3184)

Author: RaymondLuong3

src/SIL.XForge.Scripture/ClientApp/src/app/shared/project-router.guard.spec.ts

@@ -0,0 +1,55 @@
+import { TestBed } from '@angular/core/testing';
+import { mock } from 'ts-mockito';
+import { AuthGuard } from 'xforge-common/auth.guard';
+import { configureTestingModule } from 'xforge-common/test-utils';
+import { SFProjectService } from '../core/sf-project.service';
+import { DraftNavigationAuthGuard } from './project-router.guard';
+
+const mockedAuthGuard = mock(AuthGuard);
+const mockedProjectService = mock(SFProjectService);
+
+describe('DraftNavigationAuthGuard', () => {
+  configureTestingModule(() => ({
+    providers: [
+      { provide: AuthGuard, useMock: mockedAuthGuard },
+      { provide: SFProjectService, useMock: mockedProjectService }
+    ]
+  }));
+
+  it('can navigate away when no changes', () => {
+    // navigate away
+    const env = new DraftNavigationTestEnvironment();
+    spyOn(window, 'confirm');
+    expect(
+      env.service.canDeactivate({ deactivationPrompt: 'unsaved changed', promptUserToDeactivate: () => false })
+    ).toBe(true);
+    expect(window.confirm).not.toHaveBeenCalled();
+  });
+
+  it('can shows prompt and navigate away', () => {
+    // navigate away
+    const env = new DraftNavigationTestEnvironment();
+    spyOn(window, 'confirm').and.returnValue(true);
+    expect(
+      env.service.canDeactivate({ deactivationPrompt: 'unsaved changed', promptUserToDeactivate: () => true })
+    ).toBe(true);
+    expect(window.confirm).toHaveBeenCalled();
+  });
+
+  it('can shows prompt and stay on page', () => {
+    // navigate away
+    const env = new DraftNavigationTestEnvironment();
+    spyOn(window, 'confirm').and.returnValue(false);
+    expect(
+      env.service.canDeactivate({ deactivationPrompt: 'unsaved changed', promptUserToDeactivate: () => true })
+    ).toBe(false);
+    expect(window.confirm).toHaveBeenCalled();
+  });
+});
+
+class DraftNavigationTestEnvironment {
+  service: DraftNavigationAuthGuard;
+  constructor() {
+    this.service = TestBed.inject(DraftNavigationAuthGuard);
+  }
+}

src/SIL.XForge.Scripture/ClientApp/src/app/shared/project-router.guard.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, CanDeactivate, Router, RouterStateSnapshot } from '@angular/router';
 import { Operation } from 'realtime-server/lib/esm/common/models/project-rights';
 import { SF_PROJECT_RIGHTS, SFProjectDomain } from 'realtime-server/lib/esm/scriptureforge/models/sf-project-rights';
 import { SFProjectRole } from 'realtime-server/lib/esm/scriptureforge/models/sf-project-role';
@@ -168,3 +168,27 @@ export class TranslateAuthGuard extends RouterGuard {
     return false;
   }
 }
+
+export interface DeactivateAllowed {
+  deactivationPrompt: string;
+
+  promptUserToDeactivate(): boolean;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DraftNavigationAuthGuard extends RouterGuard implements CanDeactivate<DeactivateAllowed> {
+  constructor(authGuard: AuthGuard, projectService: SFProjectService) {
+    super(authGuard, projectService);
+  }
+
+  canDeactivate(component: DeactivateAllowed): boolean {
+    if (!component.promptUserToDeactivate()) return true;
+    return confirm(component.deactivationPrompt);
+  }
+
+  check(_: SFProjectProfileDoc): boolean {
+    return true;
+  }
+}

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-sources/draft-sources.component.ts

@@ -24,6 +24,7 @@ import { hasData, notNull } from '../../../../type-utils';
 import { SFProjectProfileDoc } from '../../../core/models/sf-project-profile-doc';
 import { ParatextService, SelectableProject, SelectableProjectWithLanguageCode } from '../../../core/paratext.service';
 import { SFProjectService } from '../../../core/sf-project.service';
+import { DeactivateAllowed } from '../../../shared/project-router.guard';
 import { projectLabel } from '../../../shared/utils';
 import { isSFProjectSyncing } from '../../../sync/sync.component';
 import {
@@ -60,7 +61,7 @@ export interface ProjectStatus {
   templateUrl: './draft-sources.component.html',
   styleUrl: './draft-sources.component.scss'
 })
-export class DraftSourcesComponent extends DataLoadingComponent {
+export class DraftSourcesComponent extends DataLoadingComponent implements DeactivateAllowed {
   /** Indicator that a project setting change is for clearing a value. */
   static readonly projectSettingValueUnset = 'unset';
 
@@ -82,6 +83,7 @@ export class DraftSourcesComponent extends DataLoadingComponent {
   languageCodeConfirmationMessageIfUserTriesToContinue: I18nKeyForComponent<'draft_sources'> | null = null;
   clearLanguageCodeConfirmationCheckbox = new EventEmitter<void>();
   changesMade = false;
+  deactivationPrompt: string = this.i18n.translateStatic('draft_sources.discard_changes_confirmation');
 
   /** Whether some projects are syncing currently. */
   syncStatus: Map<string, ProjectStatus> = new Map<string, ProjectStatus>();
@@ -288,6 +290,10 @@ export class DraftSourcesComponent extends DataLoadingComponent {
     }
   }
 
+  promptUserToDeactivate(): boolean {
+    return this.changesMade;
+  }
+
   navigateToDrafting(): void {
     this.router.navigate(['/projects', this.activatedProjectService.projectId, 'draft-generation']);
   }

src/SIL.XForge.Scripture/ClientApp/src/app/translate/translate-routing.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { NmtDraftAuthGuard, TranslateAuthGuard } from '../shared/project-router.guard';
+import { DraftNavigationAuthGuard, NmtDraftAuthGuard, TranslateAuthGuard } from '../shared/project-router.guard';
 import { DraftGenerationComponent } from './draft-generation/draft-generation.component';
 import { DraftSourcesComponent } from './draft-generation/draft-sources/draft-sources.component';
 import { EditorComponent } from './editor/editor.component';
@@ -22,7 +22,8 @@ const routes: Routes = [
   {
     path: 'projects/:projectId/draft-generation/sources',
     component: DraftSourcesComponent,
-    canActivate: [NmtDraftAuthGuard]
+    canActivate: [NmtDraftAuthGuard],
+    canDeactivate: [DraftNavigationAuthGuard]
   }
 ];