Skip to content

Commit 8244dac

Browse files
paula-stachopaula-stacho
committed
polish and tests
1 parent 03a2241 commit 8244dac

File tree

4 files changed

+96
-48
lines changed

4 files changed

+96
-48
lines changed

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

Lines changed: 45 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ const emptyRelationshipMessageStyles = css({
6161
const relationshipItemStyles = css({
6262
display: 'flex',
6363
});
64+
6465
const relationshipNameStyles = css({
6566
flexGrow: 1,
6667
overflow: 'hidden',
@@ -69,6 +70,10 @@ const relationshipNameStyles = css({
6970
minWidth: 0,
7071
});
7172

73+
const relationshipContentStyles = css({
74+
margin: `${spacing[400]}px 0`,
75+
});
76+
7277
const CollectionDrawerContent: React.FunctionComponent<
7378
CollectionDrawerContentProps
7479
> = ({
@@ -115,45 +120,47 @@ const CollectionDrawerContent: React.FunctionComponent<
115120
textClassName={accordionTitleStyles}
116121
buttonTextClassName={relationshipsTitleStyles}
117122
>
118-
{!relationships.length ? (
119-
<div className={emptyRelationshipMessageStyles}>
120-
This collection does not have any relationships yet.
121-
</div>
122-
) : (
123-
<ul>
124-
{relationships.map((r) => {
125-
return (
126-
<li
127-
key={r.id}
128-
data-relationship-id={r.id}
129-
className={relationshipItemStyles}
130-
>
131-
<span className={relationshipNameStyles}>
132-
{getRelationshipName(r)}
133-
</span>
134-
<IconButton
135-
aria-label="Edit relationship"
136-
title="Edit relationship"
137-
onClick={() => {
138-
onEditRelationshipClick(r.id);
139-
}}
140-
>
141-
<Icon glyph="Edit" />
142-
</IconButton>
143-
<IconButton
144-
aria-label="Delete relationship"
145-
title="Delete relationship"
146-
onClick={() => {
147-
onDeleteRelationshipClick(r.id);
148-
}}
123+
<div className={relationshipContentStyles}>
124+
{!relationships.length ? (
125+
<div className={emptyRelationshipMessageStyles}>
126+
This collection does not have any relationships yet.
127+
</div>
128+
) : (
129+
<ul>
130+
{relationships.map((r) => {
131+
return (
132+
<li
133+
key={r.id}
134+
data-relationship-id={r.id}
135+
className={relationshipItemStyles}
149136
>
150-
<Icon glyph="Trash" />
151-
</IconButton>
152-
</li>
153-
);
154-
})}
155-
</ul>
156-
)}
137+
<span className={relationshipNameStyles}>
138+
{getRelationshipName(r)}
139+
</span>
140+
<IconButton
141+
aria-label="Edit relationship"
142+
title="Edit relationship"
143+
onClick={() => {
144+
onEditRelationshipClick(r.id);
145+
}}
146+
>
147+
<Icon glyph="Edit" />
148+
</IconButton>
149+
<IconButton
150+
aria-label="Delete relationship"
151+
title="Delete relationship"
152+
onClick={() => {
153+
onDeleteRelationshipClick(r.id);
154+
}}
155+
>
156+
<Icon glyph="Trash" />
157+
</IconButton>
158+
</li>
159+
);
160+
})}
161+
</ul>
162+
)}
163+
</div>
157164
</Accordion>
158165
</div>
159166
);

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

Lines changed: 38 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,9 @@ describe('DiagramEditorSidePanel', function () {
7474
result.plugin.store.dispatch(selectCollection('flights.airlines'));
7575

7676
await waitFor(() => {
77-
expect(screen.getByText('flights.airlines')).to.be.visible;
77+
const nameInput = screen.getByLabelText('Name');
78+
expect(nameInput).to.be.visible;
79+
expect(nameInput).to.have.value('flights.airlines');
7880
});
7981
});
8082

@@ -129,14 +131,15 @@ describe('DiagramEditorSidePanel', function () {
129131
result.plugin.store.dispatch(selectCollection('flights.airlines'));
130132

131133
await waitFor(() => {
132-
expect(screen.getByText('flights.airlines')).to.be.visible;
134+
expect(screen.getByLabelText('Name')).to.have.value('flights.airlines');
133135
});
134136

135137
result.plugin.store.dispatch(
136138
selectCollection('flights.airports_coordinates_for_schema')
137139
);
138-
expect(screen.getByText('flights.airports_coordinates_for_schema')).to.be
139-
.visible;
140+
expect(screen.getByLabelText('Name')).to.have.value(
141+
'flights.airports_coordinates_for_schema'
142+
);
140143

141144
result.plugin.store.dispatch(
142145
selectRelationship('204b1fc0-601f-4d62-bba3-38fade71e049')
@@ -157,23 +160,24 @@ describe('DiagramEditorSidePanel', function () {
157160
).to.be.visible;
158161

159162
result.plugin.store.dispatch(selectCollection('flights.planes'));
160-
expect(screen.getByText('flights.planes')).to.be.visible;
163+
expect(screen.getByLabelText('Name')).to.have.value('flights.planes');
161164
});
162165

163166
it('should open and edit relationship starting from collection', async function () {
164167
const result = renderDrawer();
165168
result.plugin.store.dispatch(selectCollection('flights.countries'));
166169

167170
await waitFor(() => {
168-
expect(screen.getByText('flights.countries')).to.be.visible;
171+
expect(screen.getByLabelText('Name')).to.have.value('flights.countries');
169172
});
170173

171174
// Open relationshipt editing form
172-
const relationshipCard = document.querySelector<HTMLElement>(
173-
'[data-relationship-id="204b1fc0-601f-4d62-bba3-38fade71e049"]'
174-
);
175+
const relationshipItem = screen.getByText('Airport Country').closest('li');
176+
expect(relationshipItem).to.be.visible;
175177
userEvent.click(
176-
within(relationshipCard!).getByRole('button', { name: 'Edit' })
178+
within(relationshipItem!).getByRole('button', {
179+
name: 'Edit relationship',
180+
})
177181
);
178182
expect(screen.getByLabelText('Local field')).to.be.visible;
179183

@@ -207,4 +211,28 @@ describe('DiagramEditorSidePanel', function () {
207211
},
208212
]);
209213
});
214+
215+
it('should delete a relationship from collection', async function () {
216+
const result = renderDrawer();
217+
result.plugin.store.dispatch(selectCollection('flights.countries'));
218+
219+
await waitFor(() => {
220+
expect(screen.getByLabelText('Name')).to.have.value('flights.countries');
221+
});
222+
223+
// Find the relationhip item
224+
const relationshipItem = screen.getByText('Airport Country').closest('li');
225+
expect(relationshipItem).to.be.visible;
226+
227+
// Delete relationship
228+
userEvent.click(
229+
within(relationshipItem!).getByRole('button', {
230+
name: 'Delete relationship',
231+
})
232+
);
233+
234+
await waitFor(() => {
235+
expect(screen.queryByText('Airport Country')).not.to.exist;
236+
});
237+
});
210238
});

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import toNS from 'mongodb-ns';
2+
import type { Relationship } from './services/data-model-storage';
3+
4+
export function getRelationshipName({
5+
relationship,
6+
name,
7+
}: Relationship): string {
8+
if (name) return name;
9+
const coll1 = relationship[0].ns ? toNS(relationship[0].ns).collection : '';
10+
const coll2 = relationship[1].ns ? toNS(relationship[1].ns).collection : '';
11+
return `${coll1} -> ${coll2}`;
12+
}

‎packages/compass-data-modeling/test/fixtures/flights-model.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,7 @@
241241
},
242242
{
243243
"id": "204b1fc0-601f-4d62-bba3-38fade71e049",
244+
"name": "Airport Country",
244245
"relationship": [
245246
{
246247
"ns": "flights.countries",

0 commit comments

Comments
 (0)