Connections tree improvements

packages/vscode-extension/package.json

@@ -337,7 +337,7 @@
     "clean": "rm -rf dist",
     "test:e2e": "npm run build:dev && npm run test:apiAndUnit && npm run test:webviews",
     "test:apiAndUnit": "npm run build:dev && rm -rf .vscode-test/user-data && node ./dist/tests/runApiAndUnitTests.js",
-    "test:webviews": "wdio run ./dist/tests/runWebviewTests.js"
+    "test:webviews": "npm run build:dev && wdio run ./dist/tests/runWebviewTests.js"
   },
   "dependencies": {
     "@neo4j-cypher/language-server": "2.0.0-next.17",

packages/vscode-extension/src/connectionService.ts

@@ -188,7 +188,6 @@ export function getActiveConnection(): Connection | null {
 
 /**
  * Gets all Connections from the global state as an array of Connection objects.
- * This is artificially limited to one, for now.
  * @returns An array of all Connection objects.
  */
 export function getAllConnections(): Connection[] {

packages/vscode-extension/src/treeviews/connectionTreeDataProvider.ts

@@ -1,4 +1,5 @@
 import { Database } from '@neo4j-cypher/schema-poller';
+import path from 'path';
 import {
   Event,
   EventEmitter,
@@ -7,6 +8,7 @@ import {
   TreeItemCollapsibleState,
   Uri,
 } from 'vscode';
+import { CONSTANTS } from '../constants';
 import {
   Connection,
   getAllConnections,
@@ -29,8 +31,8 @@ export class ConnectionTreeDataProvider
   readonly onDidChangeTreeData: Event<ConnectionItem | undefined | void> =
     this._onDidChangeTreeData.event;
 
-  refresh(): void {
-    this._onDidChangeTreeData.fire();
+  refresh(item?: ConnectionItem): void {
+    this._onDidChangeTreeData.fire(item);
   }
 
   getTreeItem(element: ConnectionItem): TreeItem | Thenable<TreeItem> {
@@ -74,7 +76,7 @@ export class ConnectionTreeDataProvider
             this.getConnectionName(connection),
             description,
             connection.state === 'active'
-              ? TreeItemCollapsibleState.Collapsed
+              ? TreeItemCollapsibleState.Expanded
               : TreeItemCollapsibleState.None,
             connection.key,
           ),
@@ -158,13 +160,101 @@ export class ConnectionItem extends TreeItem {
 
     switch (type) {
       case 'activeConnection':
+        this.iconPath = {
+          light: Uri.file(
+            path.join(
+              __dirname,
+              '..',
+              'resources',
+              'images',
+              'Neo4jActiveLight.svg',
+            ),
+          ),
+          dark: Uri.file(
+            path.join(
+              __dirname,
+              '..',
+              'resources',
+              'images',
+              'Neo4jActiveDark.svg',
+            ),
+          ),
+        };
+        this.id = key;
+        break;
       case 'connection':
+        this.iconPath = {
+          light: Uri.file(
+            path.join(
+              __dirname,
+              '..',
+              'resources',
+              'images',
+              'Neo4jInactiveLight.svg',
+            ),
+          ),
+          dark: Uri.file(
+            path.join(
+              __dirname,
+              '..',
+              'resources',
+              'images',
+              'Neo4jInactiveDark.svg',
+            ),
+          ),
+        };
         this.id = key;
+        this.command = {
+          title: 'onClickConnect',
+          command: CONSTANTS.COMMANDS.CONNECT_COMMAND,
+          arguments: [this],
+        };
         break;
       case 'activeDatabase':
+        this.resourceUri = Uri.from({ scheme: '', query: `type=${this.type}` });
+        this.iconPath = {
+          light: Uri.file(
+            path.join(
+              __dirname,
+              '..',
+              'resources',
+              'images',
+              'ConnectedLight.svg',
+            ),
+          ),
+          dark: Uri.file(
+            path.join(
+              __dirname,
+              '..',
+              'resources',
+              'images',
+              'ConnectedDark.svg',
+            ),
+          ),
+        };
+        break;
       case 'database':
         this.resourceUri = Uri.from({ scheme: '', query: `type=${this.type}` });
-        this.iconPath = '.';
+        this.iconPath = {
+          light: Uri.file(
+            path.join(
+              __dirname,
+              '..',
+              'resources',
+              'images',
+              'DisconnectedLight.svg',
+            ),
+          ),
+          dark: Uri.file(
+            path.join(
+              __dirname,
+              '..',
+              'resources',
+              'images',
+              'DisconnectedDark.svg',
+            ),
+          ),
+        };
         break;
     }
   }

packages/vscode-extension/tests/specs/api/syntaxValidation.spec.ts

@@ -69,7 +69,7 @@ export async function testSyntaxValidation({
   );
 }
 
-suite.only('Syntax validation spec', () => {
+suite('Syntax validation spec', () => {
   afterEach(async () => {
     await toggleLinting(true);
   });

packages/vscode-extension/tests/specs/webviews/connection.spec.ts

@@ -8,6 +8,7 @@ import {
   closeActiveTab,
   getConnectionSection,
   openFixtureFile,
+  selectConnectionItem,
   setText,
   waitUntilNotification,
 } from '../../webviewUtils';
@@ -37,6 +38,19 @@ suite('Connection testing', () => {
     await waitUntilNotification(browser, 'Connected to Neo4j.');
   });
 
+  test('should connect when selecting new connection', async function () {
+    await selectConnectionItem(connectionSection, 0);
+    await waitUntilNotification(browser, 'Connected to Neo4j.');
+  });
+
+  test('should expand connectionItems when selecting connected connection', async function () {
+    await selectConnectionItem(connectionSection, 1);
+    await waitUntilNotification(browser, 'Connected to Neo4j.');
+    await expect((await connectionSection.getVisibleItems()).length).toBe(2);
+    await selectConnectionItem(connectionSection, 1);
+    await expect((await connectionSection.getVisibleItems()).length).toBe(4);
+  });
+
   test('should be able to connect to another instance', async function () {
     if (os.platform() === 'darwin') {
       this.skip();

packages/vscode-extension/tests/webviewUtils.ts

@@ -1,3 +1,4 @@
+import { integer } from 'vscode-languageclient';
 import { TreeItem, ViewSection, WebView, Workbench } from 'wdio-vscode-service';
 import { createAndStartTestContainer } from './setupTestContainer';
 
@@ -122,12 +123,23 @@ export async function getConnectionSection(
   return connectionSection;
 }
 
+export async function selectConnectionItem(
+  connectionSection: ViewSection,
+  connectionIndex: integer,
+): Promise<void> {
+  const items = await connectionSection.getVisibleItems();
+  await expect(items.length).toBeGreaterThan(connectionIndex);
+  const connectionItem = items.at(connectionIndex) as TreeItem;
+  await connectionItem.select();
+}
+
 export async function clickOnContextMenuItem(
   connectionSection: ViewSection,
   item: string,
   connectionIndex: number,
 ): Promise<void> {
   const items = await connectionSection.getVisibleItems();
+
   await expect(items.length).toBeGreaterThan(connectionIndex);
   const connectionItem = items.at(connectionIndex) as TreeItem;