Add extra button for search page manage UI (#414)

* Add extra button for search page manage UI

Author: nsharma123

src/app-root.ts

@@ -327,6 +327,14 @@ export class AppRoot extends LitElement {
               />
               <label for="enable-management">Enable manage mode</label>
             </div>
+            <div class="checkbox-control indent">
+              <input
+                type="checkbox"
+                id="enable-search-management"
+                @click=${this.SearchManageModeCheckboxChanged}
+              />
+              <label for="enable-search-management">Search</label>
+            </div>
             <div class="checkbox-control">
               <input
                 type="checkbox"
@@ -476,10 +484,15 @@ export class AppRoot extends LitElement {
           .loggedIn=${this.loggedIn}
           .modalManager=${this.modalManager}
           .analyticsHandler=${this.analyticsHandler}
+          .pageContext=${'search'}
           @visiblePageChanged=${this.visiblePageChanged}
           @baseQueryChanged=${this.baseQueryChanged}
           @searchTypeChanged=${this.searchTypeChanged}
           @manageModeChanged=${this.manageModeChanged}
+          @itemRemovalRequested=${(e: CustomEvent) =>
+            console.log(e.detail.items)}
+          @itemManagerRequested=${(e: CustomEvent) =>
+            console.log(e.detail.items)}
         >
           ${this.toggleSlots
             ? html`<div slot="sortbar-left-slot">Sort Slot</div>`
@@ -704,6 +717,16 @@ export class AppRoot extends LitElement {
       'Select items to remove (customizable texts)';
   }
 
+  /**
+   * Handler when the dev panel's "Enable manage mode -> Search" checkbox is changed.
+   */
+  private SearchManageModeCheckboxChanged(e: Event) {
+    const target = e.target as HTMLInputElement;
+    this.collectionBrowser.pageContext = target.checked
+      ? 'search'
+      : 'collection';
+  }
+
   /**
    * Handler for when the dev panel's "Enable smart facet bar" checkbox is changed.
    */

src/collection-browser.ts

@@ -777,10 +777,12 @@ export class CollectionBrowser
     return html`
       <manage-bar
         .label=${this.manageViewLabel}
+        .pageContext=${this.pageContext}
         showSelectAll
         showUnselectAll
         ?removeAllowed=${this.dataSource.checkedTileModels.length !== 0}
         @removeItems=${this.handleRemoveItems}
+        @itemsManager=${this.handleItemsManager}
         @selectAll=${() => this.dataSource.checkAllTiles()}
         @unselectAll=${() => this.dataSource.uncheckAllTiles()}
         @cancel=${() => {
@@ -809,6 +811,22 @@ export class CollectionBrowser
     );
   }
 
+  /**
+   * Handler when user request to bulk edit from /search/ page
+   */
+  private handleItemsManager(): void {
+    this.dispatchEvent(
+      new CustomEvent('itemManagerRequested', {
+        detail: {
+          items: this.dataSource.checkedTileModels
+            .map(item => item.identifier)
+            .filter(Boolean)
+            .join(','),
+        },
+      })
+    );
+  }
+
   /**
    * 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

@@ -17,6 +17,11 @@ 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 }) pageContext?: string;
+
   /**
    * Whether to show the "Select All" button (default false)
    */
@@ -47,11 +52,22 @@ export class ManageBar extends LitElement {
           >
             ${msg('Remove selected items')}
           </button>
+          ${this.pageContext === 'search'
+            ? html`
+                <button
+                  class="ia-button warning"
+                  ?disabled=${!this.removeAllowed}
+                  @click=${this.itemsManagerClicked}
+                >
+                  ${msg('Item Manager the items')}
+                </button>
+              `
+            : ''}
           <div class="selection-buttons">
             ${when(
               this.showSelectAll,
               () => html` <button
-                class="link-styled select-all-btn"
+                class="ia-button link select-all-btn"
                 @click=${this.selectAllClicked}
               >
                 ${msg('Select all')}
@@ -60,7 +76,7 @@ export class ManageBar extends LitElement {
             ${when(
               this.showUnselectAll,
               () => html` <button
-                class="link-styled unselect-all-btn"
+                class="ia-button link unselect-all-btn"
                 @click=${this.unselectAllClicked}
               >
                 ${msg('Unselect all')}
@@ -80,6 +96,10 @@ export class ManageBar extends LitElement {
     this.dispatchEvent(new CustomEvent('removeItems'));
   }
 
+  private itemsManagerClicked(): void {
+    this.dispatchEvent(new CustomEvent('itemsManager'));
+  }
+
   private selectAllClicked(): void {
     this.dispatchEvent(new CustomEvent('selectAll'));
   }
@@ -108,33 +128,20 @@ export class ManageBar extends LitElement {
 
       .manage-buttons {
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
         column-gap: 5px;
       }
 
+      .selection-buttons {
+        display: inherit;
+      }
+
       .ia-button,
       button {
         padding: 6px 12px;
         font-size: 1.4rem;
-      }
-
-      .ia-button.danger:disabled {
-        opacity: 0.5;
-      }
-
-      button.link-styled {
-        margin: 0;
-        padding: 6px;
-        border: 0;
-        appearance: none;
-        background: none;
-        color: var(--ia-theme-link-color, #4b64ff);
-        font: inherit;
-        text-decoration: none;
-        cursor: pointer;
-      }
-      button.link-styled:hover {
-        text-decoration: underline;
+        margin: 3px 0;
       }
     `;
   }

src/models.ts

@@ -236,9 +236,9 @@ export type TileDisplayMode =
 /**
  * This is mainly used to set the cookies for the collection display mode.
  *
- * It allows the user to set different modes for different contexts (collection page, search page, etc).
+ * It allows the user to set different modes for different contexts (collection page, search page, profile page etc).
  */
-export type CollectionBrowserContext = 'collection' | 'search';
+export type CollectionBrowserContext = 'collection' | 'search' | 'profile';
 
 /**
  * The sort fields shown in the sort filter bar

src/styles/ia-button.ts

@@ -16,8 +16,9 @@ const darkButtonFillColor = css`var(--secondaryCTAFill, #333)`;
 const darkButtonFillColorRGB = css`var(--secondaryCTAFillRGB, 51, 51, 51)`; // RBG format of --secondaryCTAFill
 const darkButtonBorderColor = css`var(--primaryCTABorder, #979797)`;
 
-const warningButtonBGColor = css`#ee8950`;
-const warningButtonBorderColor = css`#ec7939`;
+const warningButtonFillColor = css`var(---primaryWarningFill, #ee8950)`;
+const warningButtonFillColorRGB = css`var(--primaryWarningFillRGB, 238, 137, 80)`; // RBG format of --primaryWarningFill
+const warningButtonBorderColor = css`var(--primaryWarningBorder, #ec7939)`;
 
 export default css`
   .ia-button {
@@ -58,9 +59,12 @@ export default css`
   .ia-button.transparent {
     background-color: transparent;
   }
-  .ia-button.warning {
-    background-color: ${warningButtonBGColor}
-    border-color: ${warningButtonBorderColor};
+
+  .ia-button.primary:disabled,
+  .ia-button.danger:disabled,
+  .ia-button.warning:disabled,
+  .ia-button.dark:disabled {
+    opacity: 0.5;
   }
 
   .ia-button.primary {
@@ -91,6 +95,20 @@ export default css`
     background-color: rgba(${dangerButtonFillColorRGB}, 0.7);
   }
 
+  .ia-button.warning {
+    background-color: ${warningButtonFillColor};
+    border-color: ${warningButtonBorderColor};
+  }
+  .ia-button.warning:hover {
+    background-color: rgba(${warningButtonFillColorRGB}, 0.9);
+  }
+  .ia-button.warning:focus-visible {
+    background-color: rgba(${warningButtonFillColorRGB}, 0.8);
+  }
+  .ia-button.warning:active {
+    background-color: rgba(${warningButtonFillColorRGB}, 0.7);
+  }
+
   .ia-button.dark {
     background-color: ${darkButtonFillColor};
     border-color: ${darkButtonBorderColor};
@@ -104,4 +122,18 @@ export default css`
   .ia-button.dark:active {
     background-color: rgba(${darkButtonFillColorRGB}, 0.7);
   }
+
+  .ia-button.link {
+    margin: 0;
+    padding: 6px;
+    border: 0;
+    appearance: none;
+    background: none;
+    color: var(--ia-theme-link-color, #4b64ff);
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .ia-button.link:hover {
+    text-decoration: underline;
+  }
 `;

test/manage/manage-bar.test.ts

@@ -31,6 +31,18 @@ describe('Manage bar', () => {
     expect(el.shadowRoot?.querySelector('.unselect-all-btn')).not.to.exist;
   });
 
+  it('does not render item manager button except /search/ page', async () => {
+    const el = await fixture<ManageBar>(html`<manage-bar></manage-bar>`);
+    expect(el.shadowRoot?.querySelector('.ia-button.warning')).not.to.exist;
+  });
+
+  it('render item manager button for /search/ page', async () => {
+    const el = await fixture<ManageBar>(
+      html`<manage-bar .pageContext=${'search'}></manage-bar>`
+    );
+    expect(el.shadowRoot?.querySelector('.ia-button.warning')).to.exist;
+  });
+
   it('includes Select All button when requested', async () => {
     const el = await fixture<ManageBar>(
       html`<manage-bar showSelectAll></manage-bar>`