DEV: Add compatibility with the Glimmer Post Stream

assets/javascripts/discourse/components/solved-accepted-answer.gjs

@@ -0,0 +1,166 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import AsyncContent from "discourse/components/async-content";
+import PostCookedHtml from "discourse/components/post/cooked-html";
+import concatClass from "discourse/helpers/concat-class";
+import icon from "discourse/helpers/d-icon";
+import { ajax } from "discourse/lib/ajax";
+import { iconHTML } from "discourse/lib/icon-library";
+import { formatUsername } from "discourse/lib/utilities";
+import { i18n } from "discourse-i18n";
+
+export default class SolvedAcceptedAnswer extends Component {
+  @service siteSettings;
+  @service store;
+
+  @tracked expanded = false;
+
+  get acceptedAnswer() {
+    return this.topic.accepted_answer;
+  }
+
+  get quoteId() {
+    return `accepted-answer-${this.topic.id}-${this.acceptedAnswer.post_number}`;
+  }
+
+  get topic() {
+    return this.args.post.topic;
+  }
+
+  get hasExcerpt() {
+    return !!this.acceptedAnswer.excerpt;
+  }
+
+  get htmlAccepter() {
+    const username = this.acceptedAnswer.accepter_username;
+    const name = this.acceptedAnswer.accepter_name;
+
+    if (!this.siteSettings.show_who_marked_solved) {
+      return;
+    }
+
+    const formattedUsername =
+      this.siteSettings.display_name_on_posts && name
+        ? name
+        : formatUsername(username);
+
+    return htmlSafe(
+      i18n("solved.marked_solved_by", {
+        username: formattedUsername,
+        username_lower: username.toLowerCase(),
+      })
+    );
+  }
+
+  get htmlSolvedBy() {
+    const username = this.acceptedAnswer.username;
+    const name = this.acceptedAnswer.name;
+    const postNumber = this.acceptedAnswer.post_number;
+
+    if (!username || !postNumber) {
+      return;
+    }
+
+    const displayedUser =
+      this.siteSettings.display_name_on_posts && name
+        ? name
+        : formatUsername(username);
+
+    const data = {
+      icon: iconHTML("square-check", { class: "accepted" }),
+      username_lower: username.toLowerCase(),
+      username: displayedUser,
+      post_path: `${this.topic.url}/${postNumber}`,
+      post_number: postNumber,
+      user_path: this.store.createRecord("user", { username }).path,
+    };
+
+    return htmlSafe(i18n("solved.accepted_html", data));
+  }
+
+  @action
+  toggleExpandedPost() {
+    if (!this.hasExcerpt) {
+      return;
+    }
+
+    this.expanded = !this.expanded;
+  }
+
+  @action
+  async loadExpandedAcceptedAnswer(postNumber) {
+    const acceptedAnswer = await ajax(
+      `/posts/by_number/${this.topic.id}/${postNumber}`
+    );
+
+    return this.store.createRecord("post", acceptedAnswer);
+  }
+
+  <template>
+    <aside
+      class="quote accepted-answer"
+      data-post={{this.acceptedAnswer.post_number}}
+      data-topic={{this.topic.id}}
+      data-expanded={{this.expanded}}
+    >
+      {{! template-lint-disable no-invalid-interactive }}
+      <div
+        class={{concatClass
+          "title"
+          (unless this.hasExcerpt "title-only")
+          (if this.hasExcerpt "quote__title--can-toggle-content")
+        }}
+        {{on "click" this.toggleExpandedPost}}
+      >
+        <div class="accepted-answer--solver-accepter">
+          <div class="accepted-answer--solver">
+            {{this.htmlSolvedBy}}
+          </div>
+          <div class="accepted-answer--accepter">
+            {{this.htmlAccepter}}
+          </div>
+        </div>
+        {{#if this.hasExcerpt}}
+          <div class="quote-controls">
+            <button
+              aria-controls={{this.quoteId}}
+              aria-expanded={{this.expanded}}
+              class="quote-toggle btn-flat"
+              type="button"
+            >
+              {{icon
+                (if this.expanded "chevron-up" "chevron-down")
+                title="post.expand_collapse"
+              }}
+            </button>
+          </div>
+        {{/if}}
+      </div>
+      {{#if this.hasExcerpt}}
+        <blockquote id={{this.quoteId}}>
+          {{#if this.expanded}}
+            <AsyncContent
+              @asyncData={{this.loadExpandedAcceptedAnswer}}
+              @context={{this.acceptedAnswer.post_number}}
+            >
+              <:content as |expandedAnswer|>
+                <div class="expanded-quote" data-post-id={{expandedAnswer.id}}>
+                  <PostCookedHtml
+                    @post={{expandedAnswer}}
+                    @streamElement={{false}}
+                  />
+                </div>
+              </:content>
+            </AsyncContent>
+          {{else}}
+            {{htmlSafe this.acceptedAnswer.excerpt}}
+          {{/if}}
+        </blockquote>
+      {{/if}}
+    </aside>
+  </template>
+}

assets/javascripts/discourse/initializers/extend-for-solved-button.gjs

@@ -0,0 +1,136 @@
+import Component from "@glimmer/component";
+import { computed } from "@ember/object";
+import { withSilencedDeprecations } from "discourse/lib/deprecated";
+import { iconHTML } from "discourse/lib/icon-library";
+import { withPluginApi } from "discourse/lib/plugin-api";
+import { formatUsername } from "discourse/lib/utilities";
+import Topic from "discourse/models/topic";
+import User from "discourse/models/user";
+import PostCooked from "discourse/widgets/post-cooked";
+import RenderGlimmer from "discourse/widgets/render-glimmer";
+import { i18n } from "discourse-i18n";
+import SolvedAcceptAnswerButton from "../components/solved-accept-answer-button";
+import SolvedAcceptedAnswer from "../components/solved-accepted-answer";
+import SolvedUnacceptAnswerButton from "../components/solved-unaccept-answer-button";
+
+function initializeWithApi(api) {
+  customizePost(api);
+  customizePostMenu(api);
+
+  if (api.addDiscoveryQueryParam) {
+    api.addDiscoveryQueryParam("solved", { replace: true, refreshModel: true });
+  }
+}
+
+function customizePost(api) {
+  api.addTrackedPostProperties(
+    "can_accept_answer",
+    "can_unaccept_answer",
+    "accepted_answer",
+    "topic_accepted_answer"
+  );
+
+  api.renderAfterWrapperOutlet(
+    "post-content-cooked-html",
+    class extends Component {
+      static shouldRender(args) {
+        return args.post.post_number === 1 && args.post.topic.accepted_answer;
+      }
+
+      <template><SolvedAcceptedAnswer @post={{@outletArgs.post}} /></template>
+    }
+  );
+
+  withSilencedDeprecations("discourse.post-stream-widget-overrides", () =>
+    customizeWidgetPost(api)
+  );
+}
+
+function customizeWidgetPost(api) {
+  api.decorateWidget("post-contents:after-cooked", (helper) => {
+    let post = helper.getModel();
+
+    if (helper.attrs.post_number === 1 && post?.topic?.accepted_answer) {
+      return new RenderGlimmer(
+        helper.widget,
+        "div",
+        <template><SolvedAcceptedAnswer @post={{@data.post}} /></template>,
+        { post }
+      );
+    }
+  });
+}
+
+function customizePostMenu(api) {
+  api.registerValueTransformer(
+    "post-menu-buttons",
+    ({
+      value: dag,
+      context: {
+        post,
+        firstButtonKey,
+        secondLastHiddenButtonKey,
+        lastHiddenButtonKey,
+      },
+    }) => {
+      let solvedButton;
+
+      if (post.can_accept_answer) {
+        solvedButton = SolvedAcceptAnswerButton;
+      } else if (post.accepted_answer) {
+        solvedButton = SolvedUnacceptAnswerButton;
+      }
+
+      solvedButton &&
+        dag.add(
+          "solved",
+          solvedButton,
+          post.topic_accepted_answer && !post.accepted_answer
+            ? {
+                before: lastHiddenButtonKey,
+                after: secondLastHiddenButtonKey,
+              }
+            : {
+                before: [
+                  "assign", // button added by the assign plugin
+                  firstButtonKey,
+                ],
+              }
+        );
+    }
+  );
+}
+
+export default {
+  name: "extend-for-solved-button",
+  initialize() {
+    withPluginApi("1.34.0", initializeWithApi);
+
+    withPluginApi("0.8.10", (api) => {
+      api.replaceIcon(
+        "notification.solved.accepted_notification",
+        "square-check"
+      );
+    });
+
+    withPluginApi("0.11.0", (api) => {
+      api.addAdvancedSearchOptions({
+        statusOptions: [
+          {
+            name: i18n("search.advanced.statuses.solved"),
+            value: "solved",
+          },
+          {
+            name: i18n("search.advanced.statuses.unsolved"),
+            value: "unsolved",
+          },
+        ],
+      });
+    });
+
+    withPluginApi("0.11.7", (api) => {
+      api.addSearchSuggestion("status:solved");
+      api.addSearchSuggestion("status:unsolved");
+    });
+  },
+};