Consolidated Item Removal process which can be used on offshoot pages.

package.json

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

src/app-root.ts

@@ -485,7 +485,6 @@ export class AppRoot extends LitElement {
           .modalManager=${this.modalManager}
           .analyticsHandler=${this.analyticsHandler}
           .pageContext=${'search'}
-          .activeTabId=${''}
           @visiblePageChanged=${this.visiblePageChanged}
           @baseQueryChanged=${this.baseQueryChanged}
           @searchTypeChanged=${this.searchTypeChanged}
@@ -710,9 +709,10 @@ export class AppRoot extends LitElement {
    * Handler for item removal
    */
   private handleItemRemovalRequest(e: CustomEvent) {
-    setTimeout(() => {
-      console.log('itemRemovalRequested: ', e.detail.items);
+    this.collectionBrowser.showRemoveItemsProcessingModal();
+    console.log('itemRemovalRequested: ', e.detail.items);
 
+    setTimeout(() => {
       // execute item-removal-service, and response is successfully deleted
       const status = false;
 
@@ -723,7 +723,7 @@ export class AppRoot extends LitElement {
         this.modalManager?.classList.remove('remove-items');
       } else {
         // looking for failure?
-        this.collectionBrowser.hasItemsDeleted = false;
+        this.collectionBrowser.showRemoveItemsErrorModal();
       }
     }, 2000); // let's wait to see processing modal
   }
@@ -743,7 +743,6 @@ export class AppRoot extends LitElement {
     this.collectionBrowser.isManageView = target.checked;
     this.collectionBrowser.manageViewLabel =
       'Select items to remove (customizable texts)';
-    this.collectionBrowser.hasItemsDeleted = true;
   }
 
   /**

src/collection-browser.ts

@@ -67,6 +67,7 @@ import { srOnlyStyle } from './styles/sr-only';
 import { sha1 } from './utils/sha1';
 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';
@@ -218,8 +219,6 @@ export class CollectionBrowser
 
   @property({ type: String }) pageContext: CollectionBrowserContext = 'search';
 
-  @property({ type: String }) activeTabId: string = '';
-
   @property({ type: Object })
   restorationStateHandler: RestorationStateHandlerInterface = new RestorationStateHandler(
     {
@@ -245,8 +244,6 @@ export class CollectionBrowser
    */
   @property({ type: Boolean }) isManageView = false;
 
-  @property({ type: Boolean }) hasItemsDeleted = true;
-
   @property({ type: String }) manageViewLabel = 'Select items to remove';
 
   /** Whether to replace the default sort options with a slot for customization (default: false) */
@@ -301,6 +298,8 @@ export class CollectionBrowser
 
   @query('collection-facets') private collectionFacets?: CollectionFacets;
 
+  @query('manage-bar') private manageBar?: ManageBar;
+
   @property({ type: Object, attribute: false })
   analyticsHandler?: AnalyticsManagerInterface;
 
@@ -776,12 +775,17 @@ export class CollectionBrowser
    * showing the management view. This generally replaces the sort bar when present.
    */
   private get manageBarTemplate(): TemplateResult {
+    const manageViewModelMsg =
+      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}
         .modalManager=${this.modalManager}
         .selectedItems=${this.dataSource.checkedTileModels}
-        .hasItemsDeleted=${this.hasItemsDeleted}
+        .manageViewModelMsg=${manageViewModelMsg}
         showSelectAll
         showUnselectAll
         ?showItemManageButton=${this.pageContext === 'search'}
@@ -803,7 +807,6 @@ export class CollectionBrowser
    * Emits an `itemRemovalRequested` event with all checked tile models.
    */
   private handleRemoveItems(): void {
-    this.hasItemsDeleted = true;
     this.dispatchEvent(
       new CustomEvent<{ items: String[] }>('itemRemovalRequested', {
         detail: {
@@ -830,6 +833,20 @@ export class CollectionBrowser
     );
   }
 
+  /**
+   * 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.

src/manage/manage-bar.ts

@@ -1,12 +1,5 @@
 import { msg } from '@lit/localize';
-import {
-  LitElement,
-  html,
-  css,
-  TemplateResult,
-  CSSResultGroup,
-  PropertyValues,
-} from 'lit';
+import { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import {
@@ -24,11 +17,6 @@ export class ManageBar extends LitElement {
    */
   @property({ type: String }) label = msg('Select items to remove');
 
-  /**
-   * Specifies the context in which the collection browser is being used
-   */
-  @property({ type: String }) activeTabId?: string;
-
   /**
    * The shared modal manager component for displaying modal dialogs on this page
    */
@@ -39,6 +27,11 @@ export class ManageBar extends LitElement {
    */
   @property({ type: Object }) selectedItems: Array<ManageableItem> = [];
 
+  /**
+   * Message shows as note in the modal when removing items
+   */
+  @property({ type: String }) manageViewModelMsg?: string;
+
   /**
    * Whether to show the "Select All" button (default false)
    */
@@ -49,11 +42,6 @@ export class ManageBar extends LitElement {
    */
   @property({ type: Boolean }) showUnselectAll = false;
 
-  /**
-   * Whether item has deleted or not (default true)
-   */
-  @property({ type: Boolean }) hasItemsDeleted = true;
-
   /**
    * Whether to show "Item Manager the items" button (default false)
    */
@@ -64,12 +52,6 @@ export class ManageBar extends LitElement {
    */
   @property({ type: Boolean }) removeAllowed = false;
 
-  updated(changed: PropertyValues): void {
-    if (changed.has('hasItemsDeleted') && !this.hasItemsDeleted) {
-      this.showRemoveItemsErrorModal();
-    }
-  }
-
   render(): TemplateResult {
     return html`
       <div class="manage-container">
@@ -125,7 +107,6 @@ export class ManageBar extends LitElement {
   }
 
   private removeItemsClicked(): void {
-    this.showRemoveItemsProcessingModal();
     this.dispatchEvent(new CustomEvent('removeItems'));
   }
 
@@ -146,17 +127,10 @@ export class ManageBar extends LitElement {
    * @param items Which items to list in the modal
    */
   private showRemoveItemsModal(): void {
-    const delayMessage =
-      this.activeTabId === 'uploads'
-        ? msg(
-            'Note: it may take a few minutes for these items to stop appearing in your uploads list.'
-          )
-        : undefined;
-
     const customModalContent = html`
       <remove-items-modal-content
         .items=${this.selectedItems}
-        .message=${delayMessage}
+        .message=${this.manageViewModelMsg}
         @confirm=${() => this.removeItemsClicked()}
       ></remove-items-modal-content>
     `;
@@ -184,7 +158,7 @@ export class ManageBar extends LitElement {
   /**
    * Shows a modal dialog indicating that item removal is being processed
    */
-  private showRemoveItemsProcessingModal(): void {
+  showRemoveItemsProcessingModal(): void {
     const config = new ModalConfig({
       showProcessingIndicator: true,
       processingImageMode: 'processing',
@@ -207,7 +181,7 @@ export class ManageBar extends LitElement {
   /**
    * Shows a modal dialog indicating that an error occurred while removing items
    */
-  private showRemoveItemsErrorModal(): void {
+  showRemoveItemsErrorModal(): void {
     const config = new ModalConfig({
       showProcessingIndicator: false,
       processingImageMode: 'processing',