FEATURE: Show edit indicator on review queue

If a flagged post has edits, show the pencil icon and pop up the history window when clicked.
discourse · May 3, 2019 · 15c9b00 · 15c9b00 · discoursebot · May 3, 2019
1 parent 5f78bbe
commit 15c9b00
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 54 deletions.
diff --git a/app/assets/javascripts/discourse/components/reviewable-flagged-post.js.es6 b/app/assets/javascripts/discourse/components/reviewable-flagged-post.js.es6
@@ -0,0 +1,33 @@
+import computed from "ember-addons/ember-computed-decorators";
+import { longDate } from "discourse/lib/formatter";
+import { historyHeat } from "discourse/widgets/post-edits-indicator";
+import showModal from "discourse/lib/show-modal";
+
+export default Ember.Component.extend({
+  hasEdits: Ember.computed.gt("reviewable.version", 1),
+
+  @computed("reviewable.post_updated_at")
+  historyClass(updatedAt) {
+    return historyHeat(this.siteSettings, new Date(updatedAt));
+  },
+
+  @computed("reviewable.post_updated_at")
+  editedDate(updatedAt) {
+    return longDate(updatedAt);
+  },
+
+  actions: {
+    showEditHistory() {
+      let postId = this.get("reviewable.post_id");
+      this.store.find("post", postId).then(post => {
+        let historyController = showModal("history", {
+          model: post,
+          modalClass: "history-modal"
+        });
+        historyController.refresh(postId, "latest");
+        historyController.set("post", post);
+        historyController.set("topicController", null);
+      });
+    }
+  }
+});
diff --git a/app/assets/javascripts/discourse/controllers/history.js.es6 b/app/assets/javascripts/discourse/controllers/history.js.es6
@@ -152,9 +152,14 @@ export default Ember.Controller.extend(ModalFunctionality, {
     return !prevHidden && this.currentUser && this.currentUser.get("staff");
   },
 
-  @computed("model.last_revision", "model.current_revision", "model.can_edit")
-  displayEdit(lastRevision, currentRevision, canEdit) {
-    return canEdit && lastRevision === currentRevision;
+  @computed(
+    "model.last_revision",
+    "model.current_revision",
+    "model.can_edit",
+    "topicController"
+  )
+  displayEdit(lastRevision, currentRevision, canEdit, topicController) {
+    return !!(canEdit && topicController && lastRevision === currentRevision);
   },
 
   @computed("model.wiki")

diff --git a/app/assets/javascripts/discourse/routes/topic.js.es6 b/app/assets/javascripts/discourse/routes/topic.js.es6
@@ -118,14 +118,13 @@ const TopicRoute = Discourse.Route.extend({
     },
 
     showHistory(model, revision) {
-      showModal("history", { model });
-      const historyController = this.controllerFor("history");
-
+      let historyController = showModal("history", {
+        model,
+        modalClass: "history-modal"
+      });
       historyController.refresh(model.get("id"), revision || "latest");
       historyController.set("post", model);
       historyController.set("topicController", this.controllerFor("topic"));
-
-      this.controllerFor("modal").set("modalClass", "history-modal");
     },
 
     showGrantBadgeModal() {

diff --git a/app/assets/javascripts/discourse/templates/components/reviewable-flagged-post.hbs b/app/assets/javascripts/discourse/templates/components/reviewable-flagged-post.hbs
@@ -1,10 +1,20 @@
-{{reviewable-topic-link reviewable=reviewable tagName=''}}
+<div class='flagged-post-header'>
+  {{reviewable-topic-link reviewable=reviewable tagName=''}}
+  {{#if hasEdits}}
+    <a {{action "showEditHistory"}}
+      class="has-edits {{historyClass}}"
+      title="{{i18n "post.last_edited_on"}} {{editedDate}}">
+        {{d-icon "pencil-alt"}}
+    </a>
+  {{/if}}
+</div>
 
 <div class='post-contents-wrapper'>
   {{reviewable-created-by user=reviewable.target_created_by tagName=''}}
   <div class='post-contents'>
     {{reviewable-created-by-name user=reviewable.target_created_by tagName=''}}
     <div class='post-body'>
+
       {{#if reviewable.blank_post}}
         <p>{{i18n "review.deleted_post"}}</p>
       {{else}}

diff --git a/app/assets/javascripts/discourse/templates/modal/history.hbs b/app/assets/javascripts/discourse/templates/modal/history.hbs
@@ -122,23 +122,25 @@
     {{/links-redirect}}
   </div>
 {{/d-modal-body}}
-<div class="modal-footer">
-    {{#if displayRevert}}
-      {{d-button action=(action "revertToVersion") icon="undo" label="post.revisions.controls.revert" class="btn-danger" disabled=loading}}
-    {{/if}}
+{{#if topicController}}
+  <div class="modal-footer">
+      {{#if displayRevert}}
+        {{d-button action=(action "revertToVersion") icon="undo" label="post.revisions.controls.revert" class="btn-danger" disabled=loading}}
+      {{/if}}
 
-    {{#if displayHide}}
-      {{d-button action=(action "hideVersion") icon="far-eye-slash" label="post.revisions.controls.hide" class="btn-danger" disabled=loading}}
-    {{/if}}
+      {{#if displayHide}}
+        {{d-button action=(action "hideVersion") icon="far-eye-slash" label="post.revisions.controls.hide" class="btn-danger" disabled=loading}}
+      {{/if}}
 
-    {{#if displayShow}}
-      {{d-button action=(action "showVersion") icon="far-eye" label="post.revisions.controls.show" class="btn-default" disabled=loading}}
-    {{/if}}
+      {{#if displayShow}}
+        {{d-button action=(action "showVersion") icon="far-eye" label="post.revisions.controls.show" class="btn-default" disabled=loading}}
+      {{/if}}
 
-    {{#if displayEdit}}
-      {{d-button action=(action "editPost")
-          icon="pencil-alt"
-          class="btn-default"
-          label=editButtonLabel}}
-    {{/if}}
-</div>
+      {{#if displayEdit}}
+        {{d-button action=(action "editPost")
+            icon="pencil-alt"
+            class="btn-default"
+            label=editButtonLabel}}
+      {{/if}}
+  </div>
+{{/if}}
diff --git a/app/assets/javascripts/discourse/widgets/post-edits-indicator.js.es6 b/app/assets/javascripts/discourse/widgets/post-edits-indicator.js.es6
@@ -3,39 +3,39 @@ import { iconNode } from "discourse-common/lib/icon-library";
 import { longDate } from "discourse/lib/formatter";
 import { h } from "virtual-dom";
 
-const FIFTY_HOURS = 60 * 50 * 1000;
+function mult(val) {
+  return 60 * 50 * 1000 * val;
+}
 
-export default createWidget("post-edits-indicator", {
-  tagName: "div.post-info.edits",
+export function historyHeat(siteSettings, updatedAt) {
+  if (!updatedAt) {
+    return;
+  }
 
-  historyHeat(updatedAt) {
-    if (!updatedAt) {
-      return;
-    }
+  // Show heat on age
+  const rightNow = new Date().getTime();
+  const updatedAtTime = updatedAt.getTime();
 
-    // Show heat on age
-    const rightNow = new Date().getTime();
-    const updatedAtTime = updatedAt.getTime();
+  if (updatedAtTime > rightNow - mult(siteSettings.history_hours_low)) {
+    return "heatmap-high";
+  }
 
-    const siteSettings = this.siteSettings;
-    if (updatedAtTime > rightNow - FIFTY_HOURS * siteSettings.history_hours_low)
-      return "heatmap-high";
-    if (
-      updatedAtTime >
-      rightNow - FIFTY_HOURS * siteSettings.history_hours_medium
-    )
-      return "heatmap-med";
-    if (
-      updatedAtTime >
-      rightNow - FIFTY_HOURS * siteSettings.history_hours_high
-    )
-      return "heatmap-low";
-  },
+  if (updatedAtTime > rightNow - mult(siteSettings.history_hours_medium)) {
+    return "heatmap-med";
+  }
+
+  if (updatedAtTime > rightNow - mult(siteSettings.history_hours_high)) {
+    return "heatmap-low";
+  }
+}
+
+export default createWidget("post-edits-indicator", {
+  tagName: "div.post-info.edits",
 
   html(attrs) {
     let icon = "pencil-alt";
     const updatedAt = new Date(attrs.updated_at);
-    let className = this.historyHeat(updatedAt);
+    let className = historyHeat(this.siteSettings, updatedAt);
     const date = longDate(updatedAt);
     let title;
 

diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss
@@ -1,4 +1,10 @@
 .reviewable {
+  .flagged-post-header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
   .status {
     color: $primary-medium;
     span.approved {

diff --git a/app/serializers/reviewable_flagged_post_serializer.rb b/app/serializers/reviewable_flagged_post_serializer.rb
@@ -1,6 +1,10 @@
 class ReviewableFlaggedPostSerializer < ReviewableSerializer
-  target_attributes :cooked, :raw, :reply_count
-  attributes :blank_post
+  target_attributes :cooked, :raw, :reply_count, :version
+  attributes :blank_post, :post_updated_at
+
+  def post_updated_at
+    object.target&.updated_at
+  end
 
   def blank_post
     true

diff --git a/test/javascripts/controllers/history-test.js.es6 b/test/javascripts/controllers/history-test.js.es6
@@ -4,7 +4,8 @@ QUnit.test("displayEdit", function(assert) {
   const HistoryController = this.subject();
 
   HistoryController.setProperties({
-    model: { last_revision: 3, current_revision: 3, can_edit: false }
+    model: { last_revision: 3, current_revision: 3, can_edit: false },
+    topicController: {}
   });
 
   assert.equal(
@@ -21,6 +22,14 @@ QUnit.test("displayEdit", function(assert) {
     "it should display edit button when user can edit the post"
   );
 
+  HistoryController.set("topicController", null);
+  assert.equal(
+    HistoryController.get("displayEdit"),
+    false,
+    "it should not display edit button when there is not topic controller"
+  );
+  HistoryController.set("topicController", {});
+
   HistoryController.set("model.current_revision", 2);
   assert.equal(
     HistoryController.get("displayEdit"),