feat(compass-settings): add OIDC browser setting COMPASS-6849 (#4469)

Anemy · web-flow · commit c9c3ca961266 · 2023-06-05T11:32:16.000-04:00
diff --git a/packages/compass-connections/src/components/connections.spec.tsx b/packages/compass-connections/src/components/connections.spec.tsx
@@ -206,6 +206,7 @@ describe('Connections Component', function () {
         expect(mockConnectFn.firstCall.args[0]).to.deep.equal({
           connectionString:
             'mongodb://localhost:27018/?readPreference=primary&ssl=false&appName=Test+App+Name',
+          oidc: {},
         });
       });
 
@@ -258,6 +259,7 @@ describe('Connections Component', function () {
         expect(mockConnectFn.callCount).to.equal(1);
         expect(mockConnectFn.firstCall.args[0]).to.deep.equal({
           connectionString: 'mongodb://localhost:27019/?appName=Some+App+Name',
+          oidc: {},
         });
       });
     });
@@ -380,6 +382,7 @@ describe('Connections Component', function () {
         expect(mockConnectFn.firstCall.args[0]).to.deep.equal({
           connectionString:
             'mongodb://localhost:27099/?connectTimeoutMS=5000&serverSelectionTimeoutMS=5000&appName=Test+App+Name',
+          oidc: {},
         });
       });
 
@@ -416,6 +419,7 @@ describe('Connections Component', function () {
           expect(mockConnectFn.secondCall.args[0]).to.deep.equal({
             connectionString:
               'mongodb://localhost:27018/?readPreference=primary&ssl=false&appName=Test+App+Name',
+            oidc: {},
           });
         });
 
diff --git a/packages/compass-e2e-tests/tests/oidc.test.ts b/packages/compass-e2e-tests/tests/oidc.test.ts
@@ -34,6 +34,17 @@ const DEFAULT_AUTH_INFO = {
   authenticatedUserRoles: [{ role: 'dev/testgroup', db: 'admin' }],
 };
 
+const host = '127.0.0.1';
+
+function getTestBrowserShellCommand() {
+  return `${process.execPath} ${path.resolve(
+    __dirname,
+    '..',
+    'fixtures',
+    'curl.js'
+  )}`;
+}
+
 describe('OIDC integration', function () {
   let compass: Compass;
   let browser: CompassBrowser;
@@ -44,6 +55,7 @@ describe('OIDC integration', function () {
   let oidcMockProvider: OIDCMockProvider;
 
   let i = 0;
+  let port: number;
   let tmpdir: string;
   let server: ChildProcess;
   let serverExit: Promise<unknown>;
@@ -121,7 +133,7 @@ describe('OIDC integration', function () {
 
       serverExit = once(server, 'exit');
 
-      const port = await Promise.race([
+      port = await Promise.race([
         serverExit.then((code) => {
           throw new Error(`mongod exited with code ${code}`);
         }),
@@ -141,28 +153,33 @@ describe('OIDC integration', function () {
         })(),
       ]);
 
-      connectionString = `mongodb://127.0.0.1:${port}/?authMechanism=MONGODB-OIDC`;
+      connectionString = `mongodb://${host}:${port}/?authMechanism=MONGODB-OIDC`;
     }
-
-    process.env.COMPASS_TEST_OIDC_BROWSER_DUMMY = `${
-      process.execPath
-    } ${path.resolve(__dirname, '..', 'fixtures', 'curl.js')}`;
   });
 
   beforeEach(async function () {
     getTokenPayload = () => DEFAULT_TOKEN_PAYLOAD;
     overrideRequestHandler = () => {};
-    compass = await beforeTests();
+    compass = await beforeTests({
+      // TODO(COMPASS-6803): Remove feature flag: enableOidc.
+      // Note: This isn't needed to connect, but shows the oidc options in the
+      // connect form and settings.
+      extraSpawnArgs: ['--enable-oidc'],
+    });
     browser = compass.browser;
+    await browser.setFeature(
+      'browserCommandForOIDCAuth',
+      getTestBrowserShellCommand()
+    );
   });
 
   afterEach(async function () {
+    await browser.setFeature('browserCommandForOIDCAuth', undefined);
     await afterTest(compass, this.currentTest);
     await afterTests(compass, this.currentTest);
   });
 
   after(async function () {
-    delete process.env.COMPASS_TEST_OIDC_BROWSER_DUMMY;
     server?.kill();
     await serverExit;
     await oidcMockProvider?.close();
@@ -223,4 +240,28 @@ describe('OIDC integration', function () {
 
     expect(result).to.deep.equal(DEFAULT_AUTH_INFO);
   });
+
+  it('can successfully connect with the connection form', async function () {
+    let tokenFetchCalls = 0;
+    getTokenPayload = () => {
+      tokenFetchCalls++;
+      return DEFAULT_TOKEN_PAYLOAD;
+    };
+
+    await browser.setConnectFormState({
+      hosts: [`${host}:${port}`],
+      authMethod: 'MONGODB-OIDC',
+    });
+    await browser.clickVisible(Selectors.ConnectButton);
+
+    await browser.waitForConnectionResult('success');
+
+    const result: any = await browser.shellEval(
+      'db.runCommand({ connectionStatus: 1 }).authInfo',
+      true
+    );
+
+    expect(tokenFetchCalls).to.equal(1); // No separate request from the shell.
+    expect(result).to.deep.equal(DEFAULT_AUTH_INFO);
+  });
 });
diff --git a/packages/compass-preferences-model/src/preferences.ts b/packages/compass-preferences-model/src/preferences.ts
@@ -37,6 +37,7 @@ export type UserConfigurablePreferences = PermanentFeatureFlags &
     forceConnectionOptions?: [key: string, value: string][];
     showKerberosPasswordField: boolean;
     showOIDCDeviceAuthFlow: boolean;
+    browserCommandForOIDCAuth?: string;
     enableDevTools: boolean;
     theme: THEMES;
     maxTimeMS?: number;
@@ -532,6 +533,21 @@ const modelPreferencesProps: Required<{
       long: 'Show a checkbox on the connection form to enable device auth flow authentication. This enables a less secure authentication flow that can be used as a fallback when browser-based authentication is unavailable.',
     },
   },
+  /**
+   * Input to change the browser command used for OIDC authentication.
+   */
+  browserCommandForOIDCAuth: {
+    type: 'string',
+    required: false,
+    default: undefined,
+    ui: true,
+    cli: true,
+    global: true,
+    description: {
+      short: 'Browser command to use for OIDC Authentication',
+      long: 'Specify a shell command that is run to start the browser for authenticating with the OIDC identity provider. Leave this empty for default browser.',
+    },
+  },
   /**
    * Override certain connection string properties.
    */
diff --git a/packages/compass-settings/src/components/settings/oidc-settings.tsx b/packages/compass-settings/src/components/settings/oidc-settings.tsx
@@ -7,7 +7,10 @@ import type { SettingsListProps } from './settings-list';
 import { SettingsList } from './settings-list';
 import { pick } from '../../utils/pick';
 
-const oidcFields = ['showOIDCDeviceAuthFlow'] as const;
+const oidcFields = [
+  'browserCommandForOIDCAuth',
+  'showOIDCDeviceAuthFlow',
+] as const;
 type OIDCFields = typeof oidcFields[number];
 type OIDCSettingsProps = Omit<SettingsListProps<OIDCFields>, 'fields'>;
 
diff --git a/packages/compass-settings/src/components/settings/settings-list.tsx b/packages/compass-settings/src/components/settings/settings-list.tsx
@@ -19,7 +19,7 @@ import {
 type KeysMatching<T, V> = keyof {
   [P in keyof T as T[P] extends V ? P : never]: P;
 };
-// Currently, only boolean and numeric options are supported in the UI.
+// Currently, boolean, numeric, and string options are supported in the UI.
 type BooleanPreferences = KeysMatching<
   UserConfigurablePreferences,
   boolean | undefined
@@ -28,7 +28,14 @@ type NumericPreferences = KeysMatching<
   UserConfigurablePreferences,
   number | undefined
 >;
-type SupportedPreferences = BooleanPreferences | NumericPreferences;
+type StringPreferences = KeysMatching<
+  UserConfigurablePreferences,
+  string | undefined
+>;
+type SupportedPreferences =
+  | BooleanPreferences
+  | NumericPreferences
+  | StringPreferences;
 
 const inputStyles = css({
   marginTop: spacing[3],
@@ -148,6 +155,51 @@ function NumericSetting<PreferenceName extends NumericPreferences>({
     </>
   );
 }
+function StringSetting<PreferenceName extends StringPreferences>({
+  name,
+  handleChange,
+  value,
+  disabled,
+  required,
+}: {
+  name: PreferenceName;
+  handleChange: HandleChange<PreferenceName>;
+  value: string | undefined;
+  disabled: boolean;
+  required: boolean;
+}) {
+  const handleChangeEvent = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const { value } = event.target;
+      handleChange(
+        name,
+        (value === ''
+          ? required
+            ? ''
+            : undefined
+          : value) as UserConfigurablePreferences[PreferenceName]
+      );
+    },
+    [name, handleChange, required]
+  );
+
+  return (
+    <>
+      <SettingLabel name={name} />
+      <TextInput
+        className={inputStyles}
+        aria-labelledby={`${name}-label`}
+        id={name}
+        name={name}
+        data-testid={name}
+        value={value === undefined ? '' : `${value}`}
+        onChange={handleChangeEvent}
+        disabled={disabled}
+        optional={!required}
+      />
+    </>
+  );
+}
 
 export function SettingsList<PreferenceName extends SupportedPreferences>({
   fields,
@@ -159,7 +211,7 @@ export function SettingsList<PreferenceName extends SupportedPreferences>({
     <>
       {fields.map((name) => {
         const { type, required } = getSettingDescription(name);
-        if (type !== 'boolean' && type !== 'number') {
+        if (type !== 'boolean' && type !== 'number' && type !== 'string') {
           throw new Error(
             `do not know how to render type ${
               type as string
@@ -186,6 +238,16 @@ export function SettingsList<PreferenceName extends SupportedPreferences>({
                   required={required}
                   disabled={!!preferenceStates[name]}
                 />
+              ) : type === 'string' ? (
+                <StringSetting
+                  name={name as StringPreferences}
+                  handleChange={handleChange}
+                  value={
+                    currentValues[name as StringPreferences & PreferenceName]
+                  }
+                  required={required}
+                  disabled={!!preferenceStates[name]}
+                />
               ) : null}
               {settingStateLabels[preferenceStates[name] ?? '']}
             </FormFieldContainer>
diff --git a/packages/connection-form/src/hooks/use-connect-form.ts b/packages/connection-form/src/hooks/use-connect-form.ts
@@ -56,7 +56,7 @@ import type {
 } from '../utils/csfle-handler';
 import {
   handleUpdateOIDCParam,
-  setOIDCNotifyDeviceFlow,
+  adjustOIDCConnectionOptionsBeforeConnect,
 } from '../utils/oidc-handler';
 import type { UpdateOIDCAction } from '../utils/oidc-handler';
 import { setAppNameParamIfMissing } from '../utils/set-app-name-if-missing';
@@ -708,7 +708,7 @@ export function adjustConnectionOptionsBeforeConnect({
   ) => ConnectionOptions)[] = [
     adjustCSFLEParams,
     setAppNameParamIfMissing(defaultAppName),
-    setOIDCNotifyDeviceFlow(notifyDeviceFlow),
+    adjustOIDCConnectionOptionsBeforeConnect(notifyDeviceFlow),
     applyForceConnectionOptions,
   ];
   for (const transformer of transformers) {
diff --git a/packages/connection-form/src/utils/oidc-handler.spec.ts b/packages/connection-form/src/utils/oidc-handler.spec.ts
diff --git a/packages/connection-form/src/utils/oidc-handler.ts b/packages/connection-form/src/utils/oidc-handler.ts
diff --git a/packages/data-service/src/connect-mongo-client.ts b/packages/data-service/src/connect-mongo-client.ts
