From 0bc848a3ca6eac4c0140ed2e4e9b44581cf236ef Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Fri, 25 Jul 2025 14:43:44 +0200 Subject: [PATCH 1/6] fix: update collection drawer styles COMPASS-9477 --- .../src/components/accordion.tsx | 4 +- .../components/collection-drawer-content.tsx | 160 ++++++++++++++---- .../relationship-drawer-content.tsx | 40 +++-- 3 files changed, 155 insertions(+), 49 deletions(-) diff --git a/packages/compass-components/src/components/accordion.tsx b/packages/compass-components/src/components/accordion.tsx index a5c7b13187c..dce0b3fa34a 100644 --- a/packages/compass-components/src/components/accordion.tsx +++ b/packages/compass-components/src/components/accordion.tsx @@ -51,6 +51,7 @@ interface AccordionProps extends React.HTMLProps { 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({ -
+
{text} {hintText && ( {hintText} diff --git a/packages/compass-data-modeling/src/components/collection-drawer-content.tsx b/packages/compass-data-modeling/src/components/collection-drawer-content.tsx index 60bc33e9875..6020656df84 100644 --- a/packages/compass-data-modeling/src/components/collection-drawer-content.tsx +++ b/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 ( - <> -

{namespace}

-
    - {relationships.map((r) => { - return ( -
  • - {r.relationship[0].fields?.join('.')} ->  - {r.relationship[1].fields?.join('.')} - - -
    • - ); - })} -
- + + } + defaultOpen={true} + textClassName={accordionTitleStyles} + buttonTextClassName={relationshipsTitleStyles} > - Add relationship manually - - + {!relationships.length ? ( +
+ This collection does not have any relationships yet. +
+ ) : ( +
    + {relationships.map((r) => { + return ( +
  • + + {getRelationshipName(r)} + + { + onEditRelationshipClick(r.id); + }} + > + + + { + onDeleteRelationshipClick(r.id); + }} + > + + +
    • + ); + })} +
+ )} + +
); }; diff --git a/packages/compass-data-modeling/src/components/relationship-drawer-content.tsx b/packages/compass-data-modeling/src/components/relationship-drawer-content.tsx index 845c78ec49d..106891a5b82 100644 --- a/packages/compass-data-modeling/src/components/relationship-drawer-content.tsx +++ b/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 (
+ RELATIONSHIP + + + } defaultOpen={true} textClassName={accordionTitleStyles} + buttonTextClassName={relationshipTitleStyles} > - - - - Date: Fri, 25 Jul 2025 16:08:05 +0200 Subject: [PATCH 2/6] polish and tests --- .../components/collection-drawer-content.tsx | 83 ++++++++++--------- .../diagram-editor-side-panel.spec.tsx | 48 ++++++++--- packages/compass-data-modeling/src/utils.ts | 12 +++ .../test/fixtures/flights-model.json | 1 + 4 files changed, 96 insertions(+), 48 deletions(-) create mode 100644 packages/compass-data-modeling/src/utils.ts diff --git a/packages/compass-data-modeling/src/components/collection-drawer-content.tsx b/packages/compass-data-modeling/src/components/collection-drawer-content.tsx index 6020656df84..218e721a552 100644 --- a/packages/compass-data-modeling/src/components/collection-drawer-content.tsx +++ b/packages/compass-data-modeling/src/components/collection-drawer-content.tsx @@ -61,6 +61,7 @@ const emptyRelationshipMessageStyles = css({ const relationshipItemStyles = css({ display: 'flex', }); + const relationshipNameStyles = css({ flexGrow: 1, overflow: 'hidden', @@ -69,6 +70,10 @@ const relationshipNameStyles = css({ minWidth: 0, }); +const relationshipContentStyles = css({ + margin: `${spacing[400]}px 0`, +}); + const CollectionDrawerContent: React.FunctionComponent< CollectionDrawerContentProps > = ({ @@ -115,45 +120,47 @@ const CollectionDrawerContent: React.FunctionComponent< textClassName={accordionTitleStyles} buttonTextClassName={relationshipsTitleStyles} > - {!relationships.length ? ( -
- This collection does not have any relationships yet. -
- ) : ( -
    - {relationships.map((r) => { - return ( -
  • - - {getRelationshipName(r)} - - { - onEditRelationshipClick(r.id); - }} - > - - - { - onDeleteRelationshipClick(r.id); - }} +
    + {!relationships.length ? ( +
    + This collection does not have any relationships yet. +
    + ) : ( +
      + {relationships.map((r) => { + return ( +
    • - - -
      • - ); - })} -
    - )} + + {getRelationshipName(r)} + + { + onEditRelationshipClick(r.id); + }} + > + + + { + onDeleteRelationshipClick(r.id); + }} + > + + +
    • + ); + })} +
+ )} +
); diff --git a/packages/compass-data-modeling/src/components/diagram-editor-side-panel.spec.tsx b/packages/compass-data-modeling/src/components/diagram-editor-side-panel.spec.tsx index ec1f493989b..53e1a021239 100644 --- a/packages/compass-data-modeling/src/components/diagram-editor-side-panel.spec.tsx +++ b/packages/compass-data-modeling/src/components/diagram-editor-side-panel.spec.tsx @@ -74,7 +74,9 @@ describe('DiagramEditorSidePanel', function () { result.plugin.store.dispatch(selectCollection('flights.airlines')); await waitFor(() => { - expect(screen.getByText('flights.airlines')).to.be.visible; + const nameInput = screen.getByLabelText('Name'); + expect(nameInput).to.be.visible; + expect(nameInput).to.have.value('flights.airlines'); }); }); @@ -129,14 +131,15 @@ describe('DiagramEditorSidePanel', function () { result.plugin.store.dispatch(selectCollection('flights.airlines')); await waitFor(() => { - expect(screen.getByText('flights.airlines')).to.be.visible; + expect(screen.getByLabelText('Name')).to.have.value('flights.airlines'); }); result.plugin.store.dispatch( selectCollection('flights.airports_coordinates_for_schema') ); - expect(screen.getByText('flights.airports_coordinates_for_schema')).to.be - .visible; + expect(screen.getByLabelText('Name')).to.have.value( + 'flights.airports_coordinates_for_schema' + ); result.plugin.store.dispatch( selectRelationship('204b1fc0-601f-4d62-bba3-38fade71e049') @@ -157,7 +160,7 @@ describe('DiagramEditorSidePanel', function () { ).to.be.visible; result.plugin.store.dispatch(selectCollection('flights.planes')); - expect(screen.getByText('flights.planes')).to.be.visible; + expect(screen.getByLabelText('Name')).to.have.value('flights.planes'); }); it('should open and edit relationship starting from collection', async function () { @@ -165,15 +168,16 @@ describe('DiagramEditorSidePanel', function () { result.plugin.store.dispatch(selectCollection('flights.countries')); await waitFor(() => { - expect(screen.getByText('flights.countries')).to.be.visible; + expect(screen.getByLabelText('Name')).to.have.value('flights.countries'); }); // Open relationshipt editing form - const relationshipCard = document.querySelector( - '[data-relationship-id="204b1fc0-601f-4d62-bba3-38fade71e049"]' - ); + const relationshipItem = screen.getByText('Airport Country').closest('li'); + expect(relationshipItem).to.be.visible; userEvent.click( - within(relationshipCard!).getByRole('button', { name: 'Edit' }) + within(relationshipItem!).getByRole('button', { + name: 'Edit relationship', + }) ); expect(screen.getByLabelText('Local field')).to.be.visible; @@ -207,4 +211,28 @@ describe('DiagramEditorSidePanel', function () { }, ]); }); + + it('should delete a relationship from collection', async function () { + const result = renderDrawer(); + result.plugin.store.dispatch(selectCollection('flights.countries')); + + await waitFor(() => { + expect(screen.getByLabelText('Name')).to.have.value('flights.countries'); + }); + + // Find the relationhip item + const relationshipItem = screen.getByText('Airport Country').closest('li'); + expect(relationshipItem).to.be.visible; + + // Delete relationship + userEvent.click( + within(relationshipItem!).getByRole('button', { + name: 'Delete relationship', + }) + ); + + await waitFor(() => { + expect(screen.queryByText('Airport Country')).not.to.exist; + }); + }); }); diff --git a/packages/compass-data-modeling/src/utils.ts b/packages/compass-data-modeling/src/utils.ts new file mode 100644 index 00000000000..ef40f083fc1 --- /dev/null +++ b/packages/compass-data-modeling/src/utils.ts @@ -0,0 +1,12 @@ +import toNS from 'mongodb-ns'; +import type { Relationship } from './services/data-model-storage'; + +export function getRelationshipName({ + relationship, + name, +}: Relationship): string { + 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}`; +} diff --git a/packages/compass-data-modeling/test/fixtures/flights-model.json b/packages/compass-data-modeling/test/fixtures/flights-model.json index 13fc64f3de8..d62e958af24 100644 --- a/packages/compass-data-modeling/test/fixtures/flights-model.json +++ b/packages/compass-data-modeling/test/fixtures/flights-model.json @@ -241,6 +241,7 @@ }, { "id": "204b1fc0-601f-4d62-bba3-38fade71e049", + "name": "Airport Country", "relationship": [ { "ns": "flights.countries", From d37e1489d36a6f2f37180bbe6cab7558b6e8edfd Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Mon, 28 Jul 2025 10:37:01 +0200 Subject: [PATCH 3/6] . --- .../src/components/collection-drawer-content.tsx | 4 ++-- .../src/components/relationship-drawer-content.tsx | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/compass-data-modeling/src/components/collection-drawer-content.tsx b/packages/compass-data-modeling/src/components/collection-drawer-content.tsx index 218e721a552..5eb108192ff 100644 --- a/packages/compass-data-modeling/src/components/collection-drawer-content.tsx +++ b/packages/compass-data-modeling/src/components/collection-drawer-content.tsx @@ -48,16 +48,16 @@ const accordionTitleStyles = css({ const relationshipsTitleStyles = css({ width: '100%', + display: 'flex', }); const titleBtnStyles = css({ - float: 'right', + marginLeft: 'auto', }); const emptyRelationshipMessageStyles = css({ color: palette.gray.dark1, }); - const relationshipItemStyles = css({ display: 'flex', }); diff --git a/packages/compass-data-modeling/src/components/relationship-drawer-content.tsx b/packages/compass-data-modeling/src/components/relationship-drawer-content.tsx index 106891a5b82..ab8883bd15d 100644 --- a/packages/compass-data-modeling/src/components/relationship-drawer-content.tsx +++ b/packages/compass-data-modeling/src/components/relationship-drawer-content.tsx @@ -62,10 +62,11 @@ const accordionTitleStyles = css({ const relationshipTitleStyles = css({ width: '100%', + display: 'flex', }); const titleBtnStyles = css({ - float: 'right', + marginLeft: 'auto', }); const FIELD_DIVIDER = '~~##$$##~~'; From 4d1f2c4079b08be31329550c73f77f833593bcce Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Mon, 28 Jul 2025 17:27:49 +0200 Subject: [PATCH 4/6] pr feedback --- .../src/components/data-modeling.tsx | 2 +- .../src/components/diagram-editor.tsx | 2 +- .../collection-drawer-content.tsx | 45 +++++-------------- .../diagram-editor-side-panel.spec.tsx | 8 ++-- .../diagram-editor-side-panel.tsx | 8 ++-- .../components/drawer/dm-drawer-section.tsx | 45 +++++++++++++++++++ .../relationship-drawer-content.tsx | 35 ++++----------- packages/compass-data-modeling/src/utils.ts | 2 +- 8 files changed, 77 insertions(+), 70 deletions(-) rename packages/compass-data-modeling/src/components/{ => drawer}/collection-drawer-content.tsx (83%) rename packages/compass-data-modeling/src/components/{ => drawer}/diagram-editor-side-panel.spec.tsx (97%) rename packages/compass-data-modeling/src/components/{ => drawer}/diagram-editor-side-panel.tsx (90%) create mode 100644 packages/compass-data-modeling/src/components/drawer/dm-drawer-section.tsx rename packages/compass-data-modeling/src/components/{ => drawer}/relationship-drawer-content.tsx (94%) diff --git a/packages/compass-data-modeling/src/components/data-modeling.tsx b/packages/compass-data-modeling/src/components/data-modeling.tsx index a6eac583895..6db1f08d592 100644 --- a/packages/compass-data-modeling/src/components/data-modeling.tsx +++ b/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; diff --git a/packages/compass-data-modeling/src/components/diagram-editor.tsx b/packages/compass-data-modeling/src/components/diagram-editor.tsx index 39e8339b97d..df20f701a9d 100644 --- a/packages/compass-data-modeling/src/components/diagram-editor.tsx +++ b/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, diff --git a/packages/compass-data-modeling/src/components/collection-drawer-content.tsx b/packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx similarity index 83% rename from packages/compass-data-modeling/src/components/collection-drawer-content.tsx rename to packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx index 5eb108192ff..ac307df4142 100644 --- a/packages/compass-data-modeling/src/components/collection-drawer-content.tsx +++ b/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 ( -
- + <> + - + - RELATIONSHIPS  {relationships.length} @@ -116,9 +98,6 @@ const CollectionDrawerContent: React.FunctionComponent< } - defaultOpen={true} - textClassName={accordionTitleStyles} - buttonTextClassName={relationshipsTitleStyles} >
{!relationships.length ? ( @@ -161,8 +140,8 @@ const CollectionDrawerContent: React.FunctionComponent< )}
- -
+ + ); }; diff --git a/packages/compass-data-modeling/src/components/diagram-editor-side-panel.spec.tsx b/packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.spec.tsx similarity index 97% rename from packages/compass-data-modeling/src/components/diagram-editor-side-panel.spec.tsx rename to packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.spec.tsx index 53e1a021239..9faf342a756 100644 --- a/packages/compass-data-modeling/src/components/diagram-editor-side-panel.spec.tsx +++ b/packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.spec.tsx @@ -7,7 +7,7 @@ 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, @@ -15,12 +15,12 @@ import { 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( diff --git a/packages/compass-data-modeling/src/components/diagram-editor-side-panel.tsx b/packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.tsx similarity index 90% rename from packages/compass-data-modeling/src/components/diagram-editor-side-panel.tsx rename to packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.tsx index a01b194a30c..56096066b20 100644 --- a/packages/compass-data-modeling/src/components/diagram-editor-side-panel.tsx +++ b/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); diff --git a/packages/compass-data-modeling/src/components/drawer/dm-drawer-section.tsx b/packages/compass-data-modeling/src/components/drawer/dm-drawer-section.tsx new file mode 100644 index 00000000000..a73d724531b --- /dev/null +++ b/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 ( +
+ + {children} + +
+ ); +}; + +export default DMDrawerSection; diff --git a/packages/compass-data-modeling/src/components/relationship-drawer-content.tsx b/packages/compass-data-modeling/src/components/drawer/relationship-drawer-content.tsx similarity index 94% rename from packages/compass-data-modeling/src/components/relationship-drawer-content.tsx rename to packages/compass-data-modeling/src/components/drawer/relationship-drawer-content.tsx index ab8883bd15d..ea44b48e0b2 100644 --- a/packages/compass-data-modeling/src/components/relationship-drawer-content.tsx +++ b/packages/compass-data-modeling/src/components/drawer/relationship-drawer-content.tsx @@ -6,7 +6,7 @@ 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, @@ -14,7 +14,6 @@ import { 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 (
- RELATIONSHIP
); }; diff --git a/packages/compass-data-modeling/src/utils.ts b/packages/compass-data-modeling/src/utils.ts index ef40f083fc1..9ce7e8820b9 100644 --- a/packages/compass-data-modeling/src/utils.ts +++ b/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(); } From 920fee45be08cbf839581df6ddfa55644a406034 Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Tue, 29 Jul 2025 13:50:01 +0200 Subject: [PATCH 5/6] improve styles --- .../drawer/collection-drawer-content.tsx | 14 +++++++++++--- .../src/components/drawer/dm-drawer-section.tsx | 5 +++-- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx b/packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx index ac307df4142..e72e4ad2f8c 100644 --- a/packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx +++ b/packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx @@ -26,7 +26,6 @@ import DMDrawerSection from './dm-drawer-section'; type CollectionDrawerContentProps = { namespace: string; relationships: Relationship[]; - shouldShowRelationshipEditingForm?: boolean; onCreateNewRelationshipClick: (namespace: string) => void; onEditRelationshipClick: (rId: string) => void; onDeleteRelationshipClick: (rId: string) => void; @@ -44,8 +43,16 @@ const titleBtnStyles = css({ 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({ @@ -54,10 +61,11 @@ const relationshipNameStyles = css({ textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0, + paddingRight: spacing[200], }); const relationshipContentStyles = css({ - margin: `${spacing[400]}px 0`, + marginTop: spacing[400], }); const CollectionDrawerContent: React.FunctionComponent< @@ -105,7 +113,7 @@ const CollectionDrawerContent: React.FunctionComponent< This collection does not have any relationships yet. ) : ( -
    +
      {relationships.map((r) => { return (
    • Date: Tue, 29 Jul 2025 16:28:25 +0200 Subject: [PATCH 6/6] darkmode --- .../src/components/drawer/dm-drawer-section.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/compass-data-modeling/src/components/drawer/dm-drawer-section.tsx b/packages/compass-data-modeling/src/components/drawer/dm-drawer-section.tsx index 636c8173e4a..86c2ada1672 100644 --- a/packages/compass-data-modeling/src/components/drawer/dm-drawer-section.tsx +++ b/packages/compass-data-modeling/src/components/drawer/dm-drawer-section.tsx @@ -3,6 +3,8 @@ import { css, palette, spacing, + cx, + useDarkMode, } from '@mongodb-js/compass-components'; import React from 'react'; @@ -16,6 +18,10 @@ const containerStyles = css({ padding: spacing[400], }); +const darkModeContainerStyles = css({ + borderBottom: `1px solid ${palette.gray.dark2}`, +}); + const accordionTitleStyles = css({ fontSize: spacing[300], width: '100%', @@ -29,8 +35,9 @@ const buttonStyles = css({ const DMDrawerSection: React.FC<{ label: React.ReactNode; }> = ({ label, children }) => { + const darkMode = useDarkMode(); return ( -
      +