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="" />
+  <ReviewableTopicLink @reviewable={{@reviewable}} @tagName="" />
-  <ReviewablePostEdits @reviewable={{this.reviewable}} @tagName="" />
+  <ReviewablePostEdits @reviewable={{@reviewable}} @tagName="" />
 </div>
 
 <div class="post-contents-wrapper">
-  <ReviewableCreatedBy
+  <ReviewableCreatedBy @user={{@reviewable.target_created_by}} @tagName="" />
-    @user={{this.reviewable.target_created_by}}
-    @tagName=""
-  />
   <div class="post-contents">
     <ReviewablePostHeader
-      @reviewable={{this.reviewable}}
+      @reviewable={{@reviewable}}
-      @createdBy={{this.reviewable.target_created_by}}
+      @createdBy={{@reviewable.target_created_by}}
       @tagName=""
     />
-    <div class="post-body">
+    <div
-      <div class="post-body__scroll">
+      class="post-body {{if this.isCollapsed 'is-collapsed'}}"
-        {{#if this.reviewable.blank_post}}
+      {{did-insert this.calculatePostBodySize @reviewable}}
+    >
+      {{#if @reviewable.blank_post}}
         <p>{{i18n "review.deleted_post"}}</p>
       {{else}}
-          {{html-safe this.reviewable.cooked}}
+        {{html-safe @reviewable.cooked}}
       {{/if}}
     </div>
-    </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(
+      query(".reviewable-flagged-post .post-body").innerHTML.trim(),
-        ".reviewable-flagged-post .post-body .post-body__scroll"
-      ).innerHTML.trim(),
       "<b>cooked content</b>"
     );
 

app/assets/stylesheets/common/base/reviewables.scss

@@ -313,7 +313,7 @@
 }
 
 .reviewable-scores {
-  margin-top: 1.5rem;
+  margin-top: 1rem;
   min-width: 50%;
   color: var(--primary-high);
 
@@ -470,24 +470,50 @@
     max-width: var(--topic-body-width);
     margin-top: 0.5em;
 
-    &__scroll {
+    &.is-collapsed {
-      max-height: 300px;
+      max-height: 50vh;
-      overflow-y: auto;
+      overflow: hidden;
+
       &:after {
         content: "";
         position: absolute;
+        left: 0;
         bottom: 0;
+        height: 25%;
         width: 100%;
-        height: 1.5em;
+        background: linear-gradient(to bottom, transparent, var(--secondary));
-        background: linear-gradient(
+      }
-          to bottom,
+
-          rgba(var(--secondary-rgb), 0),
+      + .post-body__toggle-btn {
-          rgba(var(--secondary-rgb), 100%)
+        transform: translateX(-50%) translateY(-50%);
-        );
+      }
+    }
+    p {
+      margin-bottom: 0;
+    }
+    &__toggle-btn {
+      background: var(--primary-very-low);
+      color: var(--primary-high);
+      font-size: var(--font-down-2);
+      box-shadow: shadow("dropdown-lite");
+      margin-left: 50%;
+      transform: translateX(-50%);
+      border-radius: 4px;
+
+      .d-icon {
+        color: var(--primary-high);
+      }
+
+      &:hover {
+        background: var(--primary-very-low);
+        color: var(--tertiary);
+
+        .d-icon {
+          color: var(--tertiary);
+        }
       }
     }
 
-    p,
     aside {
       margin: 0 0 1em 0;
     }

config/locales/client.en.yml

@@ -453,6 +453,8 @@ en:
         placeholder: "type the message title, url or id here"
 
     review:
+      show_more: "Show more"
+      show_less: "Show less"
       order_by: "Order by"
       date_filter: "Posted between"
       in_reply_to: "in reply to"

spec/fabricators/post_fabricator.rb

@@ -16,6 +16,23 @@ Fabricator(:post_with_long_raw_content, from: :post) do
       than the typical test post raw content. It really is some long content, folks."
 end
 
+Fabricator(:post_with_very_long_raw_content, from: :post) do
+  raw "This is a sample post with very long raw content. The raw content is actually so long
+      that there is no way it could be longer. It is adding so many characters to the post content
+      so that we can use it in testing for scenarios where a post is very long and might cause issues.
+      The post is so long in fact, that the text is split into various paragraphs. Some people are not
+      very concise in their words. They tend to ramble and ramble on about certain information. This
+      is why we need to make sure that we are going about testing in certain ways so that when people
+      such as those that ramble on, are making posts, we can be sure that the posts are not causing
+      any issues. When issues happen it can cause lots of problems. For example, if a post is too long,
+      it affects the way it can be viewed by others.
+      Depending on the screen size, it may cause a lot of scrolling to take place. This is not good.
+      In certain cases, we want to truncate the content of the post when its too long so that it does
+      not cause issues. This is why we need to make sure that we are testing for these scenarios. I think
+      this post has gotten very long, however, I would like to make sure that it is a bit longer, so I
+      will add one final sentence. This is my final sentence, thank you for reading, goodbye."
+end
+
 Fabricator(:post_with_youtube, from: :post) do
   raw "http://www.youtube.com/watch?v=9bZkp7q19f0"
   cooked '<p><a href="http://www.youtube.com/watch?v=9bZkp7q19f0" class="onebox" target="_blank">http://www.youtube.com/watch?v=9bZkp7q19f0</a></p>'

spec/system/page_objects/pages/review.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Pages
+    class Review < PageObjects::Pages::Base
+      POST_BODY_TOGGLE_SELECTOR = ".post-body__toggle-btn"
+      POST_BODY_COLLAPSED_SELECTOR = ".post-body.is-collapsed"
+
+      def click_post_body_toggle
+        find(POST_BODY_TOGGLE_SELECTOR).click
+      end
+
+      def has_post_body_toggle?
+        page.has_css?(POST_BODY_TOGGLE_SELECTOR)
+      end
+
+      def has_no_post_body_toggle?
+        page.has_no_css?(POST_BODY_TOGGLE_SELECTOR)
+      end
+
+      def has_post_body_collapsed?
+        page.has_css?(POST_BODY_COLLAPSED_SELECTOR)
+      end
+
+      def has_no_post_body_collapsed?
+        page.has_no_css?(POST_BODY_COLLAPSED_SELECTOR)
+      end
+    end
+  end
+end

spec/system/reviewables_spec.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+describe "Reviewables", type: :system, js: true do
+  let(:review_page) { PageObjects::Pages::Review.new }
+  fab!(:admin) { Fabricate(:admin) }
+  fab!(:theme) { Fabricate(:theme) }
+  fab!(:long_post) { Fabricate(:post_with_very_long_raw_content) }
+
+  before { sign_in(admin) }
+
+  describe "when there is a reviewable with a long post" do
+    fab!(:long_reviewable) { Fabricate(:reviewable_flagged_post, target: long_post) }
+
+    it "should show a button to expand/collapse the post content" do
+      visit("/review")
+      expect(review_page).to have_post_body_collapsed
+      expect(review_page).to have_post_body_toggle
+      review_page.click_post_body_toggle
+      expect(review_page).to have_no_post_body_collapsed
+      review_page.click_post_body_toggle
+      expect(review_page).to have_post_body_collapsed
+    end
+  end
+
+  describe "when there is a reviewable with a short post" do
+    fab!(:short_reviewable) { Fabricate(:reviewable_flagged_post) }
+
+    it "should not show a button to expand/collapse the post content" do
+      visit("/review")
+      expect(review_page).to have_no_post_body_collapsed
+      expect(review_page).to have_no_post_body_toggle
+    end
+  end
+end