DEV: Use the PostQuotedContent component to render the accepted answer

.discourse-compatibility

@@ -1,3 +1,4 @@
+< 3.5.0.beta7-dev: 03804e1065d6a3afa7e5f6060e6f342eb2b94374
 < 3.5.0.beta5-dev: a8c534f11832d6bb8590ce5001119654fe6f335f
 < 3.5.0.beta3-dev: 4f0234f5be3aaa77db277e0f224cd9750d2713cd
 < 3.5.0.beta2-dev: e82c6ae1ca38ccebb34669148f8de93a3028906e

app/controllers/discourse_solved/answer_controller.rb

@@ -13,9 +13,9 @@ def accept
 
     guardian.ensure_can_accept_answer!(topic, post)
 
-    DiscourseSolved.accept_answer!(post, current_user, topic: topic)
+    accepted_answer = DiscourseSolved.accept_answer!(post, current_user, topic: topic)
 
-    render json: success_json
+    render_json_dump(accepted_answer)
   end
 
   def unaccept

assets/javascripts/discourse/components/solved-accept-answer-button.gjs

@@ -1,4 +1,5 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
@@ -13,20 +14,27 @@ export default class SolvedAcceptAnswerButton extends Component {
   @service appEvents;
   @service currentUser;
 
+  @tracked saving = false;
+
   get showLabel() {
     return this.currentUser?.id === this.args.post.topicCreatedById;
   }
 
   @action
-  acceptAnswer() {
+  async acceptAnswer() {
     const post = this.args.post;
 
-    acceptPost(post, this.currentUser);
+    this.saving = true;
+    try {
+      await acceptPost(post, this.currentUser);
+    } finally {
+      this.saving = false;
+    }
 
     this.appEvents.trigger("discourse-solved:solution-toggled", post);
 
+    // TODO (glimmer-post-stream) the Glimmer Post Stream does not listen to this event
     post.get("topic.postStream.posts").forEach((p) => {
-      p.set("topic_accepted_answer", true);
       this.appEvents.trigger("post-stream:refresh", { id: p.id });
     });
   }
@@ -36,49 +44,29 @@ export default class SolvedAcceptAnswerButton extends Component {
       class="post-action-menu__solved-unaccepted unaccepted"
       ...attributes
       @action={{this.acceptAnswer}}
+      @disabled={{this.saving}}
       @icon="far-square-check"
       @label={{if this.showLabel "solved.solution"}}
       @title="solved.accept_answer"
     />
   </template>
 }
 
-function acceptPost(post, acceptingUser) {
-  const topic = post.topic;
-
-  clearAccepted(topic);
-
-  post.setProperties({
-    can_unaccept_answer: true,
-    can_accept_answer: false,
-    accepted_answer: true,
-  });
+async function acceptPost(post) {
+  if (!post.can_accept_answer || post.accepted_answer) {
+    return;
+  }
 
-  topic.set("accepted_answer", {
-    username: post.username,
-    name: post.name,
-    post_number: post.post_number,
-    excerpt: post.cooked,
-    accepter_username: acceptingUser.username,
-    accepter_name: acceptingUser.name,
-  });
+  const topic = post.topic;
 
-  ajax("/solution/accept", {
-    type: "POST",
-    data: { id: post.id },
-  }).catch(popupAjaxError);
-}
+  try {
+    const acceptedAnswer = await ajax("/solution/accept", {
+      type: "POST",
+      data: { id: post.id },
+    });
 
-function clearAccepted(topic) {
-  const posts = topic.get("postStream.posts");
-  posts.forEach((post) => {
-    if (post.get("post_number") > 1) {
-      post.setProperties({
-        accepted_answer: false,
-        can_accept_answer: true,
-        can_unaccept_answer: false,
-        topic_accepted_answer: false,
-      });
-    }
-  });
+    topic.setAcceptedSolution(acceptedAnswer);
+  } catch (e) {
+    popupAjaxError(e);
+  }
 }

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

@@ -1,14 +1,8 @@
 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 PostQuotedContent from "discourse/components/post/quoted-content";
 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";
@@ -17,7 +11,9 @@ export default class SolvedAcceptedAnswer extends Component {
   @service siteSettings;
   @service store;
 
-  @tracked expanded = false;
+  get topic() {
+    return this.args.post.topic;
+  }
 
   get acceptedAnswer() {
     return this.topic.accepted_answer;
@@ -27,49 +23,45 @@ export default class SolvedAcceptedAnswer extends Component {
     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;
+  get collapsedContent() {
+    if (!this.hasExcerpt) {
+      return null;
+    }
 
+    return htmlSafe(this.acceptedAnswer.excerpt);
+  }
+
+  get htmlAccepter() {
     if (!this.siteSettings.show_who_marked_solved) {
       return;
     }
 
-    const formattedUsername =
-      this.siteSettings.display_name_on_posts && name
-        ? name
-        : formatUsername(username);
+    const { accepter_username, accepter_name } = this.acceptedAnswer;
+    const displayName = this.#getDisplayName(accepter_username, accepter_name);
+
+    if (!displayName) {
+      return;
+    }
 
     return htmlSafe(
       i18n("solved.marked_solved_by", {
-        username: formattedUsername,
-        username_lower: username.toLowerCase(),
+        username: displayName,
+        username_lower: accepter_username.toLowerCase(),
       })
     );
   }
 
   get htmlSolvedBy() {
-    const username = this.acceptedAnswer.username;
-    const name = this.acceptedAnswer.name;
-    const postNumber = this.acceptedAnswer.post_number;
-
+    const { username, name, post_number: postNumber } = this.acceptedAnswer;
     if (!username || !postNumber) {
       return;
     }
 
-    const displayedUser =
-      this.siteSettings.display_name_on_posts && name
-        ? name
-        : formatUsername(username);
-
+    const displayedUser = this.#getDisplayName(username, name);
     const data = {
       icon: iconHTML("square-check", { class: "accepted" }),
       username_lower: username.toLowerCase(),
@@ -82,85 +74,42 @@ export default class SolvedAcceptedAnswer extends Component {
     return htmlSafe(i18n("solved.accepted_html", data));
   }
 
-  @action
-  toggleExpandedPost() {
-    if (!this.hasExcerpt) {
-      return;
+  #getDisplayName(username, name) {
+    if (!username) {
+      return null;
     }
 
-    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);
+    return this.siteSettings.display_name_on_posts && name
+      ? name
+      : formatUsername(username);
   }
 
   <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
+    {{#if this.acceptedAnswer}}
+      <PostQuotedContent
         class={{concatClass
-          "title"
-          (unless this.hasExcerpt "title-only")
-          (if this.hasExcerpt "quote__title--can-toggle-content")
+          "accepted-answer"
+          (unless this.collapsedContent "title-only")
         }}
-        {{on "click" this.toggleExpandedPost}}
+        @collapsedContent={{this.collapsedContent}}
+        @decoratorState={{@decoratorState}}
+        @id={{this.quoteId}}
+        @post={{@post}}
+        @quotedPostNumber={{this.acceptedAnswer.post_number}}
+        @quotedTopicId={{this.topic.id}}
+        @quotedUsername={{this.acceptedAnswer.username}}
       >
-        <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>
+        <:title>
+          <div class="accepted-answer--solver-accepter">
+            <div class="accepted-answer--solver">
+              {{this.htmlSolvedBy}}
+            </div>
+            <div class="accepted-answer--accepter">
+              {{this.htmlAccepter}}
+            </div>
           </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>
+        </:title>
+      </PostQuotedContent>
+    {{/if}}
   </template>
 }