import type { ConnectionId, ScopeId, SecretBackedValue } from "@executor-js/sdk"; import {  CredentialControlField,  CredentialUsageRow,  type CredentialTargetScopeOption,} from "./credential-target-scope";import { SourceOAuthSignInButton } from "./oauth-sign-in"; export function SourceOAuthConnectionControl(props: {  readonly popupName: string;  readonly pluginId: string;  readonly namespace: string;  readonly fallbackNamespace: string;  readonly endpoint: string;  readonly tokenScope: ScopeId;  readonly onTokenScopeChange: (scope: ScopeId) => void;  readonly credentialScopeOptions: readonly CredentialTargetScopeOption[];  readonly connectionId: string | null;  readonly sourceLabel: string;  readonly headers?: Record<string, SecretBackedValue>;  readonly queryParams?: Record<string, SecretBackedValue>;  readonly isConnected: boolean;  readonly onConnected: (connectionId: ConnectionId) => void | Promise<void>;  readonly disabled?: boolean;  readonly reconnectingLabel?: string;  readonly signingInLabel?: string;}) {  return (    <CredentialUsageRow      value={props.tokenScope}      options={props.credentialScopeOptions}      onChange={props.onTokenScopeChange}      label="Connection saved to"      help="Choose who can use the OAuth connection."    >      <CredentialControlField label="OAuth connection" help="Start the provider OAuth flow.">        <div className="flex min-h-9 items-center gap-2 rounded-md border border-border bg-muted/30 px-3 py-2">          {props.isConnected ? (            <span className="text-xs font-medium text-emerald-600 dark:text-emerald-400">              Connected            </span>          ) : (            <span className="text-xs text-muted-foreground">Not connected</span>          )}          <div className="ml-auto">            <SourceOAuthSignInButton              popupName={props.popupName}              pluginId={props.pluginId}              namespace={props.namespace}              fallbackNamespace={props.fallbackNamespace}              endpoint={props.endpoint}              tokenScope={props.tokenScope}              connectionId={props.connectionId}              sourceLabel={props.sourceLabel}              headers={props.headers}              queryParams={props.queryParams}              isConnected={props.isConnected}              onConnected={props.onConnected}              reconnectingLabel={props.reconnectingLabel}              signingInLabel={props.signingInLabel}            />          </div>        </div>      </CredentialControlField>    </CredentialUsageRow>  );}