From b138eaf9e58d3207009b5efb9d5ffe37300877e3 Mon Sep 17 00:00:00 2001
From: Akshay Birajdar <akshaybirajdar05@gmail.com>
Date: Fri, 22 Nov 2024 06:21:06 +0530
Subject: [PATCH] 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.
---
 .../discovery/filter-navigation.hbs           |  6 ++++
 .../components/discovery/filter-navigation.js |  3 ++
 .../app/controllers/discovery/filter.js       |  6 ++++
 .../app/templates/discovery/filter.hbs        |  2 ++
 .../common/components/topic-query-filter.scss |  4 +++
 spec/system/filtering_topics_spec.rb          | 32 +++++++++++++++++++
 6 files changed, 53 insertions(+)

diff --git a/app/assets/javascripts/discourse/app/components/discovery/filter-navigation.hbs b/app/assets/javascripts/discourse/app/components/discovery/filter-navigation.hbs
index bc04df8606c..ceeb3a8c8cb 100644
--- a/app/assets/javascripts/discourse/app/components/discovery/filter-navigation.hbs
+++ b/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
diff --git a/app/assets/javascripts/discourse/app/components/discovery/filter-navigation.js b/app/assets/javascripts/discourse/app/components/discovery/filter-navigation.js
index cfdb59d80ec..9f7febe9ba8 100644
--- a/app/assets/javascripts/discourse/app/components/discovery/filter-navigation.js
+++ b/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;
diff --git a/app/assets/javascripts/discourse/app/controllers/discovery/filter.js b/app/assets/javascripts/discourse/app/controllers/discovery/filter.js
index f3c2c846243..2955526e694 100644
--- a/app/assets/javascripts/discourse/app/controllers/discovery/filter.js
+++ b/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) {
diff --git a/app/assets/javascripts/discourse/app/templates/discovery/filter.hbs b/app/assets/javascripts/discourse/app/templates/discovery/filter.hbs
index 5f1dbd4ab24..3c8d025c513 100644
--- a/app/assets/javascripts/discourse/app/templates/discovery/filter.hbs
+++ b/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>
diff --git a/app/assets/stylesheets/common/components/topic-query-filter.scss b/app/assets/stylesheets/common/components/topic-query-filter.scss
index e40ebd86ee7..9c99a807cb6 100644
--- a/app/assets/stylesheets/common/components/topic-query-filter.scss
+++ b/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);
diff --git a/spec/system/filtering_topics_spec.rb b/spec/system/filtering_topics_spec.rb
index 27893e4da88..1d789397ae9 100644
--- a/spec/system/filtering_topics_spec.rb
+++ b/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