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 && (
@@ -521,6 +521,17 @@ function ConnectionForm({
)} + {protectConnectionStrings && !disableEditingConnectedConnection && ( + + Advanced Connection Options are hidden while the "Protect + Connection String Secrets" setting is enabled. Disable the + setting to configure Advanced Connection Options or edit your + connection string. + + )}