@internetarchive/collection-browser 2.7.7-alpha.2 → 2.7.8-alpha1

package/src/collection-browser.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-duplicates */
 import {
   html,
   css,
@@ -56,7 +57,6 @@ import type {
 } from './data-source/collection-browser-query-state';
 import { FACETLESS_PAGE_ELEMENTS } from './data-source/models';
 import type { CollectionFacets } from './collection-facets';
-import type { ManageableItem } from './manage/manage-bar';
 import type { CollectionBrowserDataSourceInterface } from './data-source/collection-browser-data-source-interface';
 import {
   analyticsActions,
@@ -65,9 +65,9 @@ import {
 import chevronIcon from './assets/img/icons/chevron';
 import { srOnlyStyle } from './styles/sr-only';
 import { sha1 } from './utils/sha1';
-import { formatDate } from './utils/format-date';
 import { log } from './utils/log';
 import type { PlaceholderType } from './empty-placeholder';
+import type { ManageBar } from './manage/manage-bar';
 
 import './empty-placeholder';
 import './tiles/tile-dispatcher';
@@ -220,10 +220,11 @@ export class CollectionBrowser
   @property({ type: String }) pageContext: CollectionBrowserContext = 'search';
 
   @property({ type: Object })
-  restorationStateHandler: RestorationStateHandlerInterface =
-    new RestorationStateHandler({
+  restorationStateHandler: RestorationStateHandlerInterface = new RestorationStateHandler(
+    {
       context: this.pageContext,
-    });
+    }
+  );
 
   @property({ type: Number }) mobileBreakpoint = 600;
 
@@ -261,6 +262,12 @@ export class CollectionBrowser
   @property({ type: Object }) dataSource: CollectionBrowserDataSourceInterface =
     new CollectionBrowserDataSource(this, this.pageSize);
 
+  /**
+   * The maximum number of pages we will load when a privileged user clicks
+   * the "Manage" button on the search page. Limited to 15 pages.
+   */
+  maxPagesToManage = 15;
+
   /**
    * The page that the consumer wants to load.
    */
@@ -297,6 +304,8 @@ export class CollectionBrowser
 
   @query('collection-facets') private collectionFacets?: CollectionFacets;
 
+  @query('manage-bar') private manageBar?: ManageBar;
+
   @property({ type: Object, attribute: false })
   analyticsHandler?: AnalyticsManagerInterface;
 
@@ -385,7 +394,7 @@ export class CollectionBrowser
 
       sessionStorage?.setItem('cb-session', newSessionId);
       return newSessionId;
-    } catch {
+    } catch (err) {
       // Either we can't generate the hash or we're restricted from accessing sessionStorage
       return '';
     }
@@ -772,20 +781,29 @@ export class CollectionBrowser
    * showing the management view. This generally replaces the sort bar when present.
    */
   private get manageBarTemplate(): TemplateResult {
+    const manageViewModalMsg =
+      this.profileElement === 'uploads'
+        ? 'Note: it may take a few minutes for these items to stop appearing in your uploads list.'
+        : nothing;
+
     return html`
       <manage-bar
         .label=${this.manageViewLabel}
-        .pageContext=${this.pageContext}
+        .modalManager=${this.modalManager}
+        .selectedItems=${this.dataSource.checkedTileModels}
+        .manageViewModalMsg=${manageViewModalMsg}
         showSelectAll
         showUnselectAll
+        ?showItemManageButton=${this.pageContext === 'search'}
         ?removeAllowed=${this.dataSource.checkedTileModels.length !== 0}
         @removeItems=${this.handleRemoveItems}
-        @itemsManager=${this.handleItemsManager}
+        @manageItems=${this.handleManageItems}
         @selectAll=${() => this.dataSource.checkAllTiles()}
         @unselectAll=${() => this.dataSource.uncheckAllTiles()}
         @cancel=${() => {
           this.isManageView = false;
           this.dataSource.uncheckAllTiles();
+          if (this.searchResultsLoading) this.dataSource.resetPages();
         }}
       ></manage-bar>
     `;
@@ -797,34 +815,45 @@ export class CollectionBrowser
    */
   private handleRemoveItems(): void {
     this.dispatchEvent(
-      new CustomEvent<{ items: ManageableItem[] }>('itemRemovalRequested', {
+      new CustomEvent<{ items: String[] }>('itemRemovalRequested', {
         detail: {
-          items: this.dataSource.checkedTileModels.map(model => {
-            const cloned = model.clone();
-            cloned.dateStr = formatDate(model.datePublished, 'long');
-            return cloned as ManageableItem;
-          }),
+          items: this.dataSource.checkedTileModels.map(model =>
+            model?.identifier ? model.identifier : ''
+          ),
         },
-      }),
+      })
     );
   }
 
   /**
    * Handler when user request to bulk edit from /search/ page
    */
-  private handleItemsManager(): void {
+  private handleManageItems(): void {
     this.dispatchEvent(
-      new CustomEvent('itemManagerRequested', {
+      new CustomEvent<{ items: String[] }>('itemManagerRequested', {
         detail: {
-          items: this.dataSource.checkedTileModels
-            .map(item => item.identifier)
-            .filter(Boolean)
-            .join(','),
+          items: this.dataSource.checkedTileModels.map(model =>
+            model?.identifier ? model.identifier : ''
+          ),
         },
-      }),
+      })
     );
   }
 
+  /**
+   * Handler to show processing modal while removing item
+   */
+  showRemoveItemsProcessingModal(): void {
+    this.manageBar?.showRemoveItemsProcessingModal();
+  }
+
+  /**
+   * Handler to show error modal when item removal failed
+   */
+  showRemoveItemsErrorModal(): void {
+    this.manageBar?.showRemoveItemsErrorModal();
+  }
+
   /**
    * Removes all tile models that are currently checked & adjusts the paging
    * of the data source to account for any new gaps in the data.
@@ -840,7 +869,7 @@ export class CollectionBrowser
     e: CustomEvent<{
       selectedSort: SortField;
       sortDirection: SortDirection | null;
-    }>,
+    }>
   ) {
     const { selectedSort, sortDirection } = e.detail;
     this.selectedSort = selectedSort;
@@ -914,7 +943,7 @@ export class CollectionBrowser
    * Handler for when the display mode option is changed (grid/list/compact-list views).
    */
   private displayModeChanged(
-    e: CustomEvent<{ displayMode?: CollectionDisplayMode }>,
+    e: CustomEvent<{ displayMode?: CollectionDisplayMode }>
   ): void {
     this.displayMode = e.detail.displayMode;
 
@@ -971,7 +1000,7 @@ export class CollectionBrowser
    * labels: 'start-<ToLetter>' | 'clear-<FromLetter>' | '<FromLetter>-<ToLetter>'
    */
   private sendFilterByCreatorAnalytics(
-    prevSelectedLetter: string | null,
+    prevSelectedLetter: string | null
   ): void {
     if (!prevSelectedLetter && !this.selectedCreatorFilter) {
       return;
@@ -991,7 +1020,7 @@ export class CollectionBrowser
    * Handler for changes to which letter is selected in the title alphabet bar.
    */
   private titleLetterSelected(
-    e: CustomEvent<{ selectedLetter: string | null }>,
+    e: CustomEvent<{ selectedLetter: string | null }>
   ): void {
     this.selectedCreatorFilter = null;
     this.selectedTitleFilter = e.detail.selectedLetter;
@@ -1001,7 +1030,7 @@ export class CollectionBrowser
    * Handler for changes to which letter is selected in the creator alphabet bar.
    */
   private creatorLetterSelected(
-    e: CustomEvent<{ selectedLetter: string | null }>,
+    e: CustomEvent<{ selectedLetter: string | null }>
   ): void {
     this.selectedTitleFilter = null;
     this.selectedCreatorFilter = e.detail.selectedLetter;
@@ -1122,7 +1151,7 @@ export class CollectionBrowser
    * @param mobile Whether to style/shorten the button for mobile view
    */
   private clearFiltersBtnTemplate(
-    mobile: boolean,
+    mobile: boolean
   ): TemplateResult | typeof nothing {
     if (!this.hasActiveFilters) return nothing;
 
@@ -1171,7 +1200,7 @@ export class CollectionBrowser
     e: CustomEvent<{
       minDate: string;
       maxDate: string;
-    }>,
+    }>
   ) {
     const { minDate, maxDate } = e.detail;
     [this.minSelectedDate, this.maxSelectedDate] = [minDate, maxDate];
@@ -1201,7 +1230,7 @@ export class CollectionBrowser
     this.dispatchEvent(
       new CustomEvent<boolean>('manageModeChanged', {
         detail: this.isManageView,
-      }),
+      })
     );
   }
 
@@ -1220,7 +1249,7 @@ export class CollectionBrowser
    */
   async installDataSourceAndQueryState(
     dataSource: CollectionBrowserDataSourceInterface,
-    queryState: CollectionBrowserQueryState,
+    queryState: CollectionBrowserQueryState
   ): Promise<void> {
     log('Installing data source & query state in CB:', dataSource, queryState);
     if (this.dataSource) this.removeController(this.dataSource);
@@ -1379,12 +1408,12 @@ export class CollectionBrowser
 
     if (changed.has('selectedTitleFilter')) {
       this.sendFilterByTitleAnalytics(
-        changed.get('selectedTitleFilter') as string,
+        changed.get('selectedTitleFilter') as string
       );
     }
     if (changed.has('selectedCreatorFilter')) {
       this.sendFilterByCreatorAnalytics(
-        changed.get('selectedCreatorFilter') as string,
+        changed.get('selectedCreatorFilter') as string
       );
     }
 
@@ -1428,14 +1457,18 @@ 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();
     }
 
     if (changed.has('resizeObserver')) {
       const oldObserver = changed.get(
-        'resizeObserver',
+        'resizeObserver'
       ) as SharedResizeObserverInterface;
       if (oldObserver) this.disconnectResizeObserver(oldObserver);
       this.setupResizeObserver();
@@ -1492,7 +1525,7 @@ export class CollectionBrowser
       this.setTileCount(
         this.dataSource.endOfDataReached
           ? this.dataSource.size
-          : this.estimatedTileCount,
+          : this.estimatedTileCount
       );
     }
   }
@@ -1513,7 +1546,7 @@ export class CollectionBrowser
     // In desktop view, we are always ready to load facets *unless* we are using one of the
     // `opt-in` strategies and have not opted in (whether by login or UI interaction).
     const usingOptInStrategy = ['opt-in', 'opt-in-or-login'].includes(
-      this.facetLoadStrategy,
+      this.facetLoadStrategy
     );
     const desktopFacetsReady =
       !this.mobileView && (!usingOptInStrategy || optedIn);
@@ -1523,7 +1556,7 @@ export class CollectionBrowser
     const mobileFacetsReady = this.mobileView && optedIn;
 
     this.dataSource.handleFacetReadinessChange(
-      desktopFacetsReady || mobileFacetsReady,
+      desktopFacetsReady || mobileFacetsReady
     );
   }
 
@@ -1536,14 +1569,14 @@ export class CollectionBrowser
     // match the _available_ viewport height. This should generally be more
     // performant than listening to scroll events on the page or column.
     const leftColumnSentinel = this.shadowRoot?.querySelector(
-      '#left-column-scroll-sentinel',
+      '#left-column-scroll-sentinel'
     );
     if (leftColumnSentinel) {
       this.leftColIntersectionObserver = new IntersectionObserver(
         this.updateLeftColumnHeight,
         {
           threshold: [...Array(101).keys()].map(n => n / 100), // Threshold every 1%
-        },
+        }
       );
       this.leftColIntersectionObserver.observe(leftColumnSentinel);
     }
@@ -1560,11 +1593,11 @@ export class CollectionBrowser
    */
   private setupFacetsScrollListeners(): void {
     const facetsSentinel = this.shadowRoot?.querySelector(
-      '#facets-scroll-sentinel',
+      '#facets-scroll-sentinel'
     );
     if (facetsSentinel) {
       this.facetsIntersectionObserver = new IntersectionObserver(
-        this.updateFacetFadeOut,
+        this.updateFacetFadeOut
       );
       this.facetsIntersectionObserver.observe(facetsSentinel);
     }
@@ -1581,7 +1614,7 @@ export class CollectionBrowser
       const clientTop = this.leftColumn?.getBoundingClientRect().top;
       this.leftColumn?.style?.setProperty(
         'height',
-        `${window.innerHeight - (clientTop ?? 0) - 3}px`,
+        `${window.innerHeight - (clientTop ?? 0) - 3}px`
       );
     }
   };
@@ -1605,7 +1638,7 @@ export class CollectionBrowser
         detail: {
           baseQuery: this.baseQuery,
         },
-      }),
+      })
     );
   }
 
@@ -1617,7 +1650,7 @@ export class CollectionBrowser
     this.dispatchEvent(
       new CustomEvent<SearchType>('searchTypeChanged', {
         detail: this.searchType,
-      }),
+      })
     );
   }
 
@@ -1642,7 +1675,7 @@ export class CollectionBrowser
           selectedTitleFilter: this.selectedTitleFilter,
           selectedCreatorFilter: this.selectedCreatorFilter,
         },
-      }),
+      })
     );
   }
 
@@ -1655,7 +1688,7 @@ export class CollectionBrowser
   }
 
   private disconnectResizeObserver(
-    resizeObserver: SharedResizeObserverInterface,
+    resizeObserver: SharedResizeObserverInterface
   ) {
     resizeObserver.removeObserver({
       target: this.contentContainer,
@@ -1679,7 +1712,7 @@ export class CollectionBrowser
    * @returns
    */
   private visibleCellsChanged(
-    e: CustomEvent<{ visibleCellIndices: number[] }>,
+    e: CustomEvent<{ visibleCellIndices: number[] }>
   ) {
     if (this.isScrollingToCell) return;
     const { visibleCellIndices } = e.detail;
@@ -1827,7 +1860,7 @@ export class CollectionBrowser
     };
     this.restorationStateHandler.persistState(
       restorationState,
-      this.dataSourceInstallInProgress,
+      this.dataSourceInstallInProgress
     );
   }
 
@@ -1841,7 +1874,7 @@ export class CollectionBrowser
         detail: {
           loading: this.searchResultsLoading,
         },
-      }),
+      })
     );
   }
 
@@ -2064,6 +2097,24 @@ export class CollectionBrowser
     }
   }
 
+  /**
+   * Fetches search results for privileged users when in manage view
+   * If total results exceed the threshold, partially resets the datasource pages
+   * and fetches the first page with a limit based on the threshold
+   */
+  private fetchManagableSearchResults(): void {
+    const maxAllowedResults = this.maxPagesToManage * this.pageSize;
+    if (
+      this.pageContext === 'search' &&
+      this.dataSource.totalResults > maxAllowedResults &&
+      !this.searchResultsLoading
+    ) {
+      this.dataSource.resetPages();
+      this.dataSource.fetchPage(1, this.maxPagesToManage); // will fetch 750 results
+      this.infiniteScroller?.reload();
+    }
+  }
+
   static get styles() {
     return [
       srOnlyStyle,

package/src/collection-facets/facets-template.ts

@@ -44,13 +44,12 @@ export class FacetsTemplate extends LitElement {
         ${repeat(
           facetBuckets,
           bucket => `${facetGroup.key}:${bucket.key}`,
-          bucket =>
-            html`<facet-row
-              .facetType=${facetGroup.key}
-              .bucket=${bucket}
-              .collectionTitles=${this.collectionTitles}
-              @facetClick=${this.facetClicked}
-            ></facet-row>`,
+          bucket => html`<facet-row
+            .facetType=${facetGroup.key}
+            .bucket=${bucket}
+            .collectionTitles=${this.collectionTitles}
+            @facetClick=${this.facetClicked}
+          ></facet-row>`
         )}
       </div>
     `;

package/src/collection-facets/more-facets-content.ts

@@ -1,3 +1,5 @@
+/* eslint-disable dot-notation */
+/* eslint-disable lit-a11y/click-events-have-key-events */
 import {
   css,
   CSSResultGroup,
@@ -37,7 +39,7 @@ import type {
   CollectionTitles,
   PageSpecifierParams,
 } from '../data-source/models';
-import '@internetarchive/ia-activity-indicator';
+import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
 import './more-facets-pagination';
 import './facets-template';
 import {
@@ -245,7 +247,7 @@ export class MoreFacetsContent extends LitElement {
     const bucketsWithCount =
       selectedFacetGroup?.buckets.map(bucket => {
         const selectedBucket = aggregationFacetGroup.buckets.find(
-          b => b.key === bucket.key,
+          b => b.key === bucket.key
         );
         return selectedBucket
           ? {
@@ -263,7 +265,7 @@ export class MoreFacetsContent extends LitElement {
     // Append any additional buckets that were not selected
     aggregationFacetGroup.buckets.forEach(bucket => {
       const existingBucket = selectedFacetGroup?.buckets.find(
-        b => b.key === bucket.key,
+        b => b.key === bucket.key
       );
       if (existingBucket) return;
       bucketsWithCount.push(bucket);
@@ -303,7 +305,7 @@ export class MoreFacetsContent extends LitElement {
           count: data?.count,
           state: data?.state,
         };
-      },
+      }
     );
 
     return {
@@ -327,7 +329,7 @@ export class MoreFacetsContent extends LitElement {
 
     // Order the facets according to the current sort option
     let sortedBuckets = currentAggregation.getSortedBuckets(
-      this.sortedBy,
+      this.sortedBy
     ) as Bucket[];
 
     if (this.facetKey === 'collection') {
@@ -369,7 +371,7 @@ export class MoreFacetsContent extends LitElement {
     const firstBucketIndexOnPage = (this.pageNumber - 1) * this.facetsPerPage;
     const truncatedBuckets = facetGroup.buckets.slice(
       firstBucketIndexOnPage,
-      firstBucketIndexOnPage + this.facetsPerPage,
+      firstBucketIndexOnPage + this.facetsPerPage
     );
 
     return {
@@ -389,7 +391,7 @@ export class MoreFacetsContent extends LitElement {
             this.unappliedFacetChanges = updateSelectedFacetBucket(
               this.unappliedFacetChanges,
               this.facetKey,
-              e.detail.bucket,
+              e.detail.bucket
             );
           }
         }}
@@ -452,7 +454,7 @@ export class MoreFacetsContent extends LitElement {
   private sortFacetAggregation(facetSortType: AggregationSortType) {
     this.sortedBy = facetSortType;
     this.dispatchEvent(
-      new CustomEvent('sortedFacets', { detail: this.sortedBy }),
+      new CustomEvent('sortedFacets', { detail: this.sortedBy })
     );
   }
 
@@ -473,11 +475,11 @@ export class MoreFacetsContent extends LitElement {
               leftValue=${AggregationSortType.COUNT}
               leftLabel="Count"
               rightValue=${valueFacetSort[this.facetKey]}
-              .rightLabel=${this.facetGroup?.title}
+              rightLabel=${this.facetGroup?.title}
               side=${defaultSwitchSide}
               @change=${(e: CustomEvent<string>) => {
                 this.sortFacetAggregation(
-                  Number(e.detail) as AggregationSortType,
+                  Number(e.detail) as AggregationSortType
                 );
               }}
             ></toggle-switch>`
@@ -502,7 +504,7 @@ export class MoreFacetsContent extends LitElement {
   private applySearchFacetsClicked() {
     const mergedSelections = mergeSelectedFacets(
       this.selectedFacets,
-      this.unappliedFacetChanges,
+      this.unappliedFacetChanges
     );
 
     const event = new CustomEvent<SelectedFacets>('facetsChanged', {

package/src/collection-facets/more-facets-pagination.ts

@@ -31,7 +31,6 @@ export class MoreFacetsPagination extends LitElement {
     this.observePageCount();
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   override updated(changed: Map<string, any>) {
     if (changed.has('size')) {
       this.observePageCount();
@@ -176,7 +175,7 @@ export class MoreFacetsPagination extends LitElement {
         detail: { page: this.currentPage },
         bubbles: true,
         composed: true,
-      }),
+      })
     );
   }
 
@@ -220,7 +219,7 @@ export class MoreFacetsPagination extends LitElement {
         page =>
           html`${page !== 0
             ? this.getPageTemplate(page)
-            : this.getEllipsisTemplate}`,
+            : this.getEllipsisTemplate}`
       )}
     `;
   }

package/src/collection-facets/smart-facets/dedupe.ts

@@ -16,7 +16,7 @@ export function dedupe<T extends SmartFacet[] | SmartFacet[][]>(facets: T): T {
     let result: SmartFacet[] = [...facetsUnnested];
     for (const curFacet of facetsUnnested) {
       result = result.filter(
-        sf => curFacet === sf || !smartFacetEquals(curFacet, sf),
+        sf => curFacet === sf || !smartFacetEquals(curFacet, sf)
       );
     }
 
@@ -30,7 +30,7 @@ export function dedupe<T extends SmartFacet[] | SmartFacet[][]>(facets: T): T {
     const subresult: SmartFacet[] = [];
     for (const curFacet of curFacetArray) {
       const existing = result.find(sfa =>
-        sfa.find(sf => smartFacetEquals(curFacet, sf)),
+        sfa.find(sf => smartFacetEquals(curFacet, sf))
       );
       if (!existing) subresult.push(curFacet);
     }

package/src/collection-facets/smart-facets/heuristics/query-keywords-heuristic.ts

@@ -43,7 +43,7 @@ export class QueryKeywordsHeuristic implements SmartQueryHeuristic {
     const recommendations: SmartFacet[] = [];
 
     for (const [keyword, facets] of Object.entries(
-      QueryKeywordsHeuristic.KEYWORDS,
+      QueryKeywordsHeuristic.KEYWORDS
     )) {
       if (query.includes(keyword)) {
         recommendations.push(...facets);

package/src/collection-facets/smart-facets/heuristics/wikidata-heuristic.ts

@@ -147,12 +147,12 @@ export class WikidataHeuristic implements SmartQueryHeuristic {
       const urlQuery = encodeURIComponent(query);
 
       const wikidataResponse = await fetch(
-        `https://www.wikidata.org/w/api.php?action=wbsearchentities&search=${urlQuery}&format=json&language=en&uselang=en&origin=*&type=item&limit=5`,
+        `https://www.wikidata.org/w/api.php?action=wbsearchentities&search=${urlQuery}&format=json&language=en&uselang=en&origin=*&type=item&limit=5`
       );
       const searchResults = await wikidataResponse.json();
 
       for (const [keyword, facets] of Object.entries(
-        WikidataHeuristic.ENTITIES,
+        WikidataHeuristic.ENTITIES
       )) {
         const keywordRegex = new RegExp(`\\b${keyword}\\b`);
         if (keywordRegex.test(searchResults.search[0]?.description)) {
@@ -171,20 +171,20 @@ export class WikidataHeuristic implements SmartQueryHeuristic {
                     if (f.displayText) {
                       replaced.displayText = replaced.displayText?.replace(
                         '__QUERY',
-                        entityName,
+                        entityName
                       );
                     }
 
                     return replaced;
                   }),
-                }) as SmartFacet,
-            ),
+                } as SmartFacet)
+            )
           );
         }
       }
 
       return recommendations;
-    } catch {
+    } catch (err) {
       return [];
     }
   }