Skip to content

Commit 18117f0

Browse files
roomote-v0[bot]roomotebrunobergherellipsis-dev[bot]
authored
ux: Updates to CloudView (#9776)
* refactor: remove TabHeader and onDone callback from CloudView - Removed TabHeader component from CloudView as it is no longer needed - Removed onDone prop from CloudView component definition and usage - Updated all test files to reflect the removal of onDone prop - Kept Button import that was accidentally removed initially * Updates upsell copy to reflect today's product * Update webview-ui/src/components/cloud/CloudView.tsx Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> * Update webview-ui/src/i18n/locales/ko/cloud.json Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> * Update webview-ui/src/i18n/locales/zh-CN/cloud.json Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> * Test fixes --------- Co-authored-by: Roo Code <roomote@roocode.com> Co-authored-by: Bruno Bergher <bruno@roocode.com> Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
1 parent 873a763 commit 18117f0

25 files changed

Lines changed: 210 additions & 238 deletions

‎webview-ui/src/App.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,6 @@ const App = () => {
263263
isAuthenticated={cloudIsAuthenticated}
264264
cloudApiUrl={cloudApiUrl}
265265
organizations={cloudOrganizations}
266-
onDone={() => switchTab("chat")}
267266
/>
268267
)}
269268
<ChatView

‎webview-ui/src/__tests__/App.spec.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,8 @@ vi.mock("@src/components/marketplace/MarketplaceView", () => ({
8383
}))
8484

8585
vi.mock("@src/components/cloud/CloudView", () => ({
86-
CloudView: function CloudView({ onDone }: { onDone: () => void }) {
87-
return (
88-
<div data-testid="cloud-view" onClick={onDone}>
89-
Cloud View
90-
</div>
91-
)
86+
CloudView: function CloudView() {
87+
return <div data-testid="cloud-view">Cloud View</div>
9288
},
9389
}))
9490

‎webview-ui/src/components/cloud/CloudUpsellDialog.tsx‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useTranslation } from "react-i18next"
22
import { Dialog, DialogContent, DialogHeader, Button } from "@/components/ui"
33
import RooHero from "../welcome/RooHero"
4-
import { CircleDollarSign, FileStack, Router, Share } from "lucide-react"
4+
import { ArrowRight, Brain, Cable, CircleDollarSign, FileStack, Router, Users2 } from "lucide-react"
55
import { DialogTitle } from "@radix-ui/react-dialog"
66

77
interface CloudUpsellDialogProps {
@@ -19,21 +19,29 @@ export const renderCloudBenefitsContent = (t: any) => {
1919
</div>
2020
<h1 className="text-xl font-bold text-vscode-foreground">{t("cloud:cloudBenefitsTitle")}</h1>
2121
<div className="text-lg">
22-
<ul className="text-vscode-descriptionForeground space-y-4 my-8">
22+
<ul className="text-vscode-descriptionForeground space-y-2 my-8">
2323
<li className="flex items-start gap-2">
24-
<Router className="size-4 mt-0.5 shrink-0" />
25-
{t("cloud:cloudBenefitWalkaway")}
24+
<Brain className="size-4 mt-1 shrink-0" />
25+
{t("cloud:cloudBenefitProvider")}
26+
</li>
27+
<li className="flex items-start gap-2">
28+
<Users2 className="size-4 mt-1 shrink-0" />
29+
{t("cloud:cloudBenefitCloudAgents")}
2630
</li>
2731
<li className="flex items-start gap-2">
28-
<Share className="size-4 mt-0.5 shrink-0" />
29-
{t("cloud:cloudBenefitSharing")}
32+
<Cable className="size-4 mt-1 shrink-0" />
33+
{t("cloud:cloudBenefitTriggers")}
34+
</li>
35+
<li className="flex items-start gap-2">
36+
<Router className="size-4 mt-1 shrink-0" />
37+
{t("cloud:cloudBenefitWalkaway")}
3038
</li>
3139
<li className="flex items-start gap-2">
32-
<CircleDollarSign className="size-4 mt-0.5 shrink-0" />
40+
<CircleDollarSign className="size-4 mt-1 shrink-0" />
3341
{t("cloud:cloudBenefitMetrics")}
3442
</li>
3543
<li className="flex items-start gap-2">
36-
<FileStack className="size-4 mt-0.5 shrink-0" />
44+
<FileStack className="size-4 mt-1 shrink-0" />
3745
{t("cloud:cloudBenefitHistory")}
3846
</li>
3947
</ul>
@@ -56,8 +64,9 @@ export const CloudUpsellDialog = ({ open, onOpenChange, onConnect }: CloudUpsell
5664
{renderCloudBenefitsContent(t)}
5765

5866
<div className="flex flex-col gap-4">
59-
<Button onClick={onConnect} className="w-full">
67+
<Button variant="primary" onClick={onConnect} className="w-full">
6068
{t("cloud:connect")}
69+
<ArrowRight />
6170
</Button>
6271
</div>
6372
</div>

‎webview-ui/src/components/cloud/CloudView.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ import { vscode } from "@src/utils/vscode"
99
import { telemetryClient } from "@src/utils/TelemetryClient"
1010
import { ToggleSwitch } from "@/components/ui/toggle-switch"
1111
import { renderCloudBenefitsContent } from "./CloudUpsellDialog"
12-
import { CircleAlert, Info, Lock, TriangleAlert } from "lucide-react"
12+
import { ArrowRight, CircleAlert, Info, Lock, TriangleAlert } from "lucide-react"
1313
import { cn } from "@/lib/utils"
14-
import { Tab, TabContent, TabHeader } from "../common/Tab"
14+
import { Tab, TabContent } from "../common/Tab"
1515
import { Button } from "@/components/ui/button"
1616
import { OrganizationSwitcher } from "./OrganizationSwitcher"
1717
import { StandardTooltip } from "../ui"
@@ -23,11 +23,10 @@ type CloudViewProps = {
2323
userInfo: CloudUserInfo | null
2424
isAuthenticated: boolean
2525
cloudApiUrl?: string
26-
onDone: () => void
2726
organizations?: CloudOrganizationMembership[]
2827
}
2928

30-
export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone, organizations = [] }: CloudViewProps) => {
29+
export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, organizations = [] }: CloudViewProps) => {
3130
const { t } = useAppTranslation()
3231
const {
3332
remoteControlEnabled,
@@ -159,11 +158,6 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone, orga
159158

160159
return (
161160
<Tab>
162-
<TabHeader className="flex justify-between items-center">
163-
<h3 className="text-vscode-foreground m-0">{isAuthenticated && t("cloud:title")}</h3>
164-
<Button onClick={onDone}>{t("settings:common.done")}</Button>
165-
</TabHeader>
166-
167161
<TabContent className="pt-10">
168162
{isAuthenticated ? (
169163
<>
@@ -271,12 +265,13 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone, orga
271265
</>
272266
) : (
273267
<>
274-
<div className="flex flex-col items-start gap-4 px-8 max-w-100">
268+
<div className="flex flex-col items-start gap-4 px-4 max-w-lg">
275269
<div className={cn(authInProgress && "opacity-50")}>{renderCloudBenefitsContent(t)}</div>
276270

277271
{!authInProgress && (
278-
<Button variant="primary" onClick={handleConnectClick} className="w-full">
272+
<Button variant="primary" onClick={handleConnectClick}>
279273
{t("cloud:connect")}
274+
<ArrowRight />
280275
</Button>
281276
)}
282277

‎webview-ui/src/components/cloud/__tests__/CloudUpsellDialog.spec.tsx‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@ vi.mock("react-i18next", () => ({
77
useTranslation: () => ({
88
t: (key: string) => {
99
const translations: Record<string, string> = {
10-
"cloud:cloudBenefitsTitle": "Connect to Roo Cloud",
11-
"cloud:cloudBenefitSharing": "Share tasks with your team",
12-
"cloud:cloudBenefitHistory": "Access conversation history",
13-
"cloud:cloudBenefitMetrics": "View usage metrics",
14-
"cloud:cloudBenefitWalkaway": "Walk away with your code",
15-
"cloud:connect": "Connect to Cloud",
10+
"cloud:cloudBenefitsTitle": "Try Roo Code Cloud",
11+
"cloud:cloudBenefitProvider": "Access free and paid models that work great with Roo",
12+
"cloud:cloudBenefitCloudAgents": "Give tasks to autonomous Cloud agents",
13+
"cloud:cloudBenefitTriggers": "Get code reviews on Github, start tasks from Slack and more",
14+
"cloud:cloudBenefitWalkaway": "Follow and control tasks from anywhere (including your phone)",
15+
"cloud:cloudBenefitHistory": "Access your task history from anywhere and share them with others",
16+
"cloud:cloudBenefitMetrics": "Get a holistic view of your token consumption",
17+
"cloud:connect": "Get started",
1618
}
1719
return translations[key] || key
1820
},
@@ -30,32 +32,37 @@ describe("CloudUpsellDialog", () => {
3032
it("renders dialog when open", () => {
3133
render(<CloudUpsellDialog open={true} onOpenChange={mockOnOpenChange} onConnect={mockOnConnect} />)
3234

33-
expect(screen.getByText("Connect to Roo Cloud")).toBeInTheDocument()
34-
expect(screen.getByText("Share tasks with your team")).toBeInTheDocument()
35-
expect(screen.getByText("Access conversation history")).toBeInTheDocument()
36-
expect(screen.getByText("View usage metrics")).toBeInTheDocument()
37-
expect(screen.getByRole("button", { name: "Connect to Cloud" })).toBeInTheDocument()
35+
expect(screen.getByText("Try Roo Code Cloud")).toBeInTheDocument()
36+
expect(screen.getByText("Access free and paid models that work great with Roo")).toBeInTheDocument()
37+
expect(screen.getByText("Give tasks to autonomous Cloud agents")).toBeInTheDocument()
38+
expect(screen.getByText("Get code reviews on Github, start tasks from Slack and more")).toBeInTheDocument()
39+
expect(screen.getByText("Follow and control tasks from anywhere (including your phone)")).toBeInTheDocument()
40+
expect(
41+
screen.getByText("Access your task history from anywhere and share them with others"),
42+
).toBeInTheDocument()
43+
expect(screen.getByText("Get a holistic view of your token consumption")).toBeInTheDocument()
44+
expect(screen.getByRole("button", { name: "Get started" })).toBeInTheDocument()
3845
})
3946

4047
it("does not render dialog when closed", () => {
4148
render(<CloudUpsellDialog open={false} onOpenChange={mockOnOpenChange} onConnect={mockOnConnect} />)
4249

43-
expect(screen.queryByText("Connect to Roo Cloud")).not.toBeInTheDocument()
50+
expect(screen.queryByText("Try Roo Code Cloud")).not.toBeInTheDocument()
4451
})
4552

4653
it("calls onConnect when connect button is clicked", () => {
4754
render(<CloudUpsellDialog open={true} onOpenChange={mockOnOpenChange} onConnect={mockOnConnect} />)
4855

49-
const connectButton = screen.getByRole("button", { name: "Connect to Cloud" })
56+
const connectButton = screen.getByRole("button", { name: "Get started" })
5057
fireEvent.click(connectButton)
5158

5259
expect(mockOnConnect).toHaveBeenCalledTimes(1)
5360
})
5461

55-
it("renders all three benefits as list items", () => {
62+
it("renders all benefits as list items", () => {
5663
render(<CloudUpsellDialog open={true} onOpenChange={mockOnOpenChange} onConnect={mockOnConnect} />)
5764

5865
const listItems = screen.getAllByRole("listitem")
59-
expect(listItems).toHaveLength(4)
66+
expect(listItems).toHaveLength(6)
6067
})
6168
})

0 commit comments

Comments
 (0)