DEV: Round 1 converting admin site setting components to gjs (#30526)

Converts the following site setting components:

* Bool
* Category
* Colors
* Category
* CompactList
* EmojiList

app/assets/javascripts/admin/addon/components/site-settings/bool.gjs

@@ -0,0 +1,33 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import { htmlSafe } from "@ember/template";
+import { isEmpty } from "@ember/utils";
+
+export default class Bool extends Component {
+  @tracked
+  enabled = isEmpty(this.args.value)
+    ? false
+    : this.args.value.toString() === "true";
+
+  @action
+  onToggle(event) {
+    if (event.target.checked) {
+      this.args.changeValueCallback("true");
+    } else {
+      this.args.changeValueCallback("false");
+    }
+  }
+
+  <template>
+    <label class="checkbox-label">
+      <input
+        {{on "input" this.onToggle}}
+        type="checkbox"
+        checked={{this.enabled}}
+      />
+      <span>{{htmlSafe @setting.description}}</span>
+    </label>
+  </template>
+}

app/assets/javascripts/admin/addon/components/site-settings/bool.hbs

@@ -1,4 +0,0 @@
-<label class="checkbox-label">
-  <Input @type="checkbox" @checked={{this.enabled}} />
-  <span>{{html-safe this.setting.description}}</span>
-</label>

app/assets/javascripts/admin/addon/components/site-settings/bool.js

@@ -1,17 +0,0 @@
-import Component from "@ember/component";
-import { computed } from "@ember/object";
-import { isEmpty } from "@ember/utils";
-
-export default class Bool extends Component {
-  @computed("value")
-  get enabled() {
-    if (isEmpty(this.value)) {
-      return false;
-    }
-    return this.value.toString() === "true";
-  }
-
-  set enabled(value) {
-    this.set("value", value ? "true" : "false");
-  }
-}

app/assets/javascripts/admin/addon/components/site-settings/category.gjs

@@ -0,0 +1,13 @@
+import { hash } from "@ember/helper";
+import { eq } from "truth-helpers";
+import CategoryChooser from "select-kit/components/category-chooser";
+
+const Category = <template>
+  <CategoryChooser
+    @value={{@value}}
+    @onChange={{@changeValueCallback}}
+    @options={{hash allowUncategorized=true none=(eq @setting.default "")}}
+  />
+</template>;
+
+export default Category;

app/assets/javascripts/admin/addon/components/site-settings/category.hbs

@@ -1,5 +0,0 @@
-<CategoryChooser
-  @value={{this.value}}
-  @onChange={{fn (mut this.value)}}
-  @options={{hash allowUncategorized=true none=(eq this.setting.default "")}}
-/>

app/assets/javascripts/admin/addon/components/site-settings/category.js

@@ -1,3 +0,0 @@
-import Component from "@ember/component";
-
-export default class Category extends Component {}

app/assets/javascripts/admin/addon/components/site-settings/color.gjs

@@ -1,5 +1,5 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
-import { action, computed } from "@ember/object";
+import ColorInput from "admin/components/color-input";
 
 function RGBToHex(rgb) {
   // Choose correct separator
@@ -25,9 +25,8 @@ function RGBToHex(rgb) {
 }
 
 export default class Color extends Component {
-  @computed("value")
   get valid() {
-    let value = this.value.toLowerCase();
+    let value = this.args.value.toLowerCase();
 
     let testColor = new Option().style;
     testColor.color = value;
@@ -46,8 +45,13 @@ export default class Color extends Component {
     return testColor.color && hexifiedColor === value;
   }
 
-  @action
+  <template>
-  onChangeColor(color) {
+    <ColorInput
-    this.set("value", color);
+      @hexValue={{readonly @value}}
-  }
+      @valid={{@valid}}
+      @onlyHex={{false}}
+      @styleSelection={{false}}
+      @onChangeColor={{@changeValueCallback}}
+    />
+  </template>
 }

app/assets/javascripts/admin/addon/components/site-settings/color.hbs

@@ -1,7 +0,0 @@
-<ColorInput
-  @hexValue={{readonly this.value}}
-  @valid={{this.valid}}
-  @onlyHex={{false}}
-  @styleSelection={{false}}
-  @onChangeColor={{this.onChangeColor}}
-/>

app/assets/javascripts/admin/addon/components/site-settings/compact-list.gjs

@@ -0,0 +1,52 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { hash } from "@ember/helper";
+import { action } from "@ember/object";
+import { makeArray } from "discourse-common/lib/helpers";
+import ListSetting from "select-kit/components/list-setting";
+
+export default class CompactList extends Component {
+  @tracked createdChoices = null;
+  tokenSeparator = "|";
+
+  get settingValue() {
+    return this.args.value
+      .toString()
+      .split(this.tokenSeparator)
+      .filter(Boolean);
+  }
+
+  get settingChoices() {
+    return [
+      ...new Set([
+        ...makeArray(this.settingValue),
+        ...makeArray(this.args.setting.choices),
+        ...makeArray(this.createdChoices),
+      ]),
+    ];
+  }
+
+  @action
+  onChangeListSetting(value) {
+    this.args.changeValueCallback(value.join(this.tokenSeparator));
+  }
+
+  @action
+  onChangeChoices(choices) {
+    this.createdChoices = [
+      ...new Set([...makeArray(this.createdChoices), ...makeArray(choices)]),
+    ];
+  }
+
+  <template>
+    <ListSetting
+      @value={{this.settingValue}}
+      @settingName={{@setting.setting}}
+      @choices={{this.settingChoices}}
+      @onChange={{this.onChangeListSetting}}
+      @onChangeChoices={{this.onChangeChoices}}
+      @options={{hash allowAny=@allowAny}}
+      @mandatoryValues={{@setting.mandatory_values}}
+    />
+  </template>
+}

app/assets/javascripts/admin/addon/components/site-settings/compact-list.hbs

@@ -1,9 +0,0 @@
-<ListSetting
-  @value={{this.settingValue}}
-  @settingName={{this.setting.setting}}
-  @choices={{this.settingChoices}}
-  @onChange={{this.onChangeListSetting}}
-  @onChangeChoices={{this.onChangeChoices}}
-  @options={{hash allowAny=this.allowAny}}
-  @mandatoryValues={{this.setting.mandatory_values}}
-/>

app/assets/javascripts/admin/addon/components/site-settings/compact-list.js

@@ -1,36 +0,0 @@
-import Component from "@ember/component";
-import { action, computed } from "@ember/object";
-import { makeArray } from "discourse-common/lib/helpers";
-
-export default class CompactList extends Component {
-  tokenSeparator = "|";
-  createdChoices = null;
-
-  @computed("value")
-  get settingValue() {
-    return this.value.toString().split(this.tokenSeparator).filter(Boolean);
-  }
-
-  @computed("settingValue", "setting.choices.[]", "createdChoices.[]")
-  get settingChoices() {
-    return [
-      ...new Set([
-        ...makeArray(this.settingValue),
-        ...makeArray(this.setting.choices),
-        ...makeArray(this.createdChoices),
-      ]),
-    ];
-  }
-
-  @action
-  onChangeListSetting(value) {
-    this.set("value", value.join(this.tokenSeparator));
-  }
-
-  @action
-  onChangeChoices(choices) {
-    this.set("createdChoices", [
-      ...new Set([...makeArray(this.createdChoices), ...makeArray(choices)]),
-    ]);
-  }
-}

app/assets/javascripts/admin/addon/components/site-settings/emoji-list.gjs

@@ -0,0 +1,11 @@
+import EmojiValueList from "admin/components/emoji-value-list";
+
+const EmojiList = <template>
+  <EmojiValueList
+    @setting={{@setting}}
+    @values={{@value}}
+    @setValidationMessage={{@setValidationMessage}}
+  />
+</template>;
+
+export default EmojiList;

app/assets/javascripts/admin/addon/components/site-settings/emoji-list.hbs

@@ -1,5 +0,0 @@
-<EmojiValueList
-  @setting={{this.setting}}
-  @values={{this.value}}
-  @setValidationMessage={{this.setValidationMessage}}
-/>

app/assets/javascripts/admin/addon/components/site-settings/emoji-list.js

@@ -1,3 +0,0 @@
-import Component from "@ember/component";
-
-export default class EmojiList extends Component {}