feat(compass-crud): Atlas Skills Banner in Documents Tab CLOUDP-349749 & CLOUDP-349750 (#7465)

carolynmcca · web-flow · commit 9919a7f220af · 2025-10-17T13:15:00.000-04:00
diff --git a/packages/compass-crud/src/components/crud-toolbar.spec.tsx b/packages/compass-crud/src/components/crud-toolbar.spec.tsx
@@ -1,11 +1,18 @@
 import React from 'react';
 import { expect } from 'chai';
 import sinon from 'sinon';
-import { screen, within, userEvent } from '@mongodb-js/testing-library-compass';
+import {
+  screen,
+  within,
+  userEvent,
+  renderWithConnections,
+} from '@mongodb-js/testing-library-compass';
 import type { PreferencesAccess } from 'compass-preferences-model';
 import { createSandboxFromDefaultPreferences } from 'compass-preferences-model';
 import { CrudToolbar } from './crud-toolbar';
 import { renderWithQueryBar } from '../../test/render-with-query-bar';
+import { CompassExperimentationProvider } from '@mongodb-js/compass-telemetry';
+import { ExperimentTestGroup } from '@mongodb-js/compass-telemetry/provider';
 
 const noop = () => {
   /* noop */
@@ -821,4 +828,170 @@ describe('CrudToolbar Component', function () {
       expect(() => screen.getByTestId('insight-badge-button')).to.throw();
     });
   });
+
+  // @experiment Skills in Atlas  | Jira Epic: CLOUDP-346311
+  describe('Atlas Skills Banner', function () {
+    function renderCrudToolbarWithExperimentation(experimentationOptions?: {
+      isInExperiment?: boolean;
+      isInVariant?: boolean;
+    }) {
+      const mockUseAssignment = sinon.stub();
+      const mockUseTrackInSample = sinon.stub();
+      const mockAssignExperiment = sinon.stub();
+      const mockGetAssignment = sinon.stub();
+
+      const commonAsyncStatus = {
+        asyncStatus: null,
+        error: null,
+        isLoading: false,
+        isError: false,
+        isSuccess: true,
+      };
+
+      // Configure the mock based on experiment options
+      if (experimentationOptions?.isInExperiment) {
+        if (experimentationOptions?.isInVariant) {
+          mockUseAssignment.returns({
+            assignment: {
+              assignmentData: {
+                variant: ExperimentTestGroup.atlasSkillsVariant,
+              },
+            },
+            ...commonAsyncStatus,
+          });
+        } else {
+          mockUseAssignment.returns({
+            assignment: {
+              assignmentData: {
+                variant: ExperimentTestGroup.atlasSkillsControl,
+              },
+            },
+            ...commonAsyncStatus,
+          });
+        }
+      } else {
+        mockUseAssignment.returns({
+          assignment: null,
+          ...commonAsyncStatus,
+        });
+      }
+
+      mockUseTrackInSample.returns(commonAsyncStatus);
+      mockAssignExperiment.returns(Promise.resolve(null));
+      mockGetAssignment.returns(Promise.resolve(null));
+
+      const renderResult = renderWithConnections(
+        <CompassExperimentationProvider
+          useAssignment={mockUseAssignment}
+          useTrackInSample={mockUseTrackInSample}
+          assignExperiment={mockAssignExperiment}
+          getAssignment={mockGetAssignment}
+        >
+          <CrudToolbar
+            activeDocumentView="List"
+            count={55}
+            end={20}
+            getPage={noop}
+            insertDataHandler={noop}
+            loadingCount={false}
+            isFetching={false}
+            docsPerPage={25}
+            isWritable
+            instanceDescription=""
+            onApplyClicked={noop}
+            onResetClicked={noop}
+            onUpdateButtonClicked={noop}
+            onDeleteButtonClicked={noop}
+            onExpandAllClicked={noop}
+            onCollapseAllClicked={noop}
+            openExportFileDialog={noop}
+            outdated={false}
+            page={0}
+            readonly={false}
+            refreshDocuments={noop}
+            resultId="123"
+            start={0}
+            viewSwitchHandler={noop}
+            updateMaxDocumentsPerPage={noop}
+            queryLimit={0}
+            querySkip={0}
+          />
+        </CompassExperimentationProvider>,
+        { preferences: preferences.getPreferences() }
+      );
+      return renderResult;
+    }
+
+    it('should show skills banner when user is in experiment and in variant', function () {
+      renderCrudToolbarWithExperimentation({
+        isInExperiment: true,
+        isInVariant: true,
+      });
+
+      expect(
+        screen.getByText(
+          'Practice creating, reading, updating, and deleting documents efficiently.'
+        )
+      ).to.be.visible;
+      const goToSkillsButton = screen.getByRole('link', {
+        name: /go to skills/i,
+      });
+      expect(goToSkillsButton).to.be.visible;
+      expect(screen.getByLabelText('Award Icon')).to.be.visible;
+
+      expect(goToSkillsButton.getAttribute('href')).to.equal(
+        'https://learn.mongodb.com/courses/crud-operations-in-mongodb?team=growth'
+      );
+    });
+
+    it('should not show skills banner when user is in experiment but not in variant', function () {
+      renderCrudToolbarWithExperimentation({
+        isInExperiment: true,
+        isInVariant: false,
+      });
+
+      expect(
+        screen.queryByText(
+          'Practice creating, reading, updating, and deleting documents efficiently.'
+        )
+      ).to.not.exist;
+      expect(screen.queryByRole('link', { name: /go to skills/i })).to.not
+        .exist;
+    });
+
+    it('should not show skills banner by default when user is not in experiment', function () {
+      renderCrudToolbarWithExperimentation({
+        isInExperiment: false,
+        isInVariant: false,
+      });
+
+      expect(
+        screen.queryByText(
+          'Practice creating, reading, updating, and deleting documents efficiently.'
+        )
+      ).to.not.exist;
+      expect(screen.queryByRole('link', { name: /go to skills/i })).to.not
+        .exist;
+    });
+
+    it('should dismiss banner when close button is clicked', function () {
+      renderCrudToolbarWithExperimentation({
+        isInExperiment: true,
+        isInVariant: true,
+      });
+
+      const closeButton = screen.getByRole('button', {
+        name: 'Dismiss Skills Banner',
+      });
+
+      expect(closeButton).to.be.visible;
+      userEvent.click(closeButton);
+
+      expect(
+        screen.queryByText(
+          'Practice creating, reading, updating, and deleting documents efficiently.'
+        )
+      ).to.not.exist;
+    });
+  });
 });
diff --git a/packages/compass-crud/src/components/crud-toolbar.tsx b/packages/compass-crud/src/components/crud-toolbar.tsx
@@ -1,5 +1,10 @@
 import React, { useCallback, useMemo } from 'react';
-import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
+import {
+  useTelemetry,
+  SkillsBannerContextEnum,
+  useAtlasSkillsBanner,
+} from '@mongodb-js/compass-telemetry/provider';
+
 import {
   Body,
   DropdownMenuButton,
@@ -14,6 +19,8 @@ import {
   Option,
   SignalPopover,
   useContextMenuGroups,
+  usePersistedState,
+  AtlasSkillsBanner,
 } from '@mongodb-js/compass-components';
 import type { MenuAction, Signal } from '@mongodb-js/compass-components';
 import { ViewSwitcher } from './view-switcher';
@@ -181,6 +188,15 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
   const track = useTelemetry();
   const connectionInfoRef = useConnectionInfoRef();
   const isImportExportEnabled = usePreference('enableImportExport');
+  const [dismissed, setDismissed] = usePersistedState(
+    'mongodb_compass_dismissedAtlasDocSkillBanner',
+    false
+  );
+
+  // @experiment Skills in Atlas  | Jira Epic: CLOUDP-346311
+  const { shouldShowAtlasSkillsBanner } = useAtlasSkillsBanner(
+    SkillsBannerContextEnum.Documents
+  );
 
   const displayedDocumentCount = useMemo(
     () => (loadingCount ? '' : `${count ?? 'N/A'}`),
@@ -309,6 +325,24 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
           showExplainButton={enableExplainPlan}
         />
       </div>
+
+      <AtlasSkillsBanner
+        ctaText="Practice creating, reading, updating, and deleting documents efficiently."
+        skillsUrl="https://learn.mongodb.com/courses/crud-operations-in-mongodb?team=growth"
+        onCloseSkillsBanner={() => {
+          setDismissed(true);
+          track('Atlas Skills CTA Dismissed', {
+            context: 'Documents Tab',
+          });
+        }}
+        showBanner={shouldShowAtlasSkillsBanner && !dismissed}
+        onCtaClick={() => {
+          track('Atlas Skills CTA Clicked', {
+            context: 'Documents Tab',
+          });
+        }}
+      />
+
       <div className={crudBarStyles}>
         <div className={toolbarLeftActionStyles}>
           {!readonly && (
diff --git a/packages/compass-telemetry/src/telemetry-events.ts b/packages/compass-telemetry/src/telemetry-events.ts
@@ -2654,6 +2654,36 @@ type AtlasLinkClickedEvent = CommonEvent<{
   };
 }>;
 
+/**
+ * This event is fired when a user clicks the Atlas Skills CTA banner.
+ *
+ * @category Other
+ */
+type AtlasSkillsCtaClickedEvent = CommonEvent<{
+  name: 'Atlas Skills CTA Clicked';
+  payload: {
+    /**
+     * The context/screen from which the Atlas Skills CTA was dismissed.
+     */
+    context: 'Documents Tab' | 'Aggregation Tab' | 'Indexes Tab' | 'Schema Tab';
+  };
+}>;
+
+/**
+ * This event is fired when a user dismisses the Atlas Skills CTA banner.
+ *
+ * @category Other
+ */
+type AtlasSkillsCtaDismissedEvent = CommonEvent<{
+  name: 'Atlas Skills CTA Dismissed';
+  payload: {
+    /**
+     * The context/screen from which the Atlas Skills CTA was dismissed.
+     */
+    context: 'Documents Tab' | 'Aggregation Tab' | 'Indexes Tab' | 'Schema Tab';
+  };
+}>;
+
 /**
  * This event is fired when the application launch is initiated.
  *
@@ -3158,6 +3188,8 @@ export type TelemetryEvent =
   | AiResponseGeneratedEvent
   | ApplicationLaunchedEvent
   | AtlasLinkClickedEvent
+  | AtlasSkillsCtaClickedEvent
+  | AtlasSkillsCtaDismissedEvent
   | AtlasSignInErrorEvent
   | AtlasSignInSuccessEvent
   | AtlasSignOutEvent
