fix: add shell open events with entrypoints COMPASS-8136 (#6106)

mongodb-js · Aug 12, 2024 · 9b03158 · 9b03158
1 parent 14f68b1
commit 9b03158
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 18 deletions.
diff --git a/...compass-collection/src/components/collection-header-actions/collection-header-actions.tsx b/...compass-collection/src/components/collection-header-actions/collection-header-actions.tsx
@@ -11,6 +11,7 @@ import React from 'react';
 import { usePreferences } from 'compass-preferences-model/provider';
 import toNS from 'mongodb-ns';
 import { wrapField } from '@mongodb-js/mongodb-constants';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 
 const collectionHeaderActionsStyles = css({
   display: 'flex',
@@ -50,7 +51,8 @@ const CollectionHeaderActions: React.FunctionComponent<
   sourceName,
   sourcePipeline,
 }: CollectionHeaderActionsProps) => {
-  const { id: connectionId, atlasMetadata } = useConnectionInfo();
+  const connectionInfo = useConnectionInfo();
+  const { id: connectionId, atlasMetadata } = connectionInfo;
   const { openCollectionWorkspace, openEditViewWorkspace, openShellWorkspace } =
     useOpenWorkspace();
   const {
@@ -62,6 +64,7 @@ const CollectionHeaderActions: React.FunctionComponent<
     'enableShell',
     'enableNewMultipleConnectionSystem',
   ]);
+  const track = useTelemetry();
 
   const { database, collection } = toNS(namespace);
 
@@ -80,6 +83,7 @@ const CollectionHeaderActions: React.FunctionComponent<
               initialEvaluate: `use ${database}`,
               initialInput: `db[${wrapField(collection, true)}].find()`,
             });
+            track('Open Shell', { entrypoint: 'collection' }, connectionInfo);
           }}
           leftGlyph={<Icon glyph="Shell"></Icon>}
         >

diff --git a/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx b/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx
@@ -45,6 +45,7 @@ import {
   type ConnectionImportExportAction,
   useOpenConnectionImportExportModal,
 } from '@mongodb-js/compass-connection-import-export';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 
 const connectionsContainerStyles = css({
   height: '100%',
@@ -176,6 +177,7 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
     openCollectionWorkspace,
     openEditViewWorkspace,
   } = useOpenWorkspace();
+  const track = useTelemetry();
   const connections = useMemo(() => {
     const connections: SidebarConnection[] = [];
 
@@ -291,6 +293,7 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
           return;
         case 'open-shell':
           openShellWorkspace(item.connectionInfo.id, { newTab: true });
+          track('Open Shell', { entrypoint: 'sidebar' }, item.connectionInfo);
           return;
         case 'connection-performance-metrics':
           openPerformanceWorkspace(item.connectionInfo.id);
@@ -343,6 +346,7 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
       onRemoveConnection,
       onOpenCsfleModal,
       onOpenNonGenuineMongoDBModal,
+      track,
     ]
   );
 

diff --git a/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx b/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx
@@ -47,6 +47,7 @@ import {
 } from '@mongodb-js/compass-app-stores/provider';
 import { ConnectionImportExportProvider } from '@mongodb-js/compass-connection-import-export';
 import { createNoopLogger } from '@mongodb-js/compass-logging/provider';
+import { TelemetryProvider } from '@mongodb-js/compass-telemetry/provider';
 
 const savedFavoriteConnection: ConnectionInfo = {
   id: '12345',
@@ -95,7 +96,8 @@ describe('Multiple Connections Sidebar Component', function () {
   let instancesManager: MongoDBInstancesManager;
   let store: ReturnType<typeof createSidebarStore>['store'];
   let deactivate: () => void;
-  let connectFn = sinon.stub();
+  let connectFn: sinon.SinonStub;
+  let track: sinon.SinonStub;
 
   function doRender(
     activeWorkspace: WorkspaceTab | null = null,
@@ -105,21 +107,27 @@ describe('Multiple Connections Sidebar Component', function () {
       <ToastArea>
         <ConfirmationModalArea>
           <PreferencesProvider value={preferences}>
-            <WorkspacesServiceProvider value={workspaceService}>
-              <WorkspacesProvider
-                value={[{ name: 'My Queries', component: () => null }]}
-              >
-                <ConnectionStorageProvider value={connectionStorage}>
-                  <ConnectionsManagerProvider value={connectionsManager}>
-                    <Provider store={store}>
-                      <MultipleConnectionSidebar
-                        activeWorkspace={activeWorkspace}
-                      />
-                    </Provider>
-                  </ConnectionsManagerProvider>
-                </ConnectionStorageProvider>
-              </WorkspacesProvider>
-            </WorkspacesServiceProvider>
+            <TelemetryProvider
+              options={{
+                sendTrack: track,
+              }}
+            >
+              <WorkspacesServiceProvider value={workspaceService}>
+                <WorkspacesProvider
+                  value={[{ name: 'My Queries', component: () => null }]}
+                >
+                  <ConnectionStorageProvider value={connectionStorage}>
+                    <ConnectionsManagerProvider value={connectionsManager}>
+                      <Provider store={store}>
+                        <MultipleConnectionSidebar
+                          activeWorkspace={activeWorkspace}
+                        />
+                      </Provider>
+                    </ConnectionsManagerProvider>
+                  </ConnectionStorageProvider>
+                </WorkspacesProvider>
+              </WorkspacesServiceProvider>
+            </TelemetryProvider>
           </PreferencesProvider>
         </ConfirmationModalArea>
       </ToastArea>,
@@ -129,6 +137,7 @@ describe('Multiple Connections Sidebar Component', function () {
 
   beforeEach(async function () {
     connectFn = sinon.stub();
+    track = sinon.stub();
     instancesManager = new TestMongoDBInstanceManager();
     connectionsManager = new ConnectionsManager({
       logger: createNoopLogger().log.unbound,
@@ -487,7 +496,7 @@ describe('Multiple Connections Sidebar Component', function () {
             });
           });
 
-          it('should open shell workspace when clicked on open shell action', function () {
+          it('should open shell workspace when clicked on open shell action', async function () {
             const connectionItem = screen.getByTestId(
               savedFavoriteConnection.id
             );
@@ -501,6 +510,10 @@ describe('Multiple Connections Sidebar Component', function () {
               savedFavoriteConnection.id,
               { newTab: true }
             );
+
+            await waitFor(() => {
+              expect(track).to.have.been.calledWith('Open Shell');
+            });
           });
 
           it('should open performance workspace when clicked on view performance action', function () {

diff --git a/packages/databases-collections-list/src/items-grid.tsx b/packages/databases-collections-list/src/items-grid.tsx
@@ -159,6 +159,7 @@ const GridControls: React.FunctionComponent<{
     openCollectionsWorkspace,
     openShellWorkspace,
   } = useOpenWorkspace();
+  const track = useTelemetry();
   const { enableShell, enableNewMultipleConnectionSystem } = usePreferences([
     'enableShell',
     'enableNewMultipleConnectionSystem',
@@ -215,6 +216,11 @@ const GridControls: React.FunctionComponent<{
                     ? { initialEvaluate: `use ${namespace}` }
                     : undefined
                 );
+                track(
+                  'Open Shell',
+                  { entrypoint: `${itemType}s` },
+                  connectionInfo
+                );
               }}
               leftGlyph={<Icon glyph="Shell"></Icon>}
             >