Merge pull request #3130 from Fredkiss3/feat/filter-on-label-column

feat: add label filter column to sites, resource & client tables

messages/en-US.json

@@ -1164,6 +1164,8 @@
     "siteLabelsDescription": "Manage labels associated with this site.",
     "labelsNotFound": "Labels not found",
     "labelSearch": "Search labels",
+    "accessLabelFilterCount": "{count, plural, one {# label} other {# labels}}",
+    "accessLabelFilterClear": "Clear label filters",
     "selectColor": "Select color",
     "createNewLabel": "Create new org label \"{label}\"",
     "inviteInvalidDescription": "The invite link is invalid.",

server/routers/client/listClients.ts

@@ -118,7 +118,27 @@ const listClientsSchema = z.object({
                 description:
                     "Filter by client status. Can be a comma-separated list of values. Defaults to 'active'."
             })
-    )
+    ),
+    labels: z
+        .preprocess((val) => {
+            if (val === undefined || val === null || val === "") {
+                return undefined;
+            }
+            if (Array.isArray(val)) {
+                return val;
+            }
+            // the array is returned as this
+            if (typeof val === "string") {
+                return val.split(",");
+            }
+            return undefined;
+        }, z.array(z.string()))
+        .optional()
+        .catch([])
+        .openapi({
+            type: "array",
+            description: "Filter by client labels"
+        })
 });
 
 function queryClientsBase() {
@@ -210,8 +230,16 @@ export async function listClients(
                 )
             );
         }
-        const { page, pageSize, online, query, status, sort_by, order } =
+        const {
-            parsedQuery.data;
+            page,
+            pageSize,
+            online,
+            query,
+            status,
+            sort_by,
+            order,
+            labels: labelFilter
+        } = parsedQuery.data;
 
         const parsedParams = listClientsParamsSchema.safeParse(req.params);
         if (!parsedParams.success) {
@@ -298,6 +326,22 @@ export async function listClients(
             conditions.push(or(...filterAggregates));
         }
 
+        if (isLabelFeatureEnabled && labelFilter && labelFilter.length > 0) {
+            conditions.push(
+                inArray(
+                    clients.clientId,
+                    db
+                        .select({ id: clientLabels.clientId })
+                        .from(clientLabels)
+                        .innerJoin(
+                            labels,
+                            eq(labels.labelId, clientLabels.labelId)
+                        )
+                        .where(inArray(labels.name, labelFilter))
+                )
+            );
+        }
+
         if (query) {
             const q = "%" + query.toLowerCase() + "%";
             const queryList = [

server/routers/resource/listResources.ts

@@ -71,7 +71,7 @@ const listResourcesSchema = z.object({
         }),
     query: z.string().optional(),
     sort_by: z
-        .enum(["name"])
+        .literal("name")
         .optional()
         .catch(undefined)
         .openapi({
@@ -123,6 +123,26 @@ const listResourcesSchema = z.object({
         type: "integer",
         description:
             "When set, only resources that have at least one target on this site are returned"
+    }),
+    labels: z
+        .preprocess((val) => {
+            if (val === undefined || val === null || val === "") {
+                return undefined;
+            }
+            if (Array.isArray(val)) {
+                return val;
+            }
+            // the array is returned as this
+            if (typeof val === "string") {
+                return val.split(",");
+            }
+            return undefined;
+        }, z.array(z.string()))
+        .optional()
+        .catch([])
+        .openapi({
+            type: "array",
+            description: "Filter by resource labels"
         })
 });
 
@@ -261,7 +281,8 @@ export async function listResources(
             healthStatus,
             sort_by,
             order,
-            siteId
+            siteId,
+            labels: labelFilter
         } = parsedQuery.data;
 
         const parsedParams = listResourcesParamsSchema.safeParse(req.params);
@@ -379,6 +400,23 @@ export async function listResources(
                 .where(and(eq(sites.orgId, orgId), eq(sites.siteId, siteId)));
             conditions.push(inArray(resources.resourceId, resourcesWithSite));
         }
+
+        if (isLabelFeatureEnabled && labelFilter && labelFilter.length > 0) {
+            conditions.push(
+                inArray(
+                    resources.resourceId,
+                    db
+                        .select({ id: resourceLabels.resourceId })
+                        .from(resourceLabels)
+                        .innerJoin(
+                            labels,
+                            eq(labels.labelId, resourceLabels.labelId)
+                        )
+                        .where(inArray(labels.name, labelFilter))
+                )
+            );
+        }
+
         if (query) {
             const q = "%" + query.toLowerCase() + "%";
             const queryList = [

server/routers/site/listSites.ts

@@ -187,6 +187,26 @@ const listSitesSchema = z.object({
             type: "string",
             enum: ["pending", "approved"],
             description: "Filter by site status"
+        }),
+    labels: z
+        .preprocess((val) => {
+            if (val === undefined || val === null || val === "") {
+                return undefined;
+            }
+            if (Array.isArray(val)) {
+                return val;
+            }
+            // the array is returned as this
+            if (typeof val === "string") {
+                return val.split(",");
+            }
+            return undefined;
+        }, z.array(z.string()))
+        .optional()
+        .catch([])
+        .openapi({
+            type: "array",
+            description: "Filter by site labels"
         })
 });
 
@@ -319,8 +339,16 @@ export async function listSites(
             tierMatrix.labels
         );
 
-        const { pageSize, page, query, sort_by, order, online, status } =
+        const {
-            parsedQuery.data;
+            pageSize,
+            page,
+            query,
+            sort_by,
+            order,
+            online,
+            status,
+            labels: labelFilter
+        } = parsedQuery.data;
 
         const accessibleSiteIds = accessibleSites.map((site) => site.siteId);
 
@@ -337,6 +365,23 @@ export async function listSites(
         if (typeof status !== "undefined") {
             conditions.push(eq(sites.status, status));
         }
+
+        if (isLabelFeatureEnabled && labelFilter && labelFilter.length > 0) {
+            conditions.push(
+                inArray(
+                    sites.siteId,
+                    db
+                        .select({ id: siteLabels.siteId })
+                        .from(siteLabels)
+                        .innerJoin(
+                            labels,
+                            eq(labels.labelId, siteLabels.labelId)
+                        )
+                        .where(inArray(labels.name, labelFilter))
+                )
+            );
+        }
+
         if (query) {
             const q = "%" + query.toLowerCase() + "%";
             const queryList = [
@@ -366,7 +411,9 @@ export async function listSites(
 
         // we need to add `as` so that drizzle filters the result as a subquery
         const countQuery = db.$count(
-            querySitesBase().where(and(...conditions)).as("filtered_sites")
+            querySitesBase()
+                .where(and(...conditions))
+                .as("filtered_sites")
         );
 
         const siteListQuery = baseQuery

server/routers/siteResource/listAllSiteResourcesByOrg.ts

@@ -85,6 +85,26 @@ const listAllSiteResourcesByOrgQuerySchema = z.object({
         type: "integer",
         description:
             "When set, only site resources associated with this site (via network) are returned"
+    }),
+    labels: z
+        .preprocess((val) => {
+            if (val === undefined || val === null || val === "") {
+                return undefined;
+            }
+            if (Array.isArray(val)) {
+                return val;
+            }
+            // the array is returned as this
+            if (typeof val === "string") {
+                return val.split(",");
+            }
+            return undefined;
+        }, z.array(z.string()))
+        .optional()
+        .catch([])
+        .openapi({
+            type: "array",
+            description: "Filter by resource labels"
         })
 });
 
@@ -239,8 +259,16 @@ export async function listAllSiteResourcesByOrg(
         }
 
         const { orgId } = parsedParams.data;
-        const { page, pageSize, query, mode, sort_by, order, siteId } =
+        const {
-            parsedQuery.data;
+            page,
+            pageSize,
+            query,
+            mode,
+            sort_by,
+            order,
+            siteId,
+            labels: labelFilter
+        } = parsedQuery.data;
 
         const isLabelFeatureEnabled = await isLicensedOrSubscribed(
             orgId,
@@ -276,6 +304,22 @@ export async function listAllSiteResourcesByOrg(
             conditions.push(eq(siteResources.mode, mode));
         }
 
+        if (isLabelFeatureEnabled && labelFilter && labelFilter.length > 0) {
+            conditions.push(
+                inArray(
+                    siteResources.siteResourceId,
+                    db
+                        .select({ id: siteResourceLabels.siteResourceId })
+                        .from(siteResourceLabels)
+                        .innerJoin(
+                            labels,
+                            eq(labels.labelId, siteResourceLabels.labelId)
+                        )
+                        .where(inArray(labels.name, labelFilter))
+                )
+            );
+        }
+
         if (query) {
             const q = "%" + query.toLowerCase() + "%";
             const queryList = [

src/components/ClientResourcesTable.tsx

@@ -64,6 +64,7 @@ import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import { LabelBadge } from "./label-badge";
 import { LabelsSelector, type SelectedLabel } from "./labels-selector";
+import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
 
 export type InternalResourceSiteRow = ResourceSiteRow;
 
@@ -220,59 +221,6 @@ export default function ClientResourcesTable({
         }
     };
 
-    function SiteCell({ resourceRow }: { resourceRow: InternalResourceRow }) {
-        const { siteNames, siteNiceIds, orgId } = resourceRow;
-
-        if (!siteNames || siteNames.length === 0) {
-            return (
-                <span className="text-muted-foreground">
-                    {t("noSites", { defaultValue: "No sites" })}
-                </span>
-            );
-        }
-
-        if (siteNames.length === 1) {
-            return (
-                <Link href={`/${orgId}/settings/sites/${siteNiceIds[0]}`}>
-                    <Button variant="outline">
-                        {siteNames[0]}
-                        <ArrowUpRight className="ml-2 h-4 w-4" />
-                    </Button>
-                </Link>
-            );
-        }
-
-        return (
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button
-                        variant="outline"
-                        size="sm"
-                        className="flex items-center gap-2"
-                    >
-                        <span>
-                            {siteNames.length} {t("sites")}
-                        </span>
-                        <ChevronDown className="h-3 w-3" />
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start">
-                    {siteNames.map((siteName, idx) => (
-                        <DropdownMenuItem key={siteNiceIds[idx]} asChild>
-                            <Link
-                                href={`/${orgId}/settings/sites/${siteNiceIds[idx]}`}
-                                className="flex items-center gap-2 cursor-pointer"
-                            >
-                                {siteName}
-                                <ArrowUpRight className="h-3 w-3" />
-                            </Link>
-                        </DropdownMenuItem>
-                    ))}
-                </DropdownMenuContent>
-            </DropdownMenu>
-        );
-    }
-
     const internalColumns = useMemo<
         ExtendedColumnDef<InternalResourceRow>[]
     >(() => {
@@ -585,9 +533,15 @@ export default function ClientResourcesTable({
                 id: "labels",
                 accessorKey: "labels",
                 header: () => (
-                    <span className="p-3 text-end w-full inline-block">
+                    <LabelColumnFilterButton
-                        {t("labels")}
+                        orgId={orgId}
-                    </span>
+                        selectedValues={searchParams.getAll("labels")}
+                        onSelectedValuesChange={(value) =>
+                            handleFilterChange("labels", value)
+                        }
+                        label={t("labels")}
+                        className="p-3"
+                    />
                 ),
                 cell: ({ row }: { row: { original: InternalResourceRow } }) => (
                     <ClientResourceLabelCell
@@ -603,13 +557,15 @@ export default function ClientResourcesTable({
 
     function handleFilterChange(
         column: string,
-        value: string | undefined | null
+        value: string | undefined | null | string[]
     ) {
         searchParams.delete(column);
         searchParams.delete("page");
 
-        if (value) {
+        if (typeof value === "string") {
             searchParams.set(column, value);
+        } else if (value) {
+            value.forEach((val) => searchParams.append(column, val));
         }
         filter({
             searchParams
@@ -682,7 +638,7 @@ export default function ClientResourcesTable({
                 rows={internalResources}
                 tableId="internal-resources"
                 searchPlaceholder={t("resourcesSearch")}
-                searchQuery={searchParams.get("query") ?? ""}
+                searchQuery={searchParams.get("query")?.toString()}
                 onAdd={() => setIsCreateDialogOpen(true)}
                 addButtonText={t("resourceAdd")}
                 onSearch={handleSearchChange}

src/components/CreateBlueprintForm.tsx

@@ -109,7 +109,7 @@ export default function CreateBlueprintForm({
         if (res && res.status === 201) {
             const createdBlueprint = res.data.data;
             toast({
-                variant: "warning",
+                variant: createdBlueprint.succeeded ? "default" : "warning",
                 title: createdBlueprint.succeeded ? "Success" : "Warning",
                 description: createdBlueprint.message
             });

src/components/HealthChecksTable.tsx

@@ -109,7 +109,6 @@ export default function HealthChecksTable({
     const [siteFilterOpen, setSiteFilterOpen] = useState(false);
     const [resourceFilterOpen, setResourceFilterOpen] = useState(false);
 
-    const pageSize = pagination.pageSize;
     const query = searchParams.get("query") ?? undefined;
 
     const siteIdQ = searchParams.get("siteId");
@@ -586,7 +585,9 @@ export default function HealthChecksTable({
                     <Switch
                         checked={r.hcEnabled}
                         disabled={
-                            !isPaid || togglingId === r.targetHealthCheckId || !!r.resourceId
+                            !isPaid ||
+                            togglingId === r.targetHealthCheckId ||
+                            !!r.resourceId
                         }
                         onCheckedChange={(v) => handleToggleEnabled(r, v)}
                     />

src/components/LabelColumnFilterButton.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { Button } from "@app/components/ui/button";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList
+} from "@app/components/ui/command";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
+import { cn } from "@app/lib/cn";
+import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
+import { CheckIcon, Funnel } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useMemo, useState } from "react";
+import { Badge } from "./ui/badge";
+import { orgQueries } from "@app/lib/queries";
+import { useQuery } from "@tanstack/react-query";
+import { useDebounce } from "use-debounce";
+
+type LabelColumnFilterButtonProps = {
+    selectedValues: string[];
+    onSelectedValuesChange: (values: string[]) => void;
+    className?: string;
+    label: string;
+    orgId: string;
+};
+
+export function LabelColumnFilterButton({
+    selectedValues,
+    onSelectedValuesChange,
+    className,
+    label,
+    orgId
+}: LabelColumnFilterButtonProps) {
+    const [open, setOpen] = useState(false);
+    const t = useTranslations();
+
+    const [labelSearchQuery, setlabelsSearchQuery] = useState("");
+    const [debouncedQuery] = useDebounce(labelSearchQuery, 150);
+
+    const { data: labels = [] } = useQuery(
+        orgQueries.labels({
+            orgId,
+            query: debouncedQuery,
+            perPage: 500
+        })
+    );
+
+    const selectedSet = useMemo(
+        () => new Set(selectedValues),
+        [selectedValues]
+    );
+
+    const summary = useMemo(() => {
+        if (selectedValues.length === 0) {
+            return null;
+        }
+        if (selectedValues.length === 1) {
+            const foundLabel = labels.find((o) => o.name === selectedValues[0]);
+
+            if (foundLabel) {
+                return (
+                    <div className="inline-flex items-center gap-1">
+                        <div
+                            className="size-3 rounded-full bg-(--color) flex-none"
+                            style={{
+                                // @ts-expect-error css color
+                                "--color": foundLabel.color
+                            }}
+                        />
+                        {foundLabel.name}
+                    </div>
+                );
+            }
+            return selectedValues[0];
+        }
+        return t("accessLabelFilterCount", {
+            count: selectedValues.length
+        });
+    }, [selectedValues, labels, t]);
+
+    function toggle(value: string) {
+        const next = selectedSet.has(value)
+            ? selectedValues.filter((v) => v !== value)
+            : [...selectedValues, value];
+        onSelectedValuesChange(next);
+    }
+
+    return (
+        <div className="flex items-center justify-end">
+            <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        role="combobox"
+                        aria-expanded={open}
+                        className={cn(
+                            "justify-between text-sm h-8 px-2",
+                            selectedValues.length === 0 &&
+                                "text-muted-foreground",
+                            className
+                        )}
+                    >
+                        <div className="flex items-center gap-2 min-w-0">
+                            <span className="shrink-0">{label}</span>
+                            <Funnel className="size-4 flex-none shrink-0" />
+                            {summary && (
+                                <Badge
+                                    className={cn(
+                                        "truncate max-w-40",
+                                        selectedValues.length === 1 &&
+                                            "pl-1.5 pr-2 h-auto"
+                                    )}
+                                    variant="secondary"
+                                >
+                                    {summary}
+                                </Badge>
+                            )}
+                        </div>
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent
+                    className={dataTableFilterPopoverContentClassName}
+                    align="start"
+                >
+                    <Command shouldFilter={false}>
+                        <CommandInput
+                            placeholder={t("labelSearch")}
+                            value={labelSearchQuery}
+                            onValueChange={setlabelsSearchQuery}
+                        />
+                        <CommandList>
+                            <CommandEmpty>{t("labelsNotFound")}</CommandEmpty>
+                            <CommandGroup>
+                                {selectedValues.length > 0 && (
+                                    <CommandItem
+                                        onSelect={() => {
+                                            onSelectedValuesChange([]);
+                                            setOpen(false);
+                                        }}
+                                        className="text-muted-foreground"
+                                    >
+                                        {t("accessLabelFilterClear")}
+                                    </CommandItem>
+                                )}
+                                {labels.map((label) => (
+                                    <CommandItem
+                                        key={label.name}
+                                        value={label.name}
+                                        onSelect={() => {
+                                            toggle(label.name);
+                                        }}
+                                        className="flex items-center gap-2"
+                                    >
+                                        <CheckIcon
+                                            className={cn(
+                                                "mr-2 h-4 w-4",
+                                                selectedSet.has(label.name)
+                                                    ? "opacity-100"
+                                                    : "opacity-0"
+                                            )}
+                                        />
+                                        <div
+                                            className="size-4 rounded-full bg-(--color) flex-none"
+                                            style={{
+                                                // @ts-expect-error css color
+                                                "--color": label.color
+                                            }}
+                                        />
+                                        {label.name}
+                                    </CommandItem>
+                                ))}
+                            </CommandGroup>
+                        </CommandList>
+                    </Command>
+                </PopoverContent>
+            </Popover>
+        </div>
+    );
+}

src/components/MachineClientsTable.tsx

@@ -2,7 +2,7 @@
 
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { Button } from "@app/components/ui/button";
-import { DataTable, ExtendedColumnDef } from "@app/components/ui/data-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -10,19 +10,21 @@ import {
     DropdownMenuTrigger
 } from "@app/components/ui/dropdown-menu";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useNavigationContext } from "@app/hooks/useNavigationContext";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { cn } from "@app/lib/cn";
+import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import type { PaginationState } from "@tanstack/react-table";
 import {
-    ArrowRight,
-    ArrowUpDown,
-    MoreHorizontal,
-    CircleSlash,
     ArrowDown01Icon,
+    ArrowRight,
     ArrowUp10Icon,
     ChevronsUpDownIcon,
+    CircleSlash,
+    MoreHorizontal,
     PlusIcon
 } from "lucide-react";
 import { useTranslations } from "next-intl";
@@ -35,21 +37,15 @@ import {
     useState,
     useTransition
 } from "react";
-import { LabelBadge } from "./label-badge";
-import { LabelsSelector, type SelectedLabel } from "./labels-selector";
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger
-} from "./ui/popover";
-import { Badge } from "./ui/badge";
-import type { PaginationState } from "@tanstack/react-table";
-import { ControlledDataTable } from "./ui/controlled-data-table";
-import { useNavigationContext } from "@app/hooks/useNavigationContext";
 import { useDebouncedCallback } from "use-debounce";
 import z from "zod";
-import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
 import { ColumnFilterButton } from "./ColumnFilterButton";
+import { LabelBadge } from "./label-badge";
+import { LabelsSelector, type SelectedLabel } from "./labels-selector";
+import { Badge } from "./ui/badge";
+import { ControlledDataTable } from "./ui/controlled-data-table";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
 
 export type ClientRow = {
     id: number;
@@ -415,9 +411,15 @@ export default function MachineClientsTable({
                 id: "labels",
                 accessorKey: "labels",
                 header: () => (
-                    <span className="p-3 text-end w-full inline-block">
+                    <LabelColumnFilterButton
-                        {t("labels")}
+                        orgId={orgId}
-                    </span>
+                        selectedValues={searchParams.getAll("labels")}
+                        onSelectedValuesChange={(value) =>
+                            handleFilterChange("labels", value)
+                        }
+                        label={t("labels")}
+                        className="p-3"
+                    />
                 ),
                 cell: ({ row }: { row: { original: ClientRow } }) => (
                     <MachineClientLabelCell
@@ -510,11 +512,6 @@ export default function MachineClientsTable({
         return baseColumns;
     }, [hasRowsWithoutUserId, isLabelFeatureEnabled, orgId, t, searchParams]);
 
-    const booleanSearchFilterSchema = z
-        .enum(["true", "false"])
-        .optional()
-        .catch(undefined);
-
     function handleFilterChange(
         column: string,
         value: string | null | undefined | string[]
@@ -585,6 +582,7 @@ export default function MachineClientsTable({
                 rows={machineClients}
                 tableId="machine-clients"
                 searchPlaceholder={t("machinesSearch")}
+                searchQuery={searchParams.get("query")?.toString()}
                 onAdd={() =>
                     startNavigation(() =>
                         router.push(`/${orgId}/settings/clients/machine/create`)
@@ -602,35 +600,6 @@ export default function MachineClientsTable({
                 columnVisibility={defaultMachineColumnVisibility}
                 stickyLeftColumn="name"
                 stickyRightColumn="actions"
-                filters={[
-                    {
-                        id: "status",
-                        label: t("status") || "Status",
-                        multiSelect: true,
-                        displayMode: "calculated",
-                        options: [
-                            {
-                                id: "active",
-                                label: t("active") || "Active",
-                                value: "active"
-                            },
-                            {
-                                id: "archived",
-                                label: t("archived") || "Archived",
-                                value: "archived"
-                            },
-                            {
-                                id: "blocked",
-                                label: t("blocked") || "Blocked",
-                                value: "blocked"
-                            }
-                        ],
-                        onValueChange(selectedValues: string[]) {
-                            handleFilterChange("status", selectedValues);
-                        },
-                        values: searchParams.getAll("status")
-                    }
-                ]}
             />
         </>
     );
@@ -641,7 +610,10 @@ type MachineClientLabelCellProps = {
     orgId: string;
 };
 
-function MachineClientLabelCell({ client, orgId }: MachineClientLabelCellProps) {
+function MachineClientLabelCell({
+    client,
+    orgId
+}: MachineClientLabelCellProps) {
     const t = useTranslations();
     const api = createApiClient(useEnvContext());
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -650,7 +622,10 @@ function MachineClientLabelCell({ client, orgId }: MachineClientLabelCellProps)
     const labels = client.labels ?? [];
     const [optimisticLabels, setOptimisticLabels] = useOptimistic(labels);
 
-    function toggleClientLabel(label: SelectedLabel, action: "attach" | "detach") {
+    function toggleClientLabel(
+        label: SelectedLabel,
+        action: "attach" | "detach"
+    ) {
         startTransition(async () => {
             try {
                 if (action === "attach") {

src/components/ProxyResourcesTable.tsx

@@ -72,6 +72,7 @@ import { ControlledDataTable } from "./ui/controlled-data-table";
 import UptimeMiniBar from "./UptimeMiniBar";
 import { LabelsSelector, type SelectedLabel } from "./labels-selector";
 import { LabelBadge } from "./label-badge";
+import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
 
 export type TargetHealth = {
     targetId: number;
@@ -640,9 +641,15 @@ export default function ProxyResourcesTable({
                 id: "labels",
                 accessorKey: "labels",
                 header: () => (
-                    <span className="p-3 text-end w-full inline-block">
+                    <LabelColumnFilterButton
-                        {t("labels")}
+                        orgId={orgId}
-                    </span>
+                        selectedValues={searchParams.getAll("labels")}
+                        onSelectedValuesChange={(value) =>
+                            handleFilterChange("labels", value)
+                        }
+                        label={t("labels")}
+                        className="p-3"
+                    />
                 ),
                 cell: ({ row }: { row: { original: ResourceRow } }) => (
                     <ResourceLabelCell resource={row.original} orgId={orgId} />
@@ -655,13 +662,15 @@ export default function ProxyResourcesTable({
 
     function handleFilterChange(
         column: string,
-        value: string | undefined | null
+        value: string | undefined | null | string[]
     ) {
         searchParams.delete(column);
         searchParams.delete("page");
 
-        if (value) {
+        if (typeof value === "string") {
             searchParams.set(column, value);
+        } else if (value) {
+            value.forEach((val) => searchParams.append(column, val));
         }
         filter({
             searchParams
@@ -721,6 +730,7 @@ export default function ProxyResourcesTable({
                 searchPlaceholder={t("resourcesSearch")}
                 pagination={pagination}
                 rowCount={rowCount}
+                searchQuery={searchParams.get("query")?.toString()}
                 onSearch={handleSearchChange}
                 onPaginationChange={handlePaginationChange}
                 onAdd={() =>

src/components/SitesTable.tsx

@@ -64,6 +64,7 @@ import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import { LabelBadge } from "./label-badge";
 import { LabelsSelector, type SelectedLabel } from "./labels-selector";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
 
 export type SiteRow = {
     id: number;
@@ -136,14 +137,16 @@ export default function SitesTable({
 
     function handleFilterChange(
         column: string,
-        value: string | undefined | null
+        value: string | undefined | null | string[]
     ) {
         const sp = new URLSearchParams(searchParams);
         sp.delete(column);
         sp.delete("page");
 
-        if (value) {
+        if (typeof value === "string") {
             sp.set(column, value);
+        } else if (value) {
+            value.forEach((val) => sp.append(column, val));
         }
         startTransition(() => router.push(`${pathname}?${sp.toString()}`));
     }
@@ -347,7 +350,9 @@ export default function SitesTable({
                                     <div className="flex items-center space-x-1">
                                         <span>Newt</span>
                                         {originalRow.newtVersion && (
-                                        <span>v{originalRow.newtVersion}</span>
+                                            <span>
+                                                v{originalRow.newtVersion}
+                                            </span>
                                         )}
                                     </div>
                                 </Badge>
@@ -482,8 +487,13 @@ export default function SitesTable({
                         <div className="flex items-center gap-2 justify-end">
                             <DropdownMenu>
                                 <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" className="h-8 w-8 p-0">
+                                    <Button
-                                    <span className="sr-only">Open menu</span>
+                                        variant="ghost"
+                                        className="h-8 w-8 p-0"
+                                    >
+                                        <span className="sr-only">
+                                            Open menu
+                                        </span>
                                         <MoreHorizontal className="h-4 w-4" />
                                     </Button>
                                 </DropdownMenuTrigger>
@@ -509,7 +519,9 @@ export default function SitesTable({
                                         href={`/${siteRow.orgId}/settings/resources/client?siteId=${siteRow.id}`}
                                     >
                                         <DropdownMenuItem>
-                                        {t("sitesTableViewPrivateResources")}
+                                            {t(
+                                                "sitesTableViewPrivateResources"
+                                            )}
                                         </DropdownMenuItem>
                                     </Link>
                                 </DropdownMenuContent>
@@ -532,9 +544,15 @@ export default function SitesTable({
             cols.splice(cols.length - 1, 0, {
                 accessorKey: "labels",
                 header: () => (
-                    <span className="p-3 text-end w-full inline-block">
+                    <LabelColumnFilterButton
-                        {t("labels")}
+                        orgId={orgId}
-                    </span>
+                        selectedValues={searchParams.getAll("labels")}
+                        onSelectedValuesChange={(value) =>
+                            handleFilterChange("labels", value)
+                        }
+                        label={t("labels")}
+                        className="p-3"
+                    />
                 ),
                 cell: ({ row }: { row: { original: SiteRow } }) => (
                     <SiteLabelCell site={row.original} orgId={orgId} />

src/components/UserDevicesTable.tsx

@@ -794,6 +794,7 @@ export default function UserDevicesTable({
                 columnVisibility={defaultUserColumnVisibility}
                 onSearch={handleSearchChange}
                 onPaginationChange={handlePaginationChange}
+                searchQuery={searchParams.get("query")?.toString()}
                 pagination={pagination}
                 rowCount={rowCount}
                 stickyLeftColumn="name"