VSCODE-85: Add default button to tree view

package.json

@@ -91,6 +91,12 @@
         }
       ]
     },
+    "viewsWelcome": [
+      {
+        "view": "mongoDB",
+        "contents": "No connections found.\n[Add Connection](command:mdb.connect)"
+      }
+    ],
     "languages": [
       {
         "id": "mongodb",
@@ -249,6 +255,10 @@
     ],
     "menus": {
       "view/title": [
+        {
+          "command": "mdb.createPlayground",
+          "when": "view == mongoDB"
+        },
         {
           "command": "mdb.addConnection",
           "when": "view == mongoDB"

src/connectionController.ts

@@ -18,7 +18,7 @@ const MAX_CONNECTION_NAME_LENGTH = 512;
 
 export enum DataServiceEventTypes {
   CONNECTIONS_DID_CHANGE = 'CONNECTIONS_DID_CHANGE',
-  ACTIVE_CONNECTION_CHANGED = 'ACTIVE_CONNECTION_CHANGED'
+  ACTIVE_CONNECTION_CHANGED = 'ACTIVE_CONNECTION_CHANGED',
 }
 
 export default class ConnectionController {

src/explorer/explorerController.ts

@@ -1,28 +1,49 @@
 import * as vscode from 'vscode';
 
-import ConnectionController from '../connectionController';
+import ConnectionController, {
+  DataServiceEventTypes,
+} from '../connectionController';
 import ExplorerTreeController from './explorerTreeController';
 
 import { createLogger } from '../logging';
 
 const log = createLogger('explorer controller');
 
 export default class ExplorerController {
+  private _connectionController: ConnectionController;
   private _treeController: ExplorerTreeController;
   private _treeView?: vscode.TreeView<vscode.TreeItem>;
 
   constructor(connectionController: ConnectionController) {
     log.info('activate explorer controller');
 
+    this._connectionController = connectionController;
     this._treeController = new ExplorerTreeController(connectionController);
   }
 
-  createTreeView(): void {
-    this._treeView = vscode.window.createTreeView('mongoDB', {
-      treeDataProvider: this._treeController
-    });
+  createTreeView = (): void => {
+    // Remove the listener that called this function.
+    this._connectionController.removeEventListener(
+      DataServiceEventTypes.CONNECTIONS_DID_CHANGE,
+      this.createTreeView
+    );
 
-    this._treeController.activateTreeViewEventHandlers(this._treeView);
+    if (!this._treeView) {
+      this._treeView = vscode.window.createTreeView('mongoDB', {
+        treeDataProvider: this._treeController,
+      });
+
+      this._treeController.activateTreeViewEventHandlers(this._treeView);
+    }
+  };
+
+  activateTreeView(): void {
+    // Listen for a change in connections to occur before we create the tree
+    // so that we show the `viewsWelcome` before any connections are added.
+    this._connectionController.addEventListener(
+      DataServiceEventTypes.CONNECTIONS_DID_CHANGE,
+      this.createTreeView
+    );
   }
 
   deactivate(): void {

src/explorer/explorerTreeController.ts

@@ -14,7 +14,8 @@ import { DOCUMENT_LIST_ITEM, CollectionTypes } from './documentListTreeItem';
 
 const log = createLogger('explorer controller');
 
-export default class ExplorerTreeController implements vscode.TreeDataProvider<vscode.TreeItem> {
+export default class ExplorerTreeController
+implements vscode.TreeDataProvider<vscode.TreeItem> {
   private _connectionController: ConnectionController;
   private _mdbConnectionsTreeItem: MDBConnectionsTreeItem;
 

src/mdbExtensionController.ts

@@ -74,8 +74,8 @@ export default class MDBExtensionController implements vscode.Disposable {
   }
 
   activate(): void {
+    this._explorerController.activateTreeView();
     this._connectionController.loadSavedConnections();
-    this._explorerController.createTreeView();
     this._telemetryController.activate();
     this._languageServerController.activate();
 

src/test/suite/connectionController.test.ts

@@ -1,6 +1,6 @@
 import * as assert from 'assert';
 import * as vscode from 'vscode';
-import { afterEach } from 'mocha';
+import { afterEach, beforeEach } from 'mocha';
 import * as sinon from 'sinon';
 import Connection = require('mongodb-connection-model/lib/model');
 
@@ -26,6 +26,11 @@ suite('Connection Controller Test Suite', () => {
   const mockExtensionContext = new TestExtensionContext();
   const mockStorageController = new StorageController(mockExtensionContext);
 
+  beforeEach(() => {
+    // Here we stub the showInformationMessage process because it is too much
+    // for the render process and leads to crashes while testing.
+    sinon.replace(vscode.window, 'showInformationMessage', sinon.stub());
+  });
   afterEach(() => {
     // Reset our mock extension's state.
     mockExtensionContext._workspaceState = {};
@@ -68,7 +73,11 @@ suite('Connection Controller Test Suite', () => {
         );
         const dataService = testConnectionController.getActiveDataService();
         assert(dataService !== null);
-        assert(testConnectionController._activeConnectionModel?.appname.startsWith('mongodb-vscode'));
+        assert(
+          testConnectionController._activeConnectionModel?.appname.startsWith(
+            'mongodb-vscode'
+          )
+        );
         assert(testConnectionController.isCurrentlyConnected());
       })
       .then(done, done);
@@ -484,7 +493,7 @@ suite('Connection Controller Test Suite', () => {
     assert(
       Object.keys(connections).length === 4,
       `Expected 4 connection configurations found ${
-      Object.keys(connections).length
+        Object.keys(connections).length
       }`
     );
     assert(
@@ -493,7 +502,7 @@ suite('Connection Controller Test Suite', () => {
     );
     assert(
       Object.keys(connections).includes('testWorkspaceConnectionModel2') ===
-      true,
+        true,
       "Expected connection configurations to include 'testWorkspaceConnectionModel2'"
     );
     assert(
@@ -502,7 +511,7 @@ suite('Connection Controller Test Suite', () => {
     );
     assert(
       connections.testGlobalConnectionModel2.driverUrl ===
-      'testGlobalConnectionModel2DriverUrl',
+        'testGlobalConnectionModel2DriverUrl',
       "Expected loaded connection to include driver url 'testGlobalConnectionModel2DriverUrl'"
     );
     assert(
@@ -540,7 +549,7 @@ suite('Connection Controller Test Suite', () => {
     assert(
       Object.keys(globalStoreConnections).length === 1,
       `Expected global store connections to have 1 connection found ${
-      Object.keys(globalStoreConnections).length
+        Object.keys(globalStoreConnections).length
       }`
     );
     const id = Object.keys(globalStoreConnections)[0];
@@ -588,7 +597,7 @@ suite('Connection Controller Test Suite', () => {
     assert(
       Object.keys(workspaceStoreConnections).length === 1,
       `Expected workspace store connections to have 1 connection found ${
-      Object.keys(workspaceStoreConnections).length
+        Object.keys(workspaceStoreConnections).length
       }`
     );
     const id = Object.keys(workspaceStoreConnections)[0];
@@ -669,7 +678,7 @@ suite('Connection Controller Test Suite', () => {
             assert(
               Object.keys(workspaceStoreConnections).length === 1,
               `Expected workspace store connections to have 1 connection found ${
-              Object.keys(workspaceStoreConnections).length
+                Object.keys(workspaceStoreConnections).length
               }`
             );
 
@@ -687,7 +696,7 @@ suite('Connection Controller Test Suite', () => {
                 assert(
                   testConnectionController.getSavedConnections().length === 1,
                   `Expected 1 connection config, found ${
-                  testConnectionController.getSavedConnections().length
+                    testConnectionController.getSavedConnections().length
                   }.`
                 );
                 const id = testConnectionController.getSavedConnections()[0].id;
@@ -839,7 +848,7 @@ suite('Connection Controller Test Suite', () => {
               assert(
                 Object.keys(workspaceStoreConnections).length === 1,
                 `Expected workspace store connections to have 1 connection found ${
-                Object.keys(workspaceStoreConnections).length
+                  Object.keys(workspaceStoreConnections).length
                 }`
               );
 
@@ -855,7 +864,7 @@ suite('Connection Controller Test Suite', () => {
               assert(
                 Object.keys(postWorkspaceStoreConnections).length === 0,
                 `Expected workspace store connections to have 0 connections found ${
-                Object.keys(postWorkspaceStoreConnections).length
+                  Object.keys(postWorkspaceStoreConnections).length
                 }`
               );
             })
@@ -889,7 +898,7 @@ suite('Connection Controller Test Suite', () => {
     assert(
       Object.keys(globalStoreConnections).length === 1,
       `Expected workspace store connections to have 1 connection found ${
-      Object.keys(globalStoreConnections).length
+        Object.keys(globalStoreConnections).length
       }`
     );
 
@@ -903,7 +912,7 @@ suite('Connection Controller Test Suite', () => {
     assert(
       Object.keys(postGlobalStoreConnections).length === 0,
       `Expected global store connections to have 0 connections found ${
-      Object.keys(postGlobalStoreConnections).length
+        Object.keys(postGlobalStoreConnections).length
       }`
     );
   });
@@ -939,7 +948,7 @@ suite('Connection Controller Test Suite', () => {
               assert(
                 Object.keys(workspaceStoreConnections).length === 1,
                 `Expected workspace store connections to have 1 connection found ${
-                Object.keys(workspaceStoreConnections).length
+                  Object.keys(workspaceStoreConnections).length
                 }`
               );
               const connectionId =
@@ -974,7 +983,7 @@ suite('Connection Controller Test Suite', () => {
                         testConnectionController.getSavedConnections()
                           .length === 1,
                         `Expected 1 connection config, found ${
-                        testConnectionController.getSavedConnections().length
+                          testConnectionController.getSavedConnections().length
                         }.`
                       );
                       const id = testConnectionController.getSavedConnections()[0]

src/test/suite/explorer/explorerController.test.ts

@@ -2,6 +2,7 @@ import * as assert from 'assert';
 import * as vscode from 'vscode';
 import { beforeEach, afterEach } from 'mocha';
 import Connection = require('mongodb-connection-model/lib/model');
+import * as sinon from 'sinon';
 
 import {
   DefaultSavingLocations,
@@ -34,6 +35,7 @@ suite('Explorer Controller Test Suite', () => {
       );
     // Reset our connections.
     mdbTestExtension.testExtensionController._connectionController.clearAllConnections();
+    sinon.restore();
   });
 
   test('should have a connections root', (done) => {
@@ -325,4 +327,36 @@ suite('Explorer Controller Test Suite', () => {
         });
       });
   });
+
+  test('tree view should be not created by default (shows welcome view)', () => {
+    const testExplorerController =
+      mdbTestExtension.testExtensionController._explorerController;
+
+    assert(testExplorerController.getTreeView() === undefined);
+  });
+
+  test('tree view should call create tree view after a "CONNECTIONS_DID_CHANGE" event', (done) => {
+    const testExplorerController =
+      mdbTestExtension.testExtensionController._explorerController;
+
+    testExplorerController.activateTreeView();
+
+    const treeControllerStub = sinon.stub().returns();
+    sinon.replace(
+      testExplorerController.getTreeController(),
+      'activateTreeViewEventHandlers',
+      treeControllerStub
+    );
+
+    const vscodeCreateTreeViewStub = sinon.stub().returns('');
+    sinon.replace(vscode.window, 'createTreeView', vscodeCreateTreeViewStub);
+
+    mdbTestExtension.testExtensionController._connectionController
+      .addNewConnectionStringAndConnect(TEST_DATABASE_URI)
+      .then(() => {
+        mdbTestExtension.testExtensionController._connectionController.disconnect();
+        assert(vscodeCreateTreeViewStub.called);
+      })
+      .then(done);
+  });
 });

src/test/suite/mdbExtensionController.test.ts

@@ -1,6 +1,6 @@
 import * as assert from 'assert';
 import * as vscode from 'vscode';
-import { afterEach } from 'mocha';
+import { afterEach, beforeEach } from 'mocha';
 import Connection = require('mongodb-connection-model/lib/model');
 const sinon = require('sinon');
 
@@ -22,6 +22,11 @@ import { StorageScope } from '../../storage/storageController';
 const testDatabaseURI = 'mongodb://localhost:27018';
 
 suite('MDBExtensionController Test Suite', () => {
+  beforeEach(() => {
+    // Here we stub the showInformationMessage process because it is too much
+    // for the render process and leads to crashes while testing.
+    sinon.replace(vscode.window, 'showInformationMessage', sinon.stub());
+  });
   afterEach(() => {
     sinon.restore();
   });