🚧 wip: site label column filter standardized

messages/en-US.json

@@ -1225,6 +1225,7 @@
     "accessLabelFilterCount": "{count, plural, one {# label} other {# labels}}",
     "labelOverflowCount": "+{count, plural, one {# label} other {# labels}}",
     "accessLabelFilterClear": "Clear label filters",
+    "accessFilterClear": "Clear filters",
     "selectColor": "Select color",
     "createNewLabel": "Create new org label \"{label}\"",
     "inviteInvalidDescription": "The invite link is invalid.",

src/components/LabelColumnFilterButton.tsx

@@ -168,7 +168,7 @@ export function LabelColumnFilterButton({
                                         }}
                                         className="text-muted-foreground"
                                     >
-                                        {t("accessLabelFilterClear")}
+                                        {t("accessFilterClear")}
                                     </CommandItem>
                                 )}
                                 {labels.map((label) => (

src/components/PrivateResourcesTable.tsx

@@ -2,9 +2,17 @@
 
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import CopyToClipboard from "@app/components/CopyToClipboard";
-import { ExtendedColumnDef } from "@app/components/ui/data-table";
+import CreatePrivateResourceDialog from "@app/components/CreatePrivateResourceDialog";
+import EditPrivateResourceDialog from "@app/components/EditPrivateResourceDialog";
+import { ResourceAccessCertIndicator } from "@app/components/ResourceAccessCertIndicator";
+import {
+    ResourceSitesStatusCell,
+    type ResourceSiteRow
+} from "@app/components/ResourceSitesStatusCell";
+import { Selectedsite, SitesSelector } from "@app/components/site-selector";
 import { Badge } from "@app/components/ui/badge";
 import { Button } from "@app/components/ui/button";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -18,53 +26,34 @@ import {
     PopoverTrigger
 } from "@app/components/ui/popover";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useNavigationContext } from "@app/hooks/useNavigationContext";
+import { useOptimisticLabels } from "@app/hooks/useOptimisticLabels";
+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 { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
+import { formatSiteResourceDestinationDisplay } from "@app/lib/formatSiteResourceAccess";
 import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
+import { build } from "@server/build";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import type { PaginationState } from "@tanstack/react-table";
 import {
     ArrowDown01Icon,
     ArrowUp10Icon,
     ArrowUpDown,
-    ArrowUpRight,
-    ChevronDown,
     ChevronsUpDownIcon,
     Funnel,
     MoreHorizontal
 } from "lucide-react";
 import { useTranslations } from "next-intl";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { Selectedsite, SitesSelector } from "@app/components/site-selector";
+import { startTransition, useMemo, useState, useTransition } from "react";
-import {
-    startTransition,
-    useEffect,
-    useMemo,
-    useState,
-    useTransition
-} from "react";
-import CreatePrivateResourceDialog from "@app/components/CreatePrivateResourceDialog";
-import EditPrivateResourceDialog from "@app/components/EditPrivateResourceDialog";
-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 { ColumnFilterButton } from "./ColumnFilterButton";
-import { cn } from "@app/lib/cn";
-import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
-import { formatSiteResourceDestinationDisplay } from "@app/lib/formatSiteResourceAccess";
-import {
-    ResourceSitesStatusCell,
-    type ResourceSiteRow
-} from "@app/components/ResourceSitesStatusCell";
-import { ResourceAccessCertIndicator } from "@app/components/ResourceAccessCertIndicator";
-import { build } from "@server/build";
-import { usePaidStatus } from "@app/hooks/usePaidStatus";
-import { tierMatrix } from "@server/lib/billing/tierMatrix";
-import { type SelectedLabel } from "./labels-selector";
-import { LabelsTableCell } from "./LabelsTableCell";
 import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
-import { useLocalLabels } from "@app/hooks/useLocalLabels";
+import { LabelsTableCell } from "./LabelsTableCell";
-import { useOptimisticLabels } from "@app/hooks/useOptimisticLabels";
+import { ControlledDataTable } from "./ui/controlled-data-table";
 
 export type InternalResourceSiteRow = ResourceSiteRow;
 

src/components/ProxyResourcesTable.tsx

@@ -76,6 +76,7 @@ import { useLocalLabels } from "@app/hooks/useLocalLabels";
 import { LabelsTableCell } from "./LabelsTableCell";
 import { useOptimisticLabels } from "@app/hooks/useOptimisticLabels";
 import { refresh } from "next/cache";
+import { SitesColumnFilterButton } from "./SitesColumnFilterButton";
 
 export type TargetHealth = {
     targetId: number;
@@ -154,30 +155,6 @@ export default function ProxyResourcesTable({
 
     const [isRefreshing, startTransition] = useTransition();
     const [isNavigatingToAddPage, startNavigation] = useTransition();
-    const [siteFilterOpen, setSiteFilterOpen] = useState(false);
-
-    const siteIdQ = searchParams.get("siteId");
-    const siteIdNum = siteIdQ ? parseInt(siteIdQ, 10) : NaN;
-    const selectedSite: Selectedsite | null = useMemo(() => {
-        if (!siteIdQ || !Number.isInteger(siteIdNum) || siteIdNum <= 0) {
-            return null;
-        }
-        if (initialFilterSite && initialFilterSite.siteId === siteIdNum) {
-            return initialFilterSite;
-        }
-        return {
-            siteId: siteIdNum,
-            name: t("standaloneHcFilterSiteIdFallback", { id: siteIdNum }),
-            type: "newt"
-        };
-    }, [initialFilterSite, siteIdQ, siteIdNum, t]);
-
-    // useEffect(() => {
-    //     const interval = setInterval(() => {
-    //         router.refresh();
-    //     }, 30_000);
-    //     return () => clearInterval(interval);
-    // }, [router]);
 
     const refreshData = () => {
         startTransition(() => {
@@ -227,28 +204,6 @@ export default function ProxyResourcesTable({
         }
     }
 
-    const clearSiteFilter = () => {
-        handleFilterChange("siteId", undefined);
-        setSiteFilterOpen(false);
-    };
-
-    const onPickSite = (site: Selectedsite) => {
-        handleFilterChange("siteId", String(site.siteId));
-        setSiteFilterOpen(false);
-    };
-
-    const siteFilterOpenRef = useRef(siteFilterOpen);
-    siteFilterOpenRef.current = siteFilterOpen;
-
-    const selectedSiteRef = useRef(selectedSite);
-    selectedSiteRef.current = selectedSite;
-
-    const clearSiteFilterRef = useRef(clearSiteFilter);
-    clearSiteFilterRef.current = clearSiteFilter;
-
-    const onPickSiteRef = useRef(onPickSite);
-    onPickSiteRef.current = onPickSite;
-
     const proxyColumns = useMemo<ExtendedColumnDef<ResourceRow>[]>(() => {
         const cols: ExtendedColumnDef<ResourceRow>[] = [
             {
@@ -291,61 +246,27 @@ export default function ProxyResourcesTable({
                 accessorFn: (row) =>
                     row.sites.map((s) => s.siteName).join(", "),
                 friendlyName: t("sites"),
-                header: () => (
+                header: () => {
-                    <Popover
+                    const siteIdQ = searchParams.get("siteId");
-                        open={siteFilterOpenRef.current}
+                    const siteIdNum = siteIdQ ? parseInt(siteIdQ, 10) : NaN;
-                        onOpenChange={setSiteFilterOpen}
+
-                    >
+                    const selectedSiteId =
-                        <PopoverTrigger asChild>
+                        !siteIdQ ||
-                            <Button
+                        !Number.isInteger(siteIdNum) ||
-                                type="button"
+                        siteIdNum <= 0
-                                variant="ghost"
+                            ? null
-                                role="combobox"
+                            : siteIdNum;
-                                className={cn(
+
-                                    "justify-between text-sm h-8 px-2 w-full p-3",
+                    return (
-                                    !selectedSiteRef.current &&
+                        <SitesColumnFilterButton
-                                        "text-muted-foreground"
+                            selectedSiteId={selectedSiteId}
-                                )}
+                            onValueChange={(value) =>
-                            >
+                                handleFilterChange("siteId", value?.toString())
-                                <div className="flex items-center gap-2 min-w-0">
+                            }
-                                    {t("sites")}
+                            orgId={orgId}
-                                    <Funnel className="size-4 flex-none" />
+                        />
-                                    {selectedSiteRef.current && (
+                    );
-                                        <Badge
+                },
-                                            className="truncate max-w-[10rem]"
-                                            variant="secondary"
-                                        >
-                                            {selectedSiteRef.current.name}
-                                        </Badge>
-                                    )}
-                                </div>
-                            </Button>
-                        </PopoverTrigger>
-                        <PopoverContent
-                            className={dataTableFilterPopoverContentClassName}
-                            align="start"
-                        >
-                            <div className="border-b p-1">
-                                <Button
-                                    type="button"
-                                    variant="ghost"
-                                    size="sm"
-                                    className="h-8 w-full justify-start font-normal"
-                                    onClick={() => clearSiteFilterRef.current()}
-                                >
-                                    {t("standaloneHcFilterAnySite")}
-                                </Button>
-                            </div>
-                            <SitesSelector
-                                orgId={orgId}
-                                selectedSite={selectedSiteRef.current}
-                                onSelectSite={(site) =>
-                                    onPickSiteRef.current(site)
-                                }
-                            />
-                        </PopoverContent>
-                    </Popover>
-                ),
                 cell: ({ row }) => (
                     <ResourceSitesStatusCell
                         orgId={row.original.orgId}

src/components/SitesColumnFilterButton.tsx

@@ -0,0 +1,160 @@
+import { useMemo, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { cn } from "@app/lib/cn";
+import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
+import { CheckIcon, Funnel } from "lucide-react";
+import { SiteOnlineStatus, type Selectedsite } from "./site-selector";
+import { Button } from "./ui/button";
+import { useTranslations } from "next-intl";
+import { Badge } from "./ui/badge";
+import { orgQueries } from "@app/lib/queries";
+import { useQuery } from "@tanstack/react-query";
+import { useDebounce } from "use-debounce";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList
+} from "./ui/command";
+
+export type SitesColumnFilterButtonProps = {
+    selectedSiteId: number | null;
+    onValueChange: (value: number | undefined) => void;
+    orgId: string;
+};
+
+export function SitesColumnFilterButton({
+    selectedSiteId,
+    onValueChange,
+    orgId
+}: SitesColumnFilterButtonProps) {
+    const [open, setOpen] = useState(false);
+
+    const t = useTranslations();
+
+    const [siteSearchQuery, setSiteSearchQuery] = useState("");
+    const [debouncedQuery] = useDebounce(siteSearchQuery, 150);
+
+    const { data: sites = [] } = useQuery(
+        orgQueries.sites({
+            orgId,
+            query: debouncedQuery,
+            perPage: 500
+        })
+    );
+
+    const selectedSite = useMemo(() => {
+        let selected = undefined;
+        if (selectedSiteId) {
+            selected = sites.find((site) => site.siteId === selectedSiteId) ?? {
+                siteId: Number(selectedSiteId),
+                name: t("standaloneHcFilterSiteIdFallback", {
+                    id: Number(selectedSiteId)
+                }),
+                type: "newt"
+            };
+        }
+
+        return selected;
+    }, [selectedSiteId, sites]);
+
+    // always include the selected site in the list of sites shown
+    const sitesShown = useMemo(() => {
+        const allSites: Array<Selectedsite> = [...sites];
+        if (
+            debouncedQuery.trim().length === 0 &&
+            selectedSite &&
+            !allSites.find((site) => site.siteId === selectedSite?.siteId)
+        ) {
+            allSites.unshift(selectedSite);
+        }
+        return allSites;
+    }, [debouncedQuery, sites, selectedSite]);
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    type="button"
+                    variant="ghost"
+                    role="combobox"
+                    className={cn(
+                        "justify-between text-sm h-8 px-2 w-full p-3",
+                        selectedSite && "text-muted-foreground"
+                    )}
+                >
+                    <div className="flex items-center gap-2 min-w-0">
+                        {t("sites")}
+                        <Funnel className="size-4 flex-none" />
+                        {selectedSite && (
+                            <Badge
+                                className="truncate max-w-40"
+                                variant="secondary"
+                            >
+                                {selectedSite.name}
+                            </Badge>
+                        )}
+                    </div>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent
+                className={dataTableFilterPopoverContentClassName}
+                align="start"
+            >
+                <Command shouldFilter={false}>
+                    <CommandInput
+                        placeholder={t("siteSearch")}
+                        value={siteSearchQuery}
+                        onValueChange={(v) => setSiteSearchQuery(v)}
+                    />
+                    <CommandList>
+                        <CommandEmpty>{t("siteNotFound")}</CommandEmpty>
+                        <CommandGroup>
+                            {selectedSite && (
+                                <CommandItem
+                                    onSelect={() => {
+                                        onValueChange(undefined);
+                                    }}
+                                    className="text-muted-foreground"
+                                >
+                                    {t("accessFilterClear")}
+                                </CommandItem>
+                            )}
+                            {sitesShown.map((site) => (
+                                <CommandItem
+                                    key={site.siteId}
+                                    value={`${site.siteId}:${site.name}`}
+                                    onSelect={() => {
+                                        onValueChange(site.siteId);
+                                    }}
+                                >
+                                    <CheckIcon
+                                        className={cn(
+                                            "mr-2 h-4 w-4",
+                                            site.siteId === selectedSite?.siteId
+                                                ? "opacity-100"
+                                                : "opacity-0"
+                                        )}
+                                    />
+                                    <div className="min-w-0 flex-1 flex items-center gap-2">
+                                        <span className="min-w-0 flex-1 truncate">
+                                            {site.name}
+                                        </span>
+                                        {site.online != null && (
+                                            <SiteOnlineStatus
+                                                type={site.type}
+                                                online={site.online}
+                                            />
+                                        )}
+                                    </div>
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

src/components/multi-site-selector.tsx

@@ -115,7 +115,6 @@ export function MultiSitesSelector({
                                     <SiteOnlineStatus
                                         type={site.type}
                                         online={site.online}
-                                        t={t}
                                     />
                                 )}
                             </div>

src/components/site-selector.tsx

@@ -26,11 +26,12 @@ export type Selectedsite = Pick<
 type SiteOnlineStatusProps = {
     type: Selectedsite["type"];
     online: Selectedsite["online"];
-    t: (key: "online" | "offline") => string;
 };
 
 /** Dot-only indicator matching `SitesTable` colors (newt/wireguard only; nothing for local or missing status). */
-export function SiteOnlineStatus({ type, online, t }: SiteOnlineStatusProps) {
+export function SiteOnlineStatus({ type, online }: SiteOnlineStatusProps) {
+    const t = useTranslations();
+
     if (type !== "newt" && type !== "wireguard") {
         return null;
     }
@@ -128,7 +129,6 @@ export function SitesSelector({
                                     <SiteOnlineStatus
                                         type={site.type}
                                         online={site.online}
-                                        t={t}
                                     />
                                 )}
                             </div>