pr feedback

Author: paula-stacho

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

@@ -5,7 +5,7 @@ import SavedDiagramsList from './saved-diagrams-list';
 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';
+import DiagramEditorSidePanel from './drawer/diagram-editor-side-panel';
 
 type DataModelingProps = {
   showList: boolean;

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

@@ -43,7 +43,7 @@ import type { Relationship, StaticModel } from '../services/data-model-storage';
 import DiagramEditorToolbar from './diagram-editor-toolbar';
 import ExportDiagramModal from './export-diagram-modal';
 import { useLogger } from '@mongodb-js/compass-logging/provider';
-import { DATA_MODELING_DRAWER_ID } from './diagram-editor-side-panel';
+import { DATA_MODELING_DRAWER_ID } from './drawer/diagram-editor-side-panel';
 
 const loadingContainerStyles = css({
   width: '100%',

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import type { Relationship } from '../services/data-model-storage';
+import type { Relationship } from '../../services/data-model-storage';
 import {
-  Accordion,
   Badge,
   Button,
   IconButton,
@@ -19,9 +18,10 @@ import {
   getCurrentDiagramFromState,
   selectCurrentModel,
   selectRelationship,
-} from '../store/diagram';
-import type { DataModelingState } from '../store/reducer';
-import { getRelationshipName } from '../utils';
+} from '../../store/diagram';
+import type { DataModelingState } from '../../store/reducer';
+import { getRelationshipName } from '../../utils';
+import DMDrawerSection from './dm-drawer-section';
 
 type CollectionDrawerContentProps = {
   namespace: string;
@@ -37,20 +37,6 @@ const formFieldContainerStyles = css({
   marginTop: spacing[400],
 });
 
-const containerStyles = css({
-  padding: spacing[400],
-});
-
-const accordionTitleStyles = css({
-  fontSize: spacing[300],
-  width: '100%',
-});
-
-const relationshipsTitleStyles = css({
-  width: '100%',
-  display: 'flex',
-});
-
 const titleBtnStyles = css({
   marginLeft: 'auto',
 });
@@ -84,12 +70,8 @@ const CollectionDrawerContent: React.FunctionComponent<
   onDeleteRelationshipClick,
 }) => {
   return (
-    <div className={containerStyles}>
-      <Accordion
-        text="COLLECTION"
-        defaultOpen={true}
-        textClassName={accordionTitleStyles}
-      >
+    <>
+      <DMDrawerSection label="COLLECTION">
         <FormFieldContainer className={formFieldContainerStyles}>
           <TextInput
             label="Name"
@@ -98,10 +80,10 @@ const CollectionDrawerContent: React.FunctionComponent<
             disabled={true}
           />
         </FormFieldContainer>
-      </Accordion>
+      </DMDrawerSection>
 
-      <Accordion
-        text={
+      <DMDrawerSection
+        label={
           <>
             RELATIONSHIPS&nbsp;
             <Badge>{relationships.length}</Badge>
@@ -116,9 +98,6 @@ const CollectionDrawerContent: React.FunctionComponent<
             </Button>
           </>
         }
-        defaultOpen={true}
-        textClassName={accordionTitleStyles}
-        buttonTextClassName={relationshipsTitleStyles}
       >
         <div className={relationshipContentStyles}>
           {!relationships.length ? (
@@ -161,8 +140,8 @@ const CollectionDrawerContent: React.FunctionComponent<
             </ul>
           )}
         </div>
-      </Accordion>
-    </div>
+      </DMDrawerSection>
+    </>
   );
 };
 

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

@@ -7,20 +7,20 @@ import {
   userEvent,
   within,
 } from '@mongodb-js/testing-library-compass';
-import { DataModelingWorkspaceTab } from '../index';
+import { DataModelingWorkspaceTab } from '../../index';
 import DiagramEditorSidePanel from './diagram-editor-side-panel';
 import {
   getCurrentDiagramFromState,
   openDiagram,
   selectCollection,
   selectCurrentModel,
   selectRelationship,
-} from '../store/diagram';
-import dataModel from '../../test/fixtures/data-model-with-relationships.json';
+} from '../../store/diagram';
+import dataModel from '../../../test/fixtures/data-model-with-relationships.json';
 import type {
   MongoDBDataModelDescription,
   Relationship,
-} from '../services/data-model-storage';
+} from '../../services/data-model-storage';
 import { DrawerAnchor } from '@mongodb-js/compass-components';
 
 async function comboboxSelectItem(

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import type { DataModelingState } from '../store/reducer';
+import type { DataModelingState } from '../../store/reducer';
 import { DrawerSection } from '@mongodb-js/compass-components';
 import CollectionDrawerContent from './collection-drawer-content';
 import RelationshipDrawerContent from './relationship-drawer-content';
-import { closeDrawer } from '../store/diagram';
+import { closeDrawer } from '../../store/diagram';
 
 export const DATA_MODELING_DRAWER_ID = 'data-modeling-drawer';
 
@@ -13,7 +13,7 @@ type DiagramEditorSidePanelProps = {
   onClose: () => void;
 };
 
-function DiagmramEditorSidePanel({
+function DiagramEditorSidePanel({
   selectedItems,
 }: DiagramEditorSidePanelProps) {
   if (!selectedItems) {
@@ -64,4 +64,4 @@ export default connect(
   {
     onClose: closeDrawer,
   }
-)(DiagmramEditorSidePanel);
+)(DiagramEditorSidePanel);

packages/compass-data-modeling/src/components/drawer/dm-drawer-section.tsx

@@ -0,0 +1,45 @@
+import {
+  Accordion,
+  css,
+  palette,
+  spacing,
+} from '@mongodb-js/compass-components';
+import React from 'react';
+
+const containerStyles = css({
+  '&:not(:first-child)': {
+    borderTop: `1px solid ${palette.gray.light2}`,
+  },
+  marginLeft: `-${spacing[400]}px`,
+  marginRight: `-${spacing[400]}px`,
+  padding: spacing[400],
+});
+
+const accordionTitleStyles = css({
+  fontSize: spacing[300],
+  width: '100%',
+});
+
+const buttonStyles = css({
+  width: '100%',
+  display: 'flex',
+});
+
+const DMDrawerSection: React.FC<{
+  label: React.ReactNode;
+}> = ({ label, children }) => {
+  return (
+    <div className={containerStyles}>
+      <Accordion
+        text={label}
+        defaultOpen={true}
+        textClassName={accordionTitleStyles}
+        buttonTextClassName={buttonStyles}
+      >
+        {children}
+      </Accordion>
+    </div>
+  );
+};
+
+export default DMDrawerSection;

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

@@ -6,15 +6,14 @@ import React, {
   useState,
 } from 'react';
 import { connect } from 'react-redux';
-import type { DataModelingState } from '../store/reducer';
+import type { DataModelingState } from '../../store/reducer';
 import {
   Button,
   Combobox,
   FormFieldContainer,
   ComboboxOption,
   Select,
   Option,
-  Accordion,
   TextInput,
   spacing,
   css,
@@ -27,10 +26,11 @@ import {
   getRelationshipForCurrentModel,
   selectFieldsForCurrentModel,
   updateRelationship,
-} from '../store/diagram';
+} from '../../store/diagram';
 import toNS from 'mongodb-ns';
-import type { Relationship } from '../services/data-model-storage';
+import type { Relationship } from '../../services/data-model-storage';
 import { cloneDeep } from 'lodash';
+import DMDrawerSection from './dm-drawer-section';
 
 type RelationshipDrawerContentProps = {
   relationshipId: string;
@@ -55,16 +55,6 @@ const formFieldContainerStyles = css({
   marginTop: spacing[400],
 });
 
-const accordionTitleStyles = css({
-  fontSize: spacing[300],
-  width: '100%',
-});
-
-const relationshipTitleStyles = css({
-  width: '100%',
-  display: 'flex',
-});
-
 const titleBtnStyles = css({
   marginLeft: 'auto',
 });
@@ -194,8 +184,8 @@ const RelationshipDrawerContent: React.FunctionComponent<
 
   return (
     <div data-relationship-id={relationshipId}>
-      <Accordion
-        text={
+      <DMDrawerSection
+        label={
           <>
             RELATIONSHIP
             <Button
@@ -211,9 +201,6 @@ const RelationshipDrawerContent: React.FunctionComponent<
             </Button>
           </>
         }
-        defaultOpen={true}
-        textClassName={accordionTitleStyles}
-        buttonTextClassName={relationshipTitleStyles}
       >
         <FormFieldContainer className={formFieldContainerStyles}>
           <TextInput
@@ -228,13 +215,9 @@ const RelationshipDrawerContent: React.FunctionComponent<
             }}
           />
         </FormFieldContainer>
-      </Accordion>
+      </DMDrawerSection>
 
-      <Accordion
-        text="CONFIGURATION"
-        defaultOpen={true}
-        textClassName={accordionTitleStyles}
-      >
+      <DMDrawerSection label="CONFIGURATION">
         <FormFieldContainer className={formFieldContainerStyles}>
           <Combobox
             size="small"
@@ -378,7 +361,7 @@ const RelationshipDrawerContent: React.FunctionComponent<
             })}
           </Select>
         </FormFieldContainer>
-      </Accordion>
+      </DMDrawerSection>
     </div>
   );
 };

packages/compass-data-modeling/src/utils.ts

@@ -8,5 +8,5 @@ export function getRelationshipName({
   if (name) return name;
   const coll1 = relationship[0].ns ? toNS(relationship[0].ns).collection : '';
   const coll2 = relationship[1].ns ? toNS(relationship[1].ns).collection : '';
-  return `${coll1} -> ${coll2}`;
+  return [coll1, coll2].join(` \u2192 `).trim();
 }