Gracefully handle malformed search params

PrefectHQ · Nov 21, 2024 · ec9f7fb · ec9f7fb
1 parent 414a818
commit ec9f7fb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 17 deletions.
diff --git a/ui-v2/src/components/variables/data-table/data-table.tsx b/ui-v2/src/components/variables/data-table/data-table.tsx
@@ -114,10 +114,8 @@ export const VariablesDataTable = ({
 		?.value as string[];
 	const handleNameSearchChange = useCallback(
 		(value?: string) => {
-			onColumnFiltersChange([
-				...columnFilters.filter((filter) => filter.id !== "name"),
-				{ id: "name", value },
-			]);
+			const filters = columnFilters.filter((filter) => filter.id !== "name");
+			onColumnFiltersChange(value ? [...filters, { id: "name", value }] : filters);
 		},
 		[onColumnFiltersChange, columnFilters],
 	);
@@ -126,11 +124,10 @@ export const VariablesDataTable = ({
 		((tags: string[]) => void) = useCallback(
 		(e: string[] | React.ChangeEvent<HTMLInputElement>) => {
 			const tags = Array.isArray(e) ? e : e.target.value;
-
-			onColumnFiltersChange([
-				...columnFilters.filter((filter) => filter.id !== "tags"),
-				{ id: "tags", value: tags },
-			]);
+			const filters = columnFilters.filter((filter) => filter.id !== "tags");
+			onColumnFiltersChange(
+				tags.length ? [...filters, { id: "tags", value: tags }] : filters,
+			);
 		},
 		[onColumnFiltersChange, columnFilters],
 	);

diff --git a/ui-v2/src/routes/variables.tsx b/ui-v2/src/routes/variables.tsx
@@ -25,14 +25,15 @@ import { useVariables } from "@/hooks/variables";
  * @property {string[]} tags - Optional array of tags to filter variables by.
  */
 const searchParams = z.object({
-	offset: z.number().int().nonnegative().optional().default(0),
-	limit: z.number().int().positive().optional().default(10),
+	offset: z.number().int().nonnegative().optional().default(0).catch(0),
+	limit: z.number().int().positive().optional().default(10).catch(10),
 	sort: z
 		.enum(["CREATED_DESC", "UPDATED_DESC", "NAME_ASC", "NAME_DESC"])
 		.optional()
-		.default("CREATED_DESC"),
-	name: z.string().optional(),
-	tags: z.array(z.string()).optional(),
+		.default("CREATED_DESC")
+		.catch("CREATED_DESC"),
+	name: z.string().optional().catch(undefined),
+	tags: z.array(z.string()).optional().catch(undefined),
 });
 
 export function VariablesPage() {
@@ -41,6 +42,7 @@ export function VariablesPage() {
 	const { variables, filteredCount, totalCount } = useVariables(
 		buildFilterBody(search),
 	);
+	const hasVariables = (totalCount ?? 0) > 0;
 	const [pagination, onPaginationChange] = usePagination();
 	const [columnFilters, onColumnFiltersChange] = useVariableColumnFilters();
 	const [sorting, onSortingChange] = useVariableSorting();
@@ -49,7 +51,7 @@ export function VariablesPage() {
 	return (
 		<VariablesLayout onAddVariableClick={onVariableAddOrEdit}>
 			<VariableDialog {...variableDialogState} />
-			{(totalCount ?? 0) > 0 ? (
+			{hasVariables ? (
 				<VariablesDataTable
 					variables={variables ?? []}
 					currentVariableCount={filteredCount ?? 0}
@@ -163,9 +165,9 @@ const useVariableColumnFilters = () => {
 				to: ".",
 				search: (prev) => {
 					const name = newColumnFilters.find((filter) => filter.id === "name")
-						?.value as string;
+						?.value as string | undefined;
 					const tags = newColumnFilters.find((filter) => filter.id === "tags")
-						?.value as string[];
+						?.value as string[] | undefined;
 					return {
 						...prev,
 						offset: 0,