FEATURE: Add bulk action to bookmark

app/assets/javascripts/discourse/app/components/bookmark-list.hbs

@@ -7,7 +7,55 @@
       <thead class="topic-list-header">
         {{#if this.site.desktopView}}
           <PluginOutlet @name="bookmark-list-table-header">
-            <th class="topic-list-data">{{i18n "topic.title"}}</th>
+            {{#if this.bulkSelectEnabled}}
+              <th class="bulk-select topic-list-data">
+                <FlatButton
+                  @action={{this.toggleBulkSelect}}
+                  @class="bulk-select"
+                  @icon="tasks"
+                  @title="bookmarks.bulk.toggle"
+                />
+              </th>
+            {{/if}}
+            <th class="topic-list-data">
+
+              {{#if this.bulkSelectEnabled}}
+                <span class="bulk-select-topics">
+                  {{~#if this.canDoBulkActions}}
+                    <div class="bulk-select-bookmarks-dropdown">
+                      <span class="bulk-select-bookmark-dropdown__count">
+                        {{i18n
+                          "bookmarks.bulk.selected_count"
+                          count=this.selectedCount
+                        }}
+                      </span>
+                      <BulkSelectBookmarksDropdown
+                        @bulkSelectHelper={{this.bulkSelectHelper}}
+                      />
+                    </div>
+
+                  {{/if~}}
+                  <DButton
+                    @action={{this.selectAll}}
+                    class="btn btn-default bulk-select-all"
+                    @label="bookmarks.bulk.select_all"
+                  />
+                  <DButton
+                    @action={{this.clearAll}}
+                    class="btn btn-default bulk-clear-all"
+                    @label="bookmarks.bulk.clear_all"
+                  />
+                </span>
+              {{else}}
+                <FlatButton
+                  @action={{this.toggleBulkSelect}}
+                  @class="bulk-select"
+                  @icon="tasks"
+                  @title="bookmarks.bulk.toggle"
+                />
+                {{i18n "topic.title"}}
+              {{/if~}}
+            </th>
             <th class="topic-list-data">&nbsp;</th>
             <th class="post-metadata topic-list-data">{{i18n
                 "post.bookmarks.updated"
@@ -20,6 +68,18 @@
       <tbody class="topic-list-body">
         {{#each this.content as |bookmark|}}
           <tr class="topic-list-item bookmark-list-item">
+            {{#if this.bulkSelectEnabled}}
+              <td class="bulk-select bookmark-list-data">
+                <label for="bulk-select-{{bookmark.id}}">
+                  <input
+                    type="checkbox"
+                    class="bulk-select"
+                    id="bulk-select-{{bookmark.id}}"
+                    data-id={{bookmark.id}}
+                  />
+                </label>
+              </td>
+            {{/if}}
             <th scope="row" class="main-link topic-list-data">
               <span class="link-top-line">
                 <div class="bookmark-metadata">

app/assets/javascripts/discourse/app/components/bookmark-list.js

@@ -1,5 +1,6 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
+import { dependentKeyCompat } from "@ember/object/compat";
 import { service } from "@ember/service";
 import { Promise } from "rsvp";
 import BookmarkModal from "discourse/components/modal/bookmark";
@@ -16,6 +17,18 @@ export default Component.extend({
   modal: service(),
   classNames: ["bookmark-list-wrapper"],
 
+  get canDoBulkActions() {
+    return this.bulkSelectHelper?.selected.length;
+  },
+
+  get selected() {
+    return this.bulkSelectHelper?.selected;
+  },
+
+  get selectedCount() {
+    return this.selected?.length || 0;
+  },
+
   @action
   removeBookmark(bookmark) {
     return new Promise((resolve, reject) => {
@@ -90,7 +103,82 @@ export default Component.extend({
     bookmark.togglePin().then(this.reload);
   },
 
+  @action
+  toggleBulkSelect() {
+    this.bulkSelectHelper?.toggleBulkSelect();
+    this.rerender();
+  },
+
+  @action
+  selectAll() {
+    this.bulkSelectHelper.autoAddBookmarksToBulkSelect = true;
+    document
+      .querySelectorAll("input.bulk-select:not(:checked)")
+      .forEach((el) => el.click());
+  },
+
+  @action
+  clearAll() {
+    this.bulkSelectHelper.autoAddBookmarksToBulkSelect = false;
+    document
+      .querySelectorAll("input.bulk-select:checked")
+      .forEach((el) => el.click());
+  },
+
+  @dependentKeyCompat // for the classNameBindings
+  get bulkSelectEnabled() {
+    return this.bulkSelectHelper?.bulkSelectEnabled;
+  },
+
   _removeBookmarkFromList(bookmark) {
     this.content.removeObject(bookmark);
   },
+
+  _toggleSelection(target, bookmark, isSelectingRange) {
+    const selected = this.selected;
+
+    if (target.checked) {
+      selected.addObject(bookmark);
+
+      if (isSelectingRange) {
+        const bulkSelects = Array.from(
+            document.querySelectorAll("input.bulk-select")
+          ),
+          from = bulkSelects.indexOf(target),
+          to = bulkSelects.findIndex((el) => el.id === this.lastChecked.id),
+          start = Math.min(from, to),
+          end = Math.max(from, to);
+
+        bulkSelects
+          .slice(start, end)
+          .filter((el) => el.checked !== true)
+          .forEach((checkbox) => {
+            checkbox.click();
+          });
+      }
+      this.set("lastChecked", target);
+    } else {
+      selected.removeObject(bookmark);
+      this.set("lastChecked", null);
+    }
+  },
+
+  click(e) {
+    const onClick = (sel, callback) => {
+      let target = e.target.closest(sel);
+
+      if (target) {
+        callback(target);
+      }
+    };
+
+    onClick("input.bulk-select", () => {
+      const target = e.target;
+      const bookmarkId = target.dataset.id;
+      const bookmark = this.content.find(
+        (item) => item.id.toString() === bookmarkId
+      );
+      this._toggleSelection(target, bookmark, this.lastChecked && e.shiftKey);
+    });
+  },
 });

app/assets/javascripts/discourse/app/controllers/user-activity-bookmarks.js

@@ -5,6 +5,7 @@ import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import { Promise } from "rsvp";
 import { ajax } from "discourse/lib/ajax";
+import BulkSelectHelper from "discourse/lib/bulk-select-helper";
 import Bookmark from "discourse/models/bookmark";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import discourseComputed from "discourse-common/utils/decorators";
@@ -23,6 +24,13 @@ export default Controller.extend({
   inSearchMode: notEmpty("q"),
   noContent: equal("model.bookmarks.length", 0),
 
+  bulkSelectHelper: null,
+
+  init() {
+    this._super(...arguments);
+    this.bulkSelectHelper = new BulkSelectHelper(this);
+  },
+
   searchTerm: computed("q", {
     get() {
       return this.q;
@@ -77,6 +85,11 @@ export default Controller.extend({
       .finally(() => this.set("loadingMore", false));
   },
 
+  @action
+  updateAutoAddBookmarksToBulkSelect(value) {
+    this.bulkSelectHelper.autoAddBookmarksToBulkSelect = value;
+  },
+
   _loadMoreBookmarks(searchQuery) {
     if (!this.model.loadMoreUrl) {
       return Promise.resolve();

app/assets/javascripts/discourse/app/lib/bulk-select-helper.js

@@ -14,6 +14,7 @@ export default class BulkSelectHelper {
 
   @tracked bulkSelectEnabled = false;
   @tracked autoAddTopicsToBulkSelect = false;
+  @tracked autoAddBookmarksToBulkSelect = false;
 
   selected = new TrackedArray();
 

app/assets/javascripts/discourse/app/models/bookmark.js

@@ -42,6 +42,18 @@ export default class Bookmark extends RestModel {
     });
   }
 
+  static bulkOperation(bookmarks, operation) {
+    const data = {
+      bookmark_ids: bookmarks.mapBy("id"),
+      operation,
+    };
+
+    return ajax("/bookmarks/bulk", {
+      type: "PUT",
+      data,
+    });
+  }
+
   static async applyTransformations(bookmarks) {
     await applyModelTransformations("bookmark", bookmarks);
   }

app/assets/javascripts/discourse/app/templates/user/bookmarks.hbs

@@ -28,6 +28,7 @@
       <div class="alert alert-info">{{i18n "user.no_bookmarks_search"}}</div>
     {{else}}
       <BookmarkList
+        @bulkSelectHelper={{this.bulkSelectHelper}}
         @loadMore={{action "loadMore"}}
         @reload={{action "reload"}}
         @loadingMore={{this.loadingMore}}

app/assets/javascripts/discourse/tests/acceptance/user-bookmark-bulk-actions-test.js

@@ -0,0 +1,63 @@
+import { click, visit } from "@ember/test-helpers";
+import { test } from "qunit";
+import {
+  acceptance,
+  count,
+  exists,
+  queryAll,
+} from "discourse/tests/helpers/qunit-helpers";
+import selectKit from "discourse/tests/helpers/select-kit-helper";
+import I18n from "discourse-i18n";
+
+acceptance("Bookmark - Bulk Actions", function (needs) {
+  needs.user();
+
+  test("bulk select - modal", async function (assert) {
+    await visit("/u/eviltrout/activity/bookmarks");
+    assert.ok(exists("button.bulk-select"));
+
+    await click("button.bulk-select");
+
+    await click(queryAll("input.bulk-select")[0]);
+    await click(queryAll("input.bulk-select")[1]);
+
+    const dropdown = selectKit(".select-kit.bulk-select-bookmarks-dropdown");
+    await dropdown.expand();
+
+    await dropdown.selectRowByValue("clear-reminders");
+
+    assert.ok(exists(".dialog-container"), "it should show the modal");
+    assert.dom(".dialog-container .dialog-body").includesText(
+      I18n.t("js.bookmark_bulk_actions.clear_reminders.description", {
+        count: 2,
+      }).replaceAll(/\<.*?>/g, "")
+    );
+
+    await click("button.bulk-clear-all");
+
+    assert.strictEqual(
+      count("input.bulk-select:checked"),
+      0,
+      "Clear all should clear all selection"
+    );
+
+    await click("button.bulk-select-all");
+
+    assert.strictEqual(
+      count("input.bulk-select:checked"),
+      2,
+      "Select all should select all topics"
+    );
+
+    await dropdown.expand();
+    await dropdown.selectRowByValue("delete-bookmarks");
+
+    assert.ok(exists(".dialog-container"), "it should show the modal");
+
+    assert.dom(".dialog-container .dialog-body").includesText(
+      I18n.t("js.bookmark_bulk_actions.delete_bookmarks.description", {
+        count: 2,
+      }).replaceAll(/\<.*?>/g, "")
+    );
+  });
+});