FEATURE: Add bulk action to bookmark

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

@@ -7,7 +7,43 @@
       <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">
+                {{raw
+                  "flat-button"
+                  class="bulk-select"
+                  icon="list"
+                  title="bookmarks.bulk.toggle"
+                }}
+              </th>
+            {{/if}}
+            <th class="topic-list-data">
+              {{#if this.bulkSelectEnabled}}
+                <span class="bulk-select-topics">
+                  {{~#if this.canDoBulkActions}}
+                    {{raw
+                      "bookmark-bulk-select-dropdown"
+                      bulkSelectHelper=this.bulkSelectHelper
+                    }}
+                  {{/if~}}
+                  <button class="btn btn-default bulk-select-all">{{i18n
+                      "bookmarks.bulk.select_all"
+                    }}</button>
+                  <button class="btn btn-default bulk-clear-all">{{i18n
+                      "bookmarks.bulk.clear_all"
+                    }}</button>
+                </span>
+              {{else}}
+                {{raw
+                  "flat-button"
+                  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 +56,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,14 @@ export default Component.extend({
   modal: service(),
   classNames: ["bookmark-list-wrapper"],
 
+  get canDoBulkActions() {
+    return this.bulkSelectHelper?.selected.length;
+  },
+
+  get selected() {
+    return this.bulkSelectHelper?.selected;
+  },
+
   @action
   removeBookmark(bookmark) {
     return new Promise((resolve, reject) => {
@@ -90,7 +99,79 @@ export default Component.extend({
     bookmark.togglePin().then(this.reload);
   },
 
+  @dependentKeyCompat // for the classNameBindings
+  get bulkSelectEnabled() {
+    return this.bulkSelectHelper?.bulkSelectEnabled;
+  },
+
   _removeBookmarkFromList(bookmark) {
     this.content.removeObject(bookmark);
   },
+
+  _toggleBookmark(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("button.bulk-select", () => {
+      this.bulkSelectHelper?.toggleBulkSelect();
+      this.rerender();
+    });
+
+    onClick("input.bulk-select", () => {
+      const target = e.target;
+      const bookmarkId = target.dataset.id;
+      const bookmark = this.content.find(
+        (item) => item.id.toString() === bookmarkId
+      );
+      this._toggleBookmark(target, bookmark, this.lastChecked && e.shiftKey);
+    });
+
+    onClick("button.bulk-select-all", () => {
+      this.bulkSelectHelper.autoAddBookmarksToBulkSelect = true;
+      document
+        .querySelectorAll("input.bulk-select:not(:checked)")
+        .forEach((el) => el.click());
+    });
+
+    onClick("button.bulk-clear-all", () => {
+      this.bulkSelectHelper.autoAddBookmarksToBulkSelect = false;
+      document
+        .querySelectorAll("input.bulk-select:checked")
+        .forEach((el) => el.click());
+    });
+  },
 });

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/raw-templates/bookmark-bulk-select-dropdown.hbr

@@ -0,0 +1 @@
+{{{view.html}}}

app/assets/javascripts/discourse/app/raw-templates/flat-button.hbr

@@ -1,3 +1,3 @@
-<button class='btn-transparent {{class}}' title='{{i18n "topics.bulk.toggle"}}'>
+<button class='btn-transparent {{class}}' title='{{i18n title}}'>
   {{d-icon icon}}
 </button>

app/assets/javascripts/discourse/app/raw-views/bookmark-bulk-select-dropdown.gjs

@@ -0,0 +1,29 @@
+import EmberObject from "@ember/object";
+import rawRenderGlimmer from "discourse/lib/raw-render-glimmer";
+import i18n from "discourse-common/helpers/i18n";
+import BulkSelectBookmarksDropdown from "select-kit/components/bulk-select-bookmarks-dropdown";
+
+export default class extends EmberObject {
+  get selectedCount() {
+    return this.bulkSelectHelper.selected.length;
+  }
+
+  get html() {
+    return rawRenderGlimmer(
+      this,
+      "div.bulk-select-bookmarks-dropdown",
+      <template>
+        <span class="bulk-select-bookmark-dropdown__count">
+          {{i18n "bookmarks.bulk.selected_count" count=@data.selectedCount}}
+        </span>
+        <BulkSelectBookmarksDropdown
+          @bulkSelectHelper={{@data.bulkSelectHelper}}
+        />
+      </template>,
+      {
+        bulkSelectHelper: this.bulkSelectHelper,
+        selectedCount: this.selectedCount,
+      }
+    );
+  }
+}

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,74 @@
+import { click, visit } from "@ember/test-helpers";
+import { test } from "qunit";
+import {
+  acceptance,
+  exists,
+  queryAll,
+  updateCurrentUser,
+} 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();
+  needs.pretender((server, helper) => {
+    server.put("/bookmarks/bulk", () => {
+      return helper.response({
+        bookmark_ids: [],
+      });
+    });
+  });
+
+  test("bulk select - options", async function (assert) {
+    updateCurrentUser({ moderator: true });
+    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();
+
+    const options = dropdown.displayedContent();
+
+    assert.strictEqual(
+      options[0].name,
+      I18n.t("js.bookmark_bulk_actions.clear_reminders.name"),
+      "it shows an option to clear reminders"
+    );
+
+    assert.strictEqual(
+      options[1].name,
+      I18n.t("js.bookmark_bulk_actions.delete_bookmarks.name"),
+      "it shows an option to delete bookmarks"
+    );
+  });
+
+  test("bulk select - clear reminders", async function (assert) {
+    updateCurrentUser({ moderator: true });
+
+    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, "")
+    );
+  });
+});