WEBDEV-8186 Implement new single-dropdown sort bar (#558)

* Remove desktop-style sort selectors in favor of one dropdown everywhere

* Update unit tests

* Clean up some now-unused pieces of the sort bar component

* Give sort direction toggle clearer button styling

* Remove unused props from main sort bar template

* Update sort direction styling slightly

* Remove some obsolete logging stmts

* Fix bug where sort always defaults to relevance

* Clarify the labels for the sort direction button

* Don't show unavailable sort option as dropdown label

* Show an appropriate default sort while loading collections

* Remove some unused imports

* Improve code clarity + small fix for TV special case

Author: latonv

src/collection-browser.ts

@@ -75,7 +75,6 @@ import { updateSelectedFacetBucket } from './utils/facet-utils';
 import chevronIcon from './assets/img/icons/chevron';
 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 type { SmartFacetBar } from './collection-facets/smart-facets/smart-facet-bar';
@@ -858,21 +857,14 @@ export class CollectionBrowser
     if (this.suppressSortBar) return nothing;
 
     // Determine the set of sortable fields that should be shown in the sort bar
-    let defaultViewSort = SortField.weeklyview;
-    let defaultDateSort = SortField.date;
     let sortFieldAvailability = defaultSortAvailability;
 
-    // We adjust the sort options for a couple of special cases...
+    // We adjust the available sort options for a couple of special cases...
     if (this.withinCollection?.startsWith('fav-')) {
-      // When viewing a fav- collection, we include the Date Favorited option and show
-      // it as the default in the date dropdown.
-      defaultDateSort = SortField.datefavorited;
+      // When viewing a fav- collection, we include the Date Favorited option as the default
       sortFieldAvailability = favoritesSortAvailability;
     } else if (!this.withinCollection && this.searchType === SearchType.TV) {
-      // When viewing TV search results, we default the views dropdown to All-time Views
-      // and exclude several of the usual date sort options.
-      defaultViewSort = SortField.alltimeview;
-      defaultDateSort = SortField.datearchived;
+      // When viewing TV search results, we exclude several of the usual date sort options.
       sortFieldAvailability = tvSortAvailability;
     }
 
@@ -883,16 +875,13 @@ export class CollectionBrowser
       <sort-filter-bar
         .defaultSortField=${this.defaultSortField}
         .defaultSortDirection=${this.defaultSortDirection}
-        .defaultViewSort=${defaultViewSort}
-        .defaultDateSort=${defaultDateSort}
         .selectedSort=${this.selectedSort}
         .sortDirection=${this.sortDirection}
         .sortFieldAvailability=${sortFieldAvailability}
         .displayMode=${this.displayMode}
         .selectedTitleFilter=${this.selectedTitleFilter}
         .selectedCreatorFilter=${this.selectedCreatorFilter}
         .prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
-        .resizeObserver=${this.resizeObserver}
         .enableSortOptionsSlot=${this.enableSortOptionsSlot}
         .suppressDisplayModes=${this.suppressDisplayModes}
         @sortChanged=${this.userChangedSort}
@@ -1643,7 +1632,6 @@ export class CollectionBrowser
     dataSource: CollectionBrowserDataSourceInterface,
     queryState: CollectionBrowserQueryState,
   ): Promise<void> {
-    log('Installing data source & query state in CB:', dataSource, queryState);
     if (this.dataSource) this.removeController(this.dataSource);
     this.dataSource = dataSource;
     this.addController(this.dataSource);
@@ -1772,6 +1760,17 @@ export class CollectionBrowser
       this.applyDefaultProfileSort();
     }
 
+    if (changed.has('withinCollection') && this.withinCollection) {
+      // Set a sensible default collection sort while we load results, which we will later
+      // adjust based on any sort-by metadata once the response arrives.
+      if (!this.baseQuery) {
+        this.defaultSortField = this.withinCollection.startsWith('fav-')
+          ? SortField.datefavorited
+          : SortField.weeklyview;
+        this.defaultSortDirection = 'desc';
+      }
+    }
+
     if (changed.has('baseQuery')) {
       this.emitBaseQueryChanged();
     }
@@ -2259,12 +2258,8 @@ export class CollectionBrowser
     this.displayMode = restorationState.displayMode;
     if (!this.suppressURLSinParam && restorationState.searchType != null)
       this.searchType = restorationState.searchType;
-    this.selectedSort =
-      restorationState.selectedSort ??
-      this.defaultSortField ??
-      SortField.default;
-    this.sortDirection =
-      restorationState.sortDirection ?? this.defaultSortDirection ?? null;
+    this.selectedSort = restorationState.selectedSort ?? SortField.default;
+    this.sortDirection = restorationState.sortDirection ?? null;
     this.selectedTitleFilter = restorationState.selectedTitleFilter ?? null;
     this.selectedCreatorFilter = restorationState.selectedCreatorFilter ?? null;
     this.selectedFacets = restorationState.selectedFacets;

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

@@ -32,7 +32,6 @@ import {
 import type { CollectionBrowserDataSourceInterface } from './collection-browser-data-source-interface';
 import type { CollectionBrowserSearchInterface } from './collection-browser-query-state';
 import { sha1 } from '../utils/sha1';
-import { log } from '../utils/log';
 import { mergeSelectedFacets } from '../utils/facet-utils';
 
 export class CollectionBrowserDataSource
@@ -250,7 +249,6 @@ export class CollectionBrowserDataSource
    * @inheritdoc
    */
   reset(): void {
-    log('Resetting CB data source');
     this.pages = {};
     this.aggregations = {};
     this.histogramAggregation = undefined;
@@ -1120,15 +1118,20 @@ export class CollectionBrowserDataSource
 
     let sortParams = this.host.sortParam ? [this.host.sortParam] : [];
     // TODO eventually the PPS should handle these defaults natively
-    const isDefaultProfileSort =
-      withinProfile && this.host.selectedSort === SortField.default;
-    if (isDefaultProfileSort && this.host.defaultSortField) {
+    const isDefaultSort = this.host.selectedSort === SortField.default;
+    const isTVSearch = this.host.searchType === SearchType.TV;
+    const isDefaultTVSort = isTVSearch && isDefaultSort;
+    const isDefaultProfileSort = withinProfile && isDefaultSort;
+    if (
+      (isDefaultProfileSort || isDefaultTVSort) &&
+      this.host.defaultSortField
+    ) {
       const sortOption = SORT_OPTIONS[this.host.defaultSortField];
       if (sortOption.searchServiceKey) {
         sortParams = [
           {
             field: sortOption.searchServiceKey,
-            direction: 'desc',
+            direction: this.host.defaultSortDirection ?? 'desc',
           },
         ];
       }

src/data-source/collection-browser-query-state.ts

@@ -39,6 +39,7 @@ export interface CollectionBrowserSearchInterface
   isTVCollection: boolean;
   readonly sortParam: SortParam | null;
   readonly defaultSortField: SortField | null;
+  readonly defaultSortDirection: SortDirection | null;
   readonly facetLoadStrategy: FacetLoadStrategy;
   readonly initialPageNumber: number;
   readonly maxPagesToManage: number;