feat(compass-assistant): track opening and closing the drawer sections COMPASS-9884 (#7372)

* track opening and closing the assistant

* rather make the drawer section tracking part of the drawer for all drawer sections

* DrawerPortal unit tests

* redundant checks

Author: lerouxb

packages/compass-assistant/src/components/assistant-chat.tsx

@@ -359,7 +359,7 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
         void ensureOptInAndSend?.(undefined, {}, () => {});
       }
     },
-    [ensureOptInAndSend, setMessages]
+    [ensureOptInAndSend, setMessages, track]
   );
 
   return (

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

@@ -61,6 +61,9 @@ type CompassComponentsProviderProps = {
     itemGroup: ContextMenuItemGroup,
     item: ContextMenuItem
   ) => void;
+} & {
+  onDrawerSectionOpen?: (drawerSectionId: string) => void;
+  onDrawerSectionHide?: (drawerSectionId: string) => void;
 } & React.ComponentProps<typeof SignalHooksProvider>;
 
 const darkModeMediaQuery = (() => {
@@ -119,6 +122,8 @@ export const CompassComponentsProvider = ({
   onNextGuideCueGroup,
   onContextMenuOpen,
   onContextMenuItemClick,
+  onDrawerSectionOpen,
+  onDrawerSectionHide,
   utmSource,
   utmMedium,
   stackedElementsZIndex,
@@ -149,7 +154,10 @@ export const CompassComponentsProvider = ({
       darkMode={darkMode}
       popoverPortalContainer={popoverPortalContainer}
     >
-      <DrawerContentProvider>
+      <DrawerContentProvider
+        onDrawerSectionOpen={onDrawerSectionOpen}
+        onDrawerSectionHide={onDrawerSectionHide}
+      >
         <StackedComponentProvider zIndex={stackedElementsZIndex}>
           <RequiredURLSearchParamsProvider
             utmSource={utmSource}

packages/compass-components/src/components/drawer-portal.spec.tsx

@@ -13,6 +13,7 @@ import {
   useDrawerActions,
 } from './drawer-portal';
 import { expect } from 'chai';
+import sinon from 'sinon';
 
 describe('DrawerSection', function () {
   it('renders DrawerSection in the portal and updates the content when it updates', async function () {
@@ -60,8 +61,14 @@ describe('DrawerSection', function () {
   const icons = ['ArrowDown', 'CaretDown', 'ChevronDown'] as const;
 
   it('switches drawer content when selecting a different section in the toolbar', async function () {
+    const onDrawerSectionOpenSpy = sinon.spy();
+    const onDrawerSectionHideSpy = sinon.spy();
+
     render(
-      <DrawerContentProvider>
+      <DrawerContentProvider
+        onDrawerSectionOpen={onDrawerSectionOpenSpy}
+        onDrawerSectionHide={onDrawerSectionHideSpy}
+      >
         <DrawerAnchor>
           {[1, 2, 3].map((n, idx) => {
             return (
@@ -85,33 +92,62 @@ describe('DrawerSection', function () {
       expect(screen.getByText('This is section 1')).to.be.visible;
     });
 
+    expect(onDrawerSectionOpenSpy).to.have.been.calledOnceWith('section-1');
+    onDrawerSectionOpenSpy.resetHistory();
+
     userEvent.click(screen.getByRole('button', { name: 'Section 2' }));
     await waitFor(() => {
       expect(screen.getByText('This is section 2')).to.be.visible;
     });
 
+    expect(onDrawerSectionHideSpy).to.have.been.calledOnceWith('section-1');
+    expect(onDrawerSectionOpenSpy).to.have.been.calledOnceWith('section-2');
+    onDrawerSectionOpenSpy.resetHistory();
+    onDrawerSectionHideSpy.resetHistory();
+
     userEvent.click(screen.getByRole('button', { name: 'Section 3' }));
     await waitFor(() => {
       expect(screen.getByText('This is section 3')).to.be.visible;
     });
 
+    expect(onDrawerSectionHideSpy).to.have.been.calledOnceWith('section-2');
+    expect(onDrawerSectionOpenSpy).to.have.been.calledOnceWith('section-3');
+    onDrawerSectionOpenSpy.resetHistory();
+    onDrawerSectionHideSpy.resetHistory();
+
     userEvent.click(screen.getByRole('button', { name: 'Section 1' }));
     await waitFor(() => {
       expect(screen.getByText('This is section 1')).to.be.visible;
     });
 
+    expect(onDrawerSectionHideSpy).to.have.been.calledOnceWith('section-3');
+    expect(onDrawerSectionOpenSpy).to.have.been.calledOnceWith('section-1');
+    onDrawerSectionOpenSpy.resetHistory();
+    onDrawerSectionHideSpy.resetHistory();
+
     userEvent.click(screen.getByRole('button', { name: 'Close drawer' }));
     await waitFor(() => {
       expect(screen.queryByText('This is section 1')).not.to.exist;
       expect(screen.queryByText('This is section 2')).not.to.exist;
       expect(screen.queryByText('This is section 3')).not.to.exist;
     });
+
+    expect(onDrawerSectionHideSpy).to.have.been.calledOnceWith('section-1');
+    expect(onDrawerSectionOpenSpy).to.not.have.been.called;
+    onDrawerSectionOpenSpy.resetHistory();
+    onDrawerSectionHideSpy.resetHistory();
   });
 
   it('closes drawer when opened section is removed from toolbar data', async function () {
+    const onDrawerSectionOpenSpy = sinon.spy();
+    const onDrawerSectionHideSpy = sinon.spy();
+
     // Render two sections, auto-open first one
     const { rerender } = render(
-      <DrawerContentProvider>
+      <DrawerContentProvider
+        onDrawerSectionOpen={onDrawerSectionOpenSpy}
+        onDrawerSectionHide={onDrawerSectionHideSpy}
+      >
         <DrawerAnchor>
           <DrawerSection
             id="test-section-1"
@@ -138,9 +174,19 @@ describe('DrawerSection', function () {
       expect(screen.getByText('This is a test section')).to.be.visible;
     });
 
+    expect(onDrawerSectionHideSpy).to.not.have.been.called;
+    expect(onDrawerSectionOpenSpy).to.have.been.calledOnceWith(
+      'test-section-1'
+    );
+    onDrawerSectionOpenSpy.resetHistory();
+    onDrawerSectionHideSpy.resetHistory();
+
     // Now render without opened section
     rerender(
-      <DrawerContentProvider>
+      <DrawerContentProvider
+        onDrawerSectionOpen={onDrawerSectionOpenSpy}
+        onDrawerSectionHide={onDrawerSectionHideSpy}
+      >
         <DrawerAnchor>
           <DrawerSection
             id="test-section-2"
@@ -163,9 +209,17 @@ describe('DrawerSection', function () {
       // drawer with toolbar
       screen.getByTestId('lg-drawer')
     ).to.have.attribute('aria-hidden', 'true');
+
+    expect(onDrawerSectionHideSpy).to.have.been.calledOnceWith(
+      'test-section-1'
+    );
+    expect(onDrawerSectionOpenSpy).to.not.have.been.called;
   });
 
   it('can control drawer state via the hooks', async function () {
+    const onDrawerSectionOpenSpy = sinon.spy();
+    const onDrawerSectionHideSpy = sinon.spy();
+
     const ControlElement = () => {
       const { isDrawerOpen } = useDrawerState();
       const { openDrawer, closeDrawer } = useDrawerActions();
@@ -188,7 +242,10 @@ describe('DrawerSection', function () {
       );
     };
     render(
-      <DrawerContentProvider>
+      <DrawerContentProvider
+        onDrawerSectionOpen={onDrawerSectionOpenSpy}
+        onDrawerSectionHide={onDrawerSectionHideSpy}
+      >
         <ControlElement />
         <DrawerAnchor>
           <DrawerSection
@@ -214,19 +271,36 @@ describe('DrawerSection', function () {
     // Drawer is closed by default
     expect(screen.getByTestId('drawer-state')).to.have.text('closed');
 
+    expect(onDrawerSectionHideSpy).to.not.have.been.called;
+    expect(onDrawerSectionOpenSpy).to.not.have.been.called;
+    onDrawerSectionOpenSpy.resetHistory();
+    onDrawerSectionHideSpy.resetHistory();
+
     // Open the drawer
     userEvent.click(screen.getByRole('button', { name: 'Hook Open drawer' }));
     await waitFor(() => {
       expect(screen.getByTestId('drawer-state')).to.have.text('open');
       expect(screen.getByText('This is the controlled section')).to.be.visible;
     });
 
+    expect(onDrawerSectionHideSpy).to.not.have.been.called;
+    expect(onDrawerSectionOpenSpy).to.have.been.calledOnceWith(
+      'controlled-section'
+    );
+    onDrawerSectionOpenSpy.resetHistory();
+    onDrawerSectionHideSpy.resetHistory();
+
     // Close the drawer
     userEvent.click(screen.getByRole('button', { name: 'Hook Close drawer' }));
     await waitFor(() => {
       expect(screen.getByTestId('drawer-state')).to.have.text('closed');
       expect(screen.queryByText('This is the controlled section')).not.to.exist;
     });
+
+    expect(onDrawerSectionHideSpy).to.have.been.calledOnceWith(
+      'controlled-section'
+    );
+    expect(onDrawerSectionOpenSpy).to.not.have.been.called;
   });
 
   it('renders guide cue when passed in props', async function () {

packages/compass-components/src/components/drawer-portal.tsx

@@ -62,6 +62,16 @@ const DrawerOpenStateContext =
 const DrawerSetOpenStateContext =
   React.createContext<DrawerSetOpenStateContextValue>(() => {});
 
+type DrawerCurrentTabStateContextValue = string | null;
+
+type DrawerSetCurrentTabContextValue = (currentTab: string | null) => void;
+
+const DrawerCurrentTabStateContext =
+  React.createContext<DrawerCurrentTabStateContextValue>(null);
+
+const DrawerSetCurrentTabContext =
+  React.createContext<DrawerSetCurrentTabContextValue>(() => {});
+
 const DrawerActionsContext = React.createContext<DrawerActionsContextValue>({
   current: {
     openDrawer: () => undefined,
@@ -104,12 +114,16 @@ const DrawerActionsContext = React.createContext<DrawerActionsContextValue>({
  *   )
  * }
  */
-export const DrawerContentProvider: React.FunctionComponent = ({
-  children,
-}) => {
+export const DrawerContentProvider: React.FunctionComponent<{
+  onDrawerSectionOpen?: (drawerSectionId: string) => void;
+  onDrawerSectionHide?: (drawerSectionId: string) => void;
+  children?: React.ReactNode;
+}> = ({ onDrawerSectionOpen, onDrawerSectionHide, children }) => {
   const [drawerState, setDrawerState] = useState<DrawerSectionProps[]>([]);
   const [drawerOpenState, setDrawerOpenState] =
     useState<DrawerOpenStateContextValue>(false);
+  const [drawerCurrentTab, setDrawerCurrentTab] =
+    useState<DrawerCurrentTabStateContextValue>(null);
   const drawerActions = useRef({
     openDrawer: () => undefined,
     closeDrawer: () => undefined,
@@ -135,13 +149,36 @@ export const DrawerContentProvider: React.FunctionComponent = ({
     },
   });
 
+  const prevDrawerCurrentTabRef = React.useRef<string | null>(null);
+
+  useEffect(() => {
+    if (drawerCurrentTab === prevDrawerCurrentTabRef.current) {
+      // ignore unless it changed
+      return;
+    }
+
+    if (drawerCurrentTab) {
+      onDrawerSectionOpen?.(drawerCurrentTab);
+    }
+
+    if (prevDrawerCurrentTabRef.current) {
+      onDrawerSectionHide?.(prevDrawerCurrentTabRef.current);
+    }
+
+    prevDrawerCurrentTabRef.current = drawerCurrentTab;
+  }, [drawerCurrentTab, onDrawerSectionHide, onDrawerSectionOpen]);
+
   return (
     <DrawerStateContext.Provider value={drawerState}>
       <DrawerOpenStateContext.Provider value={drawerOpenState}>
         <DrawerSetOpenStateContext.Provider value={setDrawerOpenState}>
-          <DrawerActionsContext.Provider value={drawerActions}>
-            {children}
-          </DrawerActionsContext.Provider>
+          <DrawerCurrentTabStateContext.Provider value={drawerCurrentTab}>
+            <DrawerSetCurrentTabContext.Provider value={setDrawerCurrentTab}>
+              <DrawerActionsContext.Provider value={drawerActions}>
+                {children}
+              </DrawerActionsContext.Provider>
+            </DrawerSetCurrentTabContext.Provider>
+          </DrawerCurrentTabStateContext.Provider>
         </DrawerSetOpenStateContext.Provider>
       </DrawerOpenStateContext.Provider>
     </DrawerStateContext.Provider>
@@ -152,11 +189,21 @@ const DrawerContextGrabber: React.FunctionComponent = ({ children }) => {
   const drawerToolbarContext = useDrawerToolbarContext();
   const actions = useContext(DrawerActionsContext);
   const openStateSetter = useContext(DrawerSetOpenStateContext);
+  const currentTabSetter = useContext(DrawerSetCurrentTabContext);
   actions.current.openDrawer = drawerToolbarContext.openDrawer;
   actions.current.closeDrawer = drawerToolbarContext.closeDrawer;
+
   useEffect(() => {
     openStateSetter(drawerToolbarContext.isDrawerOpen);
   }, [drawerToolbarContext.isDrawerOpen, openStateSetter]);
+
+  useEffect(() => {
+    const currentTab =
+      drawerToolbarContext.getActiveDrawerContent()?.id ?? null;
+
+    currentTabSetter(currentTab);
+  }, [drawerToolbarContext, currentTabSetter]);
+
   return <>{children}</>;
 };
 

packages/compass-telemetry/src/telemetry-events.ts

@@ -1458,6 +1458,34 @@ type IndexDroppedEvent = ConnectionScopedEvent<{
   };
 }>;
 
+/**
+ * This event is fired when user opens a drawer section. Either by switching
+ * to it via the drawer toolbar or by opening the drawer and the first tab is
+ * this drawer section.
+ *
+ * @category Gen AI
+ */
+type DrawerSectionOpenedEvent = CommonEvent<{
+  name: 'Drawer Section Opened';
+  payload: {
+    sectionId: string;
+  };
+}>;
+
+/**
+ * This event is fired when user closes a drawer section. Either by switching
+ * to another tab via the drawer toolbar or by closing the drawer when the
+ * active tab is this drawer section.
+ *
+ * @category Gen AI
+ */
+type DrawerSectionClosedEvent = CommonEvent<{
+  name: 'Drawer Section Closed';
+  payload: {
+    sectionId: string;
+  };
+}>;
+
 /**
  * This event is fired when user enters a prompt in the assistant chat
  * and hits "enter".
@@ -3174,6 +3202,8 @@ export type TelemetryEvent =
   | DocumentDeletedEvent
   | DocumentInsertedEvent
   | DocumentUpdatedEvent
+  | DrawerSectionOpenedEvent
+  | DrawerSectionClosedEvent
   | EditorTypeChangedEvent
   | ErrorFetchingAttributesEvent
   | ExplainPlanExecutedEvent

packages/compass-web/src/entrypoint.tsx

@@ -440,6 +440,16 @@ const CompassWeb = ({
               item_label: item.label,
             });
           }}
+          onDrawerSectionOpen={(drawerSectionId) => {
+            onTrackRef.current?.('Drawer Section Opened', {
+              sectionId: drawerSectionId,
+            });
+          }}
+          onDrawerSectionHide={(drawerSectionId) => {
+            onTrackRef.current?.('Drawer Section Closed', {
+              sectionId: drawerSectionId,
+            });
+          }}
           onSignalMount={(id) => {
             onTrackRef.current?.('Signal Shown', { id });
           }}

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

@@ -210,6 +210,12 @@ export default function ThemedHome(
           item_label: item.label,
         });
       }}
+      onDrawerSectionOpen={(drawerSectionId) => {
+        track('Drawer Section Opened', { sectionId: drawerSectionId });
+      }}
+      onDrawerSectionHide={(drawerSectionId) => {
+        track('Drawer Section Closed', { sectionId: drawerSectionId });
+      }}
       utmSource="compass"
       utmMedium="product"
       onSignalMount={(id) => {