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/assets/javascripts/discourse/app/components/create-invite-uploader.hbs

@@ -7,4 +7,5 @@
     submitDisabled=this.submitDisabled
     startUpload=(action "startUpload")
   )
+  this.setElement
 }}

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();
+  },
 });

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>

app/assets/javascripts/discourse/app/controllers/create-invite-bulk.js

@@ -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();
-  },
-});

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

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", []);
 

app/assets/javascripts/discourse/app/templates/modal/create-invite-bulk.hbs

@@ -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>