Merge pull request #137 from RooVetGit/jq/fix-lint

fix npm run lint

.changeset/shaggy-moons-dance.md

@@ -0,0 +1,5 @@
+---
+"roo-cline": patch
+---
+
+Fix lint errors and change npm run lint to also run on webview-ui

package.json

@@ -153,7 +153,7 @@
     "compile": "npm run check-types && npm run lint && node esbuild.js",
     "compile-tests": "tsc -p . --outDir out",
     "install:all": "npm install && cd webview-ui && npm install",
-    "lint": "eslint src --ext ts",
+    "lint": "eslint src --ext ts && npm run lint --prefix webview-ui",
     "package": "npm run build:webview && npm run check-types && npm run lint && node esbuild.js --production",
     "pretest": "npm run compile-tests && npm run compile && npm run lint",
     "start:webview": "cd webview-ui && npm run start",

webview-ui/package-lock.json

@@ -34,7 +34,8 @@
 			},
 			"devDependencies": {
 				"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-				"@types/vscode-webview": "^1.57.5"
+				"@types/vscode-webview": "^1.57.5",
+				"eslint": "^8.57.0"
 			}
 		},
 		"node_modules/@adobe/css-tools": {

webview-ui/package.json

@@ -31,7 +31,8 @@
 		"start": "react-scripts start",
 		"build": "node ./scripts/build-react-no-split.js",
 		"test": "react-scripts test --watchAll=false",
-		"eject": "react-scripts eject"
+		"eject": "react-scripts eject",
+		"lint": "eslint src --ext ts,tsx"
 	},
 	"eslintConfig": {
 		"extends": [
@@ -53,7 +54,8 @@
 	},
 	"devDependencies": {
 		"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-		"@types/vscode-webview": "^1.57.5"
+		"@types/vscode-webview": "^1.57.5",
+		"eslint": "^8.57.0"
 	},
 	"jest": {
 		"transformIgnorePatterns": [

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

@@ -479,7 +479,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 		})
 	}, [modifiedMessages])
 
-	const isReadOnlyToolAction = (message: ClineMessage | undefined) => {
+	const isReadOnlyToolAction = useCallback((message: ClineMessage | undefined) => {
 		if (message?.type === "ask") {
 			if (!message.text) {
 				return true
@@ -488,9 +488,9 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 			return ["readFile", "listFiles", "listFilesTopLevel", "listFilesRecursive", "listCodeDefinitionNames", "searchFiles"].includes(tool.tool)
 		}
 		return false
-	}
+	}, [])
 
-	const isWriteToolAction = (message: ClineMessage | undefined) => {
+	const isWriteToolAction = useCallback((message: ClineMessage | undefined) => {
 		if (message?.type === "ask") {
 			if (!message.text) {
 				return true
@@ -499,9 +499,9 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 			return ["editedExistingFile", "appliedDiff", "newFileCreated"].includes(tool.tool)
 		}
 		return false
-	}
+	}, [])
 
-	const isMcpToolAlwaysAllowed = (message: ClineMessage | undefined) => {
+	const isMcpToolAlwaysAllowed = useCallback((message: ClineMessage | undefined) => {
 		if (message?.type === "ask" && message.ask === "use_mcp_server") {
 			if (!message.text) {
 				return true
@@ -514,9 +514,9 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 			}
 		}
 		return false
-	}
+	}, [mcpServers])
 
-	const isAllowedCommand = (message: ClineMessage | undefined) => {
+	const isAllowedCommand = useCallback((message: ClineMessage | undefined) => {
 		if (message?.type === "ask") {
 			const command = message.text
 			if (!command) {
@@ -533,9 +533,10 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 			})
 		}
 		return false
-	}
+	}, [allowedCommands])
 
-	const isAutoApproved = (message: ClineMessage | undefined) => {
+	const isAutoApproved = useCallback(
+		(message: ClineMessage | undefined) => {
 			if (!message || message.type !== "ask") return false
 
 			return (
@@ -545,7 +546,19 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 				(alwaysAllowExecute && message.ask === "command" && isAllowedCommand(message)) ||
 				(alwaysAllowMcp && message.ask === "use_mcp_server" && isMcpToolAlwaysAllowed(message))
 			)
-	}
+		},
+		[
+			alwaysAllowBrowser,
+			alwaysAllowReadOnly,
+			alwaysAllowWrite,
+			alwaysAllowExecute,
+			alwaysAllowMcp,
+			isReadOnlyToolAction,
+			isWriteToolAction,
+			isAllowedCommand,
+			isMcpToolAlwaysAllowed
+		]
+	)
 
 	useEffect(() => {
 		// Only execute when isStreaming changes from true to false
@@ -580,7 +593,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 		}
 		// Update previous value
 		setWasStreaming(isStreaming)
-	}, [isStreaming, lastMessage, wasStreaming])
+	}, [isStreaming, lastMessage, wasStreaming, isAutoApproved])
 
 	const isBrowserSessionMessage = (message: ClineMessage): boolean => {
 		// which of visible messages are browser session messages, see above
@@ -822,7 +835,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 		if (isAutoApproved(lastMessage)) {
 			handlePrimaryButtonClick()
 		}
-	}, [clineAsk, enableButtons, handlePrimaryButtonClick, alwaysAllowBrowser, alwaysAllowReadOnly, alwaysAllowWrite, alwaysAllowExecute, alwaysAllowMcp, messages, allowedCommands, mcpServers])
+	}, [clineAsk, enableButtons, handlePrimaryButtonClick, alwaysAllowBrowser, alwaysAllowReadOnly, alwaysAllowWrite, alwaysAllowExecute, alwaysAllowMcp, messages, allowedCommands, mcpServers, isAutoApproved, lastMessage])
 
 	return (
 		<div

webview-ui/src/components/mcp/__tests__/McpToolRow.test.tsx

@@ -23,7 +23,6 @@ jest.mock('@vscode/webview-ui-toolkit/react', () => ({
       <label>
         <input
           type="checkbox"
-          role="checkbox"
           checked={checked}
           onChange={onChange}
         />

webview-ui/src/components/settings/__tests__/SettingsView.test.tsx

@@ -40,7 +40,7 @@ jest.mock('@vscode/webview-ui-toolkit/react', () => ({
     />
   ),
   VSCodeTextArea: () => <textarea />,
-  VSCodeLink: () => <a />,
+  VSCodeLink: ({ children, href }: any) => <a href={href || '#'}>{children}</a>,
   VSCodeDropdown: ({ children, value, onChange }: any) => (
     <select value={value} onChange={onChange}>
       {children}