diff --git a/messages/en-US.json b/messages/en-US.json index 2264f1332..42bbdf2c0 100644 --- a/messages/en-US.json +++ b/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.", diff --git a/src/components/LabelColumnFilterButton.tsx b/src/components/LabelColumnFilterButton.tsx index c6b083967..ed6a1f744 100644 --- a/src/components/LabelColumnFilterButton.tsx +++ b/src/components/LabelColumnFilterButton.tsx @@ -168,7 +168,7 @@ export function LabelColumnFilterButton({ }} className="text-muted-foreground" > - {t("accessLabelFilterClear")} + {t("accessFilterClear")} )} {labels.map((label) => ( diff --git a/src/components/PrivateResourcesTable.tsx b/src/components/PrivateResourcesTable.tsx index 396ba9759..37acb3e94 100644 --- a/src/components/PrivateResourcesTable.tsx +++ b/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, - 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 { startTransition, useMemo, useState, useTransition } from "react"; 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 { useOptimisticLabels } from "@app/hooks/useOptimisticLabels"; +import { LabelsTableCell } from "./LabelsTableCell"; +import { ControlledDataTable } from "./ui/controlled-data-table"; export type InternalResourceSiteRow = ResourceSiteRow; diff --git a/src/components/ProxyResourcesTable.tsx b/src/components/ProxyResourcesTable.tsx index 0b761a540..edfe06dfd 100644 --- a/src/components/ProxyResourcesTable.tsx +++ b/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[]>(() => { const cols: ExtendedColumnDef[] = [ { @@ -291,61 +246,27 @@ export default function ProxyResourcesTable({ accessorFn: (row) => row.sites.map((s) => s.siteName).join(", "), friendlyName: t("sites"), - header: () => ( - - - - - -
- -
- - onPickSiteRef.current(site) - } - /> -
-
- ), + header: () => { + const siteIdQ = searchParams.get("siteId"); + const siteIdNum = siteIdQ ? parseInt(siteIdQ, 10) : NaN; + + const selectedSiteId = + !siteIdQ || + !Number.isInteger(siteIdNum) || + siteIdNum <= 0 + ? null + : siteIdNum; + + return ( + + handleFilterChange("siteId", value?.toString()) + } + orgId={orgId} + /> + ); + }, cell: ({ row }) => ( 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 = [...sites]; + if ( + debouncedQuery.trim().length === 0 && + selectedSite && + !allSites.find((site) => site.siteId === selectedSite?.siteId) + ) { + allSites.unshift(selectedSite); + } + return allSites; + }, [debouncedQuery, sites, selectedSite]); + + return ( + + + + + + + setSiteSearchQuery(v)} + /> + + {t("siteNotFound")} + + {selectedSite && ( + { + onValueChange(undefined); + }} + className="text-muted-foreground" + > + {t("accessFilterClear")} + + )} + {sitesShown.map((site) => ( + { + onValueChange(site.siteId); + }} + > + +
+ + {site.name} + + {site.online != null && ( + + )} +
+
+ ))} +
+
+
+
+
+ ); +} diff --git a/src/components/multi-site-selector.tsx b/src/components/multi-site-selector.tsx index 76255e824..acb8b7dd9 100644 --- a/src/components/multi-site-selector.tsx +++ b/src/components/multi-site-selector.tsx @@ -115,7 +115,6 @@ export function MultiSitesSelector({ )} diff --git a/src/components/site-selector.tsx b/src/components/site-selector.tsx index 778a6fcf6..2a7717572 100644 --- a/src/components/site-selector.tsx +++ b/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({ )}