VSCODE-73: Add connect with connection string to connect form (#61)

Author: Anemy

src/test/suite/views/webviewController.test.ts

@@ -104,7 +104,7 @@ suite('Connect Form View Test Suite', () => {
         assert(testConnectionController.isCurrentlyConnected());
         assert(
           testConnectionController.getActiveConnectionName() ===
-          'localhost:27018'
+            'localhost:27018'
         );
         assert(
           testConnectionController.getActiveConnectionModel()?.port === 27018
@@ -221,7 +221,6 @@ suite('Connect Form View Test Suite', () => {
     });
   });
 
-
   test('web view sends an unsuccessful connect result on an unsuccessful connection', (done) => {
     const testExtensionContext = new TestExtensionContext();
     const testStorageController = new StorageController(testExtensionContext);
@@ -380,4 +379,53 @@ suite('Connect Form View Test Suite', () => {
       action: 'file_action'
     });
   });
+
+  test('web view runs the "connectWithURI" command when open connection string input is recieved', (done) => {
+    const testExtensionContext = new TestExtensionContext();
+    const testStorageController = new StorageController(testExtensionContext);
+
+    const testConnectionController = new ConnectionController(
+      new StatusView(testExtensionContext),
+      testStorageController
+    );
+
+    let messageRecieved;
+    const fakeWebview = {
+      html: '',
+      onDidReceiveMessage: (callback): void => {
+        messageRecieved = callback;
+      }
+    };
+
+    const fakeVSCodeExecuteCommand = sinon.fake();
+    sinon.replace(vscode.commands, 'executeCommand', fakeVSCodeExecuteCommand);
+
+    const fakeVSCodeCreateWebviewPanel = sinon.fake.returns({
+      webview: fakeWebview
+    });
+    sinon.replace(
+      vscode.window,
+      'createWebviewPanel',
+      fakeVSCodeCreateWebviewPanel
+    );
+
+    const testWebviewController = new WebviewController(
+      testConnectionController
+    );
+
+    testWebviewController.showConnectForm(
+      mdbTestExtension.testExtensionContext
+    );
+
+    messageRecieved({
+      command: MESSAGE_TYPES.OPEN_CONNECTION_STRING_INPUT
+    });
+
+    setTimeout(() => {
+      assert(fakeVSCodeExecuteCommand.called);
+      assert(fakeVSCodeExecuteCommand.firstArg === 'mdb.connectWithURI');
+
+      done();
+    }, 50);
+  });
 });

src/views/webview-app/components/connect-form/connection-form.tsx

@@ -2,7 +2,11 @@ import classnames from 'classnames';
 import * as React from 'react';
 import { connect } from 'react-redux';
 
-import { ActionTypes, ConnectionFormChangedAction } from '../../store/actions';
+import {
+  ActionTypes,
+  ConnectionFormChangedAction,
+  OpenConnectionStringInputAction
+} from '../../store/actions';
 import FormGroup from './form-group';
 import HostInput from './host/host-input';
 import PortInput from './host/port-input';
@@ -31,13 +35,18 @@ type stateProps = {
 
 type dispatchProps = {
   onConnectionFormChanged: () => void;
+  onOpenConnectionStringInput: () => void;
 };
 
 type props = stateProps & dispatchProps;
 
 class ConnectionForm extends React.Component<props> {
   static displayName = 'ConnectionForm';
 
+  onConnectWithConnectionStringClicked = (): void => {
+    this.props.onOpenConnectionStringInput();
+  };
+
   /**
    * Renders a port input.
    *
@@ -136,6 +145,12 @@ class ConnectionForm extends React.Component<props> {
         className={classnames(styles['connect-form'])}
       >
         <h1>Connect to MongoDB</h1>
+        <div>
+          Enter your connection details below, or{' '}
+          <a href="#" onClick={this.onConnectWithConnectionStringClicked}>
+            connect with a connection string
+          </a>
+        </div>
         <div className={classnames(styles.fields)}>
           {this.renderHostnameArea()}
           {this.renderConnectionOptionsArea()}
@@ -170,6 +185,9 @@ const mapDispatchToProps: dispatchProps = {
   // Resets URL validation if form was changed.
   onConnectionFormChanged: (): ConnectionFormChangedAction => ({
     type: ActionTypes.CONNECTION_FORM_CHANGED
+  }),
+  onOpenConnectionStringInput: (): OpenConnectionStringInputAction => ({
+    type: ActionTypes.OPEN_CONNECTION_STRING_INPUT
   })
 };
 

src/views/webview-app/extension-app-message-constants.ts

@@ -3,6 +3,7 @@ import { FilePickerActionTypes } from './store/actions';
 export enum MESSAGE_TYPES {
   CONNECT = 'CONNECT',
   CONNECT_RESULT = 'CONNECT_RESULT',
+  OPEN_CONNECTION_STRING_INPUT = 'OPEN_CONNECTION_STRING_INPUT',
   OPEN_FILE_PICKER = 'OPEN_FILE_PICKER',
   FILE_PICKER_RESULTS = 'FILE_PICKER_RESULTS'
 }
@@ -23,6 +24,10 @@ export interface ConnectResultsMessage extends BasicWebviewMessage {
   connectionMessage: string;
 }
 
+export interface OpenConnectionStringInputMessage extends BasicWebviewMessage {
+  command: MESSAGE_TYPES.OPEN_CONNECTION_STRING_INPUT;
+}
+
 // Note: In the app this is tightly coupled with 'externals.ts'.
 export interface OpenFilePickerMessage extends BasicWebviewMessage {
   command: MESSAGE_TYPES.OPEN_FILE_PICKER;

src/views/webview-app/externals.ts

@@ -13,13 +13,20 @@ interface ConnectMessage extends BasicWebviewMessage {
   connectionModel: object;
 }
 
+interface OpenConnectionStringInputMessage extends BasicWebviewMessage {
+  command: 'OPEN_CONNECTION_STRING_INPUT';
+}
+
 interface FilePickerMessage {
   command: 'OPEN_FILE_PICKER';
   action: string;
   multi: boolean;
 }
 
-type WebviewMessage = ConnectMessage | FilePickerMessage;
+type WebviewMessage =
+  | ConnectMessage
+  | FilePickerMessage
+  | OpenConnectionStringInputMessage;
 
 interface VSCodeApi {
   postMessage: (message: WebviewMessage) => void;

src/views/webview-app/store/actions.ts

@@ -18,6 +18,7 @@ export enum ActionTypes {
   ON_CHANGE_SSL_CA = 'ON_CHANGE_SSL_CA',
   ON_CHANGE_SSL_CERT = 'ON_CHANGE_SSL_CERT',
   ON_CHANGE_SSL_KEY = 'ON_CHANGE_SSL_KEY',
+  OPEN_CONNECTION_STRING_INPUT = 'OPEN_CONNECTION_STRING_INPUT',
   PASSWORD_CHANGED = 'PASSWORD_CHANGED',
   PORT_CHANGED = 'PORT_CHANGED',
   READ_PREFERENCE_CHANGED = 'READ_PREFERENCE_CHANGED',
@@ -125,6 +126,10 @@ export interface OnChangeSSLKeyAction extends BaseAction {
   type: ActionTypes.ON_CHANGE_SSL_KEY;
 }
 
+export interface OpenConnectionStringInputAction extends BaseAction {
+  type: ActionTypes.OPEN_CONNECTION_STRING_INPUT;
+}
+
 export interface PasswordChangedAction extends BaseAction {
   type: ActionTypes.PASSWORD_CHANGED;
   mongodbPassword: string;
@@ -236,6 +241,7 @@ export type Actions =
   | OnChangeSSLCAAction
   | OnChangeSSLCertAction
   | OnChangeSSLKeyAction
+  | OpenConnectionStringInputAction
   | PasswordChangedAction
   | PortChangedAction
   | ReadPreferenceChangedAction