add validation

Author: paula-stacho

package-lock.json

@@ -93,7 +93,8 @@
     "react-dom": "^17.0.2",
     "sinon": "^17.0.1",
     "typescript": "^5.0.4",
-    "xvfb-maybe": "^0.2.1"
+    "xvfb-maybe": "^0.2.1",
+    "zod": "^3.25.1"
   },
   "is_compass_plugin": true
 }

packages/compass-data-modeling/package.json

@@ -19,11 +19,10 @@ import {
   spacing,
   Button,
   palette,
-  SplitButton,
-  RadioBoxGroup,
-  RadioBox,
+  ErrorSummary,
 } from '@mongodb-js/compass-components';
 import { cancelAnalysis, retryAnalysis } from '../store/analysis-process';
+import type { Edit, StaticModel } from '../services/data-model-storage';
 
 const loadingContainerStyles = css({
   width: '100%',
@@ -76,17 +75,20 @@ const modelPreviewStyles = css({
 });
 
 const editorContainerStyles = css({
-  height: 46 + 160 + 34 + 16,
   display: 'flex',
   flexDirection: 'column',
   gap: 8,
   boxShadow: `0 0 0 2px ${palette.gray.light2}`,
 });
 
-const editorContainerApplyButtonStyles = css({
+const editorContainerApplyContainerStyles = css({
   paddingLeft: 8,
   paddingRight: 8,
-  alignSelf: 'flex-end',
+  justifyContent: 'flex-end',
+  gap: spacing[200],
+  display: 'flex',
+  width: '100%',
+  height: spacing[1200],
 });
 
 const editorContainerPlaceholderButtonStyles = css({
@@ -104,18 +106,19 @@ const DiagramEditor: React.FunctionComponent<{
   onUndoClick: () => void;
   hasRedo: boolean;
   onRedoClick: () => void;
-  model: unknown;
+  model: StaticModel | null;
+  editErrors?: string[];
   onRetryClick: () => void;
   onCancelClick: () => void;
-  // TODO
-  onApplyClick: (edit: unknown) => void;
+  onApplyClick: (edit: Edit) => void;
 }> = ({
   step,
   hasUndo,
   onUndoClick,
   hasRedo,
   onRedoClick,
   model,
+  editErrors,
   onRetryClick,
   onCancelClick,
   onApplyClick,
@@ -137,26 +140,27 @@ const DiagramEditor: React.FunctionComponent<{
         case 'AddRelationship':
           placeholder = {
             type: 'AddRelationship',
-            id: 'relationship1',
-            relationship: [
-              {
-                ns: 'db.sourceCollection',
-                cardinality: 1,
-                fields: ['field1'],
-              },
-              {
-                ns: 'db.targetCollection',
-                cardinality: 1,
-                fields: ['field2'],
-              },
-            ],
-            isInferred: false,
+            relationship: {
+              id: 'relationship1',
+              relationship: [
+                {
+                  ns: 'db.sourceCollection',
+                  cardinality: 1,
+                  fields: ['field1'],
+                },
+                {
+                  ns: 'db.targetCollection',
+                  cardinality: 1,
+                  fields: ['field2'],
+                },
+              ],
+              isInferred: false,
+            },
           };
           break;
         case 'RemoveRelationship':
           placeholder = {
             type: 'RemoveRelationship',
-            id: 'relationship1',
             relationshipId: 'relationship1',
           };
           break;
@@ -244,7 +248,8 @@ const DiagramEditor: React.FunctionComponent<{
               maxLines={10}
             ></CodemirrorMultilineEditor>
           </div>
-          <div className={editorContainerApplyButtonStyles}>
+          <div className={editorContainerApplyContainerStyles}>
+            {editErrors && <ErrorSummary errors={editErrors} />}
             <Button
               onClick={() => {
                 onApplyClick(JSON.parse(applyInput));
@@ -302,6 +307,7 @@ export default connect(
       model: diagram
         ? selectCurrentModel(getCurrentDiagramFromState(state))
         : null,
+      editErrors: diagram?.editErrors,
     };
   },
   {

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

@@ -1,4 +1,5 @@
 import { z } from '@mongodb-js/compass-user-data';
+import type { ZodError } from 'zod';
 
 export const RelationshipSideSchema = z.object({
   ns: z.string(),
@@ -52,6 +53,24 @@ export const EditSchema = z.discriminatedUnion('type', [
   }),
 ]);
 
+export const validateEdit = (
+  edit: unknown
+): { result: true; errors?: never } | { result: false; errors: string[] } => {
+  try {
+    EditSchema.parse(edit);
+    return { result: true };
+  } catch (e) {
+    return {
+      result: false,
+      errors: (e as ZodError).issues.map(({ path, message }) =>
+        message === 'Required'
+          ? `'${path}' is required`
+          : `Invalid field '${path}': ${message}`
+      ),
+    };
+  }
+};
+
 export type Edit = z.output<typeof EditSchema>;
 
 export const MongoDBDataModelDescriptionSchema = z.object({

packages/compass-data-modeling/src/services/data-model-storage.ts

@@ -1,10 +1,11 @@
 import type { Reducer } from 'redux';
 import { UUID } from 'bson';
 import { isAction } from './util';
-import type {
-  Edit,
-  MongoDBDataModelDescription,
-  StaticModel,
+import {
+  validateEdit,
+  type Edit,
+  type MongoDBDataModelDescription,
+  type StaticModel,
 } from '../services/data-model-storage';
 import { AnalysisProcessActionTypes } from './analysis-process';
 import { memoize } from 'lodash';
@@ -18,6 +19,7 @@ export type DiagramState =
         current: Edit[];
         next: Edit[][];
       };
+      editErrors?: string[];
     })
   | null; // null when no diagram is currently open
 
@@ -26,6 +28,7 @@ export enum DiagramActionTypes {
   DELETE_DIAGRAM = 'data-modeling/diagram/DELETE_DIAGRAM',
   RENAME_DIAGRAM = 'data-modeling/diagram/RENAME_DIAGRAM',
   APPLY_EDIT = 'data-modeling/diagram/APPLY_EDIT',
+  APPLY_EDIT_FAILED = 'data-modeling/diagram/APPLY_EDIT_FAILED',
   UNDO_EDIT = 'data-modeling/diagram/UNDO_EDIT',
   REDO_EDIT = 'data-modeling/diagram/REDO_EDIT',
 }
@@ -51,6 +54,11 @@ export type ApplyEditAction = {
   edit: Edit;
 };
 
+export type ApplyEditFailedAction = {
+  type: DiagramActionTypes.APPLY_EDIT_FAILED;
+  errors: string[];
+};
+
 export type UndoEditAction = {
   type: DiagramActionTypes.UNDO_EDIT;
 };
@@ -64,6 +72,7 @@ export type DiagramActions =
   | DeleteDiagramAction
   | RenameDiagramAction
   | ApplyEditAction
+  | ApplyEditFailedAction
   | UndoEditAction
   | RedoEditAction;
 
@@ -135,6 +144,13 @@ export const diagramReducer: Reducer<DiagramState> = (
         current: [...state.edits.current, action.edit],
         next: [],
       },
+      editErrors: undefined,
+    };
+  }
+  if (isAction(action, DiagramActionTypes.APPLY_EDIT_FAILED)) {
+    return {
+      ...state,
+      editErrors: action.errors,
     };
   }
   if (isAction(action, DiagramActionTypes.UNDO_EDIT)) {
@@ -183,16 +199,25 @@ export function redoEdit(): DataModelingThunkAction<void, RedoEditAction> {
 }
 
 export function applyEdit(
-  edit: Edit
-): DataModelingThunkAction<void, ApplyEditAction> {
+  rawEdit: Edit
+): DataModelingThunkAction<void, ApplyEditAction | ApplyEditFailedAction> {
   return (dispatch, getState, { dataModelStorage }) => {
+    const edit = {
+      ...rawEdit,
+      id: new UUID().toString(),
+      timestamp: new Date().toISOString(),
+    };
+    const { result: isValid, errors } = validateEdit(edit);
+    if (!isValid) {
+      dispatch({
+        type: DiagramActionTypes.APPLY_EDIT_FAILED,
+        errors,
+      });
+      return;
+    }
     dispatch({
       type: DiagramActionTypes.APPLY_EDIT,
-      edit: {
-        ...edit,
-        id: new UUID().toString(),
-        timestamp: new Date().toISOString(),
-      },
+      edit,
     });
     void dataModelStorage.save(getCurrentDiagramFromState(getState()));
   };