UX: Easily toggle badges in admin badge list (#20225)

app/assets/javascripts/admin/addon/controllers/admin-badges/show.js

@@ -1,7 +1,6 @@
 import Controller, { inject as controller } from "@ember/controller";
 import { observes } from "discourse-common/utils/decorators";
 import I18n from "I18n";
-
 import { bufferedProperty } from "discourse/mixins/buffered-content";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { next } from "@ember/runloop";
@@ -25,6 +24,14 @@ export default class AdminBadgesShowController extends Controller.extend(
   @tracked savingStatus = "";
   @tracked selectedGraphicType = null;
 
+  get badgeEnabledLabel() {
+    if (this.buffered.get("enabled")) {
+      return "admin.badges.enabled";
+    } else {
+      return "admin.badges.disabled";
+    }
+  }
+
   get badgeTypes() {
     return this.adminBadges.badgeTypes;
   }
@@ -238,4 +245,11 @@ export default class AdminBadgesShowController extends Controller.extend(
       },
     });
   }
+
+  @action
+  toggleBadge() {
+    this.model
+      .save({ enabled: !this.buffered.get("enabled") })
+      .catch(popupAjaxError);
+  }
 }

app/assets/javascripts/admin/addon/templates/admin-badges/show.hbs

@@ -1,4 +1,12 @@
 <DSection @class="current-badge content-body">
+  <div class="control-group current-badge__toggle-badge">
+    <DToggleSwitch
+      @state={{this.buffered.enabled}}
+      @label={{this.badgeEnabledLabel}}
+      {{on "click" this.toggleBadge}}
+    />
+  </div>
+
   <form class="form-horizontal">
     <div class="control-group">
       <label for="name">{{i18n "admin.badges.name"}}</label>
@@ -253,13 +261,6 @@
           {{i18n "admin.badges.show_posts"}}
         </label>
       </div>
-
-      <div>
-        <label>
-          <Input @type="checkbox" @checked={{this.buffered.enabled}} />
-          {{i18n "admin.badges.enabled"}}
-        </label>
-      </div>
     </div>
 
     <div class="buttons">