Add replaceContent selectKit modifier (#18569)

Add the ability to modify a selectKit's content with `replaceContent`

Eg.

```
      api.modifySelectKit("combo-box").replaceContent(() => {
        return {
          id: "foo",
          name: "Foo",
        };
      });
```

will override existing content to only include the passed object

app/assets/javascripts/discourse/tests/integration/components/select-kit/api-test.js

@@ -102,4 +102,34 @@ module("Integration | Component | select-kit/api", function (hooks) {
 
     assert.strictEqual(query("#test").innerText, "foo");
   });
+
+  test("modifySelectKit(identifier).replaceContent", async function (assert) {
+    setDefaultState(this, null, { content: DEFAULT_CONTENT });
+
+    withPluginApi("0.8.43", (api) => {
+      api.modifySelectKit("combo-box").replaceContent(() => {
+        return {
+          id: "alpaca",
+          name: "Alpaca",
+        };
+      });
+      api.modifySelectKit("combo-box").replaceContent(() => {});
+    });
+
+    await render(hbs`
+      <ComboBox @value={{this.value}} @content={{this.content}} @onChange={{this.onChange}} />
+      <SingleSelect @value={{this.value}} @content={{this.content}} @onChange={{this.onChange}} />
+    `);
+    await this.comboBox.expand();
+
+    assert.strictEqual(this.comboBox.rows().length, 1);
+
+    const replacementRow = this.comboBox.rowByIndex(0);
+    assert.ok(replacementRow.exists());
+    assert.strictEqual(replacementRow.value(), "alpaca");
+
+    await this.comboBox.collapse();
+
+    assert.notOk(this.singleSelect.rowByValue("alpaca").exists());
+  });
 });

app/assets/javascripts/select-kit/addon/mixins/plugin-api.js

@@ -29,6 +29,15 @@ function onChange(pluginApiIdentifiers, mutationFunction) {
   _onChangeCallbacks[pluginApiIdentifiers].push(mutationFunction);
 }
 
+let _replaceContentCallbacks = {};
+function replaceContent(pluginApiIdentifiers, contentFunction) {
+  if (isNone(_replaceContentCallbacks[pluginApiIdentifiers])) {
+    _replaceContentCallbacks[pluginApiIdentifiers] = [];
+  }
+
+  _replaceContentCallbacks[pluginApiIdentifiers].push(contentFunction);
+}
+
 export function applyContentPluginApiCallbacks(content, component) {
   makeArray(component.pluginApiIdentifiers).forEach((key) => {
     (_prependContentCallbacks[key] || []).forEach((c) => {
@@ -43,6 +52,13 @@ export function applyContentPluginApiCallbacks(content, component) {
         content = content.concat(makeArray(appendedContent));
       }
     });
+
+    (_replaceContentCallbacks[key] || []).forEach((c) => {
+      const replacementContent = c(component, content);
+      if (replacementContent) {
+        content = makeArray(replacementContent);
+      }
+    });
   });
 
   return content;
@@ -68,6 +84,10 @@ export function modifySelectKit(targetedIdentifier) {
       onChange(targetedIdentifier, callback);
       return modifySelectKit(targetedIdentifier);
     },
+    replaceContent: (callback) => {
+      replaceContent(targetedIdentifier, callback);
+      return modifySelectKit(targetedIdentifier);
+    },
   };
 }
 
@@ -75,6 +95,7 @@ export function clearCallbacks() {
   _appendContentCallbacks = {};
   _prependContentCallbacks = {};
   _onChangeCallbacks = {};
+  _replaceContentCallbacks = {};
 }
 
 const EMPTY_ARRAY = Object.freeze([]);