feat(connections-navigation): connect in new window via connect split-button COMPASS-8473

packages/compass-components/package.json

@@ -46,7 +46,7 @@
     "@leafygreen-ui/guide-cue": "^7.0.2",
     "@leafygreen-ui/hooks": "^8.3.4",
     "@leafygreen-ui/icon": "^13.1.2",
-    "@leafygreen-ui/icon-button": "^16.0.2",
+    "@leafygreen-ui/icon-button": "16.0.2",
     "@leafygreen-ui/info-sprinkle": "^4.0.2",
     "@leafygreen-ui/leafygreen-provider": "^4.0.2",
     "@leafygreen-ui/logo": "^10.0.2",
@@ -63,6 +63,7 @@
     "@leafygreen-ui/search-input": "^5.0.2",
     "@leafygreen-ui/segmented-control": "^10.0.2",
     "@leafygreen-ui/select": "^14.0.2",
+    "@leafygreen-ui/split-button": "^4.1.5",
     "@leafygreen-ui/table": "^13.0.1",
     "@leafygreen-ui/tabs": "^14.0.2",
     "@leafygreen-ui/text-area": "^10.0.2",

packages/compass-components/src/components/actions/item-action-controls.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { spacing } from '@leafygreen-ui/tokens';
 import { css, cx } from '@leafygreen-ui/emotion';
 import type { RenderMode } from '@leafygreen-ui/popover';
@@ -47,8 +47,10 @@ export function ItemActionControls<Action extends string>({
   collapseToMenuThreshold = 2,
   'data-testid': dataTestId,
 }: ItemActionControlsProps<Action>) {
+  const [isHidable, setHidable] = useState(true);
+
   const sharedProps = {
-    isVisible,
+    setHidable,
     onAction,
     className: cx('item-action-controls', className),
     iconClassName,
@@ -61,7 +63,7 @@ export function ItemActionControls<Action extends string>({
     renderMode,
   };
 
-  if (actions.length === 0) {
+  if (actions.length === 0 || (isHidable && !isVisible)) {
     return null;
   }
 

packages/compass-components/src/components/actions/item-action-group.tsx

@@ -25,22 +25,28 @@ const containerStyle = css({
 export type ItemActionGroupProps<Action extends string> = {
   actions: (GroupedItemAction<Action> | ItemSeparator)[];
   onAction(actionName: Action): void;
+  isVisible?: boolean;
+  /**
+   * Called to signal to the parent if the component wants to prevent becoming hidden.
+   * Note: In the current implementation, this is called when a menu is opened.
+   */
+  setHidable?(hidable: boolean): void;
   className?: string;
   iconClassName?: string;
   iconStyle?: React.CSSProperties;
   iconSize?: ItemActionButtonSize;
-  isVisible?: boolean;
   'data-testid'?: string;
 };
 
 export function ItemActionGroup<Action extends string>({
   actions,
   onAction,
+  isVisible = true,
+  setHidable,
   className,
   iconClassName,
   iconStyle,
   iconSize = ItemActionButtonSize.Default,
-  isVisible = true,
   'data-testid': dataTestId,
 }: ItemActionGroupProps<Action>) {
   const onClick: React.MouseEventHandler<HTMLElement> = useCallback(
@@ -55,9 +61,7 @@ export function ItemActionGroup<Action extends string>({
     [onAction]
   );
 
-  const shouldRender = isVisible && actions.length > 0;
-
-  if (!shouldRender) {
+  if (!isVisible || actions.length === 0) {
     return null;
   }
 
@@ -84,6 +88,7 @@ export function ItemActionGroup<Action extends string>({
             iconClassName={iconClassName}
             onClick={onClick}
             data-testid={actionTestId(dataTestId, itemProps.action)}
+            setHidable={setHidable}
           />
         );
 

packages/compass-components/src/components/actions/item-action-menu.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import type { RenderMode } from '@leafygreen-ui/popover';
 
@@ -32,6 +32,12 @@ const containerStyle = css({
 
 export type ItemActionMenuProps<Action extends string> = {
   actions: MenuAction<Action>[];
+  isVisible?: boolean;
+  /**
+   * Called to signal to the parent if the component wants to prevent becoming hidden.
+   * Note: In the current implementation, this is called when a menu is opened.
+   */
+  setHidable?(hideable: boolean): void;
   onAction(actionName: Action): void;
   // TODO: Merge className and menuClassName
   className?: string;
@@ -40,13 +46,13 @@ export type ItemActionMenuProps<Action extends string> = {
   iconClassName?: string;
   iconStyle?: React.CSSProperties;
   iconSize?: ItemActionButtonSize;
-  isVisible?: boolean;
   'data-testid'?: string;
 };
 
 export function ItemActionMenu<Action extends string>({
-  isVisible = true,
   actions,
+  isVisible = true,
+  setHidable,
   onAction,
   className,
   menuClassName,
@@ -79,6 +85,13 @@ export function ItemActionMenu<Action extends string>({
     [onAction]
   );
 
+  // Opening the menu should keep it visible
+  useEffect(() => {
+    if (setHidable) {
+      setHidable(!isMenuOpen);
+    }
+  }, [setHidable, isMenuOpen]);
+
   const shouldRender = isMenuOpen || (isVisible && actions.length > 0);
 
   if (!shouldRender) {

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

@@ -27,7 +27,8 @@ 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;
 };
 
 export type ItemAction<Action extends string> = {

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

@@ -11,12 +11,14 @@ import Code, { Language } from '@leafygreen-ui/code';
 import ConfirmationModal from '@leafygreen-ui/confirmation-modal';
 import { default as LeafyGreenIcon } from '@leafygreen-ui/icon';
 import type { Size as LeafyGreenIconSize } from '@leafygreen-ui/icon';
+export type { GlyphName } from '@leafygreen-ui/icon';
 import {
   AtlasNavGraphic,
   MongoDBLogoMark,
   MongoDBLogo,
 } from '@leafygreen-ui/logo';
 import { Menu, MenuSeparator, MenuItem } from '@leafygreen-ui/menu';
+export type { MenuItemProps } from '@leafygreen-ui/menu';
 import { InfoSprinkle } from '@leafygreen-ui/info-sprinkle';
 
 // If a leafygreen Menu (and therefore MenuItems) makes its way into a <form>,

packages/compass-components/src/index.ts

@@ -68,6 +68,7 @@ export {
   Size as ButtonSize,
   Variant as ButtonVariant,
 } from '@leafygreen-ui/button';
+export { SplitButton } from '@leafygreen-ui/split-button';
 
 export { default as LeafyGreenProvider } from '@leafygreen-ui/leafygreen-provider';
 

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

@@ -0,0 +1,109 @@
+import React, {
+  useState,
+  useEffect,
+  forwardRef,
+  type ButtonHTMLAttributes,
+} from 'react';
+import {
+  css,
+  Icon,
+  MenuItem,
+  SplitButton,
+  type GlyphName,
+  type ItemComponentProps,
+  type MenuItemProps,
+} from '@mongodb-js/compass-components';
+import type { Actions } from './constants';
+
+const menuItemStyles = css({
+  minWidth: 'max-content',
+});
+
+type ConnectMenuItemProps = {
+  action: Actions;
+  glyph: GlyphName;
+} & Omit<
+  MenuItemProps & ButtonHTMLAttributes<HTMLButtonElement>,
+  'glyph' | 'as'
+>;
+
+export const ConnectMenuItem = forwardRef<
+  HTMLButtonElement,
+  ConnectMenuItemProps
+>(function ConnectMenuItem({ action, glyph, ...rest }, ref) {
+  return (
+    <MenuItem
+      as="button"
+      data-action={action}
+      className={menuItemStyles}
+      glyph={<Icon glyph={glyph} />}
+      {...rest}
+      ref={ref}
+    />
+  );
+});
+
+// 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}
+        >
+          Here
+        </ConnectMenuItem>,
+        <ConnectMenuItem
+          key="connection-connect-in-new-window"
+          action="connection-connect-in-new-window"
+          glyph="OpenNewTab"
+          onClick={onClick}
+        >
+          In New Window
+        </ConnectMenuItem>,
+      ]}
+    >
+      {label}
+    </SplitButton>
+  );
+}

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

@@ -4,33 +4,39 @@ import {
   type ItemComponentProps,
 } from '@mongodb-js/compass-components';
 import type { Actions } from './constants';
+import { usePreference } from 'compass-preferences-model/provider';
+import { ConnectButtonWithMenu } from './connect-button-with-menu';
 
-type ConnectButtonProps = ItemComponentProps<Actions>;
-
-export function ConnectButton({
-  action,
-  tooltip,
-  label,
-  iconSize,
-  iconStyle,
-  isDisabled,
-  onClick,
-  className,
-  'data-testid': testId,
-}: ConnectButtonProps) {
-  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>
-  );
+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-connections-navigation/src/constants.tsx

@@ -15,6 +15,7 @@ export type Actions =
   | 'duplicate-connection'
   | 'remove-connection'
   | 'connection-connect'
+  | 'connection-connect-in-new-window'
   | 'connection-disconnect'
   | 'connection-performance-metrics'
   | 'open-connection-info'

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

@@ -1420,6 +1420,12 @@ const openConnectionClosedWithNonRetryableErrorToast = (
   });
 };
 
+export const connectInNewWindow =
+  (connectionInfo: ConnectionInfo): ConnectionsThunkAction<void> =>
+  (_dispatch, _getState, { globalAppRegistry }) => {
+    globalAppRegistry.emit('connect-in-new-window', connectionInfo.id);
+  };
+
 export const connect = (
   connectionInfo: ConnectionInfo
 ): ConnectionsThunkAction<

packages/compass-connections/src/stores/store-context.tsx

@@ -18,6 +18,7 @@ import type {
 import {
   cancelEditConnection,
   connect as connectionsConnect,
+  connectInNewWindow,
   saveAndConnect,
   connectionsEventEmitter,
   createNewConnection,
@@ -88,6 +89,9 @@ function getConnectionsActions(dispatch: ConnectionsStore['dispatch']) {
     connect: (connectionInfo: ConnectionInfo) => {
       return dispatch(connectionsConnect(connectionInfo));
     },
+    connectInNewWindow: (connectionInfo: ConnectionInfo) => {
+      return dispatch(connectInNewWindow(connectionInfo));
+    },
     saveAndConnect: (connectionInfo: ConnectionInfo) => {
       return dispatch(saveAndConnect(connectionInfo));
     },