Skip to content

Commit 27801ab

Browse files
ywy-wywy-w
authored
Merge pull request #45 from oslabs-beta/alex/http2-composer
Alex/http2 composer
2 parents 09fadac + 431f861 commit 27801ab

22 files changed

+1467
-563
lines changed

‎src/client/components-v2/App.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ const { api } = window as unknown as WindowExt;
2222
const App = () => {
2323
const [message, setMessage] = useState(null);
2424

25+
// currentWorkspace is the current Workspace's UUID. It is only altered in WorkspaceSelect.tsx, which is rendered by CurrentWorskpaceDisplay.tsx
26+
const [currentWorkspaceId, setWorkspace] = React.useState('');
27+
2528
useEffect(() => {
2629
api.send('check-for-update');
2730
historyController.getHistory();
@@ -35,12 +38,13 @@ const App = () => {
3538
<Divider orientation="horizontal"/>
3639
<Box sx={{ height: '100%', display: 'flex' }}>
3740
{/* New MUI workspace. */}
38-
<HistoryOrWorkspaceContainer />
41+
{/* <WorkspaceContainer currentWorkspaceId={currentWorkspaceId} setWorkspace={setWorkspace} /> */}
42+
<HistoryOrWorkspaceContainer currentWorkspaceId={currentWorkspaceId} setWorkspace={setWorkspace} />
3943
{/* Legacy workspace. */}
4044
<ContentsContainer />
4145
<Divider orientation="vertical"/>
4246
{/* New MUI main container. */}
43-
<MainContainer />
47+
<MainContainer currentWorkspaceId={currentWorkspaceId} />
4448
{/* Legacy main container */}
4549
{/* <div className="tile is-vertical add-vertical-scroll">
4650
<SidebarContainer />

‎src/client/components-v2/history-workspace-display/HistoryOrWorkspaceContainer.tsx‎

Lines changed: 67 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,67 @@
1-
import * as React from 'react';
2-
import Tabs from '@mui/material/Tabs';
3-
import Tab from '@mui/material/Tab';
4-
import Typography from '@mui/material/Typography';
5-
import Box from '@mui/material/Box';
6-
import WorkspaceContainer from "../workspace/WorkspaceContainer";
7-
import HistoryContainer from '../../components/containers/HistoryContainer';
8-
import AccessTimeIcon from '@mui/icons-material/AccessTime';
9-
import WorkIcon from '@mui/icons-material/Work';
10-
11-
interface TabPanelProps {
12-
children?: React.ReactNode;
13-
index: number;
14-
value: number;
15-
}
16-
17-
function TabPanel(props: TabPanelProps) {
18-
const { children, value, index, ...other } = props;
19-
20-
return (
21-
<div
22-
role="tabpanel"
23-
hidden={value !== index}
24-
id={`simple-tabpanel-${index}`}
25-
aria-labelledby={`simple-tab-${index}`}
26-
{...other}
27-
>
28-
{value === index && (
29-
<Box sx={{ p: 3 }}>
30-
<Box>{children}</Box>
31-
</Box>
32-
)}
33-
</div>
34-
);
35-
}
36-
37-
function a11yProps(index: number) {
38-
return {
39-
id: `simple-tab-${index}`,
40-
'aria-controls': `simple-tabpanel-${index}`,
41-
};
42-
}
43-
44-
export default function HistoryOrWorkspaceContainer() {
45-
const [value, setValue] = React.useState(0);
46-
47-
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
48-
setValue(newValue);
49-
};
50-
51-
return (
52-
<Box sx={{ minWidth: '25%', overflow: 'auto', maxHeight: '100%', overflowX: 'auto' }}>
53-
<Box sx={{ borderBottom: 1, borderColor: 'divider', }}>
54-
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
55-
<Tab icon={<WorkIcon />} label="Current Workspace" {...a11yProps(0)} sx={{fontSize:'10px', overflowWrap: "break-word", maxWidth: '50%'}}/>
56-
<Tab icon={<AccessTimeIcon />} label='View History' {...a11yProps(1)} sx={{fontSize:'10px', overflowWrap: "break-word", maxWidth: '50%'}}/>
57-
</Tabs>
58-
</Box>
59-
<TabPanel value={value} index={0}>
60-
<WorkspaceContainer />
61-
</TabPanel>
62-
<TabPanel value={value} index={1}>
63-
<HistoryContainer />
64-
</TabPanel>
65-
</Box>
66-
);
67-
}
1+
import * as React from 'react';
2+
import Tabs from '@mui/material/Tabs';
3+
import Tab from '@mui/material/Tab';
4+
import Typography from '@mui/material/Typography';
5+
import Box from '@mui/material/Box';
6+
import WorkspaceContainer from "../workspace/WorkspaceContainer";
7+
import HistoryContainer from '../../components/containers/HistoryContainer';
8+
import AccessTimeIcon from '@mui/icons-material/AccessTime';
9+
import WorkIcon from '@mui/icons-material/Work';
10+
11+
interface TabPanelProps {
12+
children?: React.ReactNode;
13+
index: number;
14+
value: number;
15+
}
16+
17+
function TabPanel(props: TabPanelProps) {
18+
const { children, value, index, ...other } = props;
19+
20+
return (
21+
<div
22+
role="tabpanel"
23+
hidden={value !== index}
24+
id={`simple-tabpanel-${index}`}
25+
aria-labelledby={`simple-tab-${index}`}
26+
{...other}
27+
>
28+
{value === index && (
29+
<Box sx={{ p: 1 }}>
30+
<Box>{children}</Box>
31+
</Box>
32+
)}
33+
</div>
34+
);
35+
}
36+
37+
function a11yProps(index: number) {
38+
return {
39+
id: `simple-tab-${index}`,
40+
'aria-controls': `simple-tabpanel-${index}`,
41+
};
42+
}
43+
44+
export default function HistoryOrWorkspaceContainer(props) {
45+
const [value, setValue] = React.useState(0);
46+
47+
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
48+
setValue(newValue);
49+
};
50+
51+
return (
52+
<Box sx={{ minWidth: '25%', overflow: 'auto', maxHeight: '100%', overflowX: 'auto' }}>
53+
<Box sx={{ borderBottom: 1, borderColor: 'divider', }}>
54+
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
55+
<Tab icon={<WorkIcon fontSize='small'/>} {...a11yProps(0)} sx={{fontSize:'10px', overflowWrap: "break-word", maxWidth: '50%'}}/>
56+
<Tab icon={<AccessTimeIcon fontSize='small'/>} {...a11yProps(1)} sx={{fontSize:'10px', overflowWrap: "break-word", maxWidth: '50%'}}/>
57+
</Tabs>
58+
</Box>
59+
<TabPanel value={value} index={0}>
60+
<WorkspaceContainer {...props} />
61+
</TabPanel>
62+
<TabPanel value={value} index={1}>
63+
<HistoryContainer />
64+
</TabPanel>
65+
</Box>
66+
);
67+
}

‎src/client/components-v2/main/MainContainer.tsx‎

Lines changed: 33 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import * as actions from './../../features/business/businessSlice';
55
import * as uiactions from './../../features/ui/uiSlice';
66

77
// Import local components.
8-
import Http2Composer from './Http2Composer';
8+
import Http2Composer from './http2-composer/Http2Composer';
99
import GraphQLComposer from './GraphQLComposer';
1010
import GRPCComposer from './GRPCComposer';
1111
import WebSocketComposer from './WebSocketComposer';
@@ -79,40 +79,38 @@ const mapDispatchToProps = (dispatch) => ({
7979
function MainContainer(props) {
8080
return(
8181
<Box sx={{p: 1.5, width: '80%', overflowY: 'scroll'}}>
82-
<Box>
83-
<Routes>
84-
<Route
85-
path="/"
86-
element={<Http2Composer {...props} />}
87-
/>
88-
<Route
89-
path="/graphql"
90-
element={<GraphQLComposer {...props} />}
91-
/>
92-
<Route
93-
path="/grpc"
94-
element={<GRPCComposer {...props} />}
95-
/>
96-
<Route
97-
path="/websocket"
98-
element={<WebSocketComposer {...props} />}
99-
/>
100-
<Route
101-
path="/webrtc"
102-
element={<WebRTCComposer {...props} />}
103-
/>
104-
<Route
105-
path="/openapi"
106-
element={<OpenAPIComposer {...props} />}
107-
/>
108-
<Route
109-
path="/webhook"
110-
element={<WebhookComposer {...props} />}
111-
/>
112-
</Routes>
113-
<Divider orientation="horizontal"/>
114-
<ResponsePaneContainer />
115-
</Box>
82+
<Routes>
83+
<Route
84+
path="/"
85+
element={<Http2Composer {...props} />}
86+
/>
87+
<Route
88+
path="/graphql"
89+
element={<GraphQLComposer {...props} />}
90+
/>
91+
<Route
92+
path="/grpc"
93+
element={<GRPCComposer {...props} />}
94+
/>
95+
<Route
96+
path="/websocket"
97+
element={<WebSocketComposer {...props} />}
98+
/>
99+
<Route
100+
path="/webrtc"
101+
element={<WebRTCComposer {...props} />}
102+
/>
103+
<Route
104+
path="/openapi"
105+
element={<OpenAPIComposer {...props} />}
106+
/>
107+
<Route
108+
path="/webhook"
109+
element={<WebhookComposer {...props} />}
110+
/>
111+
</Routes>
112+
<Divider orientation="horizontal"/>
113+
<ResponsePaneContainer />
116114
</Box>
117115
)
118116
}

‎src/client/components-v2/main/http2-composer/BodyTypeSelect.tsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import React, { useState, useRef, useEffect } from 'react';
2+
import { connect } from 'react-redux';
3+
import * as actions from '../../../features/business/businessSlice'
4+
import PropTypes from 'prop-types';
5+
import { Box, Button, Select, MenuItem, FormControl, SelectChangeEvent } from '@mui/material';
6+
7+
// setNewRequestBody={setNewRequestBody}
8+
// newRequestBody={newRequestBody}
9+
// setNewRequestHeaders={setNewRequestHeaders}
10+
// newRequestHeaders={newRequestHeaders}
11+
12+
const mapStateToProps = (store) => {
13+
return {
14+
newRequestHeaders: store.business.newRequestHeaders,
15+
newRequestBody: store.business.newRequestBody,
16+
};
17+
};
18+
19+
const mapDispatchToProps = (dispatch) => ({
20+
setNewRequestHeaders: (requestHeadersObj) => {
21+
dispatch(actions.setNewRequestHeaders(requestHeadersObj));
22+
},
23+
setNewRequestBody: (requestBodyObj) => {
24+
dispatch(actions.setNewRequestBody(requestBodyObj));
25+
},
26+
});
27+
28+
function BodyTypeSelect({ newRequestHeaders, newRequestBody, setNewRequestHeaders, setNewRequestBody }) {
29+
30+
const handleBodyTypeSelect = (event: SelectChangeEvent) => {
31+
setNewRequestBody({
32+
...newRequestBody,
33+
bodyType: event.target.value,
34+
});
35+
}
36+
37+
const handleRawBodyTypeSelect = (event: SelectChangeEvent) => {
38+
setNewRequestBody({
39+
...newRequestBody,
40+
rawType: event.target.value,
41+
});
42+
}
43+
44+
const prettifyJSON = () => {
45+
const prettyString = JSON.stringify(
46+
JSON.parse(newRequestBody.bodyContent),
47+
null,
48+
4
49+
);
50+
setNewRequestBody({
51+
...newRequestBody,
52+
bodyContent: prettyString,
53+
});
54+
}
55+
56+
return(
57+
<Box
58+
sx={{
59+
display: 'flex',
60+
width: '50%',
61+
py: 1
62+
}}
63+
>
64+
<FormControl
65+
size="small"
66+
sx={{
67+
width: '50%',
68+
pr: 1
69+
}}
70+
>
71+
<Select
72+
id="body-type-select"
73+
value={newRequestBody.bodyType}
74+
onChange={handleBodyTypeSelect}
75+
>
76+
<MenuItem value="raw">raw</MenuItem>
77+
<MenuItem value="x-www-form-urlencoded">x-www-form-urlencoded</MenuItem>
78+
<MenuItem value="none">none</MenuItem>
79+
</Select>
80+
</FormControl>
81+
{ newRequestBody.bodyType === 'raw'
82+
&& <FormControl
83+
size="small"
84+
sx={{
85+
width: '50%',
86+
pr: 1
87+
}}
88+
>
89+
<Select
90+
id="raw-body-type-select"
91+
value={newRequestBody.rawType}
92+
onChange={handleRawBodyTypeSelect}
93+
>
94+
<MenuItem value="text/plain">text/plain</MenuItem>
95+
<MenuItem value="application/json">application/json</MenuItem>
96+
<MenuItem value="application/javascript">application/javascript</MenuItem>
97+
<MenuItem value="application/xml">application/xml</MenuItem>
98+
<MenuItem value="text/xml">text/xml</MenuItem>
99+
<MenuItem value="text/html">text/html</MenuItem>
100+
</Select>
101+
</FormControl>
102+
}
103+
{ newRequestBody.bodyType === 'raw'
104+
&& newRequestBody.rawType === 'application/json'
105+
&& (
106+
<Button
107+
sx={{
108+
pr: 1
109+
}}
110+
onClick={prettifyJSON}
111+
>
112+
Prettify
113+
</Button>
114+
)
115+
116+
}
117+
</Box>
118+
)
119+
}
120+
121+
export default connect(mapStateToProps, mapDispatchToProps)(BodyTypeSelect)

0 commit comments

Comments
 (0)