fix: search params (#793)

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/(overview)/page.tsx

···
 import * as React from "react";
 import Link from "next/link";
+import { notFound } from "next/navigation";
+import { z } from "zod";
 
 import { OSTinybird } from "@openstatus/tinybird";
 import { Button } from "@openstatus/ui";
···
 
 export const dynamic = "force-dynamic";
 
-export default async function MonitorPage() {
+/**
+ * allowed URL search params
+ */
+const searchParamsSchema = z.object({
+  tags: z
+    .string()
+    .transform((v) => v?.split(","))
+    .optional(),
+});
+
+export default async function MonitorPage({
+  searchParams,
+}: {
+  searchParams: { [key: string]: string | string[] | undefined };
+}) {
+  const search = searchParamsSchema.safeParse(searchParams);
   const monitors = await api.monitor.getMonitorsByWorkspace.query();
   const isLimitReached = await api.monitor.isMonitorLimitReached.query();
+
+  if (!search.success) return notFound();
 
   if (monitors?.length === 0)
     return (
···
 
   return (
     <>
-      <DataTable columns={columns} data={monitorsWithData} tags={tags} />
+      <DataTable
+        defaultColumnFilters={[{ id: "tags", value: search.data.tags }].filter(
+          (v) => v.value !== undefined,
+        )}
+        columns={columns}
+        data={monitorsWithData}
+        tags={tags}
+      />
       {isLimitReached ? <Limit /> : null}
       {/* <RefreshWidget defaultValue={lastCronTimestamp} /> */}
     </>

apps/web/src/components/data-table/monitor/data-table.tsx

···
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
   tags?: MonitorTag[];
+  defaultColumnFilters?: ColumnFiltersState;
 }
 
 export function DataTable<TData, TValue>({
   columns,
   data,
   tags,
+  defaultColumnFilters = [],
 }: DataTableProps<TData, TValue>) {
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    [],
-  );
+  const [columnFilters, setColumnFilters] =
+    React.useState<ColumnFiltersState>(defaultColumnFilters);
   const [columnVisibility, setColumnVisibility] =
     React.useState<VisibilityState>({
       public: false, // default is true