@internetarchive/collection-browser 2.7.5-alpha.4 → 2.7.5-alpha1

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

@@ -149,18 +149,11 @@ export class CollectionBrowserDataSource
    */
   queryErrorMessage?: string;
 
-  /**
-   * Internal property to store the `resolve` function for the most recent
-   * `initialSearchComplete` promise, allowing us to resolve it at the appropriate time.
-   */
-  private _initialSearchCompleteResolver!: (val: boolean) => void;
-
   /**
    * Internal property to store the private value backing the `initialSearchComplete` getter.
    */
-  private _initialSearchCompletePromise: Promise<boolean> = new Promise(res => {
-    this._initialSearchCompleteResolver = res;
-  });
+  private _initialSearchCompletePromise: Promise<boolean> =
+    Promise.resolve(true);
 
   /**
    * @inheritdoc
@@ -186,8 +179,6 @@ export class CollectionBrowserDataSource
   }
 
   hostUpdate(): void {
-    console.log('host updated');
-    console.log(`active on host? ${this.activeOnHost}`);
     // This reactive controller hook is run whenever the host component (collection-browser) performs an update.
     // We check whether the host's state has changed in a way which should trigger a reset & new results fetch.
 
@@ -198,22 +189,18 @@ export class CollectionBrowserDataSource
     this.setSearchResultsLoading(this.searchResultsLoading);
     this.setFacetsLoading(this.facetsLoading);
 
-    console.log(`has search service? ${!!this.host.searchService}`);
     // Can't perform searches without a search service
     if (!this.host.searchService) return;
 
     // We should only reset if part of the full query state has changed
     const queryKeyChanged = this.pageFetchQueryKey !== this.previousQueryKey;
-    console.log(`query key changed? ${queryKeyChanged}`);
     if (!queryKeyChanged) return;
 
     // We should only reset if either:
     //  (a) our state permits a valid search, or
-    //  (b) we have a blank query that we want to show empty results for
-    const emptyQuery = !this.host.baseQuery;
-    console.log(`can perform search? ${this.canPerformSearch}`);
-    console.log(`emptyQuery: ${emptyQuery}`);
-    if (!(this.canPerformSearch || emptyQuery)) return;
+    //  (b) we have a blank query that we're showing a placeholder/message for
+    const queryIsEmpty = !this.host.baseQuery;
+    if (!(this.canPerformSearch || queryIsEmpty)) return;
 
     if (this.activeOnHost) this.host.emitQueryStateChanged();
     this.handleQueryChange();
@@ -382,28 +369,26 @@ export class CollectionBrowserDataSource
    * @inheritdoc
    */
   async handleQueryChange(): Promise<void> {
-    console.log('handling query change');
-    console.log(`suppressFetches: ${this.suppressFetches}`);
     // Don't react to the change if fetches are suppressed for this data source
     if (this.suppressFetches) return;
 
     this.reset();
 
     // Reset the `initialSearchComplete` promise with a new value for the imminent search
+    let initialSearchCompleteResolver: (value: boolean) => void;
     this._initialSearchCompletePromise = new Promise(res => {
-      this._initialSearchCompleteResolver = res;
+      initialSearchCompleteResolver = res;
     });
 
     // Fire the initial page & facet requests
     this.queryInitialized = true;
-    console.log('firing requests...');
     await Promise.all([
       this.doInitialPageFetch(),
       this.canFetchFacets ? this.fetchFacets() : null,
     ]);
 
     // Resolve the `initialSearchComplete` promise for this search
-    this._initialSearchCompleteResolver(true);
+    initialSearchCompleteResolver!(true);
   }
 
   /**
@@ -424,15 +409,11 @@ export class CollectionBrowserDataSource
    * (i.e., they aren't suppressed or already loading, etc.)
    */
   private get canFetchFacets(): boolean {
-    console.log('in canFetchFacets');
-    console.log(`facetLoadStrategy is ${this.host.facetLoadStrategy}`);
-    console.log(`profileElement is ${this.host.profileElement}`);
     // Don't fetch facets if they are suppressed entirely or not required for the current profile page element
     if (this.host.facetLoadStrategy === 'off') return false;
     if (FACETLESS_PAGE_ELEMENTS.includes(this.host.profileElement!))
       return false;
 
-    console.log(`facetsReadyToLoad: ${this.facetsReadyToLoad}`);
     // If facets are to be lazy-loaded, don't fetch them if they are not going to be visible anyway
     // (wait until they become visible instead)
     if (this.host.facetLoadStrategy !== 'eager' && !this.facetsReadyToLoad)
@@ -441,11 +422,8 @@ export class CollectionBrowserDataSource
     // Don't fetch facets again if they are already fetched or pending
     const facetsAlreadyFetched =
       Object.keys(this.aggregations ?? {}).length > 0;
-    console.log(`facetsAlreadyFetched: ${facetsAlreadyFetched}`);
-    console.log(`facetsLoading: ${this.facetsLoading}`);
     if (this.facetsLoading || facetsAlreadyFetched) return false;
 
-    console.log('canFetchFacets = true');
     return true;
   }
 
@@ -571,8 +549,6 @@ export class CollectionBrowserDataSource
    * @inheritdoc
    */
   get canPerformSearch(): boolean {
-    console.log('in canPerformSearch');
-    console.log(`has search service: ${!!this.host.searchService}`);
     if (!this.host.searchService) return false;
 
     const trimmedQuery = this.host.baseQuery?.trim();
@@ -581,12 +557,6 @@ export class CollectionBrowserDataSource
     const isProfileSearch = !!this.host.withinProfile;
     const hasProfileElement = !!this.host.profileElement;
     const isMetadataSearch = this.host.searchType === SearchType.METADATA;
-    console.log(`hasNonEmptyQuery: ${hasNonEmptyQuery}
-      isCollectionSearch: ${isCollectionSearch}
-      isProfileSearch: ${isProfileSearch}
-      isMetadataSearch: ${isMetadataSearch}
-      hasProfileElement: ${hasProfileElement}`
-    );
 
     // Metadata searches within a collection/profile are allowed to have no query.
     // Otherwise, a non-empty query must be set.
@@ -602,7 +572,6 @@ export class CollectionBrowserDataSource
    * current query is loading
    */
   private setSearchResultsLoading(loading: boolean): void {
-    console.log(`setSearchResultsLoading: ${loading} (active on host: ${this.activeOnHost})`);
     this.searchResultsLoading = loading;
     if (this.activeOnHost) {
       this.host.setSearchResultsLoading(loading);
@@ -613,7 +582,6 @@ export class CollectionBrowserDataSource
    * Sets the state for whether the facets for a query is loading
    */
   private setFacetsLoading(loading: boolean): void {
-    console.log(`setFacetsLoading: ${loading} (active on host: ${this.activeOnHost})`);
     this.facetsLoading = loading;
     if (this.activeOnHost) {
       this.host.setFacetsLoading(loading);
@@ -935,14 +903,10 @@ export class CollectionBrowserDataSource
    * the current search state.
    */
   private async fetchFacets(): Promise<void> {
-    console.log('in fetchFacets');
-    console.log(`can perform search? ${this.canPerformSearch}`);
     const trimmedQuery = this.host.baseQuery?.trim();
     if (!this.canPerformSearch) return;
 
     const { facetFetchQueryKey } = this;
-    console.log(`facetFetchQueryKey: ${facetFetchQueryKey}`);
-    console.log(`fetch in progress? ${this.fetchesInProgress.has(facetFetchQueryKey)}`);
     if (this.fetchesInProgress.has(facetFetchQueryKey)) return;
     this.fetchesInProgress.add(facetFetchQueryKey);
 
@@ -964,7 +928,6 @@ export class CollectionBrowserDataSource
       'aggregations'
     );
 
-    console.log('sending facet request');
     const searchResponse = await this.host.searchService?.search(
       params,
       this.host.searchType

package/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;
       }
     `;
   }

package/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

package/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;
+  }
 `;

package/test/collection-browser.test.ts

@@ -1010,11 +1010,11 @@ describe('Collection Browser', () => {
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser
         .searchService=${searchService}
+        @searchResultsLoadingChanged=${spy}
       ></collection-browser>`
     );
 
     el.baseQuery = 'collection:foo';
-    el.addEventListener('searchResultsLoadingChanged', spy);
     await el.updateComplete;
     await el.initialSearchComplete;
 

package/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>`

package/web-dev-server.config.mjs

@@ -1,30 +1,30 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  nodeResolve: true,
-  open: '/',
-  watch: !hmr,
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  /** Confgure bare import resolve plugin */
-  // nodeResolve: {
-  //   exportConditions: ['browser', 'development']
-  // },
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  http2: true,
-  sslCert: './local.archive.org.cert',
-  sslKey: './local.archive.org.key',
-});
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  nodeResolve: true,
+  open: '/',
+  watch: !hmr,
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  /** Confgure bare import resolve plugin */
+  // nodeResolve: {
+  //   exportConditions: ['browser', 'development']
+  // },
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  http2: true,
+  sslCert: './local.archive.org.cert',
+  sslKey: './local.archive.org.key',
+});

package/web-test-runner.config.mjs

@@ -1,41 +1,41 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});