DEV: Convert EmojiUploader to FormKit

app/assets/javascripts/admin/addon/components/emoji-uploader.hbs

@@ -1,51 +1,44 @@
-<div class="emoji-uploader form-horizontal">
-  <div class="control-group">
-    <span class="label">
-      {{i18n "admin.emoji.name"}}
-    </span>
-    <div class="input">
-      <Input
-        id="emoji-name"
-        name="name"
-        placeholder={{i18n "admin.emoji.name"}}
-        @value={{readonly this.name}}
-        {{on "input" (with-event-value (fn (mut this.name)))}}
-      />
-    </div>
-  </div>
-  <div class="control-group">
-    <span class="label">
-      {{i18n "admin.emoji.group"}}
-    </span>
-    <div class="input">
-      <ComboBox
-        @name="group"
-        @id="emoji-group-selector"
-        @value={{this.group}}
-        @content={{this.newEmojiGroups}}
-        @onChange={{action "createEmojiGroup"}}
-        @valueProperty={{null}}
-        @nameProperty={{null}}
-        @options={{hash allowAny=true}}
-      />
-    </div>
-  </div>
-  <div class="control-group">
-    <div class="input">
-      <input
-        {{did-insert this.uppyUpload.setup}}
-        class="hidden-upload-field"
-        disabled={{this.uppyUpload.uploading}}
-        type="file"
-        multiple="true"
-        accept=".png,.gif"
-      />
-      <DButton
-        @translatedLabel={{this.buttonLabel}}
-        @action={{this.chooseFiles}}
-        @disabled={{this.uppyUpload.uploading}}
-        class="btn-default"
-      />
-    </div>
-  </div>
+<div class="admin-config-page__main-area">
+  <Form
+    @data={{this.formData}}
+    @onSubmit={{this.save}}
+    as |form|
+  >
+    <form.Field
+      @name="name"
+      @title={{i18n "admin.emoji.name"}}
+      @format="medium"
+      as |field|>
+      <field.Input />
+    </form.Field>
+
+    <form.Field
+      @name="group"
+      @title={{i18n "admin.emoji.group"}}
+      as |field|>
+      <field.Custom>
+        <ComboBox
+          @name="group"
+          @id="emoji-group-selector"
+          @value={{this.group}}
+          @content={{this.newEmojiGroups}}
+          @onChange={{action "createEmojiGroup"}}
+          @valueProperty={{null}}
+          @nameProperty={{null}}
+          @options={{hash allowAny=true}}
+        />
+      </field.Custom>
+    </form.Field>
+
+    <form.Field
+      @name="image"
+      @title="Image"
+      @format="medium"
+      @validation="required"
+      as |field|>
+      <field.Image @type="emoji" />
+    </form.Field>
+
+    <form.Submit @label="admin.emoji.add" />
+  </Form>
 </div>

config/locales/client.en.yml

@@ -7206,7 +7206,7 @@ en:
         title: "Emoji"
         description: "Add new emoji that will be available to everyone. Drag and drop multiple files at once without entering a name to create emojis using their file names. The selected group will be used for all files that are added at the same time. You can also click 'Add New Emoji' to open the file picker."
         new: "Add"
-        add: "Add New Emoji"
+        add: "Add new emoji"
         choose_files: "Choose Files"
         uploading: "Uploading…"
         name: "Name"