From c5bead43696e06e99b518a3e19fadfaeb906ae9e Mon Sep 17 00:00:00 2001
From: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>
Date: Thu, 6 Feb 2025 12:47:31 +1100
Subject: [PATCH] FEATURE: show flag description along with additional reason
 (#31210)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Currently, the description is hidden when an additional reason field
appears on the flag modal. It can contain important guidance and
therefore should never be hidden.

<img width="671" alt="Screenshot 2025-02-06 at 9 59 42 am"
src="https://github.com/user-attachments/assets/97629059-f346-4696-b720-9a9da3faf8f8"
/>
---
 .../javascripts/discourse/app/components/flag-action-type.hbs | 4 +---
 .../javascripts/discourse/app/components/flag-action-type.js  | 3 +--
 spec/system/flagging_post_spec.rb                             | 1 +
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/flag-action-type.hbs b/app/assets/javascripts/discourse/app/components/flag-action-type.hbs
index 89d7f15914a..2bc094db0e2 100644
--- a/app/assets/javascripts/discourse/app/components/flag-action-type.hbs
+++ b/app/assets/javascripts/discourse/app/components/flag-action-type.hbs
@@ -48,9 +48,7 @@
         />
         <div class="flag-action-type-details">
           <strong>{{this.formattedName}}</strong>
-          {{#if this.showDescription}}
-            <div class="description">{{html-safe this.description}}</div>
-          {{/if}}
+          <div class="description">{{html-safe this.description}}</div>
           {{#if this.showMessageInput}}
             <Textarea
               name="message"
diff --git a/app/assets/javascripts/discourse/app/components/flag-action-type.js b/app/assets/javascripts/discourse/app/components/flag-action-type.js
index ecb1fa632c6..e4df1bb158d 100644
--- a/app/assets/javascripts/discourse/app/components/flag-action-type.js
+++ b/app/assets/javascripts/discourse/app/components/flag-action-type.js
@@ -1,5 +1,5 @@
 import Component from "@ember/component";
-import { and, equal, not } from "@ember/object/computed";
+import { and, equal } from "@ember/object/computed";
 import { tagName } from "@ember-decorators/component";
 import discourseComputed from "discourse/lib/decorators";
 import { MAX_MESSAGE_LENGTH } from "discourse/models/post-action-type";
@@ -9,7 +9,6 @@ import { i18n } from "discourse-i18n";
 export default class FlagActionType extends Component {
   @and("flag.require_message", "selected") showMessageInput;
   @and("flag.isIllegal", "selected") showConfirmation;
-  @not("showMessageInput") showDescription;
   @equal("flag.name_key", "notify_user") isNotifyUser;
 
   @discourseComputed("flag.name_key")
diff --git a/spec/system/flagging_post_spec.rb b/spec/system/flagging_post_spec.rb
index 80f95772f01..e08d12239c3 100644
--- a/spec/system/flagging_post_spec.rb
+++ b/spec/system/flagging_post_spec.rb
@@ -44,6 +44,7 @@ describe "Flagging post", type: :system do
       topic_page.click_post_action_button(post_to_flag, :flag)
       flag_modal.choose_type(:illegal)
 
+      expect(flag_modal).to have_css(".illegal .description")
       expect(flag_modal).to have_css(".flag-confirmation")
 
       flag_modal.fill_message("This looks totally illegal to me.")