Function AdminUsersPage

packages/react/src/pages/admin-users.tsx:526–692

()

// ── Page ────────────────────────────────────────────────────────────────────

export function AdminUsersPage() {
  useExecutorDocumentTitle("Users");
  const [offset, setOffset] = useState(0);
  const [selected, setSelected] = useState<AdminUserRow | null>(null);

  const page = { limit: ADMIN_USERS_PAGE_SIZE, offset };
  const result = useAtomValue(adminUsersWithConnectionsAtom(page));
  const refresh = useAtomRefresh(adminUsersWithConnectionsAtom(page));
  const catalog = useCatalogRows();
  const icons = useIntegrationIcons();
  // The route is `/{-$orgSlug}/users`: the segment is OPTIONAL, so this reads
  // `undefined` on any host that renders no segment and the link falls back to
  // the bare form. Both cloud and self-host do canonicalize onto a slug (self-
  // host onto `default`), so in practice the prefixed form is what ships — but
  // the optional param is the contract, not an assumption about the host.
  const { orgSlug } = useParams({ strict: false }) as { orgSlug?: string };

  const header = (
    <PageHeader
      title="Users"
      description="Everyone who has used this workspace, and what each of them has connected."
    />
  );

  const loading = (
    <div className="flex flex-col gap-2">
      {[0, 1, 2, 3].map((row) => (
        <Skeleton key={row} className="h-14" />
      ))}
    </div>
  );

  return (
    <PageContainer>
      {header}

      {isAsyncResultLoading(result)
        ? loading
        : AsyncResult.match(result, {
            onInitial: () => loading,
            onFailure: (failure) =>
              isAccessDenied(failure.cause) ? (
                <AccessDenied />
              ) : (
                <ErrorState message="Couldn't load users" onRetry={refresh} />
              ),
            onSuccess: ({ value }) => {
              const { rows, hasNext } = splitPage(value.users, ADMIN_USERS_PAGE_SIZE);

              if (rows.length === 0) {
                return (
                  <div className="rounded-lg border border-dashed border-border bg-card p-8">
                    <h2 className="text-base font-semibold text-foreground">
                      {offset === 0 ? "No users yet" : "No users on this page"}
                    </h2>
                    <p className="mt-2 max-w-xl text-sm leading-6 text-muted-foreground">
                      {offset === 0
                        ? "A user appears here the first time they reach this workspace or connect an account."