chore: Promisify connecting and model parsing, use constants for connect views (#248)

Author: Anemy

.babelrc

@@ -8,16 +8,18 @@
         "syntax-object-rest-spread",
         "transform-object-rest-spread",
         "transform-class-properties",
-        "syntax-dynamic-import"
+        "syntax-dynamic-import",
+        "babel-plugin-transform-runtime"
       ]
     }
   },
-  "presets": [ "react", ["env", { "modules": false }] ],
+  "presets": [ "react", ["env"] ],
   "plugins": [
     "react-hot-loader/babel",
     "syntax-object-rest-spread",
     "transform-object-rest-spread",
     "transform-class-properties",
-    "syntax-dynamic-import"
+    "syntax-dynamic-import",
+    "babel-plugin-transform-runtime"
   ]
 }

package-lock.json

@@ -16,10 +16,11 @@
     "prestart": "electron-rebuild --force --only keytar",
     "start": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.dev.config.js",
     "start:watch": "npm run clean && webpack --config ./config/webpack.watch.config.js",
-    "test": "cross-env NODE_ENV=test mocha-webpack \"./src/**/*.spec.js\"",
+    "test": "npm run test:mocha && npm run test:karma",
     "test:watch": "cross-env NODE_ENV=test mocha-webpack \"./src/**/*.spec.js\" --watch",
     "test:karma": "npm run prestart && cross-env NODE_ENV=test karma start",
-    "cover": "nyc npm run test",
+    "test:mocha": "cross-env NODE_ENV=test mocha-webpack \"./src/**/*.spec.js\"",
+    "cover": "nyc npm run test:mocha",
     "precheck": "npm run compile",
     "check": "mongodb-js-precommit './src/**/*{.js,.jsx}' './test/**/*.js' './electron/**/*.js' './config/**/*{.js,.jsx}'",
     "link-plugin": "./scripts/link.sh",
@@ -62,6 +63,7 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.5",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-minify": "^0.3.0",
     "babel-preset-react": "^6.24.1",
@@ -114,8 +116,8 @@
     "postcss-loader": "^3.0.0",
     "prop-types": "^15.5.8",
     "react": "^16.8.0",
-    "react-dom": "^16.8.0",
     "react-bootstrap": "^0.32.1",
+    "react-dom": "^16.8.0",
     "react-fontawesome": "^1.6.1",
     "react-hot-loader": "^4.1.0",
     "react-ios-switch": "^0.1.19",

package.json

@@ -11,6 +11,11 @@ import Help from './form/help';
 import IsFavoritePill from './form/is-favorite-pill';
 import ConfirmEditConnectionString from './modal/confirm-edit-connection-string';
 
+import {
+  CONNECTION_FORM_VIEW,
+  CONNECTION_STRING_VIEW
+} from '../constants/connection-views';
+
 import styles from './connect.less';
 
 class Connect extends React.Component {
@@ -56,7 +61,7 @@ class Connect extends React.Component {
    * @returns {React.Component}
    */
   renderConnectScreen() {
-    if (this.props.viewType === 'connectionString') {
+    if (this.props.viewType === CONNECTION_STRING_VIEW) {
       return <ConnectionString {...this.props} />;
     }
 
@@ -69,12 +74,15 @@ class Connect extends React.Component {
    * @returns {React.Component}
    */
   renderChangeViewLink() {
-    if (this.props.viewType === 'connectionString') {
+    if (this.props.viewType === CONNECTION_STRING_VIEW) {
       return (
         <div className={classnames(styles['change-view-link'])}>
           <a
             data-test-id="form-view-link"
-            onClick={this.onChangeViewClicked.bind(this, 'connectionForm')}
+            onClick={this.onChangeViewClicked.bind(
+              this,
+              CONNECTION_FORM_VIEW
+            )}
           >
             Fill in connection fields individually
           </a>
@@ -84,7 +92,7 @@ class Connect extends React.Component {
 
     return (
       <div className={classnames(styles['change-view-link'])}>
-        <a onClick={this.onChangeViewClicked.bind(this, 'connectionString')}>
+        <a onClick={this.onChangeViewClicked.bind(this, CONNECTION_STRING_VIEW)}>
           Paste connection string
         </a>
       </div>

src/components/connect.jsx

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 
 import Actions from '../../actions';
 import FormGroup from './form-group';
+import { CONNECTION_STRING_VIEW } from '../../constants/connection-views';
 
 import styles from '../connect.less';
 
@@ -171,7 +172,7 @@ class FormActions extends React.Component {
    * @returns {React.Component}
    */
   renderEditURI = () => {
-    if (this.props.viewType === 'connectionString') {
+    if (this.props.viewType === CONNECTION_STRING_VIEW) {
       return (
         <button
           type="submit"
@@ -194,7 +195,7 @@ class FormActions extends React.Component {
     if (
       this.props.isSavedConnection &&
       !this.props.hasUnsavedChanges &&
-      this.props.viewType === 'connectionString'
+      this.props.viewType === CONNECTION_STRING_VIEW
     ) {
       return (
         <button
@@ -243,7 +244,7 @@ class FormActions extends React.Component {
       colorStyle = styles['connection-message-container-error'];
     } else if (
       this.hasSyntaxError() &&
-      this.props.viewType === 'connectionString'
+      this.props.viewType === CONNECTION_STRING_VIEW
     ) {
       hasMessage = true;
       message = this.props.syntaxErrorMessage;

src/components/form/form-actions.jsx

@@ -0,0 +1,2 @@
+export const CONNECTION_FORM_VIEW = 'connectionForm';
+export const CONNECTION_STRING_VIEW = 'connectionString';

src/constants/connection-views.js

@@ -3,6 +3,11 @@
 import React from 'react';
 import Actions from '../actions';
 
+import {
+  CONNECTION_FORM_VIEW,
+  CONNECTION_STRING_VIEW
+} from '../constants/connection-views';
+
 /**
  * Visits help page.
  *
@@ -82,15 +87,15 @@ const createParagraph = (contect) => React.createElement(
  * Components for help items depending on viewType.
  */
 export const HelpItems = {
-  'connectionForm': [
+  [CONNECTION_FORM_VIEW]: [
     {
       title: 'How do I find my username and password?',
       body: createParagraph([
         'If your mongod instance has authentication set up, you\'ll need the credentials of the MongoDB user that is configured on the project.'
       ])
     }
   ],
-  'connectionString': [
+  [CONNECTION_STRING_VIEW]: [
     {
       title: 'How do I find my connection string in Atlas?',
       body: [