Use quickpick UI to display addons list (#2205)

- This allows the extension to display multiple addons with enough space to show
  more attributes (e.g. gem name, version, etc.) in the future
- Each entry displays the addon's name and an icon indicating its errored status
- Selecting an entry currently doesn't do anything

Author: st0012

vscode/package.json

@@ -66,6 +66,11 @@
         "title": "Toggle features",
         "category": "Ruby LSP"
       },
+      {
+        "command": "rubyLsp.displayAddons",
+        "title": "Display addons",
+        "category": "Ruby LSP"
+      },
       {
         "command": "rubyLsp.runTest",
         "title": "Run current test",

vscode/src/common.ts

@@ -18,6 +18,7 @@ export enum Command {
   RunTestInTerminal = "rubyLsp.runTestInTerminal",
   DebugTest = "rubyLsp.debugTest",
   ShowSyntaxTree = "rubyLsp.showSyntaxTree",
+  DisplayAddons = "rubyLsp.displayAddons",
 }
 
 export interface RubyInterface {

vscode/src/rubyLsp.ts

@@ -214,6 +214,33 @@ export class RubyLsp {
           ),
         );
       }),
+      vscode.commands.registerCommand(Command.DisplayAddons, async () => {
+        const client = this.currentActiveWorkspace()?.lspClient;
+
+        if (!client || !client.addons) {
+          return;
+        }
+
+        const options: vscode.QuickPickItem[] = client.addons
+          .sort((addon) => {
+            // Display errored addons last
+            if (addon.errored) {
+              return 1;
+            }
+
+            return -1;
+          })
+          .map((addon) => {
+            const icon = addon.errored ? "$(error)" : "$(pass)";
+            return {
+              label: `${icon} ${addon.name}`,
+            };
+          });
+
+        await vscode.window.showQuickPick(options, {
+          placeHolder: "Addons (readonly)",
+        });
+      }),
       vscode.commands.registerCommand(Command.ToggleFeatures, async () => {
         // Extract feature descriptions from our package.json
         const enabledFeaturesProperties =

vscode/src/status.ts

@@ -196,10 +196,11 @@ export class AddonsStatus extends StatusItem {
     } else if (workspace.lspClient.addons.length === 0) {
       this.item.text = "Addons: none";
     } else {
-      const addonNames = workspace.lspClient.addons.map((addon) =>
-        addon.errored ? `${addon.name} (errored)` : `${addon.name}`,
-      );
-      this.item.text = `Addons: ${addonNames.join(", ")}`;
+      this.item.text = `Addons: ${workspace.lspClient.addons.length}`;
+      this.item.command = {
+        title: "Details",
+        command: Command.DisplayAddons,
+      };
     }
   }
 }

vscode/src/test/suite/status.test.ts

@@ -305,15 +305,17 @@ suite("StatusItems", () => {
       assert.strictEqual(status.item.text, "Addons: none");
     });
 
-    test("Status displays addon names and errored status", () => {
+    test("Status displays addon count and command to list commands", () => {
       workspace.lspClient!.addons = [
         { name: "foo", errored: false },
         { name: "bar", errored: true },
       ];
 
       status.refresh(workspace);
 
-      assert.strictEqual(status.item.text, "Addons: foo, bar (errored)");
+      assert.strictEqual(status.item.text, "Addons: 2");
+      assert.strictEqual(status.item.command?.title, "Details");
+      assert.strictEqual(status.item.command.command, Command.DisplayAddons);
     });
   });
 });