@internetarchive/collection-browser 2.7.6-alpha3 → 2.7.6-alpha4

package/dist/src/manage/manage-bar.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult, CSSResultGroup, PropertyValues } from 'lit';
+import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
 import { type ModalManagerInterface } from '@internetarchive/modal-manager';
 import type { ManageableItem } from '../models';
 import './remove-items-modal-content';
@@ -19,6 +19,10 @@ export declare class ManageBar extends LitElement {
      * Array of items that have been selected for management
      */
     selectedItems: Array<ManageableItem>;
+    /**
+     * Message shows as note in the modal when removing items
+     */
+    manageViewModelMsg?: string;
     /**
      * Whether to show the "Select All" button (default false)
      */
@@ -27,10 +31,6 @@ export declare class ManageBar extends LitElement {
      * Whether to show the "Unselect All" button (default false)
      */
     showUnselectAll: boolean;
-    /**
-     * Whether item has deleted or not (default true)
-     */
-    hasItemsDeleted: boolean;
     /**
      * Whether to show "Item Manager the items" button (default false)
      */
@@ -39,7 +39,6 @@ export declare class ManageBar extends LitElement {
      * Whether to active delete button for selectable items
      */
     removeAllowed: boolean;
-    updated(changed: PropertyValues): void;
     render(): TemplateResult;
     private cancelClicked;
     private removeItemsClicked;
@@ -54,10 +53,10 @@ export declare class ManageBar extends LitElement {
     /**
      * Shows a modal dialog indicating that item removal is being processed
      */
-    private showRemoveItemsProcessingModal;
+    showRemoveItemsProcessingModal(): void;
     /**
      * Shows a modal dialog indicating that an error occurred while removing items
      */
-    private showRemoveItemsErrorModal;
+    showRemoveItemsErrorModal(): void;
     static get styles(): CSSResultGroup;
 }

package/dist/src/manage/manage-bar.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { msg } from '@lit/localize';
-import { LitElement, html, css, } from 'lit';
+import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import { ModalConfig, } from '@internetarchive/modal-manager';
@@ -25,10 +25,6 @@ let ManageBar = class ManageBar extends LitElement {
          * Whether to show the "Unselect All" button (default false)
          */
         this.showUnselectAll = false;
-        /**
-         * Whether item has deleted or not (default true)
-         */
-        this.hasItemsDeleted = true;
         /**
          * Whether to show "Item Manager the items" button (default false)
          */
@@ -38,11 +34,6 @@ let ManageBar = class ManageBar extends LitElement {
          */
         this.removeAllowed = false;
     }
-    updated(changed) {
-        if (changed.has('hasItemsDeleted') && !this.hasItemsDeleted) {
-            this.showRemoveItemsErrorModal();
-        }
-    }
     render() {
         return html `
       <div class="manage-container">
@@ -87,7 +78,6 @@ let ManageBar = class ManageBar extends LitElement {
         this.dispatchEvent(new CustomEvent('cancel'));
     }
     removeItemsClicked() {
-        this.showRemoveItemsProcessingModal();
         this.dispatchEvent(new CustomEvent('removeItems'));
     }
     manageItemsClicked() {
@@ -105,13 +95,10 @@ let ManageBar = class ManageBar extends LitElement {
      */
     showRemoveItemsModal() {
         var _a, _b;
-        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>
     `;
@@ -231,15 +218,15 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], ManageBar.prototype, "selectedItems", void 0);
+__decorate([
+    property({ type: String })
+], ManageBar.prototype, "manageViewModelMsg", void 0);
 __decorate([
     property({ type: Boolean })
 ], ManageBar.prototype, "showSelectAll", void 0);
 __decorate([
     property({ type: Boolean })
 ], ManageBar.prototype, "showUnselectAll", void 0);
-__decorate([
-    property({ type: Boolean })
-], ManageBar.prototype, "hasItemsDeleted", void 0);
 __decorate([
     property({ type: Boolean })
 ], ManageBar.prototype, "showItemManageButton", void 0);

package/dist/src/manage/manage-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"manage-bar.js","sourceRoot":"","sources":["../../../src/manage/manage-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { msg } from '@lit/localize';\nimport {\n  LitElement,\n  html,\n  css,\n  TemplateResult,\n  CSSResultGroup,\n  PropertyValues,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\nimport {\n  ModalConfig,\n  type ModalManagerInterface,\n} from '@internetarchive/modal-manager';\nimport type { ManageableItem } from '../models';\nimport iaButtonStyle from '../styles/ia-button';\nimport './remove-items-modal-content';\n\n@customElement('manage-bar')\nexport class ManageBar extends LitElement {\n  /**\n   * The label displayed in front of the management buttons\n   */\n  @property({ type: String }) label = msg('Select items to remove');\n\n  /**\n   * Specifies the context in which the collection browser is being used\n   */\n  @property({ type: String }) activeTabId?: string;\n\n  /**\n   * The shared modal manager component for displaying modal dialogs on this page\n   */\n  @property({ type: Object }) modalManager?: ModalManagerInterface;\n\n  /**\n   * Array of items that have been selected for management\n   */\n  @property({ type: Object }) selectedItems: Array<ManageableItem> = [];\n\n  /**\n   * Whether to show the \"Select All\" button (default false)\n   */\n  @property({ type: Boolean }) showSelectAll = false;\n\n  /**\n   * Whether to show the \"Unselect All\" button (default false)\n   */\n  @property({ type: Boolean }) showUnselectAll = false;\n\n  /**\n   * Whether item has deleted or not (default true)\n   */\n  @property({ type: Boolean }) hasItemsDeleted = true;\n\n  /**\n   * Whether to show \"Item Manager the items\" button (default false)\n   */\n  @property({ type: Boolean }) showItemManageButton = false;\n\n  /**\n   * Whether to active delete button for selectable items\n   */\n  @property({ type: Boolean }) removeAllowed = false;\n\n  updated(changed: PropertyValues): void {\n    if (changed.has('hasItemsDeleted') && !this.hasItemsDeleted) {\n      this.showRemoveItemsErrorModal();\n    }\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"manage-container\">\n        <span class=\"manage-label\">${this.label}</span>\n        <div class=\"manage-buttons\">\n          <button class=\"ia-button dark\" @click=${this.cancelClicked}>\n            ${msg('Cancel')}\n          </button>\n          <button\n            class=\"ia-button danger\"\n            ?disabled=${!this.removeAllowed}\n            @click=${this.showRemoveItemsModal}\n          >\n            ${msg('Remove selected items')}\n          </button>\n          ${when(\n            this.showItemManageButton,\n            () => html` <button\n              class=\"ia-button warning\"\n              ?disabled=${!this.removeAllowed}\n              @click=${this.manageItemsClicked}\n            >\n              ${msg('Item Manager the items')}\n            </button>`\n          )}\n          <div class=\"selection-buttons\">\n            ${when(\n              this.showSelectAll,\n              () => html` <button\n                class=\"ia-button link select-all-btn\"\n                @click=${this.selectAllClicked}\n              >\n                ${msg('Select all')}\n              </button>`\n            )}\n            ${when(\n              this.showUnselectAll,\n              () => html` <button\n                class=\"ia-button link unselect-all-btn\"\n                @click=${this.unselectAllClicked}\n              >\n                ${msg('Unselect all')}\n              </button>`\n            )}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private cancelClicked(): void {\n    this.dispatchEvent(new CustomEvent('cancel'));\n  }\n\n  private removeItemsClicked(): void {\n    this.showRemoveItemsProcessingModal();\n    this.dispatchEvent(new CustomEvent('removeItems'));\n  }\n\n  private manageItemsClicked(): void {\n    this.dispatchEvent(new CustomEvent('manageItems'));\n  }\n\n  private selectAllClicked(): void {\n    this.dispatchEvent(new CustomEvent('selectAll'));\n  }\n\n  private unselectAllClicked(): void {\n    this.dispatchEvent(new CustomEvent('unselectAll'));\n  }\n\n  /**\n   * Shows a modal dialog confirming the list of items to be removed\n   * @param items Which items to list in the modal\n   */\n  private showRemoveItemsModal(): void {\n    const delayMessage =\n      this.activeTabId === 'uploads'\n        ? msg(\n            'Note: it may take a few minutes for these items to stop appearing in your uploads list.'\n          )\n        : undefined;\n\n    const customModalContent = html`\n      <remove-items-modal-content\n        .items=${this.selectedItems}\n        .message=${delayMessage}\n        @confirm=${() => this.removeItemsClicked()}\n      ></remove-items-modal-content>\n    `;\n\n    const config = new ModalConfig({\n      showProcessingIndicator: false,\n      processingImageMode: 'processing',\n      bodyColor: '#fff',\n      headerColor: '#194880',\n      showHeaderLogo: false,\n      closeOnBackdropClick: true,\n      title: html`${msg('Are you sure you want to remove these items?')}`,\n    });\n\n    this.modalManager?.classList.add('remove-items');\n    this.modalManager?.showModal({\n      config,\n      customModalContent,\n      userClosedModalCallback: () => {\n        this.modalManager?.classList.remove('remove-items');\n      },\n    });\n  }\n\n  /**\n   * Shows a modal dialog indicating that item removal is being processed\n   */\n  private showRemoveItemsProcessingModal(): void {\n    const config = new ModalConfig({\n      showProcessingIndicator: true,\n      processingImageMode: 'processing',\n      bodyColor: '#fff',\n      headerColor: '#194880',\n      showHeaderLogo: false,\n      closeOnBackdropClick: true,\n      title: html`${msg('Removing selected items...')}`,\n    });\n\n    this.modalManager?.classList.add('remove-items');\n    this.modalManager?.showModal({\n      config,\n      userClosedModalCallback: () => {\n        this.modalManager?.classList.remove('remove-items');\n      },\n    });\n  }\n\n  /**\n   * Shows a modal dialog indicating that an error occurred while removing items\n   */\n  private showRemoveItemsErrorModal(): void {\n    const config = new ModalConfig({\n      showProcessingIndicator: false,\n      processingImageMode: 'processing',\n      bodyColor: '#fff',\n      headerColor: '#691916',\n      showHeaderLogo: false,\n      closeOnBackdropClick: true,\n      title: html`${msg('Error: unable to remove items')}`,\n      message: html`${msg(\n        'An error occurred while removing items. Please try again in a few minutes.'\n      )}`,\n    });\n\n    this.modalManager?.classList.add('remove-items');\n    this.modalManager?.showModal({\n      config,\n      userClosedModalCallback: () => {\n        this.modalManager?.classList.remove('remove-items');\n      },\n    });\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      ${iaButtonStyle}\n      .manage-container {\n        display: flex;\n        align-items: center;\n        column-gap: 5px;\n        padding: 20px 0 20px;\n        flex-wrap: wrap;\n      }\n\n      .manage-label {\n        display: inline-block;\n        font-weight: bold;\n        font-size: 1.8rem;\n        padding-right: 10px;\n      }\n\n      .manage-buttons {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        column-gap: 5px;\n      }\n\n      .selection-buttons {\n        display: inherit;\n      }\n\n      .ia-button,\n      button {\n        padding: 6px 12px;\n        font-size: 1.4rem;\n        margin: 3px 0;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"manage-bar.js","sourceRoot":"","sources":["../../../src/manage/manage-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { msg } from '@lit/localize';\nimport { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\nimport {\n  ModalConfig,\n  type ModalManagerInterface,\n} from '@internetarchive/modal-manager';\nimport type { ManageableItem } from '../models';\nimport iaButtonStyle from '../styles/ia-button';\nimport './remove-items-modal-content';\n\n@customElement('manage-bar')\nexport class ManageBar extends LitElement {\n  /**\n   * The label displayed in front of the management buttons\n   */\n  @property({ type: String }) label = msg('Select items to remove');\n\n  /**\n   * Specifies the context in which the collection browser is being used\n   */\n  @property({ type: String }) activeTabId?: string;\n\n  /**\n   * The shared modal manager component for displaying modal dialogs on this page\n   */\n  @property({ type: Object }) modalManager?: ModalManagerInterface;\n\n  /**\n   * Array of items that have been selected for management\n   */\n  @property({ type: Object }) selectedItems: Array<ManageableItem> = [];\n\n  /**\n   * Message shows as note in the modal when removing items\n   */\n  @property({ type: String }) manageViewModelMsg?: string;\n\n  /**\n   * Whether to show the \"Select All\" button (default false)\n   */\n  @property({ type: Boolean }) showSelectAll = false;\n\n  /**\n   * Whether to show the \"Unselect All\" button (default false)\n   */\n  @property({ type: Boolean }) showUnselectAll = false;\n\n  /**\n   * Whether to show \"Item Manager the items\" button (default false)\n   */\n  @property({ type: Boolean }) showItemManageButton = false;\n\n  /**\n   * Whether to active delete button for selectable items\n   */\n  @property({ type: Boolean }) removeAllowed = false;\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"manage-container\">\n        <span class=\"manage-label\">${this.label}</span>\n        <div class=\"manage-buttons\">\n          <button class=\"ia-button dark\" @click=${this.cancelClicked}>\n            ${msg('Cancel')}\n          </button>\n          <button\n            class=\"ia-button danger\"\n            ?disabled=${!this.removeAllowed}\n            @click=${this.showRemoveItemsModal}\n          >\n            ${msg('Remove selected items')}\n          </button>\n          ${when(\n            this.showItemManageButton,\n            () => html` <button\n              class=\"ia-button warning\"\n              ?disabled=${!this.removeAllowed}\n              @click=${this.manageItemsClicked}\n            >\n              ${msg('Item Manager the items')}\n            </button>`\n          )}\n          <div class=\"selection-buttons\">\n            ${when(\n              this.showSelectAll,\n              () => html` <button\n                class=\"ia-button link select-all-btn\"\n                @click=${this.selectAllClicked}\n              >\n                ${msg('Select all')}\n              </button>`\n            )}\n            ${when(\n              this.showUnselectAll,\n              () => html` <button\n                class=\"ia-button link unselect-all-btn\"\n                @click=${this.unselectAllClicked}\n              >\n                ${msg('Unselect all')}\n              </button>`\n            )}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private cancelClicked(): void {\n    this.dispatchEvent(new CustomEvent('cancel'));\n  }\n\n  private removeItemsClicked(): void {\n    this.dispatchEvent(new CustomEvent('removeItems'));\n  }\n\n  private manageItemsClicked(): void {\n    this.dispatchEvent(new CustomEvent('manageItems'));\n  }\n\n  private selectAllClicked(): void {\n    this.dispatchEvent(new CustomEvent('selectAll'));\n  }\n\n  private unselectAllClicked(): void {\n    this.dispatchEvent(new CustomEvent('unselectAll'));\n  }\n\n  /**\n   * Shows a modal dialog confirming the list of items to be removed\n   * @param items Which items to list in the modal\n   */\n  private showRemoveItemsModal(): void {\n    const customModalContent = html`\n      <remove-items-modal-content\n        .items=${this.selectedItems}\n        .message=${this.manageViewModelMsg}\n        @confirm=${() => this.removeItemsClicked()}\n      ></remove-items-modal-content>\n    `;\n\n    const config = new ModalConfig({\n      showProcessingIndicator: false,\n      processingImageMode: 'processing',\n      bodyColor: '#fff',\n      headerColor: '#194880',\n      showHeaderLogo: false,\n      closeOnBackdropClick: true,\n      title: html`${msg('Are you sure you want to remove these items?')}`,\n    });\n\n    this.modalManager?.classList.add('remove-items');\n    this.modalManager?.showModal({\n      config,\n      customModalContent,\n      userClosedModalCallback: () => {\n        this.modalManager?.classList.remove('remove-items');\n      },\n    });\n  }\n\n  /**\n   * Shows a modal dialog indicating that item removal is being processed\n   */\n  showRemoveItemsProcessingModal(): void {\n    const config = new ModalConfig({\n      showProcessingIndicator: true,\n      processingImageMode: 'processing',\n      bodyColor: '#fff',\n      headerColor: '#194880',\n      showHeaderLogo: false,\n      closeOnBackdropClick: true,\n      title: html`${msg('Removing selected items...')}`,\n    });\n\n    this.modalManager?.classList.add('remove-items');\n    this.modalManager?.showModal({\n      config,\n      userClosedModalCallback: () => {\n        this.modalManager?.classList.remove('remove-items');\n      },\n    });\n  }\n\n  /**\n   * Shows a modal dialog indicating that an error occurred while removing items\n   */\n  showRemoveItemsErrorModal(): void {\n    const config = new ModalConfig({\n      showProcessingIndicator: false,\n      processingImageMode: 'processing',\n      bodyColor: '#fff',\n      headerColor: '#691916',\n      showHeaderLogo: false,\n      closeOnBackdropClick: true,\n      title: html`${msg('Error: unable to remove items')}`,\n      message: html`${msg(\n        'An error occurred while removing items. Please try again in a few minutes.'\n      )}`,\n    });\n\n    this.modalManager?.classList.add('remove-items');\n    this.modalManager?.showModal({\n      config,\n      userClosedModalCallback: () => {\n        this.modalManager?.classList.remove('remove-items');\n      },\n    });\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      ${iaButtonStyle}\n      .manage-container {\n        display: flex;\n        align-items: center;\n        column-gap: 5px;\n        padding: 20px 0 20px;\n        flex-wrap: wrap;\n      }\n\n      .manage-label {\n        display: inline-block;\n        font-weight: bold;\n        font-size: 1.8rem;\n        padding-right: 10px;\n      }\n\n      .manage-buttons {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        column-gap: 5px;\n      }\n\n      .selection-buttons {\n        display: inherit;\n      }\n\n      .ia-button,\n      button {\n        padding: 6px 12px;\n        font-size: 1.4rem;\n        margin: 3px 0;\n      }\n    `;\n  }\n}\n"]}

package/package.json

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

package/src/app-root.ts

@@ -485,7 +485,7 @@ export class AppRoot extends LitElement {
           .modalManager=${this.modalManager}
           .analyticsHandler=${this.analyticsHandler}
           .pageContext=${'search'}
-          .activeTabId=${''}
+          .activeTabId=${'uploads'}
           @visiblePageChanged=${this.visiblePageChanged}
           @baseQueryChanged=${this.baseQueryChanged}
           @searchTypeChanged=${this.searchTypeChanged}
@@ -710,9 +710,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 +724,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 +744,6 @@ export class AppRoot extends LitElement {
     this.collectionBrowser.isManageView = target.checked;
     this.collectionBrowser.manageViewLabel =
       'Select items to remove (customizable texts)';
-    this.collectionBrowser.hasItemsDeleted = true;
   }
 
   /**

package/src/collection-browser.ts

@@ -44,7 +44,6 @@ import {
   SORT_OPTIONS,
   defaultProfileElementSorts,
   FacetLoadStrategy,
-  ManageableItem,
 } from './models';
 import {
   RestorationStateHandlerInterface,
@@ -66,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';
@@ -247,8 +246,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) */
@@ -303,6 +300,8 @@ export class CollectionBrowser
 
   @query('collection-facets') private collectionFacets?: CollectionFacets;
 
+  @query('manage-bar') private manageBar?: ManageBar;
+
   @property({ type: Object, attribute: false })
   analyticsHandler?: AnalyticsManagerInterface;
 
@@ -778,12 +777,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'}
@@ -805,16 +809,12 @@ export class CollectionBrowser
    * Emits an `itemRemovalRequested` event with all checked tile models.
    */
   private handleRemoveItems(): void {
-    this.hasItemsDeleted = true;
-
     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 : ''
+          ),
         },
       })
     );
@@ -825,16 +825,30 @@ export class CollectionBrowser
    */
   private handleManageItems(): void {
     this.dispatchEvent(
-      new CustomEvent<{ items: ManageableItem[] }>('itemManagerRequested', {
+      new CustomEvent<{ items: String[] }>('itemManagerRequested', {
         detail: {
-          items: this.dataSource.checkedTileModels.map(
-            model => model as ManageableItem
+          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.

package/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 {
@@ -39,6 +32,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 +47,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 +57,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 +112,6 @@ export class ManageBar extends LitElement {
   }
 
   private removeItemsClicked(): void {
-    this.showRemoveItemsProcessingModal();
     this.dispatchEvent(new CustomEvent('removeItems'));
   }
 
@@ -146,17 +132,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 +163,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 +186,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',