UX: Add show more btn to reviewable item (#21579)

app/assets/javascripts/discourse/app/components/reviewable-flagged-post.hbs

@@ -1,33 +1,40 @@
 <div class="flagged-post-header">
-  <ReviewableTopicLink @reviewable={{this.reviewable}} @tagName="" />
-  <ReviewablePostEdits @reviewable={{this.reviewable}} @tagName="" />
+  <ReviewableTopicLink @reviewable={{@reviewable}} @tagName="" />
+  <ReviewablePostEdits @reviewable={{@reviewable}} @tagName="" />
 </div>
 
 <div class="post-contents-wrapper">
-  <ReviewableCreatedBy
-    @user={{this.reviewable.target_created_by}}
-    @tagName=""
-  />
+  <ReviewableCreatedBy @user={{@reviewable.target_created_by}} @tagName="" />
   <div class="post-contents">
     <ReviewablePostHeader
-      @reviewable={{this.reviewable}}
-      @createdBy={{this.reviewable.target_created_by}}
+      @reviewable={{@reviewable}}
+      @createdBy={{@reviewable.target_created_by}}
       @tagName=""
     />
-    <div class="post-body">
-      <div class="post-body__scroll">
-        {{#if this.reviewable.blank_post}}
-          <p>{{i18n "review.deleted_post"}}</p>
-        {{else}}
-          {{html-safe this.reviewable.cooked}}
-        {{/if}}
-      </div>
+    <div
+      class="post-body {{if this.isCollapsed 'is-collapsed'}}"
+      {{did-insert this.calculatePostBodySize @reviewable}}
+    >
+      {{#if @reviewable.blank_post}}
+        <p>{{i18n "review.deleted_post"}}</p>
+      {{else}}
+        {{html-safe @reviewable.cooked}}
+      {{/if}}
     </div>
+
+    {{#if this.isLongPost}}
+      <DButton
+        @class="btn-default btn-icon post-body__toggle-btn"
+        @action={{this.toggleContent}}
+        @label={{this.collapseButtonProps.label}}
+        @icon={{this.collapseButtonProps.icon}}
+      />
+    {{/if}}
     <span>
       <PluginOutlet
         @name="after-reviewable-flagged-post-body"
         @connectorTagName="div"
-        @outletArgs={{hash model=this.reviewable}}
+        @outletArgs={{hash model=@reviewable}}
       />
     </span>
     {{yield}}

app/assets/javascripts/discourse/app/components/reviewable-flagged-post.js

@@ -1,3 +1,39 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+import { bind } from "discourse-common/utils/decorators";
 
-export default Component.extend({});
+export default class ReviewableFlaggedPost extends Component {
+  @tracked isCollapsed = false;
+  @tracked isLongPost = false;
+  maxPostHeight = 300;
+
+  @action
+  toggleContent() {
+    this.isCollapsed = !this.isCollapsed;
+  }
+
+  @bind
+  calculatePostBodySize(element) {
+    if (element?.offsetHeight > this.maxPostHeight) {
+      this.isCollapsed = true;
+      this.isLongPost = true;
+    } else {
+      this.isCollapsed = false;
+      this.isLongPost = false;
+    }
+  }
+
+  get collapseButtonProps() {
+    if (this.isCollapsed) {
+      return {
+        label: "review.show_more",
+        icon: "chevron-down",
+      };
+    }
+    return {
+      label: "review.show_less",
+      icon: "chevron-up",
+    };
+  }
+}

app/assets/javascripts/discourse/tests/acceptance/review-test.js

@@ -113,9 +113,7 @@ acceptance("Review", function (needs) {
     );
 
     assert.strictEqual(
-      query(
-        ".reviewable-flagged-post .post-body .post-body__scroll"
-      ).innerHTML.trim(),
+      query(".reviewable-flagged-post .post-body").innerHTML.trim(),
       "<b>cooked content</b>"
     );