Skip to content

Commit c5da980

Browse files
mabaasitmabaasit
committed
vgrid
1 parent f00744e commit c5da980

File tree

3 files changed

+82
-81
lines changed

3 files changed

+82
-81
lines changed

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@ export const CARD_WIDTH = spacing[1600] * 4;
1616
export const CARD_HEIGHT = 218;
1717

1818
const diagramCardStyles = css({
19-
width: CARD_WIDTH,
20-
height: CARD_HEIGHT,
2119
display: 'flex',
2220
flexDirection: 'column',
2321
});

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

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useCallback, useState } from 'react';
1+
import React, { useCallback, useContext, useState } from 'react';
22
import {
33
Button,
44
css,
@@ -10,6 +10,7 @@ import {
1010
Subtitle,
1111
useDarkMode,
1212
} from '@mongodb-js/compass-components';
13+
import { DiagramListContext } from './saved-diagrams-list';
1314

1415
const containerStyles = css({
1516
padding: spacing[400],
@@ -41,24 +42,18 @@ const sortControlsStyles = css({
4142
const toolbarTitleLightStyles = css({ color: palette.gray.dark1 });
4243
const toolbarTitleDarkStyles = css({ color: palette.gray.light1 });
4344

44-
export function DiagramListToolbar({
45-
sortControls,
46-
onFilter,
47-
onCreateDiagramClick,
48-
}: {
49-
sortControls: React.ReactElement;
50-
onFilter: (search: string) => void;
51-
onCreateDiagramClick: () => void;
52-
}) {
45+
export const DiagramListToolbar = () => {
46+
const { onSearchDiagrams, onCreateDiagram, sortControls } =
47+
useContext(DiagramListContext);
5348
const [search, setSearch] = useState('');
5449
const darkMode = useDarkMode();
5550

5651
const onSearch = useCallback(
5752
(text: string) => {
5853
setSearch(text);
59-
onFilter(text);
54+
onSearchDiagrams(text);
6055
},
61-
[onFilter]
56+
[onSearchDiagrams]
6257
);
6358

6459
return (
@@ -73,7 +68,7 @@ export function DiagramListToolbar({
7368
</Subtitle>
7469
<div className={createDiagramContainerStyles}>
7570
<Button
76-
onClick={onCreateDiagramClick}
71+
onClick={onCreateDiagram}
7772
variant="primary"
7873
size="small"
7974
data-testid="create-diagram-button"
@@ -91,4 +86,4 @@ export function DiagramListToolbar({
9186
<div className={sortControlsStyles}>{sortControls}</div>
9287
</div>
9388
);
94-
}
89+
};

‎packages/compass-data-modeling/src/components/saved-diagrams-list.tsx‎

Lines changed: 73 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -30,20 +30,28 @@ const sortBy = [
3030
// },
3131
] as const;
3232

33-
const contentStyles = css({
34-
paddingLeft: spacing[400],
35-
paddingRight: spacing[400],
36-
width: '100%',
37-
height: '100%',
38-
});
39-
33+
const listContainerStyles = css({ height: '100%' });
4034
const rowStyles = css({
4135
gap: spacing[200],
4236
paddingLeft: spacing[400],
4337
paddingRight: spacing[400],
4438
paddingBottom: spacing[200],
4539
});
4640

41+
export const DiagramListContext = React.createContext<{
42+
onSearchDiagrams: (search: string) => void;
43+
onCreateDiagram: () => void;
44+
sortControls: React.ReactElement | null;
45+
}>({
46+
onSearchDiagrams: () => {
47+
/** */
48+
},
49+
onCreateDiagram: () => {
50+
/** */
51+
},
52+
sortControls: null,
53+
});
54+
4755
const SavedDiagramsList: React.FunctionComponent<{
4856
onCreateDiagramClick: () => void;
4957
onOpenDiagramClick: (diagram: MongoDBDataModelDescription) => void;
@@ -61,7 +69,7 @@ const SavedDiagramsList: React.FunctionComponent<{
6169
const [sortControls, sortState] = useSortControls(sortBy);
6270
const sortedItems = useSortedItems(filteredItems, sortState);
6371

64-
const onFilterItems = useCallback(
72+
const onSearchItems = useCallback(
6573
(search: string) => {
6674
try {
6775
const regex = new RegExp(search, 'i');
@@ -78,66 +86,66 @@ const SavedDiagramsList: React.FunctionComponent<{
7886
return null;
7987
}
8088

81-
const showList = items.length > 0;
82-
83-
let content;
84-
85-
if (showList) {
86-
content = (
87-
<VirtualGrid
88-
data-testid="data-modeling-diagrams-list"
89-
itemMinWidth={CARD_WIDTH}
90-
itemHeight={CARD_HEIGHT + spacing[200]}
91-
itemsCount={sortedItems.length}
92-
renderItem={({ index }) => (
93-
<DiagramCard
94-
diagram={sortedItems[index]}
95-
onOpen={onOpenDiagramClick}
96-
onRename={onDiagramRenameClick}
97-
onDelete={onDiagramDeleteClick}
98-
/>
99-
)}
100-
itemKey={(index: number) => sortedItems[index].id}
101-
renderHeader={() => (
102-
<DiagramListToolbar
103-
onCreateDiagramClick={onCreateDiagramClick}
104-
onFilter={onFilterItems}
105-
sortControls={sortControls}
106-
/>
107-
)}
108-
headerHeight={spacing[800] + 36}
109-
// renderEmptyList={NoSearchResults}
110-
classNames={{ row: rowStyles }}
111-
resetActiveItemOnBlur={false}
112-
></VirtualGrid>
113-
);
114-
} else {
115-
content = (
116-
<EmptyContent
117-
icon={() => <Icon size={80} glyph="Diagram"></Icon>}
118-
title="Design, Visualize, and Evolve your Data Model"
119-
subTitle={
120-
<>
121-
Your data model is the foundation of application performance. As
122-
applications evolve, so must your schema—intelligently and
123-
strategically. Minimize complexity, prevent performance bottlenecks,
124-
and keep your development agile.
125-
</>
126-
}
127-
callToAction={
128-
<Button
129-
onClick={onCreateDiagramClick}
130-
variant="primary"
131-
data-testid="create-diagram-button"
132-
>
133-
Create diagram
134-
</Button>
135-
}
136-
></EmptyContent>
89+
if (items.length === 0) {
90+
return (
91+
<WorkspaceContainer>
92+
<EmptyContent
93+
icon={() => <Icon size={80} glyph="Diagram"></Icon>}
94+
title="Design, Visualize, and Evolve your Data Model"
95+
subTitle={
96+
<>
97+
Your data model is the foundation of application performance. As
98+
applications evolve, so must your schema—intelligently and
99+
strategically. Minimize complexity, prevent performance
100+
bottlenecks, and keep your development agile.
101+
</>
102+
}
103+
callToAction={
104+
<Button
105+
onClick={onCreateDiagramClick}
106+
variant="primary"
107+
data-testid="create-diagram-button"
108+
>
109+
Create diagram
110+
</Button>
111+
}
112+
></EmptyContent>
113+
</WorkspaceContainer>
137114
);
138115
}
139116

140-
return <WorkspaceContainer>{content}</WorkspaceContainer>;
117+
return (
118+
<DiagramListContext.Provider
119+
value={{
120+
sortControls,
121+
onCreateDiagram: onCreateDiagramClick,
122+
onSearchDiagrams: onSearchItems,
123+
}}
124+
>
125+
<WorkspaceContainer>
126+
<VirtualGrid
127+
data-testid="data-modeling-diagrams-list"
128+
itemMinWidth={CARD_WIDTH}
129+
itemHeight={CARD_HEIGHT + spacing[200]}
130+
itemsCount={sortedItems.length}
131+
className={listContainerStyles}
132+
renderItem={({ index }) => (
133+
<DiagramCard
134+
diagram={sortedItems[index]}
135+
onOpen={onOpenDiagramClick}
136+
onRename={onDiagramRenameClick}
137+
onDelete={onDiagramDeleteClick}
138+
/>
139+
)}
140+
itemKey={(index) => sortedItems[index].id}
141+
renderHeader={DiagramListToolbar}
142+
headerHeight={spacing[800] * 3 + spacing[200]}
143+
classNames={{ row: rowStyles }}
144+
resetActiveItemOnBlur={false}
145+
></VirtualGrid>
146+
</WorkspaceContainer>
147+
</DiagramListContext.Provider>
148+
);
141149
};
142150

143151
export default connect(null, {

0 commit comments

Comments
 (0)