Added logic for browsing away from the create and edit flow

app/preprints/-components/submit/preprint-state-machine/component.ts

@@ -28,6 +28,8 @@ export enum PreprintStatusTypeEnum {
 interface StateMachineArgs {
     provider: PreprintProviderModel;
     preprint: PreprintModel;
+    setPageDirty: () => void;
+    resetPageDirty: () => void;
 }
 
 /**
@@ -129,6 +131,7 @@ export default class PreprintStateMachine extends Component<StateMachineArgs>{
     @task
     @waitFor
     public async onSubmit(): Promise<void> {
+        this.args.resetPageDirty();
         if (!this.isEditFlow) {
             if (this.provider.reviewsWorkflow) {
                 const reviewAction = this.store.createRecord('review-action', {
@@ -151,6 +154,11 @@ export default class PreprintStateMachine extends Component<StateMachineArgs>{
     @task
     @waitFor
     public async onNext(): Promise<void> {
+        if (this.isEditFlow) {
+            this.args.resetPageDirty();
+        } else {
+            this.args.setPageDirty();
+        }
         this.isNextButtonDisabled = true;
         if (this.statusFlowIndex === this.getTypeIndex(PreprintStatusTypeEnum.titleAndAbstract) &&
             this.titleAndAbstractValidation
@@ -189,13 +197,20 @@ export default class PreprintStateMachine extends Component<StateMachineArgs>{
         }
     }
 
+    private setPageDirty(): void {
+        if (this.isEditFlow) {
+            this.args.setPageDirty();
+        }
+    }
+
     /**
      * Callback for the action-flow component
      */
     @action
     public validateTitleAndAbstract(valid: boolean): void {
         this.titleAndAbstractValidation = valid;
         this.isNextButtonDisabled = !valid;
+        this.setPageDirty();
     }
 
     /**
@@ -205,6 +220,7 @@ export default class PreprintStateMachine extends Component<StateMachineArgs>{
     public validateFile(valid: boolean): void {
         this.fileValidation = valid;
         this.isNextButtonDisabled = !valid;
+        this.setPageDirty();
     }
 
     /**
@@ -214,6 +230,7 @@ export default class PreprintStateMachine extends Component<StateMachineArgs>{
     public validateMetadata(valid: boolean): void {
         this.metadataValidation = valid;
         this.isNextButtonDisabled = !valid;
+        this.setPageDirty();
     }
 
     /**
@@ -232,6 +249,7 @@ export default class PreprintStateMachine extends Component<StateMachineArgs>{
         }
         this.authorAssertionValidation = valid;
         this.isNextButtonDisabled = !valid;
+        this.setPageDirty();
     }
 
     /**
@@ -241,6 +259,7 @@ export default class PreprintStateMachine extends Component<StateMachineArgs>{
     public validateSupplements(valid: boolean): void {
         this.supplementValidation = valid;
         this.isNextButtonDisabled = !valid;
+        this.setPageDirty();
     }
 
     @action

app/preprints/-components/submit/submission-flow/template.hbs

@@ -3,6 +3,8 @@
 <Preprints::-Components::Submit::PreprintStateMachine 
     @provider={{@provider}}
     @preprint={{@preprint}}
+    @setPageDirty={{@setPageDirty}}
+    @resetPageDirty={{@resetPageDirty}}
 as |manager|>
     <OsfLayout @backgroundClass={{local-class 'submit-page-container'}} as |layout|>
         <layout.heading local-class='header-container'

app/preprints/edit/controller.ts

@@ -0,0 +1,17 @@
+import Controller from '@ember/controller';
+import { action} from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class PreprintEdit extends Controller {
+    @tracked isPageDirty = false;
+
+    @action
+    setPageDirty() {
+        this.isPageDirty = true;
+    }
+
+    @action
+    resetPageDirty() {
+        this.isPageDirty = false;
+    }
+}

app/preprints/edit/route.ts

@@ -2,19 +2,29 @@ import Store from '@ember-data/store';
 import Route from '@ember/routing/route';
 import RouterService from '@ember/routing/router-service';
 import { inject as service } from '@ember/service';
+// eslint-disable-next-line ember/no-mixins
+import ConfirmationMixin from 'ember-onbeforeunload/mixins/confirmation';
 import PreprintProviderModel from 'ember-osf-web/models/preprint-provider';
 import MetaTags, { HeadTagDef } from 'ember-osf-web/services/meta-tags';
 import Theme from 'ember-osf-web/services/theme';
 import requireAuth from 'ember-osf-web/decorators/require-auth';
+import { action, computed } from '@ember/object';
+import PreprintEdit from 'ember-osf-web/preprints/edit/controller';
+import Intl from 'ember-intl/services/intl';
+import Transition from '@ember/routing/-private/transition';
 
 @requireAuth()
-export default class PreprintEditRoute extends Route {
+export default class PreprintEditRoute extends Route.extend(ConfirmationMixin, {}) {
     @service store!: Store;
     @service theme!: Theme;
     @service router!: RouterService;
+    @service intl!: Intl;
     @service metaTags!: MetaTags;
     headTags?: HeadTagDef[];
 
+    // This does NOT work on chrome and I'm going to leave it just in case
+    confirmationMessage = this.intl.t('preprints.submit.action-flow.save-before-exit');
+
     buildRouteInfoMetadata() {
         return {
             osfMetrics: {
@@ -56,4 +66,23 @@ export default class PreprintEditRoute extends Route {
             this.set('headTags', headTags);
         }
     }
+
+    // This tells ember-onbeforeunload's ConfirmationMixin whether or not to stop transitions
+    // This is for when the user leaves the site or does a full app reload
+    @computed('controller.isPageDirty')
+    get isPageDirty() {
+        const controller = this.controller as PreprintEdit;
+        return () => controller.isPageDirty;
+    }
+
+    // This is for when the user leaves the page via the router
+    @action
+    willTransition(transition: Transition) {
+        const controller = this.controller as PreprintEdit;
+        if (controller.isPageDirty) {
+            if (!window.confirm(this.intl.t('preprints.submit.action-flow.save-before-exit'))) {
+                transition.abort();
+            }
+        }
+    }
 }

app/preprints/edit/template.hbs

@@ -3,4 +3,6 @@
     @brand={{this.model.brand}}
     @preprint={{this.model.preprint}}
     @header='preprints.submit.title-edit'
+    @setPageDirty={{this.setPageDirty}}
+    @resetPageDirty={{this.resetPageDirty}}
 />

app/preprints/submit/controller.ts

@@ -0,0 +1,17 @@
+import Controller from '@ember/controller';
+import { action} from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class PreprintSubmit extends Controller {
+    @tracked isPageDirty = false;
+
+    @action
+    setPageDirty() {
+        this.isPageDirty = true;
+    }
+
+    @action
+    resetPageDirty() {
+        this.isPageDirty = false;
+    }
+}

app/preprints/submit/route.ts

@@ -6,15 +6,25 @@ import PreprintProviderModel from 'ember-osf-web/models/preprint-provider';
 import MetaTags, { HeadTagDef } from 'ember-osf-web/services/meta-tags';
 import Theme from 'ember-osf-web/services/theme';
 import requireAuth from 'ember-osf-web/decorators/require-auth';
+// eslint-disable-next-line ember/no-mixins
+import ConfirmationMixin from 'ember-onbeforeunload/mixins/confirmation';
+import { action, computed } from '@ember/object';
+import PreprintSubmit from 'ember-osf-web/preprints/submit/controller';
+import Intl from 'ember-intl/services/intl';
+import Transition from '@ember/routing/-private/transition';
 
 @requireAuth()
-export default class PreprintSubmitRoute extends Route {
+export default class PreprintSubmitRoute extends Route.extend(ConfirmationMixin, {}) {
     @service store!: Store;
+    @service intl!: Intl;
     @service theme!: Theme;
     @service router!: RouterService;
     @service metaTags!: MetaTags;
     headTags?: HeadTagDef[];
 
+    // This does NOT work on chrome and I'm going to leave it just in case
+    confirmationMessage = this.intl.t('preprints.submit.action-flow.save-before-exit');
+
     buildRouteInfoMetadata() {
         return {
             osfMetrics: {
@@ -31,6 +41,7 @@ export default class PreprintSubmitRoute extends Route {
             return {
                 provider,
                 brand: provider.brand.content,
+                displayDialog: this.displayDialog,
             };
         } catch (e) {
 
@@ -51,4 +62,23 @@ export default class PreprintSubmitRoute extends Route {
             this.set('headTags', headTags);
         }
     }
+
+    // This tells ember-onbeforeunload's ConfirmationMixin whether or not to stop transitions
+    // This is for when the user leaves the site or does a full app reload
+    @computed('controller.isPageDirty')
+    get isPageDirty() {
+        const controller = this.controller as PreprintSubmit;
+        return () => controller.isPageDirty;
+    }
+
+    // This is for when the user leaves the page via the router
+    @action
+    willTransition(transition: Transition) {
+        const controller = this.controller as PreprintSubmit;
+        if (controller.isPageDirty) {
+            if (!window.confirm(this.intl.t('preprints.submit.action-flow.save-before-exit'))) {
+                transition.abort();
+            }
+        }
+    }
 }

app/preprints/submit/template.hbs

@@ -3,6 +3,8 @@
         @provider={{this.model.provider}}
         @brand={{this.model.brand}}
         @header='preprints.submit.title-submit'
+        @setPageDirty={{this.setPageDirty}}
+        @resetPageDirty={{this.resetPageDirty}}
     />
 {{else}}
     <LoadingIndicator data-test-loading-indicator @dark={{true}} />

translations/en-us.yml

@@ -1282,6 +1282,7 @@ preprints:
             delete-modal-body: 'Are you sure you want to delete this {singularPreprintWord}? This action CANNOT be undone.'
             success: '{singularPreprintWord} saved.'
             error: 'Error saving {singularPreprintWord}.'
+            save-before-exit: 'Unsaved changes present. Are you sure you want to leave this page?'
     detail:
         abstract: 'Abstract'
         article_doi: 'Peer-reviewed Publication DOI'