From 43659a6de277d7b3e4aa92110bd73d33ab980f14 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Tue, 16 Nov 2021 10:25:54 +0100
Subject: [PATCH] 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
---
 .../admin/addon/components/permalink-form.js  | 108 ++++++++----------
 .../templates/components/permalink-form.hbs   |  61 +++++-----
 2 files changed, 80 insertions(+), 89 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/components/permalink-form.js b/app/assets/javascripts/admin/addon/components/permalink-form.js
index 27846151d97..62c62bdf741 100644
--- a/app/assets/javascripts/admin/addon/components/permalink-form.js
+++ b/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,70 +26,57 @@ 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() {
-      if (!this.formSubmitted) {
-        this.set("formSubmitted", true);
+  @action
+  submitFormOnEnter(event) {
+    if (event.key === "Enter") {
+      this.onSubmit();
+    }
+  },
 
-        Permalink.create({
-          url: this.url,
-          permalink_type: this.permalinkType,
-          permalink_type_value: this.permalink_type_value,
-        })
-          .save()
-          .then(
-            (result) => {
-              this.setProperties({
-                url: "",
-                permalink_type_value: "",
-                formSubmitted: false,
+  @action
+  onSubmit() {
+    if (!this.formSubmitted) {
+      this.set("formSubmitted", true);
+
+      Permalink.create({
+        url: this.url,
+        permalink_type: this.permalinkType,
+        permalink_type_value: this.permalinkTypeValue,
+      })
+        .save()
+        .then(
+          (result) => {
+            this.setProperties({
+              url: "",
+              permalinkTypeValue: "",
+              formSubmitted: false,
+            });
+
+            this.action(Permalink.create(result.permalink));
+
+            this.focusPermalink();
+          },
+          (e) => {
+            this.set("formSubmitted", false);
+
+            let error;
+            if (e?.jqXHR?.responseJSON?.errors) {
+              error = I18n.t("generic_error_with_reason", {
+                error: e.jqXHR.responseJSON.errors.join(". "),
               });
-
-              this.action(Permalink.create(result.permalink));
-
-              this.focusPermalink();
-            },
-            (e) => {
-              this.set("formSubmitted", false);
-
-              let error;
-              if (
-                e.jqXHR &&
-                e.jqXHR.responseJSON &&
-                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());
+            } else {
+              error = I18n.t("generic_error");
             }
-          );
-      }
-    },
-
-    onChangePermalinkType(type) {
-      this.set("permalinkType", type);
-    },
+            bootbox.alert(error, this.focusPermalink);
+          }
+        );
+    }
   },
 });
diff --git a/app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs b/app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs
index 938c77b0d8f..cbe3dc77478 100644
--- a/app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs
@@ -1,35 +1,36 @@
-<div class="inline-form">
-  <label>{{i18n "admin.permalink.form.label"}}</label>
+<div class="permalink-form">
+  <div class="inline-form">
+    <label>{{i18n "admin.permalink.form.label"}}</label>
 
-  {{text-field
-    value=url
-    disabled=formSubmitted
-    class="permalink-url"
-    placeholderKey="admin.permalink.url"
-    autocorrect="off"
-    autocapitalize="off"
-  }}
+    {{text-field
+      value=url
+      disabled=formSubmitted
+      class="permalink-url"
+      placeholderKey="admin.permalink.url"
+      autocorrect="off"
+      autocapitalize="off"
+    }}
 
-  {{combo-box
-    content=permalinkTypes
-    value=permalinkType
-    onChange=(action (mut permalinkType))
-    class="permalink-type"
-  }}
+    {{combo-box
+      content=permalinkTypes
+      value=permalinkType
+      onChange=(action (mut permalinkType))
+      class="permalink-type"
+    }}
 
-  {{text-field
-    value=permalink_type_value
-    disabled=formSubmitted
-    class="external-url"
-    placeholderKey=permalinkTypePlaceholder
-    autocorrect="off"
-    autocapitalize="off"
-  }}
+    {{text-field
+      value=permalinkTypeValue
+      disabled=formSubmitted
+      placeholderKey=permalinkTypePlaceholder
+      autocorrect="off"
+      autocapitalize="off"
+      keyDown=(action "submitFormOnEnter")
+    }}
 
-  {{d-button
-    class="btn-default"
-    action=(action "submit")
-    disabled=formSubmitted
-    label="admin.permalink.form.add"
-  }}
+    {{d-button
+      action=(action "onSubmit")
+      disabled=formSubmitted
+      label="admin.permalink.form.add"
+    }}
+  </div>
 </div>