[Feature] Changes needed for reviews

app/components/confirm-share-preprint.js

@@ -14,6 +14,8 @@ import Analytics from 'ember-osf/mixins/analytics';
  *  isOpen=showModalSharePreprint
  *  shareButtonDisabled=shareButtonDisabled
  *  savePreprint=(action 'savePreprint')
+ *  title=title
+ *  buttonLabel=buttonLabel
  *}}
  * ```
  * @class confirm-share-preprint

app/components/preprint-navbar-branded.js

@@ -23,6 +23,8 @@ import config from 'ember-get-config';
 export default Ember.Component.extend(OSFAgnosticAuthControllerMixin, Analytics, {
     session: Ember.inject.service(),
     theme: Ember.inject.service(),
+    currentUser: Ember.inject.service(),
+
     tagName: 'nav',
     classNames: ['navbar', 'branded-navbar', 'preprint-navbar'],
     host: config.OSF.url,

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

@@ -0,0 +1,104 @@
+import Ember from 'ember';
+
+const PENDING = 'pending';
+const ACCEPTED = 'accepted';
+const REJECTED = 'rejected';
+
+const PRE_MODERATION = 'pre-moderation';
+const POST_MODERATION = 'post-moderation';
+
+const ICONS = {
+    [PENDING]: 'fa-hourglass-o',
+    [ACCEPTED]: 'fa-check-circle-o',
+    [REJECTED]: 'fa-times-circle-o'
+};
+
+const STATUS = {
+    [PENDING]: 'components.preprint-status-banner.pending',
+    [ACCEPTED]: 'components.preprint-status-banner.accepted',
+    [REJECTED]: 'components.preprint-status-banner.rejected'
+};
+
+const MESSAGE = {
+    [PRE_MODERATION]: 'components.preprint-status-banner.message.pending_pre',
+    [POST_MODERATION]: 'components.preprint-status-banner.message.pending_post',
+    [ACCEPTED]: 'components.preprint-status-banner.message.accepted',
+    [REJECTED]: 'components.preprint-status-banner.message.rejected'
+};
+
+const WORKFLOW = {
+    [PRE_MODERATION]: 'global.pre_moderation',
+    [POST_MODERATION]: 'global.post_moderation'
+};
+
+const CLASS_NAMES = {
+    [PRE_MODERATION]: 'preprint-status-pending-pre',
+    [POST_MODERATION]: 'preprint-status-pending-post',
+    [ACCEPTED]: 'preprint-status-accepted',
+    [REJECTED]: 'preprint-status-rejected'
+};
+
+export default Ember.Component.extend({
+    i18n: Ember.inject.service(),
+    theme: Ember.inject.service(),
+
+    // translations
+    labelModeratorFeedback: 'components.preprint-status-banner.feedback.moderator_feedback',
+    moderator: 'components.preprint-status-banner.feedback.moderator',
+    feedbackBaseMessage: 'components.preprint-status-banner.feedback.base',
+    baseMessage: 'components.preprint-status-banner.message.base',
+
+    classNames: ['preprint-status-component'],
+    classNameBindings: ['getClassName'],
+
+    getClassName: Ember.computed('submission.provider.reviewsWorkflow', 'submission.reviewsState', function() {
+        return this.get('submission.reviewsState') === PENDING ?
+            CLASS_NAMES[this.get('submission.provider.reviewsWorkflow')] :
+            CLASS_NAMES[this.get('submission.reviewsState')];
+    }),
+
+    didReceiveAttrs() {
+        if (!this.get('submission.provider.reviewsCommentsPrivate')) {
+            this.get('submission.actions').then(actions => {
+                let firstAction = actions.toArray()[0];
+                this.set('reviewerComment', firstAction.get('comment'));
+                firstAction.get('creator').then(user => {
+                    this.set('reviewerName', user.get('fullName'));
+                })
+            });
+        }
+    },
+
+    reviewerComment:'',
+    reviewerName: '',
+
+    bannerContent: Ember.computed('statusExplanation', 'workflow', function() {
+        let tName = this.get('theme.isProvider') ?
+            this.get('theme.provider.name') :
+            this.get('i18n').t('global.brand_name');
+
+        let tWorkflow = this.get('i18n').t(this.get('workflow'));
+        let tStatusExplanation = this.get('i18n').t(this.get('statusExplanation'));
+
+        return `${this.get('i18n').t(this.get('baseMessage'), {name: tName, reviewsWorkflow: tWorkflow})} ${tStatusExplanation}.`;
+    }),
+
+    statusExplanation: Ember.computed('submission.provider.reviewsWorkflow', 'submission.reviewsState', function() {
+        return this.get('submission.reviewsState') === PENDING ?
+            MESSAGE[this.get('submission.provider.reviewsWorkflow')] :
+            MESSAGE[this.get('submission.reviewsState')];
+    }),
+
+    status: Ember.computed('submission.reviewsState', function() {
+        return STATUS[this.get('submission.reviewsState')];
+    }),
+
+    icon: Ember.computed('submission.reviewsState', function() {
+        return ICONS[this.get('submission.reviewsState')];
+    }),
+
+    workflow: Ember.computed('submission.provider.reviewsWorkflow', function () {
+        return WORKFLOW[this.get('submission.provider.reviewsWorkflow')];
+    }),
+
+});

app/components/preprint-status-banner/template.hbs

@@ -0,0 +1,40 @@
+<div id="preprint-status" class="container p-md">
+    <div class="flex-container">
+        {{#if submission.provider.isPending}}
+            Loading...
+        {{else}}
+            <div class="status-explanation">
+                <i class="fa {{icon}} status-icon" aria-hidden="true"></i>
+                <strong>{{t status}}:</strong>
+                <span>{{bannerContent}}</span>
+            </div>
+            {{#if (and reviewerComment (not submission.provider.reviewsCommentsPrivate))}}
+                <div class="dropdown reviewer-feedback">
+                    <button class="btn btn-default dropdown-toggle feedback-btn" type="button" data-toggle="dropdown">
+                        {{t labelModeratorFeedback}} <i class="fa fa-caret-down" aria-hidden="true"></i>
+                    </button>
+                    <div class="dropdown-menu">
+                        <div class="feedback-header">
+                            <span id="moderator-feedback">{{t labelModeratorFeedback}}</span>
+                            <a role="button" aria-label="Close" href="#" class="dropdown-toggle" data-toggle="dropdown">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                        <div class="status p-md">
+                            <strong>{{t status}}</strong>
+                            <div>{{t feedbackBaseMessage}} {{t statusExplanation}}.</div>
+                        </div>
+                        <div class="moderator-comment" aria-labelledby="moderator-feedback">
+                            <p>{{reviewerComment}}</p>
+                            {{#if (not submission.provider.reviewsCommentsAnonymous)}}
+                                <div>{{reviewerName}}</div>
+                            {{/if}}
+                            {{if theme.isProvider theme.provider.name (t "global.brand_name")}} {{t moderator}}
+                        </div>
+                        <div class="feedback-footer p-md"></div>
+                    </div>
+                </div>
+            {{/if}}
+        {{/if}}
+    </div>
+</div>

app/controllers/content/index.js

@@ -42,6 +42,12 @@ function queryStringify(queryParams) {
     return query.join('&');
 }
 
+const DATE_LABEL = {
+    created: 'content.date_label.created_on',
+    submitted: 'content.date_label.submitted_on'
+}
+const PRE_MODERATION = 'pre-moderation';
+
 /**
  * @module ember-preprints
  * @submodule controllers
@@ -60,6 +66,18 @@ export default Ember.Controller.extend(Analytics, {
     queryParams: {
         chosenFile: 'file'
     },
+
+    dateLabel: Ember.computed('model.provider.reviewsWorkflow', function() {
+        return this.get('model.provider.reviewsWorkflow') === PRE_MODERATION ?
+            DATE_LABEL['submitted'] :
+            DATE_LABEL['created'];
+    }),
+    relevantDate: Ember.computed('model.provider.reviewsWorkflow', function() {
+        return this.get('model.provider.reviewsWorkflow') ?
+            this.get('model.dateLastTransitioned') :
+            this.get('model.dateCreated');
+    }),
+
     isAdmin: Ember.computed('node', function() {
         // True if the current user has admin permissions for the node that contains the preprint
         return (this.get('node.currentUserPermissions') || []).includes(permissions.ADMIN);