feat(connect-form): Add connection string input COMPASS-4902 (#2544)

Author: Anemy

package-lock.json

@@ -36,17 +36,19 @@
   "dependencies": {
     "@leafygreen-ui/badge": "^4.0.4",
     "@leafygreen-ui/banner": "^3.0.8",
-    "@leafygreen-ui/button": "^12.0.3",
+    "@leafygreen-ui/button": "^12.0.5",
     "@leafygreen-ui/card": "^5.1.3",
     "@leafygreen-ui/checkbox": "^6.0.5",
     "@leafygreen-ui/confirmation-modal": "^2.2.1",
     "@leafygreen-ui/icon": "^11.4.0",
     "@leafygreen-ui/icon-button": "^9.1.5",
     "@leafygreen-ui/leafygreen-provider": "^2.1.2",
-    "@leafygreen-ui/logo": "^5.0.0",
+    "@leafygreen-ui/logo": "^6.1.0",
+    "@leafygreen-ui/palette": "^3.2.2",
     "@leafygreen-ui/portal": "^3.1.3",
     "@leafygreen-ui/select": "^3.0.4",
     "@leafygreen-ui/tabs": "^5.1.3",
+    "@leafygreen-ui/text-area": "^4.0.3",
     "@leafygreen-ui/text-input": "^6.0.3",
     "@leafygreen-ui/toggle": "^7.0.4",
     "@leafygreen-ui/tokens": "^0.5.3",

packages/compass-components/package.json

@@ -19,14 +19,20 @@ export { default as Checkbox } from '@leafygreen-ui/checkbox';
 export { default as Icon } from '@leafygreen-ui/icon';
 export { default as IconButton } from '@leafygreen-ui/icon-button';
 export { default as LeafyGreenProvider } from '@leafygreen-ui/leafygreen-provider';
-export { AtlasLogoMark, LogoMark } from '@leafygreen-ui/logo';
+export {
+  AtlasLogoMark,
+  MongoDBLogoMark,
+  MongoDBLogo,
+} from '@leafygreen-ui/logo';
+export { uiColors } from '@leafygreen-ui/palette';
 export { default as Portal } from '@leafygreen-ui/portal';
 export { Select, Option, Size as SelectSize } from '@leafygreen-ui/select';
 export { Tabs, Tab } from '@leafygreen-ui/tabs';
+export { default as TextArea } from '@leafygreen-ui/text-area';
 export { default as TextInput } from '@leafygreen-ui/text-input';
 export { default as Toggle } from '@leafygreen-ui/toggle';
 export { spacing } from '@leafygreen-ui/tokens';
 export { default as Tooltip } from '@leafygreen-ui/tooltip';
-export { H2, Link } from '@leafygreen-ui/typography';
+export { H3, Link, Description, Label } from '@leafygreen-ui/typography';
 
 export { CancelLoader, ConfirmationModal, ResizeHandle, ResizeDirection };

packages/compass-components/src/index.ts

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from '@mongodb-js/compass-components';
 import ConnectForm from '@mongodb-js/connect-form';
+import { convertConnectionModelToInfo } from 'mongodb-data-service';
 
 import Actions from '../actions';
 import Sidebar from './sidebar';
@@ -145,13 +146,15 @@ class Connect extends React.Component {
           className={classnames(styles.page, styles.connect)}
         >
           <Sidebar {...this.props} />
-          <div className={classnames(styles['form-container'])}>
+          <div className={styles['form-container']}>
             {showNewConnectForm && <ConnectForm
+              key={this.props.connectionModel._id}
+              initialConnectionInfo={convertConnectionModelToInfo(this.props.connectionModel)}
               onConnectClicked={() => Actions.onConnectClicked()}
             />}
             {!showNewConnectForm && (
               <div
-                className={classnames(styles['connect-container'])}
+                className={styles['connect-container']}
                 onMouseMove={this.handleMouseMove.bind(this)}
               >
                 {this.renderHeader()}

packages/compass-connect/src/components/connect.jsx

@@ -11,21 +11,6 @@
 }
 
 .connect {
-  form {
-    display: block;
-    margin-top: 0em;
-    background-color: white;
-    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.075);
-    padding: 15px 0;
-  }
-
-  label {
-    display: inline-block;
-    max-width: 100%;
-    margin-bottom: 5px;
-    font-weight: bold;
-  }
-
   &-atlas {
     background: @compass-sidebar-atlas-background-color;
     display: flex;
@@ -103,6 +88,21 @@
       min-width: 360px;
       max-width: 800px;
 
+      form {
+        display: block;
+        margin-top: 0em;
+        background-color: white;
+        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.075);
+        padding: 15px 0;
+      }
+  
+      label {
+        display: inline-block;
+        max-width: 100%;
+        margin-bottom: 5px;
+        font-weight: bold;
+      }
+
       .connect-string {
         margin: 10px;
 

packages/compass-connect/src/components/connect.module.less

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { connect } from 'react-redux';
 import {
-  LogoMark
+  MongoDBLogoMark
 } from '@mongodb-js/compass-components';
 
 import {
@@ -54,7 +54,7 @@ class SidebarTitle extends PureComponent {
         } : {}}
         className={styles['sidebar-title-logo']}
       >
-        <LogoMark
+        <MongoDBLogoMark
           darkMode
           knockout
         />

packages/compass-sidebar/src/components/sidebar-title/sidebar-title.jsx

@@ -3,7 +3,6 @@ ignores:
  - "@mongodb-js/tsconfig-compass"
  - "@types/chai"
  - "@types/sinon-chai"
- - "sinon"
  - "@types/chai-dom"
  - "@types/react"
  - "@types/react-dom"

packages/connect-form/.depcheckrc

@@ -52,6 +52,7 @@
     "react-dom": "*"
   },
   "dependencies": {
+    "mongodb-connection-string-url": "^2.1.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0"
   },
@@ -74,6 +75,7 @@
     "eslint": "^7.25.0",
     "gen-esm-wrapper": "^1.1.0",
     "mocha": "^8.4.0",
+    "mongodb-data-service": "^21.12.0",
     "nyc": "^15.1.0",
     "prettier": "2.3.2",
     "sinon": "^9.2.3",

packages/connect-form/package.json

@@ -0,0 +1,86 @@
+import React from 'react';
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+import ConfirmEditConnectionStringModal from './confirm-edit-connection-string';
+
+function renderModal(onCancel: () => void, onConfirm: () => void) {
+  return render(
+    <ConfirmEditConnectionStringModal
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      open
+    />
+  );
+}
+
+describe('ConfirmationModal Component', function () {
+  let onConfirmSpy;
+  let onCancelSpy;
+  beforeEach(function () {
+    onConfirmSpy = sinon.spy();
+    onCancelSpy = sinon.spy();
+
+    renderModal(onCancelSpy, onConfirmSpy);
+  });
+
+  afterEach(function () {
+    onConfirmSpy = null;
+    onCancelSpy = null;
+    cleanup(); // Modals can sometimes leave behind animations and focus traps.
+  });
+
+  it('should show the modal heading', function () {
+    expect(screen.getByRole('heading')).to.have.text(
+      'Are you sure you want to edit your connection string?'
+    );
+  });
+
+  it('should show the modal button', function () {
+    const button = screen.getByText('Confirm').closest('button');
+    expect(button).to.not.match('disabled');
+  });
+
+  it('should show the modal content', function () {
+    const innerContent = screen.getByTestId('edit-uri-note');
+    expect(innerContent).to.have.text(
+      'Editing this connection string will reveal your credentials.'
+    );
+    expect(innerContent).to.be.visible;
+  });
+
+  it('calls the onConfirm prop when confirm is clicked', function () {
+    const button = screen.getByText('Confirm').closest('button');
+
+    expect(onConfirmSpy.called).to.equal(false);
+
+    fireEvent(
+      button,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+
+    expect(onConfirmSpy.called).to.equal(true);
+    expect(onCancelSpy.called).to.equal(false);
+  });
+
+  it('calls the onCancel prop when close is clicked', function () {
+    const button = screen.getByText('Cancel').closest('button');
+
+    expect(onCancelSpy.called).to.equal(false);
+
+    fireEvent(
+      button,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+
+    expect(onCancelSpy.called).to.equal(true);
+    expect(onConfirmSpy.called).to.equal(false);
+  });
+});

packages/connect-form/src/confirm-edit-connection-string.spec.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ConfirmationModal } from '@mongodb-js/compass-components';
+
+function ConfirmEditConnectionString({
+  onCancel,
+  onConfirm,
+  open,
+}: {
+  onCancel: () => void;
+  onConfirm: () => void;
+  open: boolean;
+}): React.ReactElement {
+  return (
+    <ConfirmationModal
+      title="Are you sure you want to edit your connection string?"
+      open={open}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+      buttonText="Confirm"
+    >
+      <div data-testid="edit-uri-note">
+        Editing this connection string will reveal your credentials.
+      </div>
+    </ConfirmationModal>
+  );
+}
+
+export default ConfirmEditConnectionString;