feat(connection-form): allow editing connected connections, but only the name, colour and favorite checkbox COMPASS-8160 (#6336)

allow editing connected connections, but only the name, colour and favorite.

Author: lerouxb

packages/compass-connections-navigation/src/item-actions.ts

@@ -7,14 +7,12 @@ export type NavigationItemActions = (ItemAction<Actions> | ItemSeparator)[];
 
 export const notConnectedConnectionItemActions = ({
   connectionInfo,
-  hideEditConnect = false,
 }: {
   connectionInfo: ConnectionInfo;
-  hideEditConnect?: boolean;
 }): NavigationItemActions => {
   const isAtlas = !!connectionInfo.atlasMetadata;
   const actions: (ItemAction<Actions> | ItemSeparator | null)[] = [
-    hideEditConnect || isAtlas
+    isAtlas
       ? null
       : {
           action: 'edit-connection',
@@ -85,8 +83,6 @@ export const connectedConnectionItemActions = ({
   const isAtlas = !!connectionInfo.atlasMetadata;
   const connectionManagementActions = notConnectedConnectionItemActions({
     connectionInfo,
-    // for connected connections we don't show connect action
-    hideEditConnect: true,
   });
   const actions: (ItemAction<Actions> | ItemSeparator | null)[] = [
     hasWriteActionsDisabled

packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx

@@ -228,6 +228,10 @@ export function MultipleConnectionSidebar({
         />
         {editingConnectionInfo && (
           <ConnectionFormModal
+            disableEditingConnectedConnection={
+              !!findActiveConnection(editingConnectionInfo.id)
+            }
+            onDisconnectClicked={() => disconnect(editingConnectionInfo.id)}
             isOpen={isEditingConnectionInfoModalOpen}
             setOpen={(newOpen) => {
               // This is how leafygreen propagates `X` button click

packages/connection-form/src/components/advanced-options-tabs/csfle-tab/csfle-tab.spec.tsx

@@ -381,7 +381,9 @@ describe('In-Use Encryption', function () {
 
       const selector = within(card).getByTestId('csfle-kms-card-name');
       userEvent.clear(selector);
-      userEvent.type(selector, value);
+      if (value !== '') {
+        userEvent.type(selector, value);
+      }
       userEvent.keyboard('{enter}');
     }
 

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

@@ -46,6 +46,16 @@ describe('<ConnectionFormModalActions />', function () {
 
       expect(onSaveAndConnectSpy).to.have.been.calledOnce;
     });
+
+    it('should hide "connect" button if there is no callback', function () {
+      render(
+        <ConnectionFormModalActions
+          errors={[]}
+          warnings={[]}
+        ></ConnectionFormModalActions>
+      );
+      expect(screen.queryByRole('button', { name: 'Connect' })).to.not.exist;
+    });
   });
 
   describe('Save Button', function () {

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

@@ -44,7 +44,7 @@ export type ConnectionFormModalActionsProps = {
 
   onCancel?(): void;
   onSave?(): void;
-  onSaveAndConnect(): void;
+  onSaveAndConnect?(): void;
 };
 
 export function ConnectionFormModalActions({
@@ -89,7 +89,11 @@ export function ConnectionFormModalActions({
           <div className={saveAndConnectStyles}>
             <Button
               data-testid="save-button"
-              variant={ButtonVariant.PrimaryOutline}
+              variant={
+                onSaveAndConnect
+                  ? ButtonVariant.PrimaryOutline
+                  : ButtonVariant.Primary
+              }
               disabled={false}
               onClick={onSave}
             >
@@ -98,13 +102,15 @@ export function ConnectionFormModalActions({
           </div>
         )}
 
-        <Button
-          data-testid="connect-button"
-          variant={ButtonVariant.Primary}
-          onClick={onSaveAndConnect}
-        >
-          {saveAndConnectLabel}
-        </Button>
+        {onSaveAndConnect && (
+          <Button
+            data-testid="connect-button"
+            variant={ButtonVariant.Primary}
+            onClick={onSaveAndConnect}
+          >
+            {saveAndConnectLabel}
+          </Button>
+        )}
       </div>
     </div>
   );

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

@@ -77,6 +77,71 @@ describe('ConnectionForm Component', function () {
       sandbox.restore();
     });
 
+    context('when disableEditingConnectedConnection==true', function () {
+      it('renders a banner, disables the connection string and removes advanced connection options + connect button', function () {
+        const onDisconnectClicked = Sinon.spy();
+        const onSaveClicked = Sinon.spy();
+        const onSaveAndConnectClicked = Sinon.spy();
+
+        renderForm({
+          disableEditingConnectedConnection: true,
+          onDisconnectClicked,
+          onSaveClicked,
+          onSaveAndConnectClicked,
+        });
+
+        expect(
+          screen.getByTestId('disabled-connected-connection-banner')
+        ).to.exist;
+        expect(screen.getByRole('button', { name: 'Disconnect' })).to.exist;
+        expect(() =>
+          screen.getByTestId('toggle-edit-connection-string')
+        ).to.throw;
+        expect(() =>
+          screen.getByTestId('advanced-connection-options')
+        ).to.throw;
+        expect(() => screen.getByRole('button', { name: 'Connect' })).to.throw;
+
+        // pressing enter calls onSubmit which saves
+        fireEvent.submit(screen.getByRole('form'));
+        expect(onSaveClicked.callCount).to.equal(1);
+        expect(onSaveAndConnectClicked.callCount).to.equal(0);
+
+        fireEvent.click(screen.getByRole('button', { name: 'Disconnect' }));
+        expect(onDisconnectClicked.callCount).to.equal(1);
+      });
+    });
+
+    context('when disableEditingConnectedConnection==false', function () {
+      it('leaves the connection string, advanced connection options and connect button intact, does not render a banner', function () {
+        const onDisconnectClicked = Sinon.spy();
+        const onSaveClicked = Sinon.spy();
+        const onSaveAndConnectClicked = Sinon.spy();
+
+        renderForm({
+          disableEditingConnectedConnection: false,
+          onDisconnectClicked,
+          onSaveClicked,
+          onSaveAndConnectClicked,
+        });
+
+        expect(() =>
+          screen.getByTestId('disabled-connected-connection-banner')
+        ).to.throw;
+        expect(() =>
+          screen.getByRole('button', { name: 'Disconnect' })
+        ).to.throw;
+        expect(screen.getByTestId('toggle-edit-connection-string')).to.exist;
+        expect(screen.getByTestId('advanced-connection-options')).to.exist;
+        expect(screen.getByRole('button', { name: 'Connect' })).to.exist;
+
+        // pressing enter calls onSubmit which saves and connects (the default)
+        fireEvent.submit(screen.getByRole('form'));
+        expect(onSaveClicked.callCount).to.equal(0);
+        expect(onSaveAndConnectClicked.callCount).to.equal(1);
+      });
+    });
+
     context(
       'when preferences.protectConnectionStringsForNewConnections === true',
       function () {