Function ApiKeysManager

frontend/src/pages/ApiKeysManager.tsx:61–511

()

}

export function ApiKeysManager() {
  const roles = useAuthStore((state) => state.roles);
  const canManageKeys = hasAdminRole(roles);
  const isReadOnly = !canManageKeys;

  const apiKeys = useApiKeyStore((state) => state.apiKeys);
  const loading = useApiKeyStore((state) => state.loading);
  const error = useApiKeyStore((state) => state.error);
  const fetchApiKeys = useApiKeyStore((state) => state.fetchApiKeys);
  const createApiKey = useApiKeyStore((state) => state.createApiKey);
  const revokeApiKey = useApiKeyStore((state) => state.revokeApiKey);
  const deleteApiKey = useApiKeyStore((state) => state.deleteApiKey);
  const lastCreatedKey = useApiKeyStore((state) => state.lastCreatedKey);
  const clearLastCreatedKey = useApiKeyStore((state) => state.clearLastCreatedKey);

  const [isCreateOpen, setIsCreateOpen] = useState(false);
  const [formState, setFormState] = useState<CreateApiKeyInput>(INITIAL_FORM);
  const [createError, setCreateError] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const [successMessage, setSuccessMessage] = useState<string | null>(null);

  // Revoke/Delete Confirmation
  const [confirmAction, setConfirmAction] = useState<{
    type: 'revoke' | 'delete';
    target: ApiKeyResponseDto;
  } | null>(null);

  useEffect(() => {
    fetchApiKeys().catch(console.error);
  }, [fetchApiKeys]);

  const handleCreateOpenChange = (open: boolean) => {
    setIsCreateOpen(open);
    if (!open) {
      setFormState(INITIAL_FORM);
      setCreateError(null);
      clearLastCreatedKey(); // Clear sensitive key if dialog closed
    }
  };

  const handleInputChange = (field: keyof CreateApiKeyInput, value: any) => {
    setFormState((prev) => ({
      ...prev,
      [field]: value,
    }));
  };

  const handlePermissionChange = (
    category: 'workflows' | 'runs',
    action: string,
    checked: boolean,
  ) => {
    setFormState((prev) => ({
      ...prev,
      permissions: {
        ...prev.permissions,
        [category]: {