Merge 6d56437 into 76aeec7

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [Unreleased]
 ### Added
 - Custom dimensions to `trackPage` for Google Analytics
+- Tombstone for withdrawn preprints
+- Withdrawn section to moderation list
+- Ability to withdraw from `preprint-detail` page
 
 ### Fixed
 - Use `name` field for contributors on preprint-detail page

app/components/moderation-list-row/component.js

@@ -15,6 +15,11 @@ const submittedOnLabel = {
     ltDay: 'components.moderationListRow.submission.submitted',
 };
 
+const withdrawnOnLabel = {
+    gtDay: 'components.moderationListRow.submission.withdrawnOn',
+    ltDay: 'components.moderationListRow.submission.withdrawn',
+};
+
 const ACTION_LABELS = Object.freeze({
     [ACCEPTED]: {
         gtDay: 'components.moderationListRow.submission.acceptedOn',
@@ -74,11 +79,26 @@ export default Component.extend({
         return i18n.t(labels, { timeDate: submitDate });
     }),
 
+    // translations for withdrawn on label
+    withdrawnOnLabel: computed('submission.dateWithdrawn', function() {
+        const i18n = this.get('i18n');
+        const [withdrawnDate, gtDayWithdrawn] = this.formattedDateLabel(this.get('submission.dateWithdrawn'));
+        const dayValue = gtDayWithdrawn ? 'gtDay' : 'ltDay';
+        const labels = withdrawnOnLabel[dayValue];
+        return i18n.t(labels, { timeDate: withdrawnDate, moderatorName: this.get('latestActionCreator') });
+    }),
+
+    icon: computed('submission', function() {
+        const type = this.get('submission.reviewsState');
+        return this.get(`iconClass.${type}`);
+    }),
+
     didReceiveAttrs() {
         this.iconClass = {
-            accepted: 'fa-check-circle-o accepted',
-            pending: 'fa-hourglass-o pending',
-            rejected: 'fa-times-circle-o rejected',
+            accepted: ['fa-check-circle-o accepted'],
+            pending: ['fa-hourglass-o pending'],
+            rejected: ['fa-times-circle-o rejected'],
+            withdrawn: ['fa-circle-o rejected', 'fa-minus rejected'],
         };
         this.get('fetchData').perform();
     },

app/components/moderation-list-row/styles.scss

@@ -25,6 +25,22 @@
     color: $color-action-accept;
 }
 
+.withdrawn {
+    color: $color-action-reject;
+
+    &:nth-child(2) {
+        font-size: 13px;
+        padding-left: 24px;
+        line-height: 2.5em;
+
+        @media screen and (max-width: 731px) {
+            font-size: 10px;
+            padding-left: 22px;
+            line-height: inherit;
+        }
+    }
+}
+
 .submission-info {
     padding: 10px 20px;
     color: $color-text-gray-dark;

app/components/moderation-list-row/template.hbs

@@ -3,20 +3,28 @@
 {{else}}
     {{#link-to 'preprints.provider.preprint-detail' theme.id submission.id}}
         <div data-status={{submission.reviewsState}} local-class="flex-container">
-            <i class="fa fa-lg {{get iconClass submission.reviewsState}}" local-class="{{get iconClass submission.reviewsState}} status-icon"></i>
+            <span class="fa-stack">
+                {{#each icon as |class|}}
+                    <i class="fa fa-lg {{class}} fa-stack-1x" local-class="{{submission.reviewsState}} status-icon"></i>
+                {{/each}}
+            </span>
             <div title={{submission.title}} local-class="submission-info">
                 <div local-class="submission-title">{{submission.title}}</div>
                 <div local-class="submission-body">
                     <div>
-                        {{submittedOnLabel}}
-                        {{#each firstContributors as |contributor| ~}}
-                            <li>{{contributor.users.fullName}}</li>
-                        {{/each}}
-                        {{#if (gt additionalContributors 0)}}
-                            + {{additionalContributors}}
+                        {{#if (not-eq submission.reviewsState 'withdrawn')}}
+                            {{submittedOnLabel}}
+                            {{#each firstContributors as |contributor| ~}}
+                                <li>{{contributor.users.fullName}}</li>
+                            {{/each}}
+                            {{#if (gt additionalContributors 0)}}
+                                + {{additionalContributors}}
+                            {{/if}}
+                        {{else}}
+                            {{withdrawnOnLabel}}
                         {{/if}}
                     </div>
-                    {{#if (not-eq submission.reviewsState 'pending')}}
+                    {{#if (and (not-eq submission.reviewsState 'pending') (not-eq submission.reviewsState 'withdrawn'))}}
                         <div>{{reviewedOnLabel}}</div>
                     {{/if}}
                 </div>

app/components/moderation-list/component.js

@@ -33,19 +33,24 @@ export default Component.extend({
         this.set('statusButtons', [
             {
                 status: 'pending',
-                iconClass: 'fa-hourglass-o icon-pending',
+                iconClass: ['fa-hourglass-o icon-pending'],
                 labelKey: 'components.moderationList.pending',
             },
             {
                 status: 'accepted',
-                iconClass: 'fa-check-circle-o icon-accepted',
+                iconClass: ['fa-check-circle-o icon-accepted'],
                 labelKey: 'components.moderationList.accepted',
             },
             {
                 status: 'rejected',
-                iconClass: 'fa-times-circle-o icon-rejected',
+                iconClass: ['fa-times-circle-o icon-rejected'],
                 labelKey: 'components.moderationList.rejected',
             },
+            {
+                status: 'withdrawn',
+                iconClass: ['fa-circle-o icon-accepted', 'fa-minus icon-withdrawn'],
+                labelKey: 'components.moderationList.withdrawn',
+            },
         ]);
 
         this.set('sortOptions', [

app/components/moderation-list/styles.scss

@@ -7,15 +7,15 @@
         outline: none;
         padding: 6px 0;
 
-        @media screen and (max-width: $screen-small-tablet) {
+        @media screen and (max-width: 731px) {
             font-size: 16px;
         }
 
-        @media screen and (max-width: $screen-medium-small) {
+        @media screen and (max-width: 543px) {
             font-size: 14px;
         }
 
-        @media screen and (max-width: $screen-xs) {
+        @media screen and (max-width: 488px) {
             display: block;
         }
     }
@@ -35,7 +35,7 @@
     border: 1px solid $color-border;
     padding: 10px 20px;
 
-    @media screen and (max-width: $screen-small-tablet) {
+    @media screen and (max-width: 731px) {
         .moderation-list-heading {
             padding-left: 20px;
         }
@@ -48,20 +48,40 @@
     :global(.icon-rejected) {
         -webkit-text-stroke: 1px $color-bg-gray-light;
     }
+
+    :global(.icon-withdrawn) {
+        -webkit-text-stroke: 1px $color-bg-gray-light;
+    }
+
+    :global(.fa-stack) {
+        line-height: 0.8em;
+        height: 1em;
+        width: 1em;
+    }
+
+    :global(.fa-minus) {
+        font-size: 14px;
+        line-height: 1.25em;
+
+        @media screen and (max-width: 731px) {
+            font-size: 10px;
+            line-height: inherit;
+        }
+    }
 
     :global(.dropdown-toggle) {
         color: $color-text-gray-dark;
         text-decoration: none;
 
-        @media screen and (max-width: $screen-xs) {
+        @media screen and (max-width: 488px) {
             margin-top: -2.3em;
         }
     }
 
     :global(.dropdown-menu) {
         background: $color-bg-gray-light;
 
-        @media screen and (max-width: $screen-xs) {
+        @media screen and (max-width: 488px) {
             margin-top: -0.7em;
         }
 
@@ -88,7 +108,7 @@
     margin: 0;
     margin-right: 20px;
 
-    @media screen and (max-width: $screen-small-tablet) {
+    @media screen and (max-width: 731px) {
         margin-right: 1px;
     }
 }

app/components/moderation-list/template.hbs

@@ -5,8 +5,12 @@
                 <div local-class="reviews-list-heading">
                     {{#each statusButtons as |statusButton|}}
                         <button class="btn" local-class="reviews-btn-filter {{if (eq status statusButton.status) 'active-filter'}}"
-                                {{action statusChanged statusButton.status}}>
-                            <i class="fa {{statusButton.iconClass}}"></i>
+                            {{action statusChanged statusButton.status}}>
+                            <span class="fa-stack">
+                                {{#each statusButton.iconClass as |class|}}
+                                    <i class="fa {{class}} fa-stack-1x"></i>
+                                {{/each}}
+                            </span>
                             <span>{{get theme.reviewableStatusCounts statusButton.status}}</span>
                             {{t statusButton.labelKey}}
                         </button>

app/components/preprint-status-banner/component.js

@@ -8,36 +8,41 @@ import latestAction from 'reviews/utils/latest-action';
 const PENDING = 'pending';
 const ACCEPTED = 'accepted';
 const REJECTED = 'rejected';
+const WITHDRAWN = 'withdrawn';
 
 const PRE_MODERATION = 'pre-moderation';
 const POST_MODERATION = 'post-moderation';
 
 const COMMENT_LIMIT = 65535;
 
 const ICONS = {
-    [PENDING]: 'fa-hourglass-o',
-    [ACCEPTED]: 'fa-check-circle-o',
-    [REJECTED]: 'fa-times-circle-o',
+    [PENDING]: ['fa-hourglass-o'],
+    [ACCEPTED]: ['fa-check-circle-o'],
+    [REJECTED]: ['fa-times-circle-o'],
+    [WITHDRAWN]: ['fa-circle-o', 'fa-minus inner-icon'],
 };
 
 const STATUS = {
     [PENDING]: 'components.preprintStatusBanner.pending',
     [ACCEPTED]: 'components.preprintStatusBanner.accepted',
     [REJECTED]: 'components.preprintStatusBanner.rejected',
+    [WITHDRAWN]: 'components.preprintStatusBanner.withdrawn',
 };
 
 const MESSAGE = {
     [PRE_MODERATION]: 'components.preprintStatusBanner.message.pendingPre',
     [POST_MODERATION]: 'components.preprintStatusBanner.message.pendingPost',
     [ACCEPTED]: 'components.preprintStatusBanner.message.accepted',
     [REJECTED]: 'components.preprintStatusBanner.message.rejected',
+    [WITHDRAWN]: 'components.preprintStatusBanner.message.withdrawn',
 };
 
 const CLASS_NAMES = {
     [PRE_MODERATION]: 'preprint-status-pending-pre',
     [POST_MODERATION]: 'preprint-status-pending-post',
     [ACCEPTED]: 'preprint-status-accepted',
     [REJECTED]: 'preprint-status-rejected',
+    [WITHDRAWN]: 'preprint-status-withdrawn',
 };
 
 const SETTINGS = {
@@ -79,12 +84,16 @@ const DECISION_EXPLANATION = {
         [PRE_MODERATION]: 'components.preprintStatusBanner.decision.reject.pre',
         [POST_MODERATION]: 'components.preprintStatusBanner.decision.reject.post',
     },
+    withdrawn: {
+        [POST_MODERATION]: 'components.preprintStatusBanner.decision.withdrawn.post',
+    },
 };
 
 const RECENT_ACTIVITY = {
     [PENDING]: 'components.preprintStatusBanner.recentActivity.pending',
     [ACCEPTED]: 'components.preprintStatusBanner.recentActivity.accepted',
     [REJECTED]: 'components.preprintStatusBanner.recentActivity.rejected',
+    [WITHDRAWN]: 'components.preprintStatusBanner.recentActivity.withdrawn',
     automatic: {
         [PENDING]: 'components.preprintStatusBanner.recentActivity.automatic.pending',
         [ACCEPTED]: 'components.preprintStatusBanner.recentActivity.automatic.accepted',
@@ -100,7 +109,6 @@ export default Component.extend({
     feedbackBaseMessage: 'components.preprintStatusBanner.decision.base',
     commentPlaceholder: 'components.preprintStatusBanner.decision.commentPlaceholder',
     labelAccept: 'components.preprintStatusBanner.decision.accept.label',
-    labelReject: 'components.preprintStatusBanner.decision.reject.label',
 
     classNames: ['preprint-status-component'],
 
@@ -124,6 +132,30 @@ export default Component.extend({
 
     userActivity: computed.or('commentEdited', 'decisionValueToggled'),
 
+    labelDate: computed('submission', function() {
+        return this.get('submission.dateWithdrawn') ?
+            this.get('submission.dateWithdrawn') :
+            this.get('submission.dateLastTransitioned');
+    }),
+
+    labelDecision: computed('submission', function() {
+        return this.get('submission.isPublished') ?
+            'components.preprintStatusBanner.decision.withdrawn.label' :
+            'components.preprintStatusBanner.decision.reject.label';
+    }),
+
+    radioDecision: computed('submission', function() {
+        return this.get('submission.isPublished') ?
+            'withdrawn' :
+            'rejected';
+    }),
+
+    isDisabled: computed('latestAction', 'submission.reviewActions.isPending', function() {
+        const reason = this.get('latestAction.comment');
+        const type = this.get('submission.reviewsState');
+        return ((type === 'withdrawn' && !reason) || this.get('submission.reviewActions.isPending'));
+    }),
+
     commentLengthErrorMessage: computed('reviewerComment', function () {
         const i18n = this.get('i18n');
         return i18n.t('components.preprintStatusBanner.decision.commentLengthError', {
@@ -163,7 +195,10 @@ export default Component.extend({
     }),
 
     latestAction: computed('submission.reviewActions.[]', function() {
-        return latestAction(this.get('submission.reviewActions'));
+        if (this.get('submission.reviewActions.[]')) {
+            return latestAction(this.get('submission.reviewActions'));
+        }
+        return null;
     }),
 
     noComment: computed('reviewerComment', function() {
@@ -197,16 +232,25 @@ export default Component.extend({
     acceptExplanation: computed('reviewsWorkflow', function() {
         return DECISION_EXPLANATION.accept[this.get('reviewsWorkflow')];
     }),
+
     rejectExplanation: computed('reviewsWorkflow', function() {
-        return DECISION_EXPLANATION.reject[this.get('reviewsWorkflow')];
+        return this.get('reviewsWorkflow') === 'pre-moderation' ?
+            DECISION_EXPLANATION.reject[this.get('reviewsWorkflow')] :
+            DECISION_EXPLANATION.withdrawn[this.get('reviewsWorkflow')];
     }),
 
     labelDecisionDropdown: computed('submission.reviewsState', function() {
+        if (this.get('submission.reviewsState') === 'withdrawn') {
+            return 'components.preprintStatusBanner.decision.withdrawalReason';
+        }
         return this.get('submission.reviewsState') === PENDING ?
             'components.preprintStatusBanner.decision.makeDecision' :
             'components.preprintStatusBanner.decision.modifyDecision';
     }),
     labelDecisionHeader: computed('submission.reviewsState', function() {
+        if (this.get('submission.reviewsState') === 'withdrawn') {
+            return 'components.preprintStatusBanner.decision.header.withdrawalReason';
+        }
         return this.get('submission.reviewsState') === PENDING ?
             'components.preprintStatusBanner.decision.header.submitDecision' :
             'components.preprintStatusBanner.decision.header.modifyDecision';
@@ -247,7 +291,10 @@ export default Component.extend({
             if (this.get('submission.reviewsState') !== PENDING && (this.get('commentEdited') && !this.get('decisionChanged'))) {
                 trigger = 'edit_comment';
             } else {
-                trigger = this.get('decision') === ACCEPTED ? 'accept' : 'reject';
+                const actionType = this.get('reviewsWorkflow') === 'pre-moderation' ?
+                    'reject' :
+                    'withdraw';
+                trigger = this.get('decision') === ACCEPTED ? 'accept' : actionType;
             }
 
             const comment = this.get('reviewerComment').trim();