feat(data-modeling): add note editing to collections and relationships COMPASS-9654 (#7171)

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

* chore(data-modeling): add test for note editing in collection drawer

Author: gribnoysup

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

@@ -6,35 +6,37 @@ import {
   Button,
   IconButton,
   css,
-  FormFieldContainer,
   palette,
   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 {
+  DMDrawerSection,
+  DMFormFieldContainer,
+} from './drawer-section-components';
+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],
-});
-
 const titleBtnStyles = css({
   marginLeft: 'auto',
   maxHeight: 20, // To match accordion line height
@@ -76,18 +78,24 @@ const CollectionDrawerContent: React.FunctionComponent<
   onCreateNewRelationshipClick,
   onEditRelationshipClick,
   onDeleteRelationshipClick,
+  note = '',
+  onNoteChange,
 }) => {
+  const noteInputProps = useChangeOnBlur(note, (newNote) => {
+    onNoteChange(namespace, newNote);
+  });
+
   return (
     <>
       <DMDrawerSection label="Collection properties">
-        <FormFieldContainer className={formFieldContainerStyles}>
+        <DMFormFieldContainer>
           <TextInput
             label="Name"
             sizeVariant="small"
             value={namespace}
             disabled={true}
           />
-        </FormFieldContainer>
+        </DMFormFieldContainer>
       </DMDrawerSection>
 
       <DMDrawerSection
@@ -149,26 +157,36 @@ const CollectionDrawerContent: React.FunctionComponent<
           )}
         </div>
       </DMDrawerSection>
+
+      <DMDrawerSection label="Notes">
+        <DMFormFieldContainer>
+          <TextArea label="" aria-label="Notes" {...noteInputProps}></TextArea>
+        </DMFormFieldContainer>
+      </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.spec.tsx

@@ -68,7 +68,7 @@ describe('DiagramEditorSidePanel', function () {
     expect(screen.queryByTestId('data-modeling-drawer')).to.eq(null);
   });
 
-  it('should render a collection context drawer when collection is clicked', async function () {
+  it('should render and edit a collection in collection context drawer when collection is clicked', async function () {
     const result = renderDrawer();
     result.plugin.store.dispatch(selectCollection('flights.airlines'));
 
@@ -77,6 +77,24 @@ describe('DiagramEditorSidePanel', function () {
       expect(nameInput).to.be.visible;
       expect(nameInput).to.have.value('flights.airlines');
     });
+
+    userEvent.click(screen.getByRole('textbox', { name: 'Notes' }));
+    userEvent.type(
+      screen.getByRole('textbox', { name: 'Notes' }),
+      'Note about the collection'
+    );
+    userEvent.tab();
+
+    const modifiedCollection = selectCurrentModelFromState(
+      result.plugin.store.getState()
+    ).collections.find((coll) => {
+      return coll.ns === 'flights.airlines';
+    });
+
+    expect(modifiedCollection).to.have.property(
+      'note',
+      'Note about the collection'
+    );
   });
 
   it('should render a relationship context drawer when relations is clicked', async function () {
@@ -187,6 +205,13 @@ describe('DiagramEditorSidePanel', function () {
     await comboboxSelectItem('Foreign collection', 'countries');
     await comboboxSelectItem('Foreign field', 'iso_code');
 
+    userEvent.click(screen.getByRole('textbox', { name: 'Notes' }));
+    userEvent.type(
+      screen.getByRole('textbox', { name: 'Notes' }),
+      'Note about the relationship'
+    );
+    userEvent.tab();
+
     // We should be testing through rendered UI but as it's really hard to make
     // diagram rendering in tests property, we are just validating the final
     // model here
@@ -210,6 +235,11 @@ describe('DiagramEditorSidePanel', function () {
           cardinality: 100,
         },
       ]);
+
+    expect(modifiedRelationship).to.have.property(
+      'note',
+      'Note about the relationship'
+    );
   });
 
   it('should delete a relationship from collection', async function () {
@@ -234,7 +264,8 @@ describe('DiagramEditorSidePanel', function () {
     );
 
     await waitFor(() => {
-      expect(screen.queryByText('Airport Country')).not.to.exist;
+      expect(screen.queryByText('countries.name → airports.Country')).not.to
+        .exist;
     });
   });
 });

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/dm-drawer-section.tsx renamed to packages/compass-data-modeling/src/components/drawer/drawer-section-components.tsx

@@ -5,6 +5,7 @@ import {
   spacing,
   cx,
   useDarkMode,
+  FormFieldContainer,
 } from '@mongodb-js/compass-components';
 import React from 'react';
 
@@ -25,6 +26,7 @@ const darkModeContainerStyles = css({
 const accordionTitleStyles = css({
   width: '100%',
   textTransform: 'uppercase',
+  marginBottom: spacing[400],
 });
 
 const buttonStyles = css({
@@ -33,7 +35,7 @@ const buttonStyles = css({
   alignItems: 'center',
 });
 
-const DMDrawerSection: React.FC<{
+export const DMDrawerSection: React.FC<{
   label: React.ReactNode;
 }> = ({ label, children }) => {
   const darkMode = useDarkMode();
@@ -52,4 +54,25 @@ const DMDrawerSection: React.FC<{
   );
 };
 
-export default DMDrawerSection;
+const formFieldContainerStyles = css({
+  marginBottom: spacing[400],
+  marginTop: spacing[400],
+  '&:first-child': {
+    marginTop: 0,
+  },
+  '&:last-child': {
+    marginBottom: 0,
+  },
+});
+
+export const DMFormFieldContainer: typeof FormFieldContainer = ({
+  className,
+  ...props
+}) => {
+  return (
+    <FormFieldContainer
+      {...props}
+      className={cx(formFieldContainerStyles, className)}
+    ></FormFieldContainer>
+  );
+};