feat(data-modeling): add note editing to collections and relationships

Author: gribnoysup

packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx

@@ -11,28 +11,36 @@ import {
   spacing,
   TextInput,
   Icon,
+  TextArea,
 } from '@mongodb-js/compass-components';
 import {
   createNewRelationship,
   deleteRelationship,
   selectCurrentModelFromState,
   selectRelationship,
+  updateCollectionNote,
 } from '../../store/diagram';
 import type { DataModelingState } from '../../store/reducer';
 import { getDefaultRelationshipName } from '../../utils';
 import DMDrawerSection from './dm-drawer-section';
+import { useChangeOnBlur } from './use-change-on-blur';
 
 type CollectionDrawerContentProps = {
   namespace: string;
   relationships: Relationship[];
   onCreateNewRelationshipClick: (namespace: string) => void;
   onEditRelationshipClick: (rId: string) => void;
   onDeleteRelationshipClick: (rId: string) => void;
+  note?: string;
+  onNoteChange: (namespace: string, note: string) => void;
 };
 
 const formFieldContainerStyles = css({
-  marginBottom: spacing[400],
   marginTop: spacing[400],
+  marginBottom: 0,
+  '&:not(:last-child)': {
+    marginBottom: spacing[400],
+  },
 });
 
 const titleBtnStyles = css({
@@ -76,7 +84,13 @@ const CollectionDrawerContent: React.FunctionComponent<
   onCreateNewRelationshipClick,
   onEditRelationshipClick,
   onDeleteRelationshipClick,
+  note = '',
+  onNoteChange,
 }) => {
+  const noteInputProps = useChangeOnBlur(note, (newNote) => {
+    onNoteChange(namespace, newNote);
+  });
+
   return (
     <>
       <DMDrawerSection label="Collection properties">
@@ -149,26 +163,36 @@ const CollectionDrawerContent: React.FunctionComponent<
           )}
         </div>
       </DMDrawerSection>
+
+      <DMDrawerSection label="Notes">
+        <FormFieldContainer className={formFieldContainerStyles}>
+          <TextArea label="" {...noteInputProps}></TextArea>
+        </FormFieldContainer>
+      </DMDrawerSection>
     </>
   );
 };
 
 export default connect(
   (state: DataModelingState, ownProps: { namespace: string }) => {
+    const model = selectCurrentModelFromState(state);
     return {
-      relationships: selectCurrentModelFromState(state).relationships.filter(
-        (r) => {
-          const [local, foreign] = r.relationship;
-          return (
-            local.ns === ownProps.namespace || foreign.ns === ownProps.namespace
-          );
-        }
-      ),
+      note:
+        model.collections.find((collection) => {
+          return collection.ns === ownProps.namespace;
+        })?.note ?? '',
+      relationships: model.relationships.filter((r) => {
+        const [local, foreign] = r.relationship;
+        return (
+          local.ns === ownProps.namespace || foreign.ns === ownProps.namespace
+        );
+      }),
     };
   },
   {
     onCreateNewRelationshipClick: createNewRelationship,
     onEditRelationshipClick: selectRelationship,
     onDeleteRelationshipClick: deleteRelationship,
+    onNoteChange: updateCollectionNote,
   }
 )(CollectionDrawerContent);

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

@@ -22,12 +22,14 @@ function DiagramEditorSidePanel({
   if (selectedItems.type === 'collection') {
     content = (
       <CollectionDrawerContent
+        key={selectedItems.id}
         namespace={selectedItems.id}
       ></CollectionDrawerContent>
     );
   } else if (selectedItems.type === 'relationship') {
     content = (
       <RelationshipDrawerContent
+        key={selectedItems.id}
         relationshipId={selectedItems.id}
       ></RelationshipDrawerContent>
     );

packages/compass-data-modeling/src/components/drawer/relationship-drawer-content.tsx

@@ -12,25 +12,30 @@ import {
   palette,
   Button,
   Icon,
+  TextArea,
 } from '@mongodb-js/compass-components';
 import {
   deleteRelationship,
   getCurrentDiagramFromState,
   getRelationshipForCurrentModel,
   selectFieldsForCurrentModel,
   updateRelationship,
+  updateRelationshipNote,
 } from '../../store/diagram';
 import toNS from 'mongodb-ns';
 import type { Relationship } from '../../services/data-model-storage';
 import { cloneDeep } from 'lodash';
 import DMDrawerSection from './dm-drawer-section';
+import { useChangeOnBlur } from './use-change-on-blur';
 
 type RelationshipDrawerContentProps = {
   relationshipId: string;
   relationship: Relationship;
   fields: Record<string, string[][]>;
   onRelationshipUpdate: (relationship: Relationship) => void;
   onDeleteRelationshipClick: (rId: string) => void;
+  note?: string;
+  onNoteChange: (rId: string, note: string) => void;
 };
 
 type RelationshipFormFields = {
@@ -165,11 +170,17 @@ const RelationshipDrawerContent: React.FunctionComponent<
   fields,
   onRelationshipUpdate,
   onDeleteRelationshipClick,
+  note = '',
+  onNoteChange,
 }) => {
   const collections = useMemo(() => {
     return Object.keys(fields);
   }, [fields]);
 
+  const noteInputProps = useChangeOnBlur(note, (newNote) => {
+    onNoteChange(relationshipId, newNote);
+  });
+
   const {
     localCollection,
     localField,
@@ -358,6 +369,12 @@ const RelationshipDrawerContent: React.FunctionComponent<
           </div>
         </div>
       </DMDrawerSection>
+
+      <DMDrawerSection label="Notes">
+        <FormFieldContainer className={formFieldContainerStyles}>
+          <TextArea label="" {...noteInputProps}></TextArea>
+        </FormFieldContainer>
+      </DMDrawerSection>
     </div>
   );
 };
@@ -382,5 +399,6 @@ export default connect(
   {
     onRelationshipUpdate: updateRelationship,
     onDeleteRelationshipClick: deleteRelationship,
+    onNoteChange: updateRelationshipNote,
   }
 )(RelationshipDrawerContent);

packages/compass-data-modeling/src/components/drawer/use-change-on-blur.tsx

@@ -0,0 +1,26 @@
+import { useState, useLayoutEffect } from 'react';
+
+export function useChangeOnBlur(
+  value: string,
+  onChange: (newVal: string) => void
+): {
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onBlur: React.FocusEventHandler;
+} {
+  const [_value, setValue] = useState(value);
+  useLayoutEffect(() => {
+    // Usually this is in sync with local value, but if it's changed externally,
+    // we run an effect and sync it back
+    setValue(value);
+  }, [value]);
+  return {
+    value: _value,
+    onChange: (evt) => {
+      setValue(evt.currentTarget.value);
+    },
+    onBlur: () => {
+      onChange(_value);
+    },
+  };
+}

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

@@ -13,6 +13,7 @@ export const RelationshipSchema = z.object({
   id: z.string().uuid(),
   relationship: z.tuple([RelationshipSideSchema, RelationshipSideSchema]),
   isInferred: z.boolean(),
+  note: z.string().optional(),
 });
 
 export type Relationship = z.output<typeof RelationshipSchema>;
@@ -26,6 +27,7 @@ const CollectionSchema = z.object({
   indexes: z.array(z.record(z.unknown())),
   shardKey: z.record(z.unknown()).optional(),
   displayPosition: z.tuple([z.number(), z.number()]),
+  note: z.string().optional(),
 });
 
 export type DataModelCollection = z.output<typeof CollectionSchema>;
@@ -64,6 +66,16 @@ const EditSchemaVariants = z.discriminatedUnion('type', [
     ns: z.string(),
     newPosition: z.tuple([z.number(), z.number()]),
   }),
+  z.object({
+    type: z.literal('UpdateCollectionNote'),
+    ns: z.string(),
+    note: z.string(),
+  }),
+  z.object({
+    type: z.literal('UpdateRelationshipNote'),
+    id: z.string(),
+    note: z.string(),
+  }),
 ]);
 
 export const EditSchema = z.intersection(EditSchemaBase, EditSchemaVariants);

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

@@ -478,6 +478,20 @@ export function deleteRelationship(
   };
 }
 
+export function updateCollectionNote(
+  ns: string,
+  note: string
+): DataModelingThunkAction<boolean, ApplyEditAction | ApplyEditFailedAction> {
+  return applyEdit({ type: 'UpdateCollectionNote', ns, note });
+}
+
+export function updateRelationshipNote(
+  id: string,
+  note: string
+): DataModelingThunkAction<boolean, ApplyEditAction | ApplyEditFailedAction> {
+  return applyEdit({ type: 'UpdateRelationshipNote', id, note });
+}
+
 function _applyEdit(edit: Edit, model?: StaticModel): StaticModel {
   if (edit.type === 'SetModel') {
     return edit.model;
@@ -528,6 +542,34 @@ function _applyEdit(edit: Edit, model?: StaticModel): StaticModel {
         }),
       };
     }
+    case 'UpdateCollectionNote': {
+      return {
+        ...model,
+        collections: model.collections.map((collection) => {
+          if (collection.ns === edit.ns) {
+            return {
+              ...collection,
+              note: edit.note,
+            };
+          }
+          return collection;
+        }),
+      };
+    }
+    case 'UpdateRelationshipNote': {
+      return {
+        ...model,
+        relationships: model.relationships.map((relationship) => {
+          if (relationship.id === edit.id) {
+            return {
+              ...relationship,
+              note: edit.note,
+            };
+          }
+          return relationship;
+        }),
+      };
+    }
     default: {
       return model;
     }