From 2856317a6346a3ffa07f7e080eedcc069a2be2cc Mon Sep 17 00:00:00 2001
From: Leo Generali <leo.generali@mongodb.com>
Date: Thu, 4 Sep 2025 15:20:05 -0400
Subject: [PATCH 01/11] Add leafygreen copyable to compass components

---
 package-lock.json                             | 42 +++++++++++++++++++
 packages/compass-components/package.json      |  1 +
 .../src/components/leafygreen.tsx             |  2 +
 3 files changed, 45 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 1a10f197185..dc29161bea3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6732,6 +6732,28 @@
         "@leafygreen-ui/leafygreen-provider": "^4.0.2"
       }
     },
+    "node_modules/@leafygreen-ui/copyable": {
+      "version": "10.0.14",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/copyable/-/copyable-10.0.14.tgz",
+      "integrity": "sha512-O4dstObiN04Zjrd4Z10ratWZAi7pnb6gpML/HQnkAxR+0OwzKOvrR6XOQ2/3IzlLfIiY1TUHIbjavpHy/ppqVw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@leafygreen-ui/button": "^23.1.6",
+        "@leafygreen-ui/emotion": "^4.1.1",
+        "@leafygreen-ui/hooks": "^8.4.1",
+        "@leafygreen-ui/icon": "^13.4.0",
+        "@leafygreen-ui/lib": "^14.2.0",
+        "@leafygreen-ui/palette": "^4.1.4",
+        "@leafygreen-ui/tokens": "^2.12.2",
+        "@leafygreen-ui/tooltip": "^13.0.13",
+        "@leafygreen-ui/typography": "^20.1.9",
+        "clipboard": "^2.0.6",
+        "polished": "^4.2.2"
+      },
+      "peerDependencies": {
+        "@leafygreen-ui/leafygreen-provider": "^4.0.7"
+      }
+    },
     "node_modules/@leafygreen-ui/descendants": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@leafygreen-ui/descendants/-/descendants-2.1.5.tgz",
@@ -47813,6 +47835,7 @@
         "@leafygreen-ui/code": "^16.0.2",
         "@leafygreen-ui/combobox": "^11.0.2",
         "@leafygreen-ui/confirmation-modal": "^6.0.2",
+        "@leafygreen-ui/copyable": "^10.0.14",
         "@leafygreen-ui/descendants": "^2.1.0",
         "@leafygreen-ui/emotion": "^4.0.9",
         "@leafygreen-ui/guide-cue": "^7.0.2",
@@ -58479,6 +58502,24 @@
         "@leafygreen-ui/typography": "^20.0.2"
       }
     },
+    "@leafygreen-ui/copyable": {
+      "version": "10.0.14",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/copyable/-/copyable-10.0.14.tgz",
+      "integrity": "sha512-O4dstObiN04Zjrd4Z10ratWZAi7pnb6gpML/HQnkAxR+0OwzKOvrR6XOQ2/3IzlLfIiY1TUHIbjavpHy/ppqVw==",
+      "requires": {
+        "@leafygreen-ui/button": "^22.0.2",
+        "@leafygreen-ui/emotion": "^4.0.9",
+        "@leafygreen-ui/hooks": "^8.3.4",
+        "@leafygreen-ui/icon": "^13.1.2",
+        "@leafygreen-ui/lib": "^15.2.0",
+        "@leafygreen-ui/palette": "^4.1.3",
+        "@leafygreen-ui/tokens": "^2.11.3",
+        "@leafygreen-ui/tooltip": "^13.0.13",
+        "@leafygreen-ui/typography": "^20.0.2",
+        "clipboard": "^2.0.6",
+        "polished": "^4.2.2"
+      }
+    },
     "@leafygreen-ui/descendants": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@leafygreen-ui/descendants/-/descendants-2.1.5.tgz",
@@ -61267,6 +61308,7 @@
         "@leafygreen-ui/code": "^16.0.2",
         "@leafygreen-ui/combobox": "^11.0.2",
         "@leafygreen-ui/confirmation-modal": "^6.0.2",
+        "@leafygreen-ui/copyable": "^10.0.14",
         "@leafygreen-ui/descendants": "^2.1.0",
         "@leafygreen-ui/emotion": "^4.0.9",
         "@leafygreen-ui/guide-cue": "^7.0.2",
diff --git a/packages/compass-components/package.json b/packages/compass-components/package.json
index 136efecf118..2ef150acde9 100644
--- a/packages/compass-components/package.json
+++ b/packages/compass-components/package.json
@@ -45,6 +45,7 @@
     "@leafygreen-ui/code": "^16.0.2",
     "@leafygreen-ui/combobox": "^11.0.2",
     "@leafygreen-ui/confirmation-modal": "^6.0.2",
+    "@leafygreen-ui/copyable": "^10.0.14",
     "@leafygreen-ui/descendants": "^2.1.0",
     "@leafygreen-ui/emotion": "^4.0.9",
     "@leafygreen-ui/guide-cue": "^7.0.2",
diff --git a/packages/compass-components/src/components/leafygreen.tsx b/packages/compass-components/src/components/leafygreen.tsx
index c15ab5e0f08..0a00f00c7d2 100644
--- a/packages/compass-components/src/components/leafygreen.tsx
+++ b/packages/compass-components/src/components/leafygreen.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 // This file exports `@leafygreen-ui` components and wraps some of them.
 
 // 1. Import the components we use from leafygreen.
+import { default as Copyable } from '@leafygreen-ui/copyable';
 import { default as Badge } from '@leafygreen-ui/badge';
 import { default as Banner } from '@leafygreen-ui/banner';
 import Checkbox from '@leafygreen-ui/checkbox';
@@ -146,6 +147,7 @@ export {
   Chip,
   Code,
   ConfirmationModal,
+  Copyable,
   ExpandedContent,
   HeaderCell,
   HeaderRow,

From e60701a19958422d0a3a41b5e31b8e924528eebb Mon Sep 17 00:00:00 2001
From: Leo Generali <leo.generali@mongodb.com>
Date: Thu, 4 Sep 2025 15:21:01 -0400
Subject: [PATCH 02/11] Create MVP of script screen

---
 .../mock-data-generator-modal.tsx             |  25 +--
 .../script-screen.tsx                         | 147 ++++++++++++++++++
 2 files changed, 160 insertions(+), 12 deletions(-)
 create mode 100644 packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx

diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.tsx
index d09861a6b42..58fd25e020d 100644
--- a/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.tsx
+++ b/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.tsx
@@ -23,6 +23,15 @@ import {
 } from '../../modules/collection-tab';
 import { default as SchemaConfirmationScreen } from './raw-schema-confirmation';
 import FakerSchemaEditor from './faker-schema-editor';
+import ScriptScreen from './script-screen';
+
+const STEP_TO_COMPONENT: Record<MockDataGeneratorStep, React.JSX.Element> = {
+  [MockDataGeneratorStep.SCHEMA_CONFIRMATION]: <SchemaConfirmationScreen />,
+  [MockDataGeneratorStep.SCHEMA_EDITOR]: <FakerSchemaEditor />,
+  [MockDataGeneratorStep.DOCUMENT_COUNT]: <></>, // TODO: Implement as part of CLOUDP-XXXXXX
+  [MockDataGeneratorStep.PREVIEW_DATA]: <></>, // TODO: Implement as part of CLOUDP-XXXXXX
+  [MockDataGeneratorStep.GENERATE_DATA]: <ScriptScreen />,
+};
 
 const footerStyles = css`
   flex-direction: row;
@@ -62,18 +71,9 @@ const MockDataGeneratorModal = ({
     }
   };
 
-  let stepContent: React.ReactNode;
-
-  if (currentStep === MockDataGeneratorStep.SCHEMA_CONFIRMATION) {
-    stepContent = <SchemaConfirmationScreen />;
-  }
-
-  if (currentStep === MockDataGeneratorStep.SCHEMA_EDITOR) {
-    stepContent = <FakerSchemaEditor />;
-  }
-
   return (
     <Modal
+      size="large"
       open={isOpen}
       setOpen={(open) => {
         if (!open) {
@@ -84,8 +84,9 @@ const MockDataGeneratorModal = ({
     >
       <ModalHeader title="Generate Mock Data" />
       <ModalBody>
-        {stepContent}
-        <div data-testid={`generate-mock-data-step-${currentStep}`} />
+        <div data-testid={`generate-mock-data-step-${currentStep}`}>
+          {STEP_TO_COMPONENT[currentStep]}
+        </div>
       </ModalBody>
       <ModalFooter className={footerStyles}>
         <Button
diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx
new file mode 100644
index 00000000000..606707d2c0c
--- /dev/null
+++ b/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx
@@ -0,0 +1,147 @@
+import React from 'react';
+import {
+  Body,
+  Code,
+  Copyable,
+  css,
+  cx,
+  InlineCode,
+  Language,
+  Link,
+  Overline,
+  palette,
+  spacing,
+  useDarkMode,
+} from '@mongodb-js/compass-components';
+
+const RUN_SCRIPT_COMMAND = `
+mongosh "mongodb+srv://<your-cluster>.mongodb.net/mockDataDB" \\
+  --username <yourUsername> \\
+  --password "<yourPassword>" \\
+  mockdatascript.js
+`;
+
+const outerSectionStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: spacing[400],
+});
+
+const listStyles = css({
+  listStylePosition: 'inside',
+  listStyleType: 'disc',
+  marginLeft: spacing[200],
+});
+
+const copyableStyles = css({
+  marginLeft: spacing[400],
+});
+
+const sectionInstructionStyles = css({
+  margin: `${spacing[200]}px 0`,
+});
+
+const resourceSectionStyles = css({
+  padding: `${spacing[400]}px ${spacing[800]}px`,
+  borderRadius: spacing[400],
+});
+
+const resourceSectionLightStyles = css({
+  backgroundColor: palette.gray.light3,
+});
+
+const resourceSectionDarkStyles = css({
+  backgroundColor: palette.gray.dark3,
+});
+
+const resourceSectionHeader = css({
+  marginBottom: spacing[300],
+});
+
+const ScriptScreen = () => {
+  const isDarkMode = useDarkMode();
+
+  return (
+    <section className={outerSectionStyles}>
+      <section>
+        <Body baseFontSize={16} weight="medium">
+          Prerequisites
+        </Body>
+        <Body className={css({ marginTop: spacing[200] })}>
+          To run the generated script, you must:
+        </Body>
+        <ul className={listStyles}>
+          <li>
+            Install{' '}
+            <Link href="https://www.mongodb.com/docs/mongodb-shell/install/">
+              mongosh
+            </Link>
+          </li>
+          <li>
+            Install{' '}
+            <Link href="https://fakerjs.dev/guide/#installation">faker.js</Link>
+            <Copyable className={copyableStyles}>
+              npm install @faker-js/faker
+            </Copyable>
+          </li>
+        </ul>
+      </section>
+      <section>
+        <Body baseFontSize={16} weight="medium">
+          1. Create a .js file with the following script
+        </Body>
+        <Body className={sectionInstructionStyles}>
+          In the directory that you created, create a file
+          named mockdatascript.js (or any name you’d like).
+        </Body>
+        {/* TODO: Fill in with real code */}
+        <Code copyable language={Language.JavaScript}>
+          TK
+        </Code>
+      </section>
+      <section>
+        <Body baseFontSize={16} weight="medium">
+          2. Run the script with <InlineCode>mongosh</InlineCode>
+        </Body>
+        <Body className={sectionInstructionStyles}>
+          In the same working directory run the command below. Please{' '}
+          <strong>paste in your username and password</strong> where there are
+          placeholders.{' '}
+          <em>
+            Note that this will add data to your cluster and will not be
+            reversible.
+          </em>
+        </Body>
+        <Code copyable language={Language.Bash}>
+          {RUN_SCRIPT_COMMAND}
+        </Code>
+      </section>
+      <section
+        className={cx(
+          resourceSectionStyles,
+          isDarkMode ? resourceSectionDarkStyles : resourceSectionLightStyles
+        )}
+      >
+        <Overline className={resourceSectionHeader}>Resources</Overline>
+        <ul>
+          <li>
+            <Link href="https://www.mongodb.com/docs/atlas/synthetic-data/">
+              Generating Synthetic Data with MongoDB
+            </Link>
+          </li>
+          <li>
+            <Link href="https://www.mongodb.com/docs/mongodb-shell/">
+              Learn About the MongoDB Shell
+            </Link>
+          </li>
+          <li>
+            {/* TODO: Update URL */}
+            <Link href="#">Access your Database Users</Link>
+          </li>
+        </ul>
+      </section>
+    </section>
+  );
+};
+
+export default ScriptScreen;

From 4ebb8189bd002df7ad4acb47d41529c99277bdba Mon Sep 17 00:00:00 2001
From: Leo Generali <leo.generali@mongodb.com>
Date: Thu, 4 Sep 2025 16:55:42 -0400
Subject: [PATCH 03/11] Fix whitespace and apostrphe issue

---
 .../components/mock-data-generator-modal/script-screen.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx
index 606707d2c0c..f150e2b9493 100644
--- a/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx
+++ b/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx
@@ -91,8 +91,8 @@ const ScriptScreen = () => {
           1. Create a .js file with the following script
         </Body>
         <Body className={sectionInstructionStyles}>
-          In the directory that you created, create a file
-          named mockdatascript.js (or any name you’d like).
+          In the directory that you created, create a file named
+          mockdatascript.js (or any name you&apos;d like).
         </Body>
         {/* TODO: Fill in with real code */}
         <Code copyable language={Language.JavaScript}>

From 13a8e9a2e833c2f70597f2057dee7049f6043095 Mon Sep 17 00:00:00 2001
From: Leo Generali <leo.generali@mongodb.com>
Date: Thu, 4 Sep 2025 16:56:42 -0400
Subject: [PATCH 04/11] better name

---
 .../mock-data-generator-modal/mock-data-generator-modal.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.tsx
index 58fd25e020d..b23ea9353d0 100644
--- a/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.tsx
+++ b/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.tsx
@@ -25,7 +25,7 @@ import { default as SchemaConfirmationScreen } from './raw-schema-confirmation';
 import FakerSchemaEditor from './faker-schema-editor';
 import ScriptScreen from './script-screen';
 
-const STEP_TO_COMPONENT: Record<MockDataGeneratorStep, React.JSX.Element> = {
+const STEP_TO_STEP_CONTENT: Record<MockDataGeneratorStep, React.JSX.Element> = {
   [MockDataGeneratorStep.SCHEMA_CONFIRMATION]: <SchemaConfirmationScreen />,
   [MockDataGeneratorStep.SCHEMA_EDITOR]: <FakerSchemaEditor />,
   [MockDataGeneratorStep.DOCUMENT_COUNT]: <></>, // TODO: Implement as part of CLOUDP-XXXXXX
@@ -85,7 +85,7 @@ const MockDataGeneratorModal = ({
       <ModalHeader title="Generate Mock Data" />
       <ModalBody>
         <div data-testid={`generate-mock-data-step-${currentStep}`}>
-          {STEP_TO_COMPONENT[currentStep]}
+          {STEP_TO_STEP_CONTENT[currentStep]}
         </div>
       </ModalBody>
       <ModalFooter className={footerStyles}>

From 8ada62a7037f7cfe0f6d0346c0678b5ac2e2ebac Mon Sep 17 00:00:00 2001
From: Leo Generali <leo.generali@mongodb.com>
Date: Fri, 5 Sep 2025 16:25:42 -0400
Subject: [PATCH 05/11] Update comment with ticket

---
 .../src/components/mock-data-generator-modal/script-screen.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx
index f150e2b9493..89d6fe4c5af 100644
--- a/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx
+++ b/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx
@@ -94,7 +94,7 @@ const ScriptScreen = () => {
           In the directory that you created, create a file named
           mockdatascript.js (or any name you&apos;d like).
         </Body>
-        {/* TODO: Fill in with real code */}
+        {/* TODO: CLOUDP-333860: Hook up to the code generated as part script generation */}
         <Code copyable language={Language.JavaScript}>
           TK
         </Code>

From 080dc5c97aff2c0a6e54ae44ced4fae9ad7a40bd Mon Sep 17 00:00:00 2001
From: Leo Generali <leo.generali@mongodb.com>
Date: Fri, 5 Sep 2025 16:25:53 -0400
Subject: [PATCH 06/11] Add tests

---
 .../mock-data-generator-modal.spec.tsx        | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx
index 9d0dd164906..a998d7bea46 100644
--- a/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx
+++ b/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx
@@ -228,6 +228,39 @@ describe('MockDataGeneratorModal', () => {
     // todo: assert that closing then re-opening the modal after an LLM err removes the err message
   });
 
+  describe('on the generate data step', () => {
+    it('enables the Back button', () => {
+      renderModal({ currentStep: MockDataGeneratorStep.GENERATE_DATA });
+
+      expect(
+        screen
+          .getByRole('button', { name: 'Back' })
+          .getAttribute('aria-disabled')
+      ).to.not.equal('true');
+    });
+
+    it('renders the main sections: Prerequisites, steps, and Resources', () => {
+      renderModal({ currentStep: MockDataGeneratorStep.GENERATE_DATA });
+
+      expect(screen.getByText('Prerequisites')).to.exist;
+      expect(screen.getByText('1. Create a .js file with the following script'))
+        .to.exist;
+      expect(screen.getByText('2. Run the script with')).to.exist;
+      expect(screen.getByText('Resources')).to.exist;
+    });
+
+    it('closes the modal when the Done button is clicked', async () => {
+      renderModal({ currentStep: MockDataGeneratorStep.GENERATE_DATA });
+
+      expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
+      userEvent.click(screen.getByText('Done'));
+      await waitFor(
+        () =>
+          expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist
+      );
+    });
+  });
+
   describe('when rendering the modal in a specific step', () => {
     const steps = Object.keys(
       StepButtonLabelMap

From 4b3598d4a7b04c31c5eff621dbbec400640ebc83 Mon Sep 17 00:00:00 2001
From: Leo Generali <leo.generali@mongodb.com>
Date: Fri, 5 Sep 2025 16:27:50 -0400
Subject: [PATCH 07/11] Add CLOUDP tickets

---
 .../mock-data-generator-modal/mock-data-generator-modal.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.tsx
index b23ea9353d0..eadb8b13e19 100644
--- a/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.tsx
+++ b/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.tsx
@@ -28,8 +28,8 @@ import ScriptScreen from './script-screen';
 const STEP_TO_STEP_CONTENT: Record<MockDataGeneratorStep, React.JSX.Element> = {
   [MockDataGeneratorStep.SCHEMA_CONFIRMATION]: <SchemaConfirmationScreen />,
   [MockDataGeneratorStep.SCHEMA_EDITOR]: <FakerSchemaEditor />,
-  [MockDataGeneratorStep.DOCUMENT_COUNT]: <></>, // TODO: Implement as part of CLOUDP-XXXXXX
-  [MockDataGeneratorStep.PREVIEW_DATA]: <></>, // TODO: Implement as part of CLOUDP-XXXXXX
+  [MockDataGeneratorStep.DOCUMENT_COUNT]: <></>, // TODO: Implement as part of CLOUDP-333856
+  [MockDataGeneratorStep.PREVIEW_DATA]: <></>, // TODO: Implement as part of CLOUDP-333857
   [MockDataGeneratorStep.GENERATE_DATA]: <ScriptScreen />,
 };
 

From 53260f4f82c5d0af5ff977c81ca02a966d56cedc Mon Sep 17 00:00:00 2001
From: Leo Generali <leo.generali@mongodb.com>
Date: Fri, 5 Sep 2025 16:33:48 -0400
Subject: [PATCH 08/11] Add todo to test

---
 .../mock-data-generator-modal.spec.tsx                          | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx
index a998d7bea46..70bca73b2d5 100644
--- a/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx
+++ b/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx
@@ -259,6 +259,8 @@ describe('MockDataGeneratorModal', () => {
           expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist
       );
     });
+
+    // todo: assert that the generated script is displayed in the code block
   });
 
   describe('when rendering the modal in a specific step', () => {

From 1bcc94988d1549e714e9dd8b4dd8fa3af1f22fbb Mon Sep 17 00:00:00 2001
From: Leo Generali <leo.generali@mongodb.com>
Date: Fri, 5 Sep 2025 17:17:27 -0400
Subject: [PATCH 09/11] Add connection to current project database users

---
 .../mock-data-generator-modal.spec.tsx        | 105 ++++++++++++++----
 .../script-screen.tsx                         |  16 ++-
 2 files changed, 94 insertions(+), 27 deletions(-)

diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx
index 70bca73b2d5..ddd38a9fdd7 100644
--- a/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx
+++ b/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx
@@ -2,7 +2,7 @@ import { expect } from 'chai';
 import React from 'react';
 import {
   screen,
-  render,
+  renderWithActiveConnection,
   waitFor,
   userEvent,
 } from '@mongodb-js/testing-library-compass';
@@ -14,12 +14,19 @@ import { MockDataGeneratorStep } from './types';
 import { StepButtonLabelMap } from './constants';
 import type { CollectionState } from '../../modules/collection-tab';
 import { default as collectionTabReducer } from '../../modules/collection-tab';
+import type { ConnectionInfo } from '@mongodb-js/connection-info';
 
 describe('MockDataGeneratorModal', () => {
-  function renderModal({
+  async function renderModal({
     isOpen = true,
     currentStep = MockDataGeneratorStep.SCHEMA_CONFIRMATION,
     mockServices = createMockServices(),
+    connectionInfo,
+  }: {
+    isOpen?: boolean;
+    currentStep?: MockDataGeneratorStep;
+    mockServices?: any;
+    connectionInfo?: ConnectionInfo;
   } = {}) {
     const initialState: CollectionState = {
       workspaceTabId: 'test-workspace-tab-id',
@@ -52,10 +59,11 @@ describe('MockDataGeneratorModal', () => {
       applyMiddleware(thunk.withExtraArgument(mockServices))
     );
 
-    return render(
+    return await renderWithActiveConnection(
       <Provider store={store}>
         <MockDataGeneratorModal />
-      </Provider>
+      </Provider>,
+      connectionInfo
     );
   }
 
@@ -89,20 +97,20 @@ describe('MockDataGeneratorModal', () => {
   }
 
   describe('generally', () => {
-    it('renders the modal when isOpen is true', () => {
-      renderModal();
+    it('renders the modal when isOpen is true', async () => {
+      await renderModal();
 
       expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
     });
 
-    it('does not render the modal when isOpen is false', () => {
-      renderModal({ isOpen: false });
+    it('does not render the modal when isOpen is false', async () => {
+      await renderModal({ isOpen: false });
 
       expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist;
     });
 
     it('closes the modal when the close button is clicked', async () => {
-      renderModal();
+      await renderModal();
 
       expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
       userEvent.click(screen.getByLabelText('Close modal'));
@@ -113,7 +121,7 @@ describe('MockDataGeneratorModal', () => {
     });
 
     it('closes the modal when the cancel button is clicked', async () => {
-      renderModal();
+      await renderModal();
 
       expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
       userEvent.click(screen.getByText('Cancel'));
@@ -154,7 +162,7 @@ describe('MockDataGeneratorModal', () => {
 
     it('cancels in-flight faker mapping requests when the cancel button is clicked', async () => {
       const mockServices = createMockServicesWithSlowAiRequest();
-      renderModal({ mockServices: mockServices as any });
+      await renderModal({ mockServices: mockServices as any });
 
       expect(screen.getByTestId('raw-schema-confirmation')).to.exist;
       userEvent.click(screen.getByText('Confirm'));
@@ -170,7 +178,7 @@ describe('MockDataGeneratorModal', () => {
 
     it('cancels in-flight faker mapping requests when the back button is clicked after schema confirmation', async () => {
       const mockServices = createMockServicesWithSlowAiRequest();
-      renderModal({ mockServices: mockServices as any });
+      await renderModal({ mockServices: mockServices as any });
 
       expect(screen.getByTestId('raw-schema-confirmation')).to.exist;
       userEvent.click(screen.getByText('Confirm'));
@@ -186,8 +194,8 @@ describe('MockDataGeneratorModal', () => {
   });
 
   describe('on the schema confirmation step', () => {
-    it('disables the Back button', () => {
-      renderModal();
+    it('disables the Back button', async () => {
+      await renderModal();
 
       expect(
         screen
@@ -197,7 +205,7 @@ describe('MockDataGeneratorModal', () => {
     });
 
     it('renders the faker schema editor when the confirm button is clicked', async () => {
-      renderModal();
+      await renderModal();
 
       expect(screen.getByTestId('raw-schema-confirmation')).to.exist;
       expect(screen.queryByTestId('faker-schema-editor')).to.not.exist;
@@ -212,7 +220,7 @@ describe('MockDataGeneratorModal', () => {
       const mockServices = createMockServices();
       mockServices.atlasAiService.getMockDataSchema = () =>
         Promise.reject('faker schema generation failed');
-      renderModal({ mockServices });
+      await renderModal({ mockServices });
 
       expect(screen.getByTestId('raw-schema-confirmation')).to.exist;
       expect(screen.queryByTestId('faker-schema-editor')).to.not.exist;
@@ -229,8 +237,8 @@ describe('MockDataGeneratorModal', () => {
   });
 
   describe('on the generate data step', () => {
-    it('enables the Back button', () => {
-      renderModal({ currentStep: MockDataGeneratorStep.GENERATE_DATA });
+    it('enables the Back button', async () => {
+      await renderModal({ currentStep: MockDataGeneratorStep.GENERATE_DATA });
 
       expect(
         screen
@@ -239,8 +247,8 @@ describe('MockDataGeneratorModal', () => {
       ).to.not.equal('true');
     });
 
-    it('renders the main sections: Prerequisites, steps, and Resources', () => {
-      renderModal({ currentStep: MockDataGeneratorStep.GENERATE_DATA });
+    it('renders the main sections: Prerequisites, steps, and Resources', async () => {
+      await renderModal({ currentStep: MockDataGeneratorStep.GENERATE_DATA });
 
       expect(screen.getByText('Prerequisites')).to.exist;
       expect(screen.getByText('1. Create a .js file with the following script'))
@@ -250,7 +258,7 @@ describe('MockDataGeneratorModal', () => {
     });
 
     it('closes the modal when the Done button is clicked', async () => {
-      renderModal({ currentStep: MockDataGeneratorStep.GENERATE_DATA });
+      await renderModal({ currentStep: MockDataGeneratorStep.GENERATE_DATA });
 
       expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
       userEvent.click(screen.getByText('Done'));
@@ -260,6 +268,57 @@ describe('MockDataGeneratorModal', () => {
       );
     });
 
+    it('renders the Database Users link with correct URL when projectId is available', async () => {
+      const atlasConnectionInfo: ConnectionInfo = {
+        id: 'test-atlas-connection',
+        connectionOptions: { connectionString: 'mongodb://localhost:27017' },
+        atlasMetadata: {
+          orgId: 'test-org',
+          projectId: 'test-project-123',
+          clusterName: 'test-cluster',
+          clusterUniqueId: 'test-cluster-unique-id',
+          clusterType: 'REPLICASET' as const,
+          clusterState: 'IDLE' as const,
+          metricsId: 'test-metrics-id',
+          metricsType: 'replicaSet' as const,
+          regionalBaseUrl: null,
+          instanceSize: 'M10',
+          supports: {
+            globalWrites: false,
+            rollingIndexes: true,
+          },
+        },
+      };
+
+      await renderModal({
+        currentStep: MockDataGeneratorStep.GENERATE_DATA,
+        connectionInfo: atlasConnectionInfo,
+      });
+
+      const databaseUsersLink = screen.getByRole('link', {
+        name: 'Access your Database Users',
+      });
+      expect(databaseUsersLink.getAttribute('href')).to.equal(
+        '/v2/test-project-123#/security/database/users'
+      );
+    });
+
+    it('does not render the Database Users link when projectId is not available', async () => {
+      const nonAtlasConnectionInfo: ConnectionInfo = {
+        id: 'test-local-connection',
+        connectionOptions: { connectionString: 'mongodb://localhost:27017' },
+        // No atlasMetadata means no projectId
+      };
+
+      await renderModal({
+        currentStep: MockDataGeneratorStep.GENERATE_DATA,
+        connectionInfo: nonAtlasConnectionInfo,
+      });
+
+      expect(screen.queryByRole('link', { name: 'Access your Database Users' }))
+        .to.not.exist;
+    });
+
     // todo: assert that the generated script is displayed in the code block
   });
 
@@ -270,8 +329,8 @@ describe('MockDataGeneratorModal', () => {
 
     // note: these tests can be removed after every modal step is implemented
     steps.forEach((currentStep) => {
-      it(`renders the button with the correct label when the user is in step "${currentStep}"`, () => {
-        renderModal({ currentStep });
+      it(`renders the button with the correct label when the user is in step "${currentStep}"`, async () => {
+        await renderModal({ currentStep });
         expect(screen.getByTestId('next-step-button')).to.have.text(
           StepButtonLabelMap[currentStep]
         );
diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx
index 89d6fe4c5af..f5a48a92931 100644
--- a/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx
+++ b/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx
@@ -13,6 +13,7 @@ import {
   spacing,
   useDarkMode,
 } from '@mongodb-js/compass-components';
+import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
 
 const RUN_SCRIPT_COMMAND = `
 mongosh "mongodb+srv://<your-cluster>.mongodb.net/mockDataDB" \\
@@ -60,6 +61,7 @@ const resourceSectionHeader = css({
 
 const ScriptScreen = () => {
   const isDarkMode = useDarkMode();
+  const connectionInfo = useConnectionInfo();
 
   return (
     <section className={outerSectionStyles}>
@@ -134,10 +136,16 @@ const ScriptScreen = () => {
               Learn About the MongoDB Shell
             </Link>
           </li>
-          <li>
-            {/* TODO: Update URL */}
-            <Link href="#">Access your Database Users</Link>
-          </li>
+          {connectionInfo.atlasMetadata &&
+            connectionInfo.atlasMetadata.projectId && (
+              <li>
+                <Link
+                  href={`/v2/${connectionInfo.atlasMetadata.projectId}#/security/database/users`}
+                >
+                  Access your Database Users
+                </Link>
+              </li>
+            )}
         </ul>
       </section>
     </section>

From 8560810e5b96c6d955707d0eca0e27b2b7ec4a3d Mon Sep 17 00:00:00 2001
From: Leo Generali <leo.generali@mongodb.com>
Date: Sat, 6 Sep 2025 18:31:57 -0400
Subject: [PATCH 10/11] Better placeholders

---
 .../components/mock-data-generator-modal/script-screen.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx
index f5a48a92931..452ae66f1c7 100644
--- a/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx
+++ b/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx
@@ -16,9 +16,9 @@ import {
 import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
 
 const RUN_SCRIPT_COMMAND = `
-mongosh "mongodb+srv://<your-cluster>.mongodb.net/mockDataDB" \\
-  --username <yourUsername> \\
-  --password "<yourPassword>" \\
+mongosh "mongodb+srv://<your-cluster>.mongodb.net/<your-database>" \\
+  --username <your-username> \\
+  --password "<your-password>" \\
   mockdatascript.js
 `;
 

From b85a3599cb169716ec11d64f70bf51f049eddbb0 Mon Sep 17 00:00:00 2001
From: Leo Generali <leo.generali@mongodb.com>
Date: Sat, 6 Sep 2025 18:37:23 -0400
Subject: [PATCH 11/11] Make all h2

---
 .../components/mock-data-generator-modal/script-screen.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx
index 452ae66f1c7..791ca4250a0 100644
--- a/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx
+++ b/packages/compass-collection/src/components/mock-data-generator-modal/script-screen.tsx
@@ -66,7 +66,7 @@ const ScriptScreen = () => {
   return (
     <section className={outerSectionStyles}>
       <section>
-        <Body baseFontSize={16} weight="medium">
+        <Body as="h2" baseFontSize={16} weight="medium">
           Prerequisites
         </Body>
         <Body className={css({ marginTop: spacing[200] })}>
@@ -89,7 +89,7 @@ const ScriptScreen = () => {
         </ul>
       </section>
       <section>
-        <Body baseFontSize={16} weight="medium">
+        <Body as="h2" baseFontSize={16} weight="medium">
           1. Create a .js file with the following script
         </Body>
         <Body className={sectionInstructionStyles}>
@@ -102,7 +102,7 @@ const ScriptScreen = () => {
         </Code>
       </section>
       <section>
-        <Body baseFontSize={16} weight="medium">
+        <Body as="h2" baseFontSize={16} weight="medium">
           2. Run the script with <InlineCode>mongosh</InlineCode>
         </Body>
         <Body className={sectionInstructionStyles}>