import { useAtomValue } from "@effect/atom-react";import * as AsyncResult from "effect/unstable/reactivity/AsyncResult"; import { connectionsAtom } from "@executor-js/react/api/atoms";import { useScope, useScopeStack, useUserScope } from "@executor-js/react/api/scope-context";import { SourceCredentialNotice, SourceCredentialStatusBadge, missingSourceCredentialLabels, type SourceCredentialSlot,} from "@executor-js/react/plugins/source-credential-status";import { ScopeId } from "@executor-js/sdk/core"; import { graphqlSourceAtom, graphqlSourceBindingsAtom } from "./atoms";import type { StoredGraphqlSource } from "../sdk/store"; const sourceCredentialSlots = (source: StoredGraphqlSource): readonly SourceCredentialSlot[] => { const slots: SourceCredentialSlot[] = []; for (const [name, value] of Object.entries(source.headers)) { if (typeof value !== "string") slots.push({ kind: "secret", slot: value.slot, label: name }); } for (const [name, value] of Object.entries(source.queryParams)) { if (typeof value !== "string") slots.push({ kind: "secret", slot: value.slot, label: name }); } if (source.auth.kind === "oauth2") { slots.push({ kind: "connection", slot: source.auth.connectionSlot, label: "OAuth sign-in", }); } return slots;}; export default function GraphqlSourceSummary(props: { sourceId: string; variant?: "badge" | "panel"; onAction?: () => void;}) { const displayScope = useScope(); const userScope = useUserScope(); const scopeStack = useScopeStack(); const sourceResult = useAtomValue(graphqlSourceAtom(displayScope, props.sourceId)); const source = AsyncResult.isSuccess(sourceResult) && sourceResult.value ? sourceResult.value : null; const sourceScope = source ? ScopeId.make(source.scope) : displayScope; const bindingsResult = useAtomValue( graphqlSourceBindingsAtom(displayScope, props.sourceId, sourceScope), ); const connectionsResult = useAtomValue(connectionsAtom(displayScope)); if (!source) return null; const slots = sourceCredentialSlots(source as StoredGraphqlSource); if (slots.length === 0) return null; if (!AsyncResult.isSuccess(bindingsResult) || !AsyncResult.isSuccess(connectionsResult)) { return props.variant === "panel" ? null : ( <SourceCredentialStatusBadge missing={["credentials"]} /> ); } const scopeRanks = new Map(scopeStack.map((scope, index) => [scope.id, index] as const)); const liveConnectionIds = new Set(connectionsResult.value.map((connection) => connection.id)); const missing = missingSourceCredentialLabels({ slots, bindings: bindingsResult.value, targetScope: userScope, scopeRanks, liveConnectionIds, }); if (props.variant === "panel") { return <SourceCredentialNotice missing={missing} onAction={props.onAction} />; } return <SourceCredentialStatusBadge missing={missing} />;}
import { useAtomValue } from "@effect/atom-react";
import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
import { connectionsAtom } from "@executor-js/react/api/atoms";
import { useScope, useScopeStack, useUserScope } from "@executor-js/react/api/scope-context";
import {
SourceCredentialNotice,
SourceCredentialStatusBadge,
missingSourceCredentialLabels,
type SourceCredentialSlot,
} from "@executor-js/react/plugins/source-credential-status";
import { ScopeId } from "@executor-js/sdk/core";
import { graphqlSourceAtom, graphqlSourceBindingsAtom } from "./atoms";
import type { StoredGraphqlSource } from "../sdk/store";
const sourceCredentialSlots = (source: StoredGraphqlSource): readonly SourceCredentialSlot[] => {
const slots: SourceCredentialSlot[] = [];
for (const [name, value] of Object.entries(source.headers)) {
if (typeof value !== "string") slots.push({ kind: "secret", slot: value.slot, label: name });
}
for (const [name, value] of Object.entries(source.queryParams)) {
if (typeof value !== "string") slots.push({ kind: "secret", slot: value.slot, label: name });
}
if (source.auth.kind === "oauth2") {
slots.push({
kind: "connection",
slot: source.auth.connectionSlot,
label: "OAuth sign-in",
});
}
return slots;
};
export default function GraphqlSourceSummary(props: {
sourceId: string;
variant?: "badge" | "panel";
onAction?: () => void;
}) {
const displayScope = useScope();
const userScope = useUserScope();
const scopeStack = useScopeStack();
const sourceResult = useAtomValue(graphqlSourceAtom(displayScope, props.sourceId));
const source =
AsyncResult.isSuccess(sourceResult) && sourceResult.value ? sourceResult.value : null;
const sourceScope = source ? ScopeId.make(source.scope) : displayScope;
const bindingsResult = useAtomValue(
graphqlSourceBindingsAtom(displayScope, props.sourceId, sourceScope),
);
const connectionsResult = useAtomValue(connectionsAtom(displayScope));
if (!source) return null;
const slots = sourceCredentialSlots(source as StoredGraphqlSource);
if (slots.length === 0) return null;
if (!AsyncResult.isSuccess(bindingsResult) || !AsyncResult.isSuccess(connectionsResult)) {
return props.variant === "panel" ? null : (
<SourceCredentialStatusBadge missing={["credentials"]} />
);
}
const scopeRanks = new Map(scopeStack.map((scope, index) => [scope.id, index] as const));
const liveConnectionIds = new Set(connectionsResult.value.map((connection) => connection.id));
const missing = missingSourceCredentialLabels({
slots,
bindings: bindingsResult.value,
targetScope: userScope,
scopeRanks,
liveConnectionIds,
});
if (props.variant === "panel") {
return <SourceCredentialNotice missing={missing} onAction={props.onAction} />;
}
return <SourceCredentialStatusBadge missing={missing} />;
}