DEV: Add compatibility with the Glimmer Post Stream (#651)

Author: megothss

assets/javascripts/discourse/components/assigned-to-first-post.gjs

@@ -0,0 +1,124 @@
+import Component from "@glimmer/component";
+import { service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import icon from "discourse/helpers/d-icon";
+import { bind } from "discourse/lib/decorators";
+import { i18n } from "discourse-i18n";
+import { assignedToGroupPath, assignedToUserPath } from "../lib/url";
+
+export default class AssignedToFirstPost extends Component {
+  @service siteSettings;
+
+  get assignedToUser() {
+    return this.args.post?.topic?.assigned_to_user;
+  }
+
+  get assignedToGroup() {
+    return this.args.post?.topic?.assigned_to_group;
+  }
+
+  get icon() {
+    return this.assignedToUser ? "user-plus" : "group-plus";
+  }
+
+  get indirectlyAssignedTo() {
+    return this.args.post?.topic?.indirectly_assigned_to;
+  }
+
+  get indirectAssignments() {
+    if (!this.indirectlyAssignedTo) {
+      return null;
+    }
+
+    return Object.keys(this.indirectlyAssignedTo).map((postId) => {
+      const postNumber = this.indirectlyAssignedTo[postId].post_number;
+
+      return {
+        postId,
+        assignee: this.indirectlyAssignedTo[postId].assigned_to,
+        postNumber,
+        url: `${this.args.post.topic.url}/${postNumber}`,
+      };
+    });
+  }
+
+  get isAssigned() {
+    return !!(
+      this.assignedToUser ||
+      this.assignedToGroup ||
+      this.args.post?.topic?.indirectly_assigned_to
+    );
+  }
+
+  get hasOnlyIndirectAssignments() {
+    return !this.assignedToUser && !this.assignedToGroup;
+  }
+
+  @bind
+  prioritizedAssigneeName(assignee) {
+    // if this code is ever replaced to use `prioritize_username_in_ux`, remove this function and use the helper
+    // userPrioritizedName instead
+    return this.siteSettings.prioritize_full_name_in_ux || !assignee.username
+      ? assignee.name || assignee.username
+      : assignee.username;
+  }
+
+  <template>
+    {{#if this.isAssigned}}
+      <p class="assigned-to">
+        {{icon this.icon}}
+        {{#if this.assignedToUser}}
+          <span class="assignee">
+            <span class="assigned-to--user">
+              {{htmlSafe
+                (i18n
+                  "discourse_assign.assigned_topic_to"
+                  username=(this.prioritizedAssigneeName this.assignedToUser)
+                  path=(assignedToUserPath this.assignedToUser)
+                )
+              }}
+            </span>
+          </span>
+        {{/if}}
+
+        {{#if this.assignedToGroup}}
+          <span class="assignee">
+            <span class="assigned-to--group">
+              {{htmlSafe
+                (i18n
+                  "discourse_assign.assigned_topic_to"
+                  username=this.assignedToGroup.name
+                  path=(assignedToGroupPath this.assignedToGroup)
+                )
+              }}
+            </span>
+          </span>
+        {{/if}}
+
+        {{#if this.hasOnlyIndirectAssignments}}
+          <span class="assign-text">
+            {{i18n "discourse_assign.assigned"}}
+          </span>
+        {{/if}}
+        {{#if this.indirectlyAssignedTo}}
+          {{#each
+            this.indirectAssignments key="postId"
+            as |indirectAssignment|
+          }}
+            <span class="assignee">
+              <a href={{indirectAssignment.url}} class="assigned-indirectly">
+                {{i18n
+                  "discourse_assign.assign_post_to_multiple"
+                  post_number=indirectAssignment.postNumber
+                  username=(this.prioritizedAssigneeName
+                    indirectAssignment.assignee
+                  )
+                }}
+              </a>
+            </span>
+          {{/each}}
+        {{/if}}
+      </p>
+    {{/if}}
+  </template>
+}

assets/javascripts/discourse/components/post-assignments-display.gjs

@@ -0,0 +1,49 @@
+import Component from "@glimmer/component";
+import { assignedToGroupPath, assignedToUserPath } from "../lib/url";
+import AssignedFirstPost from "./assigned-to-first-post";
+import AssignedToPost from "./assigned-to-post";
+
+export default class PostAssignmentsDisplay extends Component {
+  static shouldRender(args) {
+    return args.post;
+  }
+
+  get post() {
+    return this.args.outletArgs.post;
+  }
+
+  get assignedTo() {
+    return this.post.topic?.indirectly_assigned_to?.[this.post.id]?.assigned_to;
+  }
+
+  get assignedToUser() {
+    return this.assignedTo.username ? this.assignedTo : null;
+  }
+
+  get assignedToGroup() {
+    return !this.assignedToUser && this.assignedTo.name
+      ? this.assignedTo
+      : null;
+  }
+
+  get assignedHref() {
+    return this.assignedToUser
+      ? assignedToUserPath(this.assignedToUser)
+      : assignedToGroupPath(this.assignedToGroup);
+  }
+
+  <template>
+    {{#if this.post.firstPost}}
+      <AssignedFirstPost @post={{this.post}} />
+    {{else if this.assignedTo}}
+      <p class="assigned-to">
+        <AssignedToPost
+          @assignedToUser={{this.assignedToUser}}
+          @assignedToGroup={{this.assignedToGroup}}
+          @href={{this.assignedHref}}
+          @post={{this.post}}
+        />
+      </p>
+    {{/if}}
+  </template>
+}