add clear filter button

Author: brendan-kellam

packages/web/src/app/(app)/repos/components/reposTable.test.tsx

@@ -133,6 +133,19 @@ describe("ReposTable", () => {
         );
     });
 
+    test.each(["search=first", "status=warning"])(
+        "shows clear filters in the toolbar for %s",
+        (searchParams) => {
+            navigation.searchParams = searchParams;
+
+            renderTable([repos[1]]);
+
+            expect(
+                screen.getByRole("button", { name: "Clear filters" }),
+            ).toBeTruthy();
+        },
+    );
+
     test("does not offer to clear filters in the unfiltered empty state", () => {
         renderTable([]);
 

packages/web/src/app/(app)/repos/components/reposTable.tsx

@@ -27,7 +27,7 @@ import {
     getCoreRowModel,
     useReactTable,
 } from "@tanstack/react-table";
-import { ArrowDown, ArrowUp, Check, Loader2, Search } from "lucide-react";
+import { ArrowDown, ArrowUp, Check, CircleX, Loader2, Search } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
@@ -842,6 +842,17 @@ export const ReposTable = ({
                         <SelectItem value="warning">Warning</SelectItem>
                     </SelectContent>
                 </Select>
+                {hasActiveFilters && (
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        className="h-9"
+                        onClick={clearFilters}
+                    >
+                        <CircleX className="h-4 w-4" />
+                        Clear filters
+                    </Button>
+                )}
             </div>
             <div className="rounded-md border">
                 <Table className="table-fixed">
@@ -897,18 +908,7 @@ export const ReposTable = ({
                                     colSpan={columns.length}
                                     className="h-28 text-center text-sm text-muted-foreground"
                                 >
-                                    <div className="flex flex-col items-center gap-3">
-                                        <p>{emptyMessage}</p>
-                                        {hasActiveFilters && (
-                                            <Button
-                                                variant="outline"
-                                                size="sm"
-                                                onClick={clearFilters}
-                                            >
-                                                Clear filters
-                                            </Button>
-                                        )}
-                                    </div>
+                                    <p>{emptyMessage}</p>
                                 </TableCell>
                             </TableRow>
                         )}

packages/web/src/app/(app)/settings/connections/components/connectionsTable.test.tsx

@@ -151,6 +151,19 @@ describe("ConnectionsTable", () => {
         );
     });
 
+    test.each(["search=github", "status=warning"])(
+        "shows clear filters in the toolbar for %s",
+        (searchParams) => {
+            navigation.searchParams = searchParams;
+
+            renderTable({ data: [connections[0]] });
+
+            expect(
+                screen.getByRole("button", { name: "Clear filters" }),
+            ).toBeTruthy();
+        },
+    );
+
     test("uses URL-driven server pagination", () => {
         renderTable({ totalCount: 29 });
 

packages/web/src/app/(app)/settings/connections/components/connectionsTable.tsx

@@ -33,7 +33,7 @@ import {
     getCoreRowModel,
     useReactTable,
 } from "@tanstack/react-table";
-import { ArrowDown, ArrowUp, Loader2, Search } from "lucide-react";
+import { ArrowDown, ArrowUp, CircleX, Loader2, Search } from "lucide-react";
 import Image from "next/image";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import {
@@ -594,6 +594,17 @@ export const ConnectionsTable = ({
                         <SelectItem value="warning">Warning</SelectItem>
                     </SelectContent>
                 </Select>
+                {hasActiveFilters && (
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        className="h-9"
+                        onClick={clearFilters}
+                    >
+                        <CircleX className="h-4 w-4" />
+                        Clear filters
+                    </Button>
+                )}
             </div>
             <div className="rounded-md border">
                 <Table className="table-fixed">
@@ -649,18 +660,7 @@ export const ConnectionsTable = ({
                                     colSpan={columns.length}
                                     className="h-28 text-center text-sm text-muted-foreground"
                                 >
-                                    <div className="flex flex-col items-center gap-3">
-                                        <p>{emptyMessage}</p>
-                                        {hasActiveFilters && (
-                                            <Button
-                                                variant="outline"
-                                                size="sm"
-                                                onClick={clearFilters}
-                                            >
-                                                Clear filters
-                                            </Button>
-                                        )}
-                                    </div>
+                                    <p>{emptyMessage}</p>
                                 </TableCell>
                             </TableRow>
                         )}