Add search filter button to Coder Workspaces tree views (#603)

Fixes #330

Author: EhabY

package.json

@@ -204,6 +204,7 @@
 			{
 				"command": "coder.createWorkspace",
 				"title": "Create Workspace",
+				"category": "Coder",
 				"when": "coder.authenticated",
 				"icon": "$(add)"
 			},
@@ -226,7 +227,8 @@
 			},
 			{
 				"command": "coder.refreshWorkspaces",
-				"title": "Coder: Refresh Workspace",
+				"title": "Refresh Workspace",
+				"category": "Coder",
 				"icon": "$(refresh)",
 				"when": "coder.authenticated"
 			},
@@ -241,13 +243,33 @@
 				"title": "Coder: Open App Status",
 				"icon": "$(robot)",
 				"when": "coder.authenticated"
+			},
+			{
+				"command": "coder.searchMyWorkspaces",
+				"title": "Search",
+				"category": "Coder",
+				"icon": "$(search)"
+			},
+			{
+				"command": "coder.searchAllWorkspaces",
+				"title": "Search",
+				"category": "Coder",
+				"icon": "$(search)"
 			}
 		],
 		"menus": {
 			"commandPalette": [
 				{
 					"command": "coder.openFromSidebar",
 					"when": "false"
+				},
+				{
+					"command": "coder.searchMyWorkspaces",
+					"when": "false"
+				},
+				{
+					"command": "coder.searchAllWorkspaces",
+					"when": "false"
 				}
 			],
 			"view/title": [
@@ -262,12 +284,22 @@
 				{
 					"command": "coder.createWorkspace",
 					"when": "coder.authenticated && view == myWorkspaces",
-					"group": "navigation"
+					"group": "navigation@1"
 				},
 				{
 					"command": "coder.refreshWorkspaces",
 					"when": "coder.authenticated && view == myWorkspaces",
-					"group": "navigation"
+					"group": "navigation@2"
+				},
+				{
+					"command": "coder.searchMyWorkspaces",
+					"when": "coder.authenticated && view == myWorkspaces",
+					"group": "navigation@3"
+				},
+				{
+					"command": "coder.searchAllWorkspaces",
+					"when": "coder.authenticated && view == allWorkspaces",
+					"group": "navigation@3"
 				}
 			],
 			"view/item/context": [

src/extension.ts

@@ -18,6 +18,9 @@ import {
 	WorkspaceQuery,
 } from "./workspace/workspacesProvider";
 
+const MY_WORKSPACES_TREE_ID = "myWorkspaces";
+const ALL_WORKSPACES_TREE_ID = "allWorkspaces";
+
 export async function activate(ctx: vscode.ExtensionContext): Promise<void> {
 	// The Remote SSH extension's proposed APIs are used to override the SSH host
 	// name in VS Code itself. It's visually unappealing having a lengthy name!
@@ -86,15 +89,15 @@ export async function activate(ctx: vscode.ExtensionContext): Promise<void> {
 
 	// createTreeView, unlike registerTreeDataProvider, gives us the tree view API
 	// (so we can see when it is visible) but otherwise they have the same effect.
-	const myWsTree = vscode.window.createTreeView("myWorkspaces", {
+	const myWsTree = vscode.window.createTreeView(MY_WORKSPACES_TREE_ID, {
 		treeDataProvider: myWorkspacesProvider,
 	});
 	myWorkspacesProvider.setVisibility(myWsTree.visible);
 	myWsTree.onDidChangeVisibility((event) => {
 		myWorkspacesProvider.setVisibility(event.visible);
 	});
 
-	const allWsTree = vscode.window.createTreeView("allWorkspaces", {
+	const allWsTree = vscode.window.createTreeView(ALL_WORKSPACES_TREE_ID, {
 		treeDataProvider: allWorkspacesProvider,
 	});
 	allWorkspacesProvider.setVisibility(allWsTree.visible);
@@ -298,6 +301,12 @@ export async function activate(ctx: vscode.ExtensionContext): Promise<void> {
 		"coder.viewLogs",
 		commands.viewLogs.bind(commands),
 	);
+	vscode.commands.registerCommand("coder.searchMyWorkspaces", async () =>
+		showTreeViewSearch(MY_WORKSPACES_TREE_ID),
+	);
+	vscode.commands.registerCommand("coder.searchAllWorkspaces", async () =>
+		showTreeViewSearch(ALL_WORKSPACES_TREE_ID),
+	);
 
 	// Since the "onResolveRemoteAuthority:ssh-remote" activation event exists
 	// in package.json we're able to perform actions before the authority is
@@ -421,3 +430,8 @@ export async function activate(ctx: vscode.ExtensionContext): Promise<void> {
 		}
 	}
 }
+
+async function showTreeViewSearch(id: string): Promise<void> {
+	await vscode.commands.executeCommand(`${id}.focus`);
+	await vscode.commands.executeCommand("list.find");
+}

src/workspace/workspacesProvider.ts

@@ -262,6 +262,7 @@ export class WorkspaceProvider
 								// yet.
 								appStatuses.push(
 									new AppStatusTreeItem({
+										id: status.id,
 										name: status.message,
 										command: app.command,
 										workspace_name: element.workspace.name,
@@ -335,6 +336,7 @@ class AgentMetadataTreeItem extends vscode.TreeItem {
 			metadataEvent.result.collected_at,
 		).toLocaleString();
 
+		this.id = metadataEvent.description.key;
 		this.tooltip = "Collected at " + collected_at;
 		this.contextValue = "coderAgentMetadata";
 	}
@@ -343,13 +345,15 @@ class AgentMetadataTreeItem extends vscode.TreeItem {
 class AppStatusTreeItem extends vscode.TreeItem {
 	constructor(
 		public readonly app: {
+			id: string;
 			name: string;
 			url?: string;
 			command?: string;
 			workspace_name?: string;
 		},
 	) {
 		super("", vscode.TreeItemCollapsibleState.None);
+		this.id = app.id;
 		this.description = app.name;
 		this.contextValue = "coderAppStatus";
 
@@ -369,6 +373,7 @@ type CoderOpenableTreeItemType =
 
 export class OpenableTreeItem extends vscode.TreeItem {
 	constructor(
+		id: string,
 		label: string,
 		tooltip: string,
 		description: string,
@@ -379,6 +384,7 @@ export class OpenableTreeItem extends vscode.TreeItem {
 		contextValue: CoderOpenableTreeItemType,
 	) {
 		super(label, collapsibleState);
+		this.id = id;
 		this.contextValue = contextValue;
 		this.tooltip = tooltip;
 		this.description = description;
@@ -397,6 +403,7 @@ export class AgentTreeItem extends OpenableTreeItem {
 		watchMetadata = false,
 	) {
 		super(
+			agent.id, // id
 			agent.name, // label
 			`Status: ${agent.status}`, // tooltip
 			agent.status, // description
@@ -434,6 +441,7 @@ export class WorkspaceTreeItem extends OpenableTreeItem {
 		const detail = `Template: ${workspace.template_display_name || workspace.template_name} • Status: ${status}`;
 		const agents = extractAgents(workspace.latest_build.resources);
 		super(
+			workspace.id,
 			label,
 			detail,
 			workspace.latest_build.status, // description