From 67de0367ffd21e914b22eb9b0e46c835010cc9f7 Mon Sep 17 00:00:00 2001
From: Vinoth Kannan <vinothkannan@vinkas.com>
Date: Wed, 11 Nov 2020 01:01:28 +0530
Subject: [PATCH] UX: add stock suspension reasons to suspend dialog. (#10990)

---
 .../addon/components/suspension-details.js    | 48 +++++++++++++++++++
 .../components/suspension-details.hbs         | 16 +++++--
 .../acceptance/admin-suspend-user-test.js     |  2 +-
 .../stylesheets/common/admin/suspend.scss     |  4 ++
 config/locales/client.en.yml                  |  9 +++-
 5 files changed, 74 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/components/suspension-details.js b/app/assets/javascripts/admin/addon/components/suspension-details.js
index 0e6d50b17d4..f9edc0e225a 100644
--- a/app/assets/javascripts/admin/addon/components/suspension-details.js
+++ b/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}`)
+      );
+    }
+  },
 });
diff --git a/app/assets/javascripts/admin/addon/templates/components/suspension-details.hbs b/app/assets/javascripts/admin/addon/templates/components/suspension-details.hbs
index b7ed0428d3b..97fcbd8dcd0 100644
--- a/app/assets/javascripts/admin/addon/templates/components/suspension-details.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/tests/acceptance/admin-suspend-user-test.js b/app/assets/javascripts/discourse/tests/acceptance/admin-suspend-user-test.js
index a54ef489da0..a18b723e908 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/admin-suspend-user-test.js
+++ b/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(
diff --git a/app/assets/stylesheets/common/admin/suspend.scss b/app/assets/stylesheets/common/admin/suspend.scss
index f8c0c943e5a..4bc18ef05a8 100644
--- a/app/assets/stylesheets/common/admin/suspend.scss
+++ b/app/assets/stylesheets/common/admin/suspend.scss
@@ -5,6 +5,10 @@
 
   .suspend-reason {
     width: 100%;
+
+    &.combo-box {
+      margin-bottom: 9px;
+    }
   }
 
   .suspend-reason-label,
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 8b6c41e8cd5..ac165e5cd3a 100644
--- a/config/locales/client.en.yml
+++ b/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"