From 5fbce985a844af43bee3afeb01bb7c5f674b6c3c Mon Sep 17 00:00:00 2001
From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Date: Tue, 18 Jul 2023 12:31:32 -0500
Subject: [PATCH] DEV: Convert create-invite-bulk modal to component-based API
 (#22549)

This PR converts the `create-invite-bulk` modal to make use of the new component-based API
---
 .../app/components/create-invite-uploader.hbs |  1 +
 .../app/components/create-invite-uploader.js  |  6 +++
 .../components/modal/create-invite-bulk.hbs   | 41 +++++++++++++++++++
 .../app/controllers/create-invite-bulk.js     | 24 -----------
 .../app/controllers/user-invited-show.js      |  4 +-
 .../discourse/app/mixins/uppy-upload.js       | 11 +++--
 .../templates/modal/create-invite-bulk.hbs    | 40 ------------------
 7 files changed, 59 insertions(+), 68 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/components/modal/create-invite-bulk.hbs
 delete mode 100644 app/assets/javascripts/discourse/app/controllers/create-invite-bulk.js
 delete mode 100644 app/assets/javascripts/discourse/app/templates/modal/create-invite-bulk.hbs

diff --git a/app/assets/javascripts/discourse/app/components/create-invite-uploader.hbs b/app/assets/javascripts/discourse/app/components/create-invite-uploader.hbs
index 39521928255..698c898d6e8 100644
--- a/app/assets/javascripts/discourse/app/components/create-invite-uploader.hbs
+++ b/app/assets/javascripts/discourse/app/components/create-invite-uploader.hbs
@@ -7,4 +7,5 @@
     submitDisabled=this.submitDisabled
     startUpload=(action "startUpload")
   )
+  this.setElement
 }}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/create-invite-uploader.js b/app/assets/javascripts/discourse/app/components/create-invite-uploader.js
index 17d29e01d4e..dea920d2c92 100644
--- a/app/assets/javascripts/discourse/app/components/create-invite-uploader.js
+++ b/app/assets/javascripts/discourse/app/components/create-invite-uploader.js
@@ -29,4 +29,10 @@ export default Component.extend(UppyUploadMixin, {
   startUpload() {
     this._startUpload();
   },
+
+  @action
+  setElement(element) {
+    this.set("fileInputEl", element);
+    this._initialize();
+  },
 });
diff --git a/app/assets/javascripts/discourse/app/components/modal/create-invite-bulk.hbs b/app/assets/javascripts/discourse/app/components/modal/create-invite-bulk.hbs
new file mode 100644
index 00000000000..2db39f4a6f1
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/modal/create-invite-bulk.hbs
@@ -0,0 +1,41 @@
+<CreateInviteUploader @autoFindInput={{false}} as |uploader setElement|>
+  <DModal
+    @title={{i18n "user.invited.bulk_invite.text"}}
+    class="create-invite-bulk-modal"
+    @closeModal={{@closeModal}}
+  >
+    <:body>
+      {{#if uploader.uploaded}}
+        {{i18n "user.invited.bulk_invite.success"}}
+      {{else}}
+        {{html-safe (i18n "user.invited.bulk_invite.instructions")}}
+        <input
+          id="csv-file"
+          disabled={{uploader.uploading}}
+          type="file"
+          accept=".csv"
+          {{did-insert setElement}}
+        />
+      {{/if}}
+    </:body>
+    <:footer>
+      {{#unless uploader.uploaded}}
+        <DButton
+          @icon="link"
+          @translatedLabel={{if
+            uploader.uploading
+            (i18n
+              "user.invited.bulk_invite.progress"
+              progress=uploader.uploadProgress
+            )
+            (i18n "user.invited.bulk_invite.text")
+          }}
+          class="btn-primary"
+          @action={{uploader.startUpload}}
+          @disabled={{uploader.submitDisabled}}
+        />
+      {{/unless}}
+      <DButton @label="close" class="btn-primary" @action={{@closeModal}} />
+    </:footer>
+  </DModal>
+</CreateInviteUploader>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/controllers/create-invite-bulk.js b/app/assets/javascripts/discourse/app/controllers/create-invite-bulk.js
deleted file mode 100644
index 0ebeb099924..00000000000
--- a/app/assets/javascripts/discourse/app/controllers/create-invite-bulk.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Controller from "@ember/controller";
-import { action } from "@ember/object";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-
-export default Controller.extend(ModalFunctionality, {
-  data: null,
-
-  onShow() {
-    this.set("data", null);
-  },
-
-  onClose() {
-    if (this.data) {
-      this.data.abort();
-      this.set("data", null);
-    }
-  },
-
-  @action
-  submit(data) {
-    this.set("data", data);
-    data.submit();
-  },
-});
diff --git a/app/assets/javascripts/discourse/app/controllers/user-invited-show.js b/app/assets/javascripts/discourse/app/controllers/user-invited-show.js
index 603306a5594..28ab7321568 100644
--- a/app/assets/javascripts/discourse/app/controllers/user-invited-show.js
+++ b/app/assets/javascripts/discourse/app/controllers/user-invited-show.js
@@ -11,9 +11,11 @@ import showModal from "discourse/lib/show-modal";
 import Invite from "discourse/models/invite";
 import I18n from "I18n";
 import { inject as service } from "@ember/service";
+import CreateInviteBulk from "discourse/components/modal/create-invite-bulk";
 
 export default Controller.extend({
   dialog: service(),
+  modal: service(),
   user: null,
   model: null,
   filter: null,
@@ -77,7 +79,7 @@ export default Controller.extend({
 
   @action
   createInviteCsv() {
-    showModal("create-invite-bulk");
+    this.modal.show(CreateInviteBulk);
   },
 
   @action
diff --git a/app/assets/javascripts/discourse/app/mixins/uppy-upload.js b/app/assets/javascripts/discourse/app/mixins/uppy-upload.js
index 11cf44a1919..c4fc2056c81 100644
--- a/app/assets/javascripts/discourse/app/mixins/uppy-upload.js
+++ b/app/assets/javascripts/discourse/app/mixins/uppy-upload.js
@@ -35,6 +35,7 @@ export default Mixin.create(UppyS3Multipart, ExtendableUploader, {
   id: null,
   uploadRootPath: "/uploads",
   fileInputSelector: ".hidden-upload-field",
+  autoFindInput: true,
 
   uploadDone() {
     warn("You should implement `uploadDone`", {
@@ -68,9 +69,13 @@ export default Mixin.create(UppyS3Multipart, ExtendableUploader, {
 
   @on("didInsertElement")
   _initialize() {
-    this.setProperties({
-      fileInputEl: this.element.querySelector(this.fileInputSelector),
-    });
+    if (this.autoFindInput) {
+      this.setProperties({
+        fileInputEl: this.element.querySelector(this.fileInputSelector),
+      });
+    } else if (!this.fileInputEl) {
+      return;
+    }
     this.set("allowMultipleFiles", this.fileInputEl.multiple);
     this.set("inProgressUploads", []);
 
diff --git a/app/assets/javascripts/discourse/app/templates/modal/create-invite-bulk.hbs b/app/assets/javascripts/discourse/app/templates/modal/create-invite-bulk.hbs
deleted file mode 100644
index de91eda4a0a..00000000000
--- a/app/assets/javascripts/discourse/app/templates/modal/create-invite-bulk.hbs
+++ /dev/null
@@ -1,40 +0,0 @@
-<CreateInviteUploader as |status|>
-  <DModalBody @title="user.invited.bulk_invite.text">
-    {{#if status.uploaded}}
-      {{i18n "user.invited.bulk_invite.success"}}
-    {{else}}
-      {{html-safe (i18n "user.invited.bulk_invite.instructions")}}
-
-      <input
-        id="csv-file"
-        disabled={{status.uploading}}
-        type="file"
-        accept=".csv"
-      />
-    {{/if}}
-  </DModalBody>
-
-  <div class="modal-footer">
-    {{#unless status.uploaded}}
-      <DButton
-        @icon={{if this.isEmail "envelope" "link"}}
-        @translatedLabel={{if
-          status.uploading
-          (i18n
-            "user.invited.bulk_invite.progress" progress=status.uploadProgress
-          )
-          (i18n "user.invited.bulk_invite.text")
-        }}
-        @class="btn-primary"
-        @action={{status.startUpload}}
-        @disabled={{status.submitDisabled}}
-      />
-    {{/unless}}
-
-    <DButton
-      @label="close"
-      @class="btn-primary"
-      @action={{route-action "closeModal"}}
-    />
-  </div>
-</CreateInviteUploader>
\ No newline at end of file