refactor: display workspaces in sidebar

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"editor.formatOnSave": true
+}

CONTRIBUTING.md

@@ -40,6 +40,7 @@ Coder Remote periodically reads the `network-info-dir + "/" + matchingSSHPID` fi
 
    ```bash
    # Inside https://github.com/coder/coder
+   # on Mac replace /tmp/coder with "$TMPDIR"
    $ go build -o /tmp/coder ./cmd/coder
    ```
 

package.json

@@ -46,7 +46,7 @@
       "coder": [
         {
           "id": "coderRemote",
-          "name": "",
+          "name": "Workspaces",
           "visibility": "visible",
           "icon": "media/logo.svg",
           "contextualTitle": "Coder Remote"

src/commands.ts

@@ -4,9 +4,10 @@ import { Workspace } from "coder/site/src/api/typesGenerated"
 import * as vscode from "vscode"
 import { Remote } from "./remote"
 import { Storage } from "./storage"
+import { WorkspacesProvider } from "./workspaces"
 
 export class Commands {
-  public constructor(private readonly storage: Storage) {}
+  public constructor(private readonly storage: Storage, private readonly treeDataProvider: WorkspacesProvider) {}
 
   public async login(...args: string[]): Promise<void> {
     let url: string | undefined = args.length >= 1 ? args[0] : undefined
@@ -64,25 +65,17 @@ export class Commands {
     await this.storage.setSessionToken(token)
     const user = await getUser()
     await vscode.commands.executeCommand("setContext", "coder.authenticated", true)
-    vscode.window
-      .showInformationMessage(
-        `Welcome to Coder, ${user.username}!`,
-        {
-          detail: "You can now use the Coder extension to manage your Coder instance.",
-        },
-        "Open Workspace",
-      )
-      .then((action) => {
-        if (action === "Open Workspace") {
-          vscode.commands.executeCommand("coder.open")
-        }
-      })
+    this.treeDataProvider.refresh()
+    vscode.window.showInformationMessage(`Welcome to Coder, ${user.username}!`, {
+      detail: "You can now use the Coder extension to manage your Coder instance.",
+    })
   }
 
   public async logout(): Promise<void> {
     await this.storage.setURL(undefined)
     await this.storage.setSessionToken(undefined)
     await vscode.commands.executeCommand("setContext", "coder.authenticated", false)
+    this.treeDataProvider.refresh()
     vscode.window.showInformationMessage("You've been logged out of Coder!", "Login").then((action) => {
       if (action === "Login") {
         vscode.commands.executeCommand("coder.login")

src/extension.ts

@@ -6,12 +6,16 @@ import * as vscode from "vscode"
 import { Commands } from "./commands"
 import { Remote } from "./remote"
 import { Storage } from "./storage"
+import { WorkspacesProvider } from "./workspaces"
 
 export async function activate(ctx: vscode.ExtensionContext): Promise<void> {
   const output = vscode.window.createOutputChannel("Coder")
+  const workspacesProvider = new WorkspacesProvider()
   const storage = new Storage(output, ctx.globalState, ctx.secrets, ctx.globalStorageUri, ctx.logUri)
   await storage.init()
 
+  vscode.window.registerTreeDataProvider("coderRemote", workspacesProvider)
+
   getUser()
     .then(() => {
       vscode.commands.executeCommand("setContext", "coder.authenticated", true)
@@ -50,7 +54,7 @@ export async function activate(ctx: vscode.ExtensionContext): Promise<void> {
     },
   })
 
-  const commands = new Commands(storage)
+  const commands = new Commands(storage, workspacesProvider)
 
   vscode.commands.registerCommand("coder.login", commands.login.bind(commands))
   vscode.commands.registerCommand("coder.logout", commands.logout.bind(commands))

src/workspaces.ts

@@ -0,0 +1,65 @@
+import { getWorkspaces } from "coder/site/src/api/api"
+import * as vscode from "vscode"
+
+export class WorkspacesProvider implements vscode.TreeDataProvider<Workspace> {
+  private _onDidChangeTreeData: vscode.EventEmitter<Workspace | undefined | void> = new vscode.EventEmitter<
+    Workspace | undefined | void
+  >()
+  readonly onDidChangeTreeData: vscode.Event<Workspace | undefined | void> = this._onDidChangeTreeData.event
+  constructor() {
+    // intentional blank link for ESLint
+  }
+
+  refresh(): void {
+    this._onDidChangeTreeData.fire()
+  }
+
+  getTreeItem(element: Workspace): vscode.TreeItem {
+    return element
+  }
+
+  async getChildren(): Promise<Workspace[]> {
+    const workspaces = await getWorkspaces({
+      q: "owner:me",
+    }).catch(() => {
+      // TODO: we should probably warn or error here
+      return
+    })
+
+    if (workspaces) {
+      const items: Workspace[] = workspaces.workspaces.map((workspace) => {
+        return new Workspace(
+          `${workspace.name}`,
+          vscode.TreeItemCollapsibleState.None,
+          `${workspace.latest_build.status !== "running" ? "circle-outline" : "circle-filled"}`,
+          {
+            command: "coder.open",
+            title: "",
+            arguments: [workspace.owner_name, workspace.name],
+          },
+        )
+      })
+
+      return Promise.resolve(items)
+    } else {
+      // TODO: should we issue a warning new workspaces found?
+      // Or return a link to create a new Workspace from the dashboard?
+      return Promise.resolve([])
+    }
+  }
+}
+
+export class Workspace extends vscode.TreeItem {
+  constructor(
+    public readonly label: string,
+    public readonly collapsibleState: vscode.TreeItemCollapsibleState,
+    public readonly iconId: vscode.ThemeIcon["id"],
+    public readonly command?: vscode.Command,
+  ) {
+    super(label, collapsibleState)
+
+    this.tooltip = `${this.label}`
+  }
+
+  iconPath = new vscode.ThemeIcon(this.iconId)
+}