UX: Small topic map improvements and fixes (#28215)

app/assets/javascripts/discourse/app/components/topic-map/topic-map-summary.gjs

@@ -91,18 +91,11 @@ export default class TopicMapSummary extends Component {
     if (this.args.topic.has_summary) {
       return false;
     }
-
-    return (
-      [this.hasViews, this.hasLikes, this.hasUsers, this.hasLinks].filter(
-        Boolean
-      ).length === 1
-    );
+    return [this.hasLikes, this.hasUsers, this.hasLinks].every((stat) => !stat);
   }
 
   get manyStats() {
-    return [this.hasViews, this.hasLikes, this.hasUsers, this.hasLinks].every(
-      Boolean
-    );
+    return [this.hasLikes, this.hasUsers, this.hasLinks].every(Boolean);
   }
 
   get shouldShowViewsChart() {
@@ -127,10 +120,6 @@ export default class TopicMapSummary extends Component {
     return !this.allLinksShown && this.linksCount > TRUNCATED_LINKS_LIMIT;
   }
 
-  get hasViews() {
-    return this.args.topic.views > 1;
-  }
-
   get hasLikes() {
     return (
       this.args.topic.like_count > MIN_LIKES_COUNT &&
@@ -409,7 +398,7 @@ export default class TopicMapSummary extends Component {
           <:content>
             <TopicParticipants
               @title={{i18n "topic_map.participants_title"}}
-              @userFilters={{@userFilters}}
+              @userFilters={{@postStream.userFilters}}
               @participants={{@topicDetails.participants}}
             />
           </:content>
@@ -419,7 +408,7 @@ export default class TopicMapSummary extends Component {
       {{#if this.shouldShowParticipants}}
         <TopicParticipants
           @participants={{this.first5Participants}}
-          @userFilters={{@userFilters}}
+          @userFilters={{@postStream.userFilters}}
         />
       {{/if}}
       <div class="topic-map__buttons">

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

@@ -236,7 +236,11 @@ export default class TopicController extends Controller.extend(
 
   @discourseComputed("model.posts_count", "model.postStream.loadingFilter")
   showBottomTopicMap(postsCount, loading) {
-    return !loading && postsCount > MIN_POSTS_COUNT;
+    return (
+      this.siteSettings.show_bottom_topic_map &&
+      !loading &&
+      postsCount > MIN_POSTS_COUNT
+    );
   }
 
   _removeDeleteOnOwnerReplyBookmarks() {

app/assets/javascripts/discourse/app/lib/transform-post.js

@@ -169,64 +169,6 @@ export default function transformPost(
     postAtts.requestedGroupName = topic.requested_group_name;
   }
 
-  const showPMMap =
-    topic.archetype === "private_message" && post.post_number === 1;
-  if (showPMMap) {
-    postAtts.showPMMap = true;
-    postAtts.allowedGroups = details.allowed_groups;
-    postAtts.allowedUsers = details.allowed_users;
-    postAtts.canRemoveAllowedUsers = details.can_remove_allowed_users;
-    postAtts.canRemoveSelfId = details.can_remove_self_id;
-    postAtts.canInvite = details.can_invite_to;
-  }
-
-  const showTopicMap =
-    (_additionalAttributes.includes("topicMap") && post.post_number === 1) ||
-    showPMMap ||
-    (post.post_number === 1 &&
-      topic.archetype === "regular" &&
-      topic.posts_count > 1);
-  if (showTopicMap) {
-    postAtts.showTopicMap = true;
-    postAtts.topicCreatedAt = topic.created_at;
-    postAtts.createdByUsername = createdBy.username;
-    postAtts.createdByAvatarTemplate = createdBy.avatar_template;
-    postAtts.createdByName = createdBy.name;
-
-    postAtts.lastPostUrl = topic.get("lastPostUrl");
-    if (details.last_poster) {
-      postAtts.lastPostUsername = details.last_poster.username;
-      postAtts.lastPostAvatarTemplate = details.last_poster.avatar_template;
-      postAtts.lastPostName = details.last_poster.name;
-    }
-    postAtts.lastPostAt = topic.last_posted_at;
-
-    postAtts.topicReplyCount = topic.get("replyCount");
-    postAtts.topicViews = topic.views;
-    postAtts.topicViewsHeat = topic.get("viewsHeat");
-
-    postAtts.participantCount = topic.participant_count;
-    postAtts.topicLikeCount = topic.like_count;
-    postAtts.topicLinks = details.links;
-    if (postAtts.topicLinks) {
-      postAtts.topicLinkLength = details.links.length;
-    }
-    postAtts.topicPostsCount = topic.posts_count;
-
-    postAtts.participants = details.participants;
-
-    const postStream = topic.get("postStream");
-    postAtts.userFilters = postStream.userFilters;
-    postAtts.topicSummaryEnabled = postStream.summary;
-    postAtts.topicWordCount = topic.word_count;
-    postAtts.hasTopRepliesSummary = topic.has_summary;
-    postAtts.summarizable = topic.summarizable;
-
-    if (post.post_number === 1) {
-      postAtts.summary = postStream.topicSummary;
-    }
-  }
-
   if (postAtts.isDeleted) {
     postAtts.deletedByAvatarTemplate = post.get(
       "postDeletedBy.avatar_template"

app/assets/javascripts/discourse/app/widgets/post.js

@@ -831,7 +831,7 @@ createWidget("post-article", {
       ])
     );
 
-    if (attrs.showTopicMap) {
+    if (this.shouldShowTopicMap(attrs)) {
       rows.push(this.buildTopicMap(attrs));
     }
 
@@ -900,6 +900,22 @@ createWidget("post-article", {
     }
   },
 
+  shouldShowTopicMap(attrs) {
+    if (attrs.post_number !== 1) {
+      return false;
+    }
+    const isPM = attrs.topic.archetype === "private_message";
+    const isRegular = attrs.topic.archetype === "regular";
+    const showWithoutReplies =
+      this.siteSettings.show_topic_map_in_topics_without_replies;
+
+    return (
+      attrs.topicMap ||
+      isPM ||
+      (isRegular && (attrs.topic.posts_count > 1 || showWithoutReplies))
+    );
+  },
+
   buildTopicMap(attrs) {
     return new RenderGlimmer(
       this,
@@ -917,7 +933,7 @@ createWidget("post-article", {
         model: attrs.topic,
         topicDetails: attrs.topic.get("details"),
         postStream: attrs.topic.postStream,
-        showPMMap: attrs.showPMMap,
+        showPMMap: attrs.topic.archetype === "private_message",
         showInvite: () => this.sendWidgetAction("showInvite"),
         removeAllowedGroup: (group) =>
           this.sendWidgetAction("removeAllowedGroup", group),

app/assets/javascripts/discourse/tests/integration/components/widgets/post-test.js

@@ -16,7 +16,13 @@ module("Integration | Component | Widget | post", function (hooks) {
   setupRenderingTest(hooks);
 
   test("basic elements", async function (assert) {
-    this.set("args", { shareUrl: "/example", post_number: 1 });
+    const store = getOwner(this).lookup("service:store");
+    const topic = store.createRecord("topic", {
+      id: 123,
+      archetype: "regular",
+    });
+
+    this.set("args", { shareUrl: "/example", post_number: 1, topic });
 
     await render(hbs`<MountWidget @widget="post" @args={{this.args}} />`);
 
@@ -771,12 +777,29 @@ module("Integration | Component | Widget | post", function (hooks) {
     assert.strictEqual(count("section.embedded-posts .d-icon-arrow-down"), 1);
   });
 
-  test("topic map not shown", async function (assert) {
-    this.set("args", { showTopicMap: false });
+  test("shows the topic map when setting the 'topicMap' attribute", async function (assert) {
+    const store = getOwner(this).lookup("service:store");
+    const topic = store.createRecord("topic", { id: 123 });
+    this.set("args", { topic, post_number: 1, topicMap: true });
 
     await render(hbs`<MountWidget @widget="post" @args={{this.args}} />`);
 
-    assert.dom(".topic-map").doesNotExist();
+    assert.dom(".topic-map").exists();
+  });
+
+  test("shows the topic map when no replies", async function (assert) {
+    this.siteSettings.show_topic_map_in_topics_without_replies = true;
+
+    const store = getOwner(this).lookup("service:store");
+    const topic = store.createRecord("topic", {
+      id: 123,
+      archetype: "regular",
+    });
+    this.set("args", { topic, post_number: 1 });
+
+    await render(hbs`<MountWidget @widget="post" @args={{this.args}} />`);
+
+    assert.dom(".topic-map").exists();
   });
 
   test("topic map - few participants", async function (assert) {
@@ -785,6 +808,7 @@ module("Integration | Component | Widget | post", function (hooks) {
       id: 123,
       posts_count: 10,
       participant_count: 2,
+      archetype: "regular",
     });
     topic.details.set("participants", [
       { username: "eviltrout" },
@@ -792,7 +816,7 @@ module("Integration | Component | Widget | post", function (hooks) {
     ]);
     this.set("args", {
       topic,
-      showTopicMap: true,
+      post_number: 1,
     });
 
     await render(hbs`<MountWidget @widget="post" @args={{this.args}} />`);
@@ -806,6 +830,7 @@ module("Integration | Component | Widget | post", function (hooks) {
       id: 123,
       posts_count: 10,
       participant_count: 6,
+      archetype: "regular",
     });
     topic.postStream.setProperties({ userFilters: ["sam", "codinghorror"] });
     topic.details.set("participants", [
@@ -819,7 +844,7 @@ module("Integration | Component | Widget | post", function (hooks) {
 
     this.set("args", {
       topic,
-      showTopicMap: true,
+      post_number: 1,
     });
 
     await render(hbs`<MountWidget @widget="post" @args={{this.args}} />`);
@@ -833,7 +858,11 @@ module("Integration | Component | Widget | post", function (hooks) {
 
   test("topic map - links", async function (assert) {
     const store = getOwner(this).lookup("service:store");
-    const topic = store.createRecord("topic", { id: 123 });
+    const topic = store.createRecord("topic", {
+      id: 123,
+      posts_count: 2,
+      archetype: "regular",
+    });
     topic.details.set("links", [
       { url: "http://link1.example.com", clicks: 0 },
       { url: "http://link2.example.com", clicks: 0 },
@@ -842,7 +871,7 @@ module("Integration | Component | Widget | post", function (hooks) {
       { url: "http://link5.example.com", clicks: 0 },
       { url: "http://link6.example.com", clicks: 0 },
     ]);
-    this.set("args", { topic, showTopicMap: true });
+    this.set("args", { topic, post_number: 1 });
 
     await render(hbs`<MountWidget @widget="post" @args={{this.args}} />`);
 
@@ -857,18 +886,28 @@ module("Integration | Component | Widget | post", function (hooks) {
 
   test("topic map - no top reply summary", async function (assert) {
     const store = getOwner(this).lookup("service:store");
-    const topic = store.createRecord("topic", { id: 123 });
-    this.set("args", { topic, showTopicMap: true });
+    const topic = store.createRecord("topic", {
+      id: 123,
+      archetype: "regular",
+      posts_count: 2,
+    });
+    this.set("args", { topic, post_number: 1 });
 
     await render(hbs`<MountWidget @widget="post" @args={{this.args}} />`);
 
+    assert.dom(".topic-map").exists();
     assert.dom(".summarization-button .top-replies").doesNotExist();
   });
 
   test("topic map - has top replies summary", async function (assert) {
     const store = getOwner(this).lookup("service:store");
-    const topic = store.createRecord("topic", { id: 123, has_summary: true });
-    this.set("args", { topic, showTopicMap: true });
+    const topic = store.createRecord("topic", {
+      id: 123,
+      archetype: "regular",
+      posts_count: 2,
+      has_summary: true,
+    });
+    this.set("args", { topic, post_number: 1 });
 
     await render(hbs`<MountWidget @widget="post" @args={{this.args}} />`);
 
@@ -877,14 +916,16 @@ module("Integration | Component | Widget | post", function (hooks) {
 
   test("pm map", async function (assert) {
     const store = getOwner(this).lookup("service:store");
-    const topic = store.createRecord("topic", { id: 123 });
+    const topic = store.createRecord("topic", {
+      id: 123,
+      archetype: "private_message",
+    });
     topic.details.set("allowed_users", [
       EmberObject.create({ username: "eviltrout" }),
     ]);
     this.set("args", {
       topic,
-      showTopicMap: true,
-      showPMMap: true,
+      post_number: 1,
     });
 
     await render(hbs`<MountWidget @widget="post" @args={{this.args}} />`);