DEV: Update watched-word-uploader uppy usage (#29280)

app/assets/javascripts/admin/addon/components/watched-word-uploader.hbs

@@ -2,6 +2,7 @@
   {{d-icon "upload"}}
   {{i18n "admin.watched_words.form.upload"}}
   <input
+    {{did-insert this.uppyUpload.setup}}
     class="hidden-upload-field"
     disabled={{this.addDisabled}}
     type="file"

app/assets/javascripts/admin/addon/components/watched-word-uploader.js

@@ -1,33 +1,29 @@
 import Component from "@ember/component";
 import { alias } from "@ember/object/computed";
+import { getOwner } from "@ember/owner";
+import { service } from "@ember/service";
 import { classNames } from "@ember-decorators/component";
-import { dialog } from "discourse/lib/uploads";
-import UppyUploadMixin from "discourse/mixins/uppy-upload";
+import UppyUpload from "discourse/lib/uppy/uppy-upload";
 import I18n from "discourse-i18n";
 
 @classNames("watched-words-uploader")
-export default class WatchedWordUploader extends Component.extend(
-  UppyUploadMixin
-) {
-  type = "txt";
-  uploadUrl = "/admin/customize/watched_words/upload";
+export default class WatchedWordUploader extends Component {
+  @service dialog;
 
-  @alias("uploading") addDisabled;
-
-  preventDirectS3Uploads = true;
-
-  validateUploadedFilesOptions() {
-    return { skipValidation: true };
-  }
-
-  _perFileData() {
-    return { action_key: this.actionKey };
-  }
-
-  uploadDone() {
-    if (this) {
-      dialog.alert(I18n.t("admin.watched_words.form.upload_successful"));
+  uppyUpload = new UppyUpload(getOwner(this), {
+    id: "watched-word-uploader",
+    type: "txt",
+    uploadUrl: "/admin/customize/watched_words/upload",
+    preventDirectS3Uploads: true,
+    validateUploadedFilesOptions: {
+      skipValidation: true,
+    },
+    perFileData: () => ({ action_key: this.actionKey }),
+    uploadDone: () => {
+      this.dialog.alert(I18n.t("admin.watched_words.form.upload_successful"));
       this.done();
-    }
-  }
+    },
+  });
+
+  @alias("uppyUpload.uploading") addDisabled;
 }

app/assets/javascripts/admin/addon/templates/watched-words-action.hbs

@@ -11,7 +11,6 @@
   />
 
   <WatchedWordUploader
-    @id="watched-word-uploader"
     @uploading={{this.uploading}}
     @actionKey={{this.actionNameKey}}
     @done={{this.uploadComplete}}

app/assets/javascripts/discourse/tests/integration/components/watched-word-uploader-test.js

@@ -1,8 +1,8 @@
+import { getOwner } from "@ember/owner";
 import { render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import sinon from "sinon";
-import { dialog } from "discourse/lib/uploads";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import pretender, { response } from "discourse/tests/helpers/create-pretender";
 import { createFile } from "discourse/tests/helpers/qunit-helpers";
@@ -18,14 +18,16 @@ module("Integration | Component | watched-word-uploader", function (hooks) {
   });
 
   test("sets the proper action key on uploads", async function (assert) {
+    const dialog = getOwner(this).lookup("service:dialog");
     sinon.stub(dialog, "alert");
 
     const done = assert.async();
     this.set("actionNameKey", "flag");
     this.set("doneUpload", function () {
       assert.strictEqual(
-        Object.entries(this._uppyInstance.getState().files)[0][1].meta
-          .action_key,
+        Object.entries(
+          this.uppyUpload.uppyWrapper.uppyInstance.getState().files
+        )[0][1].meta.action_key,
         "flag"
       );
       assert.ok(
@@ -39,7 +41,6 @@ module("Integration | Component | watched-word-uploader", function (hooks) {
 
     await render(hbs`
       <WatchedWordUploader
-        @id="watched-word-uploader"
         @actionKey={{this.actionNameKey}}
         @done={{this.doneUpload}}
       />