DEV: Add class name of action type for flag-action-type container (#23972)

app/assets/javascripts/discourse/app/components/flag-action-type.hbs

@@ -1,72 +1,74 @@
-{{#if this.isNotifyUser}}
-  <h3>{{this.formattedName}}</h3>
-  <div class="controls">
-    <label class="radio">
-      <input
-        id="radio_{{this.flag.name_key}}"
-        {{on "click" (action "changePostActionType" this.flag)}}
-        type="radio"
-        name="post_action_type_index"
-      />
+<div class={{this.wrapperClassNames}}>
+  {{#if this.isNotifyUser}}
+    <h3>{{this.formattedName}}</h3>
+    <div class="controls">
+      <label class="radio">
+        <input
+          id="radio_{{this.flag.name_key}}"
+          {{on "click" (action "changePostActionType" this.flag)}}
+          type="radio"
+          name="post_action_type_index"
+        />
 
-      <div class="flag-action-type-details">
-        <span class="description">{{html-safe this.flag.description}}</span>
-        {{#if this.showMessageInput}}
-          <Textarea
-            name="message"
-            class="flag-message"
-            placeholder={{this.customPlaceholder}}
-            aria-label={{i18n "flagging.notify_user_textarea_label"}}
-            @value={{this.message}}
-          />
-          <div
-            class={{concat-class
-              "custom-message-length"
-              this.customMessageLengthClasses
-            }}
-          >
-            {{this.customMessageLength}}
-          </div>
-        {{/if}}
-      </div>
-    </label>
-  </div>
-  {{#if this.staffFlagsAvailable}}
-    <hr />
-    <h3>{{i18n "flagging.notify_staff"}}</h3>
+        <div class="flag-action-type-details">
+          <span class="description">{{html-safe this.flag.description}}</span>
+          {{#if this.showMessageInput}}
+            <Textarea
+              name="message"
+              class="flag-message"
+              placeholder={{this.customPlaceholder}}
+              aria-label={{i18n "flagging.notify_user_textarea_label"}}
+              @value={{this.message}}
+            />
+            <div
+              class={{concat-class
+                "custom-message-length"
+                this.customMessageLengthClasses
+              }}
+            >
+              {{this.customMessageLength}}
+            </div>
+          {{/if}}
+        </div>
+      </label>
+    </div>
+    {{#if this.staffFlagsAvailable}}
+      <hr />
+      <h3>{{i18n "flagging.notify_staff"}}</h3>
+    {{/if}}
+  {{else}}
+    <div class="controls {{this.flag.name_key}}">
+      <label class="radio">
+        <input
+          id="radio_{{this.flag.name_key}}"
+          {{on "click" (action "changePostActionType" this.flag)}}
+          type="radio"
+          name="post_action_type_index"
+        />
+        <div class="flag-action-type-details">
+          <strong>{{this.formattedName}}</strong>
+          {{#if this.showDescription}}
+            <div class="description">{{html-safe this.description}}</div>
+          {{/if}}
+          {{#if this.showMessageInput}}
+            <Textarea
+              name="message"
+              class="flag-message"
+              placeholder={{this.customPlaceholder}}
+              aria-label={{i18n "flagging.notify_moderators_textarea_label"}}
+              @value={{this.message}}
+            />
+            <div
+              class={{concat-class
+                "custom-message-length"
+                this.customMessageLengthClasses
+              }}
+            >
+              {{this.customMessageLength}}
+            </div>
+          {{/if}}
+        </div>
+      </label>
+    </div>
   {{/if}}
-{{else}}
-  <div class="controls {{this.flag.name_key}}">
-    <label class="radio">
-      <input
-        id="radio_{{this.flag.name_key}}"
-        {{on "click" (action "changePostActionType" this.flag)}}
-        type="radio"
-        name="post_action_type_index"
-      />
-      <div class="flag-action-type-details">
-        <strong>{{this.formattedName}}</strong>
-        {{#if this.showDescription}}
-          <div class="description">{{html-safe this.description}}</div>
-        {{/if}}
-        {{#if this.showMessageInput}}
-          <Textarea
-            name="message"
-            class="flag-message"
-            placeholder={{this.customPlaceholder}}
-            aria-label={{i18n "flagging.notify_moderators_textarea_label"}}
-            @value={{this.message}}
-          />
-          <div
-            class={{concat-class
-              "custom-message-length"
-              this.customMessageLengthClasses
-            }}
-          >
-            {{this.customMessageLength}}
-          </div>
-        {{/if}}
-      </div>
-    </label>
-  </div>
-{{/if}}
+</div>

app/assets/javascripts/discourse/app/components/flag-action-type.js

@@ -5,7 +5,12 @@ import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
 export default Component.extend({
-  classNames: ["flag-action-type"],
+  tagName: "",
+
+  @discourseComputed("flag.name_key")
+  wrapperClassNames(nameKey) {
+    return `flag-action-type ${nameKey}`;
+  },
 
   @discourseComputed("flag.name_key")
   customPlaceholder(nameKey) {