feat(compass-data-modeling): editing relationship via dragging COMPASS-9332

Author: paula-stacho

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

@@ -12,9 +12,11 @@ function renderDiagramEditorToolbar(
       step="EDITING"
       hasUndo={true}
       hasRedo={true}
+      isInRelationshipDrawingMode={false}
       onUndoClick={() => {}}
       onRedoClick={() => {}}
       onExportClick={() => {}}
+      onRelationshipDrawingToggle={() => {}}
       {...props}
     />
   );
@@ -63,6 +65,36 @@ describe('DiagramEditorToolbar', function () {
     });
   });
 
+  context('add relationship button', function () {
+    it('renders it active if isInRelationshipDrawingMode is true', function () {
+      renderDiagramEditorToolbar({ isInRelationshipDrawingMode: true });
+      const addButton = screen.getByRole('button', {
+        name: 'Add Relationship',
+      });
+      expect(addButton).to.have.attribute('aria-pressed', 'true');
+    });
+
+    it('does not render it active if isInRelationshipDrawingMode is false', function () {
+      renderDiagramEditorToolbar({ isInRelationshipDrawingMode: false });
+      const addButton = screen.getByRole('button', {
+        name: 'Add Relationship',
+      });
+      expect(addButton).to.have.attribute('aria-pressed', 'false');
+    });
+
+    it('clicking on it calls onRelationshipDrawingToggle', function () {
+      const relationshipDrawingToggleSpy = sinon.spy();
+      renderDiagramEditorToolbar({
+        onRelationshipDrawingToggle: relationshipDrawingToggleSpy,
+      });
+      const addRelationshipButton = screen.getByRole('button', {
+        name: 'Add Relationship',
+      });
+      userEvent.click(addRelationshipButton);
+      expect(relationshipDrawingToggleSpy).to.have.been.calledOnce;
+    });
+  });
+
   it('renders export button and calls onExportClick', function () {
     const exportSpy = sinon.spy();
     renderDiagramEditorToolbar({ onExportClick: exportSpy });

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

@@ -13,6 +13,7 @@ import {
   spacing,
   useDarkMode,
   transparentize,
+  Tooltip,
 } from '@mongodb-js/compass-components';
 
 const containerStyles = css({
@@ -44,10 +45,21 @@ export const DiagramEditorToolbar: React.FunctionComponent<{
   step: DataModelingState['step'];
   hasUndo: boolean;
   hasRedo: boolean;
+  isInRelationshipDrawingMode: boolean;
   onUndoClick: () => void;
   onRedoClick: () => void;
   onExportClick: () => void;
-}> = ({ step, hasUndo, onUndoClick, hasRedo, onRedoClick, onExportClick }) => {
+  onRelationshipDrawingToggle: () => void;
+}> = ({
+  step,
+  hasUndo,
+  onUndoClick,
+  hasRedo,
+  onRedoClick,
+  onExportClick,
+  onRelationshipDrawingToggle,
+  isInRelationshipDrawingMode,
+}) => {
   const darkmode = useDarkMode();
   if (step !== 'EDITING') {
     return null;
@@ -58,6 +70,20 @@ export const DiagramEditorToolbar: React.FunctionComponent<{
       data-testid="diagram-editor-toolbar"
     >
       <div className={toolbarGroupStyles}>
+        <Tooltip
+          trigger={
+            <IconButton
+              aria-label="Add Relationship"
+              onClick={onRelationshipDrawingToggle}
+              active={isInRelationshipDrawingMode}
+              aria-pressed={isInRelationshipDrawingMode}
+            >
+              <Icon glyph="Relationship"></Icon>
+            </IconButton>
+          }
+        >
+          Drag from one collection to another to create a relationship.
+        </Tooltip>
         <IconButton aria-label="Undo" disabled={!hasUndo} onClick={onUndoClick}>
           <Icon glyph="Undo"></Icon>
         </IconButton>

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

@@ -18,6 +18,7 @@ import {
   selectRelationship,
   selectBackground,
   type DiagramState,
+  createNewRelationship,
 } from '../store/diagram';
 import {
   Banner,
@@ -231,6 +232,7 @@ const DiagramEditor: React.FunctionComponent<{
   onRelationshipSelect: (rId: string) => void;
   onDiagramBackgroundClicked: () => void;
   selectedItems: SelectedItems;
+  onRelationshipDrawn: (source: string, target: string) => void;
 }> = ({
   diagramLabel,
   step,
@@ -242,6 +244,7 @@ const DiagramEditor: React.FunctionComponent<{
   onCollectionSelect,
   onRelationshipSelect,
   onDiagramBackgroundClicked,
+  onRelationshipDrawn,
   selectedItems,
 }) => {
   const { log, mongoLogId } = useLogger('COMPASS-DATA-MODELING-DIAGRAM-EDITOR');
@@ -250,6 +253,8 @@ const DiagramEditor: React.FunctionComponent<{
   const diagram = useDiagram();
   const [areNodesReady, setAreNodesReady] = useState(false);
   const { openDrawer } = useDrawerActions();
+  const [isInRelationshipDrawingMode, setIsInRelationshipDrawingMode] =
+    useState(false);
 
   const setDiagramContainerRef = useCallback(
     (ref: HTMLDivElement | null) => {
@@ -302,9 +307,27 @@ const DiagramEditor: React.FunctionComponent<{
           !!selectedItems &&
           selectedItems.type === 'collection' &&
           selectedItems.id === coll.ns,
+        connectable: isInRelationshipDrawingMode,
+        draggable: !isInRelationshipDrawingMode,
       })
     );
-  }, [model?.collections, model?.relationships, selectedItems]);
+  }, [
+    model?.collections,
+    model?.relationships,
+    selectedItems,
+    isInRelationshipDrawingMode,
+  ]);
+
+  const handleNodesConnect = useCallback(
+    (source: string, target: string) => {
+      onRelationshipDrawn(source, target);
+    },
+    [onRelationshipDrawn]
+  );
+
+  const handleRelationshipDrawingToggle = useCallback(() => {
+    setIsInRelationshipDrawingMode((prev) => !prev);
+  }, []);
 
   const applyInitialLayout = useCallback(async () => {
     try {
@@ -420,14 +443,25 @@ const DiagramEditor: React.FunctionComponent<{
             onNodeDragStop={(evt, node) => {
               onMoveCollection(node.id, [node.position.x, node.position.y]);
             }}
+            onConnect={({ source, target }) => {
+              handleNodesConnect(source, target);
+              setIsInRelationshipDrawingMode(false);
+            }}
           />
         </div>
       </div>
     );
   }
 
   return (
-    <WorkspaceContainer toolbar={<DiagramEditorToolbar />}>
+    <WorkspaceContainer
+      toolbar={
+        <DiagramEditorToolbar
+          onRelationshipDrawingToggle={handleRelationshipDrawingToggle}
+          isInRelationshipDrawingMode={isInRelationshipDrawingMode}
+        />
+      }
+    >
       {content}
       <ExportDiagramModal />
     </WorkspaceContainer>
@@ -454,6 +488,7 @@ export default connect(
     onMoveCollection: moveCollection,
     onCollectionSelect: selectCollection,
     onRelationshipSelect: selectRelationship,
+    onRelationshipDrawn: createNewRelationship,
     onDiagramBackgroundClicked: selectBackground,
   }
 )(DiagramEditor);

packages/compass-data-modeling/src/store/diagram.ts

@@ -322,7 +322,8 @@ export function selectBackground(): DiagramBackgroundSelectedAction {
 }
 
 export function createNewRelationship(
-  namespace: string
+  localNamespace: string,
+  foreignNamespace: string | null = null
 ): DataModelingThunkAction<void, RelationSelectedAction> {
   return (dispatch, getState, { track }) => {
     const relationshipId = new UUID().toString();
@@ -335,8 +336,8 @@ export function createNewRelationship(
         relationship: {
           id: relationshipId,
           relationship: [
-            { ns: namespace, cardinality: 1, fields: null },
-            { ns: null, cardinality: 1, fields: null },
+            { ns: localNamespace, cardinality: 1, fields: null },
+            { ns: foreignNamespace, cardinality: 1, fields: null },
           ],
           isInferred: false,
         },