(props: {
readonly user: AdminUserRow;
readonly catalog: readonly AdminCatalogRow[];
readonly icons: IconLookup;
readonly orgSlug: string | undefined;
})
| 365 | // ── Detail sheet ──────────────────────────────────────────────────────────── |
| 366 | |
| 367 | function UserDetail(props: { |
| 368 | readonly user: AdminUserRow; |
| 369 | readonly catalog: readonly AdminCatalogRow[]; |
| 370 | readonly icons: IconLookup; |
| 371 | readonly orgSlug: string | undefined; |
| 372 | }) { |
| 373 | const result = useAtomValue(adminUserConnectionsAtom(props.user.externalId)); |
| 374 | const refresh = useAtomRefresh(adminUserConnectionsAtom(props.user.externalId)); |
| 375 | // The connect link targets the recipient's own session, so it is built for |
| 376 | // this deployment's origin and copied out — never navigated to from here. It |
| 377 | // carries THIS admin's org so a multi-org recipient connects in the workspace |
| 378 | // the link came from, not whichever one their session defaults to. |
| 379 | const origin = globalThis.window?.location?.origin ?? ""; |
| 380 | |
| 381 | if (isAsyncResultLoading(result)) { |
| 382 | return ( |
| 383 | <div className="flex flex-col gap-2 p-6"> |
| 384 | {[0, 1, 2].map((row) => ( |
| 385 | <Skeleton key={row} className="h-12" /> |
| 386 | ))} |
| 387 | </div> |
| 388 | ); |
| 389 | } |
| 390 | |
| 391 | return AsyncResult.match(result, { |
| 392 | onInitial: () => ( |
| 393 | <div className="flex flex-col gap-2 p-6"> |
| 394 | {[0, 1, 2].map((row) => ( |
| 395 | <Skeleton key={row} className="h-12" /> |
| 396 | ))} |
| 397 | </div> |
| 398 | ), |
| 399 | onFailure: (failure) => |
| 400 | isAccessDenied(failure.cause) ? ( |
| 401 | <div className="p-6"> |
| 402 | <AccessDenied /> |
| 403 | </div> |
| 404 | ) : ( |
| 405 | <div className="p-6"> |
| 406 | <ErrorState message="Couldn't load this user's connections" onRetry={refresh} /> |
| 407 | </div> |
| 408 | ), |
| 409 | onSuccess: ({ value }) => { |
| 410 | const states = integrationConnectionStates(props.catalog, value.connections); |
| 411 | const connected = states.filter((state) => state.connected); |
| 412 | const available = states.filter((state) => !state.connected); |
| 413 | |
| 414 | return ( |
| 415 | <div className="flex flex-col gap-8 overflow-y-auto p-6"> |
| 416 | <section> |
| 417 | <h3 className="font-mono text-[11px] font-medium uppercase tracking-[0.08em] text-muted-foreground"> |
| 418 | Connected · {connected.length} |
| 419 | </h3> |
| 420 | {connected.length === 0 ? ( |
| 421 | <p className="mt-3 text-sm leading-6 text-muted-foreground"> |
| 422 | This user hasn't connected anything yet. Send them a connect link below to get |
| 423 | started. |
| 424 | </p> |
nothing calls this directly
no test coverage detected