Function AdminUsersPage

packages/react/src/pages/admin-users.tsx:605–808

()

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

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

  // A new term is a new list, so it starts on its first page: an offset kept
  // from a broader list would land past the end of a narrower one.
  const page = { limit: ADMIN_USERS_PAGE_SIZE, offset, search: search.term };
  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>
  );

  const searching = search.term !== "";

  return (
    <PageContainer>
      {header}

      <UserSearch
        value={search.typed}
        onChange={(value) => {
          search.setTyped(value);
          setOffset(0);
        }}
        onClear={() => {
          search.clear();
          setOffset(0);
        }}
      />

      {isAsyncResultLoading(result)
        ? loading
        : AsyncResult.match(result, {
            onInitial: () => loading,
            onFailure: (failure) =>