Skip to content

Commit 29ca14b

Browse files
paula-stachopaula-stacho
committed
feat: add diagram breadcrumbs COMPASS-9800 
1 parent 266375e commit 29ca14b

File tree

2 files changed

+95
-57
lines changed

2 files changed

+95
-57
lines changed

‎packages/compass-components/src/components/breadcrumb.tsx‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -55,27 +55,17 @@ export const Breadcrumbs = ({
5555
items,
5656
className,
5757
}: {
58-
items: Array<BreadcrumbItem>;
58+
items:
59+
| BreadcrumbItem[]
60+
| [...BreadcrumbItem[], Omit<BreadcrumbItem, 'onClick'>];
5961
className?: string;
6062
}) => {
6163
const darkMode = useDarkMode();
64+
const lastItem = items[items.length - 1];
65+
const clickableItems = items.slice(0, -1) as BreadcrumbItem[];
6266
return (
6367
<div className={cx(breadcrumbStyles, className)} data-testid="breadcrumbs">
64-
{items.map((item, index) => {
65-
const isLast = index === items.length - 1;
66-
if (isLast) {
67-
return (
68-
<Body
69-
key={[index, item.name].join('')}
70-
className={cx(
71-
textStyles,
72-
darkMode ? lastItemStylesDark : lastItemStylesLight
73-
)}
74-
>
75-
{item.name}
76-
</Body>
77-
);
78-
}
68+
{clickableItems.map((item) => {
7969
return (
8070
<Fragment key={item.name}>
8171
<Link
@@ -103,6 +93,15 @@ export const Breadcrumbs = ({
10393
</Fragment>
10494
);
10595
})}
96+
<Body
97+
key={[items.length - 1, lastItem.name].join('')}
98+
className={cx(
99+
textStyles,
100+
darkMode ? lastItemStylesDark : lastItemStylesLight
101+
)}
102+
>
103+
{lastItem.name}
104+
</Body>
106105
</div>
107106
);
108107
};

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

Lines changed: 80 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useMemo } from 'react';
22
import { connect } from 'react-redux';
33
import type { DataModelingState } from '../store/reducer';
44
import { redoEdit, undoEdit } from '../store/diagram';
@@ -14,13 +14,21 @@ import {
1414
useDarkMode,
1515
transparentize,
1616
Tooltip,
17+
Breadcrumbs,
18+
BreadcrumbItem,
1719
} from '@mongodb-js/compass-components';
1820
import AddCollection from './icons/add-collection';
19-
const containerStyles = css({
21+
import { useOpenWorkspace } from '@mongodb-js/compass-workspaces/provider';
22+
23+
const breadcrumbsStyles = css({
24+
padding: `${spacing[300]}px ${spacing[400]}px`,
25+
});
26+
27+
const editorToolbarStyles = css({
2028
display: 'flex',
2129
justifyContent: 'space-between',
2230
alignItems: 'center',
23-
padding: `${spacing[150]}px ${spacing[200]}px`,
31+
padding: `${spacing[150]}px ${spacing[300]}px`,
2432
backgroundColor: palette.gray.light3,
2533
borderBottom: `1px solid ${palette.gray.light2}`,
2634
marginBottom: spacing[50],
@@ -29,7 +37,7 @@ const containerStyles = css({
2937
}px ${transparentize(0.85, palette.black)}`,
3038
});
3139

32-
const containerDarkStyles = css({
40+
const editorToolbarDarkStyles = css({
3341
backgroundColor: palette.gray.dark3,
3442
borderBottom: `1px solid ${palette.gray.dark2}`,
3543
boxShadow: `0px ${spacing[50]}px ${spacing[100]}px -${
@@ -43,6 +51,7 @@ const toolbarGroupStyles = css({
4351

4452
export const DiagramEditorToolbar: React.FunctionComponent<{
4553
step: DataModelingState['step'];
54+
diagramName?: string;
4655
hasUndo: boolean;
4756
hasRedo: boolean;
4857
isInRelationshipDrawingMode: boolean;
@@ -53,6 +62,7 @@ export const DiagramEditorToolbar: React.FunctionComponent<{
5362
onAddCollectionClick: () => void;
5463
}> = ({
5564
step,
65+
diagramName,
5666
hasUndo,
5767
onUndoClick,
5868
hasRedo,
@@ -63,47 +73,75 @@ export const DiagramEditorToolbar: React.FunctionComponent<{
6373
isInRelationshipDrawingMode,
6474
}) => {
6575
const darkmode = useDarkMode();
76+
const { openDataModelingWorkspace } = useOpenWorkspace();
77+
78+
const breadcrumbItems: [
79+
...BreadcrumbItem[],
80+
Omit<BreadcrumbItem, 'onClick'>
81+
] = useMemo(
82+
() => [
83+
{ name: 'diagrams', onClick: () => openDataModelingWorkspace() },
84+
{ name: diagramName || 'untitled', onClick: () => {} },
85+
],
86+
[diagramName, openDataModelingWorkspace]
87+
);
88+
6689
if (step !== 'EDITING') {
6790
return null;
6891
}
92+
6993
return (
70-
<div
71-
className={cx(containerStyles, darkmode && containerDarkStyles)}
72-
data-testid="diagram-editor-toolbar"
73-
>
74-
<div className={toolbarGroupStyles}>
75-
<IconButton aria-label="Undo" disabled={!hasUndo} onClick={onUndoClick}>
76-
<Icon glyph="Undo"></Icon>
77-
</IconButton>
78-
<IconButton aria-label="Redo" disabled={!hasRedo} onClick={onRedoClick}>
79-
<Icon glyph="Redo"></Icon>
80-
</IconButton>
81-
<IconButton aria-label="Add Collection" onClick={onAddCollectionClick}>
82-
<AddCollection />
83-
</IconButton>
84-
<Tooltip
85-
trigger={
86-
<IconButton
87-
aria-label={
88-
!isInRelationshipDrawingMode
89-
? 'Add Relationship'
90-
: 'Exit Relationship Drawing Mode'
91-
}
92-
onClick={onRelationshipDrawingToggle}
93-
active={isInRelationshipDrawingMode}
94-
aria-pressed={isInRelationshipDrawingMode}
95-
>
96-
<Icon glyph="Relationship"></Icon>
97-
</IconButton>
98-
}
99-
>
100-
Drag from one collection to another to create a relationship.
101-
</Tooltip>
102-
</div>
103-
<div className={toolbarGroupStyles}>
104-
<Button size="xsmall" aria-label="Export" onClick={onExportClick}>
105-
<Icon glyph="Export"></Icon>
106-
</Button>
94+
<div>
95+
<Breadcrumbs className={breadcrumbsStyles} items={breadcrumbItems} />
96+
<div
97+
className={cx(editorToolbarStyles, darkmode && editorToolbarDarkStyles)}
98+
data-testid="diagram-editor-toolbar"
99+
>
100+
<div className={toolbarGroupStyles}>
101+
<IconButton
102+
aria-label="Undo"
103+
disabled={!hasUndo}
104+
onClick={onUndoClick}
105+
>
106+
<Icon glyph="Undo"></Icon>
107+
</IconButton>
108+
<IconButton
109+
aria-label="Redo"
110+
disabled={!hasRedo}
111+
onClick={onRedoClick}
112+
>
113+
<Icon glyph="Redo"></Icon>
114+
</IconButton>
115+
<IconButton
116+
aria-label="Add Collection"
117+
onClick={onAddCollectionClick}
118+
>
119+
<AddCollection />
120+
</IconButton>
121+
<Tooltip
122+
trigger={
123+
<IconButton
124+
aria-label={
125+
!isInRelationshipDrawingMode
126+
? 'Add Relationship'
127+
: 'Exit Relationship Drawing Mode'
128+
}
129+
onClick={onRelationshipDrawingToggle}
130+
active={isInRelationshipDrawingMode}
131+
aria-pressed={isInRelationshipDrawingMode}
132+
>
133+
<Icon glyph="Relationship"></Icon>
134+
</IconButton>
135+
}
136+
>
137+
Drag from one collection to another to create a relationship.
138+
</Tooltip>
139+
</div>
140+
<div className={toolbarGroupStyles}>
141+
<Button size="xsmall" aria-label="Export" onClick={onExportClick}>
142+
<Icon glyph="Export"></Icon>
143+
</Button>
144+
</div>
107145
</div>
108146
</div>
109147
);
@@ -116,6 +154,7 @@ export default connect(
116154
step: step,
117155
hasUndo: (diagram?.edits.prev.length ?? 0) > 0,
118156
hasRedo: (diagram?.edits.next.length ?? 0) > 0,
157+
diagramName: diagram?.name,
119158
};
120159
},
121160
{

0 commit comments

Comments
 (0)