Skip to content

Commit 0e2ba54

Browse files
mrubensmrubens
committed
Remove TabContent wrapper from Modes and MCP
1 parent 49aad85 commit 0e2ba54

File tree

2 files changed

+900
-921
lines changed

2 files changed

+900
-921
lines changed

‎webview-ui/src/components/mcp/McpView.tsx‎

Lines changed: 123 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,6 @@ import { buildDocLink } from "@src/utils/docLinks"
2929
import { Section } from "@src/components/settings/Section"
3030
import { SectionHeader } from "@src/components/settings/SectionHeader"
3131

32-
import { TabContent } from "../common/Tab"
33-
3432
import McpToolRow from "./McpToolRow"
3533
import McpResourceRow from "./McpResourceRow"
3634
import McpEnabledToggle from "./McpEnabledToggle"
@@ -57,145 +55,141 @@ const McpView = () => {
5755
</SectionHeader>
5856

5957
<Section>
60-
<TabContent>
61-
<div
62-
style={{
63-
color: "var(--vscode-foreground)",
64-
fontSize: "13px",
65-
marginBottom: "10px",
66-
marginTop: "5px",
67-
}}>
68-
<Trans i18nKey="mcp:description">
69-
<VSCodeLink
70-
href={buildDocLink("features/mcp/using-mcp-in-roo", "mcp_settings")}
71-
style={{ display: "inline" }}>
72-
Learn More
73-
</VSCodeLink>
74-
</Trans>
75-
</div>
58+
<div
59+
style={{
60+
color: "var(--vscode-foreground)",
61+
fontSize: "13px",
62+
marginBottom: "10px",
63+
marginTop: "5px",
64+
}}>
65+
<Trans i18nKey="mcp:description">
66+
<VSCodeLink
67+
href={buildDocLink("features/mcp/using-mcp-in-roo", "mcp_settings")}
68+
style={{ display: "inline" }}>
69+
Learn More
70+
</VSCodeLink>
71+
</Trans>
72+
</div>
7673

77-
<McpEnabledToggle />
74+
<McpEnabledToggle />
7875

79-
{mcpEnabled && (
80-
<>
81-
<div style={{ marginBottom: 15 }}>
82-
<VSCodeCheckbox
83-
checked={enableMcpServerCreation}
84-
onChange={(e: any) => {
85-
setEnableMcpServerCreation(e.target.checked)
86-
vscode.postMessage({ type: "enableMcpServerCreation", bool: e.target.checked })
87-
}}>
88-
<span style={{ fontWeight: "500" }}>{t("mcp:enableServerCreation.title")}</span>
89-
</VSCodeCheckbox>
90-
<div
91-
style={{
92-
fontSize: "12px",
93-
marginTop: "5px",
94-
color: "var(--vscode-descriptionForeground)",
95-
}}>
96-
<Trans i18nKey="mcp:enableServerCreation.description">
97-
<VSCodeLink
98-
href={buildDocLink(
99-
"features/mcp/using-mcp-in-roo#how-to-use-roo-to-create-an-mcp-server",
100-
"mcp_server_creation",
101-
)}
102-
style={{ display: "inline" }}>
103-
Learn about server creation
104-
</VSCodeLink>
105-
<strong>new</strong>
106-
</Trans>
107-
<p style={{ marginTop: "8px" }}>{t("mcp:enableServerCreation.hint")}</p>
108-
</div>
76+
{mcpEnabled && (
77+
<>
78+
<div style={{ marginBottom: 15 }}>
79+
<VSCodeCheckbox
80+
checked={enableMcpServerCreation}
81+
onChange={(e: any) => {
82+
setEnableMcpServerCreation(e.target.checked)
83+
vscode.postMessage({ type: "enableMcpServerCreation", bool: e.target.checked })
84+
}}>
85+
<span style={{ fontWeight: "500" }}>{t("mcp:enableServerCreation.title")}</span>
86+
</VSCodeCheckbox>
87+
<div
88+
style={{
89+
fontSize: "12px",
90+
marginTop: "5px",
91+
color: "var(--vscode-descriptionForeground)",
92+
}}>
93+
<Trans i18nKey="mcp:enableServerCreation.description">
94+
<VSCodeLink
95+
href={buildDocLink(
96+
"features/mcp/using-mcp-in-roo#how-to-use-roo-to-create-an-mcp-server",
97+
"mcp_server_creation",
98+
)}
99+
style={{ display: "inline" }}>
100+
Learn about server creation
101+
</VSCodeLink>
102+
<strong>new</strong>
103+
</Trans>
104+
<p style={{ marginTop: "8px" }}>{t("mcp:enableServerCreation.hint")}</p>
109105
</div>
106+
</div>
110107

111-
{/* Server List */}
112-
{servers.length > 0 && (
113-
<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
114-
{servers.map((server) => (
115-
<ServerRow
116-
key={`${server.name}-${server.source || "global"}`}
117-
server={server}
118-
alwaysAllowMcp={alwaysAllowMcp}
119-
/>
120-
))}
121-
</div>
122-
)}
108+
{/* Server List */}
109+
{servers.length > 0 && (
110+
<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
111+
{servers.map((server) => (
112+
<ServerRow
113+
key={`${server.name}-${server.source || "global"}`}
114+
server={server}
115+
alwaysAllowMcp={alwaysAllowMcp}
116+
/>
117+
))}
118+
</div>
119+
)}
123120

124-
{/* Edit Settings Buttons */}
125-
<div
126-
style={{
127-
marginTop: "10px",
128-
width: "100%",
129-
display: "grid",
130-
gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
131-
gap: "10px",
121+
{/* Edit Settings Buttons */}
122+
<div
123+
style={{
124+
marginTop: "10px",
125+
width: "100%",
126+
display: "grid",
127+
gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
128+
gap: "10px",
129+
}}>
130+
<Button
131+
variant="secondary"
132+
style={{ width: "100%" }}
133+
onClick={() => {
134+
vscode.postMessage({ type: "openMcpSettings" })
132135
}}>
136+
<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span>
137+
{t("mcp:editGlobalMCP")}
138+
</Button>
139+
<Button
140+
variant="secondary"
141+
style={{ width: "100%" }}
142+
onClick={() => {
143+
vscode.postMessage({ type: "openProjectMcpSettings" })
144+
}}>
145+
<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span>
146+
{t("mcp:editProjectMCP")}
147+
</Button>
148+
<Button
149+
variant="secondary"
150+
style={{ width: "100%" }}
151+
onClick={() => {
152+
vscode.postMessage({ type: "refreshAllMcpServers" })
153+
}}>
154+
<span className="codicon codicon-refresh" style={{ marginRight: "6px" }}></span>
155+
{t("mcp:refreshMCP")}
156+
</Button>
157+
<StandardTooltip content={t("mcp:marketplace")}>
133158
<Button
134159
variant="secondary"
135160
style={{ width: "100%" }}
136161
onClick={() => {
137-
vscode.postMessage({ type: "openMcpSettings" })
138-
}}>
139-
<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span>
140-
{t("mcp:editGlobalMCP")}
141-
</Button>
142-
<Button
143-
variant="secondary"
144-
style={{ width: "100%" }}
145-
onClick={() => {
146-
vscode.postMessage({ type: "openProjectMcpSettings" })
147-
}}>
148-
<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span>
149-
{t("mcp:editProjectMCP")}
150-
</Button>
151-
<Button
152-
variant="secondary"
153-
style={{ width: "100%" }}
154-
onClick={() => {
155-
vscode.postMessage({ type: "refreshAllMcpServers" })
162+
window.postMessage(
163+
{
164+
type: "action",
165+
action: "marketplaceButtonClicked",
166+
values: { marketplaceTab: "mcp" },
167+
},
168+
"*",
169+
)
156170
}}>
157-
<span className="codicon codicon-refresh" style={{ marginRight: "6px" }}></span>
158-
{t("mcp:refreshMCP")}
171+
<span className="codicon codicon-extensions" style={{ marginRight: "6px" }}></span>
172+
{t("mcp:marketplace")}
159173
</Button>
160-
<StandardTooltip content={t("mcp:marketplace")}>
161-
<Button
162-
variant="secondary"
163-
style={{ width: "100%" }}
164-
onClick={() => {
165-
window.postMessage(
166-
{
167-
type: "action",
168-
action: "marketplaceButtonClicked",
169-
values: { marketplaceTab: "mcp" },
170-
},
171-
"*",
172-
)
173-
}}>
174-
<span
175-
className="codicon codicon-extensions"
176-
style={{ marginRight: "6px" }}></span>
177-
{t("mcp:marketplace")}
178-
</Button>
179-
</StandardTooltip>
180-
</div>
181-
<div
182-
style={{
183-
marginTop: "15px",
184-
fontSize: "12px",
185-
color: "var(--vscode-descriptionForeground)",
186-
}}>
187-
<VSCodeLink
188-
href={buildDocLink(
189-
"features/mcp/using-mcp-in-roo#editing-mcp-settings-files",
190-
"mcp_edit_settings",
191-
)}
192-
style={{ display: "inline" }}>
193-
{t("mcp:learnMoreEditingSettings")}
194-
</VSCodeLink>
195-
</div>
196-
</>
197-
)}
198-
</TabContent>
174+
</StandardTooltip>
175+
</div>
176+
<div
177+
style={{
178+
marginTop: "15px",
179+
fontSize: "12px",
180+
color: "var(--vscode-descriptionForeground)",
181+
}}>
182+
<VSCodeLink
183+
href={buildDocLink(
184+
"features/mcp/using-mcp-in-roo#editing-mcp-settings-files",
185+
"mcp_edit_settings",
186+
)}
187+
style={{ display: "inline" }}>
188+
{t("mcp:learnMoreEditingSettings")}
189+
</VSCodeLink>
190+
</div>
191+
</>
192+
)}
199193
</Section>
200194
</div>
201195
)

0 commit comments

Comments
 (0)