fix(connection-form): vscode support & cleanup COMPASS-8098

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

@@ -191,8 +191,8 @@ function Connections({
                   onSaveClicked={saveEditedConnection}
                   initialConnectionInfo={activeConnectionInfo}
                   connectionErrorMessage={connectionErrorMessage}
-                  preferences={connectionFormPreferences}
                   openSettingsModal={openSettingsModal}
+                  {...connectionFormPreferences}
                 />
               </Card>
             </div>

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

@@ -248,8 +248,8 @@ export function MultipleConnectionSidebar({
             connectionErrorMessage={
               connectionErrors[editingConnectionInfo.id]?.message
             }
-            preferences={formPreferences}
             openSettingsModal={openSettingsModal}
+            {...formPreferences}
           />
         )}
         <MappedCsfleModal

packages/compass/src/app/components/home.spec.tsx

@@ -1,6 +1,5 @@
 import React, { type ComponentProps } from 'react';
 import { expect } from 'chai';
-import * as hadronIpc from 'hadron-ipc';
 import sinon from 'sinon';
 import { ThemedHome } from './home';
 import type { DataService } from 'mongodb-data-service';
@@ -11,7 +10,6 @@ import {
   screen,
   waitFor,
   within,
-  userEvent,
 } from '@mongodb-js/testing-library-compass';
 import type { AllPreferences } from 'compass-preferences-model/provider';
 import type { ConnectionInfo } from '@mongodb-js/compass-connections/provider';
@@ -79,29 +77,12 @@ describe('Home [Component]', function () {
     return result;
   }
 
-  async function waitForConnect() {
-    userEvent.click(screen.getByRole('button', { name: 'Connect' }));
-
-    await waitFor(
-      () => {
-        screen.getByTestId('home');
-      },
-      { timeout: 1_000_000 }
-    );
-  }
-
   afterEach(() => {
     cleanup();
     sinon.restore();
   });
 
   describe('is not connected', function () {
-    it('renders the connect screen', function () {
-      renderHome();
-      expect(() => screen.getByTestId('home')).to.throw;
-      expect(screen.getByTestId('connections-wrapper')).to.be.displayed;
-    });
-
     it('renders welcome modal and hides it', async function () {
       renderHome({ showWelcomeModal: true });
       const modal = screen.getByTestId('welcome-modal');
@@ -137,58 +118,4 @@ describe('Home [Component]', function () {
       });
     });
   });
-
-  describe('is connected', function () {
-    describe('when UI status is complete', function () {
-      let dataServiceDisconnectedSpy: sinon.SinonSpy;
-
-      let onDisconnectSpy: sinon.SinonSpy;
-      let hideCollectionSubMenuSpy: sinon.SinonSpy;
-
-      beforeEach(async function () {
-        dataServiceDisconnectedSpy = sinon.fake.resolves(true);
-        hideCollectionSubMenuSpy = sinon.spy();
-        onDisconnectSpy = sinon.spy();
-        const dataService = {
-          ...createDataService(),
-          disconnect: dataServiceDisconnectedSpy,
-          addReauthenticationHandler: sinon.stub(),
-        };
-        renderHome(
-          {
-            hideCollectionSubMenu: hideCollectionSubMenuSpy,
-            onDisconnect: onDisconnectSpy,
-          },
-          [],
-          dataService
-        );
-        await waitForConnect();
-      });
-
-      afterEach(function () {
-        sinon.restore();
-      });
-
-      it('renders only the workspaces', function () {
-        expect(screen.getByTestId('home')).to.be.displayed;
-        expect(() => screen.getByTestId('connections-wrapper')).to.throw;
-      });
-
-      it('on `app:disconnect`', async function () {
-        hadronIpc.ipcRenderer?.emit('app:disconnect');
-        await waitFor(() => {
-          expect(onDisconnectSpy.called, 'it calls onDisconnect').to.be.true;
-          expect(
-            hideCollectionSubMenuSpy.called,
-            'it calls hideCollectionSubMenu'
-          ).to.be.true;
-        });
-
-        await waitFor(() => {
-          expect(screen.queryByTestId('connections-wrapper')).to.be.visible;
-        });
-        expect(dataServiceDisconnectedSpy.callCount).to.equal(1);
-      });
-    });
-  });
 });

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

@@ -4,7 +4,7 @@ import { expect } from 'chai';
 import sinon from 'sinon';
 
 import AdvancedOptionsTabs from './advanced-options-tabs';
-import { ConnectionFormPreferencesContext } from '../../hooks/use-connect-form-preferences';
+import { ConnectionFormSettingsContext } from '../../hooks/use-connect-form-settings';
 
 const testUrl = 'mongodb+srv://0ranges:p!neapp1es@localhost/?ssl=true';
 
@@ -110,15 +110,15 @@ describe('AdvancedOptionsTabs Component', function () {
 
   it('should not render CSFLE when its set to false in the preferences', function () {
     render(
-      <ConnectionFormPreferencesContext.Provider value={{ showCSFLE: false }}>
+      <ConnectionFormSettingsContext.Provider value={{ showCSFLE: false }}>
         <AdvancedOptionsTabs
           connectionOptions={{
             connectionString: testUrl,
           }}
           errors={[]}
           updateConnectionFormField={updateConnectionFormFieldSpy}
         />
-      </ConnectionFormPreferencesContext.Provider>
+      </ConnectionFormSettingsContext.Provider>
     );
 
     const csfleTabName = tabs.find((tab) => tab.id === 'csfle')?.name;

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

@@ -20,7 +20,7 @@ import type { UpdateConnectionFormField } from '../../hooks/use-connect-form';
 import type { ConnectionFormError, TabId } from '../../utils/validation';
 import { errorsByFieldTab } from '../../utils/validation';
 import { defaultConnectionString } from '../../constants/default-connection';
-import { useConnectionFormPreference } from '../../hooks/use-connect-form-preferences';
+import { useConnectionFormSetting } from '../../hooks/use-connect-form-settings';
 
 const tabsStyles = css({
   marginTop: spacing[2],
@@ -72,7 +72,7 @@ function AdvancedOptionsTabs({
   openSettingsModal?: (tab?: string) => void;
 }): React.ReactElement {
   const [activeTab, setActiveTab] = useState(0);
-  const showCSFLE = useConnectionFormPreference('showCSFLE');
+  const showCSFLE = useConnectionFormSetting('showCSFLE');
 
   const tabs: TabObject[] = [
     { name: 'General', id: 'general', component: GeneralTab },

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

@@ -12,7 +12,7 @@ import ConnectionStringUrl from 'mongodb-connection-string-url';
 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';
+import { ConnectionFormSettingsContext } from '../../../hooks/use-connect-form-settings';
 
 function renderComponent({
   errors = [],
@@ -24,15 +24,15 @@ function renderComponent({
   updateConnectionFormField: UpdateConnectionFormField;
 }) {
   render(
-    <ConnectionFormPreferencesContext.Provider
+    <ConnectionFormSettingsContext.Provider
       value={{ showKerberosPasswordField: true }}
     >
       <AuthenticationGssapi
         errors={errors}
         connectionStringUrl={connectionStringUrl}
         updateConnectionFormField={updateConnectionFormField}
       />
-    </ConnectionFormPreferencesContext.Provider>
+    </ConnectionFormSettingsContext.Provider>
   );
 }
 

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

@@ -17,7 +17,7 @@ import {
   getConnectionStringUsername,
   parseAuthMechanismProperties,
 } from '../../../utils/connection-string-helpers';
-import { useConnectionFormPreference } from '../../../hooks/use-connect-form-preferences';
+import { useConnectionFormSetting } from '../../../hooks/use-connect-form-settings';
 
 const GSSAPI_CANONICALIZE_HOST_NAME_OPTIONS: Record<
   string,
@@ -56,7 +56,7 @@ function AuthenticationGSSAPI({
 
   const [showPassword, setShowPassword] = useState<boolean>(false);
 
-  const showKerberosPasswordField = !!useConnectionFormPreference(
+  const showKerberosPasswordField = !!useConnectionFormSetting(
     'showKerberosPasswordField'
   );
 

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

@@ -31,7 +31,8 @@ async function renderConnectionForm(
       onSaveAndConnectClicked={(connectionInfo) => {
         void connectSpy(connectionInfo.connectionOptions);
       }}
-      preferences={{ enableOidc: true, showOIDCDeviceAuthFlow }}
+      enableOidc={true}
+      showOIDCDeviceAuthFlow={showOIDCDeviceAuthFlow}
       onSaveClicked={() => {
         return Promise.resolve();
       }}

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

@@ -16,7 +16,7 @@ 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';
+import { useConnectionFormSetting } from '../../../hooks/use-connect-form-settings';
 
 type AuthFlowType = NonNullable<OIDCOptions['allowedFlows']>[number];
 
@@ -50,7 +50,7 @@ function AuthenticationOIDC({
   const hasEnabledDeviceAuthFlow =
     !!connectionOptions.oidc?.allowedFlows?.includes?.('device-auth');
 
-  const showOIDCDeviceAuthFlow = !!useConnectionFormPreference(
+  const showOIDCDeviceAuthFlow = !!useConnectionFormSetting(
     'showOIDCDeviceAuthFlow'
   );
 
@@ -59,7 +59,7 @@ function AuthenticationOIDC({
     [openSettingsModal]
   );
   const showProxySettings =
-    useConnectionFormPreference('showProxySettings') && openSettingsModal;
+    useConnectionFormSetting('showProxySettings') && openSettingsModal;
   return (
     <>
       <FormFieldContainer>

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

@@ -8,26 +8,24 @@ import type { AuthMechanism } from 'mongodb';
 import AuthenticationTab from './authentication-tab';
 import type { ConnectionFormError } from '../../../utils/validation';
 import type { UpdateConnectionFormField } from '../../../hooks/use-connect-form';
-import { ConnectionFormPreferencesContext } from '../../../hooks/use-connect-form-preferences';
-import type { ConnectionFormPreferences } from '../../../hooks/use-connect-form-preferences';
+import { ConnectionFormSettingsContext } from '../../../hooks/use-connect-form-settings';
+import type { ConnectionFormSettings } from '../../../hooks/use-connect-form-settings';
 
 function renderComponent({
   errors = [],
   connectionStringUrl = new ConnectionStringUrl('mongodb://localhost:27017'),
-  connectionFormPreferences = {
+  connectionFormSettings = {
     enableOidc: true,
   },
   updateConnectionFormField,
 }: {
   connectionStringUrl?: ConnectionStringUrl;
-  connectionFormPreferences?: Partial<ConnectionFormPreferences>;
+  connectionFormSettings?: Partial<ConnectionFormSettings>;
   errors?: ConnectionFormError[];
   updateConnectionFormField: UpdateConnectionFormField;
 }) {
   render(
-    <ConnectionFormPreferencesContext.Provider
-      value={connectionFormPreferences}
-    >
+    <ConnectionFormSettingsContext.Provider value={connectionFormSettings}>
       <AuthenticationTab
         errors={errors}
         connectionStringUrl={connectionStringUrl}
@@ -36,7 +34,7 @@ function renderComponent({
           connectionString: 'mongodb://localhost:27017',
         }}
       />
-    </ConnectionFormPreferencesContext.Provider>
+    </ConnectionFormSettingsContext.Provider>
   );
 }
 
@@ -142,7 +140,7 @@ describe('AuthenticationTab Component', function () {
 
   it('should not render OIDC auth when its set to false in the preferences', function () {
     renderComponent({
-      connectionFormPreferences: { showOIDCAuth: false },
+      connectionFormSettings: { showOIDCAuth: false },
       updateConnectionFormField: updateConnectionFormFieldSpy,
     });
 
@@ -155,7 +153,7 @@ describe('AuthenticationTab Component', function () {
 
   it('should not render Kerberos auth when its set to false in the preferences', function () {
     renderComponent({
-      connectionFormPreferences: { showKerberosAuth: false },
+      connectionFormSettings: { showKerberosAuth: false },
       updateConnectionFormField: updateConnectionFormFieldSpy,
     });
 

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

@@ -20,7 +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';
+import { useConnectionFormSetting } from '../../../hooks/use-connect-form-settings';
 
 interface TabOption {
   id: AuthMechanism;
@@ -100,9 +100,9 @@ function AuthenticationTab({
   openSettingsModal?: (tab?: string) => void;
 }): React.ReactElement {
   // enableOIDC is the feature flag, showOIDC is the connection form preference.
-  const enableOIDC = !!useConnectionFormPreference('enableOidc');
-  const showOIDC = useConnectionFormPreference('showOIDCAuth');
-  const showKerberos = useConnectionFormPreference('showKerberosAuth');
+  const enableOIDC = !!useConnectionFormSetting('enableOidc');
+  const showOIDC = useConnectionFormSetting('showOIDCAuth');
+  const showKerberos = useConnectionFormSetting('showKerberosAuth');
   const enabledAuthOptions = useMemo(
     () =>
       options.filter((option) => {

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

@@ -35,7 +35,7 @@ import type {
   KMSProviderName,
 } from '../../../utils/csfle-kms-fields';
 import { KMSProviderFields } from '../../../utils/csfle-kms-fields';
-import { useConnectionFormPreference } from '../../../hooks/use-connect-form-preferences';
+import { useConnectionFormSetting } from '../../../hooks/use-connect-form-settings';
 
 const kmsProviderComponentWrapperStyles = css({
   paddingLeft: spacing[3],
@@ -96,7 +96,7 @@ function CSFLETab({
   const autoEncryptionOptions =
     connectionOptions.fleOptions?.autoEncryption ?? {};
 
-  const enableSchemaMapDebugFlag = useConnectionFormPreference(
+  const enableSchemaMapDebugFlag = useConnectionFormSetting(
     'enableDebugUseCsfleSchemaMap'
   );
 

packages/connection-form/src/components/advanced-options-tabs/ssh-tunnel-tab/proxy-and-ssh-tunnel-tab.tsx

@@ -22,7 +22,7 @@ import SshTunnelPassword from './ssh-tunnel-password';
 import Socks from './socks';
 import { AppProxy } from './app-proxy';
 import type { ConnectionFormError } from '../../../utils/validation';
-import { useConnectionFormPreference } from '../../../hooks/use-connect-form-preferences';
+import { useConnectionFormSetting } from '../../../hooks/use-connect-form-settings';
 
 interface TabOption {
   id: string;
@@ -127,7 +127,7 @@ function ProxyAndSshTunnelTab({
   );
 
   const options = [...tabOptions];
-  const showProxySettings = useConnectionFormPreference('showProxySettings');
+  const showProxySettings = useConnectionFormSetting('showProxySettings');
   if (showProxySettings) {
     options.push({
       title: 'Application-level Proxy',