FEATURE: Add Bulk actions to /filter page (#29420)

- Add bulk actions component on /filter page for both desktop & mobile view.
- Add system specs to assert bulk actions to be available on /filter page.

app/assets/javascripts/discourse/app/components/discovery/filter-navigation.hbs

@@ -2,6 +2,12 @@
 
 <section class="navigation-container">
   <div class="topic-query-filter">
+    {{#if (and this.site.mobileView @canBulkSelect)}}
+      <div class="topic-query-filter__bulk-action-btn">
+        <BulkSelectToggle @bulkSelectHelper={{@bulkSelectHelper}} />
+      </div>
+    {{/if}}
+
     <div class="topic-query-filter__input">
       {{d-icon "filter" class="topic-query-filter__icon"}}
       <Input

app/assets/javascripts/discourse/app/components/discovery/filter-navigation.js

@@ -1,11 +1,14 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
+import { service } from "@ember/service";
 import { resettableTracked } from "discourse/lib/tracked-tools";
 import discourseDebounce from "discourse-common/lib/debounce";
 import { bind } from "discourse-common/utils/decorators";
 
 export default class DiscoveryFilterNavigation extends Component {
+  @service site;
+
   @tracked copyIcon = "link";
   @tracked copyClass = "btn-default";
   @resettableTracked newQueryString = this.args.queryString;

app/assets/javascripts/discourse/app/controllers/discovery/filter.js

@@ -1,11 +1,17 @@
 import { tracked } from "@glimmer/tracking";
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
+import BulkSelectHelper from "discourse/lib/bulk-select-helper";
 
 export default class extends Controller {
   @tracked q = "";
 
   queryParams = ["q"];
+  bulkSelectHelper = new BulkSelectHelper(this);
+
+  get canBulkSelect() {
+    return this.currentUser?.canManageTopic;
+  }
 
   @action
   updateTopicsListQueryParams(queryString) {

app/assets/javascripts/discourse/app/templates/discovery/filter.hbs

@@ -3,6 +3,8 @@
     <Discovery::FilterNavigation
       @queryString={{this.q}}
       @updateTopicsListQueryParams={{this.updateTopicsListQueryParams}}
+      @canBulkSelect={{this.canBulkSelect}}
+      @bulkSelectHelper={{this.bulkSelectHelper}}
     />
   </:navigation>
   <:list>

app/assets/stylesheets/common/components/topic-query-filter.scss

@@ -26,6 +26,10 @@
     color: var(--primary-low-mid);
   }
 
+  &__bulk-action-btn {
+    margin-right: 0.5em;
+  }
+
   input.topic-query-filter__filter-term {
     margin: 0 0.5em 0 0;
     border-color: var(--primary-low-mid);

spec/system/filtering_topics_spec.rb

@@ -115,4 +115,36 @@ describe "Filtering topics", type: :system do
       expect(topic_list).to have_topic(topic_with_tag_and_tag2)
     end
   end
+
+  describe "bulk topic selection" do
+    fab!(:user) { Fabricate(:moderator) }
+
+    it "shows the buttons and checkboxes" do
+      topics = Fabricate.times(2, :topic)
+      sign_in(user)
+      visit("/filter")
+
+      find("button.bulk-select").click
+      expect(topic_list).to have_topic_checkbox(topics.first)
+      expect(page).to have_no_css("button.bulk-select-topics-dropdown-trigger")
+
+      topic_list.click_topic_checkbox(topics.first)
+      expect(page).to have_css("button.bulk-select-topics-dropdown-trigger")
+    end
+
+    context "when on mobile", mobile: true do
+      it "shows the buttons and checkboxes" do
+        topics = Fabricate.times(2, :topic)
+        sign_in(user)
+        visit("/filter")
+
+        find("button.bulk-select").click
+        expect(topic_list).to have_topic_checkbox(topics.first)
+        expect(page).to have_no_css("button.bulk-select-topics-dropdown-trigger")
+
+        topic_list.click_topic_checkbox(topics.first)
+        expect(page).to have_css("button.bulk-select-topics-dropdown-trigger")
+      end
+    end
+  end
 end