DEV: Add support for condition option when adding toolbar buttons (#24370)

app/assets/javascripts/discourse/app/components/d-editor.hbs

@@ -27,27 +27,29 @@
         <div class="d-editor-button-bar" role="toolbar">
           {{#each this.toolbar.groups as |group|}}
             {{#each group.buttons as |b|}}
-              {{#if b.popupMenu}}
-                <ToolbarPopupMenuOptions
-                  @content={{this.popupMenuOptions}}
-                  @onChange={{this.onPopupMenuAction}}
-                  @onOpen={{action b.action b}}
-                  @class={{b.className}}
-                  @tabindex={{-1}}
-                  @onKeydown={{this.rovingButtonBar}}
-                  @options={{hash icon=b.icon focusAfterOnChange=false}}
-                />
-              {{else}}
-                <DButton
-                  @action={{fn (action b.action) b}}
-                  @translatedTitle={{b.title}}
-                  @label={{b.label}}
-                  @icon={{b.icon}}
-                  @preventFocus={{b.preventFocus}}
-                  @onKeyDown={{this.rovingButtonBar}}
-                  tabindex={{b.tabindex}}
-                  class={{b.className}}
-                />
+              {{#if (b.condition this)}}
+                {{#if b.popupMenu}}
+                  <ToolbarPopupMenuOptions
+                    @content={{this.popupMenuOptions}}
+                    @onChange={{this.onPopupMenuAction}}
+                    @onOpen={{action b.action b}}
+                    @class={{b.className}}
+                    @tabindex={{-1}}
+                    @onKeydown={{this.rovingButtonBar}}
+                    @options={{hash icon=b.icon focusAfterOnChange=false}}
+                  />
+                {{else}}
+                  <DButton
+                    @action={{fn (action b.action) b}}
+                    @translatedTitle={{b.title}}
+                    @label={{b.label}}
+                    @icon={{b.icon}}
+                    @preventFocus={{b.preventFocus}}
+                    @onKeyDown={{this.rovingButtonBar}}
+                    tabindex={{b.tabindex}}
+                    class={{b.className}}
+                  />
+                {{/if}}
               {{/if}}
             {{/each}}
           {{/each}}

app/assets/javascripts/discourse/app/components/d-editor.js

@@ -170,12 +170,13 @@ class Toolbar {
       tabindex: button.tabindex || "-1",
       className: button.className || button.id,
       label: button.label,
-      icon: button.label ? null : button.icon || button.id,
+      icon: button.icon || button.id,
       action: button.action || ((a) => this.context.send("toolbarButton", a)),
       perform: button.perform || function () {},
       trimLeading: button.trimLeading,
       popupMenu: button.popupMenu || false,
       preventFocus: button.preventFocus || false,
+      condition: button.condition || (() => true),
     };
 
     if (button.sendAction) {

app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js

@@ -695,6 +695,33 @@ third line`
     );
   });
 
+  test("Toolbar buttons are only rendered when condition is met", async function (assert) {
+    withPluginApi("0.1", (api) => {
+      api.onToolbarCreate((toolbar) => {
+        toolbar.addButton({
+          id: "shown",
+          group: "extras",
+          icon: "far-smile",
+          action: () => {},
+          condition: () => true,
+        });
+
+        toolbar.addButton({
+          id: "not-shown",
+          group: "extras",
+          icon: "far-frown",
+          action: () => {},
+          condition: () => false,
+        });
+      });
+    });
+
+    await render(hbs`<DEditor/>`);
+
+    assert.ok(exists(".d-editor-button-bar button.shown"));
+    assert.notOk(exists(".d-editor-button-bar button.not-shown"));
+  });
+
   test("toolbar buttons tabindex", async function (assert) {
     await render(hbs`<DEditor />`);
     const buttons = queryAll(".d-editor-button-bar .btn");