feature: adapt the connection form component to the new design guidelines COMPASS-7652 (#5514)

* new design

* chore: put the new color palette under the feature toggle

* chore: interact with the form

* chore: use glyphs on the option

* chore: checking why it resets

* chore: fixed wierd behaviour of useReducer

* chore: can save connections

* chore: add test to reducer

* chore: fix the connect button

* chore: add todo marker

* chore: add tests to the form

* chore: linting issues

* chore: linting issues

* chore: fix typing issues

* chore: add tests to color names

* chore: remove exclusive test

* chore: linting issues

* chore: package.json merge conflict

* chore: update package-lock

* chore: fix tests

* chore: beware of race conditions

* chore: fix tests

* chore: be pretty

* chore: move to inner scope

* chore: fix copy

Author: kmruiz

package-lock.json

@@ -136,6 +136,7 @@ export {
 } from './components/content-with-fallback';
 export { InlineDefinition } from './components/inline-definition';
 import type { glyphs } from '@leafygreen-ui/icon';
+export { createGlyphComponent, createIconComponent } from '@leafygreen-ui/icon';
 export {
   SignalPopover,
   SignalHooksProvider,

packages/compass-components/src/index.ts

@@ -49,6 +49,7 @@
   "peerDependencies": {
     "@mongodb-js/compass-components": "^1.22.1",
     "@mongodb-js/compass-editor": "^0.21.1",
+    "compass-preferences-model": "^2.11.1",
     "react": "^17.0.2"
   },
   "dependencies": {

packages/connection-form/package.json

@@ -118,4 +118,71 @@ function ConnectFormActions({
   );
 }
 
+export type ConnectionFormModalActionsProps = {
+  errors: ConnectionFormError[];
+  warnings: ConnectionFormWarning[];
+
+  onCancel(): void;
+  onSave(): void;
+  onConnect(): void;
+};
+
+export function ConnectionFormModalActions({
+  errors,
+  warnings,
+  onCancel,
+  onSave,
+  onConnect,
+}: ConnectionFormModalActionsProps): React.ReactElement {
+  return (
+    <div className={cx(formActionStyles)}>
+      {warnings.length > 0 && (
+        <div className={formActionItemStyles}>
+          <WarningSummary
+            data-testid="connection-warnings-summary"
+            warnings={warnings.map((warning) => warning.message)}
+          />
+        </div>
+      )}
+      {errors.length > 0 && (
+        <div className={formActionItemStyles}>
+          <ErrorSummary
+            data-testid="connection-error-summary"
+            errors={errors.map((error) => error.message)}
+          />
+        </div>
+      )}
+      <div className={cx(formActionItemStyles, formActionButtonsStyles)}>
+        <Button
+          data-testid="save-connection-button"
+          variant={ButtonVariant.Default}
+          disabled={false}
+          onClick={onCancel}
+        >
+          Cancel
+        </Button>
+
+        <div className={saveAndConnectStyles}>
+          <Button
+            data-testid="save-and-connect-button"
+            variant={ButtonVariant.PrimaryOutline}
+            disabled={false}
+            onClick={onSave}
+          >
+            Save
+          </Button>
+        </div>
+
+        <Button
+          data-testid="connect-button"
+          variant={ButtonVariant.Primary}
+          onClick={onConnect}
+        >
+          Connect
+        </Button>
+      </div>
+    </div>
+  );
+}
+
 export default ConnectFormActions;

packages/connection-form/src/components/connection-form-actions.tsx

@@ -5,9 +5,13 @@ import {
   cleanup,
   fireEvent,
   getByText,
+  waitFor,
 } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { expect } from 'chai';
-
+import type { PreferencesAccess } from 'compass-preferences-model';
+import { createSandboxFromDefaultPreferences } from 'compass-preferences-model';
+import { PreferencesProvider } from 'compass-preferences-model/provider';
 import ConnectionForm from './connection-form';
 import type { ConnectionFormProps } from './connection-form';
 import Sinon from 'sinon';
@@ -28,23 +32,31 @@ const noop = (): any => {
 const saveAndConnectText = 'Save & Connect';
 const favoriteText = 'FAVORITE';
 
-function renderForm(props: Partial<ConnectionFormProps> = {}) {
-  return render(
-    <ConnectionForm
-      onConnectClicked={noop}
-      initialConnectionInfo={{
-        id: 'test',
-        connectionOptions: {
-          connectionString: 'mongodb://pineapple:orangutans@localhost:27019',
-        },
-      }}
-      onSaveConnectionClicked={noop}
-      {...props}
-    />
-  );
-}
-
 describe('ConnectionForm Component', function () {
+  let preferences: PreferencesAccess;
+  function renderForm(props: Partial<ConnectionFormProps> = {}) {
+    return render(
+      <PreferencesProvider value={preferences}>
+        <ConnectionForm
+          onConnectClicked={noop}
+          initialConnectionInfo={{
+            id: 'test',
+            connectionOptions: {
+              connectionString:
+                'mongodb://pineapple:orangutans@localhost:27019',
+            },
+          }}
+          onSaveConnectionClicked={noop}
+          {...props}
+        />
+      </PreferencesProvider>
+    );
+  }
+
+  beforeEach(async function () {
+    preferences = await createSandboxFromDefaultPreferences();
+  });
+
   afterEach(function () {
     cleanup();
   });
@@ -363,4 +375,72 @@ describe('ConnectionForm Component', function () {
 
     expect(() => screen.getByText(saveAndConnectText)).to.throw;
   });
+
+  context('when multiple connection management is enabled', function () {
+    beforeEach(async function () {
+      await preferences.savePreferences({
+        enableNewMultipleConnectionSystem: true,
+      });
+      renderForm({
+        initialConnectionInfo: DEFAULT_CONNECTION,
+        preferences: {
+          protectConnectionStringsForNewConnections: false,
+          protectConnectionStrings: false,
+        },
+      });
+    });
+
+    it('should not show the old favorite button', function () {
+      expect(screen.queryByTestId('edit-favorite-icon-button')).to.be.null;
+    });
+
+    describe('name input', function () {
+      it('should sync with the href of the connection string unless it has been edited', async function () {
+        const connectionString = screen.getByTestId('connectionString');
+        userEvent.clear(connectionString);
+
+        await waitFor(() => expect(connectionString.value).to.equal(''));
+
+        userEvent.paste(connectionString, 'mongodb://myserver:27017/');
+
+        await waitFor(() =>
+          expect(connectionString.value).to.equal('mongodb://myserver:27017/')
+        );
+
+        const personalizationName = screen.getByTestId(
+          'personalization-name-input'
+        );
+        expect(personalizationName.value).to.equal('myserver:27017');
+      });
+
+      it('should not sync with the href of the connection string when it has been edited', async function () {
+        const connectionString = screen.getByTestId('connectionString');
+        const personalizationName = screen.getByTestId(
+          'personalization-name-input'
+        );
+
+        userEvent.clear(personalizationName);
+        userEvent.clear(connectionString);
+
+        await waitFor(() => {
+          expect(personalizationName.value).to.equal('');
+          expect(connectionString.value).to.equal('');
+        });
+
+        userEvent.paste(personalizationName, 'my happy name');
+
+        await waitFor(() =>
+          expect(personalizationName.value).to.equal('my happy name')
+        );
+
+        userEvent.paste(connectionString, 'mongodb://webscale:27017/');
+
+        await waitFor(() =>
+          expect(connectionString.value).to.equal('mongodb://webscale:27017/')
+        );
+
+        expect(personalizationName.value).to.equal('my happy name');
+      });
+    });
+  });
 });