Fixes sharebutton behavior and updates associated tests

Author: brunobergher

webview-ui/src/components/chat/ShareButton.tsx

@@ -30,6 +30,7 @@ interface ShareButtonProps {
 export const ShareButton = ({ item, disabled = false, showLabel = false }: ShareButtonProps) => {
 	const [shareDropdownOpen, setShareDropdownOpen] = useState(false)
 	const [shareSuccess, setShareSuccess] = useState<{ visibility: ShareVisibility; url: string } | null>(null)
+	const [wasConnectInitiatedFromShare, setWasConnectInitiatedFromShare] = useState(false)
 	const { t } = useTranslation()
 	const { cloudUserInfo } = useExtensionState()
 
@@ -45,10 +46,18 @@ export const ShareButton = ({ item, disabled = false, showLabel = false }: Share
 		onAuthSuccess: () => {
 			// Auto-open share dropdown after successful authentication
 			setShareDropdownOpen(true)
+			setWasConnectInitiatedFromShare(false)
 		},
-		autoOpenOnAuth: true,
 	})
 
+	// Auto-open popover when user becomes authenticated after clicking Connect from share button
+	useEffect(() => {
+		if (wasConnectInitiatedFromShare && cloudIsAuthenticated) {
+			setShareDropdownOpen(true)
+			setWasConnectInitiatedFromShare(false)
+		}
+	}, [wasConnectInitiatedFromShare, cloudIsAuthenticated])
+
 	// Listen for share success messages from the extension
 	useEffect(() => {
 		const handleMessage = (event: MessageEvent) => {
@@ -89,6 +98,7 @@ export const ShareButton = ({ item, disabled = false, showLabel = false }: Share
 	}
 
 	const handleConnectToCloud = () => {
+		setWasConnectInitiatedFromShare(true)
 		handleConnect()
 		setShareDropdownOpen(false)
 	}

webview-ui/src/components/chat/__tests__/ChatView.spec.tsx

@@ -82,16 +82,10 @@ vi.mock("../Announcement", () => ({
 	},
 }))
 
-// Mock RooCloudCTA component
-vi.mock("@src/components/welcome/RooCloudCTA", () => ({
-	default: function MockRooCloudCTA() {
-		return (
-			<div data-testid="roo-cloud-cta">
-				<div>rooCloudCTA.title</div>
-				<div>rooCloudCTA.description</div>
-				<div>rooCloudCTA.joinWaitlist</div>
-			</div>
-		)
+// Mock DismissibleUpsell component
+vi.mock("@/components/common/DismissibleUpsell", () => ({
+	default: function MockDismissibleUpsell({ children }: { children: React.ReactNode }) {
+		return <div data-testid="dismissible-upsell">{children}</div>
 	},
 }))
 
@@ -1274,10 +1268,10 @@ describe("ChatView - Version Indicator Tests", () => {
 	})
 })
 
-describe("ChatView - RooCloudCTA Display Tests", () => {
+describe("ChatView - DismissibleUpsell Display Tests", () => {
 	beforeEach(() => vi.clearAllMocks())
 
-	it("does not show RooCloudCTA when user is authenticated to Cloud", () => {
+	it("does not show DismissibleUpsell when user is authenticated to Cloud", () => {
 		const { queryByTestId } = renderChatView()
 
 		// Hydrate state with user authenticated to cloud
@@ -1292,11 +1286,11 @@ describe("ChatView - RooCloudCTA Display Tests", () => {
 			clineMessages: [], // No active task
 		})
 
-		// Should not show RooCloudCTA when authenticated
-		expect(queryByTestId("roo-cloud-cta")).not.toBeInTheDocument()
+		// Should not show DismissibleUpsell when authenticated
+		expect(queryByTestId("dismissible-upsell")).not.toBeInTheDocument()
 	})
 
-	it("does not show RooCloudCTA when user has only run 3 tasks in their history", () => {
+	it("does not show DismissibleUpsell when user has only run 3 tasks in their history", () => {
 		const { queryByTestId } = renderChatView()
 
 		// Hydrate state with user not authenticated but only 3 tasks
@@ -1310,11 +1304,11 @@ describe("ChatView - RooCloudCTA Display Tests", () => {
 			clineMessages: [], // No active task
 		})
 
-		// Should not show RooCloudCTA with less than 4 tasks
-		expect(queryByTestId("roo-cloud-cta")).not.toBeInTheDocument()
+		// Should not show DismissibleUpsell with less than 4 tasks
+		expect(queryByTestId("dismissible-upsell")).not.toBeInTheDocument()
 	})
 
-	it("shows RooCloudCTA when user is not authenticated and has run 4 or more tasks", async () => {
+	it("shows DismissibleUpsell when user is not authenticated and has run 4 or more tasks", async () => {
 		const { getByTestId } = renderChatView()
 
 		// Hydrate state with user not authenticated and 4 tasks
@@ -1329,13 +1323,13 @@ describe("ChatView - RooCloudCTA Display Tests", () => {
 			clineMessages: [], // No active task
 		})
 
-		// Wait for component to render and show RooCloudCTA
+		// Wait for component to render and show DismissibleUpsell
 		await waitFor(() => {
-			expect(getByTestId("roo-cloud-cta")).toBeInTheDocument()
+			expect(getByTestId("dismissible-upsell")).toBeInTheDocument()
 		})
 	})
 
-	it("shows RooCloudCTA when user is not authenticated and has run 5 tasks", async () => {
+	it("shows DismissibleUpsell when user is not authenticated and has run 5 tasks", async () => {
 		const { getByTestId } = renderChatView()
 
 		// Hydrate state with user not authenticated and 5 tasks
@@ -1351,13 +1345,13 @@ describe("ChatView - RooCloudCTA Display Tests", () => {
 			clineMessages: [], // No active task
 		})
 
-		// Wait for component to render and show RooCloudCTA
+		// Wait for component to render and show DismissibleUpsell
 		await waitFor(() => {
-			expect(getByTestId("roo-cloud-cta")).toBeInTheDocument()
+			expect(getByTestId("dismissible-upsell")).toBeInTheDocument()
 		})
 	})
 
-	it("does not show RooCloudCTA when there is an active task (regardless of auth status)", async () => {
+	it("does not show DismissibleUpsell when there is an active task (regardless of auth status)", async () => {
 		const { queryByTestId } = renderChatView()
 
 		// Hydrate state with active task
@@ -1381,16 +1375,16 @@ describe("ChatView - RooCloudCTA Display Tests", () => {
 
 		// Wait for component to render with active task
 		await waitFor(() => {
-			// Should not show RooCloudCTA during active task
-			expect(queryByTestId("roo-cloud-cta")).not.toBeInTheDocument()
+			// Should not show DismissibleUpsell during active task
+			expect(queryByTestId("dismissible-upsell")).not.toBeInTheDocument()
 			// Should not show RooTips either since the entire welcome screen is hidden during active tasks
 			expect(queryByTestId("roo-tips")).not.toBeInTheDocument()
 			// Should not show RooHero either since the entire welcome screen is hidden during active tasks
 			expect(queryByTestId("roo-hero")).not.toBeInTheDocument()
 		})
 	})
 
-	it("shows RooTips when user is authenticated (instead of RooCloudCTA)", () => {
+	it("shows RooTips when user is authenticated (instead of DismissibleUpsell)", () => {
 		const { queryByTestId, getByTestId } = renderChatView()
 
 		// Hydrate state with user authenticated to cloud
@@ -1405,12 +1399,12 @@ describe("ChatView - RooCloudCTA Display Tests", () => {
 			clineMessages: [], // No active task
 		})
 
-		// Should not show RooCloudCTA but should show RooTips
-		expect(queryByTestId("roo-cloud-cta")).not.toBeInTheDocument()
+		// Should not show DismissibleUpsell but should show RooTips
+		expect(queryByTestId("dismissible-upsell")).not.toBeInTheDocument()
 		expect(getByTestId("roo-tips")).toBeInTheDocument()
 	})
 
-	it("shows RooTips when user has fewer than 4 tasks (instead of RooCloudCTA)", () => {
+	it("shows RooTips when user has fewer than 4 tasks (instead of DismissibleUpsell)", () => {
 		const { queryByTestId, getByTestId } = renderChatView()
 
 		// Hydrate state with user not authenticated but fewer than 4 tasks
@@ -1424,8 +1418,8 @@ describe("ChatView - RooCloudCTA Display Tests", () => {
 			clineMessages: [], // No active task
 		})
 
-		// Should not show RooCloudCTA but should show RooTips
-		expect(queryByTestId("roo-cloud-cta")).not.toBeInTheDocument()
+		// Should not show DismissibleUpsell but should show RooTips
+		expect(queryByTestId("dismissible-upsell")).not.toBeInTheDocument()
 		expect(getByTestId("roo-tips")).toBeInTheDocument()
 	})
 })

webview-ui/src/components/chat/__tests__/TaskActions.spec.tsx

@@ -43,11 +43,11 @@ vi.mock("react-i18next", () => ({
 				"chat:task.connectToCloudDescription": "Sign in to Roo Code Cloud to share tasks",
 				"chat:task.sharingDisabledByOrganization": "Sharing disabled by organization",
 				"cloud:cloudBenefitsTitle": "Connect to Roo Code Cloud",
-				"cloud:cloudBenefitsSubtitle": "Sign in to Roo Code Cloud to share tasks",
 				"cloud:cloudBenefitHistory": "Access your task history from anywhere",
 				"cloud:cloudBenefitSharing": "Share tasks with your team",
 				"cloud:cloudBenefitMetrics": "Track usage and costs",
 				"cloud:connect": "Connect",
+				"history:copyPrompt": "Copy",
 			}
 			return translations[key] || key
 		},
@@ -197,7 +197,6 @@ describe("TaskActions", () => {
 			fireEvent.click(shareButton)
 
 			expect(screen.getByText("Connect to Roo Code Cloud")).toBeInTheDocument()
-			expect(screen.getByText("Sign in to Roo Code Cloud to share tasks")).toBeInTheDocument()
 			expect(screen.getByText("Connect")).toBeInTheDocument()
 		})
 
@@ -351,30 +350,13 @@ describe("TaskActions", () => {
 	})
 
 	describe("Button States", () => {
-		it("keeps share, export, and copy buttons enabled but disables delete button when buttonsDisabled is true", () => {
-			render(<TaskActions item={mockItem} buttonsDisabled={true} />)
-
-			// Find buttons by their labels/test IDs
-			const shareButton = screen.getByTestId("share-button")
-			const exportButton = screen.getByLabelText("Export task history")
-			const copyButton = screen.getByLabelText("history:copyPrompt")
-			const deleteButton = screen.getByLabelText("Delete Task (Shift + Click to skip confirmation)")
-
-			// Share, export, and copy buttons should be enabled regardless of buttonsDisabled
-			expect(shareButton).not.toBeDisabled()
-			expect(exportButton).not.toBeDisabled()
-			expect(copyButton).not.toBeDisabled()
-			// Delete button should respect buttonsDisabled
-			expect(deleteButton).toBeDisabled()
-		})
-
 		it("share, export, and copy buttons are always enabled while delete button respects buttonsDisabled state", () => {
 			// Test with buttonsDisabled = false
 			const { rerender } = render(<TaskActions item={mockItem} buttonsDisabled={false} />)
 
 			let shareButton = screen.getByTestId("share-button")
 			let exportButton = screen.getByLabelText("Export task history")
-			let copyButton = screen.getByLabelText("history:copyPrompt")
+			let copyButton = screen.getByLabelText("Copy")
 			let deleteButton = screen.getByLabelText("Delete Task (Shift + Click to skip confirmation)")
 
 			expect(shareButton).not.toBeDisabled()
@@ -387,7 +369,7 @@ describe("TaskActions", () => {
 
 			shareButton = screen.getByTestId("share-button")
 			exportButton = screen.getByLabelText("Export task history")
-			copyButton = screen.getByLabelText("history:copyPrompt")
+			copyButton = screen.getByLabelText("Copy")
 			deleteButton = screen.getByLabelText("Delete Task (Shift + Click to skip confirmation)")
 
 			// Share, export, and copy remain enabled