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}}
- {{text-field
- value=reason
+
+ {{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}}