calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-06-10 17:43:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3219 from Fredkiss3/refactor/standardize-clear-buttons

Browse Source 
feat: make clear filter buttons more consistent accross tables
This commit is contained in:
Milo Schwartz
2026-06-08 12:07:55 -07:00
committed by GitHub
parent 74fdcceace 934886caea
commit 56c415ca05
14 changed files with 355 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
messages/en-US.json
View File

@@ -1290,6 +1290,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.",

58
src/app/[orgId]/settings/logs/access/page.tsx
View File

@@ -11,7 +11,7 @@ import { ColumnDef } from "@tanstack/react-table";
import { DateTimeValue } from "@app/components/DateTimePicker";
import { ArrowUpRight, Key, User } from "lucide-react";
import Link from "next/link";
import { ColumnFilter } from "@app/components/ColumnFilter";
import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { build } from "@server/build";
import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
@@ -233,7 +233,7 @@ export default function GeneralPage() {
{
accessorKey: "timestamp",
header: () => {
return t("timestamp");
return <span className="px-2">{t("timestamp")}</span>;
},
cell: ({ row }) => {
return (
@@ -249,19 +249,19 @@ export default function GeneralPage() {
accessorKey: "action",
header: () => {
return (
<div className="flex items-center gap-2">
<span>{t("action")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={[
{ value: "true", label: "Allowed" },
{ value: "false", label: "Denied" }
]}
label={t("action")}
selectedValue={filters.action}
onValueChange={(value) =>
handleFilterChange("action", value)
}
searchPlaceholder="Search..."
emptyMessage="None found"
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -276,27 +276,27 @@ export default function GeneralPage() {
},
{
accessorKey: "ip",
header: () => t("ip")
header: () => <span className="px-2">{t("ip")}</span>
},
{
accessorKey: "location",
header: () => {
return (
<div className="flex items-center gap-2">
<span>{t("location")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={filterAttributes.locations.map(
(location) => ({
value: location,
label: location
})
)}
label={t("location")}
selectedValue={filters.location}
onValueChange={(value) =>
handleFilterChange("location", value)
}
searchPlaceholder="Search..."
emptyMessage="None found"
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -321,19 +321,19 @@ export default function GeneralPage() {
accessorKey: "resourceName",
header: () => {
return (
<div className="flex items-center gap-2">
<span>{t("resource")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={filterAttributes.resources.map((res) => ({
value: res.id.toString(),
label: res.name || "Unnamed Resource"
}))}
label={t("resource")}
selectedValue={filters.resourceId}
onValueChange={(value) =>
handleFilterChange("resourceId", value)
}
searchPlaceholder="Search..."
emptyMessage="None found"
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -359,9 +359,8 @@ export default function GeneralPage() {
accessorKey: "type",
header: () => {
return (
<div className="flex items-center gap-2">
<span>{t("type")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={[
{ value: "password", label: "Password" },
{ value: "pincode", label: "Pincode" },
@@ -372,12 +371,13 @@ export default function GeneralPage() {
},
{ value: "ssh", label: "SSH" }
]}
label={t("type")}
selectedValue={filters.type}
onValueChange={(value) =>
handleFilterChange("type", value)
}
searchPlaceholder="Search..."
emptyMessage="None found"
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -395,19 +395,19 @@ export default function GeneralPage() {
accessorKey: "actor",
header: () => {
return (
<div className="flex items-center gap-2">
<span>{t("actor")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={filterAttributes.actors.map((actor) => ({
value: actor,
label: actor
}))}
label={t("actor")}
selectedValue={filters.actor}
onValueChange={(value) =>
handleFilterChange("actor", value)
}
searchPlaceholder="Search..."
emptyMessage="None found"
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -433,7 +433,7 @@ export default function GeneralPage() {
},
{
accessorKey: "actorId",
header: () => t("actorId"),
header: () => <span className="px-2">{t("actorId")}</span>,
cell: ({ row }) => (
<span className="flex items-center gap-1">
{row.original.actorId || "-"}

30
src/app/[orgId]/settings/logs/action/page.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { ColumnFilter } from "@app/components/ColumnFilter";
import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
import { DateTimeValue } from "@app/components/DateTimePicker";
import { LogDataTable } from "@app/components/LogDataTable";
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
@@ -219,9 +219,7 @@ export default function GeneralPage() {
const columns: ColumnDef<any>[] = [
{
accessorKey: "timestamp",
header: () => {
return t("timestamp");
},
header: () => <span className="px-2">{t("timestamp")}</span>,
cell: ({ row }) => {
return (
<div className="whitespace-nowrap">
@@ -236,16 +234,16 @@ export default function GeneralPage() {
accessorKey: "action",
header: () => {
return (
<div className="flex items-center gap-2">
<span>{t("action")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={[]}
label={t("action")}
selectedValue={filters.action}
onValueChange={(value) =>
handleFilterChange("action", value)
}
searchPlaceholder="Search..."
emptyMessage="None found"
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -263,19 +261,19 @@ export default function GeneralPage() {
accessorKey: "actor",
header: () => {
return (
<div className="flex items-center gap-2">
<span>{t("actor")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={filterAttributes.actors.map((actor) => ({
value: actor,
label: actor
}))}
label={t("actor")}
selectedValue={filters.actor}
onValueChange={(value) =>
handleFilterChange("actor", value)
}
searchPlaceholder="Search..."
emptyMessage="None found"
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -295,9 +293,7 @@ export default function GeneralPage() {
},
{
accessorKey: "actorId",
header: () => {
return t("actorId");
},
header: () => <span className="px-2">{t("actorId")}</span>,
cell: ({ row }) => {
return (
<span className="flex items-center gap-1">

64
src/app/[orgId]/settings/logs/connection/page.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Button } from "@app/components/ui/button";
import { ColumnFilter } from "@app/components/ColumnFilter";
import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
import { DateTimeValue } from "@app/components/DateTimePicker";
import { LogDataTable } from "@app/components/LogDataTable";
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
@@ -256,9 +256,7 @@ export default function ConnectionLogsPage() {
const columns: ColumnDef<any>[] = [
{
accessorKey: "startedAt",
header: () => {
return t("timestamp");
},
header: () => <span className="px-2">{t("timestamp")}</span>,
cell: ({ row }) => {
return (
<div className="whitespace-nowrap">
@@ -273,21 +271,21 @@ export default function ConnectionLogsPage() {
accessorKey: "protocol",
header: () => {
return (
<div className="flex items-center gap-2">
<span>{t("protocol")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={filterAttributes.protocols.map(
(protocol) => ({
label: protocol.toUpperCase(),
value: protocol
})
)}
label={t("protocol")}
selectedValue={filters.protocol}
onValueChange={(value) =>
handleFilterChange("protocol", value)
}
searchPlaceholder="Search..."
emptyMessage="None found"
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -304,19 +302,19 @@ export default function ConnectionLogsPage() {
accessorKey: "resourceName",
header: () => {
return (
<div className="flex items-center gap-2">
<span>{t("resource")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={filterAttributes.resources.map((res) => ({
value: res.id.toString(),
label: res.name || "Unnamed Resource"
}))}
label={t("resource")}
selectedValue={filters.siteResourceId}
onValueChange={(value) =>
handleFilterChange("siteResourceId", value)
}
searchPlaceholder="Search..."
emptyMessage="None found"
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -345,19 +343,19 @@ export default function ConnectionLogsPage() {
accessorKey: "clientName",
header: () => {
return (
<div className="flex items-center gap-2">
<span>{t("client")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={filterAttributes.clients.map((c) => ({
value: c.id.toString(),
label: c.name
}))}
label={t("client")}
selectedValue={filters.clientId}
onValueChange={(value) =>
handleFilterChange("clientId", value)
}
searchPlaceholder="Search..."
emptyMessage="None found"
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -388,19 +386,19 @@ export default function ConnectionLogsPage() {
accessorKey: "userEmail",
header: () => {
return (
<div className="flex items-center gap-2">
<span>{t("user")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={filterAttributes.users.map((u) => ({
value: u.id,
label: u.email || u.id
}))}
label={t("user")}
selectedValue={filters.userId}
onValueChange={(value) =>
handleFilterChange("userId", value)
}
searchPlaceholder="Search..."
emptyMessage="None found"
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -419,9 +417,7 @@ export default function ConnectionLogsPage() {
},
{
accessorKey: "sourceAddr",
header: () => {
return t("sourceAddress");
},
header: () => <span className="px-2">{t("sourceAddress")}</span>,
cell: ({ row }) => {
return (
<span className="whitespace-nowrap font-mono text-xs">
@@ -434,19 +430,19 @@ export default function ConnectionLogsPage() {
accessorKey: "destAddr",
header: () => {
return (
<div className="flex items-center gap-2">
<span>{t("destinationAddress")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={filterAttributes.destAddrs.map((addr) => ({
value: addr,
label: addr
}))}
label={t("destinationAddress")}
selectedValue={filters.destAddr}
onValueChange={(value) =>
handleFilterChange("destAddr", value)
}
searchPlaceholder="Search..."
emptyMessage="None found"
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -461,9 +457,7 @@ export default function ConnectionLogsPage() {
},
{
accessorKey: "duration",
header: () => {
return t("duration");
},
header: () => <span className="px-2">{t("duration")}</span>,
cell: ({ row }) => {
return (
<span className="whitespace-nowrap">

100
src/app/[orgId]/settings/logs/request/page.tsx
View File

@@ -20,6 +20,7 @@ import { useMemo, useState, useTransition } from "react";
import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
import { build } from "@server/build";
import type { QueryRequestAuditLogResponse } from "@server/routers/auditLogs/types";
import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
export default function GeneralPage() {
const router = useRouter();
@@ -284,9 +285,9 @@ export default function GeneralPage() {
const columns: ColumnDef<any>[] = [
{
accessorKey: "timestamp",
header: ({ column }) => {
return t("timestamp");
},
header: ({ column }) => (
<span className="px-2">{t("timestamp")}</span>
),
cell: ({ row }) => {
return (
<div className="whitespace-nowrap">
@@ -299,22 +300,21 @@ export default function GeneralPage() {
},
{
accessorKey: "action",
header: ({ column }) => {
header: () => {
return (
<div className="flex items-center gap-2">
<span>{t("action")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={[
{ value: "true", label: "Allowed" },
{ value: "false", label: "Denied" }
]}
label={t("action")}
selectedValue={filters.action}
onValueChange={(value) =>
handleFilterChange("action", value)
}
// placeholder=""
searchPlaceholder="Search..."
emptyMessage="None found"
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -329,17 +329,14 @@ export default function GeneralPage() {
},
{
accessorKey: "ip",
header: ({ column }) => {
return t("ip");
}
header: ({ column }) => <span className="px-2">{t("ip")}</span>
},
{
accessorKey: "location",
header: ({ column }) => {
return (
<div className="flex items-center gap-2">
<span>{t("location")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={filterAttributes.locations.map(
(location) => ({
value: location,
@@ -351,8 +348,9 @@ export default function GeneralPage() {
handleFilterChange("location", value)
}
// placeholder=""
searchPlaceholder="Search..."
emptyMessage="None found"
label={t("location")}
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -377,9 +375,8 @@ export default function GeneralPage() {
accessorKey: "resourceName",
header: ({ column }) => {
return (
<div className="flex items-center gap-2">
<span>{t("resource")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={filterAttributes.resources.map((res) => ({
value: res.id.toString(),
label: res.name || "Unnamed Resource"
@@ -388,9 +385,9 @@ export default function GeneralPage() {
onValueChange={(value) =>
handleFilterChange("resourceId", value)
}
// placeholder=""
searchPlaceholder="Search..."
emptyMessage="None found"
label={t("resource")}
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -417,9 +414,8 @@ export default function GeneralPage() {
accessorKey: "host",
header: ({ column }) => {
return (
<div className="flex items-center gap-2">
<span>{t("host")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={filterAttributes.hosts.map((host) => ({
value: host,
label: host
@@ -428,9 +424,9 @@ export default function GeneralPage() {
onValueChange={(value) =>
handleFilterChange("host", value)
}
// placeholder=""
searchPlaceholder="Search..."
emptyMessage="None found"
label={t("host")}
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -452,9 +448,8 @@ export default function GeneralPage() {
accessorKey: "path",
header: ({ column }) => {
return (
<div className="flex items-center gap-2">
<span>{t("path")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={filterAttributes.paths.map((path) => ({
value: path,
label: path
@@ -463,9 +458,9 @@ export default function GeneralPage() {
onValueChange={(value) =>
handleFilterChange("path", value)
}
// placeholder=""
searchPlaceholder="Search..."
emptyMessage="None found"
label={t("path")}
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -482,9 +477,8 @@ export default function GeneralPage() {
accessorKey: "method",
header: ({ column }) => {
return (
<div className="flex items-center gap-2">
<span>{t("method")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={[
{ value: "GET", label: "GET" },
{ value: "POST", label: "POST" },
@@ -498,9 +492,9 @@ export default function GeneralPage() {
onValueChange={(value) =>
handleFilterChange("method", value)
}
// placeholder=""
searchPlaceholder="Search..."
emptyMessage="None found"
label={t("method")}
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -510,9 +504,8 @@ export default function GeneralPage() {
accessorKey: "reason",
header: ({ column }) => {
return (
<div className="flex items-center gap-2">
<span>{t("reason")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={[
{ value: "100", label: t("allowedByRule") },
{ value: "101", label: t("allowedNoAuth") },
@@ -537,9 +530,9 @@ export default function GeneralPage() {
onValueChange={(value) =>
handleFilterChange("reason", value)
}
// placeholder=""
searchPlaceholder="Search..."
emptyMessage="None found"
label={t("reason")}
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);
@@ -556,9 +549,8 @@ export default function GeneralPage() {
accessorKey: "actor",
header: ({ column }) => {
return (
<div className="flex items-center gap-2">
<span>{t("actor")}</span>
<ColumnFilter
<div className="flex items-center gap-2 px-2">
<ColumnFilterButton
options={filterAttributes.actors.map((actor) => ({
value: actor,
label: actor
@@ -567,9 +559,9 @@ export default function GeneralPage() {
onValueChange={(value) =>
handleFilterChange("actor", value)
}
// placeholder=""
searchPlaceholder="Search..."
emptyMessage="None found"
label={t("actor")}
searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/>
</div>
);

8
src/components/ColumnFilterButton.tsx
View File

@@ -17,6 +17,7 @@ import { CheckIcon, ChevronDownIcon, Funnel } from "lucide-react";
import { cn } from "@app/lib/cn";
import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
import { Badge } from "./ui/badge";
import { useTranslations } from "next-intl";
interface FilterOption {
value: string;
@@ -27,7 +28,6 @@ interface ColumnFilterButtonProps {
options: FilterOption[];
selectedValue?: string;
onValueChange: (value: string | undefined) => void;
placeholder?: string;
searchPlaceholder?: string;
emptyMessage?: string;
className?: string;
@@ -38,7 +38,6 @@ export function ColumnFilterButton({
options,
selectedValue,
onValueChange,
placeholder,
searchPlaceholder = "Search...",
emptyMessage = "No options found",
className,
@@ -50,6 +49,8 @@ export function ColumnFilterButton({
(option) => option.value === selectedValue
);
const t = useTranslations();
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
@@ -94,7 +95,7 @@ export function ColumnFilterButton({
}}
className="text-muted-foreground"
>
Clear filter
{t("accessFilterClear")}
</CommandItem>
)}
{options.map((option) => (
@@ -109,6 +110,7 @@ export function ColumnFilterButton({
);
setOpen(false);
}}
className="break-all"
>
<CheckIcon
className={cn(

3
src/components/ColumnMultiFilterButton.tsx
View File

@@ -120,7 +120,7 @@ export function ColumnMultiFilterButton({
}}
className="text-muted-foreground"
>
{t("accessUsersRoleFilterClear")}
{t("accessFilterClear")}
</CommandItem>
)}
{options.map((option) => (
@@ -130,6 +130,7 @@ export function ColumnMultiFilterButton({
onSelect={() => {
toggle(option.value);
}}
className="break-all"
>
<Checkbox
className="pointer-events-none shrink-0"

2
src/components/LabelColumnFilterButton.tsx
View File

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

2
src/components/LogDataTable.tsx
View File

@@ -32,7 +32,7 @@ import {
RefreshCw
} from "lucide-react";
import { useTranslations } from "next-intl";
import { useState, useEffect, useMemo } from "react";
import { useEffect, useMemo, useState } from "react";
import {
Tooltip,
TooltipContent,

160
src/components/PrivateResourcesTable.tsx
View File

@@ -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,35 @@ 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";
import { SitesColumnFilterButton } from "./SitesColumnFilterButton";
export type InternalResourceSiteRow = ResourceSiteRow;
@@ -157,7 +147,6 @@ export default function PrivateResourcesTable({
const [editingResource, setEditingResource] =
useState<InternalResourceRow | null>();
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
const [siteFilterOpen, setSiteFilterOpen] = useState(false);
const [isRefreshing, startRefreshTransition] = useTransition();
@@ -171,27 +160,6 @@ export default function PrivateResourcesTable({
// return () => clearInterval(interval);
// }, [router]);
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]);
const createInitialSites = useMemo(
() => (selectedSite ? [selectedSite] : undefined),
[selectedSite]
);
const refreshData = () => {
startRefreshTransition(() => {
try {
@@ -285,58 +253,27 @@ export default function PrivateResourcesTable({
accessorFn: (row) =>
row.sites.map((s) => s.siteName).join(", "),
friendlyName: t("sites"),
header: () => (
<Popover
open={siteFilterOpen}
onOpenChange={setSiteFilterOpen}
>
<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-[10rem]"
variant="secondary"
>
{selectedSite.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={clearSiteFilter}
>
{t("standaloneHcFilterAnySite")}
</Button>
</div>
<SitesSelector
orgId={orgId}
selectedSite={selectedSite}
onSelectSite={onPickSite}
/>
</PopoverContent>
</Popover>
),
header: () => {
const siteIdQ = searchParams.get("siteId");
const siteIdNum = siteIdQ ? parseInt(siteIdQ, 10) : NaN;
const selectedSiteId =
!siteIdQ ||
!Number.isInteger(siteIdNum) ||
siteIdNum <= 0
? null
: siteIdNum;
return (
<SitesColumnFilterButton
selectedSiteId={selectedSiteId}
onValueChange={(value) =>
handleFilterChange("siteId", value?.toString())
}
orgId={orgId}
/>
);
},
cell: ({ row }) => {
const resourceRow = row.original;
return (
@@ -586,16 +523,6 @@ export default function PrivateResourcesTable({
});
}
const clearSiteFilter = () => {
handleFilterChange("siteId", undefined);
setSiteFilterOpen(false);
};
const onPickSite = (site: Selectedsite) => {
handleFilterChange("siteId", String(site.siteId));
setSiteFilterOpen(false);
};
function toggleSort(column: string) {
const newSearch = getNextSortOrder(column, searchParams);
@@ -691,7 +618,6 @@ export default function PrivateResourcesTable({
open={isCreateDialogOpen}
setOpen={setIsCreateDialogOpen}
orgId={orgId}
initialSites={createInitialSites}
onSuccess={() => {
// Delay refresh to allow modal to close smoothly
setTimeout(() => {

123
src/components/PublicResourcesTable.tsx
View File

@@ -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 PublicResourcesTable({
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 PublicResourcesTable({
}
}
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 PublicResourcesTable({
accessorFn: (row) =>
row.sites.map((s) => s.siteName).join(", "),
friendlyName: t("sites"),
header: () => (
<Popover
open={siteFilterOpenRef.current}
onOpenChange={setSiteFilterOpen}
>
<PopoverTrigger asChild>
<Button
type="button"
variant="ghost"
role="combobox"
className={cn(
"justify-between text-sm h-8 px-2 w-full p-3",
!selectedSiteRef.current &&
"text-muted-foreground"
)}
>
<div className="flex items-center gap-2 min-w-0">
{t("sites")}
<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>
),
header: () => {
const siteIdQ = searchParams.get("siteId");
const siteIdNum = siteIdQ ? parseInt(siteIdQ, 10) : NaN;
const selectedSiteId =
!siteIdQ ||
!Number.isInteger(siteIdNum) ||
siteIdNum <= 0
? null
: siteIdNum;
return (
<SitesColumnFilterButton
selectedSiteId={selectedSiteId}
onValueChange={(value) =>
handleFilterChange("siteId", value?.toString())
}
orgId={orgId}
/>
);
},
cell: ({ row }) => (
<ResourceSitesStatusCell
orgId={row.original.orgId}

160
src/components/SitesColumnFilterButton.tsx Normal file
View File

@@ -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>
);
}

1
src/components/multi-site-selector.tsx
View File

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

6
src/components/site-selector.tsx
View File

@@ -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>