DEV: Update DButton uses (#23333)

1. Use `this.` instead of `{{action}}` where applicable 2. Use `{{fn}}` instead of `@actionParam` where applicable 3. Use non-`@` versions of class/type/tabindex/aria-controls/aria-expanded 4. Remove `btn` class (it's added automatically to all DButtons) 5. Remove `type="button"` (it's the default) 6. Use `concat-class` helper
2025-06-04 08:44:48 +08:00 · 2023-08-31 11:49:35 +02:00
parent e1ae32103d
commit 1c87bb7fe9
237 changed files with 998 additions and 1091 deletions
--- a/plugins/chat/assets/javascripts/discourse/components/chat-browse-view.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-browse-view.hbs
@ -13,13 +13,13 @@

  {{#if this.currentUser.staff}}
    <DButton
-      @action={{action "createChannel"}}
+      @action={{this.createChannel}}
      @icon="plus"
-      @class={{concat-class
+      @label={{if this.site.desktopView "chat.create_channel.title"}}
+      class={{concat-class
        "new-channel-btn"
        (if this.site.mobileView "btn-flat")
      }}
-      @label={{if this.site.desktopView "chat.create_channel.title"}}
    />
  {{/if}}
 </div>
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-about-view.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-about-view.hbs
@ -22,9 +22,9 @@
      {{#if (chat-guardian "can-edit-chat-channel")}}
        <div class="chat-form__label-actions">
          <DButton
-            @class="edit-name-slug-btn btn-flat"
            @label="chat.channel_settings.edit"
            @action={{if this.onEditChatChannelName this.onEditChatChannelName}}
+            class="edit-name-slug-btn btn-flat"
          />
        </div>
      {{/if}}
@ -50,7 +50,6 @@
        {{#if (chat-guardian "can-edit-chat-channel")}}
          <div class="chat-form__label-actions">
            <DButton
-              @class="edit-description-btn btn-flat"
              @label={{if
                this.channel.description.length
                "chat.channel_settings.edit"
@ -60,6 +59,7 @@
                this.onEditChatChannelDescription
                this.onEditChatChannelDescription
              }}
+              class="edit-description-btn btn-flat"
            />
          </div>
        {{/if}}
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-leave-btn.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-leave-btn.hbs
@ -2,7 +2,7 @@
  <DButton
    @icon="times"
    @action={{@onLeaveChannel}}
-    @class="btn-flat chat-channel-leave-btn"
    @title={{this.leaveChatTitleKey}}
+    class="btn-flat chat-channel-leave-btn"
  />
 {{/if}}
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-settings-view.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-settings-view.hbs
@ -158,10 +158,10 @@
      {{#if (chat-guardian "can-archive-channel" @channel)}}
        <div class="chat-form__field">
          <DButton
-            @action={{action "onArchiveChannel"}}
+            @action={{this.onArchiveChannel}}
            @label="chat.channel_settings.archive_channel"
-            @class="archive-btn chat-form__btn btn-flat"
            @icon="archive"
+            class="archive-btn chat-form__btn btn-flat"
          />
        </div>
      {{/if}}
@ -169,29 +169,29 @@
      {{#if @channel.isClosed}}
        <div class="chat-form__field">
          <DButton
-            @action={{action "onToggleChannelState"}}
+            @action={{this.onToggleChannelState}}
            @label="chat.channel_settings.open_channel"
-            @class="open-btn chat-form__btn btn-flat"
            @icon="unlock"
+            class="open-btn chat-form__btn btn-flat"
          />
        </div>
      {{else}}
        <div class="chat-form__field">
          <DButton
-            @action={{action "onToggleChannelState"}}
+            @action={{this.onToggleChannelState}}
            @label="chat.channel_settings.close_channel"
-            @class="close-btn chat-form__btn btn-flat"
            @icon="lock"
+            class="close-btn chat-form__btn btn-flat"
          />
        </div>
      {{/if}}

      <div class="chat-form__field">
        <DButton
-          @action={{action "onDeleteChannel"}}
+          @action={{this.onDeleteChannel}}
          @label="chat.channel_settings.delete_channel"
-          @class="delete-btn chat-form__btn btn-flat"
          @icon="trash-alt"
+          class="delete-btn chat-form__btn btn-flat"
        />
      </div>
    {{/if}}
--- a/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.hbs
@ -23,13 +23,13 @@
      {{#each @buttons as |button|}}
        <li class={{concat-class "chat-composer-dropdown__item" button.id}}>
          <DButton
-            @class={{concat-class
-              "chat-composer-dropdown__action-btn"
-              button.id
-            }}
            @icon={{button.icon}}
            @action={{fn this.onButtonClick button}}
            @label={{button.label}}
+            class={{concat-class
+              "chat-composer-dropdown__action-btn"
+              button.id
+            }}
          />
        </li>
      {{/each}}
--- a/plugins/chat/assets/javascripts/discourse/components/chat-composer-message-details.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer-message-details.hbs
@ -14,8 +14,8 @@

  <DButton
    @action={{@cancelAction}}
-    @class="btn-flat cancel-message-action"
    @icon="times-circle"
    @title="cancel"
+    class="btn-flat cancel-message-action"
  />
 </div>
--- a/plugins/chat/assets/javascripts/discourse/components/chat-composer-upload.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer-upload.hbs
@ -48,10 +48,10 @@
    </span>

    <DButton
-      @class="btn-flat chat-composer-upload__remove-btn"
      @action={{@onCancel}}
      @icon="times"
      @title="chat.remove_upload"
+      class="btn-flat chat-composer-upload__remove-btn"
    />
  </div>
 {{/if}}
--- a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/close-button.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/close-button.hbs
@ -2,5 +2,5 @@
  @icon="times"
  @action={{@close}}
  @title="chat.close"
-  @class="btn-flat btn-link chat-drawer-header__close-btn"
+  class="btn-flat btn-link chat-drawer-header__close-btn"
 />
--- a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/toggle-expand-button.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/toggle-expand-button.hbs
@ -4,11 +4,11 @@
    "angle-double-down"
    "angle-double-up"
  }}
-  @class="btn-flat btn-link chat-drawer-header__expand-btn"
  @action={{@toggleExpand}}
  @title={{if
    this.chatStateManager.isDrawerExpanded
    "chat.collapse"
    "chat.expand"
  }}
+  class="btn-flat btn-link chat-drawer-header__expand-btn"
 />
--- a/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.hbs
@ -36,18 +36,18 @@

      {{#if this.messageInteractor.canInteractWithMessage}}
        <DButton
-          @class="btn-flat react-btn"
          @action={{this.messageInteractor.openEmojiPicker}}
          @icon="discourse-emojis"
          @title="chat.react"
          @forwardEvent={{true}}
+          class="btn-flat react-btn"
        />
      {{/if}}

      {{#if this.messageInteractor.canBookmark}}
        <DButton
-          @class="btn-flat bookmark-btn"
          @action={{this.messageInteractor.toggleBookmark}}
+          class="btn-flat bookmark-btn"
        >
          <BookmarkIcon @bookmark={{this.message.bookmark}} />
        </DButton>
@ -55,10 +55,10 @@

      {{#if this.messageInteractor.canReply}}
        <DButton
-          @class="btn-flat reply-btn"
          @action={{this.messageInteractor.reply}}
          @icon="reply"
          @title="chat.reply"
+          class="btn-flat reply-btn"
        />
      {{/if}}

--- a/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.hbs
@ -34,11 +34,10 @@
        {{#each this.messageInteractor.secondaryActions as |button|}}
          <li class="chat-message-action-item" data-id={{button.id}}>
            <DButton
-              @class="chat-message-action"
              @translatedLabel={{button.name}}
              @icon={{button.icon}}
-              @actionParam={{button.id}}
-              @action={{action this.actAndCloseMenu button.id}}
+              @action={{fn this.actAndCloseMenu button.id}}
+              class="chat-message-action"
            />
          </li>
        {{/each}}
@ -59,20 +58,20 @@
            {{/each}}

            <DButton
-              @class="btn-flat react-btn"
              @action={{this.openEmojiPicker}}
              @icon="discourse-emojis"
              @title="chat.react"
              @forwardEvent={{true}}
              data-id="react"
+              class="btn-flat react-btn"
            />
          {{/if}}

          {{#if this.messageInteractor.canBookmark}}
            <DButton
-              @class="btn-flat bookmark-btn"
-              @action={{action this.actAndCloseMenu "toggleBookmark"}}
+              @action={{fn this.actAndCloseMenu "toggleBookmark"}}
              data-id="bookmark"
+              class="btn-flat bookmark-btn"
            >
              <BookmarkIcon @bookmark={{this.message.bookmark}} />
            </DButton>
@ -80,11 +79,11 @@

          {{#if this.messageInteractor.canReply}}
            <DButton
-              @class="chat-message-action reply-btn btn-flat"
-              @action={{action this.actAndCloseMenu "reply"}}
+              @action={{fn this.actAndCloseMenu "reply"}}
              @icon="reply"
              @title="chat.reply"
              data-id="reply"
+              class="chat-message-action reply-btn btn-flat"
            />
          {{/if}}
        </div>
--- a/plugins/chat/assets/javascripts/discourse/components/chat-message.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-message.hbs
@ -54,17 +54,17 @@
      {{#if this.deletedAndCollapsed}}
        <div class="chat-message-text -deleted">
          <DButton
-            @class="btn-flat chat-message-expand"
            @action={{this.expand}}
            @translatedLabel={{this.deletedMessageLabel}}
+            class="btn-flat chat-message-expand"
          />
        </div>
      {{else if this.hiddenAndCollapsed}}
        <div class="chat-message-text -hidden">
          <DButton
-            @class="btn-flat chat-message-expand"
            @action={{this.expand}}
            @label="chat.hidden"
+            class="btn-flat chat-message-expand"
          />
        </div>
      {{else}}
@ -103,11 +103,11 @@

                  {{#if this.shouldRenderOpenEmojiPickerButton}}
                    <DButton
-                      @class="chat-message-react-btn"
                      @action={{this.messageInteractor.openEmojiPicker}}
                      @icon="discourse-emojis"
                      @title="chat.react"
                      @forwardEvent={{true}}
+                      class="chat-message-react-btn"
                    />
                  {{/if}}
                </div>
--- a/plugins/chat/assets/javascripts/discourse/components/chat-notices.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-notices.hbs
@ -9,8 +9,8 @@

      <DButton
        @icon="times"
-        @class="btn-flat chat-notices__notice__clear"
        @action={{fn this.clearNotice notice}}
+        class="btn-flat chat-notices__notice__clear"
      />
    </div>
  {{/each}}
--- a/plugins/chat/assets/javascripts/discourse/components/chat-retention-reminder.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-retention-reminder.hbs
@ -2,9 +2,9 @@
  <div class="chat-retention-reminder">
    <ChatRetentionReminderText @channel={{@channel}} />
    <DButton
-      @class="btn-flat dismiss-btn"
      @action={{this.dismiss}}
      @icon="times"
+      class="btn-flat dismiss-btn"
    />
  </div>
 {{/if}}
--- a/plugins/chat/assets/javascripts/discourse/components/chat/admin/export-messages.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/admin/export-messages.hbs
@ -4,7 +4,7 @@
  <DButton
    @label="chat.admin.export_messages.create_export"
    @title="chat.admin.export_messages.create_export"
-    @class="btn-primary"
    @action={{this.exportMessages}}
+    class="btn-primary"
  />
 </section>
--- a/plugins/chat/assets/javascripts/discourse/components/chat/modal/archive-channel.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/modal/archive-channel.hbs
@ -22,11 +22,11 @@
  </:body>
  <:footer>
    <DButton
-      @class="btn-primary"
      @disabled={{this.buttonDisabled}}
      @action={{this.archiveChannel}}
      @label="chat.channel_archive.title"
-      @id="chat-confirm-archive-channel"
+      id="chat-confirm-archive-channel"
+      class="btn-primary"
    />
  </:footer>
 </DModal>
--- a/plugins/chat/assets/javascripts/discourse/components/chat/modal/delete-channel.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/modal/delete-channel.hbs
@ -22,11 +22,11 @@
  <:footer>
    <DButton
      @disabled={{this.buttonDisabled}}
-      @class="btn-danger"
      @action={{this.deleteChannel}}
      @label="chat.channel_delete.confirm"
-      @id="chat-confirm-delete-channel"
+      id="chat-confirm-delete-channel"
+      class="btn-danger"
    />
-    <DButton @label="cancel" @class="btn-flat" @action={{@closeModal}} />
+    <DButton @label="cancel" @action={{@closeModal}} class="btn-flat" />
  </:footer>
 </DModal>
--- a/plugins/chat/assets/javascripts/discourse/components/chat/modal/edit-channel-description.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/modal/edit-channel-description.hbs
@ -27,10 +27,10 @@
  </:body>
  <:footer>
    <DButton
-      @class="btn-primary create"
      @action={{this.onSaveChatChannelDescription}}
      @label="save"
      @disabled={{this.isSaveDisabled}}
+      class="btn-primary create"
    />
    <DModalCancel @close={{@closeModal}} />
  </:footer>
--- a/plugins/chat/assets/javascripts/discourse/components/chat/modal/edit-channel-name.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/modal/edit-channel-name.hbs
@ -44,10 +44,10 @@
  </:body>
  <:footer>
    <DButton
-      @class="btn-primary create"
      @action={{this.onSave}}
      @label="save"
      @disabled={{this.isSaveDisabled}}
+      class="btn-primary create"
    />
    <DModalCancel @close={{@closeModal}} />
  </:footer>
--- a/plugins/chat/assets/javascripts/discourse/components/chat/modal/move-message-to-channel.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/modal/move-message-to-channel.hbs
@ -18,12 +18,12 @@
  </:body>
  <:footer>
    <DButton
-      @class="btn-primary"
      @icon="sign-out-alt"
      @disabled={{this.disableMoveButton}}
      @action={{this.moveMessages}}
      @label="chat.move_to_channel.confirm_move"
+      class="btn-primary"
    />
-    <DButton @label="cancel" @class="btn-flat" @action={{@closeModal}} />
+    <DButton @label="cancel" @action={{@closeModal}} class="btn-flat" />
  </:footer>
 </DModal>
--- a/plugins/chat/assets/javascripts/discourse/components/chat/modal/thread-settings.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/modal/thread-settings.hbs
@ -17,10 +17,10 @@
  </:body>
  <:footer>
    <DButton
-      @class="btn-primary"
      @disabled={{this.buttonDisabled}}
      @action={{this.saveThread}}
      @label="save"
+      class="btn-primary"
    />
  </:footer>
 </DModal>
--- a/plugins/chat/assets/javascripts/discourse/components/chat/modal/toggle-channel-status.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/modal/toggle-channel-status.hbs
@ -11,10 +11,10 @@
  </:body>
  <:footer>
    <DButton
-      @class="btn-primary"
      @action={{this.onStatusChange}}
      @label={{this.buttonLabel}}
-      @id="chat-channel-toggle-btn"
+      id="chat-channel-toggle-btn"
+      class="btn-primary"
    />
  </:footer>
 </DModal>
--- a/plugins/chat/assets/javascripts/discourse/components/chat/selection-manager.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/selection-manager.hbs
@ -4,39 +4,39 @@
 >
  <div class="chat-selection-management__buttons">
    <DButton
-      @id="chat-quote-btn"
      @icon="quote-left"
      @label="chat.selection.quote_selection"
      @disabled={{not this.anyMessagesSelected}}
      @action={{this.quoteMessages}}
+      id="chat-quote-btn"
    />

    {{#if this.site.desktopView}}
      <DButton
-        @id="chat-copy-btn"
        @icon="copy"
        @label="chat.selection.copy"
        @disabled={{not this.anyMessagesSelected}}
        @action={{this.copyMessages}}
+        id="chat-copy-btn"
      />
    {{/if}}

    {{#if this.enableMove}}
      <DButton
-        @id="chat-move-to-channel-btn"
        @icon="sign-out-alt"
        @label="chat.selection.move_selection_to_channel"
        @disabled={{not this.anyMessagesSelected}}
        @action={{this.openMoveMessageModal}}
+        id="chat-move-to-channel-btn"
      />
    {{/if}}

    <DButton
-      @id="chat-cancel-selection-btn"
      @icon="times"
-      @class="btn-secondary cancel-btn"
      @label="chat.selection.cancel"
      @action={{@pane.cancelSelecting}}
+      id="chat-cancel-selection-btn"
+      class="btn-secondary cancel-btn"
    />
  </div>

--- a/plugins/chat/assets/javascripts/discourse/components/chat/thread/header.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/thread/header.hbs
@ -30,9 +30,9 @@
    {{#if this.canChangeThreadSettings}}
      <DButton
        @action={{this.openThreadSettings}}
-        @class="btn-flat chat-thread-header__settings"
        @icon="cog"
        @title="chat.thread.settings"
+        class="btn-flat chat-thread-header__settings"
      />
    {{/if}}
    <LinkTo
--- a/plugins/chat/assets/javascripts/discourse/components/chat/user-card-button.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/user-card-button.hbs
@ -1,8 +1,8 @@
 {{#if this.shouldRender}}
  <DButton
-    @class="btn-primary chat-user-card-btn"
    @action={{this.startChatting}}
    @label="chat.title_capitalized"
    @icon="d-chat"
+    class="btn-primary chat-user-card-btn"
  />
 {{/if}}
--- a/plugins/chat/assets/javascripts/discourse/components/collapser.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/collapser.hbs
@ -3,15 +3,15 @@

  {{#if this.collapsed}}
    <DButton
-      @action={{action "open"}}
+      @action={{this.open}}
      @icon="caret-right"
-      @class="chat-message-collapser-button chat-message-collapser-closed"
+      class="chat-message-collapser-button chat-message-collapser-closed"
    />
  {{else}}
    <DButton
-      @action={{action "close"}}
+      @action={{this.close}}
      @icon="caret-down"
-      @class="chat-message-collapser-button chat-message-collapser-opened"
+      class="chat-message-collapser-button chat-message-collapser-opened"
    />
  {{/if}}
 </div>
--- a/plugins/chat/assets/javascripts/discourse/components/toggle-channel-membership-button.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/toggle-channel-membership-button.hbs
@ -1,25 +1,25 @@
 {{#if @channel.currentUserMembership.following}}
  <DButton
-    @action={{action "onLeaveChannel"}}
+    @action={{this.onLeaveChannel}}
    @translatedLabel={{this.label}}
    @translatedTitle={{this.options.leaveTitle}}
-    @class={{concat-class
+    @icon={{this.options.leaveIcon}}
+    @disabled={{this.isLoading}}
+    class={{concat-class
      "toggle-channel-membership-button -leave btn-flat"
      this.options.leaveClass
    }}
-    @icon={{this.options.leaveIcon}}
-    @disabled={{this.isLoading}}
  />
 {{else}}
  <DButton
-    @action={{action "onJoinChannel"}}
+    @action={{this.onJoinChannel}}
    @translatedLabel={{this.label}}
    @translatedTitle={{this.options.joinTitle}}
-    @class={{concat-class
+    @icon={{this.options.joinIcon}}
+    @disabled={{this.isLoading}}
+    class={{concat-class
      "toggle-channel-membership-button -join"
      this.options.joinClass
    }}
-    @icon={{this.options.joinIcon}}
-    @disabled={{this.isLoading}}
  />
 {{/if}}
--- a/plugins/chat/assets/javascripts/discourse/templates/admin-plugins-chat.hbs
+++ b/plugins/chat/assets/javascripts/discourse/templates/admin-plugins-chat.hbs
@ -2,11 +2,11 @@

 {{#if this.selectedWebhook}}
  <DButton
-    @class="incoming-chat-webhooks-back"
    @icon="chevron-left"
    @label="chat.incoming_webhooks.back"
    @title="chat.incoming_webhooks.back"
-    @action={{action (mut this.selectedWebhookId) null}}
+    @action={{fn (mut this.selectedWebhookId) null}}
+    class="incoming-chat-webhooks-back"
  />

  <form class="form-vertical">
@ -75,13 +75,13 @@

      {{#unless this.emojiPickerIsActive}}
        <DButton
-          @class="btn-primary"
          @label="chat.incoming_webhooks.select_emoji"
-          @action={{action (mut this.emojiPickerIsActive) true}}
+          @action={{fn (mut this.emojiPickerIsActive) true}}
+          class="btn-primary"
        />
        <DButton
          @label="chat.incoming_webhooks.reset_emoji"
-          @action={{action (mut this.selectedWebhook.emoji) null}}
+          @action={{fn (mut this.selectedWebhook.emoji) null}}
          @disabled={{not this.selectedWebhook.emoji}}
        />
      {{/unless}}
@ -100,11 +100,11 @@
    </div>

    <DButton
-      @class="btn-primary"
      @label="chat.incoming_webhooks.save"
      @title="chat.incoming_webhooks.save"
-      @action={{action "saveEdit"}}
+      @action={{this.saveEdit}}
      @disabled={{this.saveEditDisabled}}
+      class="btn-primary"
    />
  </form>
 {{else}}
@ -126,22 +126,22 @@
      <DButton
        @label="chat.create"
        @title="chat.create"
-        @class="btn-primary create-new-incoming-webhook-btn"
        @disabled={{not this.nameAndChannelValid}}
-        @action={{action "createNewWebhook"}}
+        @action={{this.createNewWebhook}}
+        class="btn-primary create-new-incoming-webhook-btn"
      />
      <DButton
        @label="chat.cancel"
        @title="chat.cancel"
-        @action={{action "resetNewWebhook"}}
+        @action={{this.resetNewWebhook}}
      />
    </div>
  {{else}}
    <DButton
      @label="chat.incoming_webhooks.new"
      @title="chat.incoming_webhooks.new"
-      @class="btn-primary"
-      @action={{action (mut this.creatingNew) true}}
+      @action={{fn (mut this.creatingNew) true}}
+      class="btn-primary"
    />
  {{/if}}

@ -175,16 +175,15 @@
          <div class="incoming-chat-webhooks--row--controls">
            <div>
              <DButton
-                @class="btn"
                @icon="pencil-alt"
                @label="chat.incoming_webhooks.edit"
-                @action={{action (mut this.selectedWebhookId) webhook.id}}
+                @action={{fn (mut this.selectedWebhookId) webhook.id}}
              />
              <DButton
-                @class="btn btn-danger"
                @icon="trash-alt"
                @title="chat.incoming_webhooks.delete"
-                @action={{action "destroyWebhook" webhook}}
+                @action={{fn this.destroyWebhook webhook}}
+                class="btn-danger"
              />
            </div>
          </div>