[ENG-1641] Draft registration save before exit (#1655)

-   Ticket: [ENG-1641]

## Purpose
- Let users know they have unsaved changes before they exit the draft registration workflow
- Let users know when an autosave is in progress

## Summary of Changes
- Change some of the links on the Draft Registration Metadata page to open in a new tab to prevent users from navigating away
- Add a new `{{before-unload}}` modifier
- Add logic to show popup if the draft has pending changes
  - One to handle `onBeforeUnload` (closing or refreshing the browser window)
  - One to handle route transitions (clicking the "Add new"/"My Registrations" buttons or navigating away within the app)
- Add same logic for edit-revision workflow
- Update rightnav template to show when an autosave is in progress

Author: futa-ikeda

lib/osf-components/addon/components/contributors/card/editable/template.hbs

@@ -20,6 +20,7 @@
             <OsfLink
                 data-test-contributor-link={{@contributor.id}}
                 data-analytics-name='View user'
+                @target='_blank'
                 @href={{concat '/' @contributor.users.id '/'}}
             >
                 {{@contributor.users.fullName}}

lib/osf-components/addon/modifiers/before-unload.ts

@@ -0,0 +1,21 @@
+import Modifier from 'ember-modifier';
+
+interface BeforeUnloadModifierArgs {
+    positional: any;
+    named: {};
+}
+
+export default class BeforeUnloadModifier extends Modifier<BeforeUnloadModifierArgs> {
+    listener?: any;
+    didReceiveArguments() {
+        if (this.listener) {
+            window.removeEventListener('beforeunload', this.listener);
+        }
+        this.listener = this.args.positional[0];
+        window.addEventListener('beforeunload', this.listener);
+    }
+
+    willRemove() {
+        window.removeEventListener('beforeunload', this.listener);
+    }
+}

lib/osf-components/app/modifiers/before-unload.js

@@ -0,0 +1 @@
+export { default } from 'osf-components/modifiers/before-unload';

lib/registries/addon/drafts/draft/-components/right-nav/template.hbs

@@ -74,10 +74,15 @@
     </span>
 {{/if}}
 <span local-class='SaveMessage'>
-    {{t 'registries.drafts.draft.form.last_saved'}}
-    <TimeSince
-        @date={{@draftManager.draftRegistration.datetimeUpdated}}
-    />
+    {{#if @draftManager.autoSaving}}
+        <LoadingIndicator @inline={{true}} @dark={{true}}/>
+        {{t 'registries.drafts.draft.auto_saving'}}
+    {{else}}
+        {{t 'registries.drafts.draft.form.last_saved'}}
+        <TimeSince
+            @date={{@draftManager.draftRegistration.datetimeUpdated}}
+        />
+    {{/if}}
 </span>
 
 {{#if @draftManager.currentUserIsAdmin}}

lib/registries/addon/drafts/draft/controller.ts

@@ -4,13 +4,16 @@ import { alias, not } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 
 import Media from 'ember-responsive';
+import IntlService from 'ember-intl/services/intl';
 
 import BrandModel from 'ember-osf-web/models/brand';
 import ProviderModel from 'ember-osf-web/models/provider';
 import Registration from 'ember-osf-web/models/registration';
+import { taskFor } from 'ember-concurrency-ts';
 
 export default class RegistriesDraft extends Controller {
     @service media!: Media;
+    @service intl!: IntlService;
 
     @not('media.isDesktop') showMobileView!: boolean;
 
@@ -24,4 +27,17 @@ export default class RegistriesDraft extends Controller {
     onSubmitRedirect(registrationId: Registration) {
         this.transitionToRoute('overview.index', registrationId);
     }
+
+    @action
+    saveBeforeUnload(event: BeforeUnloadEvent) {
+        const { draftRegistrationManager } = this.model;
+        if (draftRegistrationManager.onMetadataInput.isRunning ||
+            draftRegistrationManager.onPageInput.isRunning ||
+            draftRegistrationManager.saveWithToast.isRunning ||
+            draftRegistrationManager.lastSaveFailed) {
+            event.preventDefault();
+            event.returnValue = this.intl.t('registries.drafts.draft.save_before_exit');
+            taskFor(draftRegistrationManager.saveWithToast).perform();
+        }
+    }
 }

lib/registries/addon/drafts/draft/draft-registration-manager.ts

@@ -54,7 +54,7 @@ export default class DraftRegistrationManager {
     @alias('draftRegistration.currentUserIsAdmin') currentUserIsAdmin!: boolean;
     @alias('provider.reviewsWorkflow') reviewsWorkflow?: string;
     @alias('draftRegistration.hasProject') hasProject?: boolean;
-    @or('onPageInput.isRunning', 'onMetadataInput.isRunning') autoSaving!: boolean;
+    @alias('draftRegistration.isSaving') autoSaving!: boolean;
     @or('initializePageManagers.isRunning', 'initializeMetadataChangeset.isRunning') initializing!: boolean;
     @not('registrationResponsesIsValid') hasInvalidResponses!: boolean;
     @filterBy('pageManagers', 'isVisited', true) visitedPages!: PageManager[];
@@ -117,8 +117,14 @@ export default class DraftRegistrationManager {
     @restartableTask
     @waitFor
     async onPageInput(currentPageManager: PageManager) {
-        await timeout(5000); // debounce
+        await timeout(3000); // debounce
+
+        await taskFor(this.saveRegistrationResponses).perform(currentPageManager);
+    }
 
+    @restartableTask
+    @waitFor
+    async saveRegistrationResponses(currentPageManager: PageManager) {
         if (currentPageManager && currentPageManager.schemaBlockGroups) {
             this.updateRegistrationResponses(currentPageManager);
 
@@ -131,7 +137,6 @@ export default class DraftRegistrationManager {
                 const errorMessage = this.intl.t('registries.drafts.draft.form.failed_auto_save');
                 captureException(e, { errorMessage });
                 this.toast.error(getApiErrorMessage(e), errorMessage);
-                throw e;
             }
         }
     }
@@ -200,7 +205,6 @@ export default class DraftRegistrationManager {
             const errorMessage = this.intl.t('registries.drafts.draft.metadata.failed_auto_save');
             captureException(e, { errorMessage });
             this.toast.error(getApiErrorMessage(e), errorMessage);
-            throw e;
         }
     }
 
@@ -217,6 +221,21 @@ export default class DraftRegistrationManager {
         }
     }
 
+    @restartableTask
+    @waitFor
+    async saveWithToast() {
+        try {
+            taskFor(this.onMetadataInput).cancelAll();
+            taskFor(this.onPageInput).cancelAll();
+            await taskFor(this.updateDraftRegistrationAndSave).perform();
+            await taskFor(this.saveAllVisitedPages).perform();
+            this.toast.success(this.intl.t('registries.drafts.draft.save_success'));
+        } catch (e) {
+            const errorTitle = this.intl.t('registries.drafts.draft.save_failed');
+            this.toast.error(getApiErrorMessage(e), errorTitle);
+        }
+    }
+
     @action
     onPageChange(currentPage: number) {
         if (this.hasVisitedPages) {

lib/registries/addon/drafts/draft/route.ts

@@ -1,11 +1,14 @@
 import Store from '@ember-data/store';
 import { getOwner } from '@ember/application';
+import { action } from '@ember/object';
+import Transition from '@ember/routing/-private/transition';
 import Route from '@ember/routing/route';
 import RouterService from '@ember/routing/router-service';
 import { inject as service } from '@ember/service';
 import { waitFor } from '@ember/test-waiters';
 import { task } from 'ember-concurrency';
 import { taskFor } from 'ember-concurrency-ts';
+import Intl from 'ember-intl/services/intl';
 
 import requireAuth from 'ember-osf-web/decorators/require-auth';
 import DraftRegistration from 'ember-osf-web/models/draft-registration';
@@ -25,6 +28,7 @@ export interface DraftRouteModel {
 export default class DraftRegistrationRoute extends Route {
     @service store!: Store;
     @service router!: RouterService;
+    @service intl!: Intl;
 
     @task
     @waitFor
@@ -65,6 +69,22 @@ export default class DraftRegistrationRoute extends Route {
         };
     }
 
+    @action
+    willTransition(transition: Transition) {
+        const { draftRegistrationManager } = this.controller.model;
+        const notBeingDeleted = !draftRegistrationManager.deleteDraft.isRunning;
+        const draftIsDirty = draftRegistrationManager.onMetadataInput.isRunning ||
+            draftRegistrationManager.onPageInput.isRunning ||
+            draftRegistrationManager.saveWithToast.isRunning ||
+            draftRegistrationManager.lastSaveFailed;
+        if (!transition.to.name.includes(this.routeName) && draftIsDirty && notBeingDeleted) {
+            if (!window.confirm(this.intl.t('registries.drafts.draft.save_before_exit'))) {
+                transition.abort();
+                taskFor(draftRegistrationManager.saveWithToast).perform();
+            }
+        }
+    }
+
     buildRouteInfoMetadata() {
         return {
             osfMetrics: {

lib/registries/addon/drafts/draft/template.hbs

@@ -78,7 +78,10 @@
                         @navMode={{leftNav.leftGutterMode}}
                     />
                 </layout.leftNav>
-                <layout.main local-class='Main'>
+                <layout.main
+                    {{before-unload this.saveBeforeUnload}}
+                    local-class='Main'
+                >
                     {{outlet}}
                 </layout.main>
                 {{#unless this.showMobileView}}

lib/registries/addon/edit-revision/-components/right-nav/template.hbs

@@ -73,10 +73,15 @@
     </span>
 {{/if}}
 <span local-class='SaveMessage'>
-    {{t 'registries.drafts.draft.form.last_saved'}}
-    <TimeSince
-        @date={{@revisionManager.revision.dateModified}}
-    />
+    {{#if @revisionManager.autoSaving}}
+        <LoadingIndicator @inline={{true}} @dark={{true}} />
+        {{t 'registries.drafts.draft.auto_saving'}}
+    {{else}}
+        {{t 'registries.drafts.draft.form.last_saved'}}
+        <TimeSince
+            @date={{@revisionManager.revision.dateModified}}
+        />
+    {{/if}}
 </span>
 
 {{#if @revisionManager.showDeleteButton}}

lib/registries/addon/edit-revision/controller.ts

@@ -1,7 +1,9 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
 import { alias, not } from '@ember/object/computed';
 import RouterService from '@ember/routing/router-service';
 import { inject as service } from '@ember/service';
+import { taskFor } from 'ember-concurrency-ts';
 import IntlService from 'ember-intl/services/intl';
 import RegistrationModel from 'ember-osf-web/models/registration';
 import SchemaResponseModel from 'ember-osf-web/models/schema-response';
@@ -17,4 +19,17 @@ export default class EditRevisionController extends Controller {
 
     @alias('model.revisionManager.revision') revision?: SchemaResponseModel;
     @alias('model.revisionManager.registration') registration?: RegistrationModel;
+
+    @action
+    saveBeforeUnload(event: BeforeUnloadEvent) {
+        const { revisionManager } = this.model;
+        if (revisionManager.onJustificationInput.isRunning ||
+            revisionManager.onPageInput.isRunning ||
+            revisionManager.saveWithToast.isRunning ||
+            revisionManager.lastSaveFailed) {
+            event.preventDefault();
+            event.returnValue = this.intl.t('registries.drafts.draft.save_before_exit');
+            taskFor(revisionManager.saveWithToast).perform();
+        }
+    }
 }