Function AccountRow

packages/react/src/components/accounts-section.tsx:63–194

(props: {
  readonly connection: Connection;
  /** The integration declares scopes this connection was not granted — it must
   *  reconnect to grant the newly-needed access (e.g. after a service was added). */
  readonly needsReconsent: boolean;
  readonly showOwnerLabel: boolean;
  readonly onEdit: () => void;
  readonly onReconnect: () => void;
  readonly onRemove: () => void;
})

const OWNERS: readonly Owner[] = ["org", "user"];

function AccountRow(props: {
  readonly connection: Connection;
  /** The integration declares scopes this connection was not granted — it must
   *  reconnect to grant the newly-needed access (e.g. after a service was added). */
  readonly needsReconsent: boolean;
  readonly showOwnerLabel: boolean;
  readonly onEdit: () => void;
  readonly onReconnect: () => void;
  readonly onRemove: () => void;
}) {
  const { connection, needsReconsent } = props;
  const [checking, setChecking] = useState(false);

  // The status renders WITHOUT any clicking: every checkHealth run persists its
  // verdict on the connection row, so the list answers "has this expired?" at a
  // glance. A live check from this session takes precedence. We deliberately do
  // NOT derive expiry from the stored `expiresAt`: that's the access-token
  // lifetime, which refreshes, so a passive countdown means nothing.
  //
  // Health checks are AUTOMATIC: the hook revalidates on mount, stale-while-
  // revalidate style (shared with the integrations-list summary), and the
  // persisted verdict renders instantly while the probe corrects it in place.
  const { probe, status, runCheck } = useConnectionHealth(connection);
  const indicator = HEALTH_INDICATOR_COLOR[status];

  // Prefer a probed identity (the live account), then the stored label, then the
  // connection name. The probe is the whole point: it shows WHICH account this is.
  const identity =
    (probe?.identity && probe.identity.length > 0 ? probe.identity : null) ??
    (connection.identityLabel && connection.identityLabel.length > 0
      ? connection.identityLabel
      : null);
  const displayLabel = identity ?? String(connection.name);

  const expired = status === "expired";

  const handleCheck = async () => {
    if (checking) return;
    setChecking(true);
    const exit = await runCheck();
    setChecking(false);
    if (Exit.isFailure(exit)) {
      toast.error(messageFromExit(exit, "Health check failed"));
      return;
    }
    // The hook already folded the fresh probe into the live state.
    if (exit.value.status === "healthy") {
      toast.success(
        exit.value.identity ? `Healthy: ${exit.value.identity}` : "Connection is healthy",
      );
    } else if (exit.value.status === "expired") {
      toast.error("Connection expired, reconnect to restore access");
    } else if (exit.value.status === "degraded") {
      toast.warning(exit.value.detail ?? "Connection check returned an error");
    } else {
      toast.message("No health check is configured for this integration");
    }
  };