Dylan/s3en 2418 add clear all button to filter dialog v2

app/api/traces/route.ts

@@ -10,7 +10,8 @@ export async function POST(req: NextRequest) {
   try {
     const session = await getServerSession(authOptions);
     const apiKey = req.headers.get("x-api-key");
-    const { page, pageSize, projectId, filters } = await req.json();
+    const { page, pageSize, projectId, filters, filterOperation } =
+      await req.json();
     if (!session || !session.user) {
       if (apiKey) {
         const project = await prisma.project.findFirst({
@@ -42,7 +43,8 @@ export async function POST(req: NextRequest) {
       projectId,
       page,
       pageSize,
-      filters
+      filters,
+      filterOperation
     );
 
     return NextResponse.json(

components/project/traces/trace-filter.tsx

@@ -22,6 +22,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import ClearIcon from "@mui/icons-material/Clear";
 
 import { Check, ChevronsUpDown } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -184,6 +185,21 @@ export default function FilterDialog({
           <Button variant={"outline"} onClick={onClose}>
             Cancel
           </Button>
+          {(selectedFilters.length > 0 ||
+            advancedFilters.length > 0 ||
+            selectedUserId !== "") && (
+            <Button
+              variant={"destructive"}
+              onClick={() => {
+                setSelectedFilters([]);
+                setAdvancedFilters([]);
+                setSelectedUserId("");
+              }}
+            >
+              <ClearIcon className="h-4 w-4" />
+              Clear Filters
+            </Button>
+          )}
           <Button variant={"default"} onClick={applyFilters} color="primary">
             Apply Filters
           </Button>

components/project/traces/traces.tsx

@@ -29,7 +29,8 @@ export default function Traces({ email }: { email: string }) {
   const [enableFetch, setEnableFetch] = useState(false);
   const [utcTime, setUtcTime] = useState(true);
   const [isFilterDialogOpen, setIsFilterDialogOpen] = useState(false);
-  const [userId, setUserId] = useState("");
+  const [clearFilters, setClearFilters] = useState(false);
+  const [clearFiltersKey, setClearFiltersKey] = useState(0);
 
   useEffect(() => {
     setShowLoader(true);
@@ -58,6 +59,7 @@ export default function Traces({ email }: { email: string }) {
         pageSize: PAGE_SIZE,
         projectId: project_id,
         filters: filters,
+        filterOperation: "AND",
       };
 
       const response = await fetch(apiEndpoint, {

components/shared/user-combobox.tsx

@@ -16,7 +16,7 @@ import {
 
 import { Check, ChevronsUpDown } from "lucide-react";
 import { useParams } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { useQuery } from "react-query";
 import { toast } from "sonner";
@@ -34,6 +34,8 @@ export function UserCombobox({
   const [searchQuery, setSearchQuery] = useState("");
   const [userIds, setUserIds] = useState<string[]>([]);
   const [showLoader, setShowLoader] = useState(false);
+  const [internalSelectedUser, setInternalSelectedUser] =
+    useState(selectedUser);
 
   const handleSelectUser = (currentValue: string) => {
     const newUserId = currentValue === selectedUserId ? "" : currentValue;
@@ -43,6 +45,11 @@ export function UserCombobox({
     setOpen(false);
   };
 
+  useEffect(() => {
+    setSelectedUserIdState(selectedUser || "");
+    setInternalSelectedUser(selectedUser || "");
+  }, [selectedUser]);
+
   const fetchUserIds = useQuery({
     queryKey: ["fetch-user-ids-query", project_id],
     queryFn: async () => {