Revert to widget instead of glimmer component

Author: nattsw

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

@@ -19,7 +19,7 @@ export default class SolvedAcceptAnswerButton extends Component {
 
   @action
   acceptAnswer() {
-    acceptAnswer(this.args.post, this.appEvents);
+    acceptAnswer(this.args.post, this.appEvents, this.currentUser);
   }
 
   <template>
@@ -34,9 +34,9 @@ export default class SolvedAcceptAnswerButton extends Component {
   </template>
 }
 
-export function acceptAnswer(post, appEvents) {
+export function acceptAnswer(post, appEvents, acceptingUser) {
   // TODO (glimmer-post-menu): Remove this exported function and move the code into the button action after the widget code is removed
-  acceptPost(post);
+  acceptPost(post, acceptingUser);
 
   appEvents.trigger("discourse-solved:solution-toggled", post);
 
@@ -46,7 +46,7 @@ export function acceptAnswer(post, appEvents) {
   });
 }
 
-function acceptPost(post) {
+function acceptPost(post, acceptingUser) {
   const topic = post.topic;
 
   clearAccepted(topic);
@@ -62,6 +62,8 @@ function acceptPost(post) {
     name: post.name,
     post_number: post.post_number,
     excerpt: post.cooked,
+    accepter_username: acceptingUser.username,
+    accepter_name: acceptingUser.name,
   });
 
   ajax("/solution/accept", {

assets/javascripts/discourse/components/solved-post.gjs

@@ -1,12 +1,16 @@
+import { computed } from "@ember/object";
 import discourseComputed from "discourse/lib/decorators";
 import { withSilencedDeprecations } from "discourse/lib/deprecated";
-import { iconNode } from "discourse/lib/icon-library";
+import { iconHTML, iconNode } 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 { i18n } from "discourse-i18n";
 import SolvedAcceptAnswerButton, {
   acceptAnswer,
 } from "../components/solved-accept-answer-button";
-import SolvedPost from "../components/solved-post";
 import SolvedUnacceptAnswerButton, {
   unacceptAnswer,
 } from "../components/solved-unaccept-answer-button";
@@ -25,10 +29,39 @@ function initializeWithApi(api) {
     api.addDiscoveryQueryParam("solved", { replace: true, refreshModel: true });
   }
 
-  api.renderBeforeWrapperOutlet("post-menu", SolvedPost);
+  api.decorateWidget("post-contents:after-cooked", (dec) => {
+    if (dec.attrs.post_number === 1) {
+      const postModel = dec.getModel();
+      if (postModel) {
+        const topic = postModel.topic;
+        if (topic.accepted_answer) {
+          const hasExcerpt = !!topic.accepted_answer.excerpt;
+          const excerpt = hasExcerpt
+            ? ` <blockquote> ${topic.accepted_answer.excerpt} </blockquote> `
+            : "";
+          const solvedQuote = `
+            <aside class='quote accepted-answer' data-post="${topic.get("accepted_answer").post_number}" data-topic="${topic.id}">
+              <div class='title ${hasExcerpt ? "" : "title-only"}'>
+                <div class="accepted-answer--solver">
+                  ${topic.solvedByHtml}
+                <\/div>
+                <div class="accepted-answer--accepter">
+                  ${topic.accepterHtml}
+                <\/div>
+                <div class="quote-controls"><\/div>
+              </div>
+              ${excerpt}
+            </aside>`;
+
+          const cooked = new PostCooked({ cooked: solvedQuote }, dec);
+          return dec.rawHtml(cooked.init());
+        }
+      }
+    }
+  });
 
   api.attachWidgetAction("post", "acceptAnswer", function () {
-    acceptAnswer(this.model, this.appEvents);
+    acceptAnswer(this.model, this.appEvents, this.currentUser);
   });
 
   api.attachWidgetAction("post", "unacceptAnswer", function () {
@@ -132,6 +165,45 @@ function customizeWidgetPostMenu(api) {
 export default {
   name: "extend-for-solved-button",
   initialize() {
+    Topic.reopen({
+      // keeping this here cause there is complex localization
+      solvedByHtml: computed("accepted_answer", "id", function () {
+        const username = this.get("accepted_answer.username");
+        const name = this.get("accepted_answer.name");
+        const postNumber = this.get("accepted_answer.post_number");
+
+        if (!username || !postNumber) {
+          return "";
+        }
+
+        const displayedUser =
+          this.siteSettings.display_name_on_posts && name
+            ? name
+            : formatUsername(username);
+
+        return i18n("solved.accepted_html", {
+          icon: iconHTML("square-check", { class: "accepted" }),
+          username_lower: username.toLowerCase(),
+          username: displayedUser,
+          post_path: `${this.url}/${postNumber}`,
+          post_number: postNumber,
+          user_path: User.create({ username }).path,
+        });
+      }),
+      accepterHtml: computed("accepted_answer", function () {
+        const username = this.get("accepted_answer.accepter_username");
+        const name = this.get("accepted_answer.accepter_name");
+        const formattedUsername =
+          this.siteSettings.display_name_on_posts && name
+            ? name
+            : formatUsername(username);
+        return i18n("solved.marked_solved_by", {
+          username: formattedUsername,
+          username_lower: username.toLowerCase(),
+        });
+      }),
+    });
+
     withPluginApi("2.0.0", (api) => {
       withSilencedDeprecations("discourse.hbr-topic-list-overrides", () => {
         let topicStatusIcons;

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

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+describe "About page", type: :system do
+  fab!(:admin)
+  fab!(:solver) { Fabricate(:user) }
+  fab!(:accepter) { Fabricate(:user) }
+  fab!(:topic) { Fabricate(:post, user: admin).topic }
+  fab!(:post1) { Fabricate(:post, topic:, user: solver, cooked: "The answer is 42") }
+  let(:topic_page) { PageObjects::Pages::Topic.new }
+
+  before do
+    SiteSetting.solved_enabled = true
+    SiteSetting.allow_solved_on_all_topics = true
+    SiteSetting.accept_all_solutions_allowed_groups = Group::AUTO_GROUPS[:everyone]
+  end
+
+  it "accepts post as solution and shows in OP" do
+    sign_in(accepter)
+
+    topic_page.visit_topic(topic, post_number: 2)
+
+    expect(topic_page).to have_css(".post-action-menu__solved-unaccepted")
+
+    find(".post-action-menu__solved-unaccepted").click
+
+    expect(topic_page).to have_css(".post-action-menu__solved-accepted")
+    expect(topic_page.find(".title .accepted-answer--solver")).to have_content(
+      "Solved by #{solver.username}",
+    )
+    expect(topic_page.find(".title .accepted-answer--accepter")).to have_content(
+      "Marked as solved by #{accepter.username}",
+    )
+    expect(topic_page.find("blockquote")).to have_content("The answer is 42")
+  end
+end

spec/system/solved_spec.rb

@@ -199,6 +199,12 @@ export const postStreamWithAcceptedAnswerExcerpt = (excerpt) => {
     featured_link: null,
     topic_timer: null,
     message_bus_last_id: 0,
-    accepted_answer: { post_number: 2, username: "kzh", excerpt },
+    accepted_answer: {
+      post_number: 2,
+      username: "kzh",
+      excerpt,
+      accepter_username: "tomtom",
+      accepter_name: "Tomtom",
+    },
   };
 };