fix: add apply/clear for created filter, fix created filter pill (#1808)

* fix: add apply/clear for created filter, fix created filter pill * undefined case * fix
obot-platform · Feb 21, 2025 · 3564cd7 · 3564cd7
1 parent 130c4fa
commit 3564cd7
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 25 deletions.
diff --git a/ui/admin/app/components/composed/DataTable.tsx b/ui/admin/app/components/composed/DataTable.tsx
@@ -208,7 +208,7 @@ export const DataTableTimeFilter = ({
 }: {
 	dateRange: DateRange;
 	field: string;
-	onSelect: (range: DateRange) => void;
+	onSelect: (range?: DateRange) => void;
 }) => {
 	const [range, setRange] = useState<DateRange | undefined>(dateRange);
 	return (
@@ -231,12 +231,21 @@ export const DataTableTimeFilter = ({
 					selected={range}
 					onSelect={(range) => {
 						setRange(range);
-						if (range?.from && range?.to) {
-							onSelect(range);
-						}
 					}}
 					initialFocus
 				/>
+				<div className="flex justify-between gap-2">
+					<Button
+						variant="secondary"
+						onClick={() => {
+							setRange(undefined);
+							onSelect(undefined);
+						}}
+					>
+						Clear
+					</Button>
+					<Button onClick={() => onSelect(range)}>Apply</Button>
+				</div>
 			</PopoverContent>
 		</Popover>
 	);

diff --git a/ui/admin/app/components/composed/Filters.tsx b/ui/admin/app/components/composed/Filters.tsx
@@ -14,7 +14,8 @@ type QueryParams = {
 	agentId?: string;
 	userId?: string;
 	taskId?: string;
-	created?: string;
+	createdStart?: string;
+	createdEnd?: string;
 };
 
 export function Filters({
@@ -39,9 +40,10 @@ export function Filters({
 			) as QueryParams) ?? {};
 		const { ...filters } = query; // TODO: from
 
-		const updateFilters = (param: keyof QueryParams) => {
+		const deleteFilters = (...params: (keyof QueryParams)[]) => {
 			const newQuery = { ...query };
-			delete newQuery[param];
+			params.forEach((param) => delete newQuery[param]);
+
 			// Filter out null/undefined values and ensure all values are strings
 			const cleanQuery = Object.fromEntries(
 				Object.entries(newQuery)
@@ -58,30 +60,30 @@ export function Filters({
 					key: "agentId",
 					label: "Agent",
 					value: agentMap.get(filters.agentId)?.name ?? filters.agentId,
-					onRemove: () => updateFilters("agentId"),
+					onRemove: () => deleteFilters("agentId"),
 				},
 			"userId" in filters &&
 				filters.userId &&
 				userMap && {
 					key: "userId",
 					label: "User",
 					value: userMap.get(filters.userId)?.email ?? filters.userId,
-					onRemove: () => updateFilters("userId"),
+					onRemove: () => deleteFilters("userId"),
 				},
 			"taskId" in filters &&
 				filters.taskId &&
 				workflowMap && {
 					key: "taskId",
 					label: "Task",
 					value: workflowMap?.get(filters.taskId)?.name ?? filters.taskId,
-					onRemove: () => updateFilters("taskId"),
+					onRemove: () => deleteFilters("taskId"),
 				},
-			"created" in filters &&
-				filters.created && {
-					key: "created",
+			"createdStart" in filters &&
+				filters.createdStart && {
+					key: "createdStart",
 					label: "Created",
-					value: new Date(filters.created).toLocaleDateString(),
-					onRemove: () => updateFilters("created"),
+					value: `${new Date(filters.createdStart).toLocaleDateString()} ${filters.createdEnd ? `- ${new Date(filters.createdEnd).toLocaleDateString()}` : ""}`,
+					onRemove: () => deleteFilters("createdStart", "createdEnd"),
 				},
 		].filter((x) => !!x);
 	}, [navigate, searchParams, agentMap, userMap, workflowMap, url]);

diff --git a/ui/admin/app/components/composed/typography.tsx b/ui/admin/app/components/composed/typography.tsx
@@ -1,7 +1,6 @@
 import { Slot } from "@radix-ui/react-slot";
 import { TooltipContentProps } from "@radix-ui/react-tooltip";
-import { useEffect, useState } from "react";
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { cn } from "~/lib/utils";
 

diff --git a/ui/admin/app/routes/_auth.chat-threads._index.tsx b/ui/admin/app/routes/_auth.chat-threads._index.tsx
@@ -217,8 +217,8 @@ export default function TaskRuns() {
 						onSelect={(range) => {
 							navigate.internal(
 								$path("/chat-threads", {
-									createdStart: range.from?.toDateString(),
-									createdEnd: range.to?.toDateString(),
+									createdStart: range?.from?.toDateString() ?? "",
+									createdEnd: range?.to?.toDateString() ?? "",
 									...(agentId && { agentId }),
 									...(userId && { userId }),
 								})

diff --git a/ui/admin/app/routes/_auth.task-runs._index.tsx b/ui/admin/app/routes/_auth.task-runs._index.tsx
@@ -254,8 +254,8 @@ export default function TaskRuns() {
 						onSelect={(range) => {
 							navigate.internal(
 								$path("/task-runs", {
-									createdStart: range.from?.toDateString(),
-									createdEnd: range.to?.toDateString(),
+									createdStart: range?.from?.toDateString() ?? "",
+									createdEnd: range?.to?.toDateString() ?? "",
 									...(taskId && { taskId }),
 									...(userId && { userId }),
 								})

diff --git a/ui/admin/app/routes/_auth.tasks._index.tsx b/ui/admin/app/routes/_auth.tasks._index.tsx
@@ -295,10 +295,8 @@ export default function Tasks() {
 						onSelect={(range) => {
 							navigate.internal(
 								$path("/tasks", {
-									...(range.from && {
-										createdStart: range.from.toDateString(),
-									}),
-									...(range.to && { createdEnd: range.to.toDateString() }),
+									createdStart: range?.from?.toDateString() ?? "",
+									createdEnd: range?.to?.toDateString() ?? "",
 									...(taskId && { taskId }),
 									...(agentId && { agentId }),
 									...(userId && { userId }),