calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-30 20:52:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

import and unassocaite org idp

Browse Source
This commit is contained in:
miloschwartz
2026-04-16 20:58:18 -07:00
parent 6fb8dae966
commit 93400ace27
18 changed files with 997 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
messages/en-US.json
View File

@@ -2899,5 +2899,22 @@
"httpDestUpdatedSuccess": "Destination updated successfully",
"httpDestCreatedSuccess": "Destination created successfully",
"httpDestUpdateFailed": "Failed to update destination",
"httpDestCreateFailed": "Failed to create destination"
"httpDestCreateFailed": "Failed to create destination",
"idpAddActionCreateNew": "Create new identity provider",
"idpAddActionImportFromOrg": "Import from another organization",
"idpImportDialogTitle": "Import Identity Provider",
"idpImportDialogDescription": "Choose an identity provider from an organization where you are an admin. It will be linked to this organization.",
"idpImportSearchPlaceholder": "Search by organization or provider name...",
"idpImportEmpty": "No identity providers found.",
"idpImportedDescription": "Identity provider imported successfully.",
"idpDeleteGlobalQuestion": "Are you sure you want to permanently delete this identity provider?",
"idpDeleteGlobalDescription": "This will permanently delete the identity provider from all organizations it is associated with.",
"idpUnassociateTitle": "Unassociate Identity Provider",
"idpUnassociateQuestion": "Are you sure you want to unassociate this identity provider from this organization?",
"idpUnassociateDescription": "All users associated with this identity provider will be removed from this organization, but the identity provider will still continue to exist for other associated organizations.",
"idpUnassociateConfirm": "Confirm Unassociate Identity Provider",
"idpUnassociateWarning": "This cannot be undone for this organization.",
"idpUnassociatedDescription": "Identity provider unassociated from this organization successfully",
"idpUnassociateMenu": "Unassociate",
"idpDeleteAllOrgsMenu": "Delete"
}

BIN
public/idp/openid.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

39
server/private/routers/external.ts
View File

@@ -40,7 +40,9 @@ import {
verifyRoleAccess,
verifyUserAccess,
verifyUserCanSetUserOrgRoles,
verifySiteProvisioningKeyAccess
verifySiteProvisioningKeyAccess,
verifyIsLoggedInUser,
verifyAdmin
} from "@server/middlewares";
import { ActionsEnum } from "@server/auth/actions";
import {
@@ -94,6 +96,17 @@ authenticated.put(
orgIdp.createOrgOidcIdp
);
authenticated.post(
"/org/:orgId/idp/:idpId/import",
verifyValidLicense,
verifyValidSubscription(tierMatrix.orgOidc),
verifyOrgAccess,
verifyLimits,
verifyAdmin,
logActionAudit(ActionsEnum.createIdp),
orgIdp.importOrgIdp
);
authenticated.post(
"/org/:orgId/idp/:idpId/oidc",
verifyValidLicense,
@@ -116,6 +129,16 @@ authenticated.delete(
orgIdp.deleteOrgIdp
);
authenticated.delete(
"/org/:orgId/idp/:idpId/association",
verifyValidLicense,
verifyOrgAccess,
verifyIdpAccess,
verifyUserHasAction(ActionsEnum.deleteIdp),
logActionAudit(ActionsEnum.deleteIdp),
orgIdp.unassociateOrgIdp
);
authenticated.get(
"/org/:orgId/idp/:idpId",
verifyValidLicense,
@@ -125,16 +148,14 @@ authenticated.get(
orgIdp.getOrgIdp
);
authenticated.get(
"/org/:orgId/idp",
verifyValidLicense,
verifyOrgAccess,
verifyUserHasAction(ActionsEnum.listIdps),
orgIdp.listOrgIdps
);
authenticated.get("/org/:orgId/idp", orgIdp.listOrgIdps); // anyone can see this; it's just a list of idp names and ids
authenticated.get(
"/user/:userId/admin-org-idps",
verifyIsLoggedInUser,
orgIdp.listUserAdminOrgIdps
);
authenticated.get(
"/org/:orgId/certificate/:domainId/:domain",
verifyValidLicense,

225
server/private/routers/orgIdp/importOrgIdp.ts Normal file
View File

@@ -0,0 +1,225 @@
/*
* This file is part of a proprietary work.
*
* Copyright (c) 2025-2026 Fossorial, Inc.
* All rights reserved.
*
* This file is licensed under the Fossorial Commercial License.
* You may not use this file except in compliance with the License.
* Unauthorized use, copying, modification, or distribution is strictly prohibited.
*
* This file is not licensed under the AGPLv3.
*/
import { Request, Response, NextFunction } from "express";
import { z } from "zod";
import { db } from "@server/db";
import response from "@server/lib/response";
import HttpCode from "@server/types/HttpCode";
import createHttpError from "http-errors";
import logger from "@server/logger";
import { fromError } from "zod-validation-error";
import { OpenAPITags, registry } from "@server/openApi";
import { idp, idpOrg, orgs, roles, userOrgs } from "@server/db";
import { and, eq, inArray } from "drizzle-orm";
import { CreateOrgIdpResponse } from "@server/routers/orgIdp/types";
import { generateOidcRedirectUrl } from "@server/lib/idp/generateRedirectUrl";
import privateConfig from "#private/lib/config";
import { checkOrgAccessPolicy } from "#dynamic/lib/checkOrgAccessPolicy";
import { getUserOrgRoleIds } from "@server/lib/userOrgRoles";
const paramsSchema = z.strictObject({
orgId: z.string().nonempty(),
idpId: z.coerce.number<number>().int().positive()
});
const bodySchema = z.strictObject({
sourceOrgId: z.string().nonempty()
});
async function userIsOrgAdmin(
userId: string,
orgId: string,
session: Request["session"]
): Promise<boolean> {
const [userOrgRow] = await db
.select()
.from(userOrgs)
.where(and(eq(userOrgs.userId, userId), eq(userOrgs.orgId, orgId)))
.limit(1);
if (!userOrgRow) {
return false;
}
const policyCheck = await checkOrgAccessPolicy({
orgId,
userId,
session
});
if (!policyCheck.allowed || policyCheck.error) {
return false;
}
const roleIds = await getUserOrgRoleIds(userId, orgId);
if (roleIds.length === 0) {
return false;
}
const [adminRole] = await db
.select()
.from(roles)
.where(and(inArray(roles.roleId, roleIds), eq(roles.isAdmin, true)))
.limit(1);
return !!adminRole;
}
export async function importOrgIdp(
req: Request,
res: Response,
next: NextFunction
): Promise<any> {
try {
const parsedParams = paramsSchema.safeParse(req.params);
if (!parsedParams.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
fromError(parsedParams.error).toString()
)
);
}
const { orgId: targetOrgId, idpId } = parsedParams.data;
const parsedBody = bodySchema.safeParse(req.body);
if (!parsedBody.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
fromError(parsedBody.error).toString()
)
);
}
const { sourceOrgId } = parsedBody.data;
if (
privateConfig.getRawPrivateConfig().app.identity_provider_mode !==
"org"
) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
"Organization-specific IdP creation is not allowed in the current identity provider mode. Set app.identity_provider_mode to 'org' in the private configuration to enable this feature."
)
);
}
if (sourceOrgId === targetOrgId) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
"Source and target organization must be different"
)
);
}
const userId = req.user!.userId;
const sourceLinked = await db
.select()
.from(idpOrg)
.where(and(eq(idpOrg.idpId, idpId), eq(idpOrg.orgId, sourceOrgId)))
.limit(1);
if (sourceLinked.length === 0) {
return next(
createHttpError(
HttpCode.NOT_FOUND,
"IdP not found for the source organization"
)
);
}
const sourceAdmin = await userIsOrgAdmin(
userId,
sourceOrgId,
req.session
);
if (!sourceAdmin) {
return next(
createHttpError(
HttpCode.FORBIDDEN,
"You must be an organization admin in the source organization where this IdP is linked"
)
);
}
const [targetOrg] = await db
.select({ orgId: orgs.orgId })
.from(orgs)
.where(eq(orgs.orgId, targetOrgId))
.limit(1);
if (!targetOrg) {
return next(
createHttpError(
HttpCode.NOT_FOUND,
"Target organization not found"
)
);
}
const [existingIdp] = await db
.select()
.from(idp)
.where(eq(idp.idpId, idpId))
.limit(1);
if (!existingIdp) {
return next(createHttpError(HttpCode.NOT_FOUND, "IdP not found"));
}
const alreadyTarget = await db
.select()
.from(idpOrg)
.where(and(eq(idpOrg.idpId, idpId), eq(idpOrg.orgId, targetOrgId)))
.limit(1);
if (alreadyTarget.length > 0) {
return next(
createHttpError(
HttpCode.CONFLICT,
"This IdP is already linked to the target organization"
)
);
}
await db.insert(idpOrg).values({
idpId,
orgId: targetOrgId,
roleMapping: null,
orgMapping: `'${targetOrgId}'`
});
const redirectUrl = await generateOidcRedirectUrl(idpId, targetOrgId);
return response<CreateOrgIdpResponse>(res, {
data: {
idpId,
redirectUrl
},
success: true,
error: false,
message: "Org IdP imported successfully",
status: HttpCode.CREATED
});
} catch (error) {
logger.error(error);
return next(
createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
);
}
}

3
server/private/routers/orgIdp/index.ts
View File

@@ -12,7 +12,10 @@
*/
export * from "./createOrgOidcIdp";
export * from "./importOrgIdp";
export * from "./getOrgIdp";
export * from "./listOrgIdps";
export * from "./listUserAdminOrgIdps";
export * from "./updateOrgOidcIdp";
export * from "./deleteOrgIdp";
export * from "./unassociateOrgIdp";

160
server/private/routers/orgIdp/listUserAdminOrgIdps.ts Normal file
View File

@@ -0,0 +1,160 @@
/*
* This file is part of a proprietary work.
*
* Copyright (c) 2025-2026 Fossorial, Inc.
* All rights reserved.
*
* This file is licensed under the Fossorial Commercial License.
* You may not use this file except in compliance with the License.
* Unauthorized use, copying, modification, or distribution is strictly prohibited.
*
* This file is not licensed under the AGPLv3.
*/
import { Request, Response, NextFunction } from "express";
import { z } from "zod";
import { db, idpOidcConfig } from "@server/db";
import { idp, idpOrg, orgs, roles, userOrgRoles } from "@server/db";
import response from "@server/lib/response";
import HttpCode from "@server/types/HttpCode";
import createHttpError from "http-errors";
import { and, eq, inArray, sql } from "drizzle-orm";
import logger from "@server/logger";
import { fromError } from "zod-validation-error";
import { OpenAPITags, registry } from "@server/openApi";
import { ListUserAdminOrgIdpsResponse } from "@server/routers/orgIdp/types";
const querySchema = z.strictObject({
limit: z
.string()
.optional()
.default("1000")
.transform(Number)
.pipe(z.int().nonnegative()),
offset: z
.string()
.optional()
.default("0")
.transform(Number)
.pipe(z.int().nonnegative())
});
const paramsSchema = z.strictObject({
userId: z.string().nonempty()
});
async function getOrgIdsWhereUserIsAdmin(userId: string): Promise<string[]> {
const rows = await db
.select({ orgId: userOrgRoles.orgId })
.from(userOrgRoles)
.innerJoin(roles, eq(userOrgRoles.roleId, roles.roleId))
.where(and(eq(userOrgRoles.userId, userId), eq(roles.isAdmin, true)));
return [...new Set(rows.map((r) => r.orgId))];
}
async function queryIdpsForOrgs(
orgIds: string[],
limit: number,
offset: number
) {
return db
.select({
idpId: idp.idpId,
orgId: idpOrg.orgId,
orgName: orgs.name,
name: idp.name,
type: idp.type,
variant: idpOidcConfig.variant,
tags: idp.tags
})
.from(idpOrg)
.where(inArray(idpOrg.orgId, orgIds))
.innerJoin(orgs, eq(orgs.orgId, idpOrg.orgId))
.innerJoin(idp, eq(idp.idpId, idpOrg.idpId))
.innerJoin(idpOidcConfig, eq(idpOidcConfig.idpId, idpOrg.idpId))
.orderBy(sql`idp.name DESC`)
.limit(limit)
.offset(offset);
}
async function countIdpsForOrgs(orgIds: string[]) {
const [{ count }] = await db
.select({ count: sql<number>`count(*)` })
.from(idpOrg)
.innerJoin(idp, eq(idp.idpId, idpOrg.idpId))
.innerJoin(idpOidcConfig, eq(idpOidcConfig.idpId, idpOrg.idpId))
.where(inArray(idpOrg.orgId, orgIds));
return count;
}
export async function listUserAdminOrgIdps(
req: Request,
res: Response,
next: NextFunction
): Promise<any> {
try {
const parsedParams = paramsSchema.safeParse(req.params);
if (!parsedParams.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
fromError(parsedParams.error).toString()
)
);
}
const { userId } = parsedParams.data;
const parsedQuery = querySchema.safeParse(req.query);
if (!parsedQuery.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
fromError(parsedQuery.error).toString()
)
);
}
const { limit, offset } = parsedQuery.data;
const adminOrgIds = await getOrgIdsWhereUserIsAdmin(userId);
if (adminOrgIds.length === 0) {
return response<ListUserAdminOrgIdpsResponse>(res, {
data: {
idps: [],
pagination: {
total: 0,
limit,
offset
}
},
success: true,
error: false,
message: "Org Idps retrieved successfully",
status: HttpCode.OK
});
}
const list = await queryIdpsForOrgs(adminOrgIds, limit, offset);
const total = await countIdpsForOrgs(adminOrgIds);
return response<ListUserAdminOrgIdpsResponse>(res, {
data: {
idps: list,
pagination: {
total,
limit,
offset
}
},
success: true,
error: false,
message: "Org Idps retrieved successfully",
status: HttpCode.OK
});
} catch (error) {
logger.error(error);
return next(
createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
);
}
}

109
server/private/routers/orgIdp/unassociateOrgIdp.ts Normal file
View File

@@ -0,0 +1,109 @@
/*
* This file is part of a proprietary work.
*
* Copyright (c) 2025-2026 Fossorial, Inc.
* All rights reserved.
*
* This file is licensed under the Fossorial Commercial License.
* You may not use this file except in compliance with the License.
* Unauthorized use, copying, modification, or distribution is strictly prohibited.
*
* This file is not licensed under the AGPLv3.
*/
import { Request, Response, NextFunction } from "express";
import { z } from "zod";
import { db, idpOrg } from "@server/db";
import response from "@server/lib/response";
import HttpCode from "@server/types/HttpCode";
import createHttpError from "http-errors";
import logger from "@server/logger";
import { fromError } from "zod-validation-error";
import { and, eq, sql } from "drizzle-orm";
import { OpenAPITags, registry } from "@server/openApi";
import privateConfig from "#private/lib/config";
const paramsSchema = z
.object({
orgId: z.string().nonempty(),
idpId: z.coerce.number<number>().int().positive()
})
.strict();
export async function unassociateOrgIdp(
req: Request,
res: Response,
next: NextFunction
): Promise<any> {
try {
const parsedParams = paramsSchema.safeParse(req.params);
if (!parsedParams.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
fromError(parsedParams.error).toString()
)
);
}
const { orgId, idpId } = parsedParams.data;
if (
privateConfig.getRawPrivateConfig().app.identity_provider_mode !==
"org"
) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
"Organization-specific IdP creation is not allowed in the current identity provider mode. Set app.identity_provider_mode to 'org' in the private configuration to enable this feature."
)
);
}
const [association] = await db
.select()
.from(idpOrg)
.where(and(eq(idpOrg.idpId, idpId), eq(idpOrg.orgId, orgId)))
.limit(1);
if (!association) {
return next(
createHttpError(
HttpCode.NOT_FOUND,
`IdP with ID ${idpId} is not associated with organization ${orgId}`
)
);
}
const [{ count }] = await db
.select({ count: sql<number>`count(*)` })
.from(idpOrg)
.where(eq(idpOrg.idpId, idpId));
if (count <= 1) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
"This is the last organization associated with this identity provider. Delete it instead."
)
);
}
await db
.delete(idpOrg)
.where(and(eq(idpOrg.idpId, idpId), eq(idpOrg.orgId, orgId)));
return response<null>(res, {
data: null,
success: true,
error: false,
message: "Org IdP unassociated successfully",
status: HttpCode.OK
});
} catch (error) {
logger.error(error);
return next(
createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
);
}
}

19
server/routers/orgIdp/types.ts
View File

@@ -25,3 +25,22 @@ export type ListOrgIdpsResponse = {
offset: number;
};
};
export type ListUserAdminOrgIdpsEntry = {
idpId: number;
orgId: string;
orgName: string;
name: string;
type: string;
variant: string;
tags: string | null;
};
export type ListUserAdminOrgIdpsResponse = {
idps: ListUserAdminOrgIdpsEntry[];
pagination: {
total: number;
limit: number;
offset: number;
};
};

48
src/app/[orgId]/settings/access/users/create/page.tsx
View File

@@ -46,7 +46,7 @@ import { Checkbox } from "@app/components/ui/checkbox";
import { ListIdpsResponse } from "@server/routers/idp";
import { useTranslations } from "next-intl";
import { build } from "@server/build";
import Image from "next/image";
import IdpTypeIcon from "@app/components/IdpTypeIcon";
import { usePaidStatus } from "@app/hooks/usePaidStatus";
import { tierMatrix } from "@server/lib/billing/tierMatrix";
import OrgRolesTagField from "@app/components/OrgRolesTagField";
@@ -152,31 +152,8 @@ export default function Page() {
const getIdpIcon = (variant: string | null) => {
if (!variant) return null;
switch (variant.toLowerCase()) {
case "google":
return (
<Image
src="/idp/google.png"
alt={t("idpGoogleAlt")}
width={24}
height={24}
className="rounded"
/>
);
case "azure":
return (
<Image
src="/idp/azure.png"
alt={t("idpAzureAlt")}
width={24}
height={24}
className="rounded"
/>
);
default:
return null;
}
const type = variant.toLowerCase();
return <IdpTypeIcon type={type} size={24} />;
};
const validFor = [
@@ -340,15 +317,16 @@ export default function Page() {
const roleIds = values.roles.map((r) => parseInt(r.id, 10));
const res = await api.post<AxiosResponse<InviteUserResponse>>(
`/org/${orgId}/create-invite`,
{
email: values.email,
roleIds,
validHours: parseInt(values.validForHours),
sendEmail
}
)
const res = await api
.post<AxiosResponse<InviteUserResponse>>(
`/org/${orgId}/create-invite`,
{
email: values.email,
roleIds,
validHours: parseInt(values.validForHours),
sendEmail
}
)
.catch((e) => {
if (e.response?.status === 409) {
toast({

21
src/components/IdpLoginButtons.tsx
View File

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
import { Button } from "@app/components/ui/button";
import { Alert, AlertDescription } from "@app/components/ui/alert";
import { useTranslations } from "next-intl";
import Image from "next/image";
import IdpTypeIcon from "@app/components/IdpTypeIcon";
import {
generateOidcUrlProxy,
type GenerateOidcUrlResponse
@@ -135,24 +135,7 @@ export default function IdpLoginButtons({
disabled={loading}
loading={loading}
>
{effectiveType === "google" && (
<Image
src="/idp/google.png"
alt="Google"
width={16}
height={16}
className="rounded"
/>
)}
{effectiveType === "azure" && (
<Image
src="/idp/azure.png"
alt="Azure"
width={16}
height={16}
className="rounded"
/>
)}
<IdpTypeIcon type={effectiveType} size={16} />
<span>{idp.name}</span>
</Button>
);

32
src/components/IdpTypeBadge.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { Badge } from "@app/components/ui/badge";
import Image from "next/image";
import IdpTypeIcon from "@app/components/IdpTypeIcon";
type IdpTypeBadgeProps = {
type: string;
@@ -29,34 +29,8 @@ export default function IdpTypeBadge({
variant="secondary"
className="inline-flex items-center space-x-1 w-fit"
>
{effectiveType === "google" && (
<>
<Image
src="/idp/google.png"
alt="Google"
width={16}
height={16}
className="rounded"
/>
<span>{effectiveName}</span>
</>
)}
{effectiveType === "azure" && (
<>
<Image
src="/idp/azure.png"
alt="Azure"
width={16}
height={16}
className="rounded"
/>
<span>{effectiveName}</span>
</>
)}
{effectiveType === "oidc" && <span>{effectiveName}</span>}
{!["google", "azure", "oidc"].includes(effectiveType) && (
<span>{effectiveName}</span>
)}
<IdpTypeIcon type={effectiveType} size={16} />
<span>{effectiveName}</span>
</Badge>
);
}

53
src/components/IdpTypeIcon.tsx Normal file
View File

@@ -0,0 +1,53 @@
"use client";
import { cn } from "@app/lib/cn";
import Image from "next/image";
import { ReactNode } from "react";
type Props = {
type?: string | null;
variant?: string | null;
size?: number;
className?: string;
alt?: string;
fallback?: ReactNode;
};
export default function IdpTypeIcon({
type,
variant,
size = 16,
className,
alt,
fallback = null
}: Props) {
const effectiveType = (variant || type || "").toLowerCase();
let src: string | null = null;
let defaultAlt = "";
if (effectiveType === "google") {
src = "/idp/google.png";
defaultAlt = "Google";
} else if (effectiveType === "azure") {
src = "/idp/azure.png";
defaultAlt = "Azure";
} else if (effectiveType === "oidc") {
src = "/idp/openid.png";
defaultAlt = "OAuth2/OIDC";
}
if (!src) {
return <>{fallback}</>;
}
return (
<Image
src={src}
alt={alt ?? defaultAlt}
width={size}
height={size}
className={cn("shrink-0 rounded", className)}
/>
);
}

21
src/components/LoginForm.tsx
View File

@@ -27,7 +27,6 @@ import { LockIcon } from "lucide-react";
import SecurityKeyAuthButton from "@app/components/SecurityKeyAuthButton";
import { createApiClient } from "@app/lib/api";
import Link from "next/link";
import Image from "next/image";
import { GenerateOidcUrlResponse } from "@server/routers/idp";
import { Separator } from "./ui/separator";
import { useTranslations } from "next-intl";
@@ -37,6 +36,7 @@ import {
} from "@app/actions/server";
import { redirect as redirectTo } from "next/navigation";
import { useEnvContext } from "@app/hooks/useEnvContext";
import IdpTypeIcon from "@app/components/IdpTypeIcon";
// @ts-ignore
import { loadReoScript } from "reodotdev";
import { build } from "@server/build";
@@ -393,24 +393,7 @@ export default function LoginForm({
loginWithIdp(idp.idpId);
}}
>
{effectiveType === "google" && (
<Image
src="/idp/google.png"
alt="Google"
width={16}
height={16}
className="rounded"
/>
)}
{effectiveType === "azure" && (
<Image
src="/idp/azure.png"
alt="Azure"
width={16}
height={16}
className="rounded"
/>
)}
<IdpTypeIcon type={effectiveType} size={16} />
<span>{idp.name}</span>
</Button>
);

10
src/components/OrgIdpDataTable.tsx
View File

@@ -1,19 +1,24 @@
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { DataTable } from "@app/components/ui/data-table";
import {
DataTable,
type DataTableAddAction
} from "@app/components/ui/data-table";
import { useTranslations } from "next-intl";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
onAdd?: () => void;
addActions?: DataTableAddAction[];
}
export function IdpDataTable<TData, TValue>({
columns,
data,
onAdd
onAdd,
addActions
}: DataTableProps<TData, TValue>) {
const t = useTranslations();
@@ -27,6 +32,7 @@ export function IdpDataTable<TData, TValue>({
searchColumn="name"
addButtonText={t("idpAdd")}
onAdd={onAdd}
addActions={addActions}
enableColumnVisibility={true}
stickyRightColumn="actions"
/>

250
src/components/OrgIdpTable.tsx
View File

@@ -4,13 +4,37 @@ import { ColumnDef } from "@tanstack/react-table";
import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { IdpDataTable } from "@app/components/OrgIdpDataTable";
import { Button } from "@app/components/ui/button";
import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
import { useState } from "react";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList
} from "@app/components/ui/command";
import {
Credenza,
CredenzaBody,
CredenzaClose,
CredenzaContent,
CredenzaDescription,
CredenzaFooter,
CredenzaHeader,
CredenzaTitle
} from "@app/components/Credenza";
import {
ArrowRight,
ArrowUpDown,
KeyRound,
MoreHorizontal
} from "lucide-react";
import { useMemo, useState } from "react";
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import { toast } from "@app/hooks/useToast";
import { formatAxiosError } from "@app/lib/api";
import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useUserContext } from "@app/hooks/useUserContext";
import { useRouter } from "next/navigation";
import {
DropdownMenu,
@@ -21,6 +45,11 @@ import {
import Link from "next/link";
import { useTranslations } from "next-intl";
import IdpTypeBadge from "@app/components/IdpTypeBadge";
import IdpTypeIcon from "@app/components/IdpTypeIcon";
import { useQuery } from "@tanstack/react-query";
import { useDebounce } from "use-debounce";
import type { ListUserAdminOrgIdpsResponse } from "@server/routers/orgIdp/types";
import { cn } from "@app/lib/cn";
export type IdpRow = {
idpId: number;
@@ -29,6 +58,15 @@ export type IdpRow = {
variant?: string;
};
type AdminIdpRow = ListUserAdminOrgIdpsResponse["idps"][number];
function IdpImportRowIcon({
type,
variant
}: Pick<AdminIdpRow, "type" | "variant">) {
return <IdpTypeIcon type={type} variant={variant} size={20} />;
}
type Props = {
idps: IdpRow[];
orgId: string;
@@ -37,10 +75,48 @@ type Props = {
export default function IdpTable({ idps, orgId }: Props) {
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedIdp, setSelectedIdp] = useState<IdpRow | null>(null);
const [isUnassociateModalOpen, setIsUnassociateModalOpen] = useState(false);
const [selectedUnassociateIdp, setSelectedUnassociateIdp] =
useState<IdpRow | null>(null);
const [importDialogOpen, setImportDialogOpen] = useState(false);
const [importSearchQuery, setImportSearchQuery] = useState("");
const [importSubmitting, setImportSubmitting] = useState(false);
const [debouncedImportSearch] = useDebounce(importSearchQuery, 150);
const api = createApiClient(useEnvContext());
const { user } = useUserContext();
const router = useRouter();
const t = useTranslations();
const { data: adminIdpsRaw = [] } = useQuery({
queryKey: ["admin-org-idps", user.userId],
queryFn: async () => {
const res = await api.get<{
data: ListUserAdminOrgIdpsResponse;
}>(`/user/${user.userId}/admin-org-idps`);
return res.data.data.idps;
},
enabled: importDialogOpen && !!user?.userId
});
const importableIdps = useMemo(() => {
const localIds = new Set(idps.map((i) => i.idpId));
return adminIdpsRaw.filter(
(row) => row.orgId !== orgId && !localIds.has(row.idpId)
);
}, [adminIdpsRaw, orgId, idps]);
const shownImportIdps = useMemo(() => {
const q = debouncedImportSearch.trim().toLowerCase();
if (!q) {
return importableIdps;
}
return importableIdps.filter((row) => {
const hay = `${row.orgName} ${row.name}`.toLowerCase();
return hay.includes(q);
});
}, [importableIdps, debouncedImportSearch]);
const deleteIdp = async (idpId: number) => {
try {
await api.delete(`/org/${orgId}/idp/${idpId}`);
@@ -59,6 +135,49 @@ export default function IdpTable({ idps, orgId }: Props) {
}
};
const importIdp = async (row: AdminIdpRow) => {
setImportSubmitting(true);
try {
await api.post(`/org/${orgId}/idp/${row.idpId}/import`, {
sourceOrgId: row.orgId
});
toast({
title: t("success"),
description: t("idpImportedDescription")
});
setImportDialogOpen(false);
setImportSearchQuery("");
router.refresh();
router.push(`/${orgId}/settings/idp/${row.idpId}/general`);
} catch (e) {
toast({
title: t("error"),
description: formatAxiosError(e),
variant: "destructive"
});
} finally {
setImportSubmitting(false);
}
};
const unassociateIdp = async (idpId: number) => {
try {
await api.delete(`/org/${orgId}/idp/${idpId}/association`);
toast({
title: t("success"),
description: t("idpUnassociatedDescription")
});
setIsUnassociateModalOpen(false);
router.refresh();
} catch (e) {
toast({
title: t("error"),
description: formatAxiosError(e),
variant: "destructive"
});
}
};
const columns: ExtendedColumnDef<IdpRow>[] = [
{
accessorKey: "idpId",
@@ -142,6 +261,14 @@ export default function IdpTable({ idps, orgId }: Props) {
{t("viewSettings")}
</DropdownMenuItem>
</Link>
<DropdownMenuItem
onClick={() => {
setSelectedUnassociateIdp(siteRow);
setIsUnassociateModalOpen(true);
}}
>
{t("idpUnassociateMenu")}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
setSelectedIdp(siteRow);
@@ -149,7 +276,7 @@ export default function IdpTable({ idps, orgId }: Props) {
}}
>
<span className="text-red-500">
{t("delete")}
{t("idpDeleteAllOrgsMenu")}
</span>
</DropdownMenuItem>
</DropdownMenuContent>
@@ -179,8 +306,8 @@ export default function IdpTable({ idps, orgId }: Props) {
}}
dialog={
<div className="space-y-2">
<p>{t("idpQuestionRemove")}</p>
<p>{t("idpMessageRemove")}</p>
<p>{t("idpDeleteGlobalQuestion")}</p>
<p>{t("idpDeleteGlobalDescription")}</p>
</div>
}
buttonText={t("idpConfirmDelete")}
@@ -189,11 +316,122 @@ export default function IdpTable({ idps, orgId }: Props) {
title={t("idpDelete")}
/>
)}
{selectedUnassociateIdp && (
<ConfirmDeleteDialog
open={isUnassociateModalOpen}
setOpen={(val) => {
setIsUnassociateModalOpen(val);
setSelectedUnassociateIdp(null);
}}
dialog={
<div className="space-y-2">
<p>{t("idpUnassociateQuestion")}</p>
<p>{t("idpUnassociateDescription")}</p>
</div>
}
buttonText={t("idpUnassociateConfirm")}
onConfirm={async () =>
unassociateIdp(selectedUnassociateIdp.idpId)
}
string={selectedUnassociateIdp.name}
title={t("idpUnassociateTitle")}
warningText={t("idpUnassociateWarning")}
/>
)}
<Credenza
open={importDialogOpen}
onOpenChange={(open) => {
setImportDialogOpen(open);
if (!open) {
setImportSearchQuery("");
}
}}
>
<CredenzaContent className="sm:max-w-lg">
<CredenzaHeader>
<CredenzaTitle>
{t("idpImportDialogTitle")}
</CredenzaTitle>
<CredenzaDescription>
{t("idpImportDialogDescription")}
</CredenzaDescription>
</CredenzaHeader>
<CredenzaBody
className={cn(
importSubmitting && "pointer-events-none opacity-60"
)}
>
<Command shouldFilter={false}>
<CommandInput
placeholder={t("idpImportSearchPlaceholder")}
value={importSearchQuery}
onValueChange={setImportSearchQuery}
/>
<CommandList>
<CommandEmpty>
{t("idpImportEmpty")}
</CommandEmpty>
<CommandGroup>
{shownImportIdps.map((row) => (
<CommandItem
key={`${row.idpId}:${row.orgId}`}
className="items-start gap-3 py-2.5"
value={`${row.idpId}:${row.orgId}:${row.orgName}:${row.name}`}
onSelect={() => {
void importIdp(row);
}}
>
<div className="mt-0.5 shrink-0">
<IdpImportRowIcon
type={row.type}
variant={row.variant}
/>
</div>
<div className="min-w-0 flex-1 text-left">
<div className="truncate font-medium leading-tight">
{row.orgName}
</div>
<div className="truncate text-sm leading-tight text-muted-foreground">
{row.name}
</div>
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</CredenzaBody>
<CredenzaFooter>
<CredenzaClose asChild>
<Button
variant="outline"
disabled={importSubmitting}
>
{t("cancel")}
</Button>
</CredenzaClose>
</CredenzaFooter>
</CredenzaContent>
</Credenza>
<IdpDataTable
columns={columns}
data={idps}
onAdd={() => router.push(`/${orgId}/settings/idp/create`)}
addActions={[
{
label: t("idpAddActionCreateNew"),
onSelect: () => {
router.push(`/${orgId}/settings/idp/create`);
}
},
{
label: t("idpAddActionImportFromOrg"),
onSelect: () => {
setImportDialogOpen(true);
}
}
]}
/>
</>
);

25
src/components/idp/OidcIdpProviderTypeSelect.tsx
View File

@@ -6,8 +6,8 @@ import {
} from "@app/components/StrategySelect";
import { useEnvContext } from "@app/hooks/useEnvContext";
import type { IdpOidcProviderType } from "@app/lib/idp/oidcIdpProviderDefaults";
import IdpTypeIcon from "@app/components/IdpTypeIcon";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { useEffect, useMemo } from "react";
type Props = {
@@ -32,7 +32,8 @@ export function OidcIdpProviderTypeSelect({ value, onTypeChange }: Props) {
{
id: "oidc",
title: "OAuth2/OIDC",
description: t("idpOidcDescription")
description: t("idpOidcDescription"),
icon: <IdpTypeIcon type="oidc" size={24} />
}
];
if (hideTemplates) {
@@ -44,29 +45,13 @@ export function OidcIdpProviderTypeSelect({ value, onTypeChange }: Props) {
id: "google",
title: t("idpGoogleTitle"),
description: t("idpGoogleDescription"),
icon: (
<Image
src="/idp/google.png"
alt={t("idpGoogleAlt")}
width={24}
height={24}
className="rounded"
/>
)
icon: <IdpTypeIcon type="google" size={24} />
},
{
id: "azure",
title: t("idpAzureTitle"),
description: t("idpAzureDescription"),
icon: (
<Image
src="/idp/azure.png"
alt={t("idpAzureAlt")}
width={24}
height={24}
className="rounded"
/>
)
icon: <IdpTypeIcon type="azure" size={24} />
}
];
}, [hideTemplates, t]);

64
src/components/ui/controlled-data-table.tsx
View File

@@ -18,12 +18,14 @@ import {
TableRow
} from "@/components/ui/table";
import { DataTablePagination } from "@app/components/DataTablePagination";
import type { DataTableAddAction } from "@app/components/ui/data-table";
import { Button } from "@app/components/ui/button";
import { Card, CardContent, CardHeader } from "@app/components/ui/card";
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger
@@ -31,7 +33,14 @@ import {
import { Input } from "@app/components/ui/input";
import { useStoredColumnVisibility } from "@app/hooks/useStoredColumnVisibility";
import { Columns, Filter, Plus, RefreshCw, Search } from "lucide-react";
import {
ChevronDown,
Columns,
Filter,
Plus,
RefreshCw,
Search
} from "lucide-react";
import { useTranslations } from "next-intl";
import { useMemo, useState } from "react";
@@ -67,6 +76,8 @@ type ControlledDataTableProps<TData, TValue> = {
tableId: string;
addButtonText?: string;
onAdd?: () => void;
addActions?: DataTableAddAction[];
addButtonDisabled?: boolean;
onRefresh?: () => void;
isRefreshing?: boolean;
refreshButtonDisabled?: boolean;
@@ -90,6 +101,8 @@ export function ControlledDataTable<TData, TValue>({
rows,
addButtonText,
onAdd,
addActions,
addButtonDisabled = false,
onRefresh,
isRefreshing,
refreshButtonDisabled = false,
@@ -348,16 +361,49 @@ export function ControlledDataTable<TData, TValue>({
</Button>
</div>
)}
{onAdd && addButtonText && (
{addActions && addActions.length > 0 && addButtonText ? (
<div>
<Button
onClick={onAdd}
loading={isNavigatingToAddPage}
>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
disabled={
addButtonDisabled ||
isNavigatingToAddPage
}
>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{addActions.map((action, i) => (
<DropdownMenuItem
key={i}
onSelect={() =>
action.onSelect()
}
>
{action.label}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>
) : (
onAdd &&
addButtonText && (
<div>
<Button
onClick={onAdd}
loading={isNavigatingToAddPage}
disabled={addButtonDisabled}
>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
</Button>
</div>
)
)}
</div>
</CardHeader>

54
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, Filter } from "lucide-react";
import { ChevronDown, Plus, Search, RefreshCw, Columns, Filter } from "lucide-react";
import {
Card,
CardContent,
@@ -46,6 +46,7 @@ import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger
@@ -165,12 +166,20 @@ export type DataTablePaginationState = PaginationState & {
export type DataTablePaginationUpdateFn = (newPage: PaginationState) => void;
/** When set (non-empty), replaces the single add button with a dropdown; `onAdd` is not used. */
export type DataTableAddAction = {
label: string;
onSelect: () => void;
};
type DataTableProps<TData, TValue> = {
columns: ExtendedColumnDef<TData, TValue>[];
data: TData[];
title?: string;
addButtonText?: string;
onAdd?: () => void;
/** Prefer over `onAdd` when non-empty. */
addActions?: DataTableAddAction[];
addButtonDisabled?: boolean;
onRefresh?: () => void;
isRefreshing?: boolean;
@@ -205,6 +214,7 @@ export function DataTable<TData, TValue>({
title,
addButtonText,
onAdd,
addActions,
addButtonDisabled = false,
onRefresh,
isRefreshing,
@@ -637,13 +647,45 @@ export function DataTable<TData, TValue>({
</Button>
</div>
)}
{onAdd && addButtonText && (
{addActions && addActions.length > 0 && addButtonText ? (
<div>
<Button onClick={onAdd} disabled={addButtonDisabled}>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
disabled={addButtonDisabled}
>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{addActions.map((action, i) => (
<DropdownMenuItem
key={i}
onSelect={() =>
action.onSelect()
}
>
{action.label}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>
) : (
onAdd &&
addButtonText && (
<div>
<Button
onClick={onAdd}
disabled={addButtonDisabled}
>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
</Button>
</div>
)
)}
</div>
</CardHeader>