DEV: Switch to new addComposerToolbarPopupMenuOption plugin API (#66)

Why this change?

`api.addToolbarPopupMenuOptionsCallback` has been deprecated in 913fd3a7b3

.discourse-compatibility

@@ -1,2 +1,3 @@
+< 3.2.0.beta2: f076c50946b5969175d45fdd2fb6194f43394e24
 3.1.999: 04b36c68012fba9778e400e83b0b01d7947b2cdf
 3.1.0.beta2: 850e31c83d310a1b52e6105fe201eb96f9e33deb

javascripts/discourse/api-initializers/table-builder.js

@@ -1,30 +1,19 @@
 import { apiInitializer } from "discourse/lib/api";
 import SpreadsheetEditor from "../components/spreadsheet-editor";
-import { action } from "@ember/object";
-import { inject as service } from "@ember/service";
 
-export default apiInitializer("0.11.1", (api) => {
-  api.modifyClass("controller:composer", {
-    pluginId: "discourse-table-builder",
-    modal: service(),
+export default apiInitializer("1.15.0", (api) => {
+  const modal = api.container.lookup("service:modal");
 
-    @action
-    showTableBuilder() {
-      this.modal.show(SpreadsheetEditor, {
+  api.addComposerToolbarPopupMenuOption({
+    icon: "table",
+    label: themePrefix("discourse_table_builder.composer.button"),
+    action: (toolbarEvent) => {
+      modal.show(SpreadsheetEditor, {
         model: {
-          toolbarEvent: this.toolbarEvent,
+          toolbarEvent,
           tableTokens: null,
         },
       });
     },
   });
-
-  api.addToolbarPopupMenuOptionsCallback(() => {
-    return {
-      id: "table-builder",
-      action: "showTableBuilder",
-      icon: "table",
-      label: themePrefix("discourse_table_builder.composer.button"),
-    };
-  });
 });

test/acceptance/table-builder-test.js

@@ -1,3 +1,4 @@
+import I18n from "discourse-i18n";
 import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
 import { click, visit } from "@ember/test-helpers";
 import { test } from "qunit";
@@ -13,10 +14,14 @@ acceptance("Table Builder", function (needs) {
     await click("#create-topic");
     await click(".d-editor-button-bar .options");
     await selectKit(".toolbar-popup-menu-options").expand();
-    assert.ok(
-      exists(".select-kit-row[data-value='showTableBuilder']"),
-      "it shows the builder button"
-    );
+
+    assert
+      .dom(
+        `.select-kit-row[data-name='${I18n.t(
+          themePrefix("discourse_table_builder.composer.button")
+        )}']`
+      )
+      .exists("it shows the builder button");
   });
 
   test("Can see table builder button when editing post", async function (assert) {
@@ -26,9 +31,13 @@ acceptance("Table Builder", function (needs) {
     assert.ok(exists("#reply-control"));
     await click(".d-editor-button-bar .options");
     await selectKit(".toolbar-popup-menu-options").expand();
-    assert.ok(
-      exists(".select-kit-row[data-value='showTableBuilder']"),
-      "it shows the builder button"
-    );
+
+    assert
+      .dom(
+        `.select-kit-row[data-name='${I18n.t(
+          themePrefix("discourse_table_builder.composer.button")
+        )}']`
+      )
+      .exists("it shows the builder button");
   });
 });