DEV: Convert topic-dismiss-buttons to glimmer/gjs (#27606)

app/assets/javascripts/discourse/app/components/topic-dismiss-buttons.gjs

@@ -0,0 +1,77 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import DismissReadModal from "discourse/components/modal/dismiss-read";
+import I18n from "discourse-i18n";
+
+export default class TopicDismissButtons extends Component {
+  @service currentUser;
+  @service modal;
+
+  get showBasedOnPosition() {
+    return this.args.position === "top" || this.args.model.topics.length > 5;
+  }
+
+  get dismissLabel() {
+    if (this.args.selectedTopics.length === 0) {
+      return I18n.t("topics.bulk.dismiss_button");
+    }
+
+    return I18n.t("topics.bulk.dismiss_button_with_selected", {
+      count: this.args.selectedTopics.length,
+    });
+  }
+
+  get dismissNewLabel() {
+    if (this.currentUser?.new_new_view_enabled) {
+      return I18n.t("topics.bulk.dismiss_button");
+    }
+
+    if (this.args.selectedTopics.length === 0) {
+      return I18n.t("topics.bulk.dismiss_new");
+    }
+
+    return I18n.t("topics.bulk.dismiss_new_with_selected", {
+      count: this.args.selectedTopics.length,
+    });
+  }
+
+  @action
+  dismissReadPosts() {
+    this.modal.show(DismissReadModal, {
+      model: {
+        title: this.args.selectedTopics.length
+          ? "topics.bulk.dismiss_read_with_selected"
+          : "topics.bulk.dismiss_read",
+        count: this.args.selectedTopics.length,
+        dismissRead: this.args.dismissRead,
+      },
+    });
+  }
+
+  <template>
+    {{~#if this.showBasedOnPosition~}}
+      <div class="row dismiss-container-{{@position}}">
+        {{~#if @showDismissRead~}}
+          <DButton
+            @action={{this.dismissReadPosts}}
+            @translatedLabel={{this.dismissLabel}}
+            @title="topics.bulk.dismiss_tooltip"
+            id="dismiss-topics-{{@position}}"
+            class="btn-default dismiss-read"
+          />
+        {{~/if~}}
+        {{~#if @showResetNew~}}
+          <DButton
+            @action={{@resetNew}}
+            @translatedLabel={{this.dismissNewLabel}}
+            @icon="check"
+            id="dismiss-new-{{@position}}"
+            class="btn-default dismiss-read"
+          />
+        {{~/if~}}
+      </div>
+    {{~/if~}}
+  </template>
+}

app/assets/javascripts/discourse/app/components/topic-dismiss-buttons.hbs

@@ -1,22 +0,0 @@
-{{~#if this.showBasedOnPosition}}
-  <div class="row {{this.containerClass}}">
-    {{~#if this.showDismissRead}}
-      <DButton
-        @action={{this.dismissReadPosts}}
-        @translatedLabel={{this.dismissLabel}}
-        @title="topics.bulk.dismiss_tooltip"
-        id={{this.dismissReadId}}
-        class="btn-default dismiss-read"
-      />
-    {{/if~}}
-    {{~#if this.showResetNew}}
-      <DButton
-        @action={{this.resetNew}}
-        @icon="check"
-        @translatedLabel={{this.dismissNewLabel}}
-        id={{this.dismissNewId}}
-        class="btn-default dismiss-read"
-      />
-    {{/if~}}
-  </div>
-{{/if~}}

app/assets/javascripts/discourse/app/components/topic-dismiss-buttons.js

@@ -1,78 +0,0 @@
-import Component from "@ember/component";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-import DismissReadModal from "discourse/components/modal/dismiss-read";
-import discourseComputed from "discourse-common/utils/decorators";
-import I18n from "discourse-i18n";
-
-export default Component.extend({
-  tagName: "",
-  classNames: ["topic-dismiss-buttons"],
-
-  currentUser: service(),
-  modal: service(),
-
-  position: null,
-  selectedTopics: null,
-  model: null,
-
-  @discourseComputed("position")
-  containerClass(position) {
-    return `dismiss-container-${position}`;
-  },
-
-  @discourseComputed("position")
-  dismissReadId(position) {
-    return `dismiss-topics-${position}`;
-  },
-
-  @discourseComputed("position")
-  dismissNewId(position) {
-    return `dismiss-new-${position}`;
-  },
-
-  @discourseComputed("position", "model.topics.length")
-  showBasedOnPosition(position, topicCount) {
-    if (position !== "top") {
-      return topicCount > 5;
-    }
-    return true;
-  },
-
-  @discourseComputed("selectedTopics.length")
-  dismissLabel(selectedTopicCount) {
-    if (selectedTopicCount === 0) {
-      return I18n.t("topics.bulk.dismiss_button");
-    }
-    return I18n.t("topics.bulk.dismiss_button_with_selected", {
-      count: selectedTopicCount,
-    });
-  },
-
-  @discourseComputed("selectedTopics.length")
-  dismissNewLabel(selectedTopicCount) {
-    if (this.currentUser?.new_new_view_enabled) {
-      return I18n.t("topics.bulk.dismiss_button");
-    } else if (selectedTopicCount === 0) {
-      return I18n.t("topics.bulk.dismiss_new");
-    }
-    return I18n.t("topics.bulk.dismiss_new_with_selected", {
-      count: selectedTopicCount,
-    });
-  },
-
-  @action
-  dismissReadPosts() {
-    let dismissTitle = "topics.bulk.dismiss_read";
-    if (this.selectedTopics.length) {
-      dismissTitle = "topics.bulk.dismiss_read_with_selected";
-    }
-    this.modal.show(DismissReadModal, {
-      model: {
-        title: dismissTitle,
-        count: this.selectedTopics.length,
-        dismissRead: this.dismissRead,
-      },
-    });
-  },
-});