From 397a1b736699cbb5c2c0489636f675814721ec9d Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Tue, 2 Apr 2024 09:32:50 +0800
Subject: [PATCH] DEV: Refactor Discourse models based field components to
 reduce duplication (#26452)

Why this change?

The field components to select categories, groups and tags had quite a
bit of logic duplicated between them. This commit refactors the logic
to remove most of the duplication so that we can introduce changes
without having to make the changes in multiple places.
---
 .../schema-theme-setting/types/categories.gjs | 34 +++-----------
 .../schema-theme-setting/types/groups.gjs     | 35 ++-------------
 .../schema-theme-setting/types/models.gjs     | 44 +++++++++++++++++++
 .../schema-theme-setting/types/tags.gjs       | 35 ++-------------
 4 files changed, 55 insertions(+), 93 deletions(-)
 create mode 100644 app/assets/javascripts/admin/addon/components/schema-theme-setting/types/models.gjs

diff --git a/app/assets/javascripts/admin/addon/components/schema-theme-setting/types/categories.gjs b/app/assets/javascripts/admin/addon/components/schema-theme-setting/types/categories.gjs
index 170d8ea2239..c46bb76970f 100644
--- a/app/assets/javascripts/admin/addon/components/schema-theme-setting/types/categories.gjs
+++ b/app/assets/javascripts/admin/addon/components/schema-theme-setting/types/categories.gjs
@@ -1,45 +1,21 @@
-import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { hash } from "@ember/helper";
-import { action } from "@ember/object";
 import { and, not } from "truth-helpers";
-import I18n from "discourse-i18n";
 import FieldInputDescription from "admin/components/schema-theme-setting/field-input-description";
+import SchemaThemeSettingTypeModels from "admin/components/schema-theme-setting/types/models";
 import CategorySelector from "select-kit/components/category-selector";
 
-export default class SchemaThemeSettingTypeCategories extends Component {
-  @tracked touched = false;
-
+export default class SchemaThemeSettingTypeCategories extends SchemaThemeSettingTypeModels {
   @tracked
   value =
     this.args.value?.map((categoryId) => {
       return this.args.setting.metadata.categories[categoryId];
     }) || [];
 
-  required = this.args.spec.required;
-  min = this.args.spec.validations?.min;
-  max = this.args.spec.validations?.max;
+  type = "categories";
 
-  @action
-  onInput(categories) {
-    this.touched = true;
-    this.value = categories;
-    this.args.onChange(categories.map((category) => category.id));
-  }
-
-  get validationErrorMessage() {
-    if (!this.touched) {
-      return;
-    }
-
-    if (
-      (this.min && this.value.length < this.min) ||
-      (this.required && (!this.value || this.value.length === 0))
-    ) {
-      return I18n.t("admin.customize.theme.schema.fields.categories.at_least", {
-        count: this.min || 1,
-      });
-    }
+  onChange(categories) {
+    return categories.mapBy("id");
   }
 
   <template>
diff --git a/app/assets/javascripts/admin/addon/components/schema-theme-setting/types/groups.gjs b/app/assets/javascripts/admin/addon/components/schema-theme-setting/types/groups.gjs
index 2c311e40fe7..e67a481808f 100644
--- a/app/assets/javascripts/admin/addon/components/schema-theme-setting/types/groups.gjs
+++ b/app/assets/javascripts/admin/addon/components/schema-theme-setting/types/groups.gjs
@@ -1,42 +1,13 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
 import { service } from "@ember/service";
 import { and, not } from "truth-helpers";
-import I18n from "discourse-i18n";
 import FieldInputDescription from "admin/components/schema-theme-setting/field-input-description";
+import SchemaThemeSettingTypeModels from "admin/components/schema-theme-setting/types/models";
 import GroupChooser from "select-kit/components/group-chooser";
 
-export default class SchemaThemeSettingTypeGroups extends Component {
+export default class SchemaThemeSettingTypeGroups extends SchemaThemeSettingTypeModels {
   @service site;
-  @tracked touched = false;
-  @tracked value = this.args.value;
 
-  required = this.args.spec.required;
-  min = this.args.spec.validations?.min;
-  max = this.args.spec.validations?.max;
-
-  @action
-  onInput(newVal) {
-    this.touched = true;
-    this.value = newVal;
-    this.args.onChange(newVal);
-  }
-
-  get validationErrorMessage() {
-    if (!this.touched) {
-      return;
-    }
-
-    if (
-      (this.min && this.value.length < this.min) ||
-      (this.required && (!this.value || this.value.length === 0))
-    ) {
-      return I18n.t("admin.customize.theme.schema.fields.groups.at_least", {
-        count: this.min || 1,
-      });
-    }
-  }
+  type = "groups";
 
   get groupChooserOptions() {
     return {
diff --git a/app/assets/javascripts/admin/addon/components/schema-theme-setting/types/models.gjs b/app/assets/javascripts/admin/addon/components/schema-theme-setting/types/models.gjs
new file mode 100644
index 00000000000..485ce0f0378
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/components/schema-theme-setting/types/models.gjs
@@ -0,0 +1,44 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { isBlank } from "@ember/utils";
+import I18n from "discourse-i18n";
+
+export default class SchemaThemeSettingTypeModels extends Component {
+  @tracked touched = false;
+  @tracked value = this.args.value;
+
+  required = this.args.spec.required;
+  min = this.args.spec.validations?.min;
+  max = this.args.spec.validations?.max;
+  type;
+
+  @action
+  onInput(newValue) {
+    this.touched = true;
+    this.value = newValue;
+    this.args.onChange(this.onChange(newValue));
+  }
+
+  onChange(newValue) {
+    return newValue;
+  }
+
+  get validationErrorMessage() {
+    if (!this.touched) {
+      return;
+    }
+
+    if (
+      (this.min && this.value.length < this.min) ||
+      (this.required && isBlank(this.value))
+    ) {
+      return I18n.t(
+        `admin.customize.theme.schema.fields.${this.type}.at_least`,
+        {
+          count: this.min || 1,
+        }
+      );
+    }
+  }
+}
diff --git a/app/assets/javascripts/admin/addon/components/schema-theme-setting/types/tags.gjs b/app/assets/javascripts/admin/addon/components/schema-theme-setting/types/tags.gjs
index be3680ce921..dbe544cb84c 100644
--- a/app/assets/javascripts/admin/addon/components/schema-theme-setting/types/tags.gjs
+++ b/app/assets/javascripts/admin/addon/components/schema-theme-setting/types/tags.gjs
@@ -1,24 +1,10 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
 import { and, not } from "truth-helpers";
-import I18n from "discourse-i18n";
 import FieldInputDescription from "admin/components/schema-theme-setting/field-input-description";
+import SchemaThemeSettingTypeModels from "admin/components/schema-theme-setting/types/models";
 import TagChooser from "select-kit/components/tag-chooser";
 
-export default class SchemaThemeSettingTypeTags extends Component {
-  @tracked touched = false;
-  @tracked value = this.args.value;
-  required = this.args.spec.required;
-  min = this.args.spec.validations?.min;
-  max = this.args.spec.validations?.max;
-
-  @action
-  onInput(newVal) {
-    this.touched = true;
-    this.value = newVal;
-    this.args.onChange(newVal);
-  }
+export default class SchemaThemeSettingTypeTags extends SchemaThemeSettingTypeModels {
+  type = "tags";
 
   get tagChooserOption() {
     return {
@@ -27,21 +13,6 @@ export default class SchemaThemeSettingTypeTags extends Component {
     };
   }
 
-  get validationErrorMessage() {
-    if (!this.touched) {
-      return;
-    }
-
-    if (
-      (this.min && this.value.length < this.min) ||
-      (this.required && (!this.value || this.value.length === 0))
-    ) {
-      return I18n.t("admin.customize.theme.schema.fields.tags.at_least", {
-        count: this.min || 1,
-      });
-    }
-  }
-
   <template>
     <TagChooser
       @tags={{this.value}}