62 lines · 2.3 KB · TypeScript
RawDownload
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>  );}