pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-10 23:16:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into feat/device-approvals

Browse Source
This commit is contained in:
Fred KISSIE
2026-01-14 23:08:12 +01:00
parent ce123a7f1a 5f184e9e5e
commit cbf184342b
78 changed files with 2815 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/[orgId]/settings/(private)/idp/layout.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { pullEnv } from "@app/lib/pullEnv";
import { build } from "@server/build";
import { redirect } from "next/navigation";
interface LayoutProps {
children: React.ReactNode;
params: Promise<{}>;
}
export default async function Layout(props: LayoutProps) {
const env = pullEnv();
if (build !== "saas" && !env.flags.useOrgOnlyIdp) {
redirect("/");
}
return props.children;
}

4
src/app/[orgId]/settings/clients/machine/page.tsx
View File

@@ -59,7 +59,9 @@ export default async function ClientsPage(props: ClientsPageProps) {
username: client.username,
userEmail: client.userEmail,
niceId: client.niceId,
agent: client.agent
agent: client.agent,
archived: client.archived || false,
blocked: client.blocked || false
};
};

2
src/app/[orgId]/settings/clients/user/page.tsx
View File

@@ -56,6 +56,8 @@ export default async function ClientsPage(props: ClientsPageProps) {
userEmail: client.userEmail,
niceId: client.niceId,
agent: client.agent,
archived: client.archived || false,
blocked: client.blocked || false,
approvalState: client.approvalState ?? "approved"
};
};

2
src/app/[orgId]/settings/layout.tsx
View File

@@ -82,7 +82,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
<Layout
orgId={params.orgId}
orgs={orgs}
navItems={orgNavSections()}
navItems={orgNavSections(env)}
>
{children}
</Layout>

9
src/app/[orgId]/settings/resources/proxy/[niceId]/authentication/page.tsx
View File

@@ -36,8 +36,8 @@ import {
import type { ResourceContextType } from "@app/contexts/resourceContext";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useOrgContext } from "@app/hooks/useOrgContext";
import { usePaidStatus } from "@app/hooks/usePaidStatus";
import { useResourceContext } from "@app/hooks/useResourceContext";
import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
import { toast } from "@app/hooks/useToast";
import { createApiClient, formatAxiosError } from "@app/lib/api";
import { orgQueries, resourceQueries } from "@app/lib/queries";
@@ -95,7 +95,7 @@ export default function ResourceAuthenticationPage() {
const router = useRouter();
const t = useTranslations();
const subscription = useSubscriptionStatusContext();
const { isPaidUser } = usePaidStatus();
const queryClient = useQueryClient();
const { data: resourceRoles = [], isLoading: isLoadingResourceRoles } =
@@ -129,7 +129,8 @@ export default function ResourceAuthenticationPage() {
);
const { data: orgIdps = [], isLoading: isLoadingOrgIdps } = useQuery(
orgQueries.identityProviders({
orgId: org.org.orgId
orgId: org.org.orgId,
useOrgOnlyIdp: env.flags.useOrgOnlyIdp
})
);
@@ -159,7 +160,7 @@ export default function ResourceAuthenticationPage() {
const allIdps = useMemo(() => {
if (build === "saas") {
if (subscription?.subscribed) {
if (isPaidUser) {
return orgIdps.map((idp) => ({
id: idp.idpId,
text: idp.name

5
src/app/admin/layout.tsx
View File

@@ -11,6 +11,7 @@ import { AxiosResponse } from "axios";
import { authCookieHeader } from "@app/lib/api/cookies";
import { Layout } from "@app/components/Layout";
import { adminNavSections } from "../navigation";
import { pullEnv } from "@app/lib/pullEnv";
export const dynamic = "force-dynamic";
@@ -27,6 +28,8 @@ export default async function AdminLayout(props: LayoutProps) {
const getUser = cache(verifySession);
const user = await getUser();
const env = pullEnv();
if (!user || !user.serverAdmin) {
redirect(`/`);
}
@@ -48,7 +51,7 @@ export default async function AdminLayout(props: LayoutProps) {
return (
<UserProvider user={user}>
<Layout orgs={orgs} navItems={adminNavSections}>
<Layout orgs={orgs} navItems={adminNavSections(env)}>
{props.children}
</Layout>
</UserProvider>

22
src/app/auth/layout.tsx
View File

@@ -44,7 +44,7 @@ export default async function AuthLayout({ children }: AuthLayoutProps) {
return (
<div className="h-full flex flex-col">
<div className="flex justify-end items-center p-3 space-x-2">
<div className="hidden md:flex justify-end items-center p-3 space-x-2">
<ThemeSwitcher />
</div>
@@ -127,26 +127,6 @@ export default async function AuthLayout({ children }: AuthLayoutProps) {
</a>
</>
)}
<Separator orientation="vertical" />
<a
href="https://docs.pangolin.net"
target="_blank"
rel="noopener noreferrer"
aria-label="Built by Fossorial"
className="flex items-center space-x-2 whitespace-nowrap"
>
<span>{t("docs")}</span>
</a>
<Separator orientation="vertical" />
<a
href="https://github.com/fosrl/pangolin"
target="_blank"
rel="noopener noreferrer"
aria-label="GitHub"
className="flex items-center space-x-2 whitespace-nowrap"
>
<span>{t("github")}</span>
</a>
</div>
</footer>
)}

29
src/app/auth/login/device/success/page.tsx
View File

@@ -7,6 +7,7 @@ import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
import { CheckCircle2 } from "lucide-react";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { useEffect } from "react";
export default function DeviceAuthSuccessPage() {
const { env } = useEnvContext();
@@ -20,6 +21,32 @@ export default function DeviceAuthSuccessPage() {
? env.branding.logo?.authPage?.height || 58
: 58;
useEffect(() => {
// Detect if we're on iOS or Android
const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera;
const isIOS = /iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream;
const isAndroid = /android/i.test(userAgent);
if (isAndroid) {
// For Android Chrome Custom Tabs, use intent:// scheme which works more reliably
// This explicitly tells Chrome to send an intent to the app, which will bring
// SignInCodeActivity back to the foreground (it has launchMode="singleTop")
setTimeout(() => {
window.location.href = "intent://auth-success#Intent;scheme=pangolin;package=net.pangolin.Pangolin;end";
}, 500);
} else if (isIOS) {
// Wait 500ms then attempt to open the app
setTimeout(() => {
// Try to open the app using deep link
window.location.href = "pangolin://";
setTimeout(() => {
window.location.href = "https://apps.apple.com/app/pangolin/net.pangolin.Pangolin.PangoliniOS";
}, 2000);
}, 500);
}
}, []);
return (
<>
<Card>
@@ -55,4 +82,4 @@ export default function DeviceAuthSuccessPage() {
</p>
</>
);
}
}

35
src/app/auth/login/page.tsx
View File

@@ -70,7 +70,7 @@ export default async function Page(props: {
}
let loginIdps: LoginFormIDP[] = [];
if (build !== "saas") {
if (build === "oss" || !env.flags.useOrgOnlyIdp) {
const idpsRes = await cache(
async () => await priv.get<AxiosResponse<ListIdpsResponse>>("/idp")
)();
@@ -103,6 +103,10 @@ export default async function Page(props: {
redirect={redirectUrl}
idps={loginIdps}
forceLogin={forceLogin}
showOrgLogin={
!isInvite && (build === "saas" || env.flags.useOrgOnlyIdp)
}
searchParams={searchParams}
/>
{(!signUpDisabled || isInvite) && (
@@ -120,35 +124,6 @@ export default async function Page(props: {
</Link>
</p>
)}
{!isInvite && build === "saas" ? (
<div className="text-center text-muted-foreground mt-12 flex flex-col items-center">
<span>{t("needToSignInToOrg")}</span>
<Link
href={`/auth/org${buildQueryString(searchParams)}`}
className="underline"
>
{t("orgAuthSignInToOrg")}
</Link>
</div>
) : null}
</>
);
}
function buildQueryString(searchParams: {
[key: string]: string | string[] | undefined;
}): string {
const params = new URLSearchParams();
const redirect = searchParams.redirect;
const forceLogin = searchParams.forceLogin;
if (redirect && typeof redirect === "string") {
params.set("redirect", redirect);
}
if (forceLogin && typeof forceLogin === "string") {
params.set("forceLogin", forceLogin);
}
const queryString = params.toString();
return queryString ? `?${queryString}` : "";
}

41
src/app/auth/org/[orgId]/page.tsx
View File

@@ -11,6 +11,7 @@ import {
} from "@server/routers/loginPage/types";
import { redirect } from "next/navigation";
import OrgLoginPage from "@app/components/OrgLoginPage";
import { pullEnv } from "@app/lib/pullEnv";
export const dynamic = "force-dynamic";
@@ -21,7 +22,9 @@ export default async function OrgAuthPage(props: {
const searchParams = await props.searchParams;
const params = await props.params;
if (build !== "saas") {
const env = pullEnv();
if (build !== "saas" && !env.flags.useOrgOnlyIdp) {
const queryString = new URLSearchParams(searchParams as any).toString();
redirect(`/auth/login${queryString ? `?${queryString}` : ""}`);
}
@@ -50,29 +53,25 @@ export default async function OrgAuthPage(props: {
} catch (e) {}
let loginIdps: LoginFormIDP[] = [];
if (build === "saas") {
const idpsRes = await priv.get<AxiosResponse<ListOrgIdpsResponse>>(
`/org/${orgId}/idp`
);
const idpsRes = await priv.get<AxiosResponse<ListOrgIdpsResponse>>(
`/org/${orgId}/idp`
);
loginIdps = idpsRes.data.data.idps.map((idp) => ({
idpId: idp.idpId,
name: idp.name,
variant: idp.variant
})) as LoginFormIDP[];
}
loginIdps = idpsRes.data.data.idps.map((idp) => ({
idpId: idp.idpId,
name: idp.name,
variant: idp.variant
})) as LoginFormIDP[];
let branding: LoadLoginPageBrandingResponse | null = null;
if (build === "saas") {
try {
const res = await priv.get<
AxiosResponse<LoadLoginPageBrandingResponse>
>(`/login-page-branding?orgId=${orgId}`);
if (res.status === 200) {
branding = res.data.data;
}
} catch (error) {}
}
try {
const res = await priv.get<
AxiosResponse<LoadLoginPageBrandingResponse>
>(`/login-page-branding?orgId=${orgId}`);
if (res.status === 200) {
branding = res.data.data;
}
} catch (error) {}
return (
<OrgLoginPage

6
src/app/auth/org/page.tsx
View File

@@ -33,12 +33,12 @@ export default async function OrgAuthPage(props: {
const forceLoginParam = searchParams.forceLogin;
const forceLogin = forceLoginParam === "true";
if (build !== "saas") {
const env = pullEnv();
if (build !== "saas" && !env.flags.useOrgOnlyIdp) {
redirect("/");
}
const env = pullEnv();
const authHeader = await authCookieHeader();
if (searchParams.token) {

2
src/app/auth/resource/[resourceGuid]/page.tsx
View File

@@ -204,7 +204,7 @@ export default async function ResourceAuthPage(props: {
}
let loginIdps: LoginFormIDP[] = [];
if (build === "saas") {
if (build === "saas" || env.flags.useOrgOnlyIdp) {
if (subscribed) {
const idpsRes = await cache(
async () =>

2
src/app/globals.css
View File

@@ -21,6 +21,7 @@
--accent: oklch(0.967 0.001 286.375);
--accent-foreground: oklch(0.21 0.006 285.885);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.985 0 0);
--border: oklch(0.91 0.004 286.32);
--input: oklch(0.92 0.004 286.32);
--ring: oklch(0.705 0.213 47.604);
@@ -55,6 +56,7 @@
--accent: oklch(0.274 0.006 286.033);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.5382 0.1949 22.216);
--destructive-foreground: oklch(0.985 0 0);
--border: oklch(1 0 0 / 13%);
--input: oklch(1 0 0 / 18%);
--ring: oklch(0.646 0.222 41.116);

36
src/app/navigation.tsx
View File

@@ -1,4 +1,5 @@
import { SidebarNavItem } from "@app/components/SidebarNav";
import { Env } from "@app/lib/types/env";
import { build } from "@server/build";
import {
ChartLine,
@@ -39,7 +40,7 @@ export const orgLangingNavItems: SidebarNavItem[] = [
}
];
export const orgNavSections = (): SidebarNavSection[] => [
export const orgNavSections = (env?: Env): SidebarNavSection[] => [
{
heading: "sidebarGeneral",
items: [
@@ -92,8 +93,7 @@ export const orgNavSections = (): SidebarNavSection[] => [
{
title: "sidebarRemoteExitNodes",
href: "/{orgId}/settings/remote-exit-nodes",
icon: <Server className="size-4 flex-none" />,
showEE: true
icon: <Server className="size-4 flex-none" />
}
]
: [])
@@ -123,13 +123,21 @@ export const orgNavSections = (): SidebarNavSection[] => [
href: "/{orgId}/settings/access/roles",
icon: <Users className="size-4 flex-none" />
},
...(build === "saas"
...(build === "saas" || env?.flags.useOrgOnlyIdp
? [
{
title: "sidebarIdentityProviders",
href: "/{orgId}/settings/idp",
icon: <Fingerprint className="size-4 flex-none" />,
showEE: true
icon: <Fingerprint className="size-4 flex-none" />
}
]
: []),
...(build !== "oss"
? [
{
title: "sidebarApprovals",
href: "/{orgId}/settings/access/approvals",
icon: <UserCog className="size-4 flex-none" />
}
]
: []),
@@ -237,7 +245,7 @@ export const orgNavSections = (): SidebarNavSection[] => [
}
];
export const adminNavSections: SidebarNavSection[] = [
export const adminNavSections = (env?: Env): SidebarNavSection[] => [
{
heading: "sidebarAdmin",
items: [
@@ -251,11 +259,15 @@ export const adminNavSections: SidebarNavSection[] = [
href: "/admin/api-keys",
icon: <KeyRound className="size-4 flex-none" />
},
{
title: "sidebarIdentityProviders",
href: "/admin/idp",
icon: <Fingerprint className="size-4 flex-none" />
},
...(build === "oss" || !env?.flags.useOrgOnlyIdp
? [
{
title: "sidebarIdentityProviders",
href: "/admin/idp",
icon: <Fingerprint className="size-4 flex-none" />
}
]
: []),
...(build == "enterprise"
? [
{

6
src/components/AuthPageBrandingForm.tsx
View File

@@ -118,6 +118,7 @@ export default function AuthPageBrandingForm({
const brandingData = form.getValues();
if (!isValid || !isPaidUser) return;
try {
const updateRes = await api.put(
`/org/${orgId}/login-page-branding`,
@@ -289,7 +290,8 @@ export default function AuthPageBrandingForm({
</div>
</div>
{build === "saas" && (
{build === "saas" ||
env.env.flags.useOrgOnlyIdp ? (
<>
<div className="mt-3 mb-6">
<SettingsSectionTitle>
@@ -343,7 +345,7 @@ export default function AuthPageBrandingForm({
/>
</div>
</>
)}
) : null}
<div className="mt-3 mb-6">
<SettingsSectionTitle>

5
src/components/ConfirmDeleteDialog.tsx
View File

@@ -63,6 +63,8 @@ export default function ConfirmDeleteDialog({
}
});
const isConfirmed = form.watch("string") === string;
async function onSubmit() {
try {
await onConfirm();
@@ -139,7 +141,8 @@ export default function ConfirmDeleteDialog({
type="submit"
form="confirm-delete-form"
loading={loading}
disabled={loading}
disabled={loading || !isConfirmed}
className={!isConfirmed && !loading ? "opacity-50" : ""}
>
{buttonText}
</Button>

47
src/components/DashboardLoginForm.tsx
View File

@@ -17,17 +17,26 @@ import { cleanRedirect } from "@app/lib/cleanRedirect";
import BrandingLogo from "@app/components/BrandingLogo";
import { useTranslations } from "next-intl";
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
import Link from "next/link";
import { Button } from "./ui/button";
import { ArrowRight } from "lucide-react";
type DashboardLoginFormProps = {
redirect?: string;
idps?: LoginFormIDP[];
forceLogin?: boolean;
showOrgLogin?: boolean;
searchParams?: {
[key: string]: string | string[] | undefined;
};
};
export default function DashboardLoginForm({
redirect,
idps,
forceLogin
forceLogin,
showOrgLogin,
searchParams
}: DashboardLoginFormProps) {
const router = useRouter();
const { env } = useEnvContext();
@@ -35,6 +44,9 @@ export default function DashboardLoginForm({
const { isUnlocked } = useLicenseStatusContext();
function getSubtitle() {
if (forceLogin) {
return t("loginRequiredForDevice");
}
if (isUnlocked() && env.branding?.loginPage?.subtitleText) {
return env.branding.loginPage.subtitleText;
}
@@ -57,6 +69,22 @@ export default function DashboardLoginForm({
<div className="text-center space-y-1 pt-3">
<p className="text-muted-foreground">{getSubtitle()}</p>
</div>
{showOrgLogin && (
<div className="space-y-2 mt-4">
<Link
href={`/auth/org${buildQueryString(searchParams || {})}`}
className="underline"
>
<Button
variant="secondary"
className="w-full gap-2"
>
{t("orgAuthSignInToOrg")}
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
</div>
)}
</CardHeader>
<CardContent className="pt-6">
<LoginForm
@@ -76,3 +104,20 @@ export default function DashboardLoginForm({
</Card>
);
}
function buildQueryString(searchParams: {
[key: string]: string | string[] | undefined;
}): string {
const params = new URLSearchParams();
const redirect = searchParams.redirect;
const forceLogin = searchParams.forceLogin;
if (redirect && typeof redirect === "string") {
params.set("redirect", redirect);
}
if (forceLogin && typeof forceLogin === "string") {
params.set("forceLogin", forceLogin);
}
const queryString = params.toString();
return queryString ? `?${queryString}` : "";
}

4
src/components/DeviceLoginForm.tsx
View File

@@ -85,8 +85,6 @@ export default function DeviceLoginForm({
data.code = data.code.slice(0, 4) + "-" + data.code.slice(4);
}
await new Promise((resolve) => setTimeout(resolve, 300));
// First check - get metadata
const res = await api.post(
"/device-web-auth/verify?forceLogin=true",
@@ -117,8 +115,6 @@ export default function DeviceLoginForm({
setLoading(true);
try {
await new Promise((resolve) => setTimeout(resolve, 300));
// Final verify
await api.post("/device-web-auth/verify", {
code: code,

9
src/components/LoginForm.tsx
View File

@@ -409,15 +409,6 @@ export default function LoginForm({
return (
<div className="space-y-4">
{forceLogin && (
<Alert variant="neutral">
<AlertDescription className="flex items-center gap-2">
<LockIcon className="w-4 h-4" />
{t("loginRequiredForDevice")}
</AlertDescription>
</Alert>
)}
{showSecurityKeyPrompt && (
<Alert>
<FingerprintIcon className="w-5 h-5 mr-2" />

211
src/components/MachineClientsTable.tsx
View File

@@ -12,7 +12,12 @@ import {
import { useEnvContext } from "@app/hooks/useEnvContext";
import { toast } from "@app/hooks/useToast";
import { createApiClient, formatAxiosError } from "@app/lib/api";
import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
import {
ArrowRight,
ArrowUpDown,
MoreHorizontal,
CircleSlash
} from "lucide-react";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { useRouter } from "next/navigation";
@@ -35,6 +40,8 @@ export type ClientRow = {
userEmail: string | null;
niceId: string;
agent: string | null;
archived?: boolean;
blocked?: boolean;
approvalState: "approved" | "pending" | "denied";
};
@@ -52,6 +59,7 @@ export default function MachineClientsTable({
const t = useTranslations();
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [isBlockModalOpen, setIsBlockModalOpen] = useState(false);
const [selectedClient, setSelectedClient] = useState<ClientRow | null>(
null
);
@@ -97,6 +105,76 @@ export default function MachineClientsTable({
});
};
const archiveClient = (clientId: number) => {
api.post(`/client/${clientId}/archive`)
.catch((e) => {
console.error("Error archiving client", e);
toast({
variant: "destructive",
title: "Error archiving client",
description: formatAxiosError(e, "Error archiving client")
});
})
.then(() => {
startTransition(() => {
router.refresh();
});
});
};
const unarchiveClient = (clientId: number) => {
api.post(`/client/${clientId}/unarchive`)
.catch((e) => {
console.error("Error unarchiving client", e);
toast({
variant: "destructive",
title: "Error unarchiving client",
description: formatAxiosError(e, "Error unarchiving client")
});
})
.then(() => {
startTransition(() => {
router.refresh();
});
});
};
const blockClient = (clientId: number) => {
api.post(`/client/${clientId}/block`)
.catch((e) => {
console.error("Error blocking client", e);
toast({
variant: "destructive",
title: "Error blocking client",
description: formatAxiosError(e, "Error blocking client")
});
})
.then(() => {
startTransition(() => {
router.refresh();
setIsBlockModalOpen(false);
setSelectedClient(null);
});
});
};
const unblockClient = (clientId: number) => {
api.post(`/client/${clientId}/unblock`)
.catch((e) => {
console.error("Error unblocking client", e);
toast({
variant: "destructive",
title: "Error unblocking client",
description: formatAxiosError(e, "Error unblocking client")
});
})
.then(() => {
startTransition(() => {
router.refresh();
});
});
};
// Check if there are any rows without userIds in the current view's data
const hasRowsWithoutUserId = useMemo(() => {
return machineClients.some((client) => !client.userId) ?? false;
@@ -122,6 +200,28 @@ export default function MachineClientsTable({
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
const r = row.original;
return (
<div className="flex items-center gap-2">
<span>{r.name}</span>
{r.archived && (
<Badge variant="secondary">
{t("archived")}
</Badge>
)}
{r.blocked && (
<Badge
variant="destructive"
className="flex items-center gap-1"
>
<CircleSlash className="h-3 w-3" />
{t("blocked")}
</Badge>
)}
</div>
);
}
},
{
@@ -301,14 +401,37 @@ export default function MachineClientsTable({
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{/* <Link */}
{/* className="block w-full" */}
{/* href={`/${clientRow.orgId}/settings/sites/${clientRow.nice}`} */}
{/* > */}
{/* <DropdownMenuItem> */}
{/* View settings */}
{/* </DropdownMenuItem> */}
{/* </Link> */}
<DropdownMenuItem
onClick={() => {
if (clientRow.archived) {
unarchiveClient(clientRow.id);
} else {
archiveClient(clientRow.id);
}
}}
>
<span>
{clientRow.archived
? "Unarchive"
: "Archive"}
</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
if (clientRow.blocked) {
unblockClient(clientRow.id);
} else {
setSelectedClient(clientRow);
setIsBlockModalOpen(true);
}
}}
>
<span>
{clientRow.blocked
? "Unblock"
: "Block"}
</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
setSelectedClient(clientRow);
@@ -359,6 +482,27 @@ export default function MachineClientsTable({
title="Delete Client"
/>
)}
{selectedClient && (
<ConfirmDeleteDialog
open={isBlockModalOpen}
setOpen={(val) => {
setIsBlockModalOpen(val);
if (!val) {
setSelectedClient(null);
}
}}
dialog={
<div className="space-y-2">
<p>{t("blockClientQuestion")}</p>
<p>{t("blockClientMessage")}</p>
</div>
}
buttonText={t("blockClientConfirm")}
onConfirm={async () => blockClient(selectedClient!.id)}
string={selectedClient.name}
title={t("blockClient")}
/>
)}
<DataTable
columns={columns}
@@ -377,6 +521,55 @@ export default function MachineClientsTable({
columnVisibility={defaultMachineColumnVisibility}
stickyLeftColumn="name"
stickyRightColumn="actions"
filters={[
{
id: "status",
label: t("status") || "Status",
multiSelect: true,
displayMode: "calculated",
options: [
{
id: "active",
label: t("active") || "Active",
value: "active"
},
{
id: "archived",
label: t("archived") || "Archived",
value: "archived"
},
{
id: "blocked",
label: t("blocked") || "Blocked",
value: "blocked"
}
],
filterFn: (
row: ClientRow,
selectedValues: (string | number | boolean)[]
) => {
if (selectedValues.length === 0) return true;
const rowArchived = row.archived || false;
const rowBlocked = row.blocked || false;
const isActive = !rowArchived && !rowBlocked;
if (selectedValues.includes("active") && isActive)
return true;
if (
selectedValues.includes("archived") &&
rowArchived
)
return true;
if (
selectedValues.includes("blocked") &&
rowBlocked
)
return true;
return false;
},
defaultValues: ["active"] // Default to showing active clients
}
]}
/>
</>
);

35
src/components/PermissionsSelectBox.tsx
View File

@@ -103,6 +103,10 @@ function getActionsCategories(root: boolean) {
Client: {
[t("actionCreateClient")]: "createClient",
[t("actionDeleteClient")]: "deleteClient",
[t("actionArchiveClient")]: "archiveClient",
[t("actionUnarchiveClient")]: "unarchiveClient",
[t("actionBlockClient")]: "blockClient",
[t("actionUnblockClient")]: "unblockClient",
[t("actionUpdateClient")]: "updateClient",
[t("actionListClients")]: "listClients",
[t("actionGetClient")]: "getClient"
@@ -114,6 +118,16 @@ function getActionsCategories(root: boolean) {
}
};
if (root || build === "saas" || env.flags.useOrgOnlyIdp) {
actionsByCategory["Identity Provider (IDP)"] = {
[t("actionCreateIdp")]: "createIdp",
[t("actionUpdateIdp")]: "updateIdp",
[t("actionDeleteIdp")]: "deleteIdp",
[t("actionListIdps")]: "listIdps",
[t("actionGetIdp")]: "getIdp"
};
}
if (root) {
actionsByCategory["Organization"] = {
[t("actionListOrgs")]: "listOrgs",
@@ -128,24 +142,21 @@ function getActionsCategories(root: boolean) {
...actionsByCategory["Organization"]
};
actionsByCategory["Identity Provider (IDP)"] = {
[t("actionCreateIdp")]: "createIdp",
[t("actionUpdateIdp")]: "updateIdp",
[t("actionDeleteIdp")]: "deleteIdp",
[t("actionListIdps")]: "listIdps",
[t("actionGetIdp")]: "getIdp",
[t("actionCreateIdpOrg")]: "createIdpOrg",
[t("actionDeleteIdpOrg")]: "deleteIdpOrg",
[t("actionListIdpOrgs")]: "listIdpOrgs",
[t("actionUpdateIdpOrg")]: "updateIdpOrg"
};
actionsByCategory["Identity Provider (IDP)"][t("actionCreateIdpOrg")] =
"createIdpOrg";
actionsByCategory["Identity Provider (IDP)"][t("actionDeleteIdpOrg")] =
"deleteIdpOrg";
actionsByCategory["Identity Provider (IDP)"][t("actionListIdpOrgs")] =
"listIdpOrgs";
actionsByCategory["Identity Provider (IDP)"][t("actionUpdateIdpOrg")] =
"updateIdpOrg";
actionsByCategory["User"] = {
[t("actionUpdateUser")]: "updateUser",
[t("actionGetUser")]: "getUser"
};
if (build == "saas") {
if (build === "saas") {
actionsByCategory["SAAS"] = {
["Send Usage Notification Email"]: "sendUsageNotification"
};

226
src/components/UserDevicesTable.tsx
View File

@@ -16,7 +16,8 @@ import {
ArrowRight,
ArrowUpDown,
ArrowUpRight,
MoreHorizontal
MoreHorizontal,
CircleSlash
} from "lucide-react";
import { useTranslations } from "next-intl";
import Link from "next/link";
@@ -45,6 +46,8 @@ export type ClientRow = {
niceId: string;
agent: string | null;
approvalState: "approved" | "pending" | "denied";
archived?: boolean;
blocked?: boolean;
};
type ClientTableProps = {
@@ -57,6 +60,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
const t = useTranslations();
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [isBlockModalOpen, setIsBlockModalOpen] = useState(false);
const [selectedClient, setSelectedClient] = useState<ClientRow | null>(
null
);
@@ -103,6 +107,76 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
});
};
const archiveClient = (clientId: number) => {
api.post(`/client/${clientId}/archive`)
.catch((e) => {
console.error("Error archiving client", e);
toast({
variant: "destructive",
title: "Error archiving client",
description: formatAxiosError(e, "Error archiving client")
});
})
.then(() => {
startTransition(() => {
router.refresh();
});
});
};
const unarchiveClient = (clientId: number) => {
api.post(`/client/${clientId}/unarchive`)
.catch((e) => {
console.error("Error unarchiving client", e);
toast({
variant: "destructive",
title: "Error unarchiving client",
description: formatAxiosError(e, "Error unarchiving client")
});
})
.then(() => {
startTransition(() => {
router.refresh();
});
});
};
const blockClient = (clientId: number) => {
api.post(`/client/${clientId}/block`)
.catch((e) => {
console.error("Error blocking client", e);
toast({
variant: "destructive",
title: "Error blocking client",
description: formatAxiosError(e, "Error blocking client")
});
})
.then(() => {
startTransition(() => {
router.refresh();
setIsBlockModalOpen(false);
setSelectedClient(null);
});
});
};
const unblockClient = (clientId: number) => {
api.post(`/client/${clientId}/unblock`)
.catch((e) => {
console.error("Error unblocking client", e);
toast({
variant: "destructive",
title: "Error unblocking client",
description: formatAxiosError(e, "Error unblocking client")
});
})
.then(() => {
startTransition(() => {
router.refresh();
});
});
};
// Check if there are any rows without userIds in the current view's data
const hasRowsWithoutUserId = useMemo(() => {
return userClients.some((client) => !client.userId);
@@ -128,6 +202,28 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
const r = row.original;
return (
<div className="flex items-center gap-2">
<span>{r.name}</span>
{r.archived && (
<Badge variant="secondary">
{t("archived")}
</Badge>
)}
{r.blocked && (
<Badge
variant="destructive"
className="flex items-center gap-1"
>
<CircleSlash className="h-3 w-3" />
{t("blocked")}
</Badge>
)}
</div>
);
}
},
{
@@ -351,7 +447,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
header: () => <span className="p-3"></span>,
cell: ({ row }) => {
const clientRow = row.original;
return !clientRow.userId ? (
return (
<div className="flex items-center gap-2 justify-end">
<DropdownMenu>
<DropdownMenuTrigger asChild>
@@ -361,34 +457,62 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{/* <Link */}
{/* className="block w-full" */}
{/* href={`/${clientRow.orgId}/settings/sites/${clientRow.nice}`} */}
{/* > */}
{/* <DropdownMenuItem> */}
{/* View settings */}
{/* </DropdownMenuItem> */}
{/* </Link> */}
<DropdownMenuItem
onClick={() => {
setSelectedClient(clientRow);
setIsDeleteModalOpen(true);
if (clientRow.archived) {
unarchiveClient(clientRow.id);
} else {
archiveClient(clientRow.id);
}
}}
>
<span className="text-red-500">Delete</span>
<span>
{clientRow.archived
? "Unarchive"
: "Archive"}
</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
if (clientRow.blocked) {
unblockClient(clientRow.id);
} else {
setSelectedClient(clientRow);
setIsBlockModalOpen(true);
}
}}
>
<span>
{clientRow.blocked
? "Unblock"
: "Block"}
</span>
</DropdownMenuItem>
{!clientRow.userId && (
// Machine client - also show delete option
<DropdownMenuItem
onClick={() => {
setSelectedClient(clientRow);
setIsDeleteModalOpen(true);
}}
>
<span className="text-red-500">
Delete
</span>
</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenu>
<Link
href={`/${clientRow.orgId}/settings/clients/${clientRow.id}`}
>
<Button variant={"outline"}>
Edit
View
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
</Link>
</div>
) : null;
);
}
});
@@ -397,7 +521,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
return (
<>
{selectedClient && (
{selectedClient && !selectedClient.userId && (
<ConfirmDeleteDialog
open={isDeleteModalOpen}
setOpen={(val) => {
@@ -416,6 +540,27 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
title="Delete Client"
/>
)}
{selectedClient && (
<ConfirmDeleteDialog
open={isBlockModalOpen}
setOpen={(val) => {
setIsBlockModalOpen(val);
if (!val) {
setSelectedClient(null);
}
}}
dialog={
<div className="space-y-2">
<p>{t("blockClientQuestion")}</p>
<p>{t("blockClientMessage")}</p>
</div>
}
buttonText={t("blockClientConfirm")}
onConfirm={async () => blockClient(selectedClient!.id)}
string={selectedClient.name}
title={t("blockClient")}
/>
)}
<ClientDownloadBanner />
@@ -432,6 +577,55 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
columnVisibility={defaultUserColumnVisibility}
stickyLeftColumn="name"
stickyRightColumn="actions"
filters={[
{
id: "status",
label: t("status") || "Status",
multiSelect: true,
displayMode: "calculated",
options: [
{
id: "active",
label: t("active") || "Active",
value: "active"
},
{
id: "archived",
label: t("archived") || "Archived",
value: "archived"
},
{
id: "blocked",
label: t("blocked") || "Blocked",
value: "blocked"
}
],
filterFn: (
row: ClientRow,
selectedValues: (string | number | boolean)[]
) => {
if (selectedValues.length === 0) return true;
const rowArchived = row.archived || false;
const rowBlocked = row.blocked || false;
const isActive = !rowArchived && !rowBlocked;
if (selectedValues.includes("active") && isActive)
return true;
if (
selectedValues.includes("archived") &&
rowArchived
)
return true;
if (
selectedValues.includes("blocked") &&
rowBlocked
)
return true;
return false;
},
defaultValues: ["active"] // Default to showing active clients
}
]}
/>
</>
);

210
src/components/ViewDevicesDialog.tsx
View File

@@ -27,6 +27,7 @@ import {
TableHeader,
TableRow
} from "@app/components/ui/table";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@app/components/ui/tabs";
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import { Loader2, RefreshCw } from "lucide-react";
import moment from "moment";
@@ -44,6 +45,7 @@ type Device = {
name: string | null;
clientId: number | null;
userId: string | null;
archived: boolean;
};
export default function ViewDevicesDialog({
@@ -57,8 +59,9 @@ export default function ViewDevicesDialog({
const [devices, setDevices] = useState<Device[]>([]);
const [loading, setLoading] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [isArchiveModalOpen, setIsArchiveModalOpen] = useState(false);
const [selectedDevice, setSelectedDevice] = useState<Device | null>(null);
const [activeTab, setActiveTab] = useState<"available" | "archived">("available");
const fetchDevices = async () => {
setLoading(true);
@@ -90,26 +93,59 @@ export default function ViewDevicesDialog({
}
}, [open]);
const deleteDevice = async (olmId: string) => {
const archiveDevice = async (olmId: string) => {
try {
await api.delete(`/user/${user?.userId}/olm/${olmId}`);
await api.post(`/user/${user?.userId}/olm/${olmId}/archive`);
toast({
title: t("deviceDeleted") || "Device deleted",
title: t("deviceArchived") || "Device archived",
description:
t("deviceDeletedDescription") ||
"The device has been successfully deleted."
t("deviceArchivedDescription") ||
"The device has been successfully archived."
});
setDevices(devices.filter((d) => d.olmId !== olmId));
setIsDeleteModalOpen(false);
// Update the device's archived status in the local state
setDevices(
devices.map((d) =>
d.olmId === olmId ? { ...d, archived: true } : d
)
);
setIsArchiveModalOpen(false);
setSelectedDevice(null);
} catch (error: any) {
console.error("Error deleting device:", error);
console.error("Error archiving device:", error);
toast({
variant: "destructive",
title: t("errorDeletingDevice") || "Error deleting device",
title: t("errorArchivingDevice"),
description: formatAxiosError(
error,
t("failedToDeleteDevice") || "Failed to delete device"
t("failedToArchiveDevice")
)
});
}
};
const unarchiveDevice = async (olmId: string) => {
try {
await api.post(`/user/${user?.userId}/olm/${olmId}/unarchive`);
toast({
title: t("deviceUnarchived") || "Device unarchived",
description:
t("deviceUnarchivedDescription") ||
"The device has been successfully unarchived."
});
// Update the device's archived status in the local state
setDevices(
devices.map((d) =>
d.olmId === olmId ? { ...d, archived: false } : d
)
);
} catch (error: any) {
console.error("Error unarchiving device:", error);
toast({
variant: "destructive",
title: t("errorUnarchivingDevice") || "Error unarchiving device",
description: formatAxiosError(
error,
t("failedToUnarchiveDevice") || "Failed to unarchive device"
)
});
}
@@ -118,7 +154,7 @@ export default function ViewDevicesDialog({
function reset() {
setDevices([]);
setSelectedDevice(null);
setIsDeleteModalOpen(false);
setIsArchiveModalOpen(false);
}
return (
@@ -147,9 +183,40 @@ export default function ViewDevicesDialog({
<div className="flex items-center justify-center py-8">
<Loader2 className="h-6 w-6 animate-spin" />
</div>
) : devices.length === 0 ? (
) : (
<Tabs
value={activeTab}
onValueChange={(value) =>
setActiveTab(value as "available" | "archived")
}
className="w-full"
>
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="available">
{t("available") || "Available"} (
{
devices.filter(
(d) => !d.archived
).length
}
)
</TabsTrigger>
<TabsTrigger value="archived">
{t("archived") || "Archived"} (
{
devices.filter(
(d) => d.archived
).length
}
)
</TabsTrigger>
</TabsList>
<TabsContent value="available" className="mt-4">
{devices.filter((d) => !d.archived)
.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
{t("noDevices") || "No devices found"}
{t("noDevices") ||
"No devices found"}
</div>
) : (
<div className="rounded-md border">
@@ -164,22 +231,33 @@ export default function ViewDevicesDialog({
"Date Created"}
</TableHead>
<TableHead>
{t("actions") || "Actions"}
{t("actions") ||
"Actions"}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{devices.map((device) => (
<TableRow key={device.olmId}>
{devices
.filter(
(d) => !d.archived
)
.map((device) => (
<TableRow
key={device.olmId}
>
<TableCell className="font-medium">
{device.name ||
t("unnamedDevice") ||
t(
"unnamedDevice"
) ||
"Unnamed Device"}
</TableCell>
<TableCell>
{moment(
device.dateCreated
).format("lll")}
).format(
"lll"
)}
</TableCell>
<TableCell>
<Button
@@ -188,13 +266,15 @@ export default function ViewDevicesDialog({
setSelectedDevice(
device
);
setIsDeleteModalOpen(
setIsArchiveModalOpen(
true
);
}}
>
{t("delete") ||
"Delete"}
{t(
"archive"
) ||
"Archive"}
</Button>
</TableCell>
</TableRow>
@@ -202,6 +282,74 @@ export default function ViewDevicesDialog({
</TableBody>
</Table>
</div>
)}
</TabsContent>
<TabsContent value="archived" className="mt-4">
{devices.filter((d) => d.archived)
.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
{t("noArchivedDevices") ||
"No archived devices found"}
</div>
) : (
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead className="pl-3">
{t("name") || "Name"}
</TableHead>
<TableHead>
{t("dateCreated") ||
"Date Created"}
</TableHead>
<TableHead>
{t("actions") ||
"Actions"}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{devices
.filter(
(d) => d.archived
)
.map((device) => (
<TableRow
key={device.olmId}
>
<TableCell className="font-medium">
{device.name ||
t(
"unnamedDevice"
) ||
"Unnamed Device"}
</TableCell>
<TableCell>
{moment(
device.dateCreated
).format(
"lll"
)}
</TableCell>
<TableCell>
<Button
variant="outline"
onClick={() => {
unarchiveDevice(device.olmId);
}}
>
{t("unarchive") || "Unarchive"}
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
)}
</TabsContent>
</Tabs>
)}
</CredenzaBody>
<CredenzaFooter>
@@ -216,9 +364,9 @@ export default function ViewDevicesDialog({
{selectedDevice && (
<ConfirmDeleteDialog
open={isDeleteModalOpen}
open={isArchiveModalOpen}
setOpen={(val) => {
setIsDeleteModalOpen(val);
setIsArchiveModalOpen(val);
if (!val) {
setSelectedDevice(null);
}
@@ -226,19 +374,19 @@ export default function ViewDevicesDialog({
dialog={
<div className="space-y-2">
<p>
{t("deviceQuestionRemove") ||
"Are you sure you want to delete this device?"}
{t("deviceQuestionArchive") ||
"Are you sure you want to archive this device?"}
</p>
<p>
{t("deviceMessageRemove") ||
"This action cannot be undone."}
{t("deviceMessageArchive") ||
"The device will be archived and removed from your active devices list."}
</p>
</div>
}
buttonText={t("deviceDeleteConfirm") || "Delete Device"}
onConfirm={async () => deleteDevice(selectedDevice.olmId)}
buttonText={t("deviceArchiveConfirm") || "Archive Device"}
onConfirm={async () => archiveDevice(selectedDevice.olmId)}
string={selectedDevice.name || selectedDevice.olmId}
title={t("deleteDevice") || "Delete Device"}
title={t("archiveDevice") || "Archive Device"}
/>
)}
</>

2
src/components/private/SplashImage.tsx
View File

@@ -21,7 +21,7 @@ export default function SplashImage({ children }: SplashImageProps) {
if (!env.branding.background_image_path) {
return false;
}
const pathsPrefixes = ["/auth/login", "/auth/signup", "/auth/resource"];
const pathsPrefixes = ["/auth/login", "/auth/signup", "/auth/resource", "/auth/org"];
for (const prefix of pathsPrefixes) {
if (pathname.startsWith(prefix)) {
return true;

10
src/components/private/ValidateSessionTransferToken.tsx
View File

@@ -50,9 +50,13 @@ export default function ValidateSessionTransferToken(
}
if (doRedirect) {
// add redirect param to dashboardUrl if provided
const fullUrl = `${env.app.dashboardUrl}${props.redirect || ""}`;
router.push(fullUrl);
if (props.redirect && props.redirect.startsWith("http")) {
router.push(props.redirect);
} else {
// add redirect param to dashboardUrl if provided
const fullUrl = `${env.app.dashboardUrl}${props.redirect || ""}`;
router.push(fullUrl);
}
}
}

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

@@ -33,7 +33,7 @@ import { Button } from "@app/components/ui/button";
import { useEffect, useMemo, useRef, useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus, Search, RefreshCw, Columns } from "lucide-react";
import { Plus, Search, RefreshCw, Columns, Filter } from "lucide-react";
import {
Card,
CardContent,
@@ -140,6 +140,22 @@ type TabFilter = {
filterFn: (row: any) => boolean;
};
type FilterOption = {
id: string;
label: string;
value: string | number | boolean;
};
type DataTableFilter = {
id: string;
label: string;
options: FilterOption[];
multiSelect?: boolean;
filterFn: (row: any, selectedValues: (string | number | boolean)[]) => boolean;
defaultValues?: (string | number | boolean)[];
displayMode?: "label" | "calculated"; // How to display the filter button text
};
type DataTableProps<TData, TValue> = {
columns: ExtendedColumnDef<TData, TValue>[];
data: TData[];
@@ -156,6 +172,8 @@ type DataTableProps<TData, TValue> = {
};
tabs?: TabFilter[];
defaultTab?: string;
filters?: DataTableFilter[];
filterDisplayMode?: "label" | "calculated"; // Global filter display mode (can be overridden per filter)
persistPageSize?: boolean | string;
defaultPageSize?: number;
columnVisibility?: Record<string, boolean>;
@@ -178,6 +196,8 @@ export function DataTable<TData, TValue>({
defaultSort,
tabs,
defaultTab,
filters,
filterDisplayMode = "label",
persistPageSize = false,
defaultPageSize = 20,
columnVisibility: defaultColumnVisibility,
@@ -235,6 +255,15 @@ export function DataTable<TData, TValue>({
const [activeTab, setActiveTab] = useState<string>(
defaultTab || tabs?.[0]?.id || ""
);
const [activeFilters, setActiveFilters] = useState<Record<string, (string | number | boolean)[]>>(
() => {
const initial: Record<string, (string | number | boolean)[]> = {};
filters?.forEach((filter) => {
initial[filter.id] = filter.defaultValues || [];
});
return initial;
}
);
// Track initial values to avoid storing defaults on first render
const initialPageSize = useRef(pageSize);
@@ -242,19 +271,32 @@ export function DataTable<TData, TValue>({
const hasUserChangedPageSize = useRef(false);
const hasUserChangedColumnVisibility = useRef(false);
// Apply tab filter to data
// Apply tab and custom filters to data
const filteredData = useMemo(() => {
if (!tabs || activeTab === "") {
return data;
let result = data;
// Apply tab filter
if (tabs && activeTab !== "") {
const activeTabFilter = tabs.find((tab) => tab.id === activeTab);
if (activeTabFilter) {
result = result.filter(activeTabFilter.filterFn);
}
}
const activeTabFilter = tabs.find((tab) => tab.id === activeTab);
if (!activeTabFilter) {
return data;
// Apply custom filters
if (filters && filters.length > 0) {
filters.forEach((filter) => {
const selectedValues = activeFilters[filter.id] || [];
if (selectedValues.length > 0) {
result = result.filter((row) =>
filter.filterFn(row, selectedValues)
);
}
});
}
return data.filter(activeTabFilter.filterFn);
}, [data, tabs, activeTab]);
return result;
}, [data, tabs, activeTab, filters, activeFilters]);
const table = useReactTable({
data: filteredData,
@@ -318,6 +360,64 @@ export function DataTable<TData, TValue>({
setPagination((prev) => ({ ...prev, pageIndex: 0 }));
};
const handleFilterChange = (
filterId: string,
optionValue: string | number | boolean,
checked: boolean
) => {
setActiveFilters((prev) => {
const currentValues = prev[filterId] || [];
const filter = filters?.find((f) => f.id === filterId);
if (!filter) return prev;
let newValues: (string | number | boolean)[];
if (filter.multiSelect) {
// Multi-select: add or remove the value
if (checked) {
newValues = [...currentValues, optionValue];
} else {
newValues = currentValues.filter((v) => v !== optionValue);
}
} else {
// Single-select: replace the value
newValues = checked ? [optionValue] : [];
}
return {
...prev,
[filterId]: newValues
};
});
// Reset to first page when changing filters
setPagination((prev) => ({ ...prev, pageIndex: 0 }));
};
// Calculate display text for a filter based on selected values
const getFilterDisplayText = (filter: DataTableFilter): string => {
const selectedValues = activeFilters[filter.id] || [];
if (selectedValues.length === 0) {
return filter.label;
}
const selectedOptions = filter.options.filter((option) =>
selectedValues.includes(option.value)
);
if (selectedOptions.length === 0) {
return filter.label;
}
if (selectedOptions.length === 1) {
return selectedOptions[0].label;
}
// Multiple selections: always join with "and"
return selectedOptions.map((opt) => opt.label).join(" and ");
};
// Enhanced pagination component that updates our local state
const handlePageSizeChange = (newPageSize: number) => {
hasUserChangedPageSize.current = true;
@@ -387,6 +487,63 @@ export function DataTable<TData, TValue>({
/>
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
</div>
{filters && filters.length > 0 && (
<div className="flex gap-2">
{filters.map((filter) => {
const selectedValues = activeFilters[filter.id] || [];
const hasActiveFilters = selectedValues.length > 0;
const displayMode = filter.displayMode || filterDisplayMode;
const displayText = displayMode === "calculated"
? getFilterDisplayText(filter)
: filter.label;
return (
<DropdownMenu key={filter.id}>
<DropdownMenuTrigger asChild>
<Button
variant={"outline"}
size="sm"
className="h-9"
>
<Filter className="h-4 w-4 mr-2" />
{displayText}
{displayMode === "label" && hasActiveFilters && (
<span className="ml-2 bg-muted text-foreground rounded-full px-2 py-0.5 text-xs">
{selectedValues.length}
</span>
)}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-48">
<DropdownMenuLabel>
{filter.label}
</DropdownMenuLabel>
<DropdownMenuSeparator />
{filter.options.map((option) => {
const isChecked = selectedValues.includes(option.value);
return (
<DropdownMenuCheckboxItem
key={option.id}
checked={isChecked}
onCheckedChange={(checked) =>
handleFilterChange(
filter.id,
option.value,
checked
)
}
onSelect={(e) => e.preventDefault()}
>
{option.label}
</DropdownMenuCheckboxItem>
);
})}
</DropdownMenuContent>
</DropdownMenu>
);
})}
</div>
)}
{tabs && tabs.length > 0 && (
<Tabs
value={activeTab}

4
src/lib/pullEnv.ts
View File

@@ -63,7 +63,9 @@ export function pullEnv(): Env {
disableProductHelpBanners:
process.env.FLAGS_DISABLE_PRODUCT_HELP_BANNERS === "true"
? true
: false
: false,
useOrgOnlyIdp:
process.env.USE_ORG_ONLY_IDP === "true" ? true : false
},
branding: {

15
src/lib/queries.ts
View File

@@ -158,7 +158,13 @@ export const orgQueries = {
return res.data.data.domains;
}
}),
identityProviders: ({ orgId }: { orgId: string }) =>
identityProviders: ({
orgId,
useOrgOnlyIdp
}: {
orgId: string;
useOrgOnlyIdp?: boolean;
}) =>
queryOptions({
queryKey: ["ORG", orgId, "IDPS"] as const,
queryFn: async ({ signal, meta }) => {
@@ -166,7 +172,12 @@ export const orgQueries = {
AxiosResponse<{
idps: { idpId: number; name: string }[];
}>
>(build === "saas" ? `/org/${orgId}/idp` : "/idp", { signal });
>(
build === "saas" || useOrgOnlyIdp
? `/org/${orgId}/idp`
: "/idp",
{ signal }
);
return res.data.data.idps;
}
})

2
src/lib/themeColors.ts
View File

@@ -15,6 +15,7 @@ const defaultTheme = {
accent: "oklch(0.967 0.001 286.375)",
"accent-foreground": "oklch(0.21 0.006 285.885)",
destructive: "oklch(0.577 0.245 27.325)",
"destructive-foreground": "oklch(0.985 0 0)",
border: "oklch(0.92 0.004 286.32)",
input: "oklch(0.92 0.004 286.32)",
ring: "oklch(0.705 0.213 47.604)",
@@ -41,6 +42,7 @@ const defaultTheme = {
accent: "oklch(0.274 0.006 286.033)",
"accent-foreground": "oklch(0.985 0 0)",
destructive: "oklch(0.704 0.191 22.216)",
"destructive-foreground": "oklch(0.985 0 0)",
border: "oklch(1 0 0 / 10%)",
input: "oklch(1 0 0 / 15%)",
ring: "oklch(0.646 0.222 41.116)",

1
src/lib/types/env.ts
View File

@@ -34,6 +34,7 @@ export type Env = {
hideSupporterKey: boolean;
usePangolinDns: boolean;
disableProductHelpBanners: boolean;
useOrgOnlyIdp: boolean;
};
branding: {
appName?: string;