DEV: Convert uploaded-image-list modal to component-based API (#23245)

<img width="660" alt="Screenshot 2023-08-24 at 4 55 01 PM" src="https://github.com/discourse/discourse/assets/50783505/3fb8360d-c8cd-4ff4-acb2-15843eb4f868">

app/assets/javascripts/admin/addon/components/modal/uploaded-image-list.hbs

@@ -0,0 +1,25 @@
+<DModal
+  class="uploaded-image-list"
+  @title={{i18n @model.title}}
+  @closeModal={{@closeModal}}
+>
+  <:body>
+    <div class="selectable-avatars">
+      {{#each this.images as |image|}}
+        <a href class="selectable-avatar" {{on "click" (fn this.remove image)}}>
+          {{bound-avatar-template image "huge"}}
+        </a>
+      {{else}}
+        <p>{{i18n "admin.site_settings.uploaded_image_list.empty"}}</p>
+      {{/each}}
+    </div>
+  </:body>
+  <:footer>
+    <DButton @action={{this.close}} @label="close" />
+    <ImagesUploader
+      @uploading={{this.uploading}}
+      @done={{this.uploadDone}}
+      class="pull-right"
+    />
+  </:footer>
+</DModal>

app/assets/javascripts/admin/addon/components/modal/uploaded-image-list.js

@@ -0,0 +1,26 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+
+export default class UploadedImageList extends Component {
+  @tracked
+  images = this.args.model.value?.length
+    ? this.args.model.value.split("|")
+    : [];
+
+  @action
+  remove(url) {
+    this.images.removeObject(url);
+  }
+
+  @action
+  uploadDone({ url }) {
+    this.images.addObject(url);
+  }
+
+  @action
+  close() {
+    this.args.model.changeValue(this.images.join("|"));
+    this.args.closeModal();
+  }
+}

app/assets/javascripts/admin/addon/components/site-settings/uploaded-image-list.js

@@ -1,16 +1,19 @@
-import { action } from "@ember/object";
 import Component from "@ember/component";
-import showModal from "discourse/lib/show-modal";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import UploadedImageListModal from "admin/components/modal/uploaded-image-list";
 
 export default class UploadedImageList extends Component {
+  @service modal;
+
   @action
   showUploadModal({ value, setting }) {
-    showModal("admin-uploaded-image-list", {
-      admin: true,
-      title: `admin.site_settings.${setting.setting}.title`,
-      model: { value, setting },
-    }).setProperties({
-      save: (v) => this.set("value", v),
+    this.modal.show(UploadedImageListModal, {
+      model: {
+        title: `admin.site_settings.${setting.setting}.title`,
+        changeValue: (v) => this.set("value", v),
+        value,
+      },
     });
   }
 }

app/assets/javascripts/admin/addon/controllers/modals/admin-uploaded-image-list.js

@@ -1,32 +0,0 @@
-import { observes, on } from "@ember-decorators/object";
-import Controller from "@ember/controller";
-import { action } from "@ember/object";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-
-export default class AdminUploadedImageListController extends Controller.extend(
-  ModalFunctionality
-) {
-  @on("init")
-  @observes("model.value")
-  _setup() {
-    const value = this.get("model.value");
-    this.set("images", value && value.length ? value.split("|") : []);
-  }
-
-  @action
-  remove(url, event) {
-    event?.preventDefault();
-    this.images.removeObject(url);
-  }
-
-  @action
-  uploadDone({ url }) {
-    this.images.addObject(url);
-  }
-
-  @action
-  close() {
-    this.save(this.images.join("|"));
-    this.send("closeModal");
-  }
-}

app/assets/javascripts/admin/addon/templates/modal/admin-uploaded-image-list.hbs

@@ -1,19 +0,0 @@
-<DModalBody @class="uploaded-image-list">
-  <div class="selectable-avatars">
-    {{#each this.images as |image|}}
-      <a href class="selectable-avatar" {{on "click" (fn this.remove image)}}>
-        {{bound-avatar-template image "huge"}}
-      </a>
-    {{else}}
-      <p>{{i18n "admin.site_settings.uploaded_image_list.empty"}}</p>
-    {{/each}}
-  </div>
-</DModalBody>
-<div class="modal-footer">
-  <DButton @action={{action "close"}} @label="close" />
-  <ImagesUploader
-    @uploading={{this.uploading}}
-    @done={{action "uploadDone"}}
-    @class="pull-right"
-  />
-</div>

app/assets/javascripts/discourse/app/services/modal.js

@@ -34,7 +34,6 @@ const KNOWN_LEGACY_MODALS = [
   "request-group-membership-form",
   "share-and-invite",
   "tag-upload",
-  "admin-uploaded-image-list",
 ];
 
 const LEGACY_OPTS = new Set([