wehub-resource-sync
1214 lines
42 KiB
TypeScript
1214 lines
42 KiB
TypeScript
import {
|
|
ArrowUpRightIcon,
|
|
CheckCircleIcon,
|
|
ClockIcon,
|
|
ExclamationCircleIcon,
|
|
} from "@heroicons/react/20/solid";
|
|
import { type MetaFunction } from "@remix-run/react";
|
|
import { redirect } from "@remix-run/server-runtime";
|
|
import { useEffect, useState } from "react";
|
|
import { useFetcher, useRevalidator } from "@remix-run/react";
|
|
import { z } from "zod";
|
|
import { typedjson, useTypedLoaderData } from "remix-typedjson";
|
|
import { PageBody, PageContainer } from "~/components/layout/AppLayout";
|
|
import { Badge } from "~/components/primitives/Badge";
|
|
import { Button } from "~/components/primitives/Buttons";
|
|
import { Feedback } from "~/components/Feedback";
|
|
import { Callout } from "~/components/primitives/Callout";
|
|
import { ClipboardField } from "~/components/primitives/ClipboardField";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
} from "~/components/primitives/Dialog";
|
|
import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
|
|
import { Paragraph } from "~/components/primitives/Paragraph";
|
|
import {
|
|
SettingsActions,
|
|
SettingsBlock,
|
|
SettingsContainer,
|
|
SettingsHeader,
|
|
SettingsRow,
|
|
SettingsSection,
|
|
} from "~/components/primitives/SettingsLayout";
|
|
import { Select, SelectItem } from "~/components/primitives/Select";
|
|
import { Switch } from "~/components/primitives/Switch";
|
|
import { prisma } from "~/db.server";
|
|
import { useOrganization } from "~/hooks/useOrganizations";
|
|
import { rbac } from "~/services/rbac.server";
|
|
import { ssoController } from "~/services/sso.server";
|
|
import { getCurrentPlan } from "~/services/platform.v3.server";
|
|
import type { DirectorySyncEffect, DirectorySyncStatus, Role } from "@trigger.dev/plugins";
|
|
import { applyDirectorySyncEffects } from "~/services/directorySyncEffects.server";
|
|
import { flag } from "~/v3/featureFlags.server";
|
|
import { FEATURE_FLAG } from "~/v3/featureFlags";
|
|
import { dashboardAction, dashboardLoader } from "~/services/routeBuilders/dashboardBuilder";
|
|
import { cn } from "~/utils/cn";
|
|
import { throwPermissionDenied } from "~/utils/permissionDenied";
|
|
import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
|
|
|
|
export const meta: MetaFunction = () => [{ title: "SSO & Directory Sync | Trigger.dev" }];
|
|
|
|
const Params = z.object({ organizationSlug: z.string() });
|
|
|
|
async function resolveOrg(slug: string) {
|
|
// Primary (not replica): this scopes the RBAC/entitlement checks, so lag
|
|
// could run them against a stale/missing org.
|
|
return prisma.organization.findFirst({
|
|
where: { slug },
|
|
select: { id: true, title: true },
|
|
});
|
|
}
|
|
|
|
function planAllowsSso(plan: unknown): boolean {
|
|
if (!plan || typeof plan !== "object") return false;
|
|
const subscription = (plan as { v3Subscription?: { plan?: { code?: string } } }).v3Subscription;
|
|
return subscription?.plan?.code === "enterprise";
|
|
}
|
|
|
|
// Client-side upsell is cosmetic; gate real IdP mutations server-side.
|
|
async function requireSsoEntitlement(orgId: string): Promise<void> {
|
|
const plan = await getCurrentPlan(orgId);
|
|
if (!planAllowsSso(plan)) {
|
|
throw new Response("SSO requires an Enterprise plan", { status: 403 });
|
|
}
|
|
}
|
|
|
|
const EMPTY_DIRECTORY_SYNC_STATUS: DirectorySyncStatus = {
|
|
hasDirectory: false,
|
|
hasActiveDirectory: false,
|
|
allowExternalDomainSync: false,
|
|
allowManualMembership: true,
|
|
directoryDefaultRoleId: null,
|
|
userCount: 0,
|
|
directories: [],
|
|
groups: [],
|
|
};
|
|
|
|
// Per-org flag wins, else global (default off). Single knob for both SSO and
|
|
// Directory Sync (no separate dsync flag).
|
|
async function resolveHasSso(orgId: string): Promise<boolean> {
|
|
const org = await prisma.organization.findFirst({
|
|
where: { id: orgId },
|
|
select: { featureFlags: true },
|
|
});
|
|
const perOrg = (org?.featureFlags as Record<string, unknown> | null)?.[FEATURE_FLAG.hasSso];
|
|
if (perOrg === true) return true;
|
|
return (await flag({ key: FEATURE_FLAG.hasSso, defaultValue: false })) === true;
|
|
}
|
|
|
|
const EMPTY_SSO_STATUS = {
|
|
hasIdpOrg: false,
|
|
enforced: false,
|
|
jitProvisioningEnabled: false,
|
|
jitDefaultRoleId: null,
|
|
idpOrgId: null,
|
|
primaryConnectionId: null,
|
|
hasActiveDirectory: false,
|
|
domains: [] as Array<{
|
|
domain: string;
|
|
verified: boolean;
|
|
state: "pending" | "verified" | "failed";
|
|
verificationFailedReason: string | null;
|
|
}>,
|
|
connections: [] as Array<{
|
|
id: string;
|
|
name: string | null;
|
|
connectionType: string;
|
|
state: "active" | "inactive";
|
|
}>,
|
|
};
|
|
|
|
export const loader = dashboardLoader(
|
|
{
|
|
params: Params,
|
|
context: async (params) => {
|
|
const org = await resolveOrg(params.organizationSlug);
|
|
return org ? { organizationId: org.id, orgTitle: org.title } : {};
|
|
},
|
|
// Plan-gated before role-gated: non-Enterprise orgs render the upsell for
|
|
// everyone, so we enforce manage:sso in the body only once entitled.
|
|
},
|
|
async ({ context, ability }) => {
|
|
// True only with SSO_ENABLED on and a real plugin loaded.
|
|
if (!(await ssoController.isUsingPlugin())) {
|
|
throw new Response("Not Found", { status: 404 });
|
|
}
|
|
|
|
const orgId = context.organizationId;
|
|
if (!orgId) {
|
|
throw new Response("Not Found", { status: 404 });
|
|
}
|
|
|
|
// Not Enterprise: render the upsell for every role, skip role check +
|
|
// queries, return empty data.
|
|
const plan = await getCurrentPlan(orgId);
|
|
if (!planAllowsSso(plan)) {
|
|
return typedjson({
|
|
status: EMPTY_SSO_STATUS,
|
|
orgTitle: context.orgTitle,
|
|
jitRoles: [] as Role[],
|
|
directorySync: EMPTY_DIRECTORY_SYNC_STATUS,
|
|
hasSso: false,
|
|
});
|
|
}
|
|
|
|
// Entitled: real config surface, so enforce the role gate (403 for
|
|
// non-Owner without manage:sso).
|
|
if (!ability.can("manage", { type: "sso" })) {
|
|
throwPermissionDenied();
|
|
}
|
|
|
|
const [statusResult, allRoles, assignableIds, dsyncResult, hasSso] = await Promise.all([
|
|
ssoController.getStatus(orgId),
|
|
rbac.allRoles(orgId),
|
|
rbac.getAssignableRoleIds(orgId),
|
|
ssoController.getDirectorySyncStatus(orgId),
|
|
resolveHasSso(orgId),
|
|
]);
|
|
const status = statusResult.isOk() ? statusResult.value : EMPTY_SSO_STATUS;
|
|
const directorySync = dsyncResult.isOk() ? dsyncResult.value : EMPTY_DIRECTORY_SYNC_STATUS;
|
|
|
|
// JIT can't grant Owner (reserved), and non-assignable/plan-gated roles
|
|
// are filtered out.
|
|
const assignable = new Set(assignableIds);
|
|
const jitRoles = allRoles.filter((r) => r.name !== "Owner" && assignable.has(r.id));
|
|
|
|
return typedjson({
|
|
status,
|
|
orgTitle: context.orgTitle,
|
|
jitRoles,
|
|
directorySync,
|
|
hasSso,
|
|
});
|
|
}
|
|
);
|
|
|
|
const NULL_ROLE_VALUE = "__none__";
|
|
const DEFAULT_JIT_ROLE_NAME = "Developer";
|
|
|
|
// Not `z.coerce.boolean()`: it treats the string "false" as truthy.
|
|
const boolish = z.union([z.literal("true"), z.literal("false")]).transform((v) => v === "true");
|
|
|
|
// Changed group→role mappings from the deferred Directory Sync Save.
|
|
const GroupRolesSchema = z.array(z.object({ groupId: z.string(), roleId: z.string() }));
|
|
|
|
const ActionSchema = z.discriminatedUnion("action", [
|
|
z.object({
|
|
action: z.literal("save_config"),
|
|
enforced: boolish,
|
|
jitEnabled: boolish,
|
|
jitRoleId: z.string(),
|
|
}),
|
|
z.object({
|
|
action: z.literal("portal_link"),
|
|
intent: z.enum(["sso", "domain_verification", "dsync"]),
|
|
}),
|
|
// Single deferred Save: settings + changed group mappings commit together.
|
|
z.object({
|
|
action: z.literal("save_dsync_config"),
|
|
allowExternalDomainSync: boolish,
|
|
allowManualMembership: boolish,
|
|
directoryDefaultRoleId: z.string(),
|
|
groupRoles: z.string(),
|
|
}),
|
|
]);
|
|
|
|
export const action = dashboardAction(
|
|
{
|
|
params: Params,
|
|
context: async (params) => {
|
|
const org = await resolveOrg(params.organizationSlug);
|
|
return org ? { organizationId: org.id } : {};
|
|
},
|
|
authorization: { action: "manage", resource: { type: "sso" } },
|
|
},
|
|
async ({ request, context, user, params }) => {
|
|
const orgId = context.organizationId;
|
|
if (!orgId) {
|
|
throw new Response("Not Found", { status: 404 });
|
|
}
|
|
|
|
// Mirror the loader gate.
|
|
if (!(await ssoController.isUsingPlugin())) {
|
|
throw new Response("Not Found", { status: 404 });
|
|
}
|
|
await requireSsoEntitlement(orgId);
|
|
|
|
const formData = await request.formData();
|
|
const parsed = ActionSchema.safeParse({
|
|
action: formData.get("action"),
|
|
enforced: formData.get("enforced") ?? undefined,
|
|
jitEnabled: formData.get("jitEnabled") ?? undefined,
|
|
jitRoleId: formData.get("jitRoleId") ?? undefined,
|
|
intent: formData.get("intent") ?? undefined,
|
|
allowExternalDomainSync: formData.get("allowExternalDomainSync") ?? undefined,
|
|
allowManualMembership: formData.get("allowManualMembership") ?? undefined,
|
|
directoryDefaultRoleId: formData.get("directoryDefaultRoleId") ?? undefined,
|
|
groupRoles: formData.get("groupRoles") ?? undefined,
|
|
});
|
|
if (!parsed.success) {
|
|
return new Response("Bad Request", { status: 400 });
|
|
}
|
|
|
|
switch (parsed.data.action) {
|
|
case "save_config": {
|
|
const jitRoleId = parsed.data.jitRoleId === NULL_ROLE_VALUE ? null : parsed.data.jitRoleId;
|
|
// All-or-nothing: `updateConfig` writes the three fields in one
|
|
// transaction (with the JIT-role RBAC check inside).
|
|
const result = await ssoController.updateConfig({
|
|
organizationId: orgId,
|
|
enforced: parsed.data.enforced,
|
|
jitProvisioningEnabled: parsed.data.jitEnabled,
|
|
jitDefaultRoleId: jitRoleId,
|
|
});
|
|
if (result.isErr()) {
|
|
return new Response(`Error: ${result.error}`, { status: 400 });
|
|
}
|
|
return redirect(`/orgs/${params.organizationSlug}/settings/sso`);
|
|
}
|
|
case "portal_link": {
|
|
const url = new URL(request.url);
|
|
const returnUrl = `${url.protocol}//${url.host}/orgs/${params.organizationSlug}/settings/sso`;
|
|
const result = await ssoController.generatePortalLink({
|
|
organizationId: orgId,
|
|
userId: user.id,
|
|
intent: parsed.data.intent,
|
|
returnUrl,
|
|
});
|
|
if (result.isErr()) {
|
|
return Response.json({ ok: false, error: result.error }, { status: 400 });
|
|
}
|
|
return Response.json({ ok: true, url: result.value.url });
|
|
}
|
|
case "save_dsync_config": {
|
|
// Parse the changed group→role mappings.
|
|
let groupRoles: Array<{ groupId: string; roleId: string }>;
|
|
try {
|
|
groupRoles = GroupRolesSchema.parse(JSON.parse(parsed.data.groupRoles));
|
|
} catch {
|
|
return new Response("Bad Request", { status: 400 });
|
|
}
|
|
const defaultRoleId =
|
|
parsed.data.directoryDefaultRoleId === NULL_ROLE_VALUE
|
|
? null
|
|
: parsed.data.directoryDefaultRoleId;
|
|
// Hoist out: the union narrowing doesn't survive into the thunks below.
|
|
const { allowExternalDomainSync, allowManualMembership } = parsed.data;
|
|
|
|
// Config columns first. Not transactional, but each write is
|
|
// idempotent so retrying the whole Save converges. Thunks run serially
|
|
// so the first failure stops the rest.
|
|
const configWrites = [
|
|
() =>
|
|
ssoController.setAllowExternalDomainSync({
|
|
organizationId: orgId,
|
|
allowed: allowExternalDomainSync,
|
|
}),
|
|
() =>
|
|
ssoController.setAllowManualMembership({
|
|
organizationId: orgId,
|
|
allowed: allowManualMembership,
|
|
}),
|
|
() =>
|
|
ssoController.setDirectoryDefaultRole({ organizationId: orgId, roleId: defaultRoleId }),
|
|
];
|
|
for (const write of configWrites) {
|
|
const result = await write();
|
|
if (result.isErr()) {
|
|
return new Response(`Error: ${result.error}`, { status: 400 });
|
|
}
|
|
}
|
|
|
|
// Each remap returns membership effects for its members (role
|
|
// recompute, or deprovision when cleared); apply them immediately.
|
|
const effects: DirectorySyncEffect[] = [];
|
|
for (const g of groupRoles) {
|
|
const result = await ssoController.setDirectoryGroupRole({
|
|
organizationId: orgId,
|
|
groupId: g.groupId,
|
|
roleId: g.roleId === NULL_ROLE_VALUE ? null : g.roleId,
|
|
});
|
|
if (result.isErr()) {
|
|
return new Response(`Error: ${result.error}`, { status: 400 });
|
|
}
|
|
effects.push(...result.value.effects);
|
|
}
|
|
if (effects.length > 0) {
|
|
await applyDirectorySyncEffects(effects);
|
|
}
|
|
return redirect(`/orgs/${params.organizationSlug}/settings/sso`);
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
function defaultJitRoleId(jitRoles: ReadonlyArray<Role>, current: string | null): string {
|
|
// Persisted value wins, even if the picker can no longer offer it.
|
|
if (current) return current;
|
|
const dev = jitRoles.find((r) => r.name === DEFAULT_JIT_ROLE_NAME);
|
|
return dev?.id ?? NULL_ROLE_VALUE;
|
|
}
|
|
|
|
// Locally-editable mirror of a server value, poll-safe: untouched fields adopt
|
|
// fresh server values; edited (dirty) fields hold until the server catches up,
|
|
// then snap back to clean.
|
|
function useOverrideDraft<T>(serverValue: T): {
|
|
value: T;
|
|
set: (next: T) => void;
|
|
dirty: boolean;
|
|
} {
|
|
const [override, setOverride] = useState<{ value: T } | null>(null);
|
|
useEffect(() => {
|
|
// Server matches the pending edit → clear the override.
|
|
setOverride((current) => (current && Object.is(current.value, serverValue) ? null : current));
|
|
}, [serverValue]);
|
|
const value = override ? override.value : serverValue;
|
|
return {
|
|
value,
|
|
set: (next) => setOverride({ value: next }),
|
|
dirty: override != null && !Object.is(override.value, serverValue),
|
|
};
|
|
}
|
|
|
|
export default function Page() {
|
|
const { status, orgTitle, jitRoles, directorySync, hasSso } = useTypedLoaderData<typeof loader>();
|
|
const organization = useOrganization();
|
|
const _plan = useCurrentPlan();
|
|
|
|
const isEntitled = planAllowsSso(_plan);
|
|
const activeConnections = status.connections.filter((c) => c.state === "active");
|
|
const hasActive = activeConnections.length > 0;
|
|
|
|
// Deferred-save drafts; `useOverrideDraft` keeps them poll-safe until Save.
|
|
const initialJitRoleId = defaultJitRoleId(jitRoles, status.jitDefaultRoleId);
|
|
const enforcedDraft = useOverrideDraft(status.enforced);
|
|
const jitEnabledDraft = useOverrideDraft(status.jitProvisioningEnabled);
|
|
const jitRoleDraft = useOverrideDraft(initialJitRoleId);
|
|
const draftEnforced = enforcedDraft.value;
|
|
const setDraftEnforced = enforcedDraft.set;
|
|
const draftJitEnabled = jitEnabledDraft.value;
|
|
const setDraftJitEnabled = jitEnabledDraft.set;
|
|
const draftJitRoleId = jitRoleDraft.value;
|
|
const setDraftJitRoleId = jitRoleDraft.set;
|
|
|
|
const isDirty = enforcedDraft.dirty || jitEnabledDraft.dirty || jitRoleDraft.dirty;
|
|
|
|
const [portalUrl, setPortalUrl] = useState<string | null>(null);
|
|
const [portalIntent, setPortalIntent] = useState<"sso" | "domain_verification" | "dsync" | null>(
|
|
null
|
|
);
|
|
const [enforceModalOpen, setEnforceModalOpen] = useState(false);
|
|
const portalFetcher = useFetcher<{ ok: boolean; url?: string; error?: string }>();
|
|
const saveFetcher = useFetcher();
|
|
const isSaving = saveFetcher.state !== "idle";
|
|
const revalidator = useRevalidator();
|
|
|
|
useEffect(() => {
|
|
if (portalFetcher.data?.ok && portalFetcher.data.url) {
|
|
setPortalUrl(portalFetcher.data.url);
|
|
}
|
|
}, [portalFetcher.data]);
|
|
|
|
// Poll while entitled to reflect portal progress and keep SSO + Directory
|
|
// Sync state fresh; drafts survive via `useOverrideDraft`.
|
|
const shouldPoll = isEntitled;
|
|
useEffect(() => {
|
|
if (!shouldPoll) return;
|
|
const id = setInterval(() => {
|
|
if (
|
|
revalidator.state !== "idle" ||
|
|
portalFetcher.state !== "idle" ||
|
|
saveFetcher.state !== "idle" ||
|
|
(typeof document !== "undefined" && document.visibilityState === "hidden")
|
|
) {
|
|
return;
|
|
}
|
|
revalidator.revalidate();
|
|
}, 5000);
|
|
return () => clearInterval(id);
|
|
}, [shouldPoll, revalidator, portalFetcher.state, saveFetcher.state]);
|
|
|
|
const openPortal = (intent: "sso" | "domain_verification" | "dsync") => {
|
|
setPortalUrl(null);
|
|
setPortalIntent(intent);
|
|
portalFetcher.submit({ action: "portal_link", intent }, { method: "POST" });
|
|
};
|
|
|
|
const submitSave = () => {
|
|
saveFetcher.submit(
|
|
{
|
|
action: "save_config",
|
|
enforced: draftEnforced ? "true" : "false",
|
|
jitEnabled: draftJitEnabled ? "true" : "false",
|
|
jitRoleId: draftJitRoleId,
|
|
},
|
|
{ method: "POST" }
|
|
);
|
|
};
|
|
|
|
return (
|
|
<PageContainer>
|
|
<NavBar>
|
|
<PageTitle title="SSO & Directory Sync" />
|
|
</NavBar>
|
|
<PageBody scrollable={true}>
|
|
<SettingsContainer>
|
|
{!isEntitled ? (
|
|
<EnterpriseUpsellState />
|
|
) : !status.hasIdpOrg ? (
|
|
<NoIdpOrgState onOpenPortal={() => openPortal("domain_verification")} />
|
|
) : !hasActive ? (
|
|
<NoActiveConnectionState
|
|
domains={status.domains}
|
|
directorySync={directorySync}
|
|
jitRoles={jitRoles}
|
|
hasSso={hasSso}
|
|
onOpenSso={() => openPortal("sso")}
|
|
onOpenDomain={() => openPortal("domain_verification")}
|
|
onOpenDsync={() => openPortal("dsync")}
|
|
/>
|
|
) : (
|
|
<ActiveConnectionState
|
|
orgTitle={orgTitle ?? organization.title}
|
|
status={status}
|
|
activeConnections={activeConnections}
|
|
jitRoles={jitRoles}
|
|
directorySync={directorySync}
|
|
hasSso={hasSso}
|
|
draftEnforced={draftEnforced}
|
|
draftJitEnabled={draftJitEnabled}
|
|
draftJitRoleId={draftJitRoleId}
|
|
isDirty={isDirty}
|
|
isSaving={isSaving}
|
|
onOpenPortal={openPortal}
|
|
onToggleEnforced={(next) => {
|
|
// off→on locks users out, so confirm first (draft only).
|
|
if (next && !status.enforced) {
|
|
setEnforceModalOpen(true);
|
|
} else {
|
|
setDraftEnforced(next);
|
|
}
|
|
}}
|
|
onToggleJit={(next) => setDraftJitEnabled(next)}
|
|
onChangeJitRole={(roleId) => setDraftJitRoleId(roleId ?? NULL_ROLE_VALUE)}
|
|
onSave={submitSave}
|
|
/>
|
|
)}
|
|
</SettingsContainer>
|
|
</PageBody>
|
|
|
|
<PortalLinkDialog url={portalUrl} intent={portalIntent} onClose={() => setPortalUrl(null)} />
|
|
|
|
<EnforceConfirmDialog
|
|
open={enforceModalOpen}
|
|
orgTitle={orgTitle ?? organization.title}
|
|
onCancel={() => setEnforceModalOpen(false)}
|
|
onConfirm={() => {
|
|
setDraftEnforced(true);
|
|
setEnforceModalOpen(false);
|
|
}}
|
|
/>
|
|
</PageContainer>
|
|
);
|
|
}
|
|
|
|
function EnterpriseUpsellState() {
|
|
return (
|
|
<SettingsSection>
|
|
<SettingsHeader
|
|
title={
|
|
<span className="flex items-center gap-2">
|
|
SSO & Directory Sync
|
|
<Badge variant="small">Enterprise</Badge>
|
|
</span>
|
|
}
|
|
description="Single sign-on (SAML/OIDC) and Directory Sync (SCIM) let your IT team manage access to Trigger.dev from your identity provider, such as Okta, Azure AD, or Google Workspace."
|
|
/>
|
|
<div className="w-full space-y-4 py-4">
|
|
<ul className="ml-4 list-disc space-y-1.5 text-sm text-text-dimmed">
|
|
<li>Verify domains and connect your identity provider from the admin portal.</li>
|
|
<li>Just-in-time provisioning for your verified domains.</li>
|
|
<li>Enforce SSO by domain, so contractors keep their existing sign-in.</li>
|
|
<li>Sync users and map directory groups to roles with SCIM.</li>
|
|
</ul>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Feedback
|
|
defaultValue="enterprise"
|
|
button={<Button variant="primary/small">Contact us</Button>}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</SettingsSection>
|
|
);
|
|
}
|
|
|
|
function NoIdpOrgState({ onOpenPortal }: { onOpenPortal: () => void }) {
|
|
return (
|
|
<SettingsSection>
|
|
<SettingsHeader
|
|
title="SSO"
|
|
description="Manage access to Trigger.dev from your identity provider, such as Okta, Azure AD, or Google Workspace."
|
|
/>
|
|
<SettingsRow
|
|
title="Get started"
|
|
description="Verify your email domains, then connect your identity provider."
|
|
action={
|
|
<Button variant="secondary/small" onClick={onOpenPortal}>
|
|
Start setup
|
|
</Button>
|
|
}
|
|
/>
|
|
</SettingsSection>
|
|
);
|
|
}
|
|
|
|
type DomainRow = {
|
|
domain: string;
|
|
verified: boolean;
|
|
state: "pending" | "verified" | "failed";
|
|
verificationFailedReason: string | null;
|
|
};
|
|
|
|
function NoActiveConnectionState({
|
|
domains,
|
|
directorySync,
|
|
jitRoles,
|
|
hasSso,
|
|
onOpenSso,
|
|
onOpenDomain,
|
|
onOpenDsync,
|
|
}: {
|
|
domains: ReadonlyArray<DomainRow>;
|
|
directorySync: DirectorySyncStatus;
|
|
jitRoles: ReadonlyArray<Role>;
|
|
hasSso: boolean;
|
|
onOpenSso: () => void;
|
|
onOpenDomain: () => void;
|
|
onOpenDsync: () => void;
|
|
}) {
|
|
const verifiedDomains = domains.filter((d) => d.state === "verified");
|
|
const failedDomains = domains.filter((d) => d.state === "failed");
|
|
const hasVerifiedDomain = verifiedDomains.length > 0;
|
|
|
|
return (
|
|
<>
|
|
<SettingsSection>
|
|
<SettingsHeader
|
|
title="Domains"
|
|
description="Verify the email domains your team signs in with. Connect your identity provider once a domain is verified."
|
|
action={
|
|
<Button variant="secondary/small" onClick={onOpenDomain}>
|
|
{domains.length > 0 ? "Add domain" : "Verify domain"}
|
|
</Button>
|
|
}
|
|
/>
|
|
{failedDomains.length > 0 && (
|
|
<SettingsBlock>
|
|
<Callout variant="error">
|
|
{failedDomains.length === 1
|
|
? `Verification failed for ${failedDomains[0].domain}. Check the DNS records in the admin portal and try again.`
|
|
: `${failedDomains.length} domains failed verification. Check the DNS records in the admin portal and try again.`}
|
|
</Callout>
|
|
</SettingsBlock>
|
|
)}
|
|
{domains.length > 0 && <DomainList domains={domains} />}
|
|
</SettingsSection>
|
|
|
|
{hasVerifiedDomain && (
|
|
<SettingsSection>
|
|
<SettingsHeader
|
|
title="SSO"
|
|
description="Connect your identity provider to enable SSO for your verified domains."
|
|
/>
|
|
<SettingsRow
|
|
title="Identity provider"
|
|
description="Connect Okta, Azure AD, Google Workspace, and more."
|
|
action={
|
|
<Button variant="secondary/small" onClick={onOpenSso}>
|
|
Configure SSO
|
|
</Button>
|
|
}
|
|
/>
|
|
</SettingsSection>
|
|
)}
|
|
|
|
{/* Directory Sync is independent of SSO (needs only a verified domain). */}
|
|
{hasVerifiedDomain && hasSso ? (
|
|
<DirectorySyncSection
|
|
directorySync={directorySync}
|
|
jitRoles={jitRoles}
|
|
onOpenPortal={onOpenDsync}
|
|
/>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function DomainList({ domains }: { domains: ReadonlyArray<DomainRow> }) {
|
|
return (
|
|
<>
|
|
{domains.map((d) => {
|
|
const visual = domainVisual(d.state);
|
|
return (
|
|
<SettingsRow
|
|
key={d.domain}
|
|
size="sm"
|
|
action={
|
|
<span
|
|
className={cn("flex shrink-0 items-center gap-1 text-sm capitalize", visual.label)}
|
|
>
|
|
{visual.icon}
|
|
{d.state}
|
|
</span>
|
|
}
|
|
>
|
|
<div className="flex flex-col">
|
|
<span className="font-mono text-sm text-text-bright">{d.domain}</span>
|
|
{d.state === "failed" && d.verificationFailedReason && (
|
|
<span className="mt-0.5 text-xs text-rose-400">
|
|
Reason: <span className="font-mono">{d.verificationFailedReason}</span>
|
|
</span>
|
|
)}
|
|
</div>
|
|
</SettingsRow>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function domainVisual(state: DomainRow["state"]) {
|
|
switch (state) {
|
|
case "verified":
|
|
return {
|
|
label: "text-success",
|
|
icon: <CheckCircleIcon className="size-3.5" />,
|
|
};
|
|
case "failed":
|
|
return {
|
|
label: "text-error",
|
|
icon: <ExclamationCircleIcon className="size-3.5" />,
|
|
};
|
|
case "pending":
|
|
default:
|
|
return {
|
|
label: "text-warning",
|
|
icon: <ClockIcon className="size-3.5" />,
|
|
};
|
|
}
|
|
}
|
|
|
|
function ActiveConnectionState({
|
|
orgTitle,
|
|
status,
|
|
activeConnections,
|
|
jitRoles,
|
|
directorySync,
|
|
hasSso,
|
|
draftEnforced,
|
|
draftJitEnabled,
|
|
draftJitRoleId,
|
|
isDirty,
|
|
isSaving,
|
|
onOpenPortal,
|
|
onToggleEnforced,
|
|
onToggleJit,
|
|
onChangeJitRole,
|
|
onSave,
|
|
}: {
|
|
orgTitle: string;
|
|
status: {
|
|
enforced: boolean;
|
|
jitProvisioningEnabled: boolean;
|
|
jitDefaultRoleId: string | null;
|
|
domains: ReadonlyArray<DomainRow>;
|
|
};
|
|
activeConnections: ReadonlyArray<{ id: string; name: string | null; connectionType: string }>;
|
|
jitRoles: ReadonlyArray<Role>;
|
|
directorySync: DirectorySyncStatus;
|
|
hasSso: boolean;
|
|
draftEnforced: boolean;
|
|
draftJitEnabled: boolean;
|
|
draftJitRoleId: string;
|
|
isDirty: boolean;
|
|
isSaving: boolean;
|
|
onOpenPortal: (intent: "sso" | "domain_verification" | "dsync") => void;
|
|
onToggleEnforced: (next: boolean) => void;
|
|
onToggleJit: (next: boolean) => void;
|
|
onChangeJitRole: (roleId: string | null) => void;
|
|
onSave: () => void;
|
|
}) {
|
|
return (
|
|
<>
|
|
<SettingsSection>
|
|
<SettingsHeader
|
|
title="Domains"
|
|
description="The email domains your team signs in with."
|
|
action={
|
|
<Button variant="secondary/small" onClick={() => onOpenPortal("domain_verification")}>
|
|
{status.domains.length > 0 ? "Add domain" : "Verify domain"}
|
|
</Button>
|
|
}
|
|
/>
|
|
{status.domains.length === 0 ? (
|
|
<SettingsBlock>
|
|
<Paragraph variant="small">No domains verified yet.</Paragraph>
|
|
</SettingsBlock>
|
|
) : (
|
|
<DomainList domains={status.domains} />
|
|
)}
|
|
</SettingsSection>
|
|
|
|
<SettingsSection>
|
|
<SettingsHeader
|
|
title="SSO"
|
|
description={`SSO connection for ${orgTitle}.`}
|
|
action={
|
|
<Button variant="secondary/small" onClick={() => onOpenPortal("sso")}>
|
|
Manage connection
|
|
</Button>
|
|
}
|
|
/>
|
|
{activeConnections.map((conn) => (
|
|
<SettingsRow
|
|
key={conn.id}
|
|
title={conn.name ?? conn.connectionType}
|
|
description={`Type: ${conn.connectionType}`}
|
|
action={<StatusIndicator label="Active" />}
|
|
/>
|
|
))}
|
|
|
|
<SettingsRow
|
|
title="Require SSO for matching domains"
|
|
description="Users with an email on a verified domain must sign in with SSO."
|
|
action={
|
|
<Switch variant="medium" checked={draftEnforced} onCheckedChange={onToggleEnforced} />
|
|
}
|
|
/>
|
|
<SettingsRow
|
|
title="Just-in-time provisioning"
|
|
description="Automatically add members on their first SSO sign-in from a verified domain."
|
|
action={
|
|
<Switch variant="medium" checked={draftJitEnabled} onCheckedChange={onToggleJit} />
|
|
}
|
|
/>
|
|
<SettingsRow
|
|
title="Default role for new users"
|
|
description="Assigned to users created by just-in-time provisioning. Owner can't be granted automatically."
|
|
action={
|
|
<Select<string, Role>
|
|
value={draftJitRoleId}
|
|
setValue={(v) => onChangeJitRole(v)}
|
|
items={[...jitRoles]}
|
|
variant="secondary/small"
|
|
dropdownIcon
|
|
popoverClassName="max-w-xs"
|
|
placement="bottom-end"
|
|
text={(v) => jitRoles.find((r) => r.id === v)?.name ?? "Select a role"}
|
|
>
|
|
{(items) =>
|
|
items.map((role) => (
|
|
<RoleSelectItem
|
|
key={role.id}
|
|
id={role.id}
|
|
name={role.name}
|
|
description={role.description}
|
|
/>
|
|
))
|
|
}
|
|
</Select>
|
|
}
|
|
/>
|
|
<SettingsActions>
|
|
<Button variant="primary/small" disabled={!isDirty || isSaving} onClick={onSave}>
|
|
{isSaving ? "Saving…" : "Save"}
|
|
</Button>
|
|
</SettingsActions>
|
|
</SettingsSection>
|
|
|
|
{hasSso ? (
|
|
<DirectorySyncSection
|
|
directorySync={directorySync}
|
|
jitRoles={jitRoles}
|
|
onOpenPortal={() => onOpenPortal("dsync")}
|
|
/>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function StatusIndicator({ label, active = true }: { label: string; active?: boolean }) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"flex flex-none items-center gap-1.5 text-sm",
|
|
active ? "text-success" : "text-text-dimmed"
|
|
)}
|
|
>
|
|
<span className={cn("size-1.5 rounded-full", active ? "bg-success" : "bg-charcoal-500")} />
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
// Option content for the role dropdowns: a bright title with a wrapping,
|
|
// dimmed description beneath it. `wrap` lets long descriptions flow onto
|
|
// multiple lines instead of running off the popover edge.
|
|
function RoleSelectItem({
|
|
id,
|
|
name,
|
|
description,
|
|
}: {
|
|
id: string;
|
|
name: string;
|
|
description?: string;
|
|
}) {
|
|
return (
|
|
<SelectItem value={id} wrap>
|
|
<span className="flex flex-col gap-1">
|
|
<span className="text-text-bright">{name}</span>
|
|
{description ? <span className="text-xs text-text-dimmed">{description}</span> : null}
|
|
</span>
|
|
</SelectItem>
|
|
);
|
|
}
|
|
|
|
function DirectorySyncSection({
|
|
directorySync,
|
|
jitRoles,
|
|
onOpenPortal,
|
|
}: {
|
|
directorySync: DirectorySyncStatus;
|
|
jitRoles: ReadonlyArray<Role>;
|
|
onOpenPortal: () => void;
|
|
}) {
|
|
const fetcher = useFetcher();
|
|
const isSaving = fetcher.state !== "idle";
|
|
|
|
// Deferred save; `useOverrideDraft` keeps fields poll-safe. Role drafts hold
|
|
// the NULL_ROLE_VALUE sentinel; the action converts it to null.
|
|
const externalDraft = useOverrideDraft(directorySync.allowExternalDomainSync);
|
|
const manualDraft = useOverrideDraft(directorySync.allowManualMembership);
|
|
const defaultRoleDraft = useOverrideDraft(
|
|
directorySync.directoryDefaultRoleId ?? NULL_ROLE_VALUE
|
|
);
|
|
const draftExternal = externalDraft.value;
|
|
const setDraftExternal = externalDraft.set;
|
|
const draftManual = manualDraft.value;
|
|
const setDraftManual = manualDraft.set;
|
|
const draftDefaultRole = defaultRoleDraft.value;
|
|
const setDraftDefaultRole = defaultRoleDraft.set;
|
|
|
|
// Sparse override map of only edited groups; rendering falls back to the
|
|
// server value so polled-in groups appear and matched overrides drop.
|
|
const [draftGroupRoles, setDraftGroupRoles] = useState<Record<string, string>>({});
|
|
useEffect(() => {
|
|
setDraftGroupRoles((current) => {
|
|
const next: Record<string, string> = {};
|
|
for (const g of directorySync.groups) {
|
|
const override = current[g.groupId];
|
|
if (override === undefined) continue;
|
|
// Keep only overrides still diverging from the server.
|
|
if (override !== (g.mappedRoleId ?? NULL_ROLE_VALUE)) next[g.groupId] = override;
|
|
}
|
|
const currentKeys = Object.keys(current);
|
|
const unchanged =
|
|
currentKeys.length === Object.keys(next).length &&
|
|
currentKeys.every((k) => next[k] === current[k]);
|
|
return unchanged ? current : next;
|
|
});
|
|
}, [directorySync.groups]);
|
|
|
|
const groupRolesDirty = directorySync.groups.some((g) => {
|
|
const override = draftGroupRoles[g.groupId];
|
|
return override !== undefined && override !== (g.mappedRoleId ?? NULL_ROLE_VALUE);
|
|
});
|
|
const isDirty =
|
|
externalDraft.dirty || manualDraft.dirty || defaultRoleDraft.dirty || groupRolesDirty;
|
|
|
|
const submitSave = () => {
|
|
// Send only changed mappings.
|
|
const changedGroups = directorySync.groups
|
|
.filter((g) => {
|
|
const override = draftGroupRoles[g.groupId];
|
|
return override !== undefined && override !== (g.mappedRoleId ?? NULL_ROLE_VALUE);
|
|
})
|
|
.map((g) => ({ groupId: g.groupId, roleId: draftGroupRoles[g.groupId] }));
|
|
fetcher.submit(
|
|
{
|
|
action: "save_dsync_config",
|
|
allowExternalDomainSync: draftExternal ? "true" : "false",
|
|
allowManualMembership: draftManual ? "true" : "false",
|
|
directoryDefaultRoleId: draftDefaultRole,
|
|
groupRoles: JSON.stringify(changedGroups),
|
|
},
|
|
{ method: "POST" }
|
|
);
|
|
};
|
|
|
|
return (
|
|
<SettingsSection>
|
|
<SettingsHeader
|
|
title="Directory Sync"
|
|
description="Sync users and groups from your identity provider over SCIM. Members of mapped groups are provisioned with the group's role, and removing them from your directory revokes their access."
|
|
action={
|
|
<Button variant="secondary/small" onClick={onOpenPortal}>
|
|
{directorySync.directories.length === 0 ? "Connect a directory" : "Manage directory"}
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
{directorySync.directories.length === 0 ? (
|
|
<SettingsBlock>
|
|
<Paragraph variant="small">
|
|
No directory connected. Once connected, members of mapped groups are provisioned
|
|
automatically.
|
|
</Paragraph>
|
|
</SettingsBlock>
|
|
) : (
|
|
<>
|
|
{directorySync.directories.map((dir) => (
|
|
<SettingsRow
|
|
key={dir.id}
|
|
title={dir.name ?? dir.type}
|
|
description={`${dir.type} · ${directorySync.userCount} ${
|
|
directorySync.userCount === 1 ? "user" : "users"
|
|
}`}
|
|
action={
|
|
<StatusIndicator
|
|
label={dir.state === "active" ? "Active" : "Inactive"}
|
|
active={dir.state === "active"}
|
|
/>
|
|
}
|
|
/>
|
|
))}
|
|
|
|
<SettingsRow
|
|
title="Sync users outside verified domains"
|
|
description="By default, only users on a verified domain are provisioned. Turn on to also provision users on other domains, such as contractors."
|
|
action={
|
|
<Switch
|
|
variant="medium"
|
|
disabled={isSaving}
|
|
checked={draftExternal}
|
|
onCheckedChange={setDraftExternal}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
<SettingsRow
|
|
title="Allow manual membership management"
|
|
description="On by default. Turn off to let Directory Sync manage membership exclusively. While a directory is active, inviting, removing, and leaving are disabled in the dashboard."
|
|
action={
|
|
<Switch
|
|
variant="medium"
|
|
disabled={isSaving}
|
|
checked={draftManual}
|
|
onCheckedChange={setDraftManual}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
<SettingsRow
|
|
title="Default role for unmapped users"
|
|
description={`Assigned to directory users who aren't in a mapped group. Choose "No access" to leave them unprovisioned until they join one.`}
|
|
action={
|
|
<Select<string, Role | { id: string; name: string; description: string }>
|
|
value={draftDefaultRole}
|
|
setValue={(v) => setDraftDefaultRole(v)}
|
|
items={[{ id: NULL_ROLE_VALUE, name: "No access", description: "" }, ...jitRoles]}
|
|
variant="secondary/small"
|
|
dropdownIcon
|
|
popoverClassName="max-w-xs"
|
|
placement="bottom-end"
|
|
text={(v) =>
|
|
v === NULL_ROLE_VALUE
|
|
? "No access"
|
|
: (jitRoles.find((r) => r.id === v)?.name ?? "Select a role")
|
|
}
|
|
>
|
|
{(items) =>
|
|
items.map((role) => (
|
|
<RoleSelectItem
|
|
key={role.id}
|
|
id={role.id}
|
|
name={role.name}
|
|
description={role.description}
|
|
/>
|
|
))
|
|
}
|
|
</Select>
|
|
}
|
|
/>
|
|
|
|
<SettingsHeader
|
|
as="h3"
|
|
title="Group roles"
|
|
description="Map each directory group to a role. Members inherit their group's role."
|
|
/>
|
|
{directorySync.groups.length === 0 ? (
|
|
<SettingsBlock>
|
|
<Paragraph variant="small">
|
|
No groups synced yet. Groups appear here after your directory syncs.
|
|
</Paragraph>
|
|
</SettingsBlock>
|
|
) : (
|
|
directorySync.groups.map((group) => {
|
|
const value = draftGroupRoles[group.groupId] ?? group.mappedRoleId ?? NULL_ROLE_VALUE;
|
|
return (
|
|
<SettingsRow
|
|
key={group.groupId}
|
|
size="sm"
|
|
title={group.name}
|
|
titleClassName="font-medium"
|
|
action={
|
|
<Select<string, Role | { id: string; name: string; description: string }>
|
|
value={value}
|
|
setValue={(v) =>
|
|
setDraftGroupRoles((prev) => ({ ...prev, [group.groupId]: v }))
|
|
}
|
|
items={[
|
|
{ id: NULL_ROLE_VALUE, name: "No access", description: "" },
|
|
...jitRoles,
|
|
]}
|
|
variant="secondary/small"
|
|
dropdownIcon
|
|
popoverClassName="max-w-xs"
|
|
placement="bottom-end"
|
|
text={(v) =>
|
|
v === NULL_ROLE_VALUE
|
|
? "No access"
|
|
: (jitRoles.find((r) => r.id === v)?.name ?? "Select a role")
|
|
}
|
|
>
|
|
{(items) =>
|
|
items.map((role) => (
|
|
<RoleSelectItem
|
|
key={role.id}
|
|
id={role.id}
|
|
name={role.name}
|
|
description={role.description}
|
|
/>
|
|
))
|
|
}
|
|
</Select>
|
|
}
|
|
/>
|
|
);
|
|
})
|
|
)}
|
|
|
|
<SettingsActions>
|
|
<Button variant="primary/small" disabled={!isDirty || isSaving} onClick={submitSave}>
|
|
{isSaving ? "Saving…" : "Save"}
|
|
</Button>
|
|
</SettingsActions>
|
|
</>
|
|
)}
|
|
</SettingsSection>
|
|
);
|
|
}
|
|
|
|
// The portal is hosted by our SSO vendor, so the friendly name is derived from
|
|
// the link's host (e.g. setup.workos.com -> WorkOS). Falls back to the
|
|
// capitalized root label, then to a generic label if the URL can't be parsed.
|
|
const KNOWN_PORTAL_PROVIDERS: Record<string, string> = { workos: "WorkOS" };
|
|
|
|
function portalProviderName(url: string | null): string | null {
|
|
if (!url) return null;
|
|
try {
|
|
const labels = new URL(url).hostname.split(".").filter(Boolean);
|
|
const root = labels.length >= 2 ? labels[labels.length - 2] : labels[0];
|
|
if (!root) return null;
|
|
return KNOWN_PORTAL_PROVIDERS[root.toLowerCase()] ?? root[0].toUpperCase() + root.slice(1);
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function PortalLinkDialog({
|
|
url,
|
|
intent,
|
|
onClose,
|
|
}: {
|
|
url: string | null;
|
|
intent: "sso" | "domain_verification" | "dsync" | null;
|
|
onClose: () => void;
|
|
}) {
|
|
const purpose =
|
|
intent === "domain_verification"
|
|
? "Single-use link to verify your email domains. Share it with whoever manages your DNS."
|
|
: intent === "sso"
|
|
? "Single-use link to connect your identity provider. Share it with whoever manages it."
|
|
: intent === "dsync"
|
|
? "Single-use link to set up Directory Sync over SCIM. Share it with whoever manages your identity provider."
|
|
: "Single-use link to set up SSO.";
|
|
const providerName = portalProviderName(url);
|
|
return (
|
|
<Dialog open={url !== null} onOpenChange={(open) => (open ? undefined : onClose())}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>Admin portal link</DialogHeader>
|
|
<DialogDescription className="text-sm">
|
|
{purpose} It expires 5 minutes after this dialog opens.
|
|
</DialogDescription>
|
|
<ClipboardField value={url ?? ""} variant="secondary/medium" />
|
|
<DialogFooter>
|
|
<Button variant="secondary/small" onClick={onClose}>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="primary/small"
|
|
TrailingIcon={ArrowUpRightIcon}
|
|
onClick={() => {
|
|
if (!url) return;
|
|
// Single-use link; `noopener,noreferrer` isolates the new tab.
|
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
onClose();
|
|
}}
|
|
>
|
|
{providerName ? `Open in ${providerName}` : "Open in new tab"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function EnforceConfirmDialog({
|
|
open,
|
|
orgTitle,
|
|
onCancel,
|
|
onConfirm,
|
|
}: {
|
|
open: boolean;
|
|
orgTitle: string;
|
|
onCancel: () => void;
|
|
onConfirm: () => void;
|
|
}) {
|
|
return (
|
|
<Dialog open={open} onOpenChange={(next) => (next ? undefined : onCancel())}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>Enable SSO enforcement for {orgTitle}?</DialogHeader>
|
|
<DialogDescription>
|
|
Users with an email on a verified domain will be redirected to your identity provider to
|
|
sign in. They can no longer use magic link, GitHub, or Google for that domain.
|
|
<br />
|
|
<br />
|
|
Users with other emails, such as contractors, keep their existing sign-in methods.
|
|
</DialogDescription>
|
|
<DialogFooter>
|
|
<Button variant="secondary/small" onClick={onCancel}>
|
|
Cancel
|
|
</Button>
|
|
<Button variant="primary/small" onClick={onConfirm}>
|
|
Enable enforcement
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|