FIX: Emoji group not actually saving (#15602)

Follow up to 48f70dcd5f. The group
_appeared_ to be saved in the UI until a refresh when it became
clear that the group wasn't actually sent to the DB. This is because
of the way the per-file data was being set with a computed property.
This commit fixes the computed property by changing it to a regular
function and also makes sure the name resetting after the first upload
in multiple uploads works too.

app/assets/javascripts/discourse/app/components/emoji-uploader.js

@@ -1,4 +1,5 @@
 import Component from "@ember/component";
+import { isEmpty } from "@ember/utils";
 import UppyUploadMixin from "discourse/mixins/uppy-upload";
 import { action } from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
@@ -29,22 +30,28 @@ export default Component.extend(UppyUploadMixin, {
 
   @action
   createEmojiGroup(group) {
+    let newEmojiGroups = this.newEmojiGroups;
+    if (group !== DEFAULT_GROUP) {
+      newEmojiGroups = this.emojiGroups.concat([group]).uniq();
+    }
     this.setProperties({
-      newEmojiGroups: this.emojiGroups.concat([group]).uniq(),
+      newEmojiGroups,
       group,
     });
   },
 
-  @discourseComputed("hasName", "name", "hasGroup", "group")
-  data(hasName, name, hasGroup, group) {
+  _perFileData() {
     const payload = {};
 
-    if (hasName) {
-      payload.name = name;
+    if (!isEmpty(this.name)) {
+      payload.name = this.name;
+
+      // if uploading multiple files, we can't use the name for every emoji
+      this.set("name", null);
     }
 
-    if (hasGroup && group !== DEFAULT_GROUP) {
-      payload.group = group;
+    if (!isEmpty(this.group) && this.group !== DEFAULT_GROUP) {
+      payload.group = this.group;
     }
 
     return payload;
@@ -56,6 +63,6 @@ export default Component.extend(UppyUploadMixin, {
 
   uploadDone(upload) {
     this.done(upload, this.group);
-    this.setProperties({ name: null });
+    this.set("name", null);
   },
 });

app/assets/javascripts/discourse/app/mixins/uppy-upload.js

@@ -133,12 +133,9 @@ export default Mixin.create(UppyS3Multipart, {
           return false;
         }
 
-        // for a single file, we want to override file meta with the
-        // data property (which may be computed), to override any keys
-        // specified by this.data (such as name)
-        if (fileCount === 1) {
-          deepMerge(Object.values(files)[0].meta, this.data);
-        }
+        Object.values(files).forEach((file) => {
+          deepMerge(file.meta, this._perFileData());
+        });
       },
     });
 

app/assets/javascripts/discourse/app/templates/components/emoji-uploader.hbs

@@ -5,6 +5,7 @@
     </span>
     <div class="input">
       {{input
+        id="emoji-name"
         name="name"
         placeholderKey="admin.emoji.name"
         value=(readonly name)

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

@@ -8,6 +8,9 @@ import {
 } from "discourse/tests/helpers/qunit-helpers";
 import hbs from "htmlbars-inline-precompile";
 import pretender from "discourse/tests/helpers/create-pretender";
+import { fillIn } from "@ember/test-helpers";
+
+let requestNumber = 1;
 
 discourseModule("Integration | Component | emoji-uploader", function (hooks) {
   setupRenderingTest(hooks);
@@ -19,6 +22,7 @@ discourseModule("Integration | Component | emoji-uploader", function (hooks) {
   }}`;
 
   hooks.beforeEach(function () {
+    requestNumber = 1;
     this.setProperties({
       emojiGroups: ["default", "coolemojis"],
       actions: {
@@ -29,16 +33,30 @@ discourseModule("Integration | Component | emoji-uploader", function (hooks) {
     });
 
     pretender.post("/admin/customize/emojis.json", () => {
-      return [
-        200,
-        { "Content-Type": "application/json" },
-        {
-          group: "default",
-          name: "test",
-          url:
-            "//upload.s3.dualstack.us-east-2.amazonaws.com/original/1X/123.png",
-        },
-      ];
+      if (requestNumber === 1) {
+        return [
+          200,
+          { "Content-Type": "application/json" },
+          {
+            group: "coolemojis",
+            name: "okey",
+            url:
+              "//upload.s3.dualstack.us-east-2.amazonaws.com/original/1X/123.png",
+          },
+        ];
+        requestNumber += 1;
+      } else if (requestNumber === 2) {
+        return [
+          200,
+          { "Content-Type": "application/json" },
+          {
+            group: "coolemojis",
+            name: null,
+            url:
+              "//upload.s3.dualstack.us-east-2.amazonaws.com/original/1X/456.png",
+          },
+        ];
+      }
     });
   });
 
@@ -86,4 +104,40 @@ discourseModule("Integration | Component | emoji-uploader", function (hooks) {
         .trigger("upload-mixin:emoji-uploader:add-files", [image, image2]);
     },
   });
+
+  componentTest(
+    "clears the name after the first upload to avoid duplicate names",
+    {
+      template,
+
+      async test(assert) {
+        const done = assert.async();
+        await selectKit("#emoji-group-selector").expand();
+        await selectKit("#emoji-group-selector").selectRowByValue("coolemojis");
+        await fillIn("#emoji-name", "okey");
+
+        let uploadDoneCount = 0;
+        this.set("doneUpload", (upload) => {
+          if (uploadDoneCount === 0) {
+            assert.equal(upload.name, "okey");
+          }
+          uploadDoneCount += 1;
+
+          if (uploadDoneCount === 1) {
+            assert.equal(this.name, null);
+          }
+
+          if (uploadDoneCount === 2) {
+            done();
+          }
+        });
+
+        const image = createFile("avatar.png");
+        const image2 = createFile("avatar2.png");
+        await this.container
+          .lookup("service:app-events")
+          .trigger("upload-mixin:emoji-uploader:add-files", [image, image2]);
+      },
+    }
+  );
 });