@internetarchive/collection-browser 2.7.8 → 2.7.9

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "2.7.8",
+  "version": "2.7.9",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {

package/src/collection-browser.ts

@@ -252,6 +252,12 @@ export class CollectionBrowser
   /** Whether to display a smart results carousel above the full results */
   @property({ type: Boolean, reflect: true }) showSmartResults = false;
 
+  /**
+   * The maximum number of pages we will load when a privileged user clicks
+   * the "Manage" button on the search page. Limited to 15 pages.
+   */
+  @property({ type: Number }) maxPagesToManage = 15;
+
   /**
    * The results per page so we can paginate.
    *
@@ -797,6 +803,7 @@ export class CollectionBrowser
         @cancel=${() => {
           this.isManageView = false;
           this.dataSource.uncheckAllTiles();
+          if (this.searchResultsLoading) this.dataSource.resetPages();
         }}
       ></manage-bar>
     `;
@@ -1450,7 +1457,11 @@ export class CollectionBrowser
     }
 
     if (changed.has('isManageView')) {
-      if (this.isManageView) this.displayMode = 'grid';
+      if (this.isManageView) {
+        this.displayMode = 'grid';
+        this.fetchManagableSearchResults();
+      } else if (this.pageContext === 'search') this.infiniteScroller?.reload();
+
       this.infiniteScroller?.refreshAllVisibleCells();
       this.emitManageModeChangedEvent();
     }
@@ -2086,6 +2097,27 @@ export class CollectionBrowser
     }
   }
 
+  /**
+   * Fetches search results for privileged users when in manage view.
+   *
+   * This method:
+   * 1. Checks if we're in search context with > 100 results and not currently loading
+   * 2. Resets the datasource pagination state
+   * 3. Fetches first page with limit based on maxPagesToManage threshold
+   * 4. Reloads the infinite scroller to display new results
+   */
+  private fetchManagableSearchResults(): void {
+    if (
+      this.pageContext === 'search' &&
+      this.dataSource.totalResults > 100 &&
+      !this.searchResultsLoading
+    ) {
+      this.dataSource.resetPages();
+      this.dataSource.fetchPage(1, this.maxPagesToManage);
+      this.infiniteScroller?.reload();
+    }
+  }
+
   static get styles() {
     return [
       srOnlyStyle,

package/src/data-source/collection-browser-data-source-interface.ts

@@ -155,6 +155,11 @@ export interface CollectionBrowserDataSourceInterface
    */
   reset(): void;
 
+  /**
+   * Resets the data source to its pages.
+   */
+  resetPages(): void;
+
   /**
    * Adds the given page of tile models to the data source.
    * If the given page number already exists, that page will be overwritten.

package/src/data-source/collection-browser-data-source.ts

@@ -246,6 +246,19 @@ export class CollectionBrowserDataSource
     this.requestHostUpdate();
   }
 
+  /**
+   * @inheritdoc
+   */
+  resetPages(): void {
+    if (Object.keys(this.pages).length < this.host.maxPagesToManage) {
+      this.pages = {};
+
+      // Invalidate any fetches in progress
+      this.fetchesInProgress.clear();
+      this.requestHostUpdate();
+    }
+  }
+
   /**
    * @inheritdoc
    */
@@ -433,6 +446,7 @@ export class CollectionBrowserDataSource
   map(
     callback: (model: TileModel, index: number, array: TileModel[]) => TileModel
   ): void {
+    if (!Object.keys(this.pages).length) return;
     this.pages = Object.fromEntries(
       Object.entries(this.pages).map(([page, tileModels]) => [
         page,

package/src/data-source/collection-browser-query-state.ts

@@ -38,6 +38,7 @@ export interface CollectionBrowserSearchInterface
   readonly defaultSortField: SortField | null;
   readonly facetLoadStrategy: FacetLoadStrategy;
   readonly initialPageNumber: number;
+  readonly maxPagesToManage: number;
   readonly currentVisiblePageNumbers: number[];
   readonly clearResultsOnEmptyQuery?: boolean;
   readonly dataSource?: CollectionBrowserDataSourceInterface;

package/src/manage/manage-bar.ts

@@ -65,7 +65,7 @@ export class ManageBar extends LitElement {
             ?disabled=${!this.removeAllowed}
             @click=${this.showRemoveItemsModal}
           >
-            ${msg('Remove selected items')}
+            ${msg('Remove selected items')} (${this.selectedItems.length})
           </button>
           ${when(
             this.showItemManageButton,
@@ -74,7 +74,7 @@ export class ManageBar extends LitElement {
               ?disabled=${!this.removeAllowed}
               @click=${this.manageItemsClicked}
             >
-              ${msg('Item Manager the items')}
+              ${msg('Item Manager the items')} (${this.selectedItems.length})
             </button>`
           )}
           <div class="selection-buttons">

package/test/collection-browser.test.ts

@@ -2001,4 +2001,27 @@ describe('Collection Browser', () => {
     const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');
     expect(infiniteScroller).not.to.exist;
   });
+
+  it('fetch larger result on search page for admin user to manage items', async () => {
+    const resultsSpy = sinon.spy();
+    const searchService = new MockSearchService({
+      asyncResponse: true,
+      resultsSpy,
+    });
+
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`
+    );
+
+    const numberOfPages = 15;
+
+    el.baseQuery = 'jack';
+    el.isManageView = true;
+    await el.dataSource.fetchPage(1, numberOfPages);
+    await el.updateComplete;
+
+    const initialResults = el.dataSource.getAllPages();
+    expect(Object.keys(initialResults).length).to.deep.equal(numberOfPages);
+  });
 });