WIP drawer section guidecue hack

packages/compass-assistant/src/compass-assistant-drawer.tsx

@@ -3,11 +3,13 @@ import {
   Badge,
   css,
   DrawerSection,
+  GuideCue,
   Icon,
   IconButton,
   showConfirmation,
   spacing,
 } from '@mongodb-js/compass-components';
+import { type IconButtonPropsWithoutChildren } from '@mongodb-js/compass-components/src/components/toolbar';
 import { AssistantChat } from './components/assistant-chat';
 import {
   ASSISTANT_DRAWER_ID,
@@ -35,9 +37,10 @@ const assistantTitleTextStyles = css({
  * it's within an AssistantProvider.
  */
 export const CompassAssistantDrawer: React.FunctionComponent<{
+  appName: string;
   autoOpen?: boolean;
   hasNonGenuineConnections?: boolean;
-}> = ({ autoOpen, hasNonGenuineConnections = false }) => {
+}> = ({ appName, autoOpen, hasNonGenuineConnections = false }) => {
   const chat = useContext(AssistantContext);
   const { clearChat } = useContext(AssistantActionsContext);
 
@@ -90,7 +93,28 @@ export const CompassAssistantDrawer: React.FunctionComponent<{
         </div>
       }
       label="MongoDB Assistant"
-      glyph="Sparkle"
+      glyph={({
+        buttonProps,
+      }: {
+        buttonProps: IconButtonPropsWithoutChildren;
+      }) => (
+        <GuideCue<HTMLButtonElement>
+          cueId="assistant-drawer"
+          title="Introducing MongoDB Assistant"
+          description={`AI-powered assistant to intelligently guide you through your database tasks. Get expert MongoDB help and streamline your workflow directly within ${appName}`}
+          buttonText="Got it"
+          onPrimaryButtonClick={() => {}}
+          tooltipAlign="left"
+          tooltipJustify="start"
+          trigger={({ ref: guideCueRef }) => {
+            return (
+              <IconButton {...buttonProps} ref={guideCueRef}>
+                <Icon glyph="Sparkle" />
+              </IconButton>
+            );
+          }}
+        />
+      )}
       autoOpen={autoOpen}
     >
       <AssistantChat

packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout-container.tsx

@@ -81,9 +81,9 @@ export const DrawerToolbarLayoutContainer = forwardRef<
           isDrawerOpen={isDrawerOpen}
         >
           <Toolbar data-lgid={lgIds.toolbar} data-testid={lgIds.toolbar}>
-            {toolbarData?.map((toolbarItem) => (
+            {toolbarData?.map((toolbarItem, index) => (
               <ToolbarIconButton
-                key={toolbarItem.glyph}
+                key={index}
                 glyph={toolbarItem.glyph}
                 label={toolbarItem.label}
                 onClick={(event: React.MouseEvent<HTMLButtonElement>) => {

packages/compass-components/src/components/toolbar/index.ts

@@ -4,4 +4,5 @@ export {
   ToolbarIconButton,
   type ToolbarIconButtonProps,
 } from './toolbar-icon-button';
+export { type IconButtonPropsWithoutChildren } from './toolbar-icon-button/toolbar-icon-button.types';
 export { DEFAULT_LGID_ROOT, getLgIds, type GetLgIdsReturnType } from './utils';

packages/compass-components/src/components/toolbar/toolbar-icon-button/index.ts

@@ -1,2 +1,5 @@
 export { ToolbarIconButton } from './toolbar-icon-button';
-export { type ToolbarIconButtonProps } from './toolbar-icon-button.types';
+export {
+  type ToolbarIconButtonProps,
+  type IconButtonPropsWithoutChildren,
+} from './toolbar-icon-button.types';

packages/compass-components/src/components/toolbar/toolbar-icon-button/toolbar-icon-button.tsx

@@ -1,4 +1,4 @@
-import React, { type ComponentPropsWithoutRef, useEffect } from 'react';
+import React, { useEffect } from 'react';
 
 import { useDescendant } from '@leafygreen-ui/descendants';
 import Icon from '@leafygreen-ui/icon';
@@ -13,7 +13,19 @@ import {
   getIconButtonStyles,
   triggerStyles,
 } from './toolbar-icon-button.styles';
-import { type ToolbarIconButtonProps } from './toolbar-icon-button.types';
+import {
+  type IconButtonPropsWithoutChildren,
+  type ToolbarIconButtonProps,
+} from './toolbar-icon-button.types';
+
+type IconButtonProps = Omit<
+  React.ComponentProps<typeof IconButton>,
+  'children'
+> & {
+  'data-testid': string;
+  'data-lgid': string;
+  'data-active': boolean;
+};
 
 export const ToolbarIconButton = React.forwardRef<
   HTMLButtonElement,
@@ -60,35 +72,43 @@ export const ToolbarIconButton = React.forwardRef<
       if (isFocusable && shouldFocus) ref.current?.focus();
     }, [isFocusable, ref, shouldFocus]);
 
+    const renderButton =
+      typeof glyph === 'function'
+        ? glyph
+        : ({ buttonProps }: { buttonProps: IconButtonProps }) => (
+            <IconButton {...(buttonProps as IconButtonPropsWithoutChildren)}>
+              <Icon glyph={glyph} />
+            </IconButton>
+          );
+
     return (
       <Tooltip
         data-testid={`${lgIds.iconButtonTooltip}-${index}`}
         data-lgid={`${lgIds.iconButtonTooltip}-${index}`}
         align={Align.Left}
         trigger={
           <div className={triggerStyles}>
-            <IconButton
-              aria-label={ariaLabel || getNodeTextContent(label)}
-              active={active}
-              className={getIconButtonStyles({
-                theme,
-                active,
-                disabled,
-                className,
-              })}
-              tabIndex={isFocusable ? 0 : -1}
-              onClick={(event: React.MouseEvent<HTMLButtonElement>) =>
-                handleOnIconButtonClick(event, index, onClick)
-              }
-              disabled={disabled}
-              data-testid={`${lgIds.iconButton}-${index}`}
-              data-lgid={`${lgIds.iconButton}-${index}`}
-              data-active={active}
-              ref={ref}
-              {...(rest as ComponentPropsWithoutRef<'button'>)}
-            >
-              <Icon glyph={glyph} />
-            </IconButton>
+            {renderButton({
+              buttonProps: {
+                'aria-label': ariaLabel || getNodeTextContent(label),
+                active: active,
+                className: getIconButtonStyles({
+                  theme,
+                  active,
+                  disabled,
+                  className,
+                }),
+                tabIndex: isFocusable ? 0 : -1,
+                onClick: (event: React.MouseEvent<HTMLButtonElement>) =>
+                  handleOnIconButtonClick(event, index, onClick),
+                disabled: disabled,
+                'data-testid': `${lgIds.iconButton}-${index}`,
+                'data-lgid': `${lgIds.iconButton}-${index}`,
+                'data-active': active,
+                ref: ref,
+                ...rest,
+              } as IconButtonPropsWithoutChildren,
+            })}
           </div>
         }
       >

packages/compass-components/src/components/toolbar/toolbar-icon-button/toolbar-icon-button.types.ts

@@ -1,5 +1,6 @@
 import type { GlyphName } from '@leafygreen-ui/icon';
 import type { BaseIconButtonProps as IconButtonProps } from '@leafygreen-ui/icon-button';
+import type IconButton from '@leafygreen-ui/icon-button';
 
 type ButtonProps = Omit<
   IconButtonProps,
@@ -13,11 +14,27 @@ type ButtonProps = Omit<
   | 'onClick'
 >;
 
+export type IconButtonPropsWithoutChildren = Omit<
+  React.ComponentProps<typeof IconButton>,
+  'children'
+> & {
+  'data-testid': string;
+  'data-lgid': string;
+  'data-active': boolean;
+  'aria-labelledby': string;
+};
+
 export interface ToolbarIconButtonProps extends ButtonProps {
   /**
    * The LG Icon that will render in the button
    */
-  glyph: GlyphName;
+  glyph:
+    | GlyphName
+    | (({
+        buttonProps,
+      }: {
+        buttonProps: IconButtonPropsWithoutChildren;
+      }) => React.ReactNode);
 
   /**
    * The text that will render in the tooltip on hover

packages/compass-web/src/compass-assistant-drawer.tsx

@@ -6,7 +6,11 @@ import { CompassAssistantDrawer } from '@mongodb-js/compass-assistant';
 // TODO(COMPASS-7830): This is a temporary solution to pass the
 // hasNonGenuineConnections prop to the CompassAssistantDrawer as otherwise
 // we end up with a circular dependency.
-export function CompassAssistantDrawerWithConnections() {
+export function CompassAssistantDrawerWithConnections({
+  appName,
+}: {
+  appName: string;
+}) {
   // Check for non-genuine connections
   const activeConnectionIds = useConnectionIds(
     (conn) =>
@@ -15,6 +19,7 @@ export function CompassAssistantDrawerWithConnections() {
   );
   return (
     <CompassAssistantDrawer
+      appName={appName}
       hasNonGenuineConnections={activeConnectionIds.length > 0}
     />
   );

packages/compass-web/src/entrypoint.tsx

@@ -228,7 +228,7 @@ function CompassWorkspace({
                   <CreateNamespacePlugin></CreateNamespacePlugin>
                   <DropNamespacePlugin></DropNamespacePlugin>
                   <RenameCollectionPlugin></RenameCollectionPlugin>
-                  <CompassAssistantDrawerWithConnections />
+                  <CompassAssistantDrawerWithConnections appName="Data Explorer" />
                 </>
               );
             }}

packages/compass/src/app/components/compass-assistant-drawer.tsx

@@ -6,7 +6,11 @@ import { CompassAssistantDrawer } from '@mongodb-js/compass-assistant';
 // TODO(COMPASS-7830): This is a temporary solution to pass the
 // hasNonGenuineConnections prop to the CompassAssistantDrawer as otherwise
 // we end up with a circular dependency.
-export function CompassAssistantDrawerWithConnections() {
+export function CompassAssistantDrawerWithConnections({
+  appName,
+}: {
+  appName: string;
+}) {
   // Check for non-genuine connections
   const activeConnectionIds = useConnectionIds(
     (conn) =>
@@ -15,6 +19,7 @@ export function CompassAssistantDrawerWithConnections() {
   );
   return (
     <CompassAssistantDrawer
+      appName={appName}
       hasNonGenuineConnections={activeConnectionIds.length > 0}
     />
   );

packages/compass/src/app/components/workspace.tsx

@@ -112,7 +112,7 @@ export default function Workspace({
               <CreateNamespacePlugin></CreateNamespacePlugin>
               <DropNamespacePlugin></DropNamespacePlugin>
               <RenameCollectionPlugin></RenameCollectionPlugin>
-              <CompassAssistantDrawerWithConnections />
+              <CompassAssistantDrawerWithConnections appName="Compass" />
             </>
           )}
         ></WorkspacesPlugin>