calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-01-28 22:00:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

add friendly col names

Browse Source
This commit is contained in:
miloschwartz
2025-11-07 18:16:14 -08:00
parent 9b2c0d0b67
commit 020cb2d794
22 changed files with 150 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/[orgId]/settings/(private)/remote-exit-nodes/ExitNodesTable.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { ExitNodesDataTable } from "./ExitNodesDataTable";
import {
DropdownMenu,
@@ -99,9 +100,10 @@ export default function ExitNodesTable({
});
};
const columns: ColumnDef<RemoteExitNodeRow>[] = [
const columns: ExtendedColumnDef<RemoteExitNodeRow>[] = [
{
accessorKey: "name",
friendlyName: t("name"),
header: ({ column }) => {
return (
<Button
@@ -118,6 +120,7 @@ export default function ExitNodesTable({
},
{
accessorKey: "online",
friendlyName: t("online"),
header: ({ column }) => {
return (
<Button
@@ -152,6 +155,7 @@ export default function ExitNodesTable({
},
{
accessorKey: "type",
friendlyName: t("connectionType"),
header: ({ column }) => {
return (
<Button
@@ -178,6 +182,7 @@ export default function ExitNodesTable({
},
{
accessorKey: "address",
friendlyName: "Address",
header: ({ column }) => {
return (
<Button
@@ -194,6 +199,7 @@ export default function ExitNodesTable({
},
{
accessorKey: "endpoint",
friendlyName: "Endpoint",
header: ({ column }) => {
return (
<Button

8
src/app/admin/users/AdminUsersTable.tsx
View File

@@ -66,9 +66,10 @@ export default function UsersTable({ users }: Props) {
});
};
const columns: ColumnDef<GlobalUserRow>[] = [
const columns: ExtendedColumnDef<GlobalUserRow>[] = [
{
accessorKey: "id",
friendlyName: "ID",
header: ({ column }) => {
return (
<Button
@@ -84,6 +85,7 @@ export default function UsersTable({ users }: Props) {
},
{
accessorKey: "username",
friendlyName: t("username"),
header: ({ column }) => {
return (
<Button
@@ -100,6 +102,7 @@ export default function UsersTable({ users }: Props) {
},
{
accessorKey: "email",
friendlyName: t("email"),
header: ({ column }) => {
return (
<Button
@@ -116,6 +119,7 @@ export default function UsersTable({ users }: Props) {
},
{
accessorKey: "name",
friendlyName: t("name"),
header: ({ column }) => {
return (
<Button
@@ -132,6 +136,7 @@ export default function UsersTable({ users }: Props) {
},
{
accessorKey: "idpName",
friendlyName: t("identityProvider"),
header: ({ column }) => {
return (
<Button
@@ -148,6 +153,7 @@ export default function UsersTable({ users }: Props) {
},
{
accessorKey: "twoFactorEnabled",
friendlyName: t("twoFactor"),
header: ({ column }) => {
return (
<Button

6
src/components/AdminIdpTable.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { IdpDataTable } from "@app/components/AdminIdpDataTable";
import { Button } from "@app/components/ui/button";
import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
@@ -77,9 +78,10 @@ export default function IdpTable({ idps }: Props) {
}
};
const columns: ColumnDef<IdpRow>[] = [
const columns: ExtendedColumnDef<IdpRow>[] = [
{
accessorKey: "idpId",
friendlyName: "ID",
header: ({ column }) => {
return (
<Button
@@ -97,6 +99,7 @@ export default function IdpTable({ idps }: Props) {
{
accessorKey: "name",
enableHiding: false,
friendlyName: t("name"),
header: ({ column }) => {
return (
<Button
@@ -113,6 +116,7 @@ export default function IdpTable({ idps }: Props) {
},
{
accessorKey: "type",
friendlyName: t("type"),
header: ({ column }) => {
return (
<Button

9
src/components/AdminUsersTable.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { UsersDataTable } from "@app/components/AdminUsersDataTable";
import { Button } from "@app/components/ui/button";
import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
@@ -85,9 +86,10 @@ export default function UsersTable({ users }: Props) {
});
};
const columns: ColumnDef<GlobalUserRow>[] = [
const columns: ExtendedColumnDef<GlobalUserRow>[] = [
{
accessorKey: "id",
friendlyName: "ID",
header: ({ column }) => {
return (
<Button
@@ -104,6 +106,7 @@ export default function UsersTable({ users }: Props) {
{
accessorKey: "username",
enableHiding: false,
friendlyName: t("username"),
header: ({ column }) => {
return (
<Button
@@ -120,6 +123,7 @@ export default function UsersTable({ users }: Props) {
},
{
accessorKey: "email",
friendlyName: t("email"),
header: ({ column }) => {
return (
<Button
@@ -136,6 +140,7 @@ export default function UsersTable({ users }: Props) {
},
{
accessorKey: "name",
friendlyName: t("name"),
header: ({ column }) => {
return (
<Button
@@ -152,6 +157,7 @@ export default function UsersTable({ users }: Props) {
},
{
accessorKey: "idpName",
friendlyName: t("identityProvider"),
header: ({ column }) => {
return (
<Button
@@ -168,6 +174,7 @@ export default function UsersTable({ users }: Props) {
},
{
accessorKey: "twoFactorEnabled",
friendlyName: t("twoFactor"),
header: ({ column }) => {
return (
<Button

6
src/components/ApiKeysTable.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import {
DropdownMenu,
DropdownMenuContent,
@@ -85,10 +86,11 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
});
};
const columns: ColumnDef<ApiKeyRow>[] = [
const columns: ExtendedColumnDef<ApiKeyRow>[] = [
{
accessorKey: "name",
enableHiding: false,
friendlyName: t("name"),
header: ({ column }) => {
return (
<Button
@@ -105,6 +107,7 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
},
{
accessorKey: "key",
friendlyName: t("key"),
header: () => (<span className="p-3">{t("key")}</span>),
cell: ({ row }) => {
const r = row.original;
@@ -113,6 +116,7 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
},
{
accessorKey: "createdAt",
friendlyName: t("createdAt"),
header: () => (<span className="p-3">{t("createdAt")}</span>),
cell: ({ row }) => {
const r = row.original;

6
src/components/BlueprintsTable.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { Button } from "@app/components/ui/button";
import {
ArrowRight,
@@ -30,9 +31,10 @@ export default function BlueprintsTable({ blueprints, orgId }: Props) {
const [isRefreshing, startTransition] = useTransition();
const router = useRouter();
const columns: ColumnDef<BlueprintRow>[] = [
const columns: ExtendedColumnDef<BlueprintRow>[] = [
{
accessorKey: "createdAt",
friendlyName: t("appliedAt"),
header: ({ column }) => {
return (
<Button
@@ -62,6 +64,7 @@ export default function BlueprintsTable({ blueprints, orgId }: Props) {
{
accessorKey: "name",
enableHiding: false,
friendlyName: t("name"),
header: ({ column }) => {
return (
<Button
@@ -79,6 +82,7 @@ export default function BlueprintsTable({ blueprints, orgId }: Props) {
{
accessorKey: "source",
friendlyName: t("source"),
header: ({ column }) => {
return (
<Button

12
src/components/ClientsTable.tsx
View File

@@ -12,6 +12,7 @@ import {
getFilteredRowModel,
VisibilityState
} from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import {
DropdownMenu,
DropdownMenuContent,
@@ -330,11 +331,12 @@ export default function ClientsTable({
return currentData?.some((client) => !client.userId) ?? false;
}, [currentView, machineClients, userClients]);
const columns: ColumnDef<ClientRow>[] = useMemo(() => {
const baseColumns: ColumnDef<ClientRow>[] = [
const columns: ExtendedColumnDef<ClientRow>[] = useMemo(() => {
const baseColumns: ExtendedColumnDef<ClientRow>[] = [
{
accessorKey: "name",
enableHiding: false,
friendlyName: "Name",
header: ({ column }) => {
return (
<Button
@@ -351,6 +353,7 @@ export default function ClientsTable({
},
{
accessorKey: "userId",
friendlyName: "User",
header: ({ column }) => {
return (
<Button
@@ -409,6 +412,7 @@ export default function ClientsTable({
// },
{
accessorKey: "online",
friendlyName: "Connectivity",
header: ({ column }) => {
return (
<Button
@@ -443,6 +447,7 @@ export default function ClientsTable({
},
{
accessorKey: "mbIn",
friendlyName: "Data In",
header: ({ column }) => {
return (
<Button
@@ -459,6 +464,7 @@ export default function ClientsTable({
},
{
accessorKey: "mbOut",
friendlyName: "Data Out",
header: ({ column }) => {
return (
<Button
@@ -475,6 +481,7 @@ export default function ClientsTable({
},
{
accessorKey: "client",
friendlyName: t("client"),
header: ({ column }) => {
return (
<Button
@@ -512,6 +519,7 @@ export default function ClientsTable({
},
{
accessorKey: "subnet",
friendlyName: "Address",
header: ({ column }) => {
return (
<Button

9
src/components/ContainersSelector.tsx
View File

@@ -7,6 +7,7 @@ import {
getFilteredRowModel,
VisibilityState
} from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { Button } from "@/components/ui/button";
import {
Credenza,
@@ -181,9 +182,10 @@ const DockerContainersTable: FC<{
[getExposedPorts]
);
const columns: ColumnDef<Container>[] = [
const columns: ExtendedColumnDef<Container>[] = [
{
accessorKey: "name",
friendlyName: t("containerName"),
header: () => (<span className="p-3">{t("containerName")}</span>),
cell: ({ row }) => (
<div className="font-medium">{row.original.name}</div>
@@ -191,6 +193,7 @@ const DockerContainersTable: FC<{
},
{
accessorKey: "image",
friendlyName: t("containerImage"),
header: () => (<span className="p-3">{t("containerImage")}</span>),
cell: ({ row }) => (
<div className="text-sm text-muted-foreground">
@@ -200,6 +203,7 @@ const DockerContainersTable: FC<{
},
{
accessorKey: "state",
friendlyName: t("containerState"),
header: () => (<span className="p-3">{t("containerState")}</span>),
cell: ({ row }) => (
<Badge
@@ -215,6 +219,7 @@ const DockerContainersTable: FC<{
},
{
accessorKey: "networks",
friendlyName: t("containerNetworks"),
header: () => (<span className="p-3">{t("containerNetworks")}</span>),
cell: ({ row }) => {
const networks = Object.keys(row.original.networks);
@@ -233,6 +238,7 @@ const DockerContainersTable: FC<{
},
{
accessorKey: "hostname",
friendlyName: t("containerHostnameIp"),
header: () => (<span className="p-3">{t("containerHostnameIp")}</span>),
enableHiding: false,
cell: ({ row }) => (
@@ -243,6 +249,7 @@ const DockerContainersTable: FC<{
},
{
accessorKey: "labels",
friendlyName: t("containerLabels"),
header: () => (<span className="p-3">{t("containerLabels")}</span>),
cell: ({ row }) => {
const labels = row.original.labels || {};

8
src/components/DNSRecordTable.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { useTranslations } from "next-intl";
import { Badge } from "@app/components/ui/badge";
import { DNSRecordsDataTable } from "./DNSRecordsDataTable";
@@ -25,9 +26,10 @@ export default function DNSRecordsTable({
}: Props) {
const t = useTranslations();
const columns: ColumnDef<DNSRecordRow>[] = [
const columns: ExtendedColumnDef<DNSRecordRow>[] = [
{
accessorKey: "baseDomain",
friendlyName: t("recordName", { fallback: "Record name" }),
header: ({ column }) => {
return (
<div>{t("recordName", { fallback: "Record name" })}</div>
@@ -48,6 +50,7 @@ export default function DNSRecordsTable({
},
{
accessorKey: "recordType",
friendlyName: t("type"),
header: ({ column }) => {
return <div>{t("type")}</div>;
},
@@ -58,6 +61,7 @@ export default function DNSRecordsTable({
},
{
accessorKey: "ttl",
friendlyName: t("TTL"),
header: ({ column }) => {
return <div>{t("TTL")}</div>;
},
@@ -67,6 +71,7 @@ export default function DNSRecordsTable({
},
{
accessorKey: "value",
friendlyName: t("value"),
header: () => {
return <div>{t("value")}</div>;
},
@@ -83,6 +88,7 @@ export default function DNSRecordsTable({
},
{
accessorKey: "verified",
friendlyName: t("status"),
header: ({ column }) => {
return <div>{t("status")}</div>;
},

6
src/components/DomainsTable.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { DomainsDataTable } from "@app/components/DomainsDataTable";
import { Button } from "@app/components/ui/button";
import {
@@ -134,10 +135,11 @@ export default function DomainsTable({ domains, orgId }: Props) {
}
};
const columns: ColumnDef<DomainRow>[] = [
const columns: ExtendedColumnDef<DomainRow>[] = [
{
accessorKey: "baseDomain",
enableHiding: false,
friendlyName: t("domain"),
header: ({ column }) => {
return (
<Button
@@ -154,6 +156,7 @@ export default function DomainsTable({ domains, orgId }: Props) {
},
{
accessorKey: "type",
friendlyName: t("type"),
header: ({ column }) => {
return (
<Button
@@ -176,6 +179,7 @@ export default function DomainsTable({ domains, orgId }: Props) {
},
{
accessorKey: "verified",
friendlyName: t("status"),
header: ({ column }) => {
return (
<Button

8
src/components/GenerateLicenseKeysTable.tsx
View File

@@ -2,6 +2,7 @@
import { useTranslations } from "next-intl";
import { ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { Button } from "./ui/button";
import { ArrowUpDown } from "lucide-react";
import CopyToClipboard from "./CopyToClipboard";
@@ -63,9 +64,10 @@ export default function GenerateLicenseKeysTable({
}
};
const columns: ColumnDef<GeneratedLicenseKey>[] = [
const columns: ExtendedColumnDef<GeneratedLicenseKey>[] = [
{
accessorKey: "licenseKey",
friendlyName: t("licenseKey"),
header: ({ column }) => {
return (
<Button
@@ -91,6 +93,7 @@ export default function GenerateLicenseKeysTable({
},
{
accessorKey: "instanceName",
friendlyName: t("instanceName"),
header: ({ column }) => {
return (
<Button
@@ -110,6 +113,7 @@ export default function GenerateLicenseKeysTable({
},
{
accessorKey: "valid",
friendlyName: t("valid"),
header: ({ column }) => {
return (
<Button
@@ -133,6 +137,7 @@ export default function GenerateLicenseKeysTable({
},
{
accessorKey: "type",
friendlyName: t("type"),
header: ({ column }) => {
return (
<Button
@@ -155,6 +160,7 @@ export default function GenerateLicenseKeysTable({
},
{
accessorKey: "terminateAt",
friendlyName: t("licenseTableValidUntil"),
header: ({ column }) => {
return (
<Button

6
src/components/InvitationsTable.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import {
DropdownMenu,
DropdownMenuContent,
@@ -66,14 +67,16 @@ export default function InvitationsTable({
}
};
const columns: ColumnDef<InvitationRow>[] = [
const columns: ExtendedColumnDef<InvitationRow>[] = [
{
accessorKey: "email",
enableHiding: false,
friendlyName: t("email"),
header: () => (<span className="p-3">{t("email")}</span>)
},
{
accessorKey: "expiresAt",
friendlyName: t("expiresAt"),
header: () => (<span className="p-3">{t("expiresAt")}</span>),
cell: ({ row }) => {
const expiresAt = new Date(row.original.expiresAt);
@@ -88,6 +91,7 @@ export default function InvitationsTable({
},
{
accessorKey: "role",
friendlyName: t("role"),
header: () => (<span className="p-3">{t("role")}</span>)
},
{

7
src/components/LicenseKeysDataTable.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { DataTable } from "@app/components/ui/data-table";
import { Button } from "@app/components/ui/button";
import { Badge } from "@app/components/ui/badge";
@@ -30,10 +31,11 @@ export function LicenseKeysDataTable({
}: LicenseKeysDataTableProps) {
const t = useTranslations();
const columns: ColumnDef<LicenseKeyCache>[] = [
const columns: ExtendedColumnDef<LicenseKeyCache>[] = [
{
accessorKey: "licenseKey",
enableHiding: false,
friendlyName: t("licenseKey"),
header: ({ column }) => {
return (
<Button
@@ -59,6 +61,7 @@ export function LicenseKeysDataTable({
},
{
accessorKey: "valid",
friendlyName: t("valid"),
header: ({ column }) => {
return (
<Button
@@ -82,6 +85,7 @@ export function LicenseKeysDataTable({
},
{
accessorKey: "tier",
friendlyName: t("type"),
header: ({ column }) => {
return (
<Button
@@ -104,6 +108,7 @@ export function LicenseKeysDataTable({
},
{
accessorKey: "terminateAt",
friendlyName: t("licenseTableValidUntil"),
header: ({ column }) => {
return (
<Button

6
src/components/OrgApiKeysTable.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { OrgApiKeysDataTable } from "@app/components/OrgApiKeysDataTable";
import {
DropdownMenu,
@@ -88,10 +89,11 @@ export default function OrgApiKeysTable({
});
};
const columns: ColumnDef<OrgApiKeyRow>[] = [
const columns: ExtendedColumnDef<OrgApiKeyRow>[] = [
{
accessorKey: "name",
enableHiding: false,
friendlyName: t("name"),
header: ({ column }) => {
return (
<Button
@@ -108,6 +110,7 @@ export default function OrgApiKeysTable({
},
{
accessorKey: "key",
friendlyName: t("key"),
header: () => (<span className="p-3">{t("key")}</span>),
cell: ({ row }) => {
const r = row.original;
@@ -116,6 +119,7 @@ export default function OrgApiKeysTable({
},
{
accessorKey: "createdAt",
friendlyName: t("createdAt"),
header: () => (<span className="p-3">{t("createdAt")}</span>),
cell: ({ row }) => {
const r = row.original;

6
src/components/PolicyTable.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { Button } from "@app/components/ui/button";
import {
ArrowUpDown,
@@ -36,10 +37,11 @@ interface Props {
export default function PolicyTable({ policies, onDelete, onAdd, onEdit }: Props) {
const t = useTranslations();
const columns: ColumnDef<PolicyRow>[] = [
const columns: ExtendedColumnDef<PolicyRow>[] = [
{
accessorKey: "orgId",
enableHiding: false,
friendlyName: t('orgId'),
header: ({ column }) => {
return (
<Button
@@ -56,6 +58,7 @@ export default function PolicyTable({ policies, onDelete, onAdd, onEdit }: Props
},
{
accessorKey: "roleMapping",
friendlyName: t('roleMapping'),
header: ({ column }) => {
return (
<Button
@@ -83,6 +86,7 @@ export default function PolicyTable({ policies, onDelete, onAdd, onEdit }: Props
},
{
accessorKey: "orgMapping",
friendlyName: t('orgMapping'),
header: ({ column }) => {
return (
<Button

16
src/components/ResourcesTable.tsx
View File

@@ -12,6 +12,7 @@ import {
getFilteredRowModel,
VisibilityState
} from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import {
DropdownMenu,
DropdownMenuContent,
@@ -583,10 +584,11 @@ export default function ResourcesTable({
);
}
const proxyColumns: ColumnDef<ResourceRow>[] = [
const proxyColumns: ExtendedColumnDef<ResourceRow>[] = [
{
accessorKey: "name",
enableHiding: false,
friendlyName: t("name"),
header: ({ column }) => {
return (
<Button
@@ -603,6 +605,7 @@ export default function ResourcesTable({
},
{
accessorKey: "nice",
friendlyName: t("resource"),
header: ({ column }) => {
return (
<Button
@@ -619,6 +622,7 @@ export default function ResourcesTable({
},
{
accessorKey: "protocol",
friendlyName: t("protocol"),
header: () => <span className="p-3">{t("protocol")}</span>,
cell: ({ row }) => {
const resourceRow = row.original;
@@ -636,6 +640,7 @@ export default function ResourcesTable({
{
id: "status",
accessorKey: "status",
friendlyName: t("status"),
header: ({ column }) => {
return (
<Button
@@ -667,6 +672,7 @@ export default function ResourcesTable({
},
{
accessorKey: "domain",
friendlyName: t("access"),
header: () => <span className="p-3">{t("access")}</span>,
cell: ({ row }) => {
const resourceRow = row.original;
@@ -694,6 +700,7 @@ export default function ResourcesTable({
},
{
accessorKey: "authState",
friendlyName: t("authentication"),
header: ({ column }) => {
return (
<Button
@@ -730,6 +737,7 @@ export default function ResourcesTable({
},
{
accessorKey: "enabled",
friendlyName: t("enabled"),
header: () => <span className="p-3">{t("enabled")}</span>,
cell: ({ row }) => (
<Switch
@@ -846,10 +854,11 @@ export default function ResourcesTable({
}
];
const internalColumns: ColumnDef<InternalResourceRow>[] = [
const internalColumns: ExtendedColumnDef<InternalResourceRow>[] = [
{
accessorKey: "name",
enableHiding: false,
friendlyName: t("name"),
header: ({ column }) => {
return (
<Button
@@ -866,6 +875,7 @@ export default function ResourcesTable({
},
{
accessorKey: "siteName",
friendlyName: t("siteName"),
header: () => <span className="p-3">{t("siteName")}</span>,
cell: ({ row }) => {
const resourceRow = row.original;
@@ -883,6 +893,7 @@ export default function ResourcesTable({
},
{
accessorKey: "mode",
friendlyName: t("editInternalResourceDialogMode"),
header: () => (
<span className="p-3">
{t("editInternalResourceDialogMode")}
@@ -900,6 +911,7 @@ export default function ResourcesTable({
},
{
accessorKey: "destination",
friendlyName: t("resourcesTableDestination"),
header: () => (
<span className="p-3">{t("resourcesTableDestination")}</span>
),

5
src/components/RolesTable.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import {
DropdownMenu,
DropdownMenuContent,
@@ -61,10 +62,11 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
}
};
const columns: ColumnDef<RoleRow>[] = [
const columns: ExtendedColumnDef<RoleRow>[] = [
{
accessorKey: "name",
enableHiding: false,
friendlyName: t("name"),
header: ({ column }) => {
return (
<Button
@@ -81,6 +83,7 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
},
{
accessorKey: "description",
friendlyName: t("description"),
header: () => (<span className="p-3">{t("description")}</span>)
},
{

7
src/components/ShareLinksTable.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { ShareLinksDataTable } from "@app/components/ShareLinksDataTable";
import {
DropdownMenu,
@@ -102,10 +103,11 @@ export default function ShareLinksTable({
});
}
const columns: ColumnDef<ShareLinkRow>[] = [
const columns: ExtendedColumnDef<ShareLinkRow>[] = [
{
accessorKey: "resourceName",
enableHiding: false,
friendlyName: t("resource"),
header: ({ column }) => {
return (
<Button
@@ -133,6 +135,7 @@ export default function ShareLinksTable({
},
{
accessorKey: "title",
friendlyName: t("title"),
header: ({ column }) => {
return (
<Button
@@ -212,6 +215,7 @@ export default function ShareLinksTable({
// },
{
accessorKey: "createdAt",
friendlyName: t("created"),
header: ({ column }) => {
return (
<Button
@@ -232,6 +236,7 @@ export default function ShareLinksTable({
},
{
accessorKey: "expiresAt",
friendlyName: t("expires"),
header: ({ column }) => {
return (
<Button

9
src/components/SitesTable.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { Column, ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { SitesDataTable } from "@app/components/SitesDataTable";
import {
DropdownMenu,
@@ -106,7 +107,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
});
};
const columns: ColumnDef<SiteRow>[] = [
const columns: ExtendedColumnDef<SiteRow>[] = [
{
accessorKey: "name",
enableHiding: false,
@@ -126,6 +127,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
},
{
accessorKey: "online",
friendlyName: t("online"),
header: ({ column }) => {
return (
<Button
@@ -167,6 +169,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
},
{
accessorKey: "nice",
friendlyName: t("site"),
header: ({ column }) => {
return (
<Button
@@ -191,6 +194,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
},
{
accessorKey: "mbIn",
friendlyName: t("dataIn"),
header: ({ column }) => {
return (
<Button
@@ -210,6 +214,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
},
{
accessorKey: "mbOut",
friendlyName: t("dataOut"),
header: ({ column }) => {
return (
<Button
@@ -229,6 +234,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
},
{
accessorKey: "type",
friendlyName: t("connectionType"),
header: ({ column }) => {
return (
<Button
@@ -286,6 +292,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
},
{
accessorKey: "exitNode",
friendlyName: t("exitNode"),
header: ({ column }) => {
return (
<Button

6
src/components/UsersTable.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import {
DropdownMenu,
DropdownMenuContent,
@@ -70,10 +71,11 @@ export default function UsersTable({ users: u }: UsersTableProps) {
}
};
const columns: ColumnDef<UserRow>[] = [
const columns: ExtendedColumnDef<UserRow>[] = [
{
accessorKey: "displayUsername",
enableHiding: false,
friendlyName: t("username"),
header: ({ column }) => {
return (
<Button
@@ -90,6 +92,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
},
{
accessorKey: "idpName",
friendlyName: t("identityProvider"),
header: ({ column }) => {
return (
<Button
@@ -116,6 +119,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
},
{
accessorKey: "role",
friendlyName: t("role"),
header: ({ column }) => {
return (
<Button

6
src/components/private/OrgIdpTable.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { IdpDataTable } from "@app/components/private/OrgIdpDataTable";
import { Button } from "@app/components/ui/button";
import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
@@ -59,9 +60,10 @@ export default function IdpTable({ idps, orgId }: Props) {
};
const columns: ColumnDef<IdpRow>[] = [
const columns: ExtendedColumnDef<IdpRow>[] = [
{
accessorKey: "idpId",
friendlyName: "ID",
header: ({ column }) => {
return (
<Button
@@ -78,6 +80,7 @@ export default function IdpTable({ idps, orgId }: Props) {
},
{
accessorKey: "name",
friendlyName: t("name"),
header: ({ column }) => {
return (
<Button
@@ -94,6 +97,7 @@ export default function IdpTable({ idps, orgId }: Props) {
},
{
accessorKey: "type",
friendlyName: t("type"),
header: ({ column }) => {
return (
<Button

17
src/components/ui/data-table.tsx
View File

@@ -12,6 +12,11 @@ import {
getFilteredRowModel,
VisibilityState
} from "@tanstack/react-table";
// Extended ColumnDef type that includes optional friendlyName for column visibility dropdown
export type ExtendedColumnDef<TData, TValue = unknown> = ColumnDef<TData, TValue> & {
friendlyName?: string;
};
import {
Table,
TableBody,
@@ -132,7 +137,7 @@ type TabFilter = {
};
type DataTableProps<TData, TValue> = {
columns: ColumnDef<TData, TValue>[];
columns: ExtendedColumnDef<TData, TValue>[];
data: TData[];
title?: string;
addButtonText?: string;
@@ -421,6 +426,12 @@ export function DataTable<TData, TValue>({
.getAllColumns()
.filter((column) => column.getCanHide())
.map((column) => {
const columnDef = column.columnDef as any;
const friendlyName = columnDef.friendlyName;
const displayName = friendlyName ||
(typeof columnDef.header === "string"
? columnDef.header
: column.id);
return (
<DropdownMenuCheckboxItem
key={column.id}
@@ -430,9 +441,7 @@ export function DataTable<TData, TValue>({
column.toggleVisibility(!!value)
}
>
{typeof column.columnDef.header === "string"
? column.columnDef.header
: column.id}
{displayName}
</DropdownMenuCheckboxItem>
);
})}