Skip to content

Commit 419194c

Browse files
danst3indanst3in
authored
Merge pull request #45 from oslabs-beta/Nancy-ReqResDisplay
Nancy req res display update default http body view from "none" to "raw"
2 parents e8ac9a8 + 49dceb4 commit 419194c

21 files changed

+243
-196
lines changed

‎__tests__/businessReducer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ describe('Business reducer', () => {
4242
newRequestBody: {
4343
bodyContent: '',
4444
bodyVariables: '',
45-
bodyType: 'none',
45+
bodyType: 'raw',
4646
rawType: 'Text (text/plain)',
4747
JSONFormatted: true,
4848
},

‎__tests__/composerTests.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ describe('GraphQL Composer', () => {
7777
},
7878
newRequestBody: {
7979
bodyContent: '',
80-
bodyType: 'none',
80+
bodyType: 'raw',
8181
rawType: 'Text (text/plain)',
8282
JSONFormatted: true,
8383
bodyVariables: ''

‎src/assets/style/sidebar.scss‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -171,9 +171,7 @@
171171
padding: 0px auto;
172172
text-align-last: center;
173173
width: 200px;
174-
&:focus {
175-
outline: 0 none;
176-
}
174+
outline: 0 none;
177175
&.http {
178176
background: $bluetwo;
179177
&:hover {
@@ -348,6 +346,11 @@
348346
text-align-last: center;
349347
width: 100%;
350348
outline: none;
349+
&:hover {
350+
color: $medbluegray;
351+
background: $huntergreen;
352+
border: 2px solid $litebluegray;
353+
}
351354
}
352355
.composer_textarea {
353356
background-color: $liteblack;

‎src/client/components/composer/NewRequest/BodyEntryForm.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,6 @@ class BodyEntryForm extends Component {
6666
})()
6767

6868
const arrowClass = this.state.show ? 'composer_subtitle_arrow-open' : 'composer_subtitle_arrow-closed';
69-
7069
const bodyContainerClass = this.state.show ? 'composer_bodyform_container-open' : 'composer_bodyform_container-closed';
7170

7271
return (

‎src/client/components/composer/NewRequest/BodyTypeSelect.jsx‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -18,33 +18,29 @@ class BodyTypeSelect extends Component {
1818
}
1919

2020
render() {
21-
let NoneStyleClasses = classNames({
21+
let RawStyleClasses = classNames({
2222
'composer_bodytype_button': true,
23-
'composer_bodytype_button-selected': this.props.newRequestBody.bodyType === 'none'
23+
'composer_bodytype_button-selected': this.props.newRequestBody.bodyType === 'raw'
2424
});
2525
let XWWWFormUrlEncodedStyleClasses = classNames({
2626
'composer_bodytype_button': true,
2727
'composer_bodytype_button-selected': this.props.newRequestBody.bodyType === 'x-www-form-urlencoded'
2828
});
29-
let RawStyleClasses = classNames({
29+
let NoneStyleClasses = classNames({
3030
'composer_bodytype_button': true,
31-
'composer_bodytype_button-selected': this.props.newRequestBody.bodyType === 'raw'
31+
'composer_bodytype_button-selected': this.props.newRequestBody.bodyType === 'none'
3232
});
3333

3434
return (
3535
<div className={"composer_protocol_container httpbody"} style={{ 'marginTop': '4px' }}>
36-
<div
37-
style={{ 'width': '17%' }}
38-
className={NoneStyleClasses}
39-
onMouseDown={() => {
40-
this.props.setNewRequestBody({
41-
...this.props.newRequestBody,
42-
bodyType: 'none',
43-
bodyContent: ''
44-
})
45-
this.removeContentTypeHeader()
46-
}}>
47-
none
36+
<div
37+
style={{ 'width': '14%' }}
38+
className={RawStyleClasses}
39+
onMouseDown={() => this.props.setNewRequestBody({
40+
...this.props.newRequestBody,
41+
bodyType: 'raw'
42+
})}>
43+
Raw
4844
</div>
4945
<div
5046
style={{ 'width': '65%' }}
@@ -56,13 +52,17 @@ class BodyTypeSelect extends Component {
5652
x-www-form-urlencoded
5753
</div>
5854
<div
59-
style={{ 'width': '14%' }}
60-
className={RawStyleClasses}
61-
onMouseDown={() => this.props.setNewRequestBody({
62-
...this.props.newRequestBody,
63-
bodyType: 'raw'
64-
})}>
65-
raw
55+
style={{ 'width': '17%' }}
56+
className={NoneStyleClasses}
57+
onMouseDown={() => {
58+
this.props.setNewRequestBody({
59+
...this.props.newRequestBody,
60+
bodyType: 'none',
61+
bodyContent: ''
62+
})
63+
this.removeContentTypeHeader()
64+
}}>
65+
None
6666
</div>
6767
</div>
6868
);

‎src/client/components/composer/NewRequest/ComposerNewRequest.jsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -195,11 +195,9 @@ class ComposerNewRequest extends Component {
195195
request: {
196196
method: grpcStream,
197197
headers: this.props.newRequestHeaders.headersArr.filter(header => header.active && !!header.key),
198-
// streams: this.props.newRequestStreams.streamsArr.filter(stream => stream),
199198
body: streamQueries,
200199
bodyType: this.props.newRequestBody.bodyType,
201200
rawType: this.props.newRequestBody.rawType,
202-
protoContent: this.props.newRequestBody.protoContent
203201
},
204202
response: {
205203
cookies: [],
@@ -213,12 +211,14 @@ class ComposerNewRequest extends Component {
213211
service: this.props.newRequestStreams.selectedService,
214212
rpc: this.props.newRequestStreams.selectedRequest,
215213
packageName: this.props.newRequestStreams.selectedPackage,
214+
streamingType: this.props.newRequestStreams.streamingType,
216215
queryArr: queryArr,
217216
initialQuery: this.props.newRequestStreams.initialQuery,
218217
streamsArr: this.props.newRequestStreams.streamsArr,
219218
streamContent: this.props.newRequestStreams.streamContent,
220219
servicesObj: this.props.newRequestStreams.services,
221-
protoPath: this.props.newRequestStreams.protoPath
220+
protoPath: this.props.newRequestStreams.protoPath,
221+
protoContent: this.props.newRequestStreams.protoContent
222222
};
223223
}
224224
// WEBSOCKET REQUESTS
@@ -245,6 +245,7 @@ class ComposerNewRequest extends Component {
245245
};
246246
}
247247

248+
// add request to history
248249
historyController.addHistoryToIndexedDb(reqRes);
249250
this.props.reqResAdd(reqRes);
250251

@@ -273,7 +274,7 @@ class ComposerNewRequest extends Component {
273274
...this.newRequestBody,
274275
bodyContent: '',
275276
bodyVariables: '',
276-
bodyType: 'none',
277+
bodyType: 'raw',
277278
rawType: 'Text (text/plain)',
278279
JSONFormatted: true,
279280
});
@@ -394,8 +395,6 @@ class ComposerNewRequest extends Component {
394395
{
395396
this.props.newRequestFields.gRPC &&
396397
<GRPCProtoEntryForm
397-
newRequestBody={this.props.newRequestBody}
398-
setNewRequestBody={this.props.setNewRequestBody}
399398
newRequestStreams={this.props.newRequestStreams}
400399
setNewRequestStreams={this.props.setNewRequestStreams}
401400
/>

‎src/client/components/composer/NewRequest/FieldEntryForm.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ class FieldEntryForm extends Component {
114114
if (!this.props.newRequestFields.graphQL && !this.props.newRequestFields.gRPC) { //if one of 5 http methods (get, post, put, patch, delete)
115115
this.props.setNewRequestBody({
116116
...this.props.newRequestBody,
117-
bodyType: 'none',
117+
bodyType: 'raw',
118118
bodyContent: '',
119119
});
120120
}

‎src/client/components/composer/NewRequest/GRPCAutoInputForm.jsx‎

Lines changed: 27 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,14 @@ class GRPCAutoInputForm extends Component {
1313
this.setService = this.setService.bind(this);
1414
this.setRequest = this.setRequest.bind(this);
1515
}
16+
1617
// event handler on the arrow button that allows you to open/close the section
1718
toggleShow() {
1819
this.setState({
1920
show: !this.state.show
2021
});
2122
}
23+
2224
// event handler for changes made to the Select Services dropdown list
2325
setService() {
2426
// grabs the name of the current selected option from the select services dropdown to be saved in the state of the store
@@ -28,34 +30,23 @@ class GRPCAutoInputForm extends Component {
2830
document.getElementById('stream').innerText = 'STREAM';
2931
// grabs the request dropdown list and resets it to the first option "Select Request"
3032
document.getElementById('dropdownRequest').selectedIndex = 0;
31-
// clear query body
32-
while (this.props.newRequestStreams.streamsArr.length > 1) {
33-
this.props.newRequestStreams.streamsArr.pop();
34-
this.props.newRequestStreams.streamContent.pop();
35-
this.props.newRequestStreams.count -= 1;
36-
}
37-
this.props.newRequestStreams.streamContent[0] = '';
33+
// clears all stream query bodies except the first one
34+
this.props.clearStreamBodies();
3835
// the selected service name is saved in state of the store, mostly everything else is reset
3936
this.props.setNewRequestStreams({
4037
...this.props.newRequestStreams,
41-
// count: 0,
42-
// streamsArr: this.props.newRequestStreams.streamsArr,
43-
// streamContent: this.props.newRequestStreams.streamContent,
44-
// selectedPackage: null,
45-
// selectedRequest: null,
46-
// selectedStreamingType: null,
47-
// initialQuery: null,
48-
// queryArr: null,
4938
selectedService: serviceName
5039
});
51-
5240
}
41+
5342
// event handler for changes made to the Select Request dropdown list
5443
setRequest() {
44+
const streamsArr = this.props.newRequestStreams.streamsArr;
45+
const streamContent = this.props.newRequestStreams.streamContent;
5546
// clears all stream bodies except the first when switching from client/directional stream to something else
56-
while (this.props.newRequestStreams.streamsArr.length > 1) {
57-
this.props.newRequestStreams.streamsArr.pop();
58-
this.props.newRequestStreams.streamContent.pop()
47+
while (streamsArr.length > 1) {
48+
streamsArr.pop();
49+
streamContent.pop()
5950
this.props.newRequestStreams.count -= 1;
6051
}
6152
// update state in the store
@@ -64,8 +55,8 @@ class GRPCAutoInputForm extends Component {
6455
selectedPackage: null,
6556
selectedRequest: null,
6657
selectedStreamingType: null,
67-
streamContent: this.props.newRequestStreams.streamContent,
68-
streamsArr: this.props.newRequestStreams.streamsArr
58+
streamContent: streamContent,
59+
streamsArr: streamsArr
6960
});
7061
// grabs the name of the current selected option from the select request dropdown to be saved in the state of the store
7162
const dropdownRequest = document.getElementById('dropdownRequest');
@@ -110,8 +101,7 @@ class GRPCAutoInputForm extends Component {
110101
...this.state
111102
}, () => {
112103
let req;
113-
let results = [];
114-
let query = '';
104+
let results = {};
115105
/*
116106
for each service obj in the services array, if its name matches the current selected service option then:
117107
- iterate through the rpcs and if its name matches the current selected request then save the name of req/rpc
@@ -126,72 +116,44 @@ class GRPCAutoInputForm extends Component {
126116
}
127117
}
128118
for (const message of service.messages) {
129-
// console.log('message: ', message);
130119
if (message.name === req ) {
131120
for (const key in message.def) {
132121
// if message type is a nested message (message.def.nested === true)
133-
// message.def = key: {dependent: dependent.message.def}
134-
// console.log('message.def.nested: ', message.def[key].nested);
135-
// console.log('key: ', key);
136122
if (message.def[key].nested) {
137123
for (const submess of service.messages) {
138-
// console.log('submess: ', submess);
139-
// console.log('submess.name: ', submess.name);
140-
// console.log('message.def[key].dependent: ', message.def[key].dependent);
141124
if (submess.name === message.def[key].dependent ) {
142125
// define obj for the submessage definition
143-
let tempObj = {};
126+
let subObj = {};
144127
for (const subKey in submess.def) {
145-
tempObj[subKey] = submess.def[subKey].type.slice(5).toLowerCase()
128+
subObj[subKey] = submess.def[subKey].type.slice(5).toLowerCase()
146129
}
147-
// console.log('tempObj: ', tempObj);
148-
results.push(`"${key}":${JSON.stringify(tempObj)}`)
130+
results[key] = subObj
149131
break;
150132
}
151-
// break;
152-
}//after
153-
} else {
154-
// console.log('message.def: ', message.def);
155-
results.push(`"${key}": "${message.def[key].type.slice(5).toLowerCase()}"`)
133+
}
134+
} else {
135+
results[key] = message.def[key].type.slice(5).toLowerCase()
136+
}
156137
}
138+
break;
157139
}
158-
break;
159-
}
160-
}
161-
}
162-
}
163-
164-
const streamsArr = this.props.newRequestStreams.streamsArr;
165-
const streamContent = this.props.newRequestStreams.streamContent;
166-
// query for messages with single key:value pair
167-
if (results.length === 1) {
168-
query = results[0];
169-
}
170-
// query for messages with multiple key:value pairs
171-
else {
172-
for (let i = 0; i < results.length; i++) {
173-
query = `${query},
174-
${results[i]}`
140+
}
175141
}
176-
query = query.slice(1).trim();
177142
}
178-
// set query in streamsArr
143+
// push JSON formatted query in streamContent arr
144+
const queryJSON = JSON.stringify(results, null, 4)
179145
if (streamsArr[0] !== '') {
180-
streamsArr[0].query = `{
181-
${query}
182-
}`;
146+
streamsArr[0].query = queryJSON
183147
}
184148
// remove initial empty string then push new query to stream content arr
185149
streamContent.pop();
186-
streamContent.push(`{
187-
${query}
188-
}`);
150+
streamContent.push(queryJSON);
189151
// set state in the store with updated content
190152
this.props.setNewRequestStreams({
191153
...this.props.newRequestStreams,
192154
streamsArr: streamsArr,
193155
streamContent: streamContent,
194-
initialQuery: query
156+
initialQuery: queryJSON
195157
});
196158
});
197159
// update button display for streaming type listed next to url

‎src/client/components/composer/NewRequest/GRPCBodyEntryForm.jsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,10 @@ class GRPCBodyEntryForm extends Component {
4747
// construct new stream body obj & push into the streamsArr
4848
const newStream = {};
4949
newStream.id = this.props.newRequestStreams.count;
50-
newStream.query = `{
51-
${firstBodyQuery}
52-
}`;
50+
newStream.query = firstBodyQuery
5351
streamsArr.push(newStream)
5452
// push query of initial stream body into streamContent array
55-
streamContent.push(`{
56-
${firstBodyQuery}
57-
}`);
53+
streamContent.push(firstBodyQuery);
5854
// update mew state in the store
5955
this.props.setNewRequestStreams({
6056
...this.props.newRequestStreams,

‎src/client/components/composer/NewRequest/GRPCBodyStream.jsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,10 +77,8 @@ class GRPCBodyStream extends Component {
7777
</button>
7878
)
7979
}
80-
/*
81-
pseudocode for the return section
82-
- renders the stream body (and the stream number if for client or bidirectional stream)
83-
*/
80+
// pseudocode for the return section:
81+
// renders the stream body (and the stream number if for client or bidirectional stream)
8482
return (
8583
<div style={{ display: 'flex' }}>
8684
<div>

0 commit comments

Comments
 (0)