Wire up the ConnectButton

Author: kraenhansen

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>,
@@ -30,6 +32,10 @@ import { InfoSprinkle } from '@leafygreen-ui/info-sprinkle';
 import Modal, { Footer as ModalFooter } from '@leafygreen-ui/modal';
 import MarketingModal from '@leafygreen-ui/marketing-modal';
 import { Pipeline, Stage } from '@leafygreen-ui/pipeline';
+export type {
+  InferredPolymorphicProps,
+  PolymorphicProps,
+} from '@leafygreen-ui/polymorphic';
 import Popover from '@leafygreen-ui/popover';
 import { RadioBox, RadioBoxGroup } from '@leafygreen-ui/radio-box-group';
 import { Radio, RadioGroup } from '@leafygreen-ui/radio-group';

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

@@ -4,13 +4,37 @@ import {
   Icon,
   MenuItem,
   SplitButton,
+  type GlyphName,
   type ItemComponentProps,
+  type PolymorphicProps,
+  type MenuItemProps,
 } from '@mongodb-js/compass-components';
 
+import type { Actions } from './constants';
+
 const menuItemStyles = css({
-  width: 'max-content',
+  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;
 
 export function ConnectButton({
@@ -50,17 +74,24 @@ export function ConnectButton({
       darkMode={false}
       open={isOpen}
       setOpen={setOpen}
+      triggerAriaLabel="see more connection options"
       menuItems={[
-        <MenuItem key="connect-here" glyph={<Icon glyph="Connect" />}>
+        <ConnectMenuItem
+          key="connection-connect"
+          action="connection-connect"
+          glyph="Connect"
+          onClick={onClick}
+        >
           Connect Here
-        </MenuItem>,
-        <MenuItem
-          key="connect-in-new-window"
-          className={menuItemStyles}
-          glyph={<Icon glyph="OpenNewTab" />}
+        </ConnectMenuItem>,
+        <ConnectMenuItem
+          key="connection-connect-in-new-window"
+          action="connection-connect-in-new-window"
+          glyph="OpenNewTab"
+          onClick={onClick}
         >
           Connect in a New Window
-        </MenuItem>,
+        </ConnectMenuItem>,
       ]}
     >
       {label}