more cleanup and tests

Author: paula-stacho

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

@@ -8,7 +8,6 @@ import React, {
 import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
 import {
-  applyEdit,
   applyInitialLayout,
   moveCollection,
   getCurrentDiagramFromState,
@@ -21,11 +20,8 @@ import {
   css,
   spacing,
   Button,
-  palette,
-  ErrorSummary,
   useDarkMode,
 } from '@mongodb-js/compass-components';
-import { CodemirrorMultilineEditor } from '@mongodb-js/compass-editor';
 import { cancelAnalysis, retryAnalysis } from '../store/analysis-process';
 import {
   Diagram,
@@ -34,8 +30,7 @@ import {
   useDiagram,
   applyLayout,
 } from '@mongodb-js/diagramming';
-import type { Edit, StaticModel } from '../services/data-model-storage';
-import { UUID } from 'bson';
+import type { StaticModel } from '../services/data-model-storage';
 import DiagramEditorToolbar from './diagram-editor-toolbar';
 import ExportDiagramModal from './export-diagram-modal';
 import { useLogger } from '@mongodb-js/compass-logging/provider';
@@ -90,31 +85,6 @@ const modelPreviewStyles = css({
   minHeight: 0,
 });
 
-const editorContainerStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 8,
-  boxShadow: `0 0 0 2px ${palette.gray.light2}`,
-});
-
-const editorContainerApplyContainerStyles = css({
-  padding: spacing[200],
-  justifyContent: 'flex-end',
-  gap: spacing[200],
-  display: 'flex',
-  width: '100%',
-  alignItems: 'center',
-});
-
-const editorContainerPlaceholderButtonStyles = css({
-  paddingLeft: 8,
-  paddingRight: 8,
-  alignSelf: 'flex-start',
-  display: 'flex',
-  gap: spacing[200],
-  paddingTop: spacing[200],
-});
-
 const DiagramEditor: React.FunctionComponent<{
   diagramLabel: string;
   step: DataModelingState['step'];
@@ -150,54 +120,6 @@ const DiagramEditor: React.FunctionComponent<{
     [diagram]
   );
 
-  const [applyInput, setApplyInput] = useState('{}');
-
-  const isEditValid = useMemo(() => {
-    try {
-      JSON.parse(applyInput);
-      return true;
-    } catch {
-      return false;
-    }
-  }, [applyInput]);
-
-  const applyPlaceholder =
-    (type: 'AddRelationship' | 'RemoveRelationship') => () => {
-      let placeholder = {};
-      switch (type) {
-        case 'AddRelationship':
-          placeholder = {
-            type: 'AddRelationship',
-            relationship: {
-              id: new UUID().toString(),
-              relationship: [
-                {
-                  ns: 'db.sourceCollection',
-                  cardinality: 1,
-                  fields: ['field1'],
-                },
-                {
-                  ns: 'db.targetCollection',
-                  cardinality: 1,
-                  fields: ['field2'],
-                },
-              ],
-              isInferred: false,
-            },
-          };
-          break;
-        case 'RemoveRelationship':
-          placeholder = {
-            type: 'RemoveRelationship',
-            relationshipId: new UUID().toString(),
-          };
-          break;
-        default:
-          throw new Error(`Unknown placeholder ${type}`);
-      }
-      setApplyInput(JSON.stringify(placeholder, null, 2));
-    };
-
   const edges = useMemo(() => {
     return (model?.relationships ?? []).map((relationship): EdgeProps => {
       const [source, target] = relationship.relationship;
@@ -333,29 +255,9 @@ const DiagramEditor: React.FunctionComponent<{
               maxZoom: 1,
               minZoom: 0.25,
             }}
-            onSelectionChange={({ nodes }) => {
-              console.log('SELECTION CHANGE', nodes);
-            }}
-            onNodeDrag={(evt, node) => {
-              console.log('NODE DRAG', node);
-              // onMoveCollection(node.id, [node.position.x, node.position.y]);
-            }}
             onNodeDragStop={(evt, node) => {
-              console.log('NODE DRAG STOP', node);
               onMoveCollection(node.id, [node.position.x, node.position.y]);
             }}
-            onEdgeClick={(evt, edge) => {
-              setApplyInput(
-                JSON.stringify(
-                  {
-                    type: 'RemoveRelationship',
-                    relationshipId: edge.id,
-                  },
-                  null,
-                  2
-                )
-              );
-            }}
           />
         </div>
       </div>

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

@@ -4,6 +4,7 @@ import {
   applyEdit,
   applyInitialLayout,
   getCurrentDiagramFromState,
+  getCurrentModel,
   openDiagram,
   redoEdit,
   undoEdit,
@@ -201,6 +202,7 @@ describe('Data Modeling store', function () {
         ],
         isInferred: false,
       };
+
       store.dispatch(
         applyEdit({
           type: 'AddRelationship',
@@ -217,6 +219,9 @@ describe('Data Modeling store', function () {
         type: 'AddRelationship',
         relationship: newRelationship,
       });
+
+      const currentModel = getCurrentModel(diagram);
+      expect(currentModel.relationships).to.have.length(2);
     });
 
     it('should not apply invalid AddRelationship edit', function () {
@@ -239,6 +244,48 @@ describe('Data Modeling store', function () {
       const diagram = getCurrentDiagramFromState(store.getState());
       expect(diagram.edits).to.deep.equal(loadedDiagram.edits);
     });
+
+    it('should apply a valid MoveCollection edit', function () {
+      store.dispatch(openDiagram(loadedDiagram));
+
+      const edit: Omit<
+        Extract<Edit, { type: 'MoveCollection' }>,
+        'id' | 'timestamp'
+      > = {
+        type: 'MoveCollection',
+        ns: model.collections[0].ns,
+        newPosition: [100, 100],
+      };
+      store.dispatch(applyEdit(edit));
+
+      const state = store.getState();
+      const diagram = getCurrentDiagramFromState(state);
+      expect(state.diagram?.editErrors).to.be.undefined;
+      expect(diagram.edits).to.have.length(2);
+      expect(diagram.edits[0]).to.deep.equal(loadedDiagram.edits[0]);
+      expect(diagram.edits[1]).to.deep.include(edit);
+
+      const currentModel = getCurrentModel(diagram);
+      expect(currentModel.collections[0].displayPosition).to.deep.equal([
+        100, 100,
+      ]);
+    });
+
+    it('should not apply invalid MoveCollection edit', function () {
+      store.dispatch(openDiagram(loadedDiagram));
+
+      const edit = {
+        type: 'MoveCollection',
+        ns: 'nonexistent.collection',
+      } as unknown as Edit;
+      store.dispatch(applyEdit(edit));
+
+      const editErrors = store.getState().diagram?.editErrors;
+      expect(editErrors).to.have.length(1);
+      expect(editErrors && editErrors[0]).to.equal("'newPosition' is required");
+      const diagram = getCurrentDiagramFromState(store.getState());
+      expect(diagram.edits).to.deep.equal(loadedDiagram.edits);
+    });
   });
 
   it('undo & redo', function () {