fix: update collection drawer styles COMPASS-9477

Author: paula-stacho

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

@@ -51,6 +51,7 @@ interface AccordionProps extends React.HTMLProps<HTMLButtonElement> {
   text: string | React.ReactNode;
   hintText?: string;
   textClassName?: string;
+  buttonTextClassName?: string;
   open?: boolean;
   defaultOpen?: boolean;
   setOpen?: (newValue: boolean) => void;
@@ -59,6 +60,7 @@ function Accordion({
   text,
   hintText,
   textClassName,
+  buttonTextClassName,
   open: _open,
   setOpen: _setOpen,
   defaultOpen = false,
@@ -97,7 +99,7 @@ function Accordion({
           <Icon glyph={open ? 'ChevronDown' : 'ChevronRight'} />
         </span>
 
-        <div className={buttonTextStyles}>
+        <div className={cx(buttonTextStyles, buttonTextClassName)}>
           {text}
           {hintText && (
             <Description className={buttonHintStyles}>{hintText}</Description>

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

@@ -1,7 +1,18 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import type { Relationship } from '../services/data-model-storage';
-import { Button, H3 } from '@mongodb-js/compass-components';
+import {
+  Accordion,
+  Badge,
+  Button,
+  IconButton,
+  css,
+  FormFieldContainer,
+  palette,
+  spacing,
+  TextInput,
+  Icon,
+} from '@mongodb-js/compass-components';
 import {
   createNewRelationship,
   deleteRelationship,
@@ -10,6 +21,7 @@ import {
   selectRelationship,
 } from '../store/diagram';
 import type { DataModelingState } from '../store/reducer';
+import { getRelationshipName } from '../utils';
 
 type CollectionDrawerContentProps = {
   namespace: string;
@@ -20,6 +32,43 @@ type CollectionDrawerContentProps = {
   onDeleteRelationshipClick: (rId: string) => void;
 };
 
+const formFieldContainerStyles = css({
+  marginBottom: spacing[400],
+  marginTop: spacing[400],
+});
+
+const containerStyles = css({
+  padding: spacing[400],
+});
+
+const accordionTitleStyles = css({
+  fontSize: spacing[300],
+  width: '100%',
+});
+
+const relationshipsTitleStyles = css({
+  width: '100%',
+});
+
+const titleBtnStyles = css({
+  float: 'right',
+});
+
+const emptyRelationshipMessageStyles = css({
+  color: palette.gray.dark1,
+});
+
+const relationshipItemStyles = css({
+  display: 'flex',
+});
+const relationshipNameStyles = css({
+  flexGrow: 1,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  minWidth: 0,
+});
+
 const CollectionDrawerContent: React.FunctionComponent<
   CollectionDrawerContentProps
 > = ({
@@ -30,40 +79,83 @@ const CollectionDrawerContent: React.FunctionComponent<
   onDeleteRelationshipClick,
 }) => {
   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('.')}
-              <Button
-                onClick={() => {
-                  onEditRelationshipClick(r.id);
-                }}
-              >
-                Edit
-              </Button>
-              <Button
-                onClick={() => {
-                  onDeleteRelationshipClick(r.id);
-                }}
-              >
-                Delete
-              </Button>
-            </li>
-          );
-        })}
-      </ul>
-      <Button
-        onClick={() => {
-          onCreateNewRelationshipClick(namespace);
-        }}
+    <div className={containerStyles}>
+      <Accordion
+        text="COLLECTION"
+        defaultOpen={true}
+        textClassName={accordionTitleStyles}
+      >
+        <FormFieldContainer className={formFieldContainerStyles}>
+          <TextInput
+            label="Name"
+            sizeVariant="small"
+            value={namespace}
+            disabled={true}
+          />
+        </FormFieldContainer>
+      </Accordion>
+
+      <Accordion
+        text={
+          <>
+            RELATIONSHIPS&nbsp;
+            <Badge>{relationships.length}</Badge>
+            <Button
+              className={titleBtnStyles}
+              size="xsmall"
+              onClick={() => {
+                onCreateNewRelationshipClick(namespace);
+              }}
+            >
+              Add relationship
+            </Button>
+          </>
+        }
+        defaultOpen={true}
+        textClassName={accordionTitleStyles}
+        buttonTextClassName={relationshipsTitleStyles}
       >
-        Add relationship manually
-      </Button>
-    </>
+        {!relationships.length ? (
+          <div className={emptyRelationshipMessageStyles}>
+            This collection does not have any relationships yet.
+          </div>
+        ) : (
+          <ul>
+            {relationships.map((r) => {
+              return (
+                <li
+                  key={r.id}
+                  data-relationship-id={r.id}
+                  className={relationshipItemStyles}
+                >
+                  <span className={relationshipNameStyles}>
+                    {getRelationshipName(r)}
+                  </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>
+        )}
+      </Accordion>
+    </div>
   );
 };
 

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

@@ -57,7 +57,15 @@ const formFieldContainerStyles = css({
 
 const accordionTitleStyles = css({
   fontSize: spacing[300],
-  color: palette.gray.dark1,
+  width: '100%',
+});
+
+const relationshipTitleStyles = css({
+  width: '100%',
+});
+
+const titleBtnStyles = css({
+  float: 'right',
 });
 
 const FIELD_DIVIDER = '~~##$$##~~';
@@ -186,9 +194,25 @@ const RelationshipDrawerContent: React.FunctionComponent<
   return (
     <div data-relationship-id={relationshipId}>
       <Accordion
-        text="RELATIONSHIP"
+        text={
+          <>
+            RELATIONSHIP
+            <Button
+              variant="dangerOutline"
+              leftGlyph={<Icon glyph="Trash" />}
+              className={titleBtnStyles}
+              size="xsmall"
+              onClick={() => {
+                onDeleteRelationshipClick(relationshipId);
+              }}
+            >
+              Delete
+            </Button>
+          </>
+        }
         defaultOpen={true}
         textClassName={accordionTitleStyles}
+        buttonTextClassName={relationshipTitleStyles}
       >
         <FormFieldContainer className={formFieldContainerStyles}>
           <TextInput
@@ -203,18 +227,6 @@ const RelationshipDrawerContent: React.FunctionComponent<
             }}
           />
         </FormFieldContainer>
-
-        <FormFieldContainer className={formFieldContainerStyles}>
-          <Button
-            variant="dangerOutline"
-            leftGlyph={<Icon glyph="Trash" />}
-            onClick={() => {
-              onDeleteRelationshipClick(relationshipId);
-            }}
-          >
-            Delete reference
-          </Button>
-        </FormFieldContainer>
       </Accordion>
 
       <Accordion