feat: Add cancel connection attempt COMPASS-4393 (#257)

Author: Anemy

.github/workflows/run-tests.yml

@@ -10,6 +10,12 @@ jobs:
     name: Check and Test
     runs-on: ubuntu-20.04
 
+    services:
+      mongodb:
+        image: mongo:4.2.3
+        ports:
+          - 27018:27017
+
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1

package-lock.json

@@ -16,6 +16,8 @@
     "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",
+    "pretest": "cross-env MONGODB_VERSION=4.2.3 mongodb-runner start --port=27018",
+    "posttest": "mongodb-runner stop --port=27018",
     "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",
@@ -109,6 +111,7 @@
     "mongodb-connection-model": "^19.0.2",
     "mongodb-data-service": "^18.2.1",
     "mongodb-js-precommit": "^2.0.0",
+    "mongodb-runner": "^4.8.1",
     "mongodb-shell-to-url": "^0.1.0",
     "node-loader": "^0.6.0",
     "nyc": "^15.0.0",
@@ -140,6 +143,8 @@
     "webpack-sources": "1.4.3"
   },
   "dependencies": {
+    "@leafygreen-ui/button": "^10.0.1",
+    "@leafygreen-ui/typography": "^7.3.2",
     "lodash": "^4.17.15"
   }
 }

package.json

@@ -7,6 +7,7 @@ const Actions = Reflux.createActions({
   validateConnectionString: { sync: true },
   onAuthSourceChanged: { sync: true },
   onAuthStrategyChanged: { sync: true },
+  onCancelConnectionAttemptClicked: { sync: true },
   onChangeViewClicked: { sync: true },
   onConnectionFormChanged: { sync: true },
   onConnectClicked: { sync: true },

src/actions/index.js

@@ -10,20 +10,22 @@ import ConnectionString from './form/connection-string';
 import Help from './form/help';
 import IsFavoritePill from './form/is-favorite-pill';
 import ConfirmEditConnectionString from './modal/confirm-edit-connection-string';
-
+import Connecting from './modal/connecting';
 import {
   CONNECTION_FORM_VIEW,
   CONNECTION_STRING_VIEW
 } from '../constants/connection-views';
-
 import styles from './connect.less';
 
 class Connect extends React.Component {
   static displayName = 'Connect';
 
   static propTypes = {
-    currentConnection: PropTypes.object,
+    connectingStatusText: PropTypes.string,
     connections: PropTypes.object,
+    currentConnection: PropTypes.object,
+    currentConnectionAttempt: PropTypes.object,
+    isConnected: PropTypes.bool,
     viewType: PropTypes.string,
     isModalVisible: PropTypes.bool,
     isMessageVisible: PropTypes.bool,
@@ -149,6 +151,10 @@ class Connect extends React.Component {
             </div>
             <Help {...this.props} />
           </div>
+          <Connecting
+            connectingStatusText={this.props.connectingStatusText}
+            currentConnectionAttempt={this.props.currentConnectionAttempt}
+          />
           <ConfirmEditConnectionString
             isEditURIConfirm={this.props.isEditURIConfirm}
           />

src/assets/svg/connecting-illustration.svg

@@ -1,7 +1,6 @@
 @import './sidebar/sidebar.less';
 
 @compass-sidebar-secondary-text-color: @gray6;
-@compass-sidebar-atlas-background-color: @gray1;
 @compass-sidebar-atlas-background-color: lighten(hsl(204, 29%, 18%), 5%);
 
 .page {
@@ -508,15 +507,30 @@ label {
 
   .buttons {
     margin: 0 25px 10px;
-    overflow: auto;
     display: flex;
     justify-content: flex-end;
 
-    button {
+    .button {
       margin-left: 5px;
     }
   }
 
+  .btn-loading {
+    border: 2px solid transparent;
+    border-top: 2px solid @green2;
+    border-radius: 50%;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    width: 14px;
+    height: 14px;
+    background: none;
+    outline: none;
+    margin-right: 5px;
+
+    animation: connect-btn-loader-spin 500ms linear infinite;
+  }
+
   .disabled-uri {
     background-color: #e9eeec !important;
     box-shadow: none !important;
@@ -621,6 +635,90 @@ label {
   }
 }
 
+.connecting-modal-backdrop {
+  background-color: transparent !important;
+}
+
+.connecting-background {
+  position: fixed;
+  z-index: 500;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+  .connecting-background-gradient {
+    opacity: 0.9;
+    animation: opacityFadeIn 0.2s ease-out;
+  }
+}
+
+@keyframes opacityFadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0.9;
+  }
+}
+
+.connecting-modal-content {
+  text-align: center;
+  padding: 24px;
+
+  .connecting-modal-status {
+    margin-top: 24px;
+    font-weight: bold;
+  }
+
+  .connecting-modal-animation {
+    margin-top: 24px;
+    text-align: center;
+
+    .connecting-compass-animation-svg {
+      width: 70px;
+      height: auto;
+    }
+
+    .connecting-compass-shadow {
+      fill:#136149;
+      opacity:0.12;
+    }
+    .connecting-compass-shadow-stroke {
+      stroke:#136149;
+      stroke-linecap:round;
+      stroke-linejoin:round;
+      fill: none;
+      opacity:0.12;
+    }
+
+    .connecting-compass-circle-1 {
+      fill:none;
+      stroke:#136149;
+      stroke-linecap:round;
+      stroke-linejoin:round;
+    }
+    .connecting-compass-circle-2 {
+      fill:#f7a76f;
+    }
+    .connecting-compass-circle-3 {
+      fill:#fef7e3;
+      opacity:0.85;
+    }
+    .connecting-compass-arrow-1 {
+      fill:#f9d3c5;
+    }
+    .connecting-compass-arrow-2 {
+      fill:#09804c;
+    }
+  }
+
+  .connecting-modal-cancel-btn {
+    margin-top: 24px;
+  }
+}
+
 .connect-sidebar-connections::-webkit-scrollbar-track {
   background-color: rgba(0, 0, 0, 0.12);
   border-bottom-left-radius: 3px;
@@ -710,6 +808,10 @@ label {
   }
 }
 
+.confirm-edit-modal-button {
+  margin-left: 5px;
+}
+
 .favorite-modal {
   width: 500px;
   padding-left: 40px;
@@ -887,3 +989,8 @@ label {
       0 0 4px rgba(88, 151, 251, 1);
   }
 }
+
+@keyframes connect-btn-loader-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

src/components/connect.jsx

@@ -21,6 +21,7 @@ class ConnectionForm extends React.Component {
 
   static propTypes = {
     currentConnection: PropTypes.object.isRequired,
+    currentConnectionAttempt: PropTypes.object,
     isValid: PropTypes.bool.isRequired,
     isHostChanged: PropTypes.bool,
     isPortChanged: PropTypes.bool
@@ -121,7 +122,10 @@ class ConnectionForm extends React.Component {
                   hostname={this.props.currentConnection.hostname}
                   isHostChanged={this.props.isHostChanged} />
                 {this.renderPort()}
-                <SRVInput isSrvRecord={this.props.currentConnection.isSrvRecord} />
+                <SRVInput
+                  currentConnectionAttempt={this.props.currentConnectionAttempt}
+                  isSrvRecord={this.props.currentConnection.isSrvRecord}
+                />
               </FormGroup>
               <Authentication
                 currentConnection={this.props.currentConnection}
@@ -157,13 +161,16 @@ class ConnectionForm extends React.Component {
     return (
       <form
         onChange={this.onConnectionFormChanged.bind(this)}
-        className={classnames(styles['connect-form'])} >
-        <div className={classnames(styles.tabs)}>
-          <div className={classnames(styles['tabs-container'])}>
-            {this.renderTabs()}
-            {this.renderView()}
+        className={classnames(styles['connect-form'])}
+      >
+        <fieldset disabled={!!this.props.currentConnectionAttempt}>
+          <div className={classnames(styles.tabs)}>
+            <div className={classnames(styles['tabs-container'])}>
+              {this.renderTabs()}
+              {this.renderView()}
+            </div>
           </div>
-        </div>
+        </fieldset>
         <FormActions {...this.props } />
       </form>
     );

src/components/connect.less

@@ -84,6 +84,50 @@ describe('ConnectionForm [Component]', () => {
         expect(authentication.prop('currentConnection')).to.deep.equal(connection);
         expect(authentication.prop('isValid')).to.equal(true);
       });
+
+      it('has the form fieldset enabled', () => {
+        expect(component.find('fieldset[disabled=true]')).to.be.not.present();
+        expect(component.find('fieldset[disabled=false]')).to.be.present();
+      });
+    });
+
+    context('when it is currently connecting', () => {
+      const appRegistry = new AppRegistry();
+      const AUTH_ROLE = {
+        name: 'MONGODB',
+        component: TestComponent,
+        selectOption: { 'MONGODB': 'Username / Password' }
+      };
+
+      before(() => {
+        global.hadronApp = hadronApp;
+        global.hadronApp.appRegistry = appRegistry;
+        global.hadronApp.appRegistry.registerRole('Connect.AuthStrategy', AUTH_ROLE);
+      });
+
+      after(() => {
+        global.hadronApp.appRegistry.deregisterRole('Connect.AuthStrategy', AUTH_ROLE);
+      });
+
+      it('disables the form', () => {
+        const component = mount(
+          <ConnectionForm
+            currentConnectionAttempt
+            currentConnection={{
+              authStrategy: 'MONGODB',
+              isSrvRecord: false,
+              readPreference: 'primaryPreferred',
+              attributes: { hostname: 'localhost' }
+            }}
+            isHostChanged={false}
+            isPortChanged={false}
+            isValid
+          />
+        );
+
+        expect(component.find('fieldset[disabled=true]')).to.be.present();
+        expect(component.find('fieldset[disabled=false]')).to.not.be.present();
+      });
     });
 
     context('when SRV input was toggled', () => {

src/components/form/connection-form.jsx

@@ -16,6 +16,7 @@ class ConnectionString extends React.Component {
     customUrl: PropTypes.string,
     isValid: PropTypes.bool,
     isConnected: PropTypes.bool,
+    currentConnectionAttempt: PropTypes.object,
     errorMessage: PropTypes.string,
     syntaxErrorMessage: PropTypes.string,
     hasUnsavedChanges: PropTypes.bool,
@@ -30,23 +31,26 @@ class ConnectionString extends React.Component {
         data-test-id="connect-string"
         className={classnames(styles['connect-string'])}
       >
-        <FormGroup separator>
-          <ConnectionStringInput
-            customUrl={this.props.customUrl}
+        <fieldset disabled={!!this.props.currentConnectionAttempt}>
+          <FormGroup separator>
+            <ConnectionStringInput
+              customUrl={this.props.customUrl}
+              isURIEditable={this.props.isURIEditable}
+            />
+          </FormGroup>
+          <FormActions
+            currentConnection={this.props.currentConnection}
+            isValid={this.props.isValid}
+            isConnected={this.props.isConnected}
+            currentConnectionAttempt={this.props.currentConnectionAttempt}
+            errorMessage={this.props.errorMessage}
+            syntaxErrorMessage={this.props.syntaxErrorMessage}
+            hasUnsavedChanges={this.props.hasUnsavedChanges}
+            viewType={this.props.viewType}
             isURIEditable={this.props.isURIEditable}
+            isSavedConnection={this.props.isSavedConnection}
           />
-        </FormGroup>
-        <FormActions
-          currentConnection={this.props.currentConnection}
-          isValid={this.props.isValid}
-          isConnected={this.props.isConnected}
-          errorMessage={this.props.errorMessage}
-          syntaxErrorMessage={this.props.syntaxErrorMessage}
-          hasUnsavedChanges={this.props.hasUnsavedChanges}
-          viewType={this.props.viewType}
-          isURIEditable={this.props.isURIEditable}
-          isSavedConnection={this.props.isSavedConnection}
-        />
+        </fieldset>
       </form>
     );
   }