import and unassocaite org idp

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

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

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

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

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

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"
/>

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);
}
}
]}
/>
</>
);

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]);

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>

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>