Introduce Separate Assay Sidebar (#64)

* Replaces the original sidebar menu with a dedicated Assay menu and added the commands to the palette.
* When add-ons are installed in the root folder, the Assay menu is populated with the add-ons and its (downloaded) versions.
* The user can then 1) add a new addon, 2) open a version in a new window directly, 3) select two versions and launch their diff tool, or 4) select an add-on or version and delete it.

---------

Co-authored-by: William Durand <will+git@drnd.me>

package.json

@@ -21,6 +21,64 @@
   ],
   "main": "./dist/extension.js",
   "contributes": {
+    "icons": {
+      "assay-edit": {
+        "description": "edit",
+        "default": {
+          "fontPath": "media/tabler-icons.woff",
+          "fontCharacter": "\\eb04"
+        }
+      },
+      "assay-export": {
+        "description": "export",
+        "default": {
+          "fontPath": "media/tabler-icons.woff",
+          "fontCharacter": "\\eb47"
+        }
+      },
+      "assay-share": {
+        "description": "share",
+        "default": {
+          "fontPath": "media/tabler-icons.woff",
+          "fontCharacter": "\\eb21"
+        }
+      },
+      "assay-delete": {
+        "description": "close",
+        "default": {
+          "fontPath": "media/tabler-icons.woff",
+          "fontCharacter": "\\eb55"
+        }
+      },
+      "assay-add": {
+        "description": "add",
+        "default": {
+          "fontPath": "media/tabler-icons.woff",
+          "fontCharacter": "\\eb0b"
+        }
+      },
+      "assay-addon": {
+        "description": "addon",
+        "default": {
+          "fontPath": "media/tabler-icons.woff",
+          "fontCharacter": "\\eb10"
+        }
+      },
+      "assay-refresh": {
+        "description": "refresh",
+        "default": {
+          "fontPath": "media/tabler-icons.woff",
+          "fontCharacter": "\\eb13"
+        }
+      },
+      "assay-view": {
+        "description": "view",
+        "default": {
+          "fontPath": "media/tabler-icons.woff",
+          "fontCharacter": "\\fb79"
+        }
+      }
+    },
     "configuration": {
       "title": "Assay",
       "properties": {
@@ -43,6 +101,34 @@
       }
     },
     "menus": {
+      "view/title": [
+        {
+          "command": "assay.get",
+          "group": "navigation@2",
+          "when": "view == assayCommands"
+        },
+        {
+          "command": "assay.refresh",
+          "group": "navigation@1",
+          "when": "view == assayCommands"
+        }
+
+      ],
+      "view/item/context": [
+        {
+          "command": "assay.sidebarDiff",
+          "when": "viewItem !== guidDirectory && view == assayCommands && listDoubleSelection"
+        },
+        {
+          "command": "assay.sidebarDelete",
+          "when": "view == assayCommands"
+        },
+        {
+          "command": "assay.viewAddon",
+          "group": "inline",
+          "when": "viewItem !== guidDirectory && view == assayCommands"
+        }
+      ],
       "explorer/context": [
         {
 
@@ -51,7 +137,6 @@
           "when": "assay.commentsEnabled && explorerResourceIsFolder && listDoubleSelection"
         },
         {
-
           "command": "assay.exportCommentsFromContext",
           "group": "navigation",
           "when": "assay.commentsEnabled && explorerResourceIsFolder"
@@ -112,14 +197,29 @@
 				}
 			]
     },
+    "viewsContainers": {
+      "activitybar": [
+        {
+            "id": "assay-menu",
+            "title": "Assay",
+            "icon": "media/assay.svg"
+        }
+    ]
+    },
     "views": {
-      "explorer": [
+      "assay-menu": [
         {
           "id": "assayCommands",
-          "name": "Assay"
+          "name": "Addons"
         }
       ]
     },
+    "viewsWelcome": [
+      {
+          "view": "assayCommands",
+          "contents": "You do not have any addons installed.\n[+ Review New Addon](command:assay.get)\n In order to use Assay, you must generate an API key and secret in the [Reviewer Tools](https://addons.mozilla.org/en-US/firefox/) section of AMO. \n[Enter API Key](command:assay.getApiKey)\n[Enter Secret](command:assay.getSecret)\nYou can [Test API Credentials](command:assay.testApiCredentials) if needed.\nNew to Assay? [View Instructions](command:assay.welcome)"
+      }
+    ],
     "commands": [
       {
         "command": "assay.welcome",
@@ -141,6 +241,37 @@
         "command": "assay.checkForUpdates",
         "title": "(Assay) Check For Updates"
       },
+      {
+        "command": "assay.get",
+        "title": "(Assay) Review New Addon",
+        "icon": "$(assay-add)"
+      },
+      {
+        "command": "assay.refresh",
+        "title": "Refresh Addons",
+        "icon": "$(assay-refresh)"
+      },
+      {
+        "command": "assay.sidebarDiff",
+        "title": "Open Versions in Diff Tool"
+      },
+      {
+        "command": "assay.sidebarDelete",
+        "title": "Delete"
+      },
+      {
+        "command": "assay.viewAddon",
+        "title": "View Addon in New Window",
+        "icon": "$(assay-view)"
+      },
+      {
+        "command": "assay.getApiKey",
+        "title": "(Assay) Enter API Key"
+      },
+      {
+        "command": "assay.getSecret",
+        "title": "(Assay) Enter Secret Key"
+      },
       {
 				"command": "assay.copyLinkFromReply",
 				"title": "Copy Link"
@@ -152,18 +283,12 @@
 			{
 				"command": "assay.editComment",
 				"title": "Edit Comment",
-				"icon": {
-					"dark": "media/commentIcons/edit_inverse.svg",
-					"light": "media/commentIcons/edit.svg"
-				}
+				"icon": "$(assay-edit)"
 			},
 			{
 				"command": "assay.deleteComment",
 				"title": "Delete",
-				"icon": {
-					"dark": "media/commentIcons/close_inverse.svg",
-					"light": "media/commentIcons/close.svg"
-				}
+				"icon": "$(assay-delete)"
 			},
 			{
 				"command": "assay.saveComment",
@@ -180,18 +305,12 @@
       {
 				"command": "assay.exportComments",
 				"title": "Export Version Comments",
-				"icon": {
-					"dark": "media/commentIcons/export_inverse.svg",
-					"light": "media/commentIcons/export.svg"
-				}
+        "icon": "$(assay-export)"
 			},
       {
 				"command": "assay.copyLinkFromThread",
 				"title": "Copy Link",
-				"icon": {
-					"dark": "media/commentIcons/link_inverse.svg",
-					"light": "media/commentIcons/link.svg"
-				}
+				"icon": "$(assay-share)"
 			}
     ]
   },
@@ -255,4 +374,4 @@
     "jsonwebtoken": "^9.0.1",
     "jszip": "^3.10.1"
   }
-}
+}

src/controller/addonController.ts

@@ -6,6 +6,7 @@ import * as vscode from "vscode";
 import { AddonCacheController } from "./addonCacheController";
 import { CredentialController } from "./credentialController";
 import { DirectoryController } from "./directoryController";
+import { SidebarController } from "./sidebarController";
 import constants from "../config/config";
 import { AddonInfoResponse, AddonVersion, ErrorMessages } from "../types";
 import { AddonView } from "../views/addonView";
@@ -15,7 +16,8 @@ export class AddonController {
   constructor(
     private credentialController: CredentialController,
     private addonCacheController: AddonCacheController,
-    private directoryController: DirectoryController
+    private directoryController: DirectoryController,
+    private sidebarController: SidebarController
   ) {}
 
   /**
@@ -100,6 +102,8 @@ export class AddonController {
         `${workspaceFolder}/${guid}/${version}`
       );
 
+      this.sidebarController.refresh();
+
       return { workspaceFolder, guid, version };
     } catch (error) {
       console.error(error);

src/controller/diffController.ts

@@ -1,15 +1,27 @@
 import { spawn } from "child_process";
 import * as vscode from "vscode";
 
+import { AddonTreeItem } from "../model/sidebarTreeDataProvider";
 import { DiffView } from "../views/diffView";
 
 export class DiffController {
+  /**
+   * Open an addon for view from a TreeView<AddonTreeItem>.
+   * @param _ The specific AddonTreeItem the user opened the context menu on.
+   * @param list Selected AddonTreeItems
+   * @returns Whether the diff tool successfully launched.
+   */
+  async diffFromSidebar(_: unknown, list: AddonTreeItem[]) {
+    const [first, second] = list;
+    return this.openInDiffTool([first.uri, second.uri]);
+  }
+
   /**
    * Launches the external diff tool.
    * @param uris The files to compare.
    * @returns Whether the diff tool successfully launched.
    */
-  async openInDiffTool(uris: [vscode.Uri, vscode.Uri]) {
+  private async openInDiffTool(uris: [vscode.Uri, vscode.Uri]) {
     const [left, right] = uris;
     const leftUri = vscode.Uri.parse(left.toString());
     const rightUri = vscode.Uri.parse(right.toString());

src/controller/directoryController.ts

@@ -1,6 +1,7 @@
 import * as fs from "fs";
 import * as vscode from "vscode";
 
+import { AddonTreeItem } from "../model/sidebarTreeDataProvider";
 import { FilesReadonlyIncludeConfig } from "../types";
 import { RootView } from "../views/rootView";
 
@@ -100,6 +101,25 @@ export class DirectoryController {
     }
   }
 
+  /**
+   * Deletes the associated uri of all selected AddonTreeItems.
+   * @param list Selected AddonTreeItems
+   * @returns the failed uris.
+   */
+  static async deleteUri(list: AddonTreeItem[]) {
+    const promises = [];
+    const failedUris: vscode.Uri[] = [];
+
+    for (const item of list) {
+      const thenable = vscode.workspace.fs.delete(item.uri, { recursive: true });
+        const promise = Promise.resolve(thenable).catch(() => failedUris.push(item.uri));
+        promises.push(promise);
+    }
+
+    await Promise.all(promises);
+    return failedUris;
+  }
+
   /**
    * Sets the root to read-only.
    */

src/controller/sidebarController.ts

@@ -0,0 +1,35 @@
+import * as vscode from "vscode";
+
+import { DirectoryController } from "./directoryController";
+import { AddonTreeDataProvider, AddonTreeItem } from "../model/sidebarTreeDataProvider";
+
+export class SidebarController {
+  public refresh: () => void;
+  public treeView: vscode.TreeView<vscode.TreeItem>;
+
+  constructor(public id: string, rootFolderPath: string) {
+    const treeProvider = new AddonTreeDataProvider(rootFolderPath);
+
+    this.refresh = () => {
+      treeProvider.refresh();
+    };
+
+    this.treeView = vscode.window.createTreeView(this.id, {
+      treeDataProvider: treeProvider,
+      canSelectMany: true,
+    });
+  }
+
+  /**
+   * Deletes the selected uris and refreshes the sidebar.
+   * @param treeItem The specific AddonTreeItem the user opened the context menu on.
+   * @param list Selected AddonTreeItems
+   * @returns whether all were successfully deleted.
+   */
+  async delete(treeItem: AddonTreeItem, list: AddonTreeItem[] | undefined) {
+    list = list || [treeItem];
+    const result = await DirectoryController.deleteUri(list);
+    this.refresh();
+    return result;
+  }
+}

src/controller/urlController.ts

@@ -4,6 +4,7 @@ import * as vscode from "vscode";
 import { AddonController } from "./addonController";
 import { DirectoryController } from "./directoryController";
 import { RangeHelper } from "../helper/rangeHelper";
+import { AddonTreeItem } from "../model/sidebarTreeDataProvider";
 
 export class UrlController implements vscode.UriHandler {
   constructor(
@@ -12,6 +13,17 @@ export class UrlController implements vscode.UriHandler {
     private directoryController: DirectoryController
   ) {}
 
+  /**
+   * Open an addon for view from a TreeView<AddonTreeItem>.
+   * @param item the user-chosen add-on.
+   */
+  async viewAddon(item: AddonTreeItem) {
+    const { versionPath } = await this.directoryController.splitUri(item.uri);
+    if (versionPath) {
+      this.openWorkspace(versionPath);
+    }
+  }
+
   /**
    * Given a file and line(s), focuses VS Code onto the file and line(s).
    * @param uri The URI of the file.