sources: per-source connection status badge

- sources page SourceGrid now renders each plugin's summary component with Suspense, passing sourceId. Threads sourcePlugins into the grid. - OpenApiSourceSummary turns into a real ConnectedBadge: reads secretStatusAtom for the configured access token and shows Connected / Not connected / skeleton (initial). Renders nothing for non-OAuth sources so bearer and header-auth sources stay clean.

Rhys Sullivan committed 6 months ago

Commit 1a356d31 parent 28d5a722 files · +92 −20Browse files

Unified · Split

2 files

packages/plugins/openapi/src/react/OpenApiSourceSummary.tsx +53 −1
packages/react/src/pages/sources.tsx +39 −19

packages/plugins/openapi/src/react/OpenApiSourceSummary.tsx+53−1

@@ -1,3 +1,55 @@
		1	import { Result, useAtomValue } from "@effect-atom/atom-react";
		2
		3	import { SecretId } from "@executor/sdk";
		4	import { useScope } from "@executor/react/api/scope-context";
		5	import { secretStatusAtom } from "@executor/react/api/atoms";
		6	import { Badge } from "@executor/react/components/badge";
		7	import { Skeleton } from "@executor/react/components/skeleton";
		8
		9	import { openApiSourceAtom } from "./atoms";
		10
		11	function ConnectedBadge(props: { accessTokenSecretId: string }) {
		12	const scopeId = useScope();
		13	const status = useAtomValue(
		14	secretStatusAtom(scopeId, SecretId.make(props.accessTokenSecretId)),
		15	);
		16
		17	return Result.match(status, {
		18	onInitial: () => <Skeleton className="h-5 w-20 rounded-full" />,
		19	onFailure: () => (
		20	<Badge variant="outline" className="text-[10px] text-muted-foreground">
		21	Not connected
		22	</Badge>
		23	),
		24	onSuccess: ({ value }) =>
		25	value.status === "resolved" ? (
		26	<Badge
		27	variant="outline"
		28	className="border-green-500/30 bg-green-500/5 text-[10px] text-green-700 dark:text-green-400"
		29	>
		30	Connected
		31	</Badge>
		32	) : (
		33	<Badge variant="outline" className="text-[10px] text-muted-foreground">
		34	Not connected
		35	</Badge>
		36	),
		37	});
		38	}
		39
		40	// The entry row already renders name + id + kind, so this summary
		41	// component only contributes extras — specifically, an OAuth status
		42	// badge when the source has OAuth2 configured. Non-OAuth sources
		43	// render nothing.
1	export default function OpenApiSourceSummary(props: { sourceId: string }) {	44	export default function OpenApiSourceSummary(props: { sourceId: string }) {
2	return <span>OpenAPI · {props.sourceId}</span>;	45	const scopeId = useScope();
		46	const sourceResult = useAtomValue(openApiSourceAtom(scopeId, props.sourceId));
		47
		48	const oauth2 =
		49	Result.isSuccess(sourceResult) && sourceResult.value
		50	? sourceResult.value.config.oauth2
		51	: undefined;
		52
		53	if (!oauth2) return null;
		54	return <ConnectedBadge accessTokenSecretId={oauth2.accessTokenSecretId} />;
3	}	55	}

packages/react/src/pages/sources.tsx+39−19

-import { useState, useCallback, useMemo } from "react";
+import { Suspense, useState, useCallback, useMemo } from "react";
 import { Link, useNavigate } from "@tanstack/react-router";
 import { Result, useAtomSet } from "@effect-atom/atom-react";
 import { detectSource } from "../api/atoms";
               <div className="mb-8 space-y-8">
                 {connectedSources.length > 0 && (
                   <section className="space-y-3">
-                    <SourceGrid sources={connectedSources} />
+                    <SourceGrid
+                      sources={connectedSources}
+                      sourcePlugins={sourcePlugins}
+                    />
                   </section>
                 )}
               </div>
     url?: string;
     runtime?: boolean;
   }[];
+  sourcePlugins: readonly SourcePlugin[];
 }) {
+  const pluginByKind = useMemo(() => {
+    const out = new Map<string, SourcePlugin>();
+    for (const p of props.sourcePlugins) out.set(p.key, p);
+    return out;
+  }, [props.sourcePlugins]);
   return (
     <CardStack searchable>
       <CardStackHeader>Connected</CardStackHeader>
       <CardStackContent>
-        {props.sources.map((s) => (
+        {props.sources.map((s) => {
-          <CardStackEntry key={s.id} asChild searchText={`${s.name} ${s.id} ${s.kind}`}>
+          const pluginKey = KIND_TO_PLUGIN_KEY[s.kind] ?? s.kind;
-            <Link to="/sources/$namespace" params={{ namespace: s.id }}>
+          const plugin = pluginByKind.get(pluginKey);
-              <CardStackEntryMedia>
+          const SummaryComponent = plugin?.summary;
-                <SourceFavicon url={s.url} size={32} />
+          return (
-              </CardStackEntryMedia>
+            <CardStackEntry key={s.id} asChild searchText={`${s.name} ${s.id} ${s.kind}`}>
-              <CardStackEntryContent>
+              <Link to="/sources/$namespace" params={{ namespace: s.id }}>
-                <CardStackEntryTitle>{s.name}</CardStackEntryTitle>
+                <CardStackEntryMedia>
-                <CardStackEntryDescription>{s.id}</CardStackEntryDescription>
+                  <SourceFavicon url={s.url} size={32} />
-              </CardStackEntryContent>
+                </CardStackEntryMedia>
-              <CardStackEntryActions>
+                <CardStackEntryContent>
-                {s.runtime && <Badge className="bg-muted text-muted-foreground">built-in</Badge>}
+                  <CardStackEntryTitle>{s.name}</CardStackEntryTitle>
-                <Badge variant="secondary">{s.kind}</Badge>
+                  <CardStackEntryDescription>{s.id}</CardStackEntryDescription>
-              </CardStackEntryActions>
+                </CardStackEntryContent>
-            </Link>
+                <CardStackEntryActions>
-          </CardStackEntry>
+                  {SummaryComponent && (
-        ))}
+                    <Suspense fallback={null}>
+                      <SummaryComponent sourceId={s.id} />
+                    </Suspense>
+                  )}
+                  {s.runtime && <Badge className="bg-muted text-muted-foreground">built-in</Badge>}
+                  <Badge variant="secondary">{s.kind}</Badge>
+                </CardStackEntryActions>
+              </Link>
+            </CardStackEntry>
+          );
+        })}
       </CardStackContent>
     </CardStack>
   );