Share OAuth sign-in button UI (#451)

Author: RhysSullivan

packages/plugins/google-discovery/src/react/GoogleDiscoverySignInButton.tsx

@@ -4,8 +4,8 @@ import { useAtomSet, useAtomValue, Result } from "@effect-atom/atom-react";
 import { connectionsAtom } from "@executor/react/api/atoms";
 import { useScope } from "@executor/react/api/scope-context";
 import { connectionWriteKeys, sourceWriteKeys } from "@executor/react/api/reactivity-keys";
-import { Button } from "@executor/react/components/button";
 import {
+  OAuthSignInButton,
   oauthCallbackUrl,
   useOAuthPopupFlow,
   type OAuthCompletionPayload,
@@ -96,17 +96,13 @@ export default function GoogleDiscoverySignInButton(props: { sourceId: string })
   if (!oauth2) return null;
 
   return (
-    <div className="flex items-center gap-2">
-      {oauth.error && <span className="text-xs text-destructive">{oauth.error}</span>}
-      <Button variant="outline" size="sm" onClick={() => void handleSignIn()} disabled={oauth.busy}>
-        {oauth.busy
-          ? isConnected
-            ? "Reconnecting…"
-            : "Signing in…"
-          : isConnected
-            ? "Reconnect"
-            : "Sign in"}
-      </Button>
-    </div>
+    <OAuthSignInButton
+      busy={oauth.busy}
+      error={oauth.error}
+      isConnected={isConnected}
+      onSignIn={() => void handleSignIn()}
+      reconnectingLabel="Reconnecting…"
+      signingInLabel="Signing in…"
+    />
   );
 }

packages/plugins/graphql/src/react/GraphqlSignInButton.tsx

@@ -4,8 +4,8 @@ import { useAtomSet, useAtomValue, Result } from "@effect-atom/atom-react";
 import { connectionsAtom } from "@executor/react/api/atoms";
 import { useScope } from "@executor/react/api/scope-context";
 import { sourceWriteKeys } from "@executor/react/api/reactivity-keys";
-import { Button } from "@executor/react/components/button";
 import {
+  OAuthSignInButton,
   oauthCallbackUrl,
   oauthConnectionId,
   useOAuthPopupFlow,
@@ -64,17 +64,11 @@ export default function GraphqlSignInButton(props: { sourceId: string }) {
   if (!oauth2) return null;
 
   return (
-    <div className="flex items-center gap-2">
-      {oauth.error && <span className="text-xs text-destructive">{oauth.error}</span>}
-      <Button variant="outline" size="sm" onClick={() => void handleSignIn()} disabled={oauth.busy}>
-        {oauth.busy
-          ? isConnected
-            ? "Reconnecting..."
-            : "Signing in..."
-          : isConnected
-            ? "Reconnect"
-            : "Sign in"}
-      </Button>
-    </div>
+    <OAuthSignInButton
+      busy={oauth.busy}
+      error={oauth.error}
+      isConnected={isConnected}
+      onSignIn={() => void handleSignIn()}
+    />
   );
 }

packages/plugins/mcp/src/react/McpSignInButton.tsx

@@ -4,8 +4,8 @@ import { useAtomSet, useAtomValue, Result } from "@effect-atom/atom-react";
 import { useScope } from "@executor/react/api/scope-context";
 import { sourceWriteKeys } from "@executor/react/api/reactivity-keys";
 import { connectionsAtom } from "@executor/react/api/atoms";
-import { Button } from "@executor/react/components/button";
 import {
+  OAuthSignInButton,
   oauthCallbackUrl,
   oauthConnectionId,
   useOAuthPopupFlow,
@@ -75,17 +75,13 @@ export default function McpSignInButton(props: { sourceId: string }) {
   if (!oauth2) return null;
 
   return (
-    <div className="flex items-center gap-2">
-      {oauth.error && <span className="text-xs text-destructive">{oauth.error}</span>}
-      <Button variant="outline" size="sm" onClick={() => void handleSignIn()} disabled={oauth.busy}>
-        {oauth.busy
-          ? isConnected
-            ? "Reconnecting…"
-            : "Signing in…"
-          : isConnected
-            ? "Reconnect"
-            : "Sign in"}
-      </Button>
-    </div>
+    <OAuthSignInButton
+      busy={oauth.busy}
+      error={oauth.error}
+      isConnected={isConnected}
+      onSignIn={() => void handleSignIn()}
+      reconnectingLabel="Reconnecting…"
+      signingInLabel="Signing in…"
+    />
   );
 }

packages/react/src/plugins/oauth-sign-in.tsx

@@ -4,6 +4,7 @@ import { useAtomSet } from "@effect-atom/atom-react";
 import { cancelOAuth, startOAuth } from "../api/atoms";
 import { openOAuthPopup, type OAuthPopupResult } from "../api/oauth-popup";
 import { useScope } from "../api/scope-context";
+import { Button } from "../components/button";
 import { OAUTH_POPUP_MESSAGE_TYPE, type OAuthStrategy } from "@executor/sdk";
 
 type SecretBackedValue =
@@ -231,3 +232,29 @@ export function useOAuthPopupFlow<
     cancel,
   };
 }
+
+export function OAuthSignInButton(props: {
+  readonly busy: boolean;
+  readonly error: string | null;
+  readonly isConnected: boolean;
+  readonly onSignIn: () => void;
+  readonly reconnectingLabel?: string;
+  readonly signingInLabel?: string;
+  readonly reconnectLabel?: string;
+  readonly signInLabel?: string;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      {props.error && <span className="text-xs text-destructive">{props.error}</span>}
+      <Button variant="outline" size="sm" onClick={props.onSignIn} disabled={props.busy}>
+        {props.busy
+          ? props.isConnected
+            ? (props.reconnectingLabel ?? "Reconnecting...")
+            : (props.signingInLabel ?? "Signing in...")
+          : props.isConnected
+            ? (props.reconnectLabel ?? "Reconnect")
+            : (props.signInLabel ?? "Sign in")}
+      </Button>
+    </div>
+  );
+}