feat: diagram edit handling COMPASS-9312

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

@@ -19,8 +19,10 @@ import {
   spacing,
   Button,
   palette,
+  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%',
@@ -73,17 +75,29 @@ const modelPreviewStyles = css({
 });
 
 const editorContainerStyles = css({
-  height: 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[100],
+});
+
+const editorContainerPlaceholderButtonStyles = css({
+  paddingLeft: 8,
+  paddingRight: 8,
+  alignSelf: 'flex-start',
+  display: 'flex',
+  gap: spacing[200],
+  paddingTop: spacing[200],
 });
 
 const DiagramEditor: React.FunctionComponent<{
@@ -92,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,
@@ -118,6 +133,43 @@ const DiagramEditor: React.FunctionComponent<{
     }
   }, [applyInput]);
 
+  const applyPlaceholder =
+    (type: 'AddRelationship' | 'RemoveRelationship') => () => {
+      let placeholder = {};
+      switch (type) {
+        case 'AddRelationship':
+          placeholder = {
+            type: 'AddRelationship',
+            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',
+            relationshipId: 'relationship1',
+          };
+          break;
+        default:
+          throw new Error(`Unknown placeholder ${placeholder}`);
+      }
+      setApplyInput(JSON.stringify(placeholder, null, 2));
+    };
+
   const modelStr = useMemo(() => {
     return JSON.stringify(model, null, 2);
   }, [model]);
@@ -172,6 +224,20 @@ const DiagramEditor: React.FunctionComponent<{
           ></CodemirrorMultilineEditor>
         </div>
         <div className={editorContainerStyles} data-testid="apply-editor">
+          <div className={editorContainerPlaceholderButtonStyles}>
+            <Button
+              onClick={applyPlaceholder('AddRelationship')}
+              data-testid="placeholder-addrelationship-button"
+            >
+              Add relationship
+            </Button>
+            <Button
+              onClick={applyPlaceholder('RemoveRelationship')}
+              data-testid="placeholder-removerelationship-button"
+            >
+              Remove relationship
+            </Button>
+          </div>
           <div>
             <CodemirrorMultilineEditor
               language="json"
@@ -180,7 +246,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));
@@ -238,6 +305,7 @@ export default connect(
       model: diagram
         ? selectCurrentModel(getCurrentDiagramFromState(state))
         : null,
+      editErrors: diagram?.editErrors,
     };
   },
   {

packages/compass-data-modeling/src/services/data-model-storage-electron.tsx

@@ -24,7 +24,7 @@ class DataModelStorageElectron implements DataModelStorage {
   async loadAll(): Promise<MongoDBDataModelDescription[]> {
     try {
       const res = await this.userData.readAll();
-      return res.data;
+      return res.data as MongoDBDataModelDescription[];
     } catch (err) {
       return [];
     }

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

@@ -1,4 +1,96 @@
 import { z } from '@mongodb-js/compass-user-data';
+import type { MongoDBJSONSchema } from 'mongodb-schema';
+
+export const RelationshipSideSchema = z.object({
+  ns: z.string(),
+  cardinality: z.number(),
+  fields: z.array(z.string()),
+});
+
+export type RelationshipSide = z.output<typeof RelationshipSideSchema>;
+
+export const RelationshipSchema = z.object({
+  id: z.string(),
+  relationship: z.tuple([RelationshipSideSchema, RelationshipSideSchema]),
+  isInferred: z.boolean(),
+});
+
+export type Relationship = z.output<typeof RelationshipSchema>;
+
+export const StaticModelSchema = z.object({
+  collections: z.array(
+    z.object({
+      ns: z.string(),
+      jsonSchema: z.unknown(), // skipped for simplicity
+      indexes: z.array(z.record(z.unknown())),
+      shardKey: z.record(z.unknown()).optional(),
+      displayPosition: z.tuple([z.number(), z.number()]),
+    })
+  ),
+  relationships: z.array(RelationshipSchema),
+});
+
+export type StaticModel = Omit<
+  z.output<typeof StaticModelSchema>,
+  'collections'
+> & {
+  collections: Array<
+    Omit<
+      z.output<typeof StaticModelSchema>['collections'][number],
+      'jsonSchema'
+    > & {
+      jsonSchema: MongoDBJSONSchema;
+    }
+  >;
+};
+
+export const EditSchema = z.discriminatedUnion('type', [
+  z.object({
+    type: z.literal('SetModel'),
+    id: z.string(),
+    timestamp: z.string(),
+    model: StaticModelSchema,
+  }),
+  z.object({
+    type: z.literal('AddRelationship'),
+    id: z.string(),
+    timestamp: z.string(),
+    relationship: RelationshipSchema,
+  }),
+  z.object({
+    type: z.literal('RemoveRelationship'),
+    id: z.string(),
+    timestamp: z.string(),
+    relationshipId: z.string(),
+  }),
+]);
+
+type BaseEdit = z.output<typeof EditSchema>;
+type SetModelEdit = Omit<Extract<BaseEdit, { type: 'SetModel' }>, 'model'> & {
+  model: StaticModel;
+};
+
+export type Edit =
+  | SetModelEdit
+  | Extract<BaseEdit, { type: 'AddRelationship' | 'RemoveRelationship' }>;
+
+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 z.ZodError).issues.map(({ path, message }) =>
+        message === 'Required'
+          ? `'${path}' is required`
+          : `Invalid field '${path}': ${message}`
+      ),
+    };
+  }
+};
 
 export const MongoDBDataModelDescriptionSchema = z.object({
   id: z.string(),
@@ -11,13 +103,15 @@ export const MongoDBDataModelDescriptionSchema = z.object({
    */
   connectionId: z.string().nullable(),
 
-  // TODO: define rest of the schema based on arch doc / tech design
-  edits: z.array(z.unknown()).default([]),
+  edits: z.array(EditSchema).default([]),
 });
 
-export type MongoDBDataModelDescription = z.output<
-  typeof MongoDBDataModelDescriptionSchema
->;
+export type MongoDBDataModelDescription = Omit<
+  z.output<typeof MongoDBDataModelDescriptionSchema>,
+  'edits'
+> & {
+  edits: Array<Edit>;
+};
 
 export interface DataModelStorage {
   save(description: MongoDBDataModelDescription): Promise<boolean>;