chore(data-modeling): remove sidebar state; connect form to the edits directly

Author: gribnoysup

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

@@ -3,23 +3,20 @@ import { connect } from 'react-redux';
 import type { Relationship } from '../services/data-model-storage';
 import { Button, H3 } from '@mongodb-js/compass-components';
 import {
+  createNewRelationship,
   deleteRelationship,
   getCurrentDiagramFromState,
   selectCurrentModel,
+  selectRelationship,
 } from '../store/diagram';
 import type { DataModelingState } from '../store/reducer';
-import {
-  createNewRelationship,
-  startRelationshipEdit,
-} from '../store/side-panel';
-import RelationshipDrawerContent from './relationship-drawer-content';
 
 type CollectionDrawerContentProps = {
   namespace: string;
   relationships: Relationship[];
   shouldShowRelationshipEditingForm?: boolean;
   onCreateNewRelationshipClick: (namespace: string) => void;
-  onEditRelationshipClick: (relationship: Relationship) => void;
+  onEditRelationshipClick: (rId: string) => void;
   onDeleteRelationshipClick: (rId: string) => void;
 };
 
@@ -28,27 +25,22 @@ const CollectionDrawerContent: React.FunctionComponent<
 > = ({
   namespace,
   relationships,
-  shouldShowRelationshipEditingForm,
   onCreateNewRelationshipClick,
   onEditRelationshipClick,
   onDeleteRelationshipClick,
 }) => {
-  if (shouldShowRelationshipEditingForm) {
-    return <RelationshipDrawerContent></RelationshipDrawerContent>;
-  }
-
   return (
     <>
       <H3>{namespace}</H3>
       <ul>
         {relationships.map((r) => {
           return (
             <li key={r.id} data-relationship-id={r.id}>
-              {r.relationship[0].fields.join(', ')}&nbsp;-&gt;&nbsp;
-              {r.relationship[1].fields.join(', ')}
+              {r.relationship[0].fields?.join('.')}&nbsp;-&gt;&nbsp;
+              {r.relationship[1].fields?.join('.')}
               <Button
                 onClick={() => {
-                  onEditRelationshipClick(r);
+                  onEditRelationshipClick(r.id);
                 }}
               >
                 Edit
@@ -86,13 +78,11 @@ export default connect(
           local.ns === ownProps.namespace || foreign.ns === ownProps.namespace
         );
       }),
-      shouldShowRelationshipEditingForm:
-        state.sidePanel.viewType === 'relationship-editing',
     };
   },
   {
     onCreateNewRelationshipClick: createNewRelationship,
-    onEditRelationshipClick: startRelationshipEdit,
+    onEditRelationshipClick: selectRelationship,
     onDeleteRelationshipClick: deleteRelationship,
   }
 )(CollectionDrawerContent);

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

@@ -6,11 +6,12 @@ import NewDiagramFormModal from './new-diagram-form';
 import type { DataModelingState } from '../store/reducer';
 import { DiagramProvider } from '@mongodb-js/diagramming';
 import DiagramEditorSidePanel from './diagram-editor-side-panel';
-type DataModelingPluginInitialProps = {
+
+type DataModelingProps = {
   showList: boolean;
 };
 
-const DataModeling: React.FunctionComponent<DataModelingPluginInitialProps> = ({
+const DataModeling: React.FunctionComponent<DataModelingProps> = ({
   showList,
 }) => {
   return (

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
-import { closeSidePanel } from '../store/side-panel';
 import {
   Button,
   css,
@@ -11,6 +10,7 @@ import {
 } from '@mongodb-js/compass-components';
 import CollectionDrawerContent from './collection-drawer-content';
 import RelationshipDrawerContent from './relationship-drawer-content';
+import { closeDrawer } from '../store/diagram';
 
 const containerStyles = css({
   width: '400px',
@@ -46,7 +46,11 @@ function DiagmramEditorSidePanel({
       ></CollectionDrawerContent>
     );
   } else if (selectedItems.type === 'relationship') {
-    content = <RelationshipDrawerContent></RelationshipDrawerContent>;
+    content = (
+      <RelationshipDrawerContent
+        relationshipId={selectedItems.id}
+      ></RelationshipDrawerContent>
+    );
   }
 
   return (
@@ -66,6 +70,6 @@ export default connect(
     };
   },
   {
-    onClose: closeSidePanel,
+    onClose: closeDrawer,
   }
 )(DiagmramEditorSidePanel);

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

@@ -230,8 +230,8 @@ const DiagramEditor: React.FunctionComponent<{
       const [source, target] = relationship.relationship;
       return {
         id: relationship.id,
-        source: source.ns,
-        target: target.ns,
+        source: source.ns ?? '',
+        target: target.ns ?? '',
         markerStart: source.cardinality === 1 ? 'one' : 'many',
         markerEnd: target.cardinality === 1 ? 'one' : 'many',
         selected: selectedItem === relationship.id,