Show active filters; Toolbar refactor

web/app/components/header/active-filter-list-item.hbs

@@ -0,0 +1,4 @@
+<LinkTo @query={{this.query}} class="active-filter-list-item">
+  <FlightIcon @name="x" />
+  {{@filter}}
+</LinkTo>

web/app/components/header/active-filter-list-item.ts

@@ -0,0 +1,28 @@
+import RouterService from "@ember/routing/router-service";
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+import ActiveFiltersService from "hermes/services/active-filters";
+
+interface HeaderActiveFilterListItemComponentSignature {
+  Args: {
+    filter: string;
+  };
+}
+
+export default class HeaderActiveFilterListItemComponent extends Component<HeaderActiveFilterListItemComponentSignature> {
+  @service declare activeFilters: ActiveFiltersService;
+  @service declare router: RouterService;
+
+  /**
+   * The query hash to use when clicking the filter.
+   * I.e., the ActiveFiltersService index minus the current filter.
+   */
+  get query() {
+    return Object.fromEntries(
+      Object.entries(this.activeFilters.index).map(([key, value]) => [
+        key,
+        value.filter((filter) => filter !== this.args.filter),
+      ])
+    );
+  }
+}

web/app/components/header/active-filter-list.hbs

@@ -0,0 +1,14 @@
+{{#if this.shownFilters.length}}
+  <div class="active-filter-list">
+    <h3>Showing</h3>
+    <div class="active-filter-list-container">
+      {{#each this.shownFilters as |filter|}}
+        <Header::ActiveFilterListItem @filter={{filter}} />
+      {{/each}}
+    </div>
+    <LinkTo @query={{this.defaultQuery}} class="clear-all-link">
+      <FlightIcon @name="x-circle" class="mr-1" />
+      Clear all
+    </LinkTo>
+  </div>
+{{/if}}

web/app/components/header/active-filter-list.ts

@@ -0,0 +1,30 @@
+import RouterService from "@ember/routing/router-service";
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+import ActiveFiltersService from "hermes/services/active-filters";
+
+interface HeaderActiveFilterListComponentSignature {
+  Args: {};
+}
+
+export default class HeaderActiveFilterListComponent extends Component<HeaderActiveFilterListComponentSignature> {
+  @service declare activeFilters: ActiveFiltersService;
+  @service declare router: RouterService;
+
+  /**
+   * A flat array of all the active filters.
+   */
+  get shownFilters() {
+    return Object.values(this.activeFilters.index).flat();
+  }
+
+  /**
+   * The route's default query parameters. Used to reset the filters.
+   */
+  defaultQuery = {
+    docType: [],
+    owners: [],
+    product: [],
+    status: [],
+  };
+}

web/app/components/header/facet-dropdown.hbs

@@ -5,19 +5,20 @@
   as |dd|
 >
   <dd.ToggleButton
-    data-test-facets-dropdown-toggle-button
+    data-test-facet-dropdown-toggle-button
     @text={{@label}}
     @color="secondary"
     disabled={{@disabled}}
   />
   {{#if @facets}}
     {{#each-in this.firstTenFacets as |value attrs|}}
       <dd.Interactive
-        class="facet-interactive-item"
-        {{on "click" (fn this.onClick value dd.close)}}
+        class="facet-interactive-item {{if attrs.selected 'checked'}}"
+        @route={{this.currentRouteName}}
+        @query={{get-facet-query-hash @label value attrs.selected}}
         @text="{{value}} ({{attrs.count}})"
         @icon={{if attrs.selected "check-square-fill" "square"}}
-        class={{if attrs.selected "checked"}}
+        {{on "click" (fn this.delayedCloseDropdown dd.close)}}
       />
     {{/each-in}}
   {{/if}}

web/app/components/header/facet-dropdown.ts

@@ -1,47 +1,38 @@
 import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { FacetDropdownObjects } from "hermes/types/facets";
+import { inject as service } from "@ember/service";
+import RouterService from "@ember/routing/router-service";
+import { next } from "@ember/runloop";
 
 interface FacetDropdownComponentSignature {
   Args: {
-    onClick: (facetName: FacetNames, value: string) => void;
     label: string;
     facets: FacetDropdownObjects;
     disabled: boolean;
   };
 }
 
-export enum FacetNames {
-  DocType = "docType",
-  Owners = "owners",
-  Status = "status",
-  Product = "product",
-}
-
 export default class FacetDropdownComponent extends Component<FacetDropdownComponentSignature> {
-  get facetName(): FacetNames | undefined {
-    switch (this.args.label) {
-      case "Type":
-        return FacetNames.DocType;
-      case "Status":
-        return FacetNames.Status;
-      case "Product/Area":
-        return FacetNames.Product;
-      case "Owner":
-        return FacetNames.Owners;
-    }
+  @service declare router: RouterService;
+
+  protected get currentRouteName(): string {
+    return this.router.currentRouteName;
   }
 
-  get firstTenFacets(): FacetDropdownObjects {
+  protected get firstTenFacets(): FacetDropdownObjects {
     let firstTenEntries = Object.entries(this.args.facets).slice(0, 10);
     let firstTenFacetsObjects = Object.fromEntries(firstTenEntries);
     return firstTenFacetsObjects;
   }
 
-  @action onClick(value: string, close: () => void) {
-    if (this.facetName) {
-      this.args.onClick(this.facetName, value);
-    }
-    close();
+  /**
+   * Closes the dropdown on the next run loop.
+   * Done so we don't interfere with Ember's <LinkTo> handling.
+   */
+  @action protected delayedCloseDropdown(closeDropdown: () => void) {
+    next(() => {
+      closeDropdown();
+    });
   }
 }

web/app/components/header/toolbar.hbs

@@ -12,25 +12,22 @@
             <Header::FacetDropdown
               @label="Type"
               @facets={{@facets.docType}}
-              @onClick={{this.handleClick}}
               @disabled={{not @facets.docType}}
             />
             <Header::FacetDropdown
+              data-test-facet-dropdown="status"
               @label="Status"
               @facets={{this.statuses}}
-              @onClick={{this.handleClick}}
               @disabled={{not this.statuses}}
             />
             <Header::FacetDropdown
               @label="Product/Area"
               @facets={{@facets.product}}
-              @onClick={{this.handleClick}}
               @disabled={{not @facets.product}}
             />
             <Header::FacetDropdown
               @label="Owner"
               @facets={{@facets.owners}}
-              @onClick={{this.handleClick}}
               @disabled={{this.ownerFacetIsDisabled}}
             />
           </div>
@@ -39,22 +36,29 @@
         {{#if (and @facets (not @sortControlIsHidden))}}
           <Hds::Dropdown class="sort-by-dropdown" as |dd|>
             <dd.ToggleButton
+              data-test-sort-by-button
               @text="Sort: {{this.getSortByLabel}}"
               @color="secondary"
+              disabled={{this.sortControlIsDisabled}}
             />
             <dd.Interactive
-              {{on "click" (fn this.updateSortBy "dateDesc" dd.close)}}
+              {{on "click" (fn this.delayedCloseDropdown dd.close)}}
+              @route={{this.currentRouteName}}
+              @query={{hash sortBy="dateDesc"}}
               @text="Newest"
               @icon="sort-desc"
             />
             <dd.Interactive
-              {{on "click" (fn this.updateSortBy "dateAsc" dd.close)}}
+              {{on "click" (fn this.delayedCloseDropdown dd.close)}}
+              @route={{this.currentRouteName}}
+              @query={{hash sortBy="dateAsc"}}
               @text="Oldest"
               @icon="sort-asc"
             />
           </Hds::Dropdown>
         {{/if}}
       </div>
+      <Header::ActiveFilterList />
     </div>
   </div>
 {{/if}}