feat(emeisOptions)!: component injection via emeisOptions

BREAKING CHANGE: replaces customButton with customComponent property in emeisOptions service

README.md

@@ -77,6 +77,8 @@ The config service supports the following options:
 ```js
 import Service from "@ember/service";
 
+import DummyButton from "dummy/app/components/dummy-button/dummy-button";
+
 export default class EmeisOptionsService extends Service {
   // number of items in list views
   pageSize = 10;
@@ -101,21 +103,12 @@ export default class EmeisOptionsService extends Service {
   // show only a subset of the main navigation entries
   navigationEntries = ["users", "scopes"];
 
-  // On each model edit view (e.g. users) you can define a list of custom buttons. Each button needs a label and a callback function. The callback function gets the current active model as first argument. Optionally you can highlight the button with the 'type' attribute.
-  customButtons = {
-    users: [
-      {
-        label: "My Button", // this could also be an ember-intl translation key
-        callback: () => window.alert("test"),
-        type: "danger" // leave blank or choose between primary, danger
-      },
-      {
-        label: "A second Button",
-        callback: (model) => console.log(model),
-      }
-    ]
-  };
-
+  /*
+   On each model edit view (e.g. users) you can define a custom component. The component will be rendered at the bottom of the edit view, but above the primary form buttons. Each component can be designed freely and the model will be passed into the component as `@model` argument. For a working demo have a look at our "dummy-button" at "dummy/app/components/dummy-button".
+  */
+  customComponents = {
+    users: DummyButton,
+  },
   // define custom fields for a given context (user, scope, role or permission)
   metaFields = {
     user: [],

addon/components/edit-form.hbs

@@ -6,16 +6,10 @@
   {{yield}}
 
   <div class="uk-flex uk-flex-left uk-margin">
-    {{#if this.customButtons}}
-      {{#each this.customButtons as |button|}}
-        <UkButton
-          @type="button"
-          @label={{optional-translate button.label}}
-          class="uk-margin-right {{if button.type (concat 'uk-button-' button.type) ''}}"
-          @onClick={{fn this.customAction button @model}}
-          data-test-custom-button
-        />
-      {{/each}}
+    {{#if this.customComponent}}
+      {{#let (component (ensure-safe-component this.customComponent)) as |CustomComponent|}}
+        <CustomComponent @model={{@model}} />
+      {{/let}}
     {{/if}}
   </div>
 

addon/components/edit-form.js

@@ -1,4 +1,3 @@
-import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { task } from "ember-concurrency";
@@ -46,18 +45,8 @@ export default class EditFormComponent extends Component {
     return this.relativeParentRouteName.split(".")[0];
   }
 
-  get customButtons() {
-    return this.emeisOptions.customButtons?.[this.modelName];
-  }
-
-  @action
-  customAction(button, model) {
-    if (typeof button.callback !== "function") {
-      this.notification.danger(
-        this.intl.t("emeis.form.custom-button-action-error")
-      );
-    }
-    button.callback(model);
+  get customComponent() {
+    return this.emeisOptions.customComponents?.[this.modelName];
   }
 
   @task

tests/dummy/app/components/dummy-button/dummy-button.hbs

@@ -0,0 +1,7 @@
+<UkButton
+  @type="button"
+  @label="This is my custom button"
+  class="uk-margin-right uk-button-danger"
+  @onClick={{fn this.callBack @model}}
+  data-test-custom-component
+/>

tests/dummy/app/components/dummy-button/dummy-button.js

@@ -0,0 +1,14 @@
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
+
+export default class DummyButtonComponent extends Component {
+  @action
+  callBack(model) {
+    console.warn("This is your current model", model);
+
+    // this stuff is for (integration) testing purposes only
+    document
+      .querySelector("[data-test-custom-component]")
+      .setAttribute("data-test-action-triggered", true);
+  }
+}

tests/dummy/app/services/emeis-options.js

@@ -1,5 +1,7 @@
 import Service from "@ember/service";
 
+import TestButtonComponent from "../components/dummy-button/dummy-button"; // template and component file must have the same name (if not template only)
+
 export default class EmeisOptionsService extends Service {
   emailAsUsername = false;
   pageSize = 10;
@@ -11,18 +13,8 @@ export default class EmeisOptionsService extends Service {
   //   language: "optional",
   // };
   // navigationEntries = ["users", "scopes"];
-  customButtons = {
-    users: [
-      {
-        label: "This is a custom button",
-        callback: () => console.warn("test"),
-        type: "primary",
-      },
-      {
-        label: "Second Button",
-        callback: () => console.warn("test"),
-      },
-    ],
+  customComponents = {
+    users: TestButtonComponent,
   };
   metaFields = {
     user: [

tests/integration/components/edit-form-test.js

@@ -5,19 +5,11 @@ import { setupIntl } from "ember-intl/test-support";
 import { setupRenderingTest } from "ember-qunit";
 import { module, test } from "qunit";
 
+import DummyButton from "../../../components/dummy-button/dummy-button";
+
 class EmeisOptionsStub extends Service {
-  customButtons = {
-    users: [
-      {
-        label: "This is a custom button",
-        callback: () => {
-          document
-            .querySelector("[data-test-custom-button]")
-            .setAttribute("data-test-action-triggered", true);
-        },
-        type: "danger",
-      },
-    ],
+  customComponents = {
+    users: DummyButton,
   };
 }
 
@@ -135,16 +127,16 @@ module("Integration | Component | edit-form", function (hooks) {
       <EditForm></EditForm>
     `);
 
-    assert.dom("[data-test-custom-button]").exists();
-    assert.dom("[data-test-custom-button].uk-button-danger").exists();
+    assert.dom("[data-test-custom-component]").exists();
+    assert.dom("[data-test-custom-component].uk-button-danger").exists();
     assert
-      .dom("[data-test-custom-button]")
+      .dom("[data-test-custom-component]")
       .hasNoAttribute("data-test-action-triggered");
 
-    await click("[data-test-custom-button]");
+    await click("[data-test-custom-component]");
 
     assert
-      .dom("[data-test-custom-button]")
+      .dom("[data-test-custom-component]")
       .hasAttribute("data-test-action-triggered");
   });
 });