chore: Promisify connecting and model parsing, use constants for connect views

src/components/connect.jsx

@@ -11,6 +11,8 @@ import Help from './form/help';
 import IsFavoritePill from './form/is-favorite-pill';
 import ConfirmEditConnectionString from './modal/confirm-edit-connection-string';
 
+import { CONNECT_VIEWS } from '../stores';
+
 import styles from './connect.less';
 
 class Connect extends React.Component {
@@ -56,7 +58,7 @@ class Connect extends React.Component {
    * @returns {React.Component}
    */
   renderConnectScreen() {
-    if (this.props.viewType === 'connectionString') {
+    if (this.props.viewType === CONNECT_VIEWS.CONNECTION_STRING) {
       return <ConnectionString {...this.props} />;
     }
 
@@ -69,12 +71,15 @@ class Connect extends React.Component {
    * @returns {React.Component}
    */
   renderChangeViewLink() {
-    if (this.props.viewType === 'connectionString') {
+    if (this.props.viewType === CONNECT_VIEWS.CONNECTION_STRING) {
       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,
+              CONNECT_VIEWS.CONNECTION_FORM
+            )}
           >
             Fill in connection fields individually
           </a>
@@ -84,7 +89,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, CONNECT_VIEWS.CONNECTION_STRING)}>
           Paste connection string
         </a>
       </div>

src/components/form/form-actions.jsx

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 
 import Actions from '../../actions';
 import FormGroup from './form-group';
+import { CONNECT_VIEWS } from '../../stores';
 
 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 === CONNECT_VIEWS.CONNECTION_STRING) {
       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 === CONNECT_VIEWS.CONNECTION_STRING
     ) {
       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 === CONNECT_VIEWS.CONNECTION_STRING
     ) {
       hasMessage = true;
       message = this.props.syntaxErrorMessage;

src/helpers/help-items.js

@@ -3,6 +3,8 @@
 import React from 'react';
 import Actions from '../actions';
 
+import { CONNECT_VIEWS } from '../stores';
+
 /**
  * Visits help page.
  *
@@ -82,15 +84,15 @@ const createParagraph = (contect) => React.createElement(
  * Components for help items depending on viewType.
  */
 export const HelpItems = {
-  'connectionForm': [
+  [CONNECT_VIEWS.CONNECTION_FORM]: [
     {
       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': [
+  [CONNECT_VIEWS.CONNECTION_STRING]: [
     {
       title: 'How do I find my connection string in Atlas?',
       body: [