Function OrgApiKeysSectionBody

packages/react/src/pages/api-keys.tsx:374–529

()

}

function OrgApiKeysSectionBody() {
  const result = useAtomValue(orgApiKeysAtom);
  const refresh = useAtomRefresh(orgApiKeysAtom);
  const doCreate = useAtomSet(createOrgApiKey, { mode: "promiseExit" });
  const doRevoke = useAtomSet(revokeOrgApiKey, { mode: "promiseExit" });
  const [createOpen, setCreateOpen] = useState(false);
  // Same remount-per-open discipline as the personal dialog above.
  const [openCount, setOpenCount] = useState(0);
  const [confirmRevoke, setConfirmRevoke] = useState<ApiKeySummary | null>(null);
  const [revokingId, setRevokingId] = useState<string | null>(null);

  const handleCreate = async (name: string): Promise<CreatedKey | null> => {
    const exit = await doCreate({ payload: { name }, reactivityKeys: orgApiKeyWriteKeys });
    trackEvent("org_api_key_created", { success: Exit.isSuccess(exit) });
    if (Exit.isSuccess(exit)) {
      toast.success("Organization key created");
      return exit.value;
    }
    toast.error("Failed to create organization key");
    return null;
  };

  const handleRevoke = async (key: ApiKeySummary) => {
    setConfirmRevoke(null);
    setRevokingId(key.id);
    const exit = await doRevoke({
      params: { apiKeyId: key.id },
      reactivityKeys: orgApiKeyWriteKeys,
    });
    setRevokingId(null);
    trackEvent("org_api_key_revoked", { success: Exit.isSuccess(exit) });
    if (Exit.isSuccess(exit)) {
      toast.success(`Revoked ${key.name}`);
      return;
    }
    toast.error("Failed to revoke organization key");
  };

  return (
    <section className="mt-10">
      <div className="mb-4 flex items-start justify-between gap-4">
        <div>
          <h2 className="text-sm font-medium text-foreground">Organization keys</h2>
          <p className="mt-0.5 max-w-2xl text-sm text-muted-foreground">
            Read-only keys owned by the organization, not a member. They authenticate the admin API
            (who are my users, what have they connected) and cannot act as anyone or write anything.
            Admins only.
          </p>
        </div>
        <Button
          size="sm"
          onClick={() => {
            setOpenCount((count) => count + 1);
            setCreateOpen(true);
          }}
        >
          <span aria-hidden="true">+</span>
          New org key