refactor(web): share connectors explainer copy across login and upsell menus (#1280)

Author: msukkari

packages/web/src/ee/features/chat/mcp/components/connectorsMenu.tsx

@@ -20,7 +20,7 @@ import { ErrorCode } from "@/lib/errorCodes";
 import type { ServiceError } from "@/lib/serviceError";
 import { isServiceError } from "@/lib/utils";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { AlertTriangleIcon, CableIcon, Loader2Icon, LogInIcon, PlusCircleIcon, PlusIcon, RefreshCwIcon, SettingsIcon } from "lucide-react";
+import { AlertTriangleIcon, CableIcon, Loader2Icon, PlusCircleIcon, PlusIcon, RefreshCwIcon, SettingsIcon } from "lucide-react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
@@ -36,6 +36,7 @@ import {
 import { clearEditorHistory, resetEditor } from "@/features/chat/utils";
 import { useRole } from "@/features/auth/useRole";
 import { OrgRole } from "@sourcebot/db";
+import { ConnectorsExplainerText } from "@/features/chat/components/chatBox/connectorsExplainerText";
 
 interface ConnectorsMenuProps {
     selectedSearchScopes: SearchScope[];
@@ -314,12 +315,15 @@ export const ConnectorsMenu = ({
                             </>
                         )}
                         {shouldShowLoginConnectorItem ? (
-                            <DropdownMenuItem asChild className="gap-2 text-link focus:text-link">
-                                <Link href={loginHref}>
-                                    <LogInIcon className="w-4 h-4" />
-                                    Log in to use connectors
-                                </Link>
-                            </DropdownMenuItem>
+                            <ConnectorsExplainerText
+                                leading={
+                                    <>
+                                        You must{" "}
+                                        <Link href={loginHref} className="text-link hover:underline">login</Link>
+                                        {" "}to configure connectors.{" "}
+                                    </>
+                                }
+                            />
                         ) : (
                             <>
                                 <DropdownMenuItem

packages/web/src/features/chat/components/chatBox/connectorsExplainerMenu.tsx

@@ -10,9 +10,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { CableIcon, PlusIcon } from "lucide-react";
 import { UpsellDialog } from "@/features/billing/upsellDialog";
-
-// TODO(ask): finalize the connectors docs URL once the page exists.
-const CONNECTORS_DOCS_URL = "https://docs.sourcebot.dev/docs/features/ask/connectors";
+import { ConnectorsExplainerText } from "@/features/chat/components/chatBox/connectorsExplainerText";
 
 /**
  * Free-plan stand-in for the connectors menu. This is intentionally NOT in ee/:
@@ -50,16 +48,20 @@ export const ConnectorsExplainerMenu = () => {
                         <CableIcon className="w-4 h-4 text-muted-foreground" />
                         Connectors
                     </DropdownMenuLabel>
-                    <p className="px-2 pb-1.5 text-xs text-muted-foreground">
-                        Connect external tools like Linear or Jira so the agent can pull in context beyond your code. Connectors are available on a{" "}
-                        <button
-                            type="button"
-                            onClick={openUpsell}
-                            className="text-link hover:underline"
-                        >
-                            paid plan
-                        </button>. <a href={CONNECTORS_DOCS_URL} target="_blank" rel="noopener noreferrer" className="text-link hover:underline">Learn more</a>
-                    </p>
+                    <ConnectorsExplainerText
+                        trailing={
+                            <>
+                                Connectors are available on a{" "}
+                                <button
+                                    type="button"
+                                    onClick={openUpsell}
+                                    className="text-link hover:underline"
+                                >
+                                    paid plan
+                                </button>.
+                            </>
+                        }
+                    />
                 </DropdownMenuContent>
             </DropdownMenu>
             <UpsellDialog open={isUpsellOpen} onOpenChange={setIsUpsellOpen} source="chat_connectors" />

packages/web/src/features/chat/components/chatBox/connectorsExplainerText.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+export const CONNECTORS_DOCS_URL = "https://docs.sourcebot.dev/docs/features/ask/connectors";
+
+interface ConnectorsExplainerTextProps {
+    /** Rendered inline before the shared description sentence. */
+    leading?: ReactNode;
+    /** Rendered inline after the shared description sentence, before "Learn more". */
+    trailing?: ReactNode;
+    className?: string;
+}
+
+/**
+ * Shared connectors explainer copy. Intentionally NOT in ee/ so the free-plan
+ * teaser and the licensed connectors menu can both render the same description
+ * without the free path importing ee/ feature code.
+ */
+export const ConnectorsExplainerText = ({ leading, trailing, className }: ConnectorsExplainerTextProps) => {
+    return (
+        <p className={cn("px-2 pb-1.5 text-xs text-muted-foreground", className)}>
+            {leading}
+            Connect external tools like Linear or Jira so the agent can pull in context beyond your code.{" "}
+            {trailing ? <>{trailing}{" "}</> : null}
+            <a href={CONNECTORS_DOCS_URL} target="_blank" rel="noopener noreferrer" className="text-link hover:underline">Learn more</a>
+        </p>
+    );
+};