🚸 Update methods to use colours instead of icons

src/extension.ts

@@ -32,7 +32,7 @@ import {
   trackTreeViewVisible,
 } from "./utils/telemetry"
 import {
-  METHOD_ICONS,
+  getMethodSvgIcon,
   type PathOperationTreeItem,
   PathOperationTreeProvider,
 } from "./vscode/pathOperationTreeProvider"
@@ -151,6 +151,7 @@ export async function activate(context: vscode.ExtensionContext) {
   }
 
   const pathOperationProvider = new PathOperationTreeProvider(
+    context.extensionUri,
     apps,
     groupApps(apps),
   )
@@ -302,7 +303,12 @@ export async function activate(context: vscode.ExtensionContext) {
   context.subscriptions.push(
     watcher,
     treeView,
-    registerCommands(pathOperationProvider, codeLensProvider, groupApps),
+    registerCommands(
+      context.extensionUri,
+      pathOperationProvider,
+      codeLensProvider,
+      groupApps,
+    ),
     { dispose: () => clearInterval(telemetryFlushInterval) },
   )
 }
@@ -379,6 +385,7 @@ function registerCloudCommands(
 }
 
 function registerCommands(
+  extensionUri: vscode.Uri,
   pathOperationProvider: PathOperationTreeProvider,
   codeLensProvider: TestCodeLensProvider,
   groupApps: (
@@ -419,7 +426,8 @@ function registerCommands(
           .map((route) => {
             const path = stripLeadingDynamicSegments(route.path)
             return {
-              label: `$(${METHOD_ICONS[route.method]}) ${route.method.toUpperCase()} ${path}`,
+              label: `${route.method.toUpperCase()} ${path}`,
+              iconPath: getMethodSvgIcon(extensionUri, route.method),
               description: route.functionName,
               detail: vscode.Uri.parse(route.location.filePath)
                 .fsPath.replace(workspacePrefix, "")

src/test/providers/pathOperationTreeProvider.test.ts

@@ -1,4 +1,5 @@
 import * as assert from "node:assert"
+import { Uri } from "vscode"
 import type {
   AppDefinition,
   RouteDefinition,
@@ -133,11 +134,13 @@ suite("getRouteLabel", () => {
   })
 })
 
+const testExtUri = Uri.file("/test-extension")
+
 suite("PathOperationTreeProvider", () => {
   let provider: PathOperationTreeProvider
 
   setup(() => {
-    provider = new PathOperationTreeProvider(mockApps)
+    provider = new PathOperationTreeProvider(testExtUri, mockApps)
   })
 
   test("getChildren returns apps at root level", () => {
@@ -173,7 +176,7 @@ suite("PathOperationTreeProvider", () => {
       makeRoute("POST", "/users"),
       makeRoute("PUT", "/users"),
     ]
-    const p = new PathOperationTreeProvider([app])
+    const p = new PathOperationTreeProvider(testExtUri, [app])
     const children = p.getChildren(p.getChildren()[0])
     const labels = children.map((c) =>
       c.type === "route" ? getRouteLabel(c.route) : "",
@@ -344,7 +347,7 @@ suite("PathOperationTreeProvider", () => {
         location: { filePath: "users.py", line: 10, column: 0 },
       },
     ]
-    const p = new PathOperationTreeProvider([app])
+    const p = new PathOperationTreeProvider(testExtUri, [app])
     const appItem = p.getChildren()[0]
     const route = p.getChildren(appItem).find((c) => c.type === "route")!
     const treeItem = p.getTreeItem(route)
@@ -363,7 +366,7 @@ suite("PathOperationTreeProvider", () => {
   })
 
   test("getChildren returns message when no apps", () => {
-    const emptyProvider = new PathOperationTreeProvider([])
+    const emptyProvider = new PathOperationTreeProvider(testExtUri, [])
     const roots = emptyProvider.getChildren()
     assert.strictEqual(roots.length, 1, "Should return one message item")
     assert.strictEqual(roots[0].type, "message")
@@ -380,7 +383,7 @@ suite("PathOperationTreeProvider", () => {
   })
 
   test("getTreeItem for message type", () => {
-    const emptyProvider = new PathOperationTreeProvider([])
+    const emptyProvider = new PathOperationTreeProvider(testExtUri, [])
     const msg = emptyProvider.getChildren()[0]
     assert.strictEqual(
       emptyProvider.getTreeItem(msg).label,
@@ -390,7 +393,12 @@ suite("PathOperationTreeProvider", () => {
 
   test("getTreeItem for workspace type", () => {
     const wsRoots = groupAppsByWorkspace(mockApps)
-    const wsProvider = new PathOperationTreeProvider(mockApps, wsRoots)
+
+    const wsProvider = new PathOperationTreeProvider(
+      testExtUri,
+      mockApps,
+      wsRoots,
+    )
     const workspace = wsProvider
       .getChildren()
       .find((r) => r.type === "workspace")
@@ -420,7 +428,8 @@ suite("PathOperationTreeProvider", () => {
     }
     const app = makeApp("app", "main.py")
     app.routers = [parentRouter]
-    const p = new PathOperationTreeProvider([app])
+
+    const p = new PathOperationTreeProvider(testExtUri, [app])
     assert.strictEqual(
       p.getTreeItem({ type: "router", router: childRouter }).label,
       "/settings",
@@ -438,11 +447,11 @@ suite("PathOperationTreeProvider", () => {
   })
 
   test("dispose cleans up", () => {
-    new PathOperationTreeProvider([]).dispose()
+    new PathOperationTreeProvider(testExtUri, []).dispose()
   })
 
   test("setApps updates apps and refreshes tree", () => {
-    const p = new PathOperationTreeProvider([])
+    const p = new PathOperationTreeProvider(testExtUri, [])
     assert.strictEqual(p.getChildren()[0].type, "message")
     p.setApps(mockApps)
     assert.strictEqual(p.getChildren()[0].type, "app")
@@ -473,7 +482,11 @@ suite("PathOperationTreeProvider", () => {
 
   test("getParent returns workspace for app in multi-root", () => {
     const wsRoots = groupAppsByWorkspace(mockApps)
-    const wsProvider = new PathOperationTreeProvider(mockApps, wsRoots)
+    const wsProvider = new PathOperationTreeProvider(
+      testExtUri,
+      mockApps,
+      wsRoots,
+    )
     const workspace = wsProvider
       .getChildren()
       .find((r) => r.type === "workspace")!
@@ -500,7 +513,7 @@ suite("PathOperationTreeProvider", () => {
     }
     const app = makeApp("app", "main.py")
     app.routers = [parentRouter]
-    const p = new PathOperationTreeProvider([app])
+    const p = new PathOperationTreeProvider(testExtUri, [app])
     const parent = p.getParent({ type: "router", router: childRouter })
     assert.strictEqual(parent?.type, "router")
   })

src/vscode/pathOperationTreeProvider.ts

@@ -23,6 +23,15 @@ export type PathOperationTreeItem =
   | { type: "route"; route: RouteDefinition }
   | { type: "message"; text: string }
 
+export function getMethodSvgIcon(extensionUri: Uri, method: RouteMethod): Uri {
+  return Uri.joinPath(
+    extensionUri,
+    "media",
+    "icons",
+    "methods",
+    `${method.toLowerCase()}.svg`,
+  )
+}
 const METHOD_ORDER: Record<RouteMethod, number> = {
   GET: 0,
   POST: 1,
@@ -34,17 +43,6 @@ const METHOD_ORDER: Record<RouteMethod, number> = {
   WEBSOCKET: 7,
 }
 
-export const METHOD_ICONS: Record<RouteMethod, string> = {
-  GET: "arrow-right",
-  POST: "plus",
-  PUT: "edit",
-  DELETE: "trash",
-  PATCH: "pencil",
-  OPTIONS: "settings-gear",
-  HEAD: "eye",
-  WEBSOCKET: "broadcast",
-}
-
 export function getAppLabel(app: AppDefinition): string {
   if (app.name !== "app") return app.name
   const pathParts = app.filePath.split("/")
@@ -132,7 +130,14 @@ export class PathOperationTreeProvider
   private routersExpanded = false
   private toggleCount = 0
 
-  constructor(apps: AppDefinition[] = [], roots?: PathOperationTreeItem[]) {
+  private extensionUri: Uri
+
+  constructor(
+    extensionUri: Uri,
+    apps: AppDefinition[] = [],
+    roots?: PathOperationTreeItem[],
+  ) {
+    this.extensionUri = extensionUri
     this.apps = apps
     this.roots = roots ?? apps.map((app) => ({ type: "app" as const, app }))
   }
@@ -267,7 +272,10 @@ export class PathOperationTreeProvider
       case "route": {
         const routeItem = new TreeItem(getRouteLabel(element.route))
         routeItem.description = element.route.functionName
-        routeItem.iconPath = new ThemeIcon(METHOD_ICONS[element.route.method])
+        routeItem.iconPath = getMethodSvgIcon(
+          this.extensionUri,
+          element.route.method,
+        )
         routeItem.contextValue = "route"
         const tooltipPath = stripLeadingDynamicSegments(element.route.path)
         const docstringSection = element.route.docstring