fix: update collection drawer styles COMPASS-9477

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/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

@@ -31,7 +31,7 @@ import {
 import type { StaticModel } from '../services/data-model-storage';
 import DiagramEditorToolbar from './diagram-editor-toolbar';
 import ExportDiagramModal from './export-diagram-modal';
-import { DATA_MODELING_DRAWER_ID } from './diagram-editor-side-panel';
+import { DATA_MODELING_DRAWER_ID } from './drawer/diagram-editor-side-panel';
 import {
   collectionToDiagramNode,
   getSelectedFields,

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

@@ -0,0 +1,174 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import type { Relationship } from '../../services/data-model-storage';
+import {
+  Badge,
+  Button,
+  IconButton,
+  css,
+  FormFieldContainer,
+  palette,
+  spacing,
+  TextInput,
+  Icon,
+} from '@mongodb-js/compass-components';
+import {
+  createNewRelationship,
+  deleteRelationship,
+  getCurrentDiagramFromState,
+  selectCurrentModel,
+  selectRelationship,
+} from '../../store/diagram';
+import type { DataModelingState } from '../../store/reducer';
+import { getRelationshipName } from '../../utils';
+import DMDrawerSection from './dm-drawer-section';
+
+type CollectionDrawerContentProps = {
+  namespace: string;
+  relationships: Relationship[];
+  onCreateNewRelationshipClick: (namespace: string) => void;
+  onEditRelationshipClick: (rId: string) => void;
+  onDeleteRelationshipClick: (rId: string) => void;
+};
+
+const formFieldContainerStyles = css({
+  marginBottom: spacing[400],
+  marginTop: spacing[400],
+});
+
+const titleBtnStyles = css({
+  marginLeft: 'auto',
+});
+
+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],
+});
+
+const CollectionDrawerContent: React.FunctionComponent<
+  CollectionDrawerContentProps
+> = ({
+  namespace,
+  relationships,
+  onCreateNewRelationshipClick,
+  onEditRelationshipClick,
+  onDeleteRelationshipClick,
+}) => {
+  return (
+    <>
+      <DMDrawerSection label="COLLECTION">
+        <FormFieldContainer className={formFieldContainerStyles}>
+          <TextInput
+            label="Name"
+            sizeVariant="small"
+            value={namespace}
+            disabled={true}
+          />
+        </FormFieldContainer>
+      </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) => {
+                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>
+          )}
+        </div>
+      </DMDrawerSection>
+    </>
+  );
+};
+
+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
+        );
+      }),
+    };
+  },
+  {
+    onCreateNewRelationshipClick: createNewRelationship,
+    onEditRelationshipClick: selectRelationship,
+    onDeleteRelationshipClick: deleteRelationship,
+  }
+)(CollectionDrawerContent);