UX: add stock suspension reasons to suspend dialog. (#10990)

app/assets/javascripts/admin/addon/components/suspension-details.js

@@ -1,4 +1,52 @@
 import Component from "@ember/component";
+import discourseComputed from "discourse-common/utils/decorators";
+import I18n from "I18n";
+import { equal } from "@ember/object/computed";
+import { action } from "@ember/object";
+
+const CUSTOM_REASON_KEY = "custom";
+
 export default Component.extend({
   tagName: "",
+  selectedReason: CUSTOM_REASON_KEY,
+  customReason: "",
+  reasonKeys: [
+    "not_listening_to_staff",
+    "consuming_staff_time",
+    "combatative",
+    "in_wrong_place",
+    "no_constructive_purpose",
+    CUSTOM_REASON_KEY,
+  ],
+  isCustomReason: equal("selectedReason", CUSTOM_REASON_KEY),
+
+  @discourseComputed("reasonKeys")
+  reasons(keys) {
+    return keys.map((key) => {
+      return { id: key, name: I18n.t(`admin.user.suspend_reasons.${key}`) };
+    });
+  },
+
+  @action
+  setSelectedReason(value) {
+    this.set("selectedReason", value);
+    this.setReason();
+  },
+
+  @action
+  setCustomReason(value) {
+    this.set("customReason", value);
+    this.setReason();
+  },
+
+  setReason() {
+    if (this.isCustomReason) {
+      this.set("reason", this.customReason);
+    } else {
+      this.set(
+        "reason",
+        I18n.t(`admin.user.suspend_reasons.${this.selectedReason}`)
+      );
+    }
+  },
 });

app/assets/javascripts/admin/addon/templates/components/suspension-details.hbs

@@ -8,10 +8,20 @@
       {{/if}}
     </div>
   </label>
-  {{text-field
-    value=reason
+  <label>
+    {{i18n "admin.user.suspend_reason_title"}}
+  </label>
+  {{combo-box
+    content=reasons
+    value=selectedReason
     class="suspend-reason"
-    placeholderKey="admin.user.suspend_reason_placeholder"}}
+    onChange=(action setSelectedReason)}}
+  {{#if isCustomReason}}
+    {{text-field
+      value=customReason
+      class="suspend-reason"
+      onChange=(action setCustomReason)}}
+  {{/if}}
 </div>
 
 <label>

app/assets/javascripts/discourse/tests/acceptance/admin-suspend-user-test.js

@@ -83,7 +83,7 @@ acceptance("Admin - Suspend User", function (needs) {
     await suspendUntilCombobox.expand();
     await suspendUntilCombobox.selectRowByValue("tomorrow");
 
-    await fillIn(".suspend-reason", "for breaking the rules");
+    await fillIn("input.suspend-reason", "for breaking the rules");
     await fillIn(".suspend-message", "this is an email reason why");
 
     assert.equal(

app/assets/stylesheets/common/admin/suspend.scss

@@ -5,6 +5,10 @@
 
   .suspend-reason {
     width: 100%;
+
+    &.combo-box {
+      margin-bottom: 9px;
+    }
   }
 
   .suspend-reason-label,

config/locales/client.en.yml

@@ -4513,7 +4513,14 @@ en:
         suspend_reason_label: "Why are you suspending? This text <b>will be visible to everyone</b> on this user's profile page, and will be shown to the user when they try to log in. Keep it short."
         suspend_reason_hidden_label: "Why are you suspending? This text will be shown to the user when they try to log in. Keep it short."
         suspend_reason: "Reason"
-        suspend_reason_placeholder: "Suspension Reason"
+        suspend_reason_title: "Suspension Reason"
+        suspend_reasons:
+          not_listening_to_staff: "Would not listen to staff feedback"
+          consuming_staff_time: "Consumed disproportionate amounts of staff time"
+          combatative: "Too combatative"
+          in_wrong_place: "In the wrong place"
+          no_constructive_purpose: "No constructive purpose to their actions other than creating dissent within the community"
+          custom: "Custom..."
         suspend_message: "Email Message"
         suspend_message_placeholder: "Optionally, provide more information about the suspension and it will be emailed to the user."
         suspended_by: "Suspended by"