REFACTOR: setting component mixin (#14437)

* REFACTOR: setting component mixing

- drops jquery usage
- extract spit function
- uses @action
- removes get usage where possible
- uses helpers
- minor changes

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

app/assets/javascripts/admin/addon/mixins/setting-component.js

@@ -1,14 +1,18 @@
+import { isNone } from "@ember/utils";
+import { fmt, propertyNotEqual } from "discourse/lib/computed";
 import { alias, oneWay } from "@ember/object/computed";
 import I18n from "I18n";
 import Mixin from "@ember/object/mixin";
 import { Promise } from "rsvp";
 import { ajax } from "discourse/lib/ajax";
 import { categoryLinkHTML } from "discourse/helpers/category-link";
-import discourseComputed from "discourse-common/utils/decorators";
+import discourseComputed, { bind } from "discourse-common/utils/decorators";
 import { htmlSafe } from "@ember/template";
 import { on } from "@ember/object/evented";
 import showModal from "discourse/lib/show-modal";
 import { warn } from "@ember/debug";
+import { action } from "@ember/object";
+import { splitString } from "discourse/lib/utilities";
 
 const CUSTOM_TYPES = [
   "bool",
@@ -32,26 +36,20 @@ const CUSTOM_TYPES = [
 
 const AUTO_REFRESH_ON_SAVE = ["logo", "logo_small", "large_icon"];
 
-function splitPipes(str) {
-  if (typeof str === "string") {
-    return str.split("|").filter(Boolean);
-  } else {
-    return [];
-  }
-}
-
 export default Mixin.create({
   classNameBindings: [":row", ":setting", "overridden", "typeClass"],
   content: alias("setting"),
   validationMessage: null,
   isSecret: oneWay("setting.secret"),
+  setting: null,
 
   @discourseComputed("buffered.value", "setting.value")
   dirty(bufferVal, settingVal) {
-    if (bufferVal === null || bufferVal === undefined) {
+    if (isNone(bufferVal)) {
       bufferVal = "";
     }
-    if (settingVal === null || settingVal === undefined) {
+
+    if (isNone(settingVal)) {
       settingVal = "";
     }
 
@@ -61,21 +59,17 @@ export default Mixin.create({
   @discourseComputed("setting", "buffered.value")
   preview(setting, value) {
     // A bit hacky, but allows us to use helpers
-    if (setting.get("setting") === "category_style") {
-      let category = this.site.get("categories.firstObject");
+    if (setting.setting === "category_style") {
+      const category = this.site.get("categories.firstObject");
       if (category) {
-        return categoryLinkHTML(category, {
-          categoryStyle: value,
-        });
+        return categoryLinkHTML(category, { categoryStyle: value });
       }
     }
-    let preview = setting.get("preview");
+
+    const preview = setting.preview;
     if (preview) {
-      return htmlSafe(
-        "<div class='preview'>" +
-          preview.replace(/\{\{value\}\}/g, value) +
-          "</div>"
-      );
+      const escapedValue = preview.replace(/\{\{value\}\}/g, value);
+      return htmlSafe(`<div class='preview'>${escapedValue}</div>`);
     }
   },
 
@@ -103,61 +97,34 @@ export default Mixin.create({
     return setting.type;
   },
 
-  @discourseComputed("typeClass")
-  componentName(typeClass) {
-    return "site-settings/" + typeClass;
-  },
+  componentName: fmt("typeClass", "site-settings/%@"),
 
   @discourseComputed("setting.anyValue")
   allowAny(anyValue) {
     return anyValue !== false;
   },
 
-  @discourseComputed("setting.default", "buffered.value")
-  overridden(settingDefault, bufferedValue) {
-    return settingDefault !== bufferedValue;
-  },
+  overridden: propertyNotEqual("setting.default", "buffered.value"),
 
   @discourseComputed("buffered.value")
-  bufferedValues: splitPipes,
+  bufferedValues(value) {
+    return splitString(value, "|");
+  },
 
   @discourseComputed("setting.defaultValues")
-  defaultValues: splitPipes,
+  defaultValues(value) {
+    return splitString(value, "|");
+  },
 
   @discourseComputed("defaultValues", "bufferedValues")
   defaultIsAvailable(defaultValues, bufferedValues) {
     return (
-      defaultValues &&
       defaultValues.length > 0 &&
       !defaultValues.every((value) => bufferedValues.includes(value))
     );
   },
 
-  _watchEnterKey: on("didInsertElement", function () {
-    $(this.element).on(
-      "keydown.setting-enter",
-      ".input-setting-string",
-      (e) => {
-        if (e.key === "Enter") {
-          // enter key
-          this.send("save");
-        }
-      }
-    );
-  }),
-
-  _removeBindings: on("willDestroyElement", function () {
-    $(this.element).off("keydown.setting-enter");
-  }),
-
-  _save() {
-    warn("You should define a `_save` method", {
-      id: "discourse.setting-component.missing-save",
-    });
-    return Promise.resolve();
-  },
-
-  actions: {
+  @action
   update() {
     const defaultUserPreferences = [
       "default_email_digest_frequency",
@@ -204,26 +171,24 @@ export default Mixin.create({
 
         if (count > 0) {
           const controller = showModal("site-setting-default-categories", {
-              model: {
-                count: result.user_count,
-                key: key.replace(/_/g, " "),
-              },
+            model: { count, key: key.replaceAll("_", " ") },
             admin: true,
           });
 
           controller.set("onClose", () => {
             this.updateExistingUsers = controller.updateExistingUsers;
-              this.send("save");
+            this.save();
           });
         } else {
-            this.send("save");
+          this.save();
         }
       });
     } else {
-        this.send("save");
+      this.save();
     }
   },
 
+  @action
   save() {
     this._save()
       .then(() => {
@@ -234,7 +199,7 @@ export default Mixin.create({
         }
       })
       .catch((e) => {
-          if (e.jqXHR.responseJSON && e.jqXHR.responseJSON.errors) {
+        if (e.jqXHR?.responseJSON?.errors) {
           this.set("validationMessage", e.jqXHR.responseJSON.errors[0]);
         } else {
           this.set("validationMessage", I18n.t("generic_error"));
@@ -242,18 +207,22 @@ export default Mixin.create({
       });
   },
 
+  @action
   cancel() {
     this.rollbackBuffer();
   },
 
+  @action
   resetDefault() {
     this.set("buffered.value", this.get("setting.default"));
   },
 
+  @action
   toggleSecret() {
     this.toggleProperty("isSecret");
   },
 
+  @action
   setDefaultValues() {
     this.set(
       "buffered.value",
@@ -261,5 +230,29 @@ export default Mixin.create({
     );
     return false;
   },
+
+  @bind
+  _handleKeydown(event) {
+    if (
+      event.key === "Enter" &&
+      event.target.classList.contains("input-setting-string")
+    ) {
+      this.save();
+    }
+  },
+
+  _watchEnterKey: on("didInsertElement", function () {
+    this.element.addEventListener("keydown", this._handleKeydown);
+  }),
+
+  _removeBindings: on("willDestroyElement", function () {
+    this.element.removeEventListener("keydown", this._handleKeydown);
+  }),
+
+  _save() {
+    warn("You should define a `_save` method", {
+      id: "discourse.setting-component.missing-save",
+    });
+    return Promise.resolve();
   },
 });

app/assets/javascripts/discourse/app/lib/utilities.js

@@ -7,6 +7,14 @@ import toMarkdown from "discourse/lib/to-markdown";
 
 let _defaultHomepage;
 
+export function splitString(str, separator = ",") {
+  if (typeof str === "string") {
+    return str.split(separator).filter(Boolean);
+  } else {
+    return [];
+  }
+}
+
 export function translateSize(size) {
   switch (size) {
     case "tiny":