feat(compass-collection): Add Disclaimer Screen - Mock Data Generator CLOUDP-333851 #7212

ncarbon · 2025-08-19T13:51:36Z

Description

Updates AIOptinModal to match the new design changes (Figma).
Updates openMockDataGeneratorModal to show AIOptinModal if the user hasn't opted into AI features.
Uses AppRegistry to emit "open-mock-data-generator-modal" after the user opts into AI features via the Optin modal.
- Importing a method from compass-collection introduced a cyclical dependency.

Checklist

New tests and/or benchmarks are included
Documentation is changed or added
If this change updates the UI, screenshots/videos are added and a design review is requested
I have signed the MongoDB Contributor License Agreement (https://www.mongodb.com/legal/contributor-agreement)

Motivation and Context

To show an AI disclaimer screen before showing the mock data generator feature UI.

Bugfix
New feature
Dependency update
Misc

Types of changes

Backport Needed
Patch (non-breaking change which fixes an issue)
Minor (non-breaking change which adds functionality)
Major (fix or feature that would cause existing functionality to change)

…DP-333851

packages/compass-generative-ai/src/store/atlas-optin-reducer.ts

Copilot

Pull Request Overview

This PR updates the AI opt-in modal design and integrates it with the mock data generator feature. The main purpose is to show an AI disclaimer screen before allowing users to access the mock data generator, replacing the previous AI disclaimer step with a new schema confirmation step as the initial modal state.

Key changes include:

Updated AI opt-in modal to use MarketingModal component with new design
Added AppRegistry event emission after AI opt-in to trigger mock data generator modal
Modified mock data generator to start at schema confirmation step instead of AI disclaimer

Reviewed Changes

Copilot reviewed 17 out of 18 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/compass-telemetry/src/provider.tsx	Added getAssignment method to experimentation services interface
packages/compass-telemetry/src/experimentation-provider.tsx	Added GetAssignmentFn type and getAssignment prop to context provider
packages/compass-generative-ai/src/store/atlas-optin-reducer.ts	Added localAppRegistry to thunk actions and emit event after opt-in success
packages/compass-generative-ai/src/components/ai-optin-modal.tsx	Updated modal to use MarketingModal component with new design
packages/compass-generative-ai/src/components/ai-image-banner.tsx	Updated SVG banner dimensions and graphics
packages/compass-collection/src/stores/collection-tab.ts	Added event listener for mock data generator modal opening
packages/compass-collection/src/modules/collection-tab.ts	Changed initial mock data generator step and added modal opening logic

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

packages/compass-telemetry/src/provider.tsx

packages/compass-generative-ai/src/components/ai-optin-modal.tsx

gagik

FYI: The changes here for the opt-in model are the same as the changes that were aiming to be made for #7164

This is more up to date with the designs so I think I'll close that PR and we can use the changes one to resolve the tickets tied to them.

kpamaran · 2025-08-19T15:48:03Z

packages/compass-generative-ai/src/components/ai-optin-modal.tsx

-    <ConfirmationModal
+    <MarketingModal
+      className={css({
+        zIndex: '99999',


The zIndex implies there's a visual conflict with another modal.

Slightly better: zIndex: String(otherZIndex + 10) to make that relationship clearer
Better: No two modals render at the same time

Removed as we no longer seem to need to modify zIndex with the v8.0 marketing modal

kpamaran

Makes sense to me from a line-by-line POV. Will defer to another if the diffs are okay for the application architecture

packages/compass-telemetry/src/experimentation-provider.tsx

packages/compass-generative-ai/src/store/atlas-optin-reducer.ts

packages/compass-generative-ai/src/components/ai-optin-modal.tsx

gribnoysup · 2025-08-20T07:34:45Z

packages/compass-generative-ai/src/components/ai-optin-modal.tsx

@@ -104,25 +81,34 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
  }, [track, onOptInModalClose]);

  return (
-    <ConfirmationModal
+    <MarketingModal
+      className={css({


Don't use css in render method, this creates a new class name every time component updates and is not performant, static styles can be defined with css outside of render, dynamic should be passed through the style prop. But also this probably indicates that something is not right, we shouldn't have two modals on the screen at the same time, so can you clarify why this is happening?

static styles can be defined with css outside of render

This makes sense!

we shouldn't have two modals on the screen at the same time, so can you clarify why this is happening?

Without the zIndex, the modal gets cut off by the Atlas nav/header. It probably doesn't need to be set to such a high value though.

Removed as we no longer seem to need to modify zIndex with the v8.0 marketing modal

@ncarbon gotca. We added withStackedComponentStyles some time ago to resolve the issue with overlapping styles, seems like marketing modal was just not wrapped in it for some reason, I think wrapping it before exporting from compass-components, similar to other modals should resolve your issue

gribnoysup · 2025-08-20T07:51:00Z

packages/compass-generative-ai/src/components/ai-optin-modal.spec.tsx

+  // TODO: Re-enable this test once the LG-5416 is released
+  it.skip('should show the opt in button enabled when project AI setting is enabled', async function () {


This seems too important to just skip. If we can't disable the button, we should make sure that clicking it doesn't cause a request to opt-in and test that instead, not just skip the test

Un-skipped and using v8.0 Marketing Modal

…/mock-data-gen-disclaimer

jcobis · 2025-08-21T21:41:08Z

packages/compass-generative-ai/src/components/ai-optin-modal.tsx

  palette,
 } from '@mongodb-js/compass-components';
+// eslint-disable-next-line @mongodb-js/compass/no-leafygreen-outside-compass-components


Importing MarketingModal directly from LeafyGreen instead of going through compass-components because we need v7+ to disable the button. The compass-components package is v5.0.2, and upgrading MarketingModal in compass-components causes a bunch of cascading dependency upgrades that are better dealt with in the separate ticket that Compass team is working on to upgrade the modal: https://jira.mongodb.org/browse/COMPASS-9595. I've added a comment to that ticket to switch this import as well

We can't do this, we have all these components in one place for a reason, having multiple versions of the same leafygreen component causes hard to predict issues across the whole application

Yeah this is why that ticket was blocked ~~but this may be an acceptable enough temporary workaround~~. We're usually strict about going through compass-components though so not sure. Alternative is to style / disable buttons through CSS hacks ~~which isn't much better IMO~~

Makes sense! Will go with the disabled button style CSS hack

jcobis · 2025-08-21T21:50:33Z

FYI: The changes here for the opt-in model are the same as the changes that were aiming to be made for #7164

This is more up to date with the designs so I think I'll close that PR and we can use the changes one to resolve the tickets tied to them.

@gagik I think we should keep your Pull Request separate. This PR is fairly large already, and the upgrade to MarketingModal in the shared component package is somewhat involved with all the other dependency upgrades it necessitates.

gagik · 2025-08-22T07:44:19Z

@jcobis My PR was a subset of changes here so there isn't much else to follow up (the designs in it are old). So far I don't see any further changes needed.

gribnoysup

Please remove the override for the no-leafygreen-outside-compass-components rule and remove the dependency from the package, this is not how we do things in compass, those rules are set up for a reason: having multiple misaligned versions of leafygreen bundled in the same application causes hard to track and predict issues sometimes making the app unusable

gagik · 2025-08-22T08:27:02Z

One alternative could be to copy the changes in https://github.com/mongodb-js/compass/pull/7164/files/a6e2b755d5654643c5534665e212f289c8d29e26#diff-92bc76f52506e710975854f3f55a5e71b31ccf2fb807f36e98461d85ba226edaR39 (perhaps with styles Anna linked) to make the button look disabled. Alternatively if we don't want to mess with styling and just make the button no-op.

…/mock-data-gen-disclaimer

jcobis · 2025-08-22T15:40:11Z

Alternatively if we don't want to mess with styling and just make the button no-op.

Let's definitely go with the styling workaround. We can't have the only CTA button to proceed enabled and clickable but dead with no conveyed reason why, that would feel like an error state and block/confuse users.

feat(compass-collection) Disclaimer Screen - Mock Data Generator CLOU…

9ed5868

…DP-333851

ncarbon added the no release notes Fix or feature not for release notes label Aug 19, 2025

github-actions bot added feat labels Aug 19, 2025

show blob

b77f798

ncarbon commented Aug 19, 2025

View reviewed changes

packages/compass-generative-ai/src/store/atlas-optin-reducer.ts Outdated Show resolved Hide resolved

ncarbon marked this pull request as ready for review August 19, 2025 14:40

Copilot AI review requested due to automatic review settings August 19, 2025 14:40

ncarbon requested a review from a team as a code owner August 19, 2025 14:40

ncarbon requested a review from jcobis August 19, 2025 14:40

Copilot AI reviewed Aug 19, 2025

View reviewed changes

packages/compass-telemetry/src/provider.tsx Outdated Show resolved Hide resolved

packages/compass-generative-ai/src/components/ai-optin-modal.tsx Outdated Show resolved Hide resolved

gagik reviewed Aug 19, 2025

View reviewed changes

kpamaran reviewed Aug 19, 2025

View reviewed changes

kpamaran approved these changes Aug 19, 2025

View reviewed changes

kpamaran reviewed Aug 19, 2025

View reviewed changes

packages/compass-telemetry/src/experimentation-provider.tsx Outdated Show resolved Hide resolved

gribnoysup reviewed Aug 19, 2025

View reviewed changes

packages/compass-generative-ai/src/store/atlas-optin-reducer.ts Outdated Show resolved Hide resolved

packages/compass-generative-ai/src/store/atlas-optin-reducer.ts Outdated Show resolved Hide resolved

ncarbon added 2 commits August 19, 2025 14:17

remove appRegistry use and revert experimentationProvider changes

72bc367

revert format changes

9ea6f5d

ncarbon commented Aug 19, 2025

View reviewed changes

packages/compass-generative-ai/src/components/ai-optin-modal.tsx Show resolved Hide resolved

gribnoysup reviewed Aug 20, 2025

View reviewed changes

gagik mentioned this pull request Aug 20, 2025

chore(compass-generative-ai): update Gen AI opt-in modal COMPASS-9595 #7164

Closed

gribnoysup reviewed Aug 20, 2025

View reviewed changes

jcobis added 4 commits August 21, 2025 16:10

Upgrade Marketing Modal

d0cfda3

WIP

bb79c07

Merge branch 'main' of github.com:mongodb-js/compass into CLOUDP-333851…

13b67e2

…/mock-data-gen-disclaimer

WIP

2aa5744

jcobis reviewed Aug 21, 2025

View reviewed changes

jcobis requested review from gagik and gribnoysup August 21, 2025 21:42

jcobis added 2 commits August 21, 2025 18:00

Ignore dep difference

c390406

WIP

8f56349

gribnoysup requested changes Aug 22, 2025

View reviewed changes

jcobis added 4 commits August 22, 2025 11:19

WIP

dad9274

Merge branch 'main' of github.com:mongodb-js/compass into CLOUDP-333851…

8e1a7b6

…/mock-data-gen-disclaimer

WIP

98cf168

WIP

b7ad822

jcobis added 2 commits August 22, 2025 12:01

WIP

8b603b9

WIP

0db05fc

		// TODO: Re-enable this test once the LG-5416 is released
		it.skip('should show the opt in button enabled when project AI setting is enabled', async function () {

feat(compass-collection): Add Disclaimer Screen - Mock Data Generator CLOUDP-333851 #7212

Are you sure you want to change the base?

feat(compass-collection): Add Disclaimer Screen - Mock Data Generator CLOUDP-333851 #7212

Uh oh!

Conversation

ncarbon commented Aug 19, 2025 • edited by jcobis Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Motivation and Context

Types of changes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

gagik left a comment

Choose a reason for hiding this comment

Uh oh!

kpamaran Aug 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jcobis Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

kpamaran left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gribnoysup Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ncarbon Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jcobis Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

gribnoysup Aug 22, 2025

Choose a reason for hiding this comment

Uh oh!

gribnoysup Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jcobis Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

jcobis Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

gribnoysup Aug 22, 2025

Choose a reason for hiding this comment

Uh oh!

gagik Aug 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jcobis Aug 22, 2025

Choose a reason for hiding this comment

Uh oh!

jcobis commented Aug 21, 2025

Uh oh!

gagik commented Aug 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gribnoysup left a comment

Choose a reason for hiding this comment

Uh oh!

gagik commented Aug 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

ncarbon commented Aug 19, 2025 •

edited by jcobis

Loading

kpamaran Aug 19, 2025 •

edited

Loading

gribnoysup Aug 20, 2025 •

edited

Loading

ncarbon Aug 21, 2025 •

edited

Loading

gribnoysup Aug 20, 2025 •

edited

Loading

gagik Aug 22, 2025 •

edited

Loading

gagik commented Aug 22, 2025 •

edited

Loading

gagik commented Aug 22, 2025 •

edited

Loading