feat: field sidebar COMPASS-9659

Author: paula-stacho

package-lock.json

@@ -63,7 +63,7 @@
     "@mongodb-js/compass-user-data": "^0.9.0",
     "@mongodb-js/compass-utils": "^0.9.10",
     "@mongodb-js/compass-workspaces": "^0.51.0",
-    "@mongodb-js/diagramming": "^1.3.3",
+    "@mongodb-js/diagramming": "^1.4.0",
     "bson": "^6.10.4",
     "compass-preferences-model": "^2.50.0",
     "html-to-image": "1.11.11",

packages/compass-data-modeling/package.json

@@ -15,6 +15,7 @@ import {
   type DiagramState,
   selectCurrentModelFromState,
   createNewRelationship,
+  selectField,
 } from '../store/diagram';
 import {
   Banner,
@@ -34,7 +35,7 @@ import {
   type EdgeProps,
   useDiagram,
 } from '@mongodb-js/diagramming';
-import type { StaticModel } from '../services/data-model-storage';
+import type { FieldPath, StaticModel } from '../services/data-model-storage';
 import DiagramEditorToolbar from './diagram-editor-toolbar';
 import ExportDiagramModal from './export-diagram-modal';
 import { DATA_MODELING_DRAWER_ID } from './drawer/diagram-editor-side-panel';
@@ -110,6 +111,7 @@ const DiagramContent: React.FunctionComponent<{
   onMoveCollection: (ns: string, newPosition: [number, number]) => void;
   onCollectionSelect: (namespace: string) => void;
   onRelationshipSelect: (rId: string) => void;
+  onFieldSelect: (namespace: string, fieldPath: FieldPath) => void;
   onDiagramBackgroundClicked: () => void;
   selectedItems: SelectedItems;
   onCreateNewRelationship: (source: string, target: string) => void;
@@ -121,6 +123,7 @@ const DiagramContent: React.FunctionComponent<{
   onMoveCollection,
   onCollectionSelect,
   onRelationshipSelect,
+  onFieldSelect,
   onDiagramBackgroundClicked,
   onCreateNewRelationship,
   onRelationshipDrawn,
@@ -207,6 +210,7 @@ const DiagramContent: React.FunctionComponent<{
           // dragging
           nodeDragThreshold={5}
           onNodeClick={(_evt, node) => {
+            console.log('onNodeClick', node);
             if (node.type !== 'collection') {
               return;
             }
@@ -218,6 +222,12 @@ const DiagramContent: React.FunctionComponent<{
             onRelationshipSelect(edge.id);
             openDrawer(DATA_MODELING_DRAWER_ID);
           }}
+          onFieldClick={(_evt, { id: fieldPath, nodeId: namespace }) => {
+            _evt.stopPropagation(); // TODO: should this be handled by the diagramming package?
+            if (!Array.isArray(fieldPath)) return; // TODO: could be avoided with generics in the diagramming package
+            onFieldSelect(namespace, fieldPath);
+            openDrawer(DATA_MODELING_DRAWER_ID);
+          }}
           fitViewOptions={{
             maxZoom: 1,
             minZoom: 0.25,
@@ -247,6 +257,7 @@ const ConnectedDiagramContent = connect(
     onMoveCollection: moveCollection,
     onCollectionSelect: selectCollection,
     onRelationshipSelect: selectRelationship,
+    onFieldSelect: selectField,
     onDiagramBackgroundClicked: selectBackground,
     onCreateNewRelationship: createNewRelationship,
   }

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

@@ -2,17 +2,7 @@ import React, { useMemo } from 'react';
 import { connect } from 'react-redux';
 import toNS from 'mongodb-ns';
 import type { Relationship } from '../../services/data-model-storage';
-import {
-  Badge,
-  Button,
-  IconButton,
-  css,
-  palette,
-  spacing,
-  TextInput,
-  Icon,
-  TextArea,
-} from '@mongodb-js/compass-components';
+import { TextInput, TextArea } from '@mongodb-js/compass-components';
 import {
   createNewRelationship,
   deleteRelationship,
@@ -28,6 +18,7 @@ import {
   DMFormFieldContainer,
 } from './drawer-section-components';
 import { useChangeOnBlur } from './use-change-on-blur';
+import { RelationshipsSection } from './relationships-section';
 
 type CollectionDrawerContentProps = {
   namespace: string;
@@ -41,39 +32,6 @@ type CollectionDrawerContentProps = {
   onRenameCollection: (fromNS: string, toNS: string) => void;
 };
 
-const titleBtnStyles = css({
-  marginLeft: 'auto',
-  maxHeight: 20, // To match accordion line height
-});
-
-const emptyRelationshipMessageStyles = css({
-  color: palette.gray.dark1,
-});
-
-const relationshipsListStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: spacing[200],
-});
-
-const relationshipItemStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-});
-
-const relationshipNameStyles = css({
-  flexGrow: 1,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  minWidth: 0,
-  paddingRight: spacing[200],
-});
-
-const relationshipContentStyles = css({
-  marginTop: spacing[400],
-});
-
 export function getIsCollectionNameValid(
   collectionName: string,
   namespaces: string[],
@@ -161,72 +119,15 @@ const CollectionDrawerContent: React.FunctionComponent<
         </DMFormFieldContainer>
       </DMDrawerSection>
 
-      <DMDrawerSection
-        label={
-          <>
-            Relationships&nbsp;
-            <Badge>{relationships.length}</Badge>
-            <Button
-              className={titleBtnStyles}
-              size="xsmall"
-              onClick={() => {
-                onCreateNewRelationshipClick(namespace);
-              }}
-            >
-              Add relationship
-            </Button>
-          </>
-        }
-      >
-        <div className={relationshipContentStyles}>
-          {!relationships.length ? (
-            <div className={emptyRelationshipMessageStyles}>
-              This collection does not have any relationships yet.
-            </div>
-          ) : (
-            <ul className={relationshipsListStyles}>
-              {relationships.map((r) => {
-                const relationshipLabel = getDefaultRelationshipName(
-                  r.relationship
-                );
-
-                return (
-                  <li
-                    key={r.id}
-                    data-relationship-id={r.id}
-                    className={relationshipItemStyles}
-                  >
-                    <span
-                      className={relationshipNameStyles}
-                      title={relationshipLabel}
-                    >
-                      {relationshipLabel}
-                    </span>
-                    <IconButton
-                      aria-label="Edit relationship"
-                      title="Edit relationship"
-                      onClick={() => {
-                        onEditRelationshipClick(r.id);
-                      }}
-                    >
-                      <Icon glyph="Edit" />
-                    </IconButton>
-                    <IconButton
-                      aria-label="Delete relationship"
-                      title="Delete relationship"
-                      onClick={() => {
-                        onDeleteRelationshipClick(r.id);
-                      }}
-                    >
-                      <Icon glyph="Trash" />
-                    </IconButton>
-                  </li>
-                );
-              })}
-            </ul>
-          )}
-        </div>
-      </DMDrawerSection>
+      <RelationshipsSection
+        relationships={relationships}
+        getRelationshipLabel={getDefaultRelationshipName}
+        onCreateNewRelationshipClick={() => {
+          onCreateNewRelationshipClick(namespace);
+        }}
+        onEditRelationshipClick={onEditRelationshipClick}
+        onDeleteRelationshipClick={onDeleteRelationshipClick}
+      />
 
       <DMDrawerSection label="Notes">
         <DMFormFieldContainer>

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

@@ -12,8 +12,11 @@ import {
   deleteCollection,
   deleteRelationship,
   selectCurrentModelFromState,
+  type SelectedItems,
 } from '../../store/diagram';
 import { getDefaultRelationshipName } from '../../utils';
+import FieldDrawerContent from './field-drawer-content';
+import type { FieldPath } from '../../services/data-model-storage';
 
 export const DATA_MODELING_DRAWER_ID = 'data-modeling-drawer';
 
@@ -32,19 +35,17 @@ const drawerTitleTextStyles = css({
 const drawerTitleActionGroupStyles = css({});
 
 type DiagramEditorSidePanelProps = {
-  selectedItems: {
-    id: string;
-    type: 'relationship' | 'collection';
-    label: string;
-  } | null;
+  selectedItems: (SelectedItems & { label: string }) | null;
   onDeleteCollection: (ns: string) => void;
   onDeleteRelationship: (rId: string) => void;
+  onDeleteField: (ns: string, fieldPath: FieldPath) => void;
 };
 
 function DiagramEditorSidePanel({
   selectedItems,
   onDeleteCollection,
   onDeleteRelationship,
+  onDeleteField,
 }: DiagramEditorSidePanelProps) {
   const { content, label, actions, handleAction } = useMemo(() => {
     if (selectedItems?.type === 'collection') {
@@ -91,8 +92,31 @@ function DiagramEditorSidePanel({
       };
     }
 
+    if (selectedItems?.type === 'field') {
+      return {
+        label: selectedItems.label,
+        content: (
+          <FieldDrawerContent
+            key={`${selectedItems.namespace}.${JSON.stringify(
+              selectedItems.fieldPath
+            )}`}
+            namespace={selectedItems.namespace}
+            fieldPath={selectedItems.fieldPath}
+          ></FieldDrawerContent>
+        ),
+        actions: [
+          { action: 'delete', label: 'Delete', icon: 'Trash' as const },
+        ],
+        handleAction: (actionName: string) => {
+          if (actionName === 'delete') {
+            onDeleteField(selectedItems.namespace, selectedItems.fieldPath);
+          }
+        },
+      };
+    }
+
     return { content: null };
-  }, [selectedItems, onDeleteCollection, onDeleteRelationship]);
+  }, [selectedItems, onDeleteCollection, onDeleteRelationship, onDeleteField]);
 
   if (!content) {
     return null;
@@ -184,9 +208,30 @@ export default connect(
         },
       };
     }
+
+    if (selected.type === 'field') {
+      // const collection = model.collections.find((collection) => (collection.ns === selected.namespace));
+      // const field =
+
+      // if (!field) {
+      //   // TODO(COMPASS-9680): When the selected field doesn't exist we don't
+      //   // show any selection.
+      //   return {
+      //     selectedItems: null,
+      //   };
+      // }
+
+      return {
+        selectedItems: {
+          ...selected,
+          label: selected.fieldPath.join('.'),
+        },
+      };
+    }
   },
   {
     onDeleteCollection: deleteCollection,
     onDeleteRelationship: deleteRelationship,
+    onDeleteField: () => {}, // TODO onDeleteField,
   }
 )(DiagramEditorSidePanel);

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

@@ -1,6 +1,15 @@
 import { z } from '@mongodb-js/compass-user-data';
+import { JSON_SCHEMA } from 'js-yaml';
 import type { MongoDBJSONSchema } from 'mongodb-schema';
 
+export const FieldPathSchema = z.array(z.string());
+
+export type FieldPath = z.output<typeof FieldPathSchema>;
+
+export const FieldSchema = z.custom<MongoDBJSONSchema>();
+
+export type FieldSchema = z.output<typeof FieldSchema>;
+
 export const RelationshipSideSchema = z.object({
   ns: z.string().nullable(),
   cardinality: z.number(),
@@ -80,6 +89,44 @@ const EditSchemaVariants = z.discriminatedUnion('type', [
     ns: z.string(),
     note: z.string(),
   }),
+  // Field operations
+  z.object({
+    type: z.literal('RenameField'),
+    ns: z.string(),
+    from: FieldPathSchema,
+    to: FieldPathSchema,
+  }),
+  z.object({
+    type: z.literal('RemoveField'),
+    ns: z.string(),
+    field: FieldPathSchema,
+  }),
+  z.object({
+    type: z.literal('ChangeFieldType'),
+    ns: z.string(),
+    field: FieldPathSchema,
+    from: FieldSchema,
+    to: FieldSchema,
+  }),
+  z.object({
+    type: z.literal('AddField'),
+    ns: z.string(),
+    field: FieldPathSchema,
+    jsonSchema: FieldSchema,
+  }),
+  z.object({
+    type: z.literal('DuplicateField'),
+    ns: z.string(),
+    field: FieldPathSchema,
+  }),
+  z.object({
+    type: z.literal('MoveField'),
+    sourceNS: z.string(),
+    targetNS: z.string(),
+    targetField: FieldPathSchema,
+    field: FieldPathSchema,
+    jsonSchema: z.custom<MongoDBJSONSchema>(),
+  }),
 ]);
 
 export const EditSchema = z.intersection(EditSchemaBase, EditSchemaVariants);