feat(admin): filter inventory through the same flyout the storefront uses (#169)

The two screens asked the same questions through different UI. The storefront had searchable multi-selects in a flyout; the admin still had an always-visible row of controls with a single-select category that held a list of at most one, which is what #139 left behind so the shared filter type would not have to change shape twice.

The drawer is now one component with the sections that differ driven by props rather than a second copy that would drift. Favorites is storefront-only. Status is admin-only, since pending is excluded from every public read and Published or Unpublished are not distinctions a customer can draw — the storefront keeps its three-way preset outside the drawer. The price slider needs real catalogue-wide bounds to be honest about where the prices are, and the admin has none, so there it is the two number inputs alone.

What is shared is not only the markup but the phrasing: that categories are OR and tags are AND has to read the same on both screens or it stops being one rule.

This reverses a decision `InventoryFilters.tsx` argued for in a comment — that hiding controls above a data table costs more than the space it saves, and that a drawer overlays the very rows being filtered. Both are true and both are traded for consistency between the panels. The active-filter chips are what makes the trade bearable: the current filter stays readable beside the button without opening anything, which is the part the always-visible row was really protecting. Status gets chips too, since it is now behind the button and is the filter most likely to empty a table.

`STATUS_OPTIONS` moves beside the filter type, because the drawer and the chips both need to turn a status into a label and a second copy is a second place for a new status to be forgotten.

The admin page object opens the flyout, acts, and closes it again — closing matters, because the drawer overlays the table every assertion in those specs is about.

Closes #169

frontend/tests/e2e/admin-inventory-filters.spec.ts

@@ -43,8 +43,7 @@ test.describe('Admin inventory filters', () => {
     await admin.goto();
     await adminInventory.filterByCategory(NAMES.category, NAMES.cheap);
 
-    await adminInventory.minimumPrice.fill('100');
-    await adminInventory.maximumPrice.fill('500');
+    await adminInventory.setPriceRange('100', '500');
 
     await expect(adminInventory.row(NAMES.mid)).toBeVisible();
     await expect(adminInventory.row(NAMES.cheap)).toHaveCount(0);
@@ -111,16 +110,20 @@ test.describe('Admin inventory filters', () => {
   test('combines filters, and clearing restores them', async ({ admin, adminInventory }) => {
     await admin.goto();
     await adminInventory.filterByCategory(NAMES.category, NAMES.cheap);
-    await adminInventory.minimumPrice.fill('800');
+    await adminInventory.setPriceRange('800');
     await expect(adminInventory.row(NAMES.cheap)).toHaveCount(0);
     await expect(adminInventory.row(NAMES.dear)).toBeVisible();
 
-    await adminInventory.clearFiltersButton.click();
+    await adminInventory.clearFilters();
 
     // Asserting on the controls rather than on the rows: with the filters gone
     // the table is the whole paginated catalogue again, so a given fixture is
     // not reliably on the first page.
+    //
+    // The chip row renders only while something is filtered, and the button's
+    // tally is the other half of the same claim — nothing is filtered, and the
+    // screen says so without the drawer being opened to check.
     await expect(adminInventory.clearFiltersButton).toHaveCount(0);
-    await expect(adminInventory.minimumPrice).toHaveValue('');
+    await expect(adminInventory.filtersButton).toHaveText('Filters');
   });
 });

frontend/tests/e2e/pages/AdminInventory.ts

@@ -81,6 +81,31 @@ export class AdminInventory {
   }
 
   // ---- The inventory filter bar ----
+  //
+  // The controls moved into the storefront's flyout (#169), so each method here
+  // opens the drawer, acts, and closes it again. Closing matters: the drawer
+  // overlays the table, and every assertion in these specs is about rows.
+
+  get filtersButton(): Locator {
+    return this.page.getByRole('button', { name: 'Filters' });
+  }
+
+  get filterDrawer(): Locator {
+    return this.page.getByRole('dialog', { name: 'Filters' });
+  }
+
+  /**
+   * The chip row's own "Clear all", scoped to the group so it stays distinct
+   * from the identically-labelled button in the drawer's footer.
+   *
+   * It exists only while something is filtered, which is what lets a spec assert
+   * that clearing worked by its absence.
+   */
+  get clearFiltersButton(): Locator {
+    return this.page
+      .getByRole('group', { name: 'Active filters' })
+      .getByRole('button', { name: 'Clear all' });
+  }
 
   get categoryFilter(): Locator {
     return this.page.getByRole('combobox', { name: 'Filter by category' });
@@ -98,30 +123,37 @@ export class AdminInventory {
     return this.page.getByLabel('Maximum price');
   }
 
-  get clearFiltersButton(): Locator {
-    return this.page.getByRole('button', { name: 'Clear filters' });
+  /** Opens the flyout, or leaves it open if it already is. */
+  async openFilters(): Promise<void> {
+    if (await this.filterDrawer.isVisible().catch(() => false)) return;
+    await this.filtersButton.click();
+    await expect(this.filterDrawer).toBeVisible();
+  }
+
+  /** Closes it through the footer button, which is what a person would click. */
+  async closeFilters(): Promise<void> {
+    await this.filterDrawer.getByRole('button', { name: /^Show / }).click();
+    await expect(this.filterDrawer).toBeHidden();
   }
 
   /**
    * Toggles one status in the multi-select. Clicking a selected option removes
    * it, which is what the clearing test relies on.
    *
-   * Two antd details decide this locator. It renders an invisible role="listbox"
-   * shim beside the real list for accessibility, so getByRole('option') finds
-   * something zero-sized that cannot be clicked. And once a status is selected
-   * it also renders as a tag carrying the same title as the option, so an
-   * unscoped getByTitle becomes ambiguous. Matching the visible option class
-   * avoids both.
-   *
-   * The dropdown is opened only when it is not already open: antd keeps it open
-   * after a selection in multiple mode, so clicking the box again would close it.
+   * The option is matched by class rather than by role because antd renders an
+   * invisible role="listbox" shim beside the real list for accessibility, so
+   * getByRole('option') finds something zero-sized that cannot be clicked; and
+   * once a status is selected it also renders as a tag carrying the same title,
+   * so an unscoped getByTitle becomes ambiguous.
    */
   async toggleStatus(label: string): Promise<void> {
+    await this.openFilters();
     const option = this.page.locator(`.ant-select-item-option[title="${label}"]`);
     if (!(await option.isVisible().catch(() => false))) {
       await this.statusFilter.click();
     }
     await option.click();
+    await this.closeFilters();
   }
 
   /**
@@ -131,14 +163,32 @@ export class AdminInventory {
    * unfiltered page 1 is not a reliable place to look for a fixture. Waiting for
    * a known row is the action's contract — the filter has been applied when the
    * table has re-rendered under it.
+   *
+   * Typing the name before clicking it is not for realism: the tree is
+   * virtualized, so against a database holding hundreds of categories the wanted
+   * row is never rendered until a search narrows to it.
    */
   async filterByCategory(categoryName: string, expectedRow: string): Promise<void> {
+    await this.openFilters();
     await this.categoryFilter.click();
     await this.categoryFilter.fill(categoryName);
-    await this.page.getByTitle(categoryName, { exact: true }).click();
+    await this.page.getByRole('treeitem', { name: categoryName }).click();
+    await this.closeFilters();
     await expect(this.row(expectedRow)).toBeVisible();
   }
 
+  /** Sets either end of the price range, leaving an omitted end untouched. */
+  async setPriceRange(minimum?: string, maximum?: string): Promise<void> {
+    await this.openFilters();
+    if (minimum !== undefined) await this.minimumPrice.fill(minimum);
+    if (maximum !== undefined) await this.maximumPrice.fill(maximum);
+    await this.closeFilters();
+  }
+
+  async clearFilters(): Promise<void> {
+    await this.clearFiltersButton.click();
+  }
+
   async openItemForm(): Promise<void> {
     await this.addItemButton.click();
   }