DEV: jquery removal/listeners/cleanup of permalink form (#14944)

- Removes jquery
- Removes a not unregistered listener and uses component event
- Removes external-url class as it was only valid in one case of the dropdown
- Uses @action
- Tagless
- Other minor changes

app/assets/javascripts/admin/addon/components/permalink-form.js

@@ -2,15 +2,18 @@ import Component from "@ember/component";
 import I18n from "I18n";
 import Permalink from "admin/models/permalink";
 import bootbox from "bootbox";
-import discourseComputed from "discourse-common/utils/decorators";
+import discourseComputed, { bind } from "discourse-common/utils/decorators";
 import { fmt } from "discourse/lib/computed";
 import { schedule } from "@ember/runloop";
+import { action } from "@ember/object";
 
 export default Component.extend({
-  classNames: ["permalink-form"],
+  tagName: "",
   formSubmitted: false,
   permalinkType: "topic_id",
   permalinkTypePlaceholder: fmt("permalinkType", "admin.permalink.%@"),
+  action: null,
+  permalinkTypeValue: null,
 
   @discourseComputed
   permalinkTypes() {
@@ -23,40 +26,36 @@ export default Component.extend({
     ];
   },
 
-  didInsertElement() {
-    this._super(...arguments);
-
-    schedule("afterRender", () => {
-      $(this.element.querySelector(".external-url")).keydown((e) => {
-        if (e.key === "Enter") {
-          this.send("submit");
-        }
-      });
-    });
-  },
-
+  @bind
   focusPermalink() {
     schedule("afterRender", () =>
-      this.element.querySelector(".permalink-url").focus()
+      this.element.querySelector(".permalink-url")?.focus()
     );
   },
 
-  actions: {
-    submit() {
+  @action
+  submitFormOnEnter(event) {
+    if (event.key === "Enter") {
+      this.onSubmit();
+    }
+  },
+
+  @action
+  onSubmit() {
     if (!this.formSubmitted) {
       this.set("formSubmitted", true);
 
       Permalink.create({
         url: this.url,
         permalink_type: this.permalinkType,
-          permalink_type_value: this.permalink_type_value,
+        permalink_type_value: this.permalinkTypeValue,
       })
         .save()
         .then(
           (result) => {
             this.setProperties({
               url: "",
-                permalink_type_value: "",
+              permalinkTypeValue: "",
               formSubmitted: false,
             });
 
@@ -68,25 +67,16 @@ export default Component.extend({
             this.set("formSubmitted", false);
 
             let error;
-              if (
-                e.jqXHR &&
-                e.jqXHR.responseJSON &&
-                e.jqXHR.responseJSON.errors
-              ) {
+            if (e?.jqXHR?.responseJSON?.errors) {
               error = I18n.t("generic_error_with_reason", {
                 error: e.jqXHR.responseJSON.errors.join(". "),
               });
             } else {
               error = I18n.t("generic_error");
             }
-              bootbox.alert(error, () => this.focusPermalink());
+            bootbox.alert(error, this.focusPermalink);
           }
         );
     }
   },
-
-    onChangePermalinkType(type) {
-      this.set("permalinkType", type);
-    },
-  },
 });

app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs

@@ -1,3 +1,4 @@
+<div class="permalink-form">
   <div class="inline-form">
     <label>{{i18n "admin.permalink.form.label"}}</label>
 
@@ -18,18 +19,18 @@
     }}
 
     {{text-field
-    value=permalink_type_value
+      value=permalinkTypeValue
       disabled=formSubmitted
-    class="external-url"
       placeholderKey=permalinkTypePlaceholder
       autocorrect="off"
       autocapitalize="off"
+      keyDown=(action "submitFormOnEnter")
     }}
 
     {{d-button
-    class="btn-default"
-    action=(action "submit")
+      action=(action "onSubmit")
       disabled=formSubmitted
       label="admin.permalink.form.add"
     }}
   </div>
+</div>