Skip to content

Commit 6b0f4ed

Browse files
MykolaGolubyevMykolaGolubyev
authored
open http response payload in fullscreen mode (#68)
1 parent bcc4f1b commit 6b0f4ed

File tree

10 files changed

+201
-22
lines changed

10 files changed

+201
-22
lines changed

‎webtau-reactjs/src/report/FullScreenPayload.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/*
2+
* Copyright 2018 TWO SIGMA OPEN SOURCE, LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
.full-screen-payload {
18+
background-color: #fff;
19+
padding: 20px;
20+
}
21+
22+
.full-screen-payload-url {
23+
font-size: 16px;
24+
margin-bottom: 10px;
25+
}
26+
27+
.full-screen-payload-url a,
28+
.full-screen-payload-url a:hover {
29+
text-decoration: none;
30+
color: #527d8f;
31+
}

‎webtau-reactjs/src/report/FullScreenPayload.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/*
2+
* Copyright 2018 TWO SIGMA OPEN SOURCE, LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import React from 'react'
18+
19+
import HttpPayload from './details/http/HttpPayload'
20+
import './FullScreenPayload.css'
21+
22+
export default function FullScreenPayload({report, payloadType, httpCallId}) {
23+
const httpCall = report.findHttpCallById(httpCallId)
24+
25+
const payload = payloadByType()
26+
return (
27+
<div className="full-screen-payload">
28+
<div className="full-screen-payload-url">
29+
<a href={httpCall.url}
30+
target="_blank"
31+
rel="noopener noreferrer">{httpCall.url}</a>
32+
</div>
33+
34+
{payload}
35+
</div>
36+
)
37+
38+
function payloadByType() {
39+
switch (payloadType) {
40+
case 'request':
41+
return (
42+
<HttpPayload caption="Request"
43+
type={httpCall.requestType}
44+
data={httpCall.requestBody}/>
45+
)
46+
case 'response':
47+
return (
48+
<HttpPayload caption="Response"
49+
type={httpCall.responseType}
50+
data={httpCall.responseBody}
51+
checks={httpCall.responseBodyChecks}/>
52+
)
53+
default:
54+
return <div>unsupported payload type: {payloadType}</div>
55+
}
56+
}
57+
}

‎webtau-reactjs/src/report/Report.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,8 @@ function lowerCaseIndexOf(text, part) {
171171
function enrichTestsData(tests) {
172172
return tests.map(test => ({
173173
...test,
174-
details: additionalDetails(test)
174+
details: additionalDetails(test),
175+
httpCalls: enrichHttpCallsData(test, test.httpCalls)
175176
}))
176177
}
177178

‎webtau-reactjs/src/report/WebTauReport.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ import NavigationEntriesType from './navigation/NavigationEntriesType'
3131
import HttpCallDetails from './details/http/HttpCallDetails'
3232
import StatusEnum from './StatusEnum'
3333

34+
import FullScreenPayload from './FullScreenPayload'
35+
3436
import './WebTauReport.css'
3537

3638
class WebTauReport extends Component {
@@ -43,6 +45,17 @@ class WebTauReport extends Component {
4345
}
4446

4547
render() {
48+
const {payloadType} = this.state
49+
50+
if (payloadType) {
51+
return this.renderPayload()
52+
} else {
53+
return this.renderReport()
54+
}
55+
56+
}
57+
58+
renderReport() {
4659
const {entriesType, statusFilter, filterText} = this.state
4760

4861
return (
@@ -78,6 +91,17 @@ class WebTauReport extends Component {
7891
)
7992
}
8093

94+
renderPayload() {
95+
const {report} = this.props
96+
const {payloadType, httpCallId} = this.state
97+
98+
return (
99+
<FullScreenPayload report={report}
100+
payloadType={payloadType}
101+
httpCallId={httpCallId}/>
102+
)
103+
}
104+
81105
renderListOEntries() {
82106
const {testId, httpCallId} = this.state
83107

‎webtau-reactjs/src/report/WebTauReportStateCreator.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ class WebTauReportStateCreator {
2929
statusFilter: '',
3030
filterText: '',
3131
entriesType: '',
32+
payloadType: '',
33+
httpCallId: '',
3234
[TestHttpCalls.stateName]: ''
3335
}
3436
}

‎webtau-reactjs/src/report/details/http/HttpCallDetails.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,9 @@ function Request({httpCall}) {
9595
<Card className="http-call-details-request-details">
9696
<HttpPayload caption="Request"
9797
type={httpCall.requestType}
98-
data={httpCall.requestBody}/>
98+
data={httpCall.requestBody}
99+
httpCallId={httpCall.id}
100+
payloadType='request'/>
99101
</Card>
100102
)
101103
}
@@ -110,7 +112,9 @@ function Response({httpCall}) {
110112
<HttpPayload caption="Response"
111113
type={httpCall.responseType}
112114
data={httpCall.responseBody}
113-
checks={httpCall.responseBodyChecks}/>
115+
checks={httpCall.responseBodyChecks}
116+
httpCallId={httpCall.id}
117+
payloadType='response'/>
114118
</Card>
115119
)
116120
}

‎webtau-reactjs/src/report/details/http/HttpPayload.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/*
2+
* Copyright 2018 TWO SIGMA OPEN SOURCE, LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
.http-payload > .caption-and-fullscreen {
18+
display: flex;
19+
align-items: center;
20+
height: 24px;
21+
}
22+
23+
.http-payload > .caption-and-fullscreen > .fullscreen-icon {
24+
margin-left: 15px;
25+
cursor: pointer;
26+
}
27+
28+
.http-payload > .caption-and-fullscreen > .fullscreen-icon a,
29+
.http-payload > .caption-and-fullscreen > .fullscreen-icon a:visited {
30+
text-decoration: none;
31+
color: #888;
32+
}
33+
34+
.http-payload > .caption-and-fullscreen > .caption {
35+
color: #888;
36+
text-transform: uppercase;
37+
}
38+
39+
.http-payload > .caption-and-fullscreen > .data {
40+
margin-left: 15px;
41+
margin-bottom: 20px;
42+
}
43+

‎webtau-reactjs/src/report/details/http/HttpPayload.js‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,23 +19,48 @@ import React from 'react'
1919
import TextPayload from './TextPayload'
2020
import JsonPayload from './JsonPayload'
2121

22+
import './HttpPayload.css'
23+
2224
function PayloadData({type, data, checks}) {
2325
return type.indexOf('json') !== -1 ?
2426
<JsonPayload json={JSON.parse(data)} checks={checks}/> :
2527
<TextPayload text={data}/>
2628
}
2729

28-
function HttpPayload({caption, type, data, checks}) {
29-
if (! data) {
30+
function HttpPayload({caption, type, data, checks, httpCallId, payloadType}) {
31+
if (!data) {
3032
return null
3133
}
3234

35+
const fullScreen = payloadType && (
36+
<div className="fullscreen-icon">
37+
<a href={"?httpCallId=" + httpCallId + "&payloadType=" + payloadType}
38+
target="_blank"
39+
rel="noopener noreferrer">
40+
<FullScreenIcon/>
41+
</a>
42+
</div>
43+
)
44+
3345
return (
34-
<div className="payload">
35-
<div className="caption">{caption}</div>
46+
<div className="http-payload">
47+
<div className="caption-and-fullscreen">
48+
<div className="caption">{caption}</div>
49+
{fullScreen}
50+
</div>
3651
<PayloadData type={type} data={data} checks={checks}/>
3752
</div>
3853
)
3954
}
4055

56+
function FullScreenIcon() {
57+
return (
58+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
59+
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
60+
className="feather feather-maximize">
61+
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
62+
</svg>
63+
)
64+
}
65+
4166
export default HttpPayload

‎webtau-reactjs/src/report/details/http/TestHttpCalls.css‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -63,21 +63,10 @@
6363
margin-right: 15px;
6464
}
6565

66-
.test-http-call .payload {
66+
.test-http-call .http-payload {
6767
margin-left: 10px;
6868
}
6969

70-
.test-http-call .payload .caption {
71-
color: #888;
72-
text-transform: uppercase;
73-
margin-top: 10px;
74-
}
75-
76-
.test-http-call .payload .data {
77-
margin-left: 15px;
78-
margin-bottom: 20px;
79-
}
80-
8170
.test-http-call.with-problem {
8271
background-color: rgba(239, 94, 99, 0.08);
8372
}
@@ -102,7 +91,6 @@
10291

10392
.http-table td {
10493
color: #555;
105-
line-height: 22px;
10694

10795
border-bottom: 1px solid #dce0e4;
10896
}

‎webtau-reactjs/src/report/details/http/TestHttpCalls.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,9 @@ function Request({httpCall}) {
147147
<div className="request">
148148
<HttpPayload caption="Request"
149149
type={httpCall.requestType}
150-
data={httpCall.requestBody}/>
150+
data={httpCall.requestBody}
151+
httpCallId={httpCall.id}
152+
payloadType='request'/>
151153
</div>
152154
)
153155
}
@@ -162,7 +164,9 @@ function Response({httpCall}) {
162164
<HttpPayload caption="Response"
163165
type={httpCall.responseType}
164166
data={httpCall.responseBody}
165-
checks={httpCall.responseBodyChecks}/>
167+
checks={httpCall.responseBodyChecks}
168+
httpCallId={httpCall.id}
169+
payloadType='response'/>
166170
</div>
167171
)
168172
}

0 commit comments

Comments
 (0)