FEATURE: Let users collapse the topic inline summary (#22604)

app/assets/javascripts/discourse/app/widgets/summary-box.js

@@ -26,20 +26,16 @@ export default createWidget("summary-box", {
   tagName: "article.summary-box",
   buildKey: (attrs) => `summary-box-${attrs.topicId}`,
 
-  defaultState() {
+  html(attrs) {
-    return { summary: "" };
-  },
-
-  html(attrs, state) {
     const html = [];
 
-    if (state.summary) {
+    if (attrs.summary) {
-      html.push(new RawHtml({ html: `<div>${state.summary}</div>` }));
+      html.push(new RawHtml({ html: `<div>${attrs.summary}</div>` }));
       html.push(
         h(
           "div.summarized-on",
           {},
-          I18n.t("summary.summarized_on", { date: state.summarized_on })
+          I18n.t("summary.summarized_on", { date: attrs.summarizedOn })
         )
       );
     } else {
@@ -53,11 +49,12 @@ export default createWidget("summary-box", {
   fetchSummary(topicId) {
     ajax(`/t/${topicId}/strategy-summary`)
       .then((data) => {
-        this.state.summarized_on = shortDateNoYear(data.summarized_on);
-
         cookAsync(data.summary).then((cooked) => {
-          this.state.summary = cooked.string;
+          // We store the summary in the parent so we can re-render it without doing a new request.
-          this.scheduleRerender();
+          this.sendWidgetEvent("summaryUpdated", {
+            summary: cooked.string,
+            summarizedOn: shortDateNoYear(data.summarized_on),
+          });
         });
       })
       .catch(popupAjaxError);

app/assets/javascripts/discourse/app/widgets/toggle-topic-summary.js

@@ -37,7 +37,12 @@ export default createWidget("toggle-topic-summary", {
   buildKey: (attrs) => `toggle-topic-summary-${attrs.topicId}`,
 
   defaultState() {
-    return { expandSummaryBox: false };
+    return {
+      expandSummaryBox: false,
+      summaryBoxHidden: true,
+      summary: "",
+      summarizedOn: null,
+    };
   },
 
   html(attrs, state) {
@@ -45,16 +50,22 @@ export default createWidget("toggle-topic-summary", {
     const summarizationButtons = [];
 
     if (attrs.summarizable) {
-      const title = I18n.t("summary.strategy.button_title");
+      const expandTitle = I18n.t("summary.strategy.button_title");
+      const collapseTitle = I18n.t("summary.strategy.hide_button_title");
 
       summarizationButtons.push(
         this.attach("button", {
           className: "btn btn-primary topic-strategy-summarization",
-          icon: "magic",
+          icon: this.summaryBoxVisble() ? "chevron-up" : "magic",
-          translatedTitle: title,
+          translatedTitle: this.summaryBoxVisble()
-          translatedLabel: title,
+            ? collapseTitle
-          action: "expandSummaryBox",
+            : expandTitle,
-          disabled: state.expandSummaryBox,
+          translatedLabel: this.summaryBoxVisble()
+            ? collapseTitle
+            : expandTitle,
+          action: state.expandSummaryBox
+            ? "toggleSummaryBox"
+            : "expandSummaryBox",
         })
       );
     }
@@ -78,14 +89,30 @@ export default createWidget("toggle-topic-summary", {
       html.push(h("div.summarization-buttons", summarizationButtons));
     }
 
-    if (state.expandSummaryBox) {
+    if (this.summaryBoxVisble()) {
+      attrs.summary = this.state.summary;
+      attrs.summarizedOn = this.state.summarizedOn;
       html.push(this.attach("summary-box", attrs));
     }
 
     return html;
   },
 
+  summaryUpdatedEvent(update) {
+    this.state.summary = update.summary;
+    this.state.summarizedOn = update.summarizedOn;
+  },
+
+  summaryBoxVisble() {
+    return this.state.expandSummaryBox && !this.state.summaryBoxHidden;
+  },
+
   expandSummaryBox() {
     this.state.expandSummaryBox = true;
+    this.state.summaryBoxHidden = false;
+  },
+
+  toggleSummaryBox() {
+    this.state.summaryBoxHidden = !this.state.summaryBoxHidden;
   },
 });

config/locales/client.en.yml

@@ -2062,6 +2062,7 @@ en:
       short_label: "Top replies"
       short_title: "Show this topic top replies: the most interesting posts as determined by the community"
       strategy:
+        hide_button_title: "Hide summary"
         button_title: "Summarize this topic"
         title: "Topic summary"