Merge remote-tracking branch 'origin/feature/columns-slideover' into feature/filter-slideover

e2e/invoice-columns.spec.ts

@@ -27,4 +27,28 @@ test.describe("Invoice Processing columns drawer (AP-45)", () => {
       page.getByTestId("grid-pending").locator('.MuiDataGrid-columnHeader[data-field="tagging"]'),
     ).toBeVisible();
   });
+
+  test("locked Vendor column stays visible and Reset clears the hidden search", async ({
+    page,
+  }) => {
+    await page.goto("/");
+    await page.getByTestId("columns-toggle").click();
+    const drawer = page.getByTestId("columns-drawer");
+    const vendorBox = drawer.getByTestId("columns-visible-vendor").locator('input[type="checkbox"]');
+    await expect(vendorBox).toBeDisabled();
+    await vendorBox.evaluate((el: HTMLInputElement) => {
+      el.disabled = false;
+      el.click();
+    });
+    await expect(
+      page.getByTestId("grid-pending").locator('.MuiDataGrid-columnHeader[data-field="vendor"]'),
+    ).toBeVisible();
+
+    const search = drawer.getByTestId("columns-hidden-search");
+    await search.fill("no-such-column");
+    await drawer.getByTestId("columns-selector-reset-button").evaluate((el: HTMLElement) => {
+      el.click();
+    });
+    await expect(search).toHaveValue("");
+  });
 });

e2e/invoice-filters.spec.ts

@@ -8,6 +8,7 @@ test.describe("Invoice Processing filters (AP-43)", () => {
     const before = await grid.locator(".MuiDataGrid-row").count();
     expect(before).toBeGreaterThan(0);
 
+    await expect(page.getByTestId("action-filter").getByPlaceholder("Search")).toBeVisible();
     await page.getByTestId("action-filter").click();
     await page.getByRole("option", { name: "Approve invoice" }).click();
     await expect(page.getByTestId("filter-toggle").locator(".MuiBadge-badge")).toHaveText("1");
@@ -15,5 +16,6 @@ test.describe("Invoice Processing filters (AP-43)", () => {
     await page.getByTestId("vendor-filter").fill("Harbor");
     await expect(page.getByTestId("filter-toggle").locator(".MuiBadge-badge")).toHaveText("2");
     await expect(grid.locator(".MuiDataGrid-row")).toHaveCount(1);
+    await expect(page.getByTestId("attention-banner")).toContainText("1 invoices require approval");
   });
 });

src/dashboard/ColumnsDrawer.tsx

@@ -143,7 +143,15 @@ export function ColumnsDrawer({
           Columns
         </Typography>
         <Stack direction="row" spacing={1}>
-          <Button size="small" data-testid="columns-selector-reset-button" onClick={onReset}>
+          <Button
+            size="small"
+            data-testid="columns-selector-reset-button"
+            onClick={() => {
+              setHiddenQuery("");
+              setViewAllHidden(false);
+              onReset();
+            }}
+          >
             Reset
           </Button>
           <IconButton aria-label="Close columns" onClick={onClose} size="small">

src/dashboard/DashboardGrids.tsx

@@ -6,7 +6,7 @@ import { FilterDrawer } from "@/dashboard/FilterDrawer";
 import { InvoiceFilterToolbar } from "@/dashboard/InvoiceFilterToolbar";
 import { CreatePayRunButton } from "@/dashboard/CreatePayRunButton";
 import { InvoiceDataGrid } from "@/dashboard/InvoiceDataGrid";
-import { columnsFromCatalogKeys, readyToPayColumns } from "@/dashboard/columns";
+import { columnsFromCatalogKeys } from "@/dashboard/columns";
 import {
   loadColumnPrefs,
   resetColumnPrefs,
@@ -128,7 +128,7 @@ export function DashboardGrids() {
 
   const selectedCount = countSelectedRows(
     selection,
-    filteredApproved.map((invoice) => invoice.id),
+    approvedRows.map((invoice) => invoice.id),
   );
 
   const processRowUpdate = async (newRow: MockInvoice, oldRow: MockInvoice) => {
@@ -233,7 +233,7 @@ export function DashboardGrids() {
       </Box>
 
       <Box sx={{ bgcolor: "background.paper", p: 2 }}>
-        {attentionRows.length > 0 && tab === "attention" ? (
+        {filteredAttention.length > 0 && tab === "attention" ? (
           <Typography
             component="button"
             type="button"
@@ -250,7 +250,7 @@ export function DashboardGrids() {
               textAlign: "left",
             }}
           >
-            {attentionRows.length} invoices require approval. Show invoices ready to approve.
+            {filteredAttention.length} invoices require approval. Show invoices ready to approve.
           </Typography>
         ) : null}
 
@@ -288,7 +288,7 @@ export function DashboardGrids() {
           <InvoiceDataGrid
             data-testid="grid-ready"
             rows={filteredApproved}
-            columns={readyToPayColumns}
+            columns={catalogColumns}
             checkboxSelection
             rowSelectionModel={selection}
             onRowSelectionModelChange={(model) => setSelection(model)}

src/dashboard/InvoiceFilterToolbar.tsx

@@ -52,7 +52,7 @@ export function InvoiceFilterToolbar({
             renderInput={(params) => (
               <TextField
                 {...params}
-                placeholder="Action"
+                placeholder="Search"
                 label={undefined}
                 InputLabelProps={{ shrink: false }}
               />