chore(data-modeling): remove name from relationships; restyle the drawer section COMPASS-9651 COMPASS-9652 (#7170)

* chore(data-modeling): remove name from relationships; restyle the drawer section

* chore(data-modeling): remove relationship name change from e2e test

Author: gribnoysup

packages/compass-components/src/components/accordion.tsx

@@ -9,9 +9,8 @@ import { Description, Icon } from './leafygreen';
 
 const buttonStyles = css({
   fontWeight: 'bold',
-  fontSize: '14px',
   display: 'flex',
-  alignItems: 'flex-start',
+  alignItems: 'center',
   paddingLeft: 0,
   paddingRight: 0,
   border: 'none',
@@ -28,34 +27,60 @@ const buttonStyles = css({
   },
 });
 
+const buttonVariantStyles = {
+  default: css({
+    fontSize: 14,
+    lineHeight: `${spacing[500]}px`,
+  }),
+  small: css({
+    fontSize: spacing[300],
+    lineHeight: `${spacing[500]}px`,
+  }),
+};
+
+const iconVariantSizes = {
+  default: spacing[400],
+  small: 14,
+};
+
 const buttonLightThemeStyles = css({
   color: palette.gray.dark2,
 });
+
 const buttonDarkThemeStyles = css({
   color: palette.white,
 });
+
 const buttonIconContainerStyles = css({
-  padding: spacing[100] / 2, // matches the line-height (16 + 4)
-  paddingLeft: 0,
+  fontSize: 0,
+  lineHeight: 0,
+  padding: 0,
+  paddingRight: spacing[150],
 });
+
 const buttonTextStyles = css({
   textAlign: 'left',
 });
+
 const buttonHintStyles = css({
   margin: 0,
   marginLeft: spacing[100],
   padding: 0,
   display: 'inline',
 });
-interface AccordionProps extends React.HTMLProps<HTMLButtonElement> {
+
+interface AccordionProps
+  extends Omit<React.HTMLProps<HTMLButtonElement>, 'size'> {
   text: string | React.ReactNode;
   hintText?: string;
   textClassName?: string;
   buttonTextClassName?: string;
   open?: boolean;
   defaultOpen?: boolean;
   setOpen?: (newValue: boolean) => void;
+  size?: 'default' | 'small';
 }
+
 function Accordion({
   text,
   hintText,
@@ -64,6 +89,7 @@ function Accordion({
   open: _open,
   setOpen: _setOpen,
   defaultOpen = false,
+  size = 'default',
   ...props
 }: React.PropsWithChildren<AccordionProps>): React.ReactElement {
   const darkMode = useDarkMode();
@@ -87,6 +113,7 @@ function Accordion({
         className={cx(
           darkMode ? buttonDarkThemeStyles : buttonLightThemeStyles,
           buttonStyles,
+          buttonVariantStyles[size],
           textClassName
         )}
         id={labelId}
@@ -96,7 +123,10 @@ function Accordion({
         onClick={onOpenChange}
       >
         <span className={buttonIconContainerStyles}>
-          <Icon glyph={open ? 'ChevronDown' : 'ChevronRight'} />
+          <Icon
+            glyph={open ? 'ChevronDown' : 'ChevronRight'}
+            size={iconVariantSizes[size]}
+          />
         </span>
 
         <div className={cx(buttonTextStyles, buttonTextClassName)}>

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

@@ -3,12 +3,11 @@ import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
 import {
   moveCollection,
-  getCurrentDiagramFromState,
-  selectCurrentModel,
   selectCollection,
   selectRelationship,
   selectBackground,
   type DiagramState,
+  selectCurrentModelFromState,
 } from '../store/diagram';
 import {
   Banner,
@@ -202,9 +201,7 @@ const ConnectedDiagramContent = connect(
   (state: DataModelingState) => {
     const { diagram } = state;
     return {
-      model: diagram
-        ? selectCurrentModel(getCurrentDiagramFromState(state).edits)
-        : null,
+      model: diagram ? selectCurrentModelFromState(state) : null,
       diagramLabel: diagram?.name || 'Schema Preview',
       selectedItems: state.diagram?.selectedItems ?? null,
     };

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

@@ -15,12 +15,11 @@ import {
 import {
   createNewRelationship,
   deleteRelationship,
-  getCurrentDiagramFromState,
-  selectCurrentModel,
+  selectCurrentModelFromState,
   selectRelationship,
 } from '../../store/diagram';
 import type { DataModelingState } from '../../store/reducer';
-import { getRelationshipName } from '../../utils';
+import { getDefaultRelationshipName } from '../../utils';
 import DMDrawerSection from './dm-drawer-section';
 
 type CollectionDrawerContentProps = {
@@ -38,6 +37,7 @@ const formFieldContainerStyles = css({
 
 const titleBtnStyles = css({
   marginLeft: 'auto',
+  maxHeight: 20, // To match accordion line height
 });
 
 const emptyRelationshipMessageStyles = css({
@@ -79,7 +79,7 @@ const CollectionDrawerContent: React.FunctionComponent<
 }) => {
   return (
     <>
-      <DMDrawerSection label="COLLECTION">
+      <DMDrawerSection label="Collection properties">
         <FormFieldContainer className={formFieldContainerStyles}>
           <TextInput
             label="Name"
@@ -93,7 +93,7 @@ const CollectionDrawerContent: React.FunctionComponent<
       <DMDrawerSection
         label={
           <>
-            RELATIONSHIPS&nbsp;
+            Relationships&nbsp;
             <Badge>{relationships.length}</Badge>
             <Button
               className={titleBtnStyles}
@@ -122,7 +122,7 @@ const CollectionDrawerContent: React.FunctionComponent<
                     className={relationshipItemStyles}
                   >
                     <span className={relationshipNameStyles}>
-                      {getRelationshipName(r)}
+                      {getDefaultRelationshipName(r.relationship)}
                     </span>
                     <IconButton
                       aria-label="Edit relationship"
@@ -156,14 +156,14 @@ const CollectionDrawerContent: React.FunctionComponent<
 export default connect(
   (state: DataModelingState, ownProps: { namespace: string }) => {
     return {
-      relationships: selectCurrentModel(
-        getCurrentDiagramFromState(state).edits
-      ).relationships.filter((r) => {
-        const [local, foreign] = r.relationship;
-        return (
-          local.ns === ownProps.namespace || foreign.ns === ownProps.namespace
-        );
-      }),
+      relationships: selectCurrentModelFromState(state).relationships.filter(
+        (r) => {
+          const [local, foreign] = r.relationship;
+          return (
+            local.ns === ownProps.namespace || foreign.ns === ownProps.namespace
+          );
+        }
+      ),
     };
   },
   {

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

@@ -10,10 +10,9 @@ import {
 import { DataModelingWorkspaceTab } from '../../index';
 import DiagramEditorSidePanel from './diagram-editor-side-panel';
 import {
-  getCurrentDiagramFromState,
   openDiagram,
   selectCollection,
-  selectCurrentModel,
+  selectCurrentModelFromState,
   selectRelationship,
 } from '../../store/diagram';
 import dataModel from '../../../test/fixtures/data-model-with-relationships.json';
@@ -87,9 +86,8 @@ describe('DiagramEditorSidePanel', function () {
     );
 
     await waitFor(() => {
-      const name = screen.getByLabelText('Name');
-      expect(name).to.be.visible;
-      expect(name).to.have.value('Airport Country');
+      const section = screen.getByText('Relationship properties');
+      expect(section).to.be.visible;
     });
 
     const localCollectionInput = screen.getByLabelText('Local collection');
@@ -172,7 +170,9 @@ describe('DiagramEditorSidePanel', function () {
     });
 
     // Open relationshipt editing form
-    const relationshipItem = screen.getByText('Airport Country').closest('li');
+    const relationshipItem = screen
+      .getByText('countries.name → airports.Country')
+      .closest('li');
     expect(relationshipItem).to.be.visible;
     userEvent.click(
       within(relationshipItem!).getByRole('button', {
@@ -190,8 +190,8 @@ describe('DiagramEditorSidePanel', function () {
     // 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
-    const modifiedRelationship = selectCurrentModel(
-      getCurrentDiagramFromState(result.plugin.store.getState()).edits
+    const modifiedRelationship = selectCurrentModelFromState(
+      result.plugin.store.getState()
     ).relationships.find((r: Relationship) => {
       return r.id === '204b1fc0-601f-4d62-bba3-38fade71e049';
     });
@@ -221,7 +221,9 @@ describe('DiagramEditorSidePanel', function () {
     });
 
     // Find the relationhip item
-    const relationshipItem = screen.getByText('Airport Country').closest('li');
+    const relationshipItem = screen
+      .getByText('countries.name → airports.Country')
+      .closest('li');
     expect(relationshipItem).to.be.visible;
 
     // Delete relationship

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

@@ -4,13 +4,10 @@ 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';
-
 export const DATA_MODELING_DRAWER_ID = 'data-modeling-drawer';
 
 type DiagramEditorSidePanelProps = {
   selectedItems: { type: 'relationship' | 'collection'; id: string } | null;
-  onClose: () => void;
 };
 
 function DiagramEditorSidePanel({
@@ -55,13 +52,8 @@ function DiagramEditorSidePanel({
   );
 }
 
-export default connect(
-  (state: DataModelingState) => {
-    return {
-      selectedItems: state.diagram?.selectedItems ?? null,
-    };
-  },
-  {
-    onClose: closeDrawer,
-  }
-)(DiagramEditorSidePanel);
+export default connect((state: DataModelingState) => {
+  return {
+    selectedItems: state.diagram?.selectedItems ?? null,
+  };
+})(DiagramEditorSidePanel);

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

@@ -23,13 +23,14 @@ const darkModeContainerStyles = css({
 });
 
 const accordionTitleStyles = css({
-  fontSize: spacing[300],
   width: '100%',
+  textTransform: 'uppercase',
 });
 
 const buttonStyles = css({
   width: '100%',
   display: 'flex',
+  alignItems: 'center',
 });
 
 const DMDrawerSection: React.FC<{
@@ -43,6 +44,7 @@ const DMDrawerSection: React.FC<{
         defaultOpen={true}
         textClassName={accordionTitleStyles}
         buttonTextClassName={buttonStyles}
+        size="small"
       >
         {children}
       </Accordion>