From ac4e854a04d920e265ce2ddd4fa996620e9d2b28 Mon Sep 17 00:00:00 2001
From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Date: Mon, 14 Aug 2023 12:03:28 -0500
Subject: [PATCH] DEV: Convert `edit-badge-groupings` modal to component-based
 API (#22984)

<img width="603" alt="Screenshot 2023-08-04 at 4 43 02 PM" src="https://github.com/discourse/discourse/assets/50783505/033192cc-2c5c-4be6-adde-9dd89b6b05c3">
<img width="594" alt="Screenshot 2023-08-04 at 4 42 59 PM" src="https://github.com/discourse/discourse/assets/50783505/efe8d8fe-f06c-4940-9c99-66a2f8fb3532">
---
 .../components/modal/edit-badge-groupings.hbs |  55 ++++++++++
 .../components/modal/edit-badge-groupings.js  |  84 ++++++++++++++
 .../modals/admin-edit-badge-groupings.js      | 103 ------------------
 .../admin/addon/routes/admin-badges/show.js   |  14 ++-
 .../modal/admin-edit-badge-groupings.hbs      |  46 --------
 .../discourse/app/services/modal.js           |   1 -
 6 files changed, 152 insertions(+), 151 deletions(-)
 create mode 100644 app/assets/javascripts/admin/addon/components/modal/edit-badge-groupings.hbs
 create mode 100644 app/assets/javascripts/admin/addon/components/modal/edit-badge-groupings.js
 delete mode 100644 app/assets/javascripts/admin/addon/controllers/modals/admin-edit-badge-groupings.js
 delete mode 100644 app/assets/javascripts/admin/addon/templates/modal/admin-edit-badge-groupings.hbs

diff --git a/app/assets/javascripts/admin/addon/components/modal/edit-badge-groupings.hbs b/app/assets/javascripts/admin/addon/components/modal/edit-badge-groupings.hbs
new file mode 100644
index 00000000000..44b2d9a282b
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/components/modal/edit-badge-groupings.hbs
@@ -0,0 +1,55 @@
+<DModal
+  @title={{i18n "admin.badges.badge_groupings.modal_title"}}
+  @bodyClass="badge-groupings-modal"
+  @closeModal={{@closeModal}}
+>
+  <:body>
+    <div class="badge-groupings">
+      <ul class="badge-groupings-list">
+        {{#each this.workingCopy as |wc|}}
+          <li class="badge-grouping-item">
+            <div class="badge-grouping">
+              {{#if wc.editing}}
+                <Input @value={{wc.name}} class="badge-grouping-name-input" />
+              {{else}}
+                <span>{{wc.displayName}}</span>
+              {{/if}}
+            </div>
+            <div class="actions">
+              {{#if wc.editing}}
+                <DButton @action={{fn (mut wc.editing) false}} @icon="check" />
+              {{else}}
+                <DButton
+                  @action={{fn (mut wc.editing) true}}
+                  @disabled={{wc.system}}
+                  @icon="pencil-alt"
+                />
+              {{/if}}
+              <DButton @action={{fn this.up wc}} @icon="chevron-up" />
+              <DButton @action={{fn this.down wc}} @icon="chevron-down" />
+              <DButton
+                @action={{fn this.delete wc}}
+                @disabled={{wc.system}}
+                @icon="times"
+              />
+            </div>
+          </li>
+        {{/each}}
+      </ul>
+    </div>
+    <DButton @action={{this.add}} @label="admin.badges.new" />
+  </:body>
+  <:footer>
+    <DButton
+      @action={{this.saveAll}}
+      @label="admin.badges.save"
+      class="btn-primary"
+      @disabled={{this.submitDisabled}}
+    />
+    <DButton
+      class="btn-flat d-modal-cancel"
+      @action={{@closeModal}}
+      @label="cancel"
+    />
+  </:footer>
+</DModal>
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/addon/components/modal/edit-badge-groupings.js b/app/assets/javascripts/admin/addon/components/modal/edit-badge-groupings.js
new file mode 100644
index 00000000000..de40d2b6cec
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/components/modal/edit-badge-groupings.js
@@ -0,0 +1,84 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { inject as service } from "@ember/service";
+import { action } from "@ember/object";
+import I18n from "I18n";
+import { A } from "@ember/array";
+import { ajax } from "discourse/lib/ajax";
+import { TrackedArray } from "@ember-compat/tracked-built-ins";
+
+export default class EditBadgeGroupings extends Component {
+  @service dialog;
+  @service store;
+
+  @tracked workingCopy = new TrackedArray();
+
+  constructor() {
+    super(...arguments);
+    let copy = A();
+    if (this.args.model.badgeGroupings) {
+      this.args.model.badgeGroupings.forEach((o) =>
+        copy.pushObject(this.store.createRecord("badge-grouping", o))
+      );
+    }
+    this.workingCopy = copy;
+  }
+
+  @action
+  up(item) {
+    this.moveItem(item, -1);
+  }
+
+  @action
+  down(item) {
+    this.moveItem(item, 1);
+  }
+
+  @action
+  delete(item) {
+    this.workingCopy.removeObject(item);
+  }
+
+  @action
+  add() {
+    const obj = this.store.createRecord("badge-grouping", {
+      editing: true,
+      name: I18n.t("admin.badges.badge_grouping"),
+    });
+    this.workingCopy.pushObject(obj);
+  }
+
+  @action
+  async saveAll() {
+    const groupIds = this.workingCopy.map((i) => i.id || -1);
+    const names = this.workingCopy.map((i) => i.name);
+    try {
+      const data = await ajax("/admin/badges/badge_groupings", {
+        data: { ids: groupIds, names },
+        type: "POST",
+      });
+      this.workingCopy.clear();
+      data.badge_groupings.forEach((badgeGroup) => {
+        this.workingCopy.pushObject(
+          this.store.createRecord("badge-grouping", {
+            ...badgeGroup,
+            editing: false,
+          })
+        );
+      });
+      this.args.model.updateGroupings(this.workingCopy);
+      this.args.closeModal();
+    } catch {
+      this.dialog.alert(I18n.t("generic_error"));
+    }
+  }
+
+  moveItem(item, delta) {
+    const index = this.workingCopy.indexOf(item);
+    if (index + delta < 0 || index + delta >= this.workingCopy.length) {
+      return;
+    }
+    this.workingCopy.removeAt(index);
+    this.workingCopy.insertAt(index + delta, item);
+  }
+}
diff --git a/app/assets/javascripts/admin/addon/controllers/modals/admin-edit-badge-groupings.js b/app/assets/javascripts/admin/addon/controllers/modals/admin-edit-badge-groupings.js
deleted file mode 100644
index d23b9131ed1..00000000000
--- a/app/assets/javascripts/admin/addon/controllers/modals/admin-edit-badge-groupings.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import { action } from "@ember/object";
-import { inject as service } from "@ember/service";
-import { A } from "@ember/array";
-import Controller from "@ember/controller";
-import I18n from "I18n";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import { ajax } from "discourse/lib/ajax";
-import { observes } from "discourse-common/utils/decorators";
-
-export default class AdminEditBadgeGroupingsController extends Controller.extend(
-  ModalFunctionality
-) {
-  @service dialog;
-
-  @observes("model")
-  modelChanged() {
-    const model = this.model;
-    const copy = A();
-    const store = this.store;
-
-    if (model) {
-      model.forEach((o) =>
-        copy.pushObject(store.createRecord("badge-grouping", o))
-      );
-    }
-
-    this.set("workingCopy", copy);
-  }
-
-  moveItem(item, delta) {
-    const copy = this.workingCopy;
-    const index = copy.indexOf(item);
-    if (index + delta < 0 || index + delta >= copy.length) {
-      return;
-    }
-
-    copy.removeAt(index);
-    copy.insertAt(index + delta, item);
-  }
-
-  @action
-  up(item) {
-    this.moveItem(item, -1);
-  }
-
-  @action
-  down(item) {
-    this.moveItem(item, 1);
-  }
-
-  @action
-  delete(item) {
-    this.workingCopy.removeObject(item);
-  }
-
-  @action
-  cancel() {
-    this.setProperties({ model: null, workingCopy: null });
-    this.send("closeModal");
-  }
-
-  @action
-  edit(item) {
-    item.set("editing", true);
-  }
-
-  @action
-  save(item) {
-    item.set("editing", false);
-  }
-
-  @action
-  add() {
-    const obj = this.store.createRecord("badge-grouping", {
-      editing: true,
-      name: I18n.t("admin.badges.badge_grouping"),
-    });
-    this.workingCopy.pushObject(obj);
-  }
-
-  @action
-  saveAll() {
-    let items = this.workingCopy;
-    const groupIds = items.map((i) => i.get("id") || -1);
-    const names = items.map((i) => i.get("name"));
-
-    ajax("/admin/badges/badge_groupings", {
-      data: { ids: groupIds, names },
-      type: "POST",
-    }).then(
-      (data) => {
-        items = this.model;
-        items.clear();
-        data.badge_groupings.forEach((g) => {
-          items.pushObject(this.store.createRecord("badge-grouping", g));
-        });
-        this.setProperties({ model: null, workingCopy: null });
-        this.send("closeModal");
-      },
-      () => this.dialog.alert(I18n.t("generic_error"))
-    );
-  }
-}
diff --git a/app/assets/javascripts/admin/addon/routes/admin-badges/show.js b/app/assets/javascripts/admin/addon/routes/admin-badges/show.js
index b17d253b666..cb7fa0d4ea4 100644
--- a/app/assets/javascripts/admin/addon/routes/admin-badges/show.js
+++ b/app/assets/javascripts/admin/addon/routes/admin-badges/show.js
@@ -5,9 +5,11 @@ import { ajax } from "discourse/lib/ajax";
 import { action, get } from "@ember/object";
 import showModal from "discourse/lib/show-modal";
 import { inject as service } from "@ember/service";
+import EditBadgeGroupingsModal from "../../components/modal/edit-badge-groupings";
 
 export default class AdminBadgesShowRoute extends Route {
   @service dialog;
+  @service modal;
 
   serialize(m) {
     return { badge_id: get(m, "id") || "new" };
@@ -37,7 +39,17 @@ export default class AdminBadgesShowRoute extends Route {
   @action
   editGroupings() {
     const model = this.controllerFor("admin-badges").get("badgeGroupings");
-    showModal("admin-edit-badge-groupings", { model, admin: true });
+    this.modal.show(EditBadgeGroupingsModal, {
+      model: {
+        badgeGroupings: model,
+        updateGroupings: this.updateGroupings,
+      },
+    });
+  }
+
+  @action
+  updateGroupings(groupings) {
+    this.controllerFor("admin-badges").set("badgeGroupings", groupings);
   }
 
   @action
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-edit-badge-groupings.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-edit-badge-groupings.hbs
deleted file mode 100644
index 5c786aaac4c..00000000000
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-edit-badge-groupings.hbs
+++ /dev/null
@@ -1,46 +0,0 @@
-<DModalBody
-  @title="admin.badges.badge_groupings.modal_title"
-  @class="badge-groupings-modal"
->
-  <div class="badge-groupings">
-    <ul class="badge-groupings-list">
-      {{#each this.workingCopy as |wc|}}
-        <li class="badge-grouping-item">
-          <div class="badge-grouping">
-            {{#if wc.editing}}
-              <Input @value={{wc.name}} class="badge-grouping-name-input" />
-              <DButton @action={{action "save" wc}} @icon="check" />
-            {{else}}
-              <span>{{wc.displayName}}</span>
-            {{/if}}
-          </div>
-          <div class="actions">
-            <DButton
-              @action={{action "edit" wc}}
-              @disabled={{wc.system}}
-              @icon="pencil-alt"
-            />
-            <DButton @action={{action "up" wc}} @icon="chevron-up" />
-            <DButton @action={{action "down" wc}} @icon="chevron-down" />
-            <DButton
-              @action={{action "delete" wc}}
-              @disabled={{wc.system}}
-              @icon="times"
-            />
-          </div>
-        </li>
-      {{/each}}
-    </ul>
-  </div>
-  <DButton @action={{action "add"}} @label="admin.badges.new" />
-</DModalBody>
-
-<div class="modal-footer">
-  <DButton
-    @action={{action "saveAll"}}
-    @label="admin.badges.save"
-    @class="btn-primary"
-    @disabled={{this.submitDisabled}}
-  />
-  <DModalCancel @close={{route-action "closeModal"}} />
-</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/services/modal.js b/app/assets/javascripts/discourse/app/services/modal.js
index f50eefa58cf..f1d5f0e7d51 100644
--- a/app/assets/javascripts/discourse/app/services/modal.js
+++ b/app/assets/javascripts/discourse/app/services/modal.js
@@ -47,7 +47,6 @@ const KNOWN_LEGACY_MODALS = [
   "user-status",
   "admin-penalize-user",
   "admin-badge-preview",
-  "admin-edit-badge-groupings",
   "admin-reseed",
   "admin-theme-item",
   "admin-color-scheme-select-base",