feat(data-modeling): field sidebar COMPASS-9659 (#7218)

Author: paula-stacho

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

@@ -16,6 +16,7 @@ import {
   selectCurrentModelFromState,
   createNewRelationship,
   addCollection,
+  selectField,
 } from '../store/diagram';
 import {
   Banner,
@@ -36,13 +37,13 @@ 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';
 import {
   collectionToDiagramNode,
-  getSelectedFields,
+  getHighlightedFields,
   relationshipToDiagramEdge,
 } from '../utils/nodes-and-edges';
 
@@ -113,9 +114,16 @@ 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;
+  onCreateNewRelationship: ({
+    localNamespace,
+    foreignNamespace,
+  }: {
+    localNamespace: string;
+    foreignNamespace: string;
+  }) => void;
   onRelationshipDrawn: () => void;
 }> = ({
   diagramLabel,
@@ -125,6 +133,7 @@ const DiagramContent: React.FunctionComponent<{
   onMoveCollection,
   onCollectionSelect,
   onRelationshipSelect,
+  onFieldSelect,
   onDiagramBackgroundClicked,
   onCreateNewRelationship,
   onRelationshipDrawn,
@@ -153,7 +162,7 @@ const DiagramContent: React.FunctionComponent<{
   }, [model?.relationships, selectedItems]);
 
   const nodes = useMemo<NodeProps[]>(() => {
-    const selectedFields = getSelectedFields(
+    const highlightedFields = getHighlightedFields(
       selectedItems,
       model?.relationships
     );
@@ -163,7 +172,11 @@ const DiagramContent: React.FunctionComponent<{
         selectedItems.type === 'collection' &&
         selectedItems.id === coll.ns;
       return collectionToDiagramNode(coll, {
-        selectedFields,
+        highlightedFields,
+        selectedField:
+          selectedItems?.type === 'field' && selectedItems.namespace === coll.ns
+            ? selectedItems.fieldPath
+            : undefined,
         selected,
         isInRelationshipDrawingMode,
       });
@@ -219,7 +232,10 @@ const DiagramContent: React.FunctionComponent<{
 
   const handleNodesConnect = useCallback(
     (source: string, target: string) => {
-      onCreateNewRelationship(source, target);
+      onCreateNewRelationship({
+        localNamespace: source,
+        foreignNamespace: target,
+      });
       onRelationshipDrawn();
     },
     [onRelationshipDrawn, onCreateNewRelationship]
@@ -252,6 +268,12 @@ const DiagramContent: React.FunctionComponent<{
             onRelationshipSelect(edge.id);
             openDrawer(DATA_MODELING_DRAWER_ID);
           }}
+          onFieldClick={(_evt, { id: fieldPath, nodeId: namespace }) => {
+            _evt.stopPropagation(); // TODO(COMPASS-9659): should this be handled by the diagramming package?
+            if (!Array.isArray(fieldPath)) return; // TODO(COMPASS-9659): could be avoided with generics in the diagramming package
+            onFieldSelect(namespace, fieldPath);
+            openDrawer(DATA_MODELING_DRAWER_ID);
+          }}
           fitViewOptions={{
             maxZoom: 1,
             minZoom: 0.25,
@@ -282,6 +304,7 @@ const ConnectedDiagramContent = connect(
     onMoveCollection: moveCollection,
     onCollectionSelect: selectCollection,
     onRelationshipSelect: selectRelationship,
+    onFieldSelect: selectField,
     onDiagramBackgroundClicked: selectBackground,
     onCreateNewRelationship: createNewRelationship,
   }

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

@@ -2,20 +2,10 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { connect } from 'react-redux';
 import toNS from 'mongodb-ns';
 import type {
-  Relationship,
   DataModelCollection,
+  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,
@@ -25,59 +15,30 @@ import {
   updateCollectionNote,
 } from '../../store/diagram';
 import type { DataModelingState } from '../../store/reducer';
-import { getDefaultRelationshipName } from '../../utils';
 import {
   DMDrawerSection,
   DMFormFieldContainer,
 } from './drawer-section-components';
 import { useChangeOnBlur } from './use-change-on-blur';
+import { RelationshipsSection } from './relationships-section';
 
 type CollectionDrawerContentProps = {
   namespace: string;
   collections: DataModelCollection[];
   note?: string;
   relationships: Relationship[];
   isDraftCollection?: boolean;
-  onCreateNewRelationshipClick: (namespace: string) => void;
+  onCreateNewRelationshipClick: ({
+    localNamespace,
+  }: {
+    localNamespace: string;
+  }) => void;
   onEditRelationshipClick: (rId: string) => void;
   onDeleteRelationshipClick: (rId: string) => void;
   onNoteChange: (namespace: string, note: string) => void;
   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[],
@@ -176,73 +137,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}
+        emptyMessage="This collection does not have any relationships yet."
+        onCreateNewRelationshipClick={() => {
+          onCreateNewRelationshipClick({ localNamespace: namespace });
+        }}
+        onEditRelationshipClick={onEditRelationshipClick}
+        onDeleteRelationshipClick={onDeleteRelationshipClick}
+      />
 
       <DMDrawerSection label="Notes">
         <DMFormFieldContainer>