VSCODE-74: Add SSL/TLS to Connect Form Webview (#55)

Author: Anemy

images/leaf.svg

@@ -455,13 +455,13 @@
     }
   },
   "dependencies": {
-    "@mongosh/browser-runtime-electron": "0.0.1-alpha.10",
-    "@mongosh/service-provider-server": "0.0.1-alpha.10",
-    "analytics-node": "^3.4.0-beta.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/react-fontawesome": "^0.1.9",
     "@leafygreen-ui/toggle": "^3.0.0",
+    "@mongosh/browser-runtime-electron": "0.0.1-alpha.10",
+    "@mongosh/service-provider-server": "0.0.1-alpha.10",
+    "analytics-node": "^3.4.0-beta.1",
     "bson": "^4.0.3",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",

package.json

@@ -8,7 +8,7 @@ const { name, version } = require('../package.json');
 import { ConnectionModelType } from './connectionModelType';
 import { DataServiceType } from './dataServiceType';
 import { createLogger } from './logging';
-import { StatusView, ConnectFormView } from './views';
+import { StatusView } from './views';
 import { EventEmitter } from 'events';
 import { StorageController, StorageVariables } from './storage';
 import { StorageScope, SavedConnection } from './storage/storageController';
@@ -54,10 +54,16 @@ export default class ConnectionController {
   ): void {
     let loadedSavedConnection: SavedConnection;
     try {
+      if (!savedConnection.connectionModel) {
+        // Ignore empty connections.
+        return;
+      }
+
       loadedSavedConnection = {
         id: connectionId,
-        name: savedConnection.name,
         driverUrl: savedConnection.driverUrl,
+        name: savedConnection.name,
+        connectionModel: savedConnection.connectionModel,
         storageLocation: savedConnection.storageLocation
       };
     } catch (error) {
@@ -101,18 +107,6 @@ export default class ConnectionController {
     }
   }
 
-  public addMongoDBConnection(
-    context: vscode.ExtensionContext
-  ): Promise<boolean> {
-    log.info('mdb.connect command called.');
-
-    const connectWebView = new ConnectFormView();
-    return connectWebView.showConnectForm(
-      context,
-      this.addNewConnectionAndConnect
-    );
-  }
-
   public async connectWithURI(): Promise<boolean> {
     log.info('connectWithURI command called');
 
@@ -140,16 +134,19 @@ export default class ConnectionController {
     }
 
     return new Promise((resolve) => {
-      this.addNewConnectionAndConnect(connectionString).then(resolve, (err) => {
-        vscode.window.showErrorMessage(err.message);
-        resolve(false);
-      });
+      this.addNewConnectionStringAndConnect(connectionString).then(
+        resolve,
+        (err) => {
+          vscode.window.showErrorMessage(err.message);
+          resolve(false);
+        }
+      );
     });
   }
 
   // Resolves true when the connection is successfully added.
   // The connection can fail to connect but be successfully added.
-  public addNewConnectionAndConnect = (
+  public addNewConnectionStringAndConnect = (
     connectionString: string
   ): Promise<boolean> => {
     log.info('Trying to connect to a new connection configuration');
@@ -158,49 +155,71 @@ export default class ConnectionController {
       Connection.from(
         connectionString,
         (error: Error | undefined, newConnectionModel: ConnectionModelType) => {
-          if (error && !newConnectionModel) {
-            return reject(new Error(`Unable to load connection: ${error}`));
+          if (error) {
+            return reject(new Error(`Unable to create connection: ${error}`));
           }
 
-          const { driverUrl, instanceId } = newConnectionModel.getAttributes({
-            derived: true
-          });
+          return this.saveNewConnectionAndConnect(newConnectionModel).then(
+            resolve,
+            reject
+          );
+        }
+      );
+    });
+  };
+
+  public parseNewConnectionAndConnect = (
+    newConnectionModel
+  ): Promise<boolean> => {
+    // Here we re-parse the connection, as it can be loaded from storage or
+    // passed by the connection model without the class methods.
+    let connectionModel;
+
+    try {
+      connectionModel = new Connection(newConnectionModel);
+    } catch (error) {
+      vscode.window.showErrorMessage(`Unable to load connection: ${error}`);
+      return Promise.reject(new Error(`Unable to load connection: ${error}`));
+    }
 
-          const newConnection: SavedConnection = {
-            id: uuidv4(),
-            name: instanceId,
-            driverUrl,
-            // To begin we just store it on the session, the storage controller
-            // handles changing this based on user preference.
-            storageLocation: StorageScope.NONE
-          };
-          this._savedConnections[newConnection.id] = newConnection;
+    return this.saveNewConnectionAndConnect(connectionModel);
+  };
 
-          this._storageController.storeNewConnection(newConnection);
+  public saveNewConnectionAndConnect = (
+    connectionModel: ConnectionModelType
+  ): Promise<boolean> => {
+    const { driverUrl, instanceId } = connectionModel.getAttributes({
+      derived: true
+    });
 
-          if (error) {
-            return reject(new Error(`Unable to connect: ${error}`));
-          }
+    const newConnection: SavedConnection = {
+      id: uuidv4(),
+      name: instanceId,
+      connectionModel,
+      driverUrl,
+      // To begin we just store it on the session, the storage controller
+      // handles changing this based on user preference.
+      storageLocation: StorageScope.NONE
+    };
+    this._savedConnections[newConnection.id] = newConnection;
 
-          this.connect(newConnection.id, newConnectionModel).then(
-            (connectSuccess) => {
-              if (!connectSuccess) {
-                return resolve(false);
-              }
+    this._storageController.storeNewConnection(newConnection);
 
-              resolve(true);
-            },
-            reject
-          );
+    return new Promise((resolve, reject) => {
+      this.connect(newConnection.id, connectionModel).then((connectSuccess) => {
+        if (!connectSuccess) {
+          return resolve(false);
         }
-      );
+
+        resolve(true);
+      }, reject);
     });
   };
 
-  public async connect(
+  public connect = async (
     connectionId: string,
     connectionModel: ConnectionModelType
-  ): Promise<boolean> {
+  ): Promise<boolean> => {
     log.info(
       'Connect called to connect to instance:',
       connectionModel.getAttributes({
@@ -258,35 +277,39 @@ export default class ConnectionController {
         return resolve(true);
       });
     });
-  }
+  };
 
-  public async connectWithConnectionId(connectionId: string): Promise<boolean> {
+  public connectWithConnectionId = (connectionId: string): Promise<boolean> => {
     if (this._savedConnections[connectionId]) {
+      let connectionModel;
+
+      try {
+        const savedConnectionModel = this._savedConnections[connectionId]
+          .connectionModel;
+        // Here we rebuild the connection model to ensure it's up to date and
+        // contains the connection model class methods (not just attributes).
+        connectionModel = new Connection(
+          savedConnectionModel.getAttributes
+            ? savedConnectionModel.getAttributes({ props: true })
+            : savedConnectionModel
+        );
+      } catch (error) {
+        vscode.window.showErrorMessage(`Unable to load connection: ${error}`);
+        return Promise.resolve(false);
+      }
       return new Promise((resolve) => {
-        Connection.from(
-          this._savedConnections[connectionId].driverUrl,
-          (error: Error | undefined, connectionModel: ConnectionModelType) => {
-            if (error && !connectionModel) {
-              vscode.window.showErrorMessage(
-                `Unable to load connection: ${error}`
-              );
-              return resolve(false);
-            }
-
-            return this.connect(connectionId, connectionModel).then(
-              resolve,
-              (err: Error) => {
-                vscode.window.showErrorMessage(err.message);
-                return resolve(false);
-              }
-            );
+        this.connect(connectionId, connectionModel).then(
+          resolve,
+          (err: Error) => {
+            vscode.window.showErrorMessage(err.message);
+            return resolve(false);
           }
         );
       });
     }
 
     return Promise.reject(new Error('Connection not found.'));
-  }
+  };
 
   public disconnect(): Promise<boolean> {
     log.info(

src/connectionController.ts

@@ -5,6 +5,7 @@ type ConnectionAttributes = {
 
 export type ConnectionModelType = {
   appname: string;
+  port: number;
 
   getAttributes(options: object): ConnectionAttributes;
   disconnect(callback: (n: Error | undefined) => void): void;

src/connectionModelType.ts

@@ -141,7 +141,7 @@ export default class SchemaTreeItem extends vscode.TreeItem
             vscode.window.showErrorMessage(
               `Unable to list documents: ${findError}`
             );
-            return reject(`Unable to list documents: ${findError}`);
+            return reject(new Error(`Unable to list documents: ${findError}`));
           }
 
           if (!documents || documents.length === 0) {

src/explorer/schemaTreeItem.ts

@@ -17,6 +17,7 @@ import DatabaseTreeItem from './explorer/databaseTreeItem';
 import ConnectionTreeItem from './explorer/connectionTreeItem';
 import SchemaTreeItem from './explorer/schemaTreeItem';
 import DocumentTreeItem from './explorer/documentTreeItem';
+import WebviewController from './views/webviewController';
 
 const log = createLogger('commands');
 
@@ -32,6 +33,7 @@ export default class MDBExtensionController implements vscode.Disposable {
   _storageController: StorageController;
   _telemetryController: TelemetryController;
   _languageServerController: LanguageServerController;
+  _webviewController: WebviewController;
 
   constructor(
     context: vscode.ExtensionContext,
@@ -68,6 +70,7 @@ export default class MDBExtensionController implements vscode.Disposable {
       this._languageServerController,
       this._telemetryController
     );
+    this._webviewController = new WebviewController(this._connectionController);
   }
 
   activate(): void {
@@ -81,7 +84,7 @@ export default class MDBExtensionController implements vscode.Disposable {
     // Register our extension's commands. These are the event handlers and
     // control the functionality of our extension.
     this.registerCommand('mdb.connect', () =>
-      this._connectionController.addMongoDBConnection(this._context)
+      this._webviewController.showConnectForm(this._context)
     );
     this.registerCommand('mdb.connectWithURI', () =>
       this._connectionController.connectWithURI()
@@ -138,7 +141,7 @@ export default class MDBExtensionController implements vscode.Disposable {
 
   registerTreeViewCommands(): void {
     this.registerCommand('mdb.addConnection', () =>
-      this._connectionController.addMongoDBConnection(this._context)
+      this._webviewController.showConnectForm(this._context)
     );
     this.registerCommand('mdb.addConnectionWithURI', () =>
       this._connectionController.connectWithURI()