DEV: improves sk api (#9653)

- reduces the API to 3 actions for now: appendContent/prependContent/onChange
- well tested
- removes all previous APIS which were only half supported or too dangerous as they could collide with other plugins or core behaviors
- this plugins also puts every sk test helpers in one file

app/assets/javascripts/discourse/app/lib/plugin-api.js

@@ -54,7 +54,7 @@ import { on } from "@ember/object/evented";
 import KeyboardShortcuts from "discourse/lib/keyboard-shortcuts";
 
 // If you add any methods to the API ensure you bump up this number
-const PLUGIN_API_VERSION = "0.8.42";
+const PLUGIN_API_VERSION = "0.8.43";
 
 class PluginApi {
   constructor(version, container) {

app/assets/javascripts/select-kit/components/select-kit.js

@@ -16,12 +16,8 @@ import {
 } from "@ember/runloop";
 import { Promise } from "rsvp";
 import {
-  applyHeaderContentPluginApiCallbacks,
-  applyModifyNoSelectionPluginApiCallbacks,
   applyContentPluginApiCallbacks,
-  applyOnOpenPluginApiCallbacks,
+  applyOnChangePluginApiCallbacks
-  applyOnClosePluginApiCallbacks,
-  applyOnInputPluginApiCallbacks
 } from "select-kit/mixins/plugin-api";
 
 export const MAIN_COLLECTION = "MAIN_COLLECTION";
@@ -379,15 +375,7 @@ export default Component.extend(
         cancel(this._searchPromise);
       }
 
-      const input = applyOnInputPluginApiCallbacks(
+      debounce(this, this._debouncedInput, event.target.value, 200);
-        this.pluginApiIdentifiers,
-        event,
-        this.selectKit
-      );
-
-      if (input) {
-        debounce(this, this._debouncedInput, event.target.value, 200);
-      }
     },
 
     _debouncedInput(filter) {
@@ -430,6 +418,9 @@ export default Component.extend(
         }
 
         this._boundaryActionHandler("onChange", value, items);
+
+        applyOnChangePluginApiCallbacks(value, items, this);
+
         resolve(items);
       }).finally(() => {
         if (!this.isDestroying && !this.isDestroyed) {
@@ -448,11 +439,7 @@ export default Component.extend(
     _modifyContentWrapper(content) {
       content = this.modifyContent(content);
 
-      return applyContentPluginApiCallbacks(
+      return applyContentPluginApiCallbacks(content, this);
-        this.pluginApiIdentifiers,
-        content,
-        this.selectKit
-      );
     },
 
     modifyContent(content) {
@@ -460,13 +447,7 @@ export default Component.extend(
     },
 
     _modifyNoSelectionWrapper() {
-      let none = this.modifyNoSelection();
+      return this.modifyNoSelection();
-
-      return applyModifyNoSelectionPluginApiCallbacks(
-        this.pluginApiIdentifiers,
-        none,
-        this.selectKit
-      );
     },
 
     modifyNoSelection() {
@@ -498,12 +479,6 @@ export default Component.extend(
     },
 
     _modifySelectionWrapper(item) {
-      applyHeaderContentPluginApiCallbacks(
-        this.pluginApiIdentifiers,
-        item,
-        this.selectKit
-      );
-
       return this.modifySelection(item);
     },
 
@@ -731,30 +706,14 @@ export default Component.extend(
       this.selectKit.change(null, null);
     },
 
-    _onOpenWrapper(event) {
+    _onOpenWrapper() {
-      let boundaryAction = this._boundaryActionHandler("onOpen");
+      return this._boundaryActionHandler("onOpen");
-
-      boundaryAction = applyOnOpenPluginApiCallbacks(
-        this.pluginApiIdentifiers,
-        this.selectKit,
-        event
-      );
-
-      return boundaryAction;
     },
 
-    _onCloseWrapper(event) {
+    _onCloseWrapper() {
       this.set("selectKit.highlighted", null);
 
-      let boundaryAction = this._boundaryActionHandler("onClose");
+      return this._boundaryActionHandler("onClose");
-
-      boundaryAction = applyOnClosePluginApiCallbacks(
-        this.pluginApiIdentifiers,
-        this.selectKit,
-        event
-      );
-
-      return boundaryAction;
     },
 
     _toggle(event) {
@@ -772,9 +731,7 @@ export default Component.extend(
 
       this.clearErrors();
 
-      if (!this.selectKit.onClose(event)) {
+      this.selectKit.onClose(event);
-        return;
-      }
 
       this.selectKit.setProperties({
         isExpanded: false,
@@ -789,9 +746,7 @@ export default Component.extend(
 
       this.clearErrors();
 
-      if (!this.selectKit.onOpen(event)) {
+      this.selectKit.onOpen(event);
-        return;
-      }
 
       if (!this.popper) {
         const anchor = document.querySelector(

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

@@ -12,257 +12,55 @@ function appendContent(pluginApiIdentifiers, contentFunction) {
 }
 
 let _prependContentCallbacks = {};
-function prependContent(pluginApiIdentifiers, contentFunction) {
+function prependContent(targetedIdentifier, contentFunction) {
-  if (isNone(_prependContentCallbacks[pluginApiIdentifiers])) {
+  if (isNone(_prependContentCallbacks[targetedIdentifier])) {
-    _prependContentCallbacks[pluginApiIdentifiers] = [];
+    _prependContentCallbacks[targetedIdentifier] = [];
   }
 
-  _prependContentCallbacks[pluginApiIdentifiers].push(contentFunction);
+  _prependContentCallbacks[targetedIdentifier].push(contentFunction);
 }
 
-let _filterContentCallbacks = {};
+let _onChangeCallbacks = {};
-function filterContent(pluginApiIdentifiers, contentFunction) {
+function onChange(pluginApiIdentifiers, mutationFunction) {
-  if (isNone(_filterContentCallbacks[pluginApiIdentifiers])) {
+  if (isNone(_onChangeCallbacks[pluginApiIdentifiers])) {
-    _filterContentCallbacks[pluginApiIdentifiers] = [];
+    _onChangeCallbacks[pluginApiIdentifiers] = [];
   }
 
-  _filterContentCallbacks[pluginApiIdentifiers].push(contentFunction);
+  _onChangeCallbacks[pluginApiIdentifiers].push(mutationFunction);
 }
 
-let _modifyContentCallbacks = {};
+export function applyContentPluginApiCallbacks(content, component) {
-function modifyContent(pluginApiIdentifiers, contentFunction) {
+  makeArray(component.pluginApiIdentifiers).forEach(key => {
-  if (isNone(_modifyContentCallbacks[pluginApiIdentifiers])) {
-    _modifyContentCallbacks[pluginApiIdentifiers] = [];
-  }
-
-  _modifyContentCallbacks[pluginApiIdentifiers].push(contentFunction);
-}
-
-let _modifyHeaderComputedContentCallbacks = {};
-function modifyHeaderComputedContent(pluginApiIdentifiers, contentFunction) {
-  if (isNone(_modifyHeaderComputedContentCallbacks[pluginApiIdentifiers])) {
-    _modifyHeaderComputedContentCallbacks[pluginApiIdentifiers] = [];
-  }
-
-  _modifyHeaderComputedContentCallbacks[pluginApiIdentifiers].push(
-    contentFunction
-  );
-}
-
-let _modifyNoSelectionCallbacks = {};
-function modifyNoSelection(pluginApiIdentifiers, contentFunction) {
-  if (isNone(_modifyNoSelectionCallbacks[pluginApiIdentifiers])) {
-    _modifyNoSelectionCallbacks[pluginApiIdentifiers] = [];
-  }
-
-  _modifyNoSelectionCallbacks[pluginApiIdentifiers].push(contentFunction);
-}
-
-let _modifyCollectionHeaderCallbacks = {};
-function modifyCollectionHeader(pluginApiIdentifiers, contentFunction) {
-  if (isNone(_modifyCollectionHeaderCallbacks[pluginApiIdentifiers])) {
-    _modifyCollectionHeaderCallbacks[pluginApiIdentifiers] = [];
-  }
-
-  _modifyCollectionHeaderCallbacks[pluginApiIdentifiers].push(contentFunction);
-}
-
-let _onSelectCallbacks = {};
-function onSelect(pluginApiIdentifiers, mutationFunction) {
-  if (isNone(_onSelectCallbacks[pluginApiIdentifiers])) {
-    _onSelectCallbacks[pluginApiIdentifiers] = [];
-  }
-
-  _onSelectCallbacks[pluginApiIdentifiers].push(mutationFunction);
-}
-
-let _onOpenCallbacks = {};
-function onOpen(pluginApiIdentifiers, mutationFunction) {
-  if (isNone(_onOpenCallbacks[pluginApiIdentifiers])) {
-    _onOpenCallbacks[pluginApiIdentifiers] = [];
-  }
-
-  _onOpenCallbacks[pluginApiIdentifiers].push(mutationFunction);
-}
-
-let _onCloseCallbacks = {};
-function onClose(pluginApiIdentifiers, mutationFunction) {
-  if (isNone(_onCloseCallbacks[pluginApiIdentifiers])) {
-    _onCloseCallbacks[pluginApiIdentifiers] = [];
-  }
-
-  _onCloseCallbacks[pluginApiIdentifiers].push(mutationFunction);
-}
-
-let _onInputCallbacks = {};
-function onInput(pluginApiIdentifiers, mutationFunction) {
-  if (isNone(_onInputCallbacks[pluginApiIdentifiers])) {
-    _onInputCallbacks[pluginApiIdentifiers] = [];
-  }
-
-  _onInputCallbacks[pluginApiIdentifiers].push(mutationFunction);
-}
-
-export function applyContentPluginApiCallbacks(
-  identifiers,
-  content,
-  selectKit
-) {
-  identifiers.forEach(key => {
     (_prependContentCallbacks[key] || []).forEach(c => {
-      content = makeArray(c(selectKit, content)).concat(content);
+      content = makeArray(c(component, content)).concat(content);
     });
     (_appendContentCallbacks[key] || []).forEach(c => {
-      content = content.concat(makeArray(c(selectKit, content)));
+      content = content.concat(makeArray(c(component, content)));
-    });
-    const filterCallbacks = _filterContentCallbacks[key] || [];
-    if (filterCallbacks.length) {
-      content = content.filter(c => {
-        let kept = true;
-        filterCallbacks.forEach(cb => {
-          kept = cb(selectKit, c);
-        });
-        return kept;
-      });
-    }
-    (_modifyContentCallbacks[key] || []).forEach(c => {
-      content = c(selectKit, content);
     });
   });
 
   return content;
 }
 
-export function applyHeaderContentPluginApiCallbacks(
+export function applyOnChangePluginApiCallbacks(value, items, component) {
-  identifiers,
+  makeArray(component.pluginApiIdentifiers).forEach(key => {
-  content,
+    (_onChangeCallbacks[key] || []).forEach(c => c(component, value, items));
-  context
-) {
-  identifiers.forEach(key => {
-    (_modifyHeaderComputedContentCallbacks[key] || []).forEach(c => {
-      content = c(context, content);
-    });
-  });
-
-  return content;
-}
-export function applyModifyNoSelectionPluginApiCallbacks(
-  identifiers,
-  content,
-  context
-) {
-  identifiers.forEach(key => {
-    (_modifyNoSelectionCallbacks[key] || []).forEach(c => {
-      content = c(context, content);
-    });
-  });
-
-  return content;
-}
-
-export function applyCollectionHeaderCallbacks(
-  identifiers,
-  content,
-  selectKit
-) {
-  identifiers.forEach(key => {
-    (_modifyCollectionHeaderCallbacks[key] || []).forEach(c => {
-      content = c(selectKit, content);
-    });
-  });
-
-  return content;
-}
-
-export function applyOnSelectPluginApiCallbacks(identifiers, val, selectKit) {
-  identifiers.forEach(key => {
-    (_onSelectCallbacks[key] || []).forEach(c => c(selectKit, val));
   });
 }
 
-export function applyOnOpenPluginApiCallbacks(identifiers, selectKit, event) {
+export function modifySelectKit(targetedIdentifier) {
-  let keepBubbling = true;
-  identifiers.forEach(key => {
-    (_onOpenCallbacks[key] || []).forEach(
-      c => (keepBubbling = c(selectKit, event))
-    );
-  });
-  return keepBubbling;
-}
-
-export function applyOnClosePluginApiCallbacks(identifiers, selectKit, event) {
-  let keepBubbling = true;
-  identifiers.forEach(key => {
-    (_onCloseCallbacks[key] || []).forEach(
-      c => (keepBubbling = c(selectKit, event))
-    );
-  });
-  return keepBubbling;
-}
-
-export function applyOnInputPluginApiCallbacks(identifiers, event, selectKit) {
-  let keepBubbling = true;
-  identifiers.forEach(key => {
-    (_onInputCallbacks[key] || []).forEach(
-      c => (keepBubbling = c(selectKit, event))
-    );
-  });
-  return keepBubbling;
-}
-
-export function modifySelectKit(pluginApiIdentifiers) {
   return {
-    appendContent: content => {
+    appendContent: callback => {
-      appendContent(pluginApiIdentifiers, () => {
+      appendContent(targetedIdentifier, callback);
-        return content;
+      return modifySelectKit(targetedIdentifier);
-      });
-      return modifySelectKit(pluginApiIdentifiers);
     },
-    prependContent: content => {
+    prependContent: callback => {
-      prependContent(pluginApiIdentifiers, () => {
+      prependContent(targetedIdentifier, callback);
-        return content;
+      return modifySelectKit(targetedIdentifier);
-      });
-      return modifySelectKit(pluginApiIdentifiers);
     },
-    filterContent: filterFunction => {
+    onChange: callback => {
-      filterContent(pluginApiIdentifiers, filterFunction);
+      onChange(targetedIdentifier, callback);
-      return modifySelectKit(pluginApiIdentifiers);
+      return modifySelectKit(targetedIdentifier);
-    },
-    modifyContent: callback => {
-      modifyContent(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
-    },
-    modifyHeaderComputedContent: callback => {
-      modifyHeaderComputedContent(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
-    },
-    modifySelection: callback => {
-      modifyHeaderComputedContent(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
-    },
-    modifyNoSelection: callback => {
-      modifyNoSelection(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
-    },
-    modifyCollectionHeader: callback => {
-      modifyCollectionHeader(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
-    },
-    onSelect: callback => {
-      onSelect(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
-    },
-    onClose: callback => {
-      onClose(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
-    },
-    onOpen: callback => {
-      onOpen(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
-    },
-    onInput: callback => {
-      onInput(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
     }
   };
 }
@@ -270,15 +68,7 @@ export function modifySelectKit(pluginApiIdentifiers) {
 export function clearCallbacks() {
   _appendContentCallbacks = {};
   _prependContentCallbacks = {};
-  _filterContentCallbacks = {};
+  _onChangeCallbacks = {};
-  _modifyNoSelectionCallbacks = {};
-  _modifyContentCallbacks = {};
-  _modifyHeaderComputedContentCallbacks = {};
-  _modifyCollectionHeaderCallbacks = {};
-  _onSelectCallbacks = {};
-  _onCloseCallbacks = {};
-  _onOpenCallbacks = {};
-  _onInputCallbacks = {};
 }
 
 const EMPTY_ARRAY = Object.freeze([]);

test/javascripts/components/select-kit/api-test.js

@@ -0,0 +1,109 @@
+import componentTest from "helpers/component-test";
+import selectKit, {
+  testSelectKitModule,
+  setDefaultState,
+  DEFAULT_CONTENT
+} from "helpers/select-kit-helper";
+import { withPluginApi } from "discourse/lib/plugin-api";
+import { clearCallbacks } from "select-kit/mixins/plugin-api";
+
+testSelectKitModule("select-kit:api", {
+  beforeEach() {
+    this.setProperties({
+      comboBox: selectKit(".combo-box"),
+      singleSelect: selectKit(".single-select:not(.combo-box)")
+    });
+  },
+
+  afterEach() {
+    clearCallbacks();
+  }
+});
+
+componentTest("modifySelectKit(identifier).appendContent", {
+  template: `
+    {{combo-box value=value content=content onChange=onChange}}
+    {{single-select value=value content=content onChange=onChange}}
+  `,
+
+  beforeEach() {
+    setDefaultState(this, null, { content: DEFAULT_CONTENT });
+
+    withPluginApi("0.8.43", api => {
+      api.modifySelectKit("combo-box").appendContent(() => {
+        return {
+          id: "alpaca",
+          name: "Alpaca"
+        };
+      });
+    });
+  },
+
+  async test(assert) {
+    await this.comboBox.expand();
+    const row = this.comboBox.rowByIndex(3);
+    assert.ok(row.exists());
+    assert.equal(row.value(), "alpaca");
+
+    await this.comboBox.collapse();
+
+    assert.notOk(this.singleSelect.rowByValue("alpaca").exists());
+  }
+});
+
+componentTest("modifySelectKit(identifier).prependContent", {
+  template: `
+    {{combo-box value=value content=content onChange=onChange}}
+    {{single-select value=value content=content onChange=onChange}}
+  `,
+
+  beforeEach() {
+    setDefaultState(this, null, { content: DEFAULT_CONTENT });
+
+    withPluginApi("0.8.43", api => {
+      api.modifySelectKit("combo-box").prependContent(() => {
+        return {
+          id: "alpaca",
+          name: "Alpaca"
+        };
+      });
+    });
+  },
+
+  afterEach() {},
+
+  async test(assert) {
+    await this.comboBox.expand();
+    const row = this.comboBox.rowByIndex(0);
+    assert.ok(row.exists());
+    assert.equal(row.value(), "alpaca");
+
+    await this.comboBox.collapse();
+
+    assert.notOk(this.singleSelect.rowByValue("alpaca").exists());
+  }
+});
+
+componentTest("modifySelectKit(identifier).onChange", {
+  template: `
+    <div id="test"></div>
+    {{combo-box value=value content=content onChange=onChange}}
+  `,
+
+  beforeEach() {
+    setDefaultState(this, null, { content: DEFAULT_CONTENT });
+
+    withPluginApi("0.8.43", api => {
+      api.modifySelectKit("combo-box").onChange((component, value, item) => {
+        find("#test").text(item.name);
+      });
+    });
+  },
+
+  async test(assert) {
+    await this.comboBox.expand();
+    await this.comboBox.selectRowByIndex(0);
+
+    assert.equal(find("#test").text(), "foo");
+  }
+});

test/javascripts/components/select-kit/category-chooser-test.js

@@ -1,5 +1,5 @@
 import componentTest from "helpers/component-test";
-import { testSelectKitModule } from "./select-kit-test-helper";
+import { testSelectKitModule } from "helpers/select-kit-helper";
 
 testSelectKitModule("category-chooser");
 

test/javascripts/components/select-kit/category-drop-test.js

@@ -1,7 +1,7 @@
 import DiscourseURL from "discourse/lib/url";
 import Category from "discourse/models/category";
 import componentTest from "helpers/component-test";
-import { testSelectKitModule } from "./select-kit-test-helper";
+import { testSelectKitModule } from "helpers/select-kit-helper";
 import {
   NO_CATEGORIES_ID,
   ALL_CATEGORIES_ID

test/javascripts/components/select-kit/list-setting-test.js

@@ -1,5 +1,5 @@
 import componentTest from "helpers/component-test";
-import { testSelectKitModule } from "./select-kit-test-helper";
+import { testSelectKitModule } from "helpers/select-kit-helper";
 
 testSelectKitModule("list-setting");
 

test/javascripts/components/select-kit/mini-tag-chooser-test.js

@@ -1,5 +1,5 @@
 import componentTest from "helpers/component-test";
-import { testSelectKitModule } from "./select-kit-test-helper";
+import { testSelectKitModule } from "helpers/select-kit-helper";
 
 testSelectKitModule("mini-tag-chooser");
 

test/javascripts/components/select-kit/multi-select-test.js

@@ -1,5 +1,5 @@
 import componentTest from "helpers/component-test";
-import { testSelectKitModule } from "./select-kit-test-helper";
+import { testSelectKitModule } from "helpers/select-kit-helper";
 
 testSelectKitModule("multi-select");
 

test/javascripts/components/select-kit/notifications-button-test.js

@@ -1,5 +1,8 @@
 import componentTest from "helpers/component-test";
-import { testSelectKitModule, setDefaultState } from "./select-kit-test-helper";
+import {
+  testSelectKitModule,
+  setDefaultState
+} from "helpers/select-kit-helper";
 
 testSelectKitModule("notifications-button");
 

test/javascripts/components/select-kit/select-kit-test-helper.js

@@ -1,35 +0,0 @@
-import selectKit from "helpers/select-kit-helper";
-
-export function testSelectKitModule(moduleName, options = {}) {
-  moduleForComponent(`select-kit/${moduleName}`, {
-    integration: true,
-
-    beforeEach() {
-      this.set("subject", selectKit());
-      options.beforeEach && options.beforeEach.call(this);
-    },
-
-    afterEach() {
-      options.afterEach && options.afterEach.call(this);
-    }
-  });
-}
-
-export const DEFAULT_CONTENT = [
-  { id: 1, name: "foo" },
-  { id: 2, name: "bar" },
-  { id: 3, name: "baz" }
-];
-
-export function setDefaultState(ctx, value, options = {}) {
-  const properties = Object.assign(
-    {
-      onChange: v => {
-        this.set("value", v);
-      }
-    },
-    options || {}
-  );
-
-  ctx.setProperties(properties);
-}

test/javascripts/components/select-kit/single-select-test.js

@@ -1,5 +1,5 @@
 import componentTest from "helpers/component-test";
-import { testSelectKitModule } from "./select-kit-test-helper";
+import { testSelectKitModule } from "helpers/select-kit-helper";
 
 testSelectKitModule("single-select");
 

test/javascripts/components/select-kit/tag-drop-test.js

@@ -1,5 +1,5 @@
 import componentTest from "helpers/component-test";
-import { testSelectKitModule } from "./select-kit-test-helper";
+import { testSelectKitModule } from "helpers/select-kit-helper";
 import Site from "discourse/models/site";
 import { set } from "@ember/object";
 import pretender from "helpers/create-pretender";

test/javascripts/components/select-kit/user-chooser-test.js

@@ -1,5 +1,5 @@
 import componentTest from "helpers/component-test";
-import { testSelectKitModule } from "./select-kit-test-helper";
+import { testSelectKitModule } from "helpers/select-kit-helper";
 import pretender from "helpers/create-pretender";
 
 testSelectKitModule("user-chooser");

test/javascripts/helpers/select-kit-helper.js

@@ -276,3 +276,38 @@ export default function selectKit(selector) {
     }
   };
 }
+
+export function testSelectKitModule(moduleName, options = {}) {
+  moduleForComponent(`select-kit/${moduleName}`, {
+    integration: true,
+
+    beforeEach() {
+      this.set("subject", selectKit());
+      options.beforeEach && options.beforeEach.call(this);
+    },
+
+    afterEach() {
+      options.afterEach && options.afterEach.call(this);
+    }
+  });
+}
+
+export const DEFAULT_CONTENT = [
+  { id: 1, name: "foo" },
+  { id: 2, name: "bar" },
+  { id: 3, name: "baz" }
+];
+
+export function setDefaultState(ctx, value, options = {}) {
+  const properties = Object.assign(
+    {
+      value,
+      onChange: v => {
+        ctx.set("value", v);
+      }
+    },
+    options || {}
+  );
+
+  ctx.setProperties(properties);
+}