chore(connection-form): split connection form from compass preferences (#5162)

Author: mcasimir

package-lock.json

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   ImportConnectionsModal,
   ExportConnectionsModal,
@@ -23,6 +23,7 @@ import { useConnections } from '../stores/connections-store';
 import { cloneDeep } from 'lodash';
 import ConnectionList from './connection-list/connection-list';
 import { LegacyConnectionsModal } from './legacy-connections-modal';
+import { usePreference } from 'compass-preferences-model';
 
 const { log, mongoLogId } = createLoggerAndTelemetry(
   'mongodb-compass:connections:connections'
@@ -123,6 +124,47 @@ function Connections({
     []
   );
 
+  const protectConnectionStrings = usePreference(
+    'protectConnectionStrings',
+    React
+  );
+  const forceConnectionOptions = usePreference('forceConnectionOptions', React);
+  const showKerberosPasswordField = usePreference(
+    'showKerberosPasswordField',
+    React
+  );
+  const showOIDCDeviceAuthFlow = usePreference('showOIDCDeviceAuthFlow', React);
+  const enableOidc = usePreference('enableOidc', React);
+  const enableDebugUseCsfleSchemaMap = usePreference(
+    'enableDebugUseCsfleSchemaMap',
+    React
+  );
+  const protectConnectionStringsForNewConnections = usePreference(
+    'protectConnectionStringsForNewConnections',
+    React
+  );
+
+  const preferences = useMemo(
+    () => ({
+      protectConnectionStrings,
+      forceConnectionOptions,
+      showKerberosPasswordField,
+      showOIDCDeviceAuthFlow,
+      enableOidc,
+      enableDebugUseCsfleSchemaMap,
+      protectConnectionStringsForNewConnections,
+    }),
+    [
+      protectConnectionStrings,
+      forceConnectionOptions,
+      showKerberosPasswordField,
+      showOIDCDeviceAuthFlow,
+      enableOidc,
+      enableDebugUseCsfleSchemaMap,
+      protectConnectionStringsForNewConnections,
+    ]
+  );
+
   return (
     <div data-testid="connections-wrapper" className={connectStyles}>
       <ResizableSidebar>
@@ -166,6 +208,7 @@ function Connections({
               onSaveConnectionClicked={saveConnection}
               initialConnectionInfo={activeConnectionInfo}
               connectionErrorMessage={connectionErrorMessage}
+              preferences={preferences}
             />
           </ErrorBoundary>
           <FormHelp />

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

@@ -541,11 +541,15 @@ export function useConnections({
         };
       }
 
+      const { forceConnectionOptions = [], browserCommandForOIDCAuth } =
+        preferences.getPreferences();
+
       const newConnectionDataService = await newConnectionAttempt.connect(
         adjustConnectionOptionsBeforeConnect({
           connectionOptions: connectionInfo.connectionOptions,
           defaultAppName: appName,
           notifyDeviceFlow,
+          preferences: { forceConnectionOptions, browserCommandForOIDCAuth },
         })
       );
       connectingConnectionAttempt.current = undefined;

packages/compass-connections/src/stores/connections-store.ts

@@ -56,7 +56,6 @@
     "@mongodb-js/compass-editor": "^0.18.0",
     "@mongodb-js/connection-storage": "^0.6.6",
     "@testing-library/react-hooks": "^7.0.2",
-    "compass-preferences-model": "^2.15.6",
     "lodash": "^4.17.21",
     "mongodb-build-info": "^1.7.0",
     "mongodb-connection-string-url": "^2.6.0",

packages/connection-form/package.json

@@ -3,11 +3,11 @@ import { render, screen, fireEvent, cleanup } from '@testing-library/react';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import ConnectionStringUrl from 'mongodb-connection-string-url';
-import preferences from 'compass-preferences-model';
 
 import AuthenticationGssapi from './authentication-gssapi';
 import type { ConnectionFormError } from '../../../utils/validation';
 import type { UpdateConnectionFormField } from '../../../hooks/use-connect-form';
+import { ConnectionFormPreferencesContext } from '../../../hooks/use-connect-form-preferences';
 
 function renderComponent({
   errors = [],
@@ -19,11 +19,15 @@ function renderComponent({
   updateConnectionFormField: UpdateConnectionFormField;
 }) {
   render(
-    <AuthenticationGssapi
-      errors={errors}
-      connectionStringUrl={connectionStringUrl}
-      updateConnectionFormField={updateConnectionFormField}
-    />
+    <ConnectionFormPreferencesContext.Provider
+      value={{ showKerberosPasswordField: true }}
+    >
+      <AuthenticationGssapi
+        errors={errors}
+        connectionStringUrl={connectionStringUrl}
+        updateConnectionFormField={updateConnectionFormField}
+      />
+    </ConnectionFormPreferencesContext.Provider>
   );
 }
 
@@ -172,19 +176,6 @@ describe('AuthenticationGssapi Component', function () {
   });
 
   describe('Kerberos password support', function () {
-    let sandbox: sinon.SinonSandbox;
-
-    before(function () {
-      sandbox = sinon.createSandbox();
-      sandbox
-        .stub(preferences, 'getPreferences')
-        .returns({ showKerberosPasswordField: true } as any);
-    });
-
-    after(function () {
-      return sandbox.restore();
-    });
-
     describe('when password is not in the connection string', function () {
       beforeEach(function () {
         renderComponent({

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

@@ -7,7 +7,6 @@ import {
   RadioBox,
   Checkbox,
 } from '@mongodb-js/compass-components';
-import { usePreference } from 'compass-preferences-model';
 
 import type ConnectionStringUrl from 'mongodb-connection-string-url';
 import type { UpdateConnectionFormField } from '../../../hooks/use-connect-form';
@@ -18,6 +17,7 @@ import {
   getConnectionStringUsername,
   parseAuthMechanismProperties,
 } from '../../../utils/connection-string-helpers';
+import { useConnectionFormPreference } from '../../../hooks/use-connect-form-preferences';
 
 const GSSAPI_CANONICALIZE_HOST_NAME_OPTIONS: Record<
   string,
@@ -56,9 +56,8 @@ function AuthenticationGSSAPI({
 
   const [showPassword, setShowPassword] = useState<boolean>(false);
 
-  const showKerberosPasswordField = !!usePreference(
-    'showKerberosPasswordField',
-    React
+  const showKerberosPasswordField = !!useConnectionFormPreference(
+    'showKerberosPasswordField'
   );
 
   useEffect(() => {

packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-gssapi.tsx

@@ -9,13 +9,15 @@ import {
 import { expect } from 'chai';
 import sinon from 'sinon';
 import type { ConnectionOptions } from 'mongodb-data-service';
-import preferences from 'compass-preferences-model';
 
 import ConnectionForm from '../../../';
 
 const deviceAuthFlowText = 'Enable Device Authentication Flow';
 
-async function renderConnectionForm(connectSpy) {
+async function renderConnectionForm(
+  connectSpy,
+  { showOIDCDeviceAuthFlow }: { showOIDCDeviceAuthFlow: boolean }
+) {
   render(
     <ConnectionForm
       initialConnectionInfo={{
@@ -27,6 +29,7 @@ async function renderConnectionForm(connectSpy) {
       onConnectClicked={(connectionInfo) => {
         connectSpy(connectionInfo.connectionOptions);
       }}
+      preferences={{ enableOidc: true, showOIDCDeviceAuthFlow }}
     />
   );
 
@@ -55,23 +58,10 @@ const openOptionsAccordion = () =>
 
 describe('AuthenticationOIDC Connection Form', function () {
   let expectToConnectWith;
-  let sandbox: sinon.SinonSandbox;
-  let getPreferencesStub: sinon.SinonStub;
   let connectSpy: sinon.SinonSpy;
 
   beforeEach(function () {
     connectSpy = sinon.spy();
-
-    sandbox = sinon.createSandbox();
-    getPreferencesStub = sinon.stub();
-    getPreferencesStub.returns({
-      enableOidc: true,
-    });
-    // TODO(COMPASS-6803): Remove feature flag, remove this sandbox.
-    sandbox
-      .stub(preferences, 'getPreferences')
-      .callsFake(() => getPreferencesStub());
-
     expectToConnectWith = async (
       expected: ConnectionOptions | ((ConnectionOptions) => void)
     ): Promise<void> => {
@@ -93,14 +83,14 @@ describe('AuthenticationOIDC Connection Form', function () {
       }
     };
   });
+
   afterEach(function () {
-    sandbox.restore();
     cleanup();
   });
 
   describe('when rendered', function () {
     beforeEach(async function () {
-      await renderConnectionForm(connectSpy);
+      await renderConnectionForm(connectSpy, { showOIDCDeviceAuthFlow: false });
     });
 
     it('handles principal (username) changes', async function () {
@@ -156,12 +146,7 @@ describe('AuthenticationOIDC Connection Form', function () {
 
   describe('when rendered and the showOIDCDeviceAuthFlow setting is enabled', function () {
     beforeEach(async function () {
-      getPreferencesStub.returns({
-        enableOidc: true,
-        showOIDCDeviceAuthFlow: true,
-      });
-
-      await renderConnectionForm(connectSpy);
+      await renderConnectionForm(connectSpy, { showOIDCDeviceAuthFlow: true });
     });
 
     it('handles the enable device authentication flow checkbox', async function () {

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

@@ -9,13 +9,13 @@ import {
 } from '@mongodb-js/compass-components';
 import type ConnectionStringUrl from 'mongodb-connection-string-url';
 import type { ConnectionOptions } from 'mongodb-data-service';
-import { usePreference } from 'compass-preferences-model';
 
 import type { UpdateConnectionFormField } from '../../../hooks/use-connect-form';
 import type { ConnectionFormError } from '../../../utils/validation';
 import { errorMessageByFieldName } from '../../../utils/validation';
 import { getConnectionStringUsername } from '../../../utils/connection-string-helpers';
 import type { OIDCOptions } from '../../../utils/oidc-handler';
+import { useConnectionFormPreference } from '../../../hooks/use-connect-form-preferences';
 
 type AuthFlowType = NonNullable<OIDCOptions['allowedFlows']>[number];
 
@@ -47,9 +47,8 @@ function AuthenticationOIDC({
   const hasEnabledDeviceAuthFlow =
     !!connectionOptions.oidc?.allowedFlows?.includes?.('device-auth');
 
-  const showOIDCDeviceAuthFlow = !!usePreference(
-    'showOIDCDeviceAuthFlow',
-    React
+  const showOIDCDeviceAuthFlow = !!useConnectionFormPreference(
+    'showOIDCDeviceAuthFlow'
   );
 
   return (

packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-oidc.tsx

@@ -9,7 +9,6 @@ import {
 } from '@mongodb-js/compass-components';
 import type ConnectionStringUrl from 'mongodb-connection-string-url';
 import { AuthMechanism } from 'mongodb';
-import { usePreference } from 'compass-preferences-model';
 import type { ConnectionOptions } from 'mongodb-data-service';
 
 import type { UpdateConnectionFormField } from '../../../hooks/use-connect-form';
@@ -21,6 +20,7 @@ import AuthenticationGSSAPI from './authentication-gssapi';
 import AuthenticationPlain from './authentication-plain';
 import AuthenticationAWS from './authentication-aws';
 import AuthenticationOidc from './authentication-oidc';
+import { useConnectionFormPreference } from '../../../hooks/use-connect-form-preferences';
 
 type AUTH_TABS =
   | 'DEFAULT' // Username/Password (SCRAM-SHA-1 + SCRAM-SHA-256 + DEFAULT)
@@ -108,7 +108,7 @@ function AuthenticationTab({
   updateConnectionFormField: UpdateConnectionFormField;
   connectionOptions: ConnectionOptions;
 }): React.ReactElement {
-  const enableOIDC = !!usePreference('enableOidc', React);
+  const enableOIDC = !!useConnectionFormPreference('enableOidc');
   const enabledAuthOptions = useMemo(() => {
     if (enableOIDC) {
       return options;

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

@@ -32,7 +32,7 @@ import type {
   KMSField,
 } from '../../../utils/csfle-kms-fields';
 import { KMSProviderFields } from '../../../utils/csfle-kms-fields';
-import { usePreference } from 'compass-preferences-model';
+import { useConnectionFormPreference } from '../../../hooks/use-connect-form-preferences';
 
 const kmsProviderComponentWrapperStyles = css({
   paddingLeft: spacing[3],
@@ -96,9 +96,8 @@ function CSFLETab({
   const autoEncryptionOptions =
     connectionOptions.fleOptions?.autoEncryption ?? {};
 
-  const enableSchemaMapDebugFlag = usePreference(
-    'enableDebugUseCsfleSchemaMap',
-    React
+  const enableSchemaMapDebugFlag = useConnectionFormPreference(
+    'enableDebugUseCsfleSchemaMap'
   );
 
   const errors = errorsByFieldTab(errors_, 'csfle');