DEV: Extract top replies summary out of summary-box (#27647)

app/assets/javascripts/discourse/app/components/summary-box.hbs

@@ -1,38 +1,24 @@
-<div class="summary-box__container">
-  {{#if @topic.has_summary}}
-    <p>{{html-safe this.topRepliesSummaryInfo}}</p>
-  {{/if}}
-  <div class="summarization-buttons">
-    {{#if @topic.summarizable}}
-      {{#if this.summary.showSummaryBox}}
-        <DButton
-          @action={{@collapseSummary}}
-          @title="summary.buttons.hide"
-          @label="summary.buttons.hide"
-          @icon="chevron-up"
-          class="btn-primary topic-strategy-summarization"
-        />
-      {{else}}
-        <DButton
-          @action={{@showSummary}}
-          @translatedLabel={{this.generateSummaryTitle}}
-          @translatedTitle={{this.generateSummaryTitle}}
-          @icon={{this.generateSummaryIcon}}
-          @disabled={{this.summary.loading}}
-          class="btn-primary topic-strategy-summarization"
-        />
-      {{/if}}
-    {{/if}}
-    {{#if @topic.has_summary}}
+<div class="summary-box__container old-summary-box-temporary">
+  {{#if @topic.summarizable}}
+    {{#if this.summary.showSummaryBox}}
       <DButton
-        @action={{if @postStream.summary @cancelFilter @showTopReplies}}
-        @translatedTitle={{this.topRepliesTitle}}
-        @translatedLabel={{this.topRepliesLabel}}
-        @icon={{this.topRepliesIcon}}
-        class="top-replies"
+        @action={{@collapseSummary}}
+        @title="summary.buttons.hide"
+        @label="summary.buttons.hide"
+        @icon="chevron-up"
+        class="btn-primary topic-strategy-summarization"
+      />
+    {{else}}
+      <DButton
+        @action={{@showSummary}}
+        @translatedLabel={{this.generateSummaryTitle}}
+        @translatedTitle={{this.generateSummaryTitle}}
+        @icon={{this.generateSummaryIcon}}
+        @disabled={{this.summary.loading}}
+        class="btn-primary topic-strategy-summarization"
       />
     {{/if}}
-  </div>
+  {{/if}}
 
   {{#if this.summary.showSummaryBox}}
     <article class="summary-box">

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

@@ -2,8 +2,6 @@ import Component from "@glimmer/component";
 import { service } from "@ember/service";
 import I18n from "discourse-i18n";
 
-const MIN_POST_READ_TIME = 4;
-
 export default class SummaryBox extends Component {
   @service siteSettings;
 
@@ -42,51 +40,4 @@ export default class SummaryBox extends Component {
   get topRepliesSummaryEnabled() {
     return this.args.postStream.summary;
   }
-
-  get topRepliesSummaryInfo() {
-    if (this.topRepliesSummaryEnabled) {
-      return I18n.t("summary.enabled_description");
-    }
-
-    const wordCount = this.args.topic.word_count;
-    if (wordCount && this.siteSettings.read_time_word_count > 0) {
-      const readingTime = Math.ceil(
-        Math.max(
-          wordCount / this.siteSettings.read_time_word_count,
-          (this.args.topic.posts_count * MIN_POST_READ_TIME) / 60
-        )
-      );
-      return I18n.messageFormat("summary.description_time_MF", {
-        replyCount: this.args.topic.replyCount,
-        readingTime,
-      });
-    }
-    return I18n.t("summary.description", {
-      count: this.args.topic.replyCount,
-    });
-  }
-
-  get topRepliesTitle() {
-    if (this.topRepliesSummaryEnabled) {
-      return;
-    }
-
-    return I18n.t("summary.short_title");
-  }
-
-  get topRepliesLabel() {
-    const label = this.topRepliesSummaryEnabled
-      ? "summary.disable"
-      : "summary.enable";
-
-    return I18n.t(label);
-  }
-
-  get topRepliesIcon() {
-    if (this.topRepliesSummaryEnabled) {
-      return;
-    }
-
-    return "layer-group";
-  }
 }

app/assets/javascripts/discourse/app/components/topic-map.gjs

@@ -2,15 +2,22 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { hash } from "@ember/helper";
 import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import DButton from "discourse/components/d-button";
 import PluginOutlet from "discourse/components/plugin-outlet";
 import SummaryBox from "discourse/components/summary-box";
 import PrivateMessageMap from "discourse/components/topic-map/private-message-map";
 import TopicMapExpanded from "discourse/components/topic-map/topic-map-expanded";
 import TopicMapSummary from "discourse/components/topic-map/topic-map-summary";
 import concatClass from "discourse/helpers/concat-class";
+import I18n from "discourse-i18n";
 import or from "truth-helpers/helpers/or";
 
+const MIN_POST_READ_TIME = 4;
+
 export default class TopicMap extends Component {
+  @service siteSettings;
   @tracked collapsed = !this.args.model.has_summary;
 
   get userFilters() {
@@ -22,6 +29,53 @@ export default class TopicMap extends Component {
     this.collapsed = !this.collapsed;
   }
 
+  get topRepliesSummaryInfo() {
+    if (this.topRepliesSummaryEnabled) {
+      return I18n.t("summary.enabled_description");
+    }
+
+    const wordCount = this.args.model.word_count;
+    if (wordCount && this.siteSettings.read_time_word_count > 0) {
+      const readingTime = Math.ceil(
+        Math.max(
+          wordCount / this.siteSettings.read_time_word_count,
+          (this.args.model.posts_count * MIN_POST_READ_TIME) / 60
+        )
+      );
+      return I18n.messageFormat("summary.description_time_MF", {
+        replyCount: this.args.model.replyCount,
+        readingTime,
+      });
+    }
+    return I18n.t("summary.description", {
+      count: this.args.model.replyCount,
+    });
+  }
+
+  get topRepliesTitle() {
+    if (this.topRepliesSummaryEnabled) {
+      return;
+    }
+
+    return I18n.t("summary.short_title");
+  }
+
+  get topRepliesLabel() {
+    const label = this.topRepliesSummaryEnabled
+      ? "summary.disable"
+      : "summary.enable";
+
+    return I18n.t(label);
+  }
+
+  get topRepliesIcon() {
+    if (this.topRepliesSummaryEnabled) {
+      return;
+    }
+
+    return "layer-group";
+  }
+
   <template>
     <section class={{concatClass "map" (if this.collapsed "map-collapsed")}}>
       <TopicMapSummary
@@ -43,30 +97,43 @@ export default class TopicMap extends Component {
         />
       </section>
     {{/unless}}
+
     {{#if (or @model.has_summary @model.summarizable)}}
       <section class="information toggle-summary">
-        <SummaryBox
-          @topic={{@model}}
-          @postStream={{@postStream}}
-          @cancelFilter={{@cancelFilter}}
-          @showTopReplies={{@showTopReplies}}
-          @collapseSummary={{@collapseSummary}}
-          @showSummary={{@showSummary}}
-        />
+        {{#if @model.has_summary}}
+          <p>{{htmlSafe this.topRepliesSummaryInfo}}</p>
+        {{/if}}
+        <PluginOutlet
+          @name="topic-map-expanded-after"
+          @defaultGlimmer={{true}}
+          @outletArgs={{hash topic=@model postStream=@postStream}}
+        >
+          <div class="summarization-buttons">
+            {{#if @model.has_summary}}
+              <DButton
+                @action={{if @postStream.summary @cancelFilter @showTopReplies}}
+                @translatedTitle={{this.topRepliesTitle}}
+                @translatedLabel={{this.topRepliesLabel}}
+                @icon={{this.topRepliesIcon}}
+                class="top-replies"
+              />
+            {{/if}}
+          </div>
+
+          {{#if @model.summarizable}}
+            <SummaryBox
+              @topic={{@model}}
+              @postStream={{@postStream}}
+              @cancelFilter={{@cancelFilter}}
+              @showTopReplies={{@showTopReplies}}
+              @collapseSummary={{@collapseSummary}}
+              @showSummary={{@showSummary}}
+            />
+          {{/if}}
+        </PluginOutlet>
       </section>
     {{/if}}
 
-    <PluginOutlet
-      @name="topic-map-expanded-after"
-      @connectorTagName="span"
-      @outletArgs={{hash
-        topic=@model
-        postStream=@postStream
-        cancelFilter=@cancelFilter
-        showTopReplies=@showTopReplies
-      }}
-    />
-
     {{#if @showPMMap}}
       <section class="information private-message-map">
         <PrivateMessageMap

app/assets/stylesheets/common/base/topic-summary.scss

@@ -158,6 +158,10 @@
   .outdated-summary {
     color: var(--primary-medium);
   }
+
+  .old-summary-box-temporary {
+    margin-top: 10px;
+  }
 }
 
 @keyframes ai-summary__indicator-wave {