FEATURE: Highlight changed tags in post revisions (#15072)

app/assets/javascripts/discourse/app/controllers/history.js

@@ -11,21 +11,17 @@ import ModalFunctionality from "discourse/mixins/modal-functionality";
 import Post from "discourse/models/post";
 import bootbox from "bootbox";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
-import { computed } from "@ember/object";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import { sanitizeAsync } from "discourse/lib/text";
 
-function customTagArray(fieldName) {
-  return computed(fieldName, function () {
-    let val = this.get(fieldName);
-    if (!val) {
-      return val;
-    }
-    if (!Array.isArray(val)) {
-      val = [val];
-    }
-    return val;
-  });
+function customTagArray(val) {
+  if (!val) {
+    return [];
+  }
+  if (!Array.isArray(val)) {
+    val = [val];
+  }
+  return val;
 }
 
 // This controller handles displaying of history
@@ -43,8 +39,33 @@ export default Controller.extend(ModalFunctionality, {
   previousFeaturedLink: alias("model.featured_link_changes.previous"),
   currentFeaturedLink: alias("model.featured_link_changes.current"),
 
-  previousTagChanges: customTagArray("model.tags_changes.previous"),
-  currentTagChanges: customTagArray("model.tags_changes.current"),
+  @discourseComputed(
+    "model.tags_changes.previous",
+    "model.tags_changes.current"
+  )
+  previousTagChanges(previous, current) {
+    const previousArray = customTagArray(previous);
+    const currentSet = new Set(customTagArray(current));
+
+    return previousArray.map((name) => ({
+      name,
+      deleted: !currentSet.has(name),
+    }));
+  },
+
+  @discourseComputed(
+    "model.tags_changes.previous",
+    "model.tags_changes.current"
+  )
+  currentTagChanges(previous, current) {
+    const previousSet = new Set(customTagArray(previous));
+    const currentArray = customTagArray(current);
+
+    return currentArray.map((name) => ({
+      name,
+      inserted: !previousSet.has(name),
+    }));
+  },
 
   @discourseComputed("post.version")
   modalTitleKey(version) {

app/assets/javascripts/discourse/app/templates/modal/history.hbs

@@ -84,12 +84,12 @@
       <div class="row">
         {{i18n "tagging.changed"}}
         {{#each previousTagChanges as |t|}}
-          {{discourse-tag t}}
+          {{discourse-tag t.name style=(if t.deleted "diff-del")}}
         {{/each}}
         &rarr;
         &nbsp;
         {{#each currentTagChanges as |t|}}
-          {{discourse-tag t}}
+          {{discourse-tag t.name style=(if t.inserted "diff-ins")}}
         {{/each}}
       </div>
     {{/if}}

app/assets/javascripts/discourse/tests/acceptance/post-history-test.js

@@ -0,0 +1,63 @@
+import { click, visit } from "@ember/test-helpers";
+import {
+  acceptance,
+  count,
+  query,
+} from "discourse/tests/helpers/qunit-helpers";
+import { test } from "qunit";
+
+acceptance("Post - History", function (needs) {
+  needs.user();
+
+  needs.pretender((server, helper) => {
+    server.get("/posts/419/revisions/latest.json", () => {
+      return helper.response({
+        created_at: "2021-11-24T10:59:36.163Z",
+        post_id: 419,
+        previous_hidden: false,
+        current_hidden: false,
+        first_revision: 1,
+        previous_revision: 1,
+        current_revision: 2,
+        next_revision: null,
+        last_revision: 2,
+        current_version: 2,
+        version_count: 2,
+        username: "bianca",
+        display_username: "bianca",
+        avatar_template: "/letter_avatar_proxy/v4/letter/b/3be4f8/{size}.png",
+        edit_reason: null,
+        body_changes: {
+          inline: '<div class="inline-diff"><p>Welcome to Discourse!</p</div>',
+          side_by_side:
+            '<div class="revision-content"><p>Welcome to Discourse!</p</div><div class="revision-content"><p>Welcome to Discourse!</p</div>',
+          side_by_side_markdown:
+            '<table class="markdown"><tr><td>Welcome to Discourse!</td><td>Welcome to Discourse!</td></tr></table>',
+        },
+        title_changes: {
+          inline:
+            '<div class="inline-diff"><div>Welcome to Discourse!</div></div>',
+          side_by_side:
+            '<div class="revision-content"><div>Welcome to Discourse!</div></div><div class="revision-content"><div>Welcome to Discourse!</div></div>',
+        },
+        user_changes: null,
+        tags_changes: {
+          previous: ["tag1", "tag2"],
+          current: ["tag2", "tag3"],
+        },
+        wiki: false,
+        can_edit: true,
+      });
+    });
+  });
+
+  test("Shows highlighted tag changes", async function (assert) {
+    await visit("/t/internationalization-localization/280");
+    await click("article[data-post-id='419'] .edits button");
+    assert.equal(count(".discourse-tag"), 4);
+    assert.equal(count(".discourse-tag.diff-del"), 1);
+    assert.equal(query(".discourse-tag.diff-del").textContent, "tag1");
+    assert.equal(count(".discourse-tag.diff-ins"), 1);
+    assert.equal(query(".discourse-tag.diff-ins").textContent, "tag3");
+  });
+});