feat(connection-form): show a banner on the connection form explainin…

…g 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
mongodb-js · Oct 10, 2024 · 7f59150 · 7f59150
1 parent cbed839
commit 7f59150
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git 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
@@ -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}