Skip to content

Commit 41629f2

Browse files
PIERRONMarcPIERRONMarc
authored
Merge pull request #72 from Terraform-GUI/feat_ui-improvements
Feat UI improvements
2 parents eacdfa5 + d3ed7ae commit 41629f2

File tree

7 files changed

+69
-91
lines changed

7 files changed

+69
-91
lines changed

‎web/src/components/Description/index.tsx

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
/* eslint-disable array-callback-return */
22
import React, { useEffect } from 'react';
33
import './index.css';
4-
import { Node } from "react-flow-renderer";
5-
import {INodeData} from "../../interfaces/INodeData";
4+
import { Node } from 'react-flow-renderer';
5+
import { INodeData } from '../../interfaces/INodeData';
6+
import { Typography } from '@mui/material';
67

78
interface ResourceSideBarProps {
8-
nodes: Node<INodeData>[],
9+
nodes: Node<INodeData>[];
910
}
1011

1112
const Description = (props: ResourceSideBarProps) => {
@@ -16,23 +17,23 @@ const Description = (props: ResourceSideBarProps) => {
1617
if (node.selected) {
1718
setExpanded(node.id);
1819
}
19-
})
20-
}, [props.nodes])
20+
});
21+
}, [props.nodes]);
2122

2223
return (
23-
<div className="description">
24-
{
25-
props.nodes.map((node: Node<INodeData>, index: number) => {
26-
if (node.id === expanded) {
27-
return (
28-
<div key={index}>
29-
<b style={{color:"orange"}}>{node.data.resource.description}</b>
30-
</div>
31-
)
32-
}
33-
})
34-
}
35-
</div>
24+
<>
25+
{props.nodes.map((node: Node<INodeData>, index: number) => {
26+
if (node.id === expanded) {
27+
return (
28+
<div key={index}>
29+
<Typography>
30+
<b>{node.data.resource.description}</b>
31+
</Typography>
32+
</div>
33+
);
34+
}
35+
})}
36+
</>
3637
);
3738
};
3839

‎web/src/components/ResourceSidebar/index.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -50,20 +50,15 @@ function Index(props: ResourceSideBarProps) {
5050
};
5151

5252
return (
53-
<Paper elevation={4} style={{ height: '100%' }}>
53+
<Paper elevation={1}>
5454
<List>
55-
<ListItem>
56-
<ListItemText primary={'Provider'} />
57-
</ListItem>
58-
<ListItem>
59-
<ListItemText inset={true} primary={'AWS'} />
60-
</ListItem>
6155
<ListItem>
6256
<ListItemText primary={'Resources'} />
6357
</ListItem>
6458

6559
{props.nodes.map((node: Node<INodeData>, index: number) => (
6660
<Accordion
61+
elevation={0}
6762
key={index}
6863
expanded={expanded === node.id}
6964
onChange={handleAccordionChange(node.id)}

‎web/src/components/SchemaUI/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ function SchemaUI(props: SchemaUIProps) {
101101
};
102102

103103
const newNode: Node<INodeData> = {
104-
id: resource.type + '_' + uuidv4(),
104+
id: resource.type + '_' + uuidv4().slice(0, 4),
105105
type,
106106
position,
107107
data: {

‎web/src/components/Toolbar/ResourceList.tsx/index.tsx

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
1-
import React, {useContext} from "react";
2-
import Stack from "@mui/material/Stack";
3-
import {IResource} from "../../../interfaces/IResource";
4-
import ResourceNode from "../../ResourceNode";
5-
import ResourcesContext from "../../../contexts/ResourcesContext";
6-
import Button from "@mui/material/Button";
1+
import React, { useContext } from 'react';
2+
import Stack from '@mui/material/Stack';
3+
import { IResource } from '../../../interfaces/IResource';
4+
import ResourcesContext from '../../../contexts/ResourcesContext';
5+
import Button from '@mui/material/Button';
76

87
const ResourceList = () => {
9-
10-
const {resources} = useContext(ResourcesContext);
8+
const { resources } = useContext(ResourcesContext);
119

1210
const onDragStart = (event: any, nodeType: any, resource: IResource) => {
13-
14-
event.dataTransfer.setData("application/reactflow", JSON.stringify({
15-
type: nodeType,
16-
resource: resource
17-
}));
18-
event.dataTransfer.effectAllowed = "move";
11+
event.dataTransfer.setData(
12+
'application/reactflow',
13+
JSON.stringify({
14+
type: nodeType,
15+
resource: resource,
16+
})
17+
);
18+
event.dataTransfer.effectAllowed = 'move';
1919
};
2020

2121
return (
2222
<aside>
23-
<Stack direction="row" spacing={1}>
23+
<Stack direction="row" spacing={1} alignItems="center">
2424
{resources.map((resource: IResource, index: number) => (
25-
<div onDragStart={(event) => onDragStart(event, "ResourceNode", resource)} key={index} draggable>
26-
<Button style={{color: "orange"}} variant="text">{resource.type}</Button>
27-
</div>
25+
<div
26+
onDragStart={(event) =>
27+
onDragStart(event, 'ResourceNode', resource)
28+
}
29+
key={index}
30+
draggable
31+
>
32+
<Button variant="text">{resource.type}</Button>
33+
</div>
2834
))}
2935
</Stack>
3036
</aside>

‎web/src/components/Toolbar/index.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,9 @@ const Toolbar = (props: ToolbarProps) => {
5959
</AppBar>
6060
<Drawer
6161
sx={{
62-
width: drawerWidth,
6362
flexShrink: 0,
64-
'& .MuiDrawer-paper': {
65-
width: drawerWidth,
66-
},
63+
width: drawerWidth,
64+
'& .MuiDrawer-paper': { width: drawerWidth },
6765
}}
6866
variant="persistent"
6967
anchor="right"

‎web/src/pages/BuilderPage/index.tsx

Lines changed: 20 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import { projectService, resourceService } from '../../api';
1717
import { Box, CircularProgress, Stack, Card } from '@mui/material';
1818
import BaseLayout from '../../components/Layout/BaseLayout';
1919
import { useNavigate } from 'react-router-dom';
20-
import StorageIcon from '@mui/icons-material/Storage';
2120

2221
function BuilderPage() {
2322
const [isProjectSaved, setIsProjectSaved] = useState<boolean>(true);
@@ -139,14 +138,6 @@ function BuilderPage() {
139138
);
140139
}
141140

142-
// const actions = [
143-
// { icon: <StorageIcon />, name: 'VPC' },
144-
// { icon: <StorageIcon />, name: 'SQS' },
145-
// { icon: <StorageIcon />, name: 'RDS' },
146-
// { icon: <StorageIcon />, name: 'EC2' },
147-
// { icon: <StorageIcon />, name: 'S3' },
148-
// ];
149-
150141
return (
151142
<BaseLayout>
152143
<ResourcesProvider value={{ resources: resources }}>
@@ -166,41 +157,28 @@ function BuilderPage() {
166157
setNodes={setNodes}
167158
setEdges={setEdges}
168159
/>
169-
<Stack direction="column">
170-
<Stack direction="row" m={2}>
171-
<Box>
172-
<ResourceSidebar nodes={nodes} setNodes={setNodes} />
173-
</Box>
174-
<Box flex={'auto'}>
160+
<Stack direction="row" m={2} spacing={2}>
161+
<Box minWidth="300px">
162+
<ResourceSidebar nodes={nodes} setNodes={setNodes} />
163+
</Box>
164+
<Box flex="auto">
165+
<Stack direction="column">
175166
<Card variant="outlined">
176-
<SchemaUI
177-
nodes={nodes}
178-
edges={edges}
179-
setNodes={setNodes}
180-
setEdges={setEdges}
181-
onNodesChange={onNodesChange}
182-
onEdgesChange={onEdgesChange}
183-
/>
167+
<Box maxHeight="60vh">
168+
<SchemaUI
169+
nodes={nodes}
170+
edges={edges}
171+
setNodes={setNodes}
172+
setEdges={setEdges}
173+
onNodesChange={onNodesChange}
174+
onEdgesChange={onEdgesChange}
175+
/>
176+
</Box>
184177
</Card>
185-
</Box>
186-
{/* <SpeedDial
187-
ariaLabel="SpeedDial basic example"
188-
sx={{ position: 'absolute', bottom: 16, right: 16 }}
189-
icon={<SpeedDialIcon />}
190-
>
191-
{actions.map((action) => (
192-
<SpeedDialAction
193-
tooltipOpen
194-
key={action.name}
195-
icon={action.icon}
196-
tooltipTitle={action.name}
197-
/>
198-
))}
199-
</SpeedDial> */}
200-
</Stack>
201-
202-
<Box p={2} m={2} bgcolor="white">
203-
<Description nodes={nodes} />
178+
<Box p={2} m={2} bgcolor="white">
179+
<Description nodes={nodes} />
180+
</Box>
181+
</Stack>
204182
</Box>
205183
</Stack>
206184
</ProjectProvider>

‎web/src/pages/HomePage/index.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@
44
overflow: visible;
55
background-repeat: no-repeat;
66
background-position: bottom;
7-
background-size: 50vw;
7+
background-size: clamp(20vw, 700px, 50vw);
88
}

0 commit comments

Comments
 (0)