From 7f59150e5c7634d77343c0a3045c21d8155a05a0 Mon Sep 17 00:00:00 2001
From: Le Roux Bodenstein <lerouxb@gmail.com>
Date: Thu, 10 Oct 2024 12:26:33 +0100
Subject: [PATCH] feat(connection-form): show a banner on the connection form
 explaining why you can't edit the connection COMPASS-8264 (#6344)

* show a banner on the connection form explaining why you can't edit the connection

* edge case
---
 .../src/components/connection-form.spec.tsx      | 16 ++++++++++++++++
 .../src/components/connection-form.tsx           | 15 +++++++++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/packages/connection-form/src/components/connection-form.spec.tsx b/packages/connection-form/src/components/connection-form.spec.tsx
index 5dc306317fd..ab88932bec9 100644
--- a/packages/connection-form/src/components/connection-form.spec.tsx
+++ b/packages/connection-form/src/components/connection-form.spec.tsx
@@ -280,6 +280,22 @@ describe('ConnectionForm Component', function () {
     );
   });
 
+  context('protectConnectionStrings', function () {
+    it('should not render the banner by default', function () {
+      renderForm();
+      expect(
+        screen.queryByTestId('protect-connection-strings-banner')
+      ).to.be.null;
+    });
+
+    it('renders a banner if protectConnectionStrings === true', function () {
+      renderForm({
+        protectConnectionStrings: true,
+      });
+      expect(screen.getByTestId('protect-connection-strings-banner')).to.exist;
+    });
+  });
+
   // TODO(COMPASS-7762)
   context.skip('when preferences.showFavoriteActions === false', function () {
     it('should not render the favorite button', function () {
diff --git a/packages/connection-form/src/components/connection-form.tsx b/packages/connection-form/src/components/connection-form.tsx
index c70c0313d05..f6d0533d51b 100644
--- a/packages/connection-form/src/components/connection-form.tsx
+++ b/packages/connection-form/src/components/connection-form.tsx
@@ -129,7 +129,7 @@ const headingWithHiddenButtonStyles = css({
   },
 });
 
-const disabledConnectedConnectionBannerStyles = css({
+const bannerStyles = css({
   marginTop: spacing[400],
   paddingRight: 0,
 });
@@ -500,7 +500,7 @@ function ConnectionForm({
             {disableEditingConnectedConnection && onDisconnectClicked && (
               <Banner
                 data-testid="disabled-connected-connection-banner"
-                className={disabledConnectedConnectionBannerStyles}
+                className={bannerStyles}
               >
                 <div className={disabledConnectedConnectionContentStyles}>
                   <div>
@@ -521,6 +521,17 @@ function ConnectionForm({
                 </div>
               </Banner>
             )}
+            {protectConnectionStrings && !disableEditingConnectedConnection && (
+              <Banner
+                data-testid="protect-connection-strings-banner"
+                className={bannerStyles}
+              >
+                Advanced Connection Options are hidden while the &quot;Protect
+                Connection String Secrets&quot; setting is enabled. Disable the
+                setting to configure Advanced Connection Options or edit your
+                connection string.
+              </Banner>
+            )}
             <ConnectionStringInput
               connectionString={connectionOptions.connectionString}
               enableEditingConnectionString={enableEditingConnectionString}