Merge 5cf04d0 into cbe5d0a

CenterForOpenScience · Jan 17, 2018 · f8386ff · f8386ff
2 parents cbe5d0a + 5cf04d0
commit f8386ff
Show file tree

Hide file tree

Showing 13 changed files with 223 additions and 66 deletions.
diff --git a/app/components/preprint-status-banner/component.js b/app/components/preprint-status-banner/component.js
@@ -110,7 +110,8 @@ export default Component.extend({
     // Submission form
     initialReviewerComment: '',
     reviewerComment: '',
-    decision: 'accepted',
+    decision: ACCEPTED,
+    decisionValueToggled: false,
 
     reviewsWorkflow: alias('submission.provider.reviewsWorkflow'),
     reviewsCommentsPrivate: alias('submission.provider.reviewsCommentsPrivate'),
@@ -121,6 +122,8 @@ export default Component.extend({
 
     commentExceedsLimit: computed.gt('reviewerComment.length', COMMENT_LIMIT),
 
+    userActivity: computed.or('commentEdited', 'decisionValueToggled'),
+
     commentLengthErrorMessage: computed('reviewerComment', function () {
         const i18n = this.get('i18n');
         return i18n.t('components.preprintStatusBanner.decision.commentLengthError', {
@@ -223,15 +226,12 @@ export default Component.extend({
         return this.get('reviewerComment').trim() !== this.get('initialReviewerComment');
     }),
 
-    decisionChanged: computed('submission.reviewsState', 'decision', function() {
+    decisionChanged: computed('decision', 'submission.reviewsState', function() {
         return this.get('submission.reviewsState') !== this.get('decision');
     }),
 
     btnDisabled: computed('decisionChanged', 'commentEdited', 'saving', 'commentExceedsLimit', function() {
-        if (this.get('saving') || (!this.get('decisionChanged') && !this.get('commentEdited')) || this.get('commentExceedsLimit')) {
-            return true;
-        }
-        return false;
+        return this.get('saving') || (!this.get('decisionChanged') && !this.get('commentEdited')) || this.get('commentExceedsLimit');
     }),
 
     didInsertElement() {
@@ -257,13 +257,18 @@ export default Component.extend({
             this.set('decision', this.get('submission.reviewsState'));
             this.set('reviewerComment', this.get('initialReviewerComment'));
         },
+        decisionToggled() {
+            this.get('setUserEnteredReview')(this.get('decisionChanged'));
+        },
+        commentChanged() {
+            this.get('setUserEnteredReview')(this.get('commentEdited'));
+        },
     },
 
     _handleActions(action) {
         if (action) {
             if (this.get('submission.reviewsState') !== PENDING) {
                 const comment = action.get('comment');
-
                 this.set('initialReviewerComment', comment);
                 this.set('reviewerComment', comment);
                 this.set('decision', this.get('submission.reviewsState'));

diff --git a/app/components/preprint-status-banner/template.hbs b/app/components/preprint-status-banner/template.hbs
@@ -56,20 +56,25 @@
                     <div class="moderator-decision" aria-labelledby="moderator-feedback">
                         <form class="{{if noComment 'no-comment'}}">
                             <label class="decision-option ">
-                                {{radio-button value="accepted" groupValue=decision}}
+                                {{radio-button value="accepted" groupValue=decision changed="decisionToggled"}}
                                 <span class="p-l-sm">
                                     {{t labelAccept}}
                                     <p>{{t acceptExplanation}}</p>
                                 </span>
                             </label>
                             <label class="decision-option">
-                                {{radio-button value="rejected" groupValue=decision}}
+                                {{radio-button value="rejected" groupValue=decision changed="decisionToggled"}}
                                 <span class="p-l-sm">
                                     {{t labelReject}}
                                     <p>{{t rejectExplanation}}</p>
                                 </span>
                             </label>
-                            {{textarea value=reviewerComment rows="8" placeholder=(t commentPlaceholder) class="form-control"}}
+                            {{textarea
+                                key-up=(action "commentChanged")
+                                value=reviewerComment
+                                rows="8" placeholder=(t commentPlaceholder)
+                                class="form-control"
+                            }}
                             {{#if commentExceedsLimit}}
                                 <div class="comment-length-error">
                                     {{commentLengthErrorMessage}}

diff --git a/app/controllers/preprints/provider/preprint-detail.js b/app/controllers/preprints/provider/preprint-detail.js
@@ -37,6 +37,10 @@ export default Controller.extend({
     _activeFile: null,
     chosenFile: null,
 
+    userHasEnteredReview: false,
+    showWarning: false,
+    previousTransition: null,
+
     hasTags: bool('node.tags.length'),
     expandedAbstract: navigator.userAgent.includes('Prerender'),
 
@@ -110,6 +114,14 @@ export default Controller.extend({
                 activeFile: fileItem,
             });
         },
+        leavePage() {
+            const previousTransition = this.get('previousTransition');
+            if (previousTransition) {
+                this.set('userHasEnteredReview', false);
+                this.set('showWarning', false);
+                previousTransition.retry();
+            }
+        },
         submitDecision(trigger, comment, filter) {
             this.toggleProperty('savingAction');
 

diff --git a/app/locales/en/translations.js b/app/locales/en/translations.js
@@ -166,6 +166,14 @@ export default {
             paragraph: 'The project for this paper is available on the OSF.',
             button: 'Visit project',
         },
+        warning: {
+            header: 'Discard your feedback',
+            body: 'Are you sure you want to leave without submitting your feedback? Your feedback will be discarded.',
+            footer: {
+                leave: 'Leave this page',
+                stay: 'Stay on this page',
+            },
+        },
     },
     components: {
         actionFeed: {

diff --git a/app/routes/preprints/provider/preprint-detail.js b/app/routes/preprints/provider/preprint-detail.js
@@ -1,8 +1,12 @@
 import { isArray } from '@ember/array';
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import ConfirmationMixin from 'ember-onbeforeunload/mixins/confirmation';
 
 
-export default Route.extend({
+export default Route.extend(ConfirmationMixin, {
+    theme: service(),
+    currentUser: service(),
 
     model(params) {
         return { preprintId: params.preprint_id };
@@ -29,5 +33,18 @@ export default Route.extend({
                 return this.intermediateTransitionTo('page-not-found');
             }
         },
+        willTransition(transition) {
+            if (this.isPageDirty()) {
+                this.controller.set('showWarning', true);
+                this.controller.set('previousTransition', transition);
+                transition.abort();
+            }
+        },
+    },
+
+    isPageDirty() {
+        // If true, shows a confirmation message when leaving the page
+        // True if the reviewer has any unsaved changes including comment edit or state change.
+        return this.controller.get('userHasEnteredReview');
     },
 });
diff --git a/app/styles/modules/provider/_preprint-detail.scss b/app/styles/modules/provider/_preprint-detail.scss
@@ -138,3 +138,17 @@ ul.comma-list {
     visibility: hidden;
   }
 }
+
+.warning-header {
+  font-size: 20px;
+  padding: 5px 15px 8px 15px;
+
+  a {
+    color: $color-text-gray-dark;
+  }
+}
+
+.setting-reminder {
+  font-size: 14px;
+}
+
diff --git a/app/templates/preprints/provider/preprint-detail.hbs b/app/templates/preprints/provider/preprint-detail.hbs
@@ -20,7 +20,7 @@
     {{#if fetchData.isRunning}}
         <div class="preprint-status-component preprint-status-component--skeleton"></div>
     {{else}}
-        {{preprint-status-banner submission=preprint saving=savingAction submitDecision=(action 'submitDecision')}}
+        {{preprint-status-banner submission=preprint saving=savingAction setUserEnteredReview=(action (mut userHasEnteredReview)) submitDecision=(action 'submitDecision')}}
     {{/if}}
 
     <div class="view-page">
@@ -161,4 +161,14 @@
         </div>
     </div>
 
+    {{#bs-modal open=showWarning onHide=(action (mut showWarning false)) as |modal|}}
+        {{#modal.header}}
+            <div class="warning-header"><i class="fa fa-exclamation-triangle"></i> {{t 'content.warning.header'}}</div>
+        {{/modal.header}}
+        {{#modal.body}}<div class="warning-body">{{t 'content.warning.body'}}</div>{{/modal.body}}
+        {{#modal.footer}}
+            {{#bs-button onClick=(action modal.close) type="info"}}{{t 'content.warning.footer.stay'}}{{/bs-button}}
+            {{#bs-button onClick=(action 'leavePage')}}{{t 'content.warning.footer.leave'}}{{/bs-button}}
+        {{/modal.footer}}
+    {{/bs-modal}}
 </div>
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "ember-i18n": "5.0.2",
     "ember-load-initializers": "^1.0.0",
     "ember-moment": "^7.4.1",
+    "ember-onbeforeunload": "^1.1.2",
     "ember-parachute": "^0.3.5",
     "ember-radio-button": "^1.1.1",
     "ember-resolver": "^4.0.0",

diff --git a/tests/integration/components/preprint-status-banner/component-test.js b/tests/integration/components/preprint-status-banner/component-test.js
@@ -9,6 +9,7 @@ moduleForComponent('preprint-status-banner', 'Integration | Component | preprint
 
 test('it renders preprint-status-banner', function(assert) {
     this.set('submitDecision', () => {});
+    this.set('setUserEnteredReview', () => {});
     this.set('savingAction', false);
     this.set('submission', {
         dateLastTransitioned: '2017-10-27T19:14:27.816946Z',
@@ -17,7 +18,7 @@ test('it renders preprint-status-banner', function(assert) {
         provider: { reviewsWorkflow: 'pre-moderation' },
         node: { contributors: [{ users: { fullName: 'Mr. Ping' } }, { users: { fullName: 'Mantis' } }] },
     });
-    this.render(hbs`{{preprint-status-banner submission=submission saving=savingAction submitDecision=submitDecision}}`);
+    this.render(hbs`{{preprint-status-banner submission=submission saving=savingAction setUserEnteredReview=setUserEnteredReview submitDecision=submitDecision}}`);
     return wait()
         .then(() => {
             assert.ok(this.$('.flex-container').length);

diff --git a/tests/unit/components/preprint-file-browser-test.js b/tests/unit/components/preprint-file-browser-test.js
@@ -0,0 +1,91 @@
+import { moduleForComponent } from 'ember-qunit';
+import test from 'ember-sinon-qunit/test-support/test';
+
+
+moduleForComponent('preprint-file-browser', 'Unit | Component | preprint file browser', {
+    unit: true,
+    needs: [
+        'model:node',
+        'model:preprint',
+        'model:preprint-provider',
+        'model:file-provider',
+        'model:file',
+    ],
+});
+
+test('hasPrev computed property', function(assert) {
+    const component = this.subject();
+    assert.ok(component);
+
+    component.set('pageNumber', 0);
+    assert.ok(!component.get('hasPrev'));
+
+    component.set('pageNumber', 4);
+    assert.ok(component.get('hasPrev'));
+});
+
+test('hasNext computed property', function(assert) {
+    const component = this.subject();
+    assert.ok(component);
+    component.set('pageNumber', 1);
+
+    component.set('files', ['f1', 'f2', 'f3']);
+    assert.ok(!component.get('hasNext'));
+
+    component.set('files', ['f1', 'f2', 'f3', 'f4', 'f5', 'f6', 'f7']);
+    assert.ok(!component.get('hasNext'));
+});
+
+test('fileIsPrimary computed property', function(assert) {
+    const component = this.subject();
+    assert.ok(component);
+    component.set('selectedFile', 'f1');
+
+    component.set('primaryFile', 'f1');
+    assert.ok(component.get('fileIsPrimary'));
+});
+
+test('page computed property', function(assert) {
+    const component = this.subject();
+    assert.ok(component);
+    component.set('pageNumber', 1);
+
+    component.set('files', ['f1', 'f2', 'f3', 'f4', 'f5', 'f6', 'f7']);
+    assert.deepEqual(component.get('page'), ['f7']);
+
+    component.set('pageNumber', 2);
+    assert.deepEqual(component.get('page'), []);
+});
+
+test('didReceiveAttrs function', function(assert) {
+    const component = this.subject();
+    assert.ok(component);
+    component.set('pageNumber', 1);
+
+    component.set('selectedFile', 'f1');
+
+    component.set('primaryFile', 'f2');
+    assert.ok(component.get('selectedFile') !== component.get('primaryFile'));
+
+    component.didReceiveAttrs();
+    assert.strictEqual(component.get('selectedFile'), component.get('primaryFile'));
+});
+
+test('page action', function(assert) {
+    const component = this.subject();
+    assert.ok(component);
+    component.set('pageNumber', 1);
+
+    component.send('page', 5);
+    assert.strictEqual(component.get('pageNumber'), 6);
+});
+
+test('selectFile action', function(assert) {
+    const component = this.subject();
+    assert.ok(component);
+
+    component.set('selectedFile', 'f1');
+    component.send('selectFile', 'f2');
+
+    assert.strictEqual(component.get('selectedFile'), 'f2');
+});
diff --git a/tests/unit/components/preprint-status-banner-test.js b/tests/unit/components/preprint-status-banner-test.js
@@ -298,3 +298,15 @@ test('commentLengthErrorMessage computed property', function(assert) {
     component.set('reviewerComment', 'test comment for error message'.repeat(2000));
     assert.strictEqual(component.get('commentLengthErrorMessage'), 'Comment is 5535 character(s) too long (maximum is 65535).');
 });
+
+test('userActivity computed property', function(assert) {
+    const component = this.subject();
+
+    component.set('commentEdited', true);
+    component.set('decisionChanged', true);
+    assert.ok(component.get('userActivity'));
+    component.set('decisionChanged', false);
+    assert.ok(component.get('userActivity'));
+    component.set('commentEdited', false);
+    assert.ok(!component.get('userActivity'));
+});
diff --git a/tests/unit/controllers/preprints/provider/preprint-detail-test.js b/tests/unit/controllers/preprints/provider/preprint-detail-test.js
@@ -287,12 +287,6 @@ test('fileDownloadURL computed property', function (assert) {
     const ctrl = this.subject();
 
     run(() => {
-        const origin = 'http://localhost:4200';
-
-        const window = { location: { origin } };
-
-        ctrl.set('window', window);
-
         const node = this.store.createRecord('node', {
             description: 'test description',
         });
@@ -302,6 +296,26 @@ test('fileDownloadURL computed property', function (assert) {
         ctrl.setProperties({ preprint });
         ctrl.set('preprint.id', '6gtu');
 
-        assert.strictEqual(ctrl.get('fileDownloadURL'), 'http://localhost:4201/6gtu/download');
+        const { location: { origin } } = window;
+
+        assert.strictEqual(ctrl.get('fileDownloadURL'), `${origin}/6gtu/download`);
     });
 });
+
+test('leavePage action', function (assert) {
+    const ctrl = this.subject();
+
+    ctrl.send('leavePage');
+    assert.ok(!ctrl.get('showWarning'));
+    assert.ok(!ctrl.get('userHasEnteredReview'));
+
+    const stubTransition = { retry() {} };
+    const stub = this.stub(stubTransition, 'retry');
+    ctrl.set('previousTransition', stubTransition);
+    ctrl.set('userHasEnteredReview', true);
+    ctrl.set('showWarning', true);
+    ctrl.send('leavePage');
+    assert.ok(!ctrl.get('showWarning'));
+    assert.ok(!ctrl.get('userHasEnteredReview'));
+    assert.ok(stub.calledOnce);
+});