feat: connect ux improvements

src/components/connect.less

@@ -649,7 +649,6 @@ label {
 
   .connecting-background-gradient {
     opacity: 0.9;
-    animation: opacityFadeIn 0.2s ease-out;
   }
 }
 
@@ -659,14 +658,23 @@ label {
   }
 
   100% {
-    opacity: 0.9;
+    opacity: 1;
   }
 }
 
+.connecting-modal-container {
+  opacity: 1;
+  animation: opacityFadeIn 100ms ease-out;
+}
+
 .connecting-modal-content {
   text-align: center;
   padding: 24px;
 
+  .connecting-modal-illustration {
+    max-height: 40vh;
+  }
+
   .connecting-modal-status {
     margin-top: 24px;
     font-weight: bold;

src/components/modal/connecting.jsx

@@ -89,6 +89,8 @@ class Connecting extends React.Component {
       <React.Fragment>
         {!!this.props.currentConnectionAttempt && this.renderConnectingBackground()}
         <Modal
+          animation={false}
+          containerClassName={styles['connecting-modal-container']}
           show={!!this.props.currentConnectionAttempt}
           backdropClassName={styles['connecting-modal-backdrop']}
         >
@@ -97,7 +99,11 @@ class Connecting extends React.Component {
               className={styles['connecting-modal-content']}
               id="connectingStatusText"
             >
-              <img src={Illustration} alt="Compass connecting illustration" />
+              <img
+                className={styles['connecting-modal-illustration']}
+                src={Illustration}
+                alt="Compass connecting illustration"
+              />
               <h2
                 className={styles['connecting-modal-status']}
               >

src/modules/connection-attempt.js

@@ -1,5 +1,5 @@
-import { promisify } from 'util';
 import createDebug from 'debug';
+import { promisify } from 'util';
 
 const debug = createDebug('mongodb-compass:compass-connect:connection-attempt');
 
@@ -34,10 +34,7 @@ class ConnectionAttempt {
     }
 
     try {
-      const runConnect = promisify(
-        this._dataService.connect.bind(this._dataService)
-      );
-      await runConnect();
+      await this._dataService.connect();
       return this._dataService;
     } catch (err) {
       if (isConnectionAttemptTerminatedError(err)) {

src/modules/connection-attempt.spec.js

@@ -4,7 +4,9 @@ describe('connection-attempt', () => {
   describe('connect', () => {
     it('returns the connected data service', async() => {
       const dataService = {
-        connect: (callback) => setTimeout(() => callback(), 25)
+        connect: () => {
+          return new Promise(resolve => setTimeout(() => resolve(), 25));
+        }
       };
 
       const connectionAttempt = createConnectionAttempt();
@@ -39,8 +41,10 @@ describe('connection-attempt', () => {
     it('throws if connecting throws', async() => {
       let rejectOnConnect;
       const dataService = {
-        connect: (callback) => {
-          rejectOnConnect = callback;
+        connect: () => {
+          return new Promise((_, reject) => {
+            rejectOnConnect = reject;
+          });
         }
       };
 

src/stores/index.js

@@ -64,7 +64,7 @@ const SSH_TUNNEL_FIELDS = [
  */
 const EXTENSION = 'Connect.Extension';
 
-const LOADING_CONNECTION_TEXT = 'Loading connecting';
+const LOADING_CONNECTION_TEXT = 'Loading connection';
 
 /**
  * The store that backs the connect plugin.
@@ -204,8 +204,7 @@ const Store = Reflux.createStore({
     }
 
     try {
-      const buildConnectionModelFromUrl = promisify(Connection.from);
-      await buildConnectionModelFromUrl(customUrl);
+      await Connection.from(customUrl);
 
       this._resetSyntaxErrorMessage();
     } catch (error) {
@@ -1047,8 +1046,7 @@ const Store = Reflux.createStore({
 
     let parsedConnection;
     try {
-      const buildConnectionModelFromUrl = promisify(Connection.from);
-      parsedConnection = await buildConnectionModelFromUrl(url);
+      parsedConnection = await Connection.from(url);
     } catch (error) {
       this._setSyntaxErrorMessage(error.message);
 
@@ -1134,8 +1132,7 @@ const Store = Reflux.createStore({
     this.StatusActions.showIndeterminateProgressBar();
 
     try {
-      const buildConnectionModelFromUrl = promisify(Connection.from);
-      const parsedConnection = await buildConnectionModelFromUrl(url);
+      const parsedConnection = await Connection.from(url);
 
       this.StatusActions.done();
 
@@ -1208,8 +1205,7 @@ const Store = Reflux.createStore({
 
     if (this.state.viewType === CONNECTION_STRING_VIEW) {
       try {
-        const buildConnectionModelFromUrl = promisify(Connection.from);
-        const parsedConnection = await buildConnectionModelFromUrl(url);
+        const parsedConnection = await Connection.from(url);
 
         connectionModel.set(this._getPoorAttributes(parsedConnection));