Skip to content

Commit b8a65a4

Browse files
sjfsjf
authored
Fix linter warnings in the webview (part 2) (RooCodeInc#3943)
* Fix linter warnings in the webview (part 2) Replace protobus calls using object literals to use Message.create({...}) Fix incorrect property name detected after this change in webview-ui/src/components/settings/SettingsView.tsx Optimised imports in vscode. * Fix typo * formatting
1 parent 6626124 commit b8a65a4

20 files changed

+417
-381
lines changed

‎webview-ui/src/components/history/HistoryPreview.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
21
import { useExtensionState } from "@/context/ExtensionStateContext"
3-
import { vscode } from "@/utils/vscode"
4-
import { memo, useState } from "react"
52
import { TaskServiceClient } from "@/services/grpc-client"
63
import { formatLargeNumber } from "@/utils/format"
4+
import { StringRequest } from "@shared/proto/common"
5+
import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
6+
import { memo, useState } from "react"
77

88
type HistoryPreviewProps = {
99
showHistoryView: () => void
@@ -14,7 +14,9 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
1414
const [isExpanded, setIsExpanded] = useState(true)
1515

1616
const handleHistorySelect = (id: string) => {
17-
TaskServiceClient.showTaskWithId({ value: id }).catch((error) => console.error("Error showing task:", error))
17+
TaskServiceClient.showTaskWithId(StringRequest.create({ value: id })).catch((error) =>
18+
console.error("Error showing task:", error),
19+
)
1820
}
1921

2022
const toggleExpanded = () => {

‎webview-ui/src/components/history/HistoryView.tsx‎

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import { VSCodeButton, VSCodeTextField, VSCodeRadioGroup, VSCodeRadio, VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
1+
import DangerButton from "@/components/common/DangerButton"
22
import { useExtensionState } from "@/context/ExtensionStateContext"
3-
import { vscode } from "@/utils/vscode"
4-
import { Virtuoso } from "react-virtuoso"
5-
import { memo, useMemo, useState, useEffect, useCallback } from "react"
6-
import Fuse, { FuseResult } from "fuse.js"
73
import { TaskServiceClient } from "@/services/grpc-client"
8-
import { formatLargeNumber } from "@/utils/format"
9-
import { formatSize } from "@/utils/format"
4+
import { formatLargeNumber, formatSize } from "@/utils/format"
5+
import { vscode } from "@/utils/vscode"
106
import { ExtensionMessage } from "@shared/ExtensionMessage"
7+
import { EmptyRequest, StringArrayRequest, StringRequest } from "@shared/proto/common"
8+
import { GetTaskHistoryRequest, TaskFavoriteRequest } from "@shared/proto/task"
9+
import { VSCodeButton, VSCodeCheckbox, VSCodeRadio, VSCodeRadioGroup, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
10+
import Fuse, { FuseResult } from "fuse.js"
11+
import { memo, useCallback, useEffect, useMemo, useState } from "react"
1112
import { useEvent } from "react-use"
12-
import DangerButton from "@/components/common/DangerButton"
13+
import { Virtuoso } from "react-virtuoso"
1314

1415
type HistoryViewProps = {
1516
onDone: () => void
@@ -66,12 +67,14 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
6667
// Load and refresh task history
6768
const loadTaskHistory = useCallback(async () => {
6869
try {
69-
const response = await TaskServiceClient.getTaskHistory({
70-
favoritesOnly: showFavoritesOnly,
71-
searchQuery: searchQuery || undefined,
72-
sortBy: sortOption,
73-
currentWorkspaceOnly: showCurrentWorkspaceOnly,
74-
})
70+
const response = await TaskServiceClient.getTaskHistory(
71+
GetTaskHistoryRequest.create({
72+
favoritesOnly: showFavoritesOnly,
73+
searchQuery: searchQuery || undefined,
74+
sortBy: sortOption,
75+
currentWorkspaceOnly: showCurrentWorkspaceOnly,
76+
}),
77+
)
7578
setFilteredTasks(response.tasks || [])
7679
} catch (error) {
7780
console.error("Error loading task history:", error)
@@ -94,10 +97,12 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
9497
setPendingFavoriteToggles((prev) => ({ ...prev, [taskId]: !currentValue }))
9598

9699
try {
97-
await TaskServiceClient.toggleTaskFavorite({
98-
taskId,
99-
isFavorited: !currentValue,
100-
})
100+
await TaskServiceClient.toggleTaskFavorite(
101+
TaskFavoriteRequest.create({
102+
taskId,
103+
isFavorited: !currentValue,
104+
}),
105+
)
101106

102107
// Refresh if either filter is active to ensure proper combined filtering
103108
if (showFavoritesOnly || showCurrentWorkspaceOnly) {
@@ -136,7 +141,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
136141

137142
const fetchTotalTasksSize = useCallback(async () => {
138143
try {
139-
const response = await TaskServiceClient.getTotalTasksSize({})
144+
const response = await TaskServiceClient.getTotalTasksSize(EmptyRequest.create({}))
140145
if (response && typeof response.value === "number") {
141146
setTotalTasksSize?.(response.value || 0)
142147
}
@@ -161,7 +166,9 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
161166
}, [searchQuery, sortOption, lastNonRelevantSort])
162167

163168
const handleShowTaskWithId = useCallback((id: string) => {
164-
TaskServiceClient.showTaskWithId({ value: id }).catch((error) => console.error("Error showing task:", error))
169+
TaskServiceClient.showTaskWithId(StringRequest.create({ value: id })).catch((error) =>
170+
console.error("Error showing task:", error),
171+
)
165172
}, [])
166173

167174
const handleHistorySelect = useCallback((itemId: string, checked: boolean) => {
@@ -176,7 +183,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
176183

177184
const handleDeleteHistoryItem = useCallback(
178185
(id: string) => {
179-
TaskServiceClient.deleteTasksWithIds({ value: [id] })
186+
TaskServiceClient.deleteTasksWithIds(StringArrayRequest.create({ value: [id] }))
180187
.then(() => fetchTotalTasksSize())
181188
.catch((error) => console.error("Error deleting task:", error))
182189
},
@@ -186,7 +193,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
186193
const handleDeleteSelectedHistoryItems = useCallback(
187194
(ids: string[]) => {
188195
if (ids.length > 0) {
189-
TaskServiceClient.deleteTasksWithIds({ value: ids })
196+
TaskServiceClient.deleteTasksWithIds(StringArrayRequest.create({ value: ids }))
190197
.then(() => fetchTotalTasksSize())
191198
.catch((error) => console.error("Error deleting tasks:", error))
192199
setSelectedItems([])
@@ -737,7 +744,9 @@ const ExportButton = ({ itemId }: { itemId: string }) => (
737744
appearance="icon"
738745
onClick={(e) => {
739746
e.stopPropagation()
740-
TaskServiceClient.exportTaskWithId({ value: itemId }).catch((err) => console.error("Failed to export task:", err))
747+
TaskServiceClient.exportTaskWithId(StringRequest.create({ value: itemId })).catch((err) =>
748+
console.error("Failed to export task:", err),
749+
)
741750
}}>
742751
<div style={{ fontSize: "11px", fontWeight: 500, opacity: 1 }}>EXPORT</div>
743752
</VSCodeButton>

‎webview-ui/src/components/mcp/chat-display/ImagePreview.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from "react"
2-
import { vscode } from "@/utils/vscode"
1+
import ChatErrorBoundary from "@/components/chat/ChatErrorBoundary"
32
import { WebServiceClient } from "@/services/grpc-client"
3+
import { StringRequest } from "@shared/proto/common"
44
import DOMPurify from "dompurify"
5-
import { getSafeHostname, formatUrlForOpening, checkIfImageUrl } from "./utils/mcpRichUtil"
6-
import ChatErrorBoundary from "@/components/chat/ChatErrorBoundary"
5+
import React from "react"
6+
import { checkIfImageUrl, formatUrlForOpening, getSafeHostname } from "./utils/mcpRichUtil"
77

88
interface ImagePreviewProps {
99
url: string
@@ -235,9 +235,11 @@ class ImagePreview extends React.Component<
235235
}}
236236
onClick={async () => {
237237
try {
238-
await WebServiceClient.openInBrowser({
239-
value: DOMPurify.sanitize(url),
240-
})
238+
await WebServiceClient.openInBrowser(
239+
StringRequest.create({
240+
value: DOMPurify.sanitize(url),
241+
}),
242+
)
241243
} catch (err) {
242244
console.error("Error opening URL in browser:", err)
243245
}
@@ -262,9 +264,11 @@ class ImagePreview extends React.Component<
262264
}}
263265
onClick={async () => {
264266
try {
265-
await WebServiceClient.openInBrowser({
266-
value: DOMPurify.sanitize(formatUrlForOpening(url)),
267-
})
267+
await WebServiceClient.openInBrowser(
268+
StringRequest.create({
269+
value: DOMPurify.sanitize(formatUrlForOpening(url)),
270+
}),
271+
)
268272
} catch (err) {
269273
console.error("Error opening URL in browser:", err)
270274
}

‎webview-ui/src/components/mcp/chat-display/LinkPreview.tsx‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from "react"
2-
import { vscode } from "@/utils/vscode"
3-
import DOMPurify from "dompurify"
4-
import { getSafeHostname, normalizeRelativeUrl } from "./utils/mcpRichUtil"
51
import ChatErrorBoundary from "@/components/chat/ChatErrorBoundary"
62
import { WebServiceClient } from "@/services/grpc-client"
3+
import { StringRequest } from "@shared/proto/common"
4+
import DOMPurify from "dompurify"
5+
import React from "react"
6+
import { getSafeHostname, normalizeRelativeUrl } from "./utils/mcpRichUtil"
77

88
interface OpenGraphData {
99
title?: string
@@ -110,9 +110,11 @@ class LinkPreview extends React.Component<LinkPreviewProps, LinkPreviewState> {
110110
this.setState({ fetchStartTime: startTime })
111111

112112
// Use the gRPC client to fetch Open Graph data
113-
const response = await WebServiceClient.fetchOpenGraphData({
114-
value: this.props.url,
115-
})
113+
const response = await WebServiceClient.fetchOpenGraphData(
114+
StringRequest.create({
115+
value: this.props.url,
116+
}),
117+
)
116118

117119
// Process the response
118120
if (response) {
@@ -240,9 +242,11 @@ class LinkPreview extends React.Component<LinkPreviewProps, LinkPreviewState> {
240242
}}
241243
onClick={async () => {
242244
try {
243-
await WebServiceClient.openInBrowser({
244-
value: DOMPurify.sanitize(url),
245-
})
245+
await WebServiceClient.openInBrowser(
246+
StringRequest.create({
247+
value: DOMPurify.sanitize(url),
248+
}),
249+
)
246250
} catch (err) {
247251
console.error("Error opening URL in browser:", err)
248252
}
@@ -280,9 +284,11 @@ class LinkPreview extends React.Component<LinkPreviewProps, LinkPreviewState> {
280284
}}
281285
onClick={async () => {
282286
try {
283-
await WebServiceClient.openInBrowser({
284-
value: DOMPurify.sanitize(url),
285-
})
287+
await WebServiceClient.openInBrowser(
288+
StringRequest.create({
289+
value: DOMPurify.sanitize(url),
290+
}),
291+
)
286292
} catch (err) {
287293
console.error("Error opening URL in browser:", err)
288294
}

‎webview-ui/src/components/mcp/chat-display/utils/mcpRichUtil.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { WebServiceClient } from "@/services/grpc-client"
2+
import { StringRequest } from "@shared/proto/common"
23

34
// Safely create a URL object with error handling and ensure HTTPS
45
export const safeCreateUrl = (url: string): URL | null => {
@@ -145,7 +146,7 @@ export const checkIfImageUrl = async (url: string): Promise<boolean> => {
145146
})
146147

147148
// Create the actual service call
148-
const servicePromise = WebServiceClient.checkIsImageUrl({ value: url })
149+
const servicePromise = WebServiceClient.checkIsImageUrl(StringRequest.create({ value: url }))
149150
.then((result) => result.isImage)
150151
.catch((error) => {
151152
console.error("Error checking if URL is an image via gRPC:", error)

‎webview-ui/src/components/mcp/configuration/McpConfigurationView.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1+
import { useExtensionState } from "@/context/ExtensionStateContext"
2+
import { McpServiceClient } from "@/services/grpc-client"
3+
import { vscode } from "@/utils/vscode"
4+
import { McpViewTab } from "@shared/mcp"
5+
import { EmptyRequest } from "@shared/proto/common"
16
import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
27
import { useEffect, useState } from "react"
38
import styled from "styled-components"
4-
import { useExtensionState } from "@/context/ExtensionStateContext"
5-
import { vscode } from "@/utils/vscode"
6-
import { McpServiceClient } from "@/services/grpc-client"
79
import AddRemoteServerForm from "./tabs/add-server/AddRemoteServerForm"
8-
import McpMarketplaceView from "./tabs/marketplace/McpMarketplaceView"
910
import InstalledServersView from "./tabs/installed/InstalledServersView"
10-
import { McpViewTab } from "@shared/mcp"
11+
import McpMarketplaceView from "./tabs/marketplace/McpMarketplaceView"
1112

1213
type McpViewProps = {
1314
onDone: () => void
@@ -34,7 +35,7 @@ const McpConfigurationView = ({ onDone, initialTab }: McpViewProps) => {
3435

3536
useEffect(() => {
3637
if (mcpMarketplaceEnabled) {
37-
McpServiceClient.refreshMcpMarketplace({})
38+
McpServiceClient.refreshMcpMarketplace(EmptyRequest.create({}))
3839
.then((response) => {
3940
// Types are structurally identical, use response directly
4041
setMcpMarketplaceCatalog(response)

‎webview-ui/src/components/mcp/configuration/tabs/add-server/AddLocalServerForm.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
2-
import styled from "styled-components"
31
import { LINKS } from "@/constants"
42
import { McpServiceClient } from "@/services/grpc-client"
3+
import { EmptyRequest } from "@shared/proto/common"
4+
import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
5+
import styled from "styled-components"
56

67
type AddLocalServerFormProps = {
78
onServerAdded: () => void
@@ -22,7 +23,7 @@ const AddLocalServerForm = ({ onServerAdded }: AddLocalServerFormProps) => {
2223
appearance="primary"
2324
style={{ width: "100%", marginBottom: "5px", marginTop: 8 }}
2425
onClick={() => {
25-
McpServiceClient.openMcpSettings({}).catch((error) => {
26+
McpServiceClient.openMcpSettings(EmptyRequest.create({})).catch((error) => {
2627
console.error("Error opening MCP settings:", error)
2728
})
2829
}}>

‎webview-ui/src/components/mcp/configuration/tabs/add-server/AddRemoteServerForm.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import { useRef, useState } from "react"
2-
import { VSCodeButton, VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
31
import { LINKS } from "@/constants"
2+
import { useExtensionState } from "@/context/ExtensionStateContext"
43
import { McpServiceClient } from "@/services/grpc-client"
54
import { convertProtoMcpServersToMcpServers } from "@shared/proto-conversions/mcp/mcp-server-conversion"
6-
import { useExtensionState } from "@/context/ExtensionStateContext"
5+
import { EmptyRequest } from "@shared/proto/common"
6+
import { AddRemoteMcpServerRequest } from "@shared/proto/mcp"
7+
import { VSCodeButton, VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
8+
import { useState } from "react"
79

810
const AddRemoteServerForm = ({ onServerAdded }: { onServerAdded: () => void }) => {
911
const [serverName, setServerName] = useState("")
@@ -38,10 +40,12 @@ const AddRemoteServerForm = ({ onServerAdded }: { onServerAdded: () => void }) =
3840
setShowConnectingMessage(true)
3941

4042
try {
41-
const servers = await McpServiceClient.addRemoteMcpServer({
42-
serverName: serverName.trim(),
43-
serverUrl: serverUrl.trim(),
44-
})
43+
const servers = await McpServiceClient.addRemoteMcpServer(
44+
AddRemoteMcpServerRequest.create({
45+
serverName: serverName.trim(),
46+
serverUrl: serverUrl.trim(),
47+
}),
48+
)
4549

4650
setIsSubmitting(false)
4751

@@ -115,7 +119,7 @@ const AddRemoteServerForm = ({ onServerAdded }: { onServerAdded: () => void }) =
115119
appearance="secondary"
116120
style={{ width: "100%", marginBottom: "5px", marginTop: 15 }}
117121
onClick={() => {
118-
McpServiceClient.openMcpSettings({}).catch((error) => {
122+
McpServiceClient.openMcpSettings(EmptyRequest.create({})).catch((error) => {
119123
console.error("Error opening MCP settings:", error)
120124
})
121125
}}>

‎webview-ui/src/components/mcp/configuration/tabs/installed/InstalledServersView.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
21
import { useExtensionState } from "@/context/ExtensionStateContext"
2+
import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
33

4-
import { UiServiceClient, McpServiceClient } from "@/services/grpc-client"
4+
import { McpServiceClient, UiServiceClient } from "@/services/grpc-client"
55

6+
import { EmptyRequest, StringRequest } from "@shared/proto/common"
67
import ServersToggleList from "./ServersToggleList"
78
const InstalledServersView = () => {
89
const { mcpServers: servers, navigateToSettings } = useExtensionState()
@@ -39,7 +40,7 @@ const InstalledServersView = () => {
3940
appearance="secondary"
4041
style={{ width: "100%", marginBottom: "5px" }}
4142
onClick={() => {
42-
McpServiceClient.openMcpSettings({}).catch((error) => {
43+
McpServiceClient.openMcpSettings(EmptyRequest.create({})).catch((error) => {
4344
console.error("Error opening MCP settings:", error)
4445
})
4546
}}>
@@ -56,7 +57,7 @@ const InstalledServersView = () => {
5657
// After a short delay, send a message to scroll to browser settings
5758
setTimeout(async () => {
5859
try {
59-
await UiServiceClient.scrollToSettings({ value: "features" })
60+
await UiServiceClient.scrollToSettings(StringRequest.create({ value: "features" }))
6061
} catch (error) {
6162
console.error("Error scrolling to mcp settings:", error)
6263
}

0 commit comments

Comments
 (0)