FEATURE: mandatory fields for compact-list (#29357)

In this PR we introduced mandatory fields for `group-list` https://github.com/discourse/discourse/pull/26612

The same solution should apply to `compact-list`.

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

@@ -5,4 +5,5 @@
   @onChange={{this.onChangeListSetting}}
   @onChangeChoices={{this.onChangeChoices}}
   @options={{hash allowAny=this.allowAny}}
+  @mandatoryValues={{this.setting.mandatory_values}}
 />

app/assets/javascripts/discourse/tests/integration/components/compact-list-test.js

@@ -0,0 +1,39 @@
+import EmberObject from "@ember/object";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import selectKit from "discourse/tests/helpers/select-kit-helper";
+
+module("Integration | Component | compact-list site-setting", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("mandatory values", async function (assert) {
+    this.set(
+      "setting",
+      EmberObject.create({
+        allowsNone: undefined,
+        category: "foo",
+        description: "Choose setting",
+        overridden: false,
+        placeholder: null,
+        preview: null,
+        secret: false,
+        setting: "foo_bar",
+        type: "compact_list",
+        validValues: undefined,
+        default: "admin",
+        mandatory_values: "admin",
+        value: "admin|moderator",
+      })
+    );
+
+    await render(hbs`<SiteSetting @setting={{this.setting}} />`);
+
+    const subject = selectKit(".list-setting");
+
+    await subject.expand();
+
+    assert.dom(".selected-content button").hasClass("disabled");
+  });
+});

app/assets/javascripts/select-kit/addon/components/selected-choice.js

@@ -34,6 +34,9 @@ export default class SelectedChoice extends Component.extend(UtilsMixin) {
 
   @computed("item")
   get readOnly() {
+    if (typeof this.item === "string") {
+      return this.mandatoryValuesArray.includes(this.item);
+    }
     return this.mandatoryValuesArray.includes(this.item.id);
   }
 }