VSCODE-98: Add overview page (#178)

Author: Anemy

package.json

@@ -63,6 +63,7 @@
   "activationEvents": [
     "onCommand:mdb.connect",
     "onCommand:mdb.connectWithURI",
+    "onCommand:mdb.openOverviewPage",
     "onCommand:mdb.createPlayground",
     "onCommand:mdb.addConnection",
     "onCommand:mdb.addConnectionWithURI",
@@ -171,6 +172,10 @@
         "command": "mdb.removeConnection",
         "title": "MongoDB: Remove Connection..."
       },
+      {
+        "command": "mdb.openOverviewPage",
+        "title": "MongoDB: Open Overview Page"
+      },
       {
         "command": "mdb.openMongoDBShell",
         "title": "MongoDB: Launch MongoDB Shell"
@@ -195,6 +200,10 @@
         "command": "mdb.createNewPlaygroundFromViewAction",
         "title": "Create MongoDB Playground"
       },
+      {
+        "command": "mdb.createNewPlaygroundFromOverviewPage",
+        "title": "Create MongoDB Playground"
+      },
       {
         "command": "mdb.createNewPlaygroundFromPlaygroundExplorer",
         "title": "Create MongoDB Playground"
@@ -550,6 +559,10 @@
           "command": "mdb.createNewPlaygroundFromViewAction",
           "when": "false"
         },
+        {
+          "command": "mdb.createNewPlaygroundFromOverviewPage",
+          "when": "false"
+        },
         {
           "command": "mdb.createNewPlaygroundFromPlaygroundExplorer",
           "when": "false"

resources/fonts/AkzidGroStdBol.otf

@@ -16,6 +16,7 @@ Think RPC handlers.
 - `mdb.refresh`
 
 - `mdb.openMongoDBShell`
+- `mdb.openOverviewPage`
 
 ## General database commands
 
@@ -47,6 +48,7 @@ Think RPC handlers.
 - `mdb.runSelectedPlaygroundBlocks`
 - `mdb.runAllPlaygroundBlocks`
 - `mdb.createNewPlaygroundFromViewAction`
+- `mdb.createNewPlaygroundFromOverviewPage`
 
 ## Index commands
 

resources/fonts/AkzidGroStdReg.otf

@@ -110,6 +110,9 @@ export default class MDBExtensionController implements vscode.Disposable {
     this.registerCommand('mdb.connectWithURI', () =>
       this._connectionController.connectWithURI()
     );
+    this.registerCommand('mdb.openOverviewPage', () =>
+      this._webviewController.showOverviewPage(this._context)
+    );
 
     this.registerCommand('mdb.disconnect', () =>
       this._connectionController.disconnect()
@@ -131,6 +134,9 @@ export default class MDBExtensionController implements vscode.Disposable {
     this.registerCommand('mdb.createNewPlaygroundFromViewAction', () =>
       this._playgroundController.createPlayground()
     );
+    this.registerCommand('mdb.createNewPlaygroundFromOverviewPage', () =>
+      this._playgroundController.createPlayground()
+    );
     this.registerCommand('mdb.createNewPlaygroundFromPlaygroundExplorer', () =>
       this._playgroundController.createPlayground()
     );

src/commands/README.md

@@ -20,12 +20,14 @@ suite('Extension Test Suite', () => {
       // General / connection commands.
       'mdb.connect',
       'mdb.connectWithURI',
+      'mdb.openOverviewPage',
       'mdb.disconnect',
       'mdb.removeConnection',
       'mdb.openMongoDBShell',
       'mdb.createPlayground',
-      'mdb.createNewPlaygroundFromViewAction',
+      'mdb.createNewPlaygroundFromOverviewPage',
       'mdb.createNewPlaygroundFromPlaygroundExplorer',
+      'mdb.createNewPlaygroundFromViewAction',
 
       // Tree view commands.
       'mdb.addConnection',
@@ -53,16 +55,11 @@ suite('Extension Test Suite', () => {
     ];
 
     for (let i = 0; i < expectedCommands.length; i++) {
-      try {
-        assert.notEqual(
-          registeredCommands.indexOf(expectedCommands[i]),
-          -1,
-          `command ${expectedCommands[i]} not registered and was expected`
-        );
-      } catch (e) {
-        assert(false);
-        return;
-      }
+      assert.notEqual(
+        registeredCommands.indexOf(expectedCommands[i]),
+        -1,
+        `command ${expectedCommands[i]} not registered and was expected`
+      );
     }
   });
 });

src/mdbExtensionController.ts

@@ -7,11 +7,10 @@ import TelemetryController from '../../../telemetry/telemetryController';
 import ConnectionController from '../../../connectionController';
 import { StorageController } from '../../../storage';
 import WebviewController, {
-  getConnectWebviewContent,
-  getReactAppUri
+  getWebviewContent
 } from '../../../views/webviewController';
 import { StatusView } from '../../../views';
-import { MESSAGE_TYPES } from '../../../views/webview-app/extension-app-message-constants';
+import { MESSAGE_TYPES, WEBVIEW_VIEWS } from '../../../views/webview-app/extension-app-message-constants';
 import { mdbTestExtension } from '../stubbableMdbExtension';
 import { TestExtensionContext } from '../stubs';
 import { TEST_DATABASE_URI } from '../dbTestHelper';
@@ -82,8 +81,7 @@ suite('Connect Form View Test Suite', () => {
     };
 
     const extensionPath = mdbTestExtension.testExtensionContext.extensionPath;
-    const appUri = getReactAppUri(extensionPath, fakeWebview);
-    const htmlString = getConnectWebviewContent(appUri);
+    const htmlString = getWebviewContent(extensionPath, fakeWebview, WEBVIEW_VIEWS.CONNECT);
 
     assert(htmlString.includes('dist/webviewApp.js'));
 

src/test/suite/extension.test.ts

@@ -4,21 +4,28 @@ import { connect } from 'react-redux';
 
 import ConnectionForm from './connect-form/connection-form';
 import HelpPanel from './help-panel/help-panel';
+import OverviewPage from './overview-page/overview-page';
 import {
   ActionTypes,
   ConnectionEventOccuredAction,
   FilePickerActions,
   FilePickerActionTypes
 } from '../store/actions';
+import { AppState } from '../store/store';
 import {
   MESSAGE_TYPES,
   ConnectResultsMessage,
-  FilePickerResultsMessage
+  FilePickerResultsMessage,
+  WEBVIEW_VIEWS
 } from '../extension-app-message-constants';
 
 const styles = require('../connect.module.less');
 
-type props = {
+type StateProps = {
+  currentView: WEBVIEW_VIEWS;
+};
+
+type DispatchProps = {
   onConnectedEvent: (
     successfullyConnected: boolean,
     connectionMessage: string
@@ -29,7 +36,7 @@ type props = {
   ) => void;
 };
 
-class App extends React.Component<props> {
+class App extends React.Component<DispatchProps& StateProps> {
   componentDidMount(): void {
     window.addEventListener('message', (event) => {
       const message: ConnectResultsMessage | FilePickerResultsMessage =
@@ -54,16 +61,31 @@ class App extends React.Component<props> {
   }
 
   render(): React.ReactNode {
+    const { currentView } = this.props;
+
     return (
-      <div className={classnames(styles.page, styles.connect)}>
-        <ConnectionForm />
-        <HelpPanel />
+      <div className={styles.page}>
+        {currentView === WEBVIEW_VIEWS.CONNECT && (
+          <div className={styles.connect}>
+            <ConnectionForm />
+            <div className={classnames(styles['connect-form-help-panel'])}>
+              <HelpPanel />
+            </div>
+          </div>
+        )}
+        {currentView === WEBVIEW_VIEWS.OVERVIEW && <OverviewPage />}
       </div>
     );
   }
 }
 
-const mapDispatchToProps: props = {
+const mapStateToProps = (state: AppState): StateProps => {
+  return {
+    currentView: state.currentView
+  };
+};
+
+const mapDispatchToProps: DispatchProps = {
   onConnectedEvent: (
     successfullyConnected: boolean,
     connectionMessage: string
@@ -81,4 +103,4 @@ const mapDispatchToProps: props = {
   })
 };
 
-export default connect(null, mapDispatchToProps)(App);
+export default connect(mapStateToProps, mapDispatchToProps)(App);

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

@@ -13,7 +13,7 @@ import MongoDBAuth from './mongodb-authentication';
 import ScramSha256 from './scram-sha-256';
 import X509 from './x509';
 
-type dispatchProps = {
+type DispatchProps = {
   onAuthStrategyChanged: (authStrategy: AUTH_STRATEGIES) => void;
 };
 
@@ -30,7 +30,7 @@ type props = {
   mongodbPassword?: string;
   mongodbUsername?: string;
   x509Username?: string;
-} & dispatchProps;
+} & DispatchProps;
 
 class Authentication extends React.Component<props> {
   static displayName = 'Authentication';
@@ -139,7 +139,7 @@ class Authentication extends React.Component<props> {
   }
 }
 
-const mapDispatchToProps: dispatchProps = {
+const mapDispatchToProps: DispatchProps = {
   onAuthStrategyChanged: (newAuthStrategy): AuthStrategyChangedAction => ({
     type: ActionTypes.AUTH_STRATEGY_CHANGED,
     authStrategy: newAuthStrategy

src/views/webview-app/components/app.tsx

@@ -11,7 +11,7 @@ import FormInput from '../form-input';
 
 const styles = require('../../../connect.module.less');
 
-type dispatchProps = {
+type DispatchProps = {
   kerberosParametersChanged: (newParams: KerberosParameters) => void;
 };
 
@@ -21,7 +21,7 @@ type props = {
   kerberosPassword?: string;
   kerberosPrincipal?: string;
   kerberosServiceName?: string;
-} & dispatchProps;
+} & DispatchProps;
 
 /**
  * The kerberos auth role component.
@@ -165,7 +165,7 @@ class Kerberos extends React.Component<props> {
   }
 }
 
-const mapDispatchToProps: dispatchProps = {
+const mapDispatchToProps: DispatchProps = {
   kerberosParametersChanged: (
     newKerberosParams
   ): KerberosParametersChanged => ({