merge main back into branch

Merge branch 'main' into extend-user-data

Author: myang1220

.evergreen/functions.yml

@@ -731,7 +731,7 @@ functions:
   test-web-sandbox-atlas-cloud:
     - command: shell.exec
       # It can take a very long time for Atlas cluster to get deployed
-      timeout_secs: 2400
+      timeout_secs: 3600 # 1 hour
       params:
         working_dir: src
         shell: bash
@@ -746,6 +746,9 @@ functions:
           MCLI_ORG_ID: ${e2e_tests_mcli_org_id}
           MCLI_PROJECT_ID: ${e2e_tests_mcli_project_id}
           MCLI_OPS_MANAGER_URL: ${e2e_tests_mcli_ops_manager_url}
+          # CCS connection / op running time is slower than allowed timeouts
+          COMPASS_E2E_MOCHA_TIMEOUT: '720000' # 12 min
+          COMPASS_E2E_WEBDRIVER_WAITFOR_TIMEOUT: '360000' # 6 min
         script: |
           set -e
           # Load environment variables

THIRD-PARTY-NOTICES.md

@@ -1,5 +1,5 @@
 The following third-party software is used by and included in **Mongodb Compass**.
-This document was automatically generated on Fri Jul 18 2025.
+This document was automatically generated on Tue Jul 22 2025.
 
 ## List of dependencies
 

configs/webpack-config-compass/src/index.ts

@@ -45,6 +45,9 @@ const sharedIgnoreWarnings: NonNullable<Configuration['ignoreWarnings']> = [
   /the request of a dependency is an expression/,
   // Optional, platform-specific dependencies (mostly from driver)
   /Module not found.+?(mongo_crypt_v1.(dll|so|dylib)|@mongodb-js\/zstd|aws-crt|gcp-metadata)/,
+  // Optional, comes from emotion trying to (safely) use react apis that we
+  // don't have in React 17
+  /export 'useInsertionEffect'/,
 ];
 
 const sharedResolveOptions = (

docs/tracking-plan.md

@@ -6,7 +6,7 @@
 > the tracking plan for the specific Compass version you can use the following
 > URL: `https://github.com/mongodb-js/compass/blob/<compass version>/docs/tracking-plan.md`
 
-Generated on Fri, Jul 18, 2025
+Generated on Tue, Jul 22, 2025
 
 ## Table of Contents
 

packages/compass-app-stores/src/stores/instance-store.ts

@@ -101,16 +101,13 @@ export function createInstancesStore(
     > = {},
     { connectionId }: { connectionId?: string } = {}
   ) => {
-    let isFirstRun: boolean | undefined;
-
     try {
       if (!connectionId) {
         throw new Error('No connectionId provided');
       }
       const instance =
         instancesManager.getMongoDBInstanceForConnection(connectionId);
       const dataService = connections.getDataServiceForConnection(connectionId);
-      isFirstRun = instance.status === 'initial';
       await instance.refresh({
         dataService,
         ...refreshOptions,
@@ -123,7 +120,7 @@ export function createInstancesStore(
         {
           message: (err as Error).message,
           connectionId: connectionId,
-          isFirstRun,
+          isFirstRun: refreshOptions.firstRun,
         }
       );
       // The `instance.refresh` method is catching all expected errors: we treat
@@ -137,7 +134,7 @@ export function createInstancesStore(
       // place for the user to see the error. This is a very rare case, but we
       // don't want to leave the user without any indication that something went
       // wrong and so we show an toast with the error message
-      if (isFirstRun) {
+      if (refreshOptions.firstRun) {
         const { name, message } = err as Error;
         openToast('instance-refresh-failed', {
           title: 'Failed to retrieve server info',
@@ -359,6 +356,7 @@ export function createInstancesStore(
         {
           fetchDatabases: true,
           fetchDbStats: true,
+          firstRun: true,
         },
         {
           connectionId: instanceConnectionId,

packages/compass-data-modeling/src/components/collection-drawer-content.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import type { Relationship } from '../services/data-model-storage';
+import { Button, H3 } from '@mongodb-js/compass-components';
+import {
+  createNewRelationship,
+  deleteRelationship,
+  getCurrentDiagramFromState,
+  selectCurrentModel,
+  selectRelationship,
+} from '../store/diagram';
+import type { DataModelingState } from '../store/reducer';
+
+type CollectionDrawerContentProps = {
+  namespace: string;
+  relationships: Relationship[];
+  shouldShowRelationshipEditingForm?: boolean;
+  onCreateNewRelationshipClick: (namespace: string) => void;
+  onEditRelationshipClick: (rId: string) => void;
+  onDeleteRelationshipClick: (rId: string) => void;
+};
+
+const CollectionDrawerContent: React.FunctionComponent<
+  CollectionDrawerContentProps
+> = ({
+  namespace,
+  relationships,
+  onCreateNewRelationshipClick,
+  onEditRelationshipClick,
+  onDeleteRelationshipClick,
+}) => {
+  return (
+    <>
+      <H3>{namespace}</H3>
+      <ul>
+        {relationships.map((r) => {
+          return (
+            <li key={r.id} data-relationship-id={r.id}>
+              {r.relationship[0].fields?.join('.')}&nbsp;-&gt;&nbsp;
+              {r.relationship[1].fields?.join('.')}
+              <Button
+                onClick={() => {
+                  onEditRelationshipClick(r.id);
+                }}
+              >
+                Edit
+              </Button>
+              <Button
+                onClick={() => {
+                  onDeleteRelationshipClick(r.id);
+                }}
+              >
+                Delete
+              </Button>
+            </li>
+          );
+        })}
+      </ul>
+      <Button
+        onClick={() => {
+          onCreateNewRelationshipClick(namespace);
+        }}
+      >
+        Add relationship manually
+      </Button>
+    </>
+  );
+};
+
+export default connect(
+  (state: DataModelingState, ownProps: { namespace: string }) => {
+    return {
+      relationships: selectCurrentModel(
+        getCurrentDiagramFromState(state).edits
+      ).relationships.filter((r) => {
+        const [local, foreign] = r.relationship;
+        return (
+          local.ns === ownProps.namespace || foreign.ns === ownProps.namespace
+        );
+      }),
+    };
+  },
+  {
+    onCreateNewRelationshipClick: createNewRelationship,
+    onEditRelationshipClick: selectRelationship,
+    onDeleteRelationshipClick: deleteRelationship,
+  }
+)(CollectionDrawerContent);

packages/compass-data-modeling/src/components/data-modeling.tsx

@@ -6,11 +6,12 @@ import NewDiagramFormModal from './new-diagram-form';
 import type { DataModelingState } from '../store/reducer';
 import { DiagramProvider } from '@mongodb-js/diagramming';
 import DiagramEditorSidePanel from './diagram-editor-side-panel';
-type DataModelingPluginInitialProps = {
+
+type DataModelingProps = {
   showList: boolean;
 };
 
-const DataModeling: React.FunctionComponent<DataModelingPluginInitialProps> = ({
+const DataModeling: React.FunctionComponent<DataModelingProps> = ({
   showList,
 }) => {
   return (

packages/compass-data-modeling/src/components/diagram-editor-side-panel.spec.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import { expect } from 'chai';
+import {
+  createPluginTestHelpers,
+  screen,
+  waitFor,
+  userEvent,
+  within,
+} from '@mongodb-js/testing-library-compass';
+import { DataModelingWorkspaceTab } from '../index';
+import DiagramEditorSidePanel from './diagram-editor-side-panel';
+import {
+  getCurrentDiagramFromState,
+  openDiagram,
+  selectCollection,
+  selectCurrentModel,
+  selectRelationship,
+} from '../store/diagram';
+import dataModel from '../../test/fixtures/data-model-with-relationships.json';
+import type { MongoDBDataModelDescription } from '../services/data-model-storage';
+
+async function comboboxSelectItem(
+  label: string,
+  value: string,
+  visibleLabel = value
+) {
+  userEvent.click(screen.getByRole('textbox', { name: label }));
+  await waitFor(() => {
+    screen.getByRole('option', { name: visibleLabel });
+  });
+  userEvent.click(screen.getByRole('option', { name: visibleLabel }));
+  await waitFor(() => {
+    expect(screen.getByRole('textbox', { name: label })).to.have.attribute(
+      'value',
+      value
+    );
+  });
+}
+
+describe('DiagramEditorSidePanel', function () {
+  function renderDrawer() {
+    const { renderWithConnections } = createPluginTestHelpers(
+      DataModelingWorkspaceTab.provider.withMockServices({})
+    );
+    const result = renderWithConnections(
+      <DiagramEditorSidePanel></DiagramEditorSidePanel>
+    );
+    result.plugin.store.dispatch(
+      openDiagram(dataModel as MongoDBDataModelDescription)
+    );
+    return result;
+  }
+
+  it('should not render if no items are selected', function () {
+    renderDrawer();
+    expect(screen.queryByTestId('data-modeling-drawer')).to.eq(null);
+  });
+
+  it('should render a collection context drawer when collection is clicked', function () {
+    const result = renderDrawer();
+    result.plugin.store.dispatch(selectCollection('flights.airlines'));
+    expect(screen.getByText('flights.airlines')).to.be.visible;
+  });
+
+  it('should render a relationship context drawer when relations is clicked', function () {
+    const result = renderDrawer();
+    result.plugin.store.dispatch(
+      selectRelationship('204b1fc0-601f-4d62-bba3-38fade71e049')
+    );
+    expect(screen.getByText('Edit Relationship')).to.be.visible;
+    expect(
+      document.querySelector(
+        '[data-relationship-id="204b1fc0-601f-4d62-bba3-38fade71e049"]'
+      )
+    ).to.be.visible;
+  });
+
+  it('should change the content of the drawer when selecting different items', function () {
+    const result = renderDrawer();
+
+    result.plugin.store.dispatch(selectCollection('flights.airlines'));
+    expect(screen.getByText('flights.airlines')).to.be.visible;
+
+    result.plugin.store.dispatch(
+      selectCollection('flights.airports_coordinates_for_schema')
+    );
+    expect(screen.getByText('flights.airports_coordinates_for_schema')).to.be
+      .visible;
+
+    result.plugin.store.dispatch(
+      selectRelationship('204b1fc0-601f-4d62-bba3-38fade71e049')
+    );
+    expect(
+      document.querySelector(
+        '[data-relationship-id="204b1fc0-601f-4d62-bba3-38fade71e049"]'
+      )
+    ).to.be.visible;
+
+    result.plugin.store.dispatch(
+      selectRelationship('6f776467-4c98-476b-9b71-1f8a724e6c2c')
+    );
+    expect(
+      document.querySelector(
+        '[data-relationship-id="6f776467-4c98-476b-9b71-1f8a724e6c2c"]'
+      )
+    ).to.be.visible;
+
+    result.plugin.store.dispatch(selectCollection('flights.planes'));
+    expect(screen.getByText('flights.planes')).to.be.visible;
+  });
+
+  it('should open and edit relationship starting from collection', async function () {
+    const result = renderDrawer();
+    result.plugin.store.dispatch(selectCollection('flights.countries'));
+
+    // Open relationshipt editing form
+    const relationshipCard = document.querySelector<HTMLElement>(
+      '[data-relationship-id="204b1fc0-601f-4d62-bba3-38fade71e049"]'
+    );
+    userEvent.click(
+      within(relationshipCard!).getByRole('button', { name: 'Edit' })
+    );
+    expect(screen.getByText('Edit Relationship')).to.be.visible;
+
+    // Select new values
+    await comboboxSelectItem('Local collection', 'planes');
+    await comboboxSelectItem('Local field', 'name');
+    await comboboxSelectItem('Foreign collection', 'countries');
+    await comboboxSelectItem('Foreign field', 'iso_code');
+
+    // We should be testing through rendered UI but as it's really hard to make
+    // diagram rendering in tests property, we are just validating the final
+    // model here
+    const modifiedRelationship = selectCurrentModel(
+      getCurrentDiagramFromState(result.plugin.store.getState()).edits
+    ).relationships.find((r) => {
+      return r.id === '204b1fc0-601f-4d62-bba3-38fade71e049';
+    });
+
+    expect(modifiedRelationship)
+      .to.have.property('relationship')
+      .deep.eq([
+        {
+          ns: 'flights.planes',
+          fields: ['name'],
+          cardinality: 1,
+        },
+        {
+          ns: 'flights.countries',
+          fields: ['iso_code'],
+          cardinality: 1,
+        },
+      ]);
+  });
+});