import { CardStack, CardStackContent, CardStackEntryField,} from "@executor-js/react/components/card-stack";import { Input } from "@executor-js/react/components/input";import { Textarea } from "@executor-js/react/components/textarea";import { IntegrationIdentityFieldRows, type IntegrationIdentity,} from "@executor-js/react/plugins/integration-identity";export function GraphqlIntegrationFields(props: { readonly endpoint: string; readonly onEndpointChange: (endpoint: string) => void; readonly identity: IntegrationIdentity; /** The integration's agent-visible description. Blank = the backend falls * back to the introspected schema's own description, then the name. */ readonly description?: string; readonly onDescriptionChange?: (value: string) => void; readonly endpointDisabled?: boolean; readonly namespaceReadOnly?: boolean;}) { return ( <CardStack> <CardStackContent className="border-t-0"> <CardStackEntryField label="Endpoint" hint="The endpoint will be introspected to discover available queries and mutations." > <Input value={props.endpoint} onChange={(e) => props.onEndpointChange((e.target as HTMLInputElement).value)} placeholder="https://api.example.com/graphql" className="font-mono text-sm" disabled={props.endpointDisabled} /> </CardStackEntryField> <IntegrationIdentityFieldRows identity={props.identity} namePlaceholder="e.g. Shopify API" namespaceReadOnly={props.namespaceReadOnly} /> {props.onDescriptionChange && ( <CardStackEntryField label="Description"> <Textarea value={props.description ?? ""} onChange={(e) => props.onDescriptionChange?.((e.target as HTMLTextAreaElement).value)} placeholder="What this API is and when to reach for it" rows={2} maxRows={6} className="text-sm" /> <p className="text-[11px] text-muted-foreground"> Agent-visible. Leave blank to use the schema's own description when it has one. </p> </CardStackEntryField> )} </CardStackContent> </CardStack> );}
import {
CardStack,
CardStackContent,
CardStackEntryField,
} from "@executor-js/react/components/card-stack";
import { Input } from "@executor-js/react/components/input";
import { Textarea } from "@executor-js/react/components/textarea";
import {
IntegrationIdentityFieldRows,
type IntegrationIdentity,
} from "@executor-js/react/plugins/integration-identity";
export function GraphqlIntegrationFields(props: {
readonly endpoint: string;
readonly onEndpointChange: (endpoint: string) => void;
readonly identity: IntegrationIdentity;
/** The integration's agent-visible description. Blank = the backend falls
* back to the introspected schema's own description, then the name. */
readonly description?: string;
readonly onDescriptionChange?: (value: string) => void;
readonly endpointDisabled?: boolean;
readonly namespaceReadOnly?: boolean;
}) {
return (
<CardStack>
<CardStackContent className="border-t-0">
<CardStackEntryField
label="Endpoint"
hint="The endpoint will be introspected to discover available queries and mutations."
>
<Input
value={props.endpoint}
onChange={(e) => props.onEndpointChange((e.target as HTMLInputElement).value)}
placeholder="https://api.example.com/graphql"
className="font-mono text-sm"
disabled={props.endpointDisabled}
/>
</CardStackEntryField>
<IntegrationIdentityFieldRows
identity={props.identity}
namePlaceholder="e.g. Shopify API"
namespaceReadOnly={props.namespaceReadOnly}
/>
{props.onDescriptionChange && (
<CardStackEntryField label="Description">
<Textarea
value={props.description ?? ""}
onChange={(e) => props.onDescriptionChange?.((e.target as HTMLTextAreaElement).value)}
placeholder="What this API is and when to reach for it"
rows={2}
maxRows={6}
className="text-sm"
/>
<p className="text-[11px] text-muted-foreground">
Agent-visible. Leave blank to use the schema's own description when it has one.
</p>
</CardStackEntryField>
)}
</CardStackContent>
</CardStack>
);
}