From 34f502f68d15835c6c2c73ae97f96641ea833718 Mon Sep 17 00:00:00 2001
From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Date: Fri, 25 Aug 2023 09:20:14 -0500
Subject: [PATCH] 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">
---
 .../components/modal/uploaded-image-list.hbs  | 25 +++++++++++++++
 .../components/modal/uploaded-image-list.js   | 26 +++++++++++++++
 .../site-settings/uploaded-image-list.js      | 19 ++++++-----
 .../modals/admin-uploaded-image-list.js       | 32 -------------------
 .../modal/admin-uploaded-image-list.hbs       | 19 -----------
 .../discourse/app/services/modal.js           |  1 -
 6 files changed, 62 insertions(+), 60 deletions(-)
 create mode 100644 app/assets/javascripts/admin/addon/components/modal/uploaded-image-list.hbs
 create mode 100644 app/assets/javascripts/admin/addon/components/modal/uploaded-image-list.js
 delete mode 100644 app/assets/javascripts/admin/addon/controllers/modals/admin-uploaded-image-list.js
 delete mode 100644 app/assets/javascripts/admin/addon/templates/modal/admin-uploaded-image-list.hbs

diff --git a/app/assets/javascripts/admin/addon/components/modal/uploaded-image-list.hbs b/app/assets/javascripts/admin/addon/components/modal/uploaded-image-list.hbs
new file mode 100644
index 00000000000..26212ebbab3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/addon/components/modal/uploaded-image-list.js b/app/assets/javascripts/admin/addon/components/modal/uploaded-image-list.js
new file mode 100644
index 00000000000..fadd2905b34
--- /dev/null
+++ b/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();
+  }
+}
diff --git a/app/assets/javascripts/admin/addon/components/site-settings/uploaded-image-list.js b/app/assets/javascripts/admin/addon/components/site-settings/uploaded-image-list.js
index 4d241b84f74..c71fa2ae597 100644
--- a/app/assets/javascripts/admin/addon/components/site-settings/uploaded-image-list.js
+++ b/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,
+      },
     });
   }
 }
diff --git a/app/assets/javascripts/admin/addon/controllers/modals/admin-uploaded-image-list.js b/app/assets/javascripts/admin/addon/controllers/modals/admin-uploaded-image-list.js
deleted file mode 100644
index 0b1503a83d7..00000000000
--- a/app/assets/javascripts/admin/addon/controllers/modals/admin-uploaded-image-list.js
+++ /dev/null
@@ -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");
-  }
-}
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-uploaded-image-list.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-uploaded-image-list.hbs
deleted file mode 100644
index 4d5843195d7..00000000000
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-uploaded-image-list.hbs
+++ /dev/null
@@ -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>
\ 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 cc1c62724f5..2891236b1b3 100644
--- a/app/assets/javascripts/discourse/app/services/modal.js
+++ b/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([