feat(data-modeling): node selection and relationship editing store and actions COMPASS-9476

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,
+        },
+      ]);
+  });
+});

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

@@ -1,26 +1,20 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
-import { closeSidePanel } from '../store/side-panel';
 import {
   Button,
   css,
   cx,
-  Body,
-  spacing,
   palette,
   useDarkMode,
 } from '@mongodb-js/compass-components';
+import CollectionDrawerContent from './collection-drawer-content';
+import RelationshipDrawerContent from './relationship-drawer-content';
+import { closeDrawer } from '../store/diagram';
 
 const containerStyles = css({
   width: '400px',
   height: '100%',
-
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  gap: spacing[400],
   borderLeft: `1px solid ${palette.gray.light2}`,
 });
 
@@ -29,21 +23,42 @@ const darkModeContainerStyles = css({
 });
 
 type DiagramEditorSidePanelProps = {
-  isOpen: boolean;
+  selectedItems: { type: 'relationship' | 'collection'; id: string } | null;
   onClose: () => void;
 };
 
 function DiagmramEditorSidePanel({
-  isOpen,
+  selectedItems,
   onClose,
 }: DiagramEditorSidePanelProps) {
   const isDarkMode = useDarkMode();
-  if (!isOpen) {
+
+  if (!selectedItems) {
     return null;
   }
+
+  let content;
+
+  if (selectedItems.type === 'collection') {
+    content = (
+      <CollectionDrawerContent
+        namespace={selectedItems.id}
+      ></CollectionDrawerContent>
+    );
+  } else if (selectedItems.type === 'relationship') {
+    content = (
+      <RelationshipDrawerContent
+        relationshipId={selectedItems.id}
+      ></RelationshipDrawerContent>
+    );
+  }
+
   return (
-    <div className={cx(containerStyles, isDarkMode && darkModeContainerStyles)}>
-      <Body>This feature is under development.</Body>
+    <div
+      className={cx(containerStyles, isDarkMode && darkModeContainerStyles)}
+      data-testid="data-modeling-drawer"
+    >
+      {content}
       <Button onClick={onClose} variant="primary" size="small">
         Close Side Panel
       </Button>
@@ -53,12 +68,11 @@ function DiagmramEditorSidePanel({
 
 export default connect(
   (state: DataModelingState) => {
-    const { sidePanel } = state;
     return {
-      isOpen: sidePanel.isOpen,
+      selectedItems: state.diagram?.selectedItems ?? null,
     };
   },
   {
-    onClose: closeSidePanel,
+    onClose: closeDrawer,
   }
 )(DiagmramEditorSidePanel);