Add enableConnectInNewWindow preference controlling connect button

Author: kraenhansen

packages/compass-components/src/components/actions/types.ts

@@ -27,7 +27,7 @@ export type ItemComponentProps<Action extends string> = Omit<
   iconClassName?: string;
   iconStyle?: React.CSSProperties;
   'data-testid'?: string;
-  onClick(evt: React.MouseEvent<unknown>): void;
+  onClick: (evt: React.MouseEvent<HTMLElement>) => void;
   setHidable?(hidable: boolean): void;
 };
 

packages/compass-connections-navigation/src/connect-button-with-menu.tsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react';
+import {
+  css,
+  Icon,
+  MenuItem,
+  SplitButton,
+  type GlyphName,
+  type ItemComponentProps,
+  type PolymorphicProps,
+  type MenuItemProps,
+} from '@mongodb-js/compass-components';
+import type { Actions } from './constants';
+
+const menuItemStyles = css({
+  minWidth: 'max-content',
+});
+
+type ConnectMenuItemProps = {
+  action: Actions;
+  glyph: GlyphName;
+} & PolymorphicProps<'button', Omit<MenuItemProps, 'glyph'>>;
+
+function ConnectMenuItem({ action, glyph, ...rest }: ConnectMenuItemProps) {
+  return (
+    <MenuItem
+      data-action={action}
+      className={menuItemStyles}
+      glyph={<Icon glyph={glyph} />}
+      {...rest}
+    />
+  );
+}
+
+// Hack to make SplitButton consider this as a MenuItem
+ConnectMenuItem.displayName = 'MenuItem';
+
+export function ConnectButtonWithMenu({
+  setHidable,
+  action,
+  tooltip,
+  label,
+  iconSize,
+  iconStyle,
+  isDisabled,
+  onClick,
+  className,
+  'data-testid': testId,
+}: ItemComponentProps<Actions>) {
+  const [isOpen, setOpen] = useState(false);
+
+  // Opening the menu should keep it visible
+  useEffect(() => {
+    if (setHidable) {
+      setHidable(!isOpen);
+    }
+  }, [setHidable, isOpen]);
+
+  return (
+    <SplitButton
+      key={action}
+      title={!tooltip ? label : undefined}
+      label={label}
+      size={iconSize}
+      data-action={action}
+      data-testid={testId}
+      onClick={onClick}
+      className={className}
+      style={iconStyle}
+      disabled={isDisabled}
+      renderDarkMenu={false}
+      darkMode={false}
+      open={isOpen}
+      setOpen={setOpen}
+      triggerAriaLabel="see more connection options"
+      menuItems={[
+        <ConnectMenuItem
+          key="connection-connect"
+          action="connection-connect"
+          glyph="Connect"
+          onClick={onClick}
+        >
+          Connect Here
+        </ConnectMenuItem>,
+        <ConnectMenuItem
+          key="connection-connect-in-new-window"
+          action="connection-connect-in-new-window"
+          glyph="OpenNewTab"
+          onClick={onClick}
+        >
+          Connect in a New Window
+        </ConnectMenuItem>,
+      ]}
+    >
+      {label}
+    </SplitButton>
+  );
+}

packages/compass-connections-navigation/src/connect-button.tsx

@@ -1,99 +1,42 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import {
-  css,
-  Icon,
-  MenuItem,
-  SplitButton,
-  type GlyphName,
+  Button,
   type ItemComponentProps,
-  type PolymorphicProps,
-  type MenuItemProps,
 } from '@mongodb-js/compass-components';
 import type { Actions } from './constants';
-
-const menuItemStyles = css({
-  minWidth: 'max-content',
-});
-
-type ConnectMenuItemProps = {
-  action: Actions;
-  glyph: GlyphName;
-} & PolymorphicProps<'button', Omit<MenuItemProps, 'glyph'>>;
-
-function ConnectMenuItem({ action, glyph, ...rest }: ConnectMenuItemProps) {
-  return (
-    <MenuItem
-      data-action={action}
-      className={menuItemStyles}
-      glyph={<Icon glyph={glyph} />}
-      {...rest}
-    />
-  );
-}
-
-// Hack to make SplitButton consider this as a MenuItem
-ConnectMenuItem.displayName = 'MenuItem';
-
-type ConnectButtonProps = ItemComponentProps<Actions>;
-
-export function ConnectButton({
-  setHidable,
-  action,
-  tooltip,
-  label,
-  iconSize,
-  iconStyle,
-  isDisabled,
-  onClick,
-  className,
-  'data-testid': testId,
-}: ConnectButtonProps) {
-  const [isOpen, setOpen] = useState(false);
-
-  // Opening the menu should keep it visible
-  useEffect(() => {
-    if (setHidable) {
-      setHidable(!isOpen);
-    }
-  }, [setHidable, isOpen]);
-
-  return (
-    <SplitButton
-      key={action}
-      title={!tooltip ? label : undefined}
-      label={label}
-      size={iconSize}
-      data-action={action}
-      data-testid={testId}
-      onClick={onClick}
-      className={className}
-      style={iconStyle}
-      disabled={isDisabled}
-      renderDarkMenu={false}
-      darkMode={false}
-      open={isOpen}
-      setOpen={setOpen}
-      triggerAriaLabel="see more connection options"
-      menuItems={[
-        <ConnectMenuItem
-          key="connection-connect"
-          action="connection-connect"
-          glyph="Connect"
-          onClick={onClick}
-        >
-          Connect Here
-        </ConnectMenuItem>,
-        <ConnectMenuItem
-          key="connection-connect-in-new-window"
-          action="connection-connect-in-new-window"
-          glyph="OpenNewTab"
-          onClick={onClick}
-        >
-          Connect in a New Window
-        </ConnectMenuItem>,
-      ]}
-    >
-      {label}
-    </SplitButton>
-  );
+import { usePreference } from 'compass-preferences-model/provider';
+import { ConnectButtonWithMenu } from './connect-button-with-menu';
+
+export function ConnectButton(props: ItemComponentProps<Actions>) {
+  const connectInNewWindowEnabled = usePreference('enableConnectInNewWindow');
+  if (connectInNewWindowEnabled) {
+    return <ConnectButtonWithMenu {...props} />;
+  } else {
+    const {
+      action,
+      tooltip,
+      label,
+      iconSize,
+      iconStyle,
+      isDisabled,
+      onClick,
+      className,
+      'data-testid': testId,
+    } = props;
+    return (
+      <Button
+        key={action}
+        title={!tooltip ? label : undefined}
+        size={iconSize}
+        data-action={action}
+        data-testid={testId}
+        onClick={onClick}
+        className={className}
+        style={iconStyle}
+        disabled={isDisabled}
+      >
+        {label}
+      </Button>
+    );
+  }
 }

packages/compass-preferences-model/src/preferences-schema.ts

@@ -84,8 +84,10 @@ export type UserConfigurablePreferences = PermanentFeatureFlags &
     proxy: string;
   };
 
+/**
+ * Internally used preferences that are not configurable
+ */
 export type InternalUserPreferences = {
-  // These are internally used preferences that are not configurable
   // by users.
   showedNetworkOptIn: boolean; // Has the settings dialog been shown before.
   id: string;
@@ -98,6 +100,7 @@ export type InternalUserPreferences = {
   telemetryAnonymousId?: string;
   telemetryAtlasUserId?: string;
   userCreatedAt: number;
+  enableConnectInNewWindow: boolean;
 };
 
 // UserPreferences contains all preferences stored to disk.
@@ -404,6 +407,17 @@ export const storedUserPreferencesProps: Required<{
     validator: z.number().default(Date.now()),
     type: 'number',
   },
+  /**
+   * Enables a dropdown in the connections sidebar to connect in a new window.
+   */
+  enableConnectInNewWindow: {
+    ui: false,
+    cli: false,
+    global: false,
+    description: null,
+    validator: z.boolean().default(true),
+    type: 'boolean',
+  },
   /**
    * Enable/disable the AI services. This is currently set
    * in the atlas-service initialization where we make a request to the

packages/compass-web/src/preferences.tsx

@@ -56,6 +56,7 @@ export function useCompassWebPreferences(
       enableCreatingNewConnections: false,
       enableGlobalWrites: false,
       optInDataExplorerGenAIFeatures: false,
+      enableConnectInNewWindow: false,
       ...initialPreferences,
     })
   );