Skip to content

Commit 93a5173

Browse files
committed
refactoring of request-panel to address multiple request-body
1 parent dc064f2 commit 93a5173

File tree

9 files changed

+1522
-459
lines changed

9 files changed

+1522
-459
lines changed

src/components/api-request-backup.js

Lines changed: 977 additions & 0 deletions
Large diffs are not rendered by default.

src/components/api-request.js

Lines changed: 421 additions & 414 deletions
Large diffs are not rendered by default.

src/rapidoc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -327,6 +327,7 @@ export default class RapiDoc extends LitElement {
327327
animation: spin 2s linear infinite;
328328
}
329329
.expanded-endpoint-body{ padding:24px 0px;}
330+
.expanded-endpoint-body.deprecated{ filter:opacity(0.6); }
330331
.divider { border-top:2px solid var(--primary-color); width:100%; }
331332
332333
@keyframes spin {

src/styles/endpoint-styles.js

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,13 @@ export default html`
5858
border-color:var(--yellow);
5959
background-color:var(--light-yellow);
6060
}
61+
62+
.m-endpoint > .endpoint-head.deprecated:hover,
63+
.m-endpoint > .endpoint-head.deprecated.expanded {
64+
border-color:var(--border-color);
65+
filter:opacity(0.6);
66+
}
67+
6168
.m-endpoint .endpoint-body {
6269
flex-wrap:wrap;
6370
padding:16px 0px 0 0px;
@@ -70,9 +77,14 @@ export default html`
7077
.m-endpoint .endpoint-body.put{ border-color:var(--orange); }
7178
.m-endpoint .endpoint-body.post{border-color:var(--green);}
7279
.m-endpoint .endpoint-body.get{ border-color:var(--blue); }
80+
.m-endpoint .endpoint-body.deprecated{
81+
border-color:var(--border-color);
82+
filter:opacity(0.6);
83+
}
7384
7485
.endpoint-head .deprecated{
75-
text-decoration: line-through red;
86+
color: var(--light-fg);
87+
filter:opacity(0.6);
7688
}
7789
7890
.summary{
@@ -103,7 +115,8 @@ export default html`
103115
.method.put{ border: 2px solid var(--orange); }
104116
.method.post{ border: 2px solid var(--green); }
105117
.method.get{ border: 2px solid var(--blue); }
106-
118+
.method.get.deprecated{ border: 2px solid var(--border-color); }
119+
107120
.req-resp-container{
108121
display: flex;
109122
margin-top:16px;

src/styles/flex-styles.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ export default html`
55
.row, .col{
66
display:flex;
77
}
8-
.row{
8+
.row {
99
align-items:center;
1010
flex-direction: row;
1111
}
12-
.col{
12+
.col {
1313
align-items:stretch;
1414
flex-direction: column;
1515
}

src/styles/input-styles.js

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,6 @@ import { html } from 'lit-element';
33
/* eslint-disable max-len */
44
export default html`
55
<style>
6-
.m-select, input, select, button {
7-
font-family: var(--font-regular);
8-
font-weight:400;
9-
color:var(--fg);
10-
}
116
/* Button */
127
.m-btn {
138
border-radius: var(--border-radius);
@@ -45,25 +40,31 @@ export default html`
4540
cursor:not-allowed;
4641
opacity:0.4;
4742
}
43+
input, textarea, select, button, pre {
44+
color:var(--fg);
45+
outline: none;
46+
background: var(--input-bg);
47+
border: 1px solid var(--border-color);
48+
border-radius: var(--border-radius);
49+
}
4850
4951
/* Form Inputs */
52+
pre,
5053
select,
5154
textarea,
5255
input[type="file"],
5356
input[type="text"],
5457
input[type="password"] {
55-
border-radius:var(--border-radius);
56-
border:1px solid var(--border-color);
57-
background:var(--input-bg);
58-
color:var(--fg);
58+
font-family: var(--font-mono);
59+
font-weight: 400;
60+
font-size: var(--font-size-small);
5961
transition: border .2s;
60-
outline: none;
61-
font-size:calc(var(--font-size-small) + 1px);
62-
padding:6px 5px;
62+
padding: 6px 5px;
6363
box-sizing: border-box;
6464
}
6565
6666
select {
67+
font-family: var(--font-regular);
6768
padding: 6px 35px 6px 5px;
6869
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20d%3D%22M10.3%203.3L6%207.6%201.7%203.3A1%201%200%2000.3%204.7l5%205a1%201%200%20001.4%200l5-5a1%201%200%2010-1.4-1.4z%22%20fill%3D%22%23777777%22%2F%3E%3C%2Fsvg%3E");
6970
background-position: calc(100% - 5px) center;
@@ -72,19 +73,10 @@ select {
7273
-webkit-appearance: none;
7374
-moz-appearance: none;
7475
appearance: none;
76+
cursor: pointer;
7577
}
76-
77-
textarea.mono,
78-
input[type="text"].mono,
79-
input[type="password"].mono{
80-
font-family: var(--font-mono);
81-
font-size:var(--font-size-mono);
82-
}
83-
84-
input[type="text"].large,
85-
input[type="password"].large {
86-
padding:10px 8px;
87-
font-size:(--font-size-mono);
78+
select:hover {
79+
border-color: var(--primary-color);
8880
}
8981
9082
textarea::placeholder,
@@ -94,6 +86,7 @@ input[type="password"]::placeholder {
9486
opacity:1;
9587
}
9688
89+
select:focus,
9790
textarea:focus,
9891
input[type="text"]:focus,
9992
input[type="password"]:focus,
@@ -103,11 +96,31 @@ input[type="password"]:active {
10396
border:1px solid var(--primary-color);
10497
}
10598
99+
input[type="file"]{
100+
font-family: var(--font-regular);
101+
padding:2px;
102+
cursor:pointer;
103+
border: 1px solid var(--primary-color);
104+
min-height: 30px;
105+
}
106+
input[type="file"]::-webkit-file-upload-button {
107+
font-family: var(--font-regular);
108+
font-size: var(--font-size-small);
109+
outline: none;
110+
cursor:pointer;
111+
padding: 3px 8px;
112+
border: 1px solid var(--primary-color);
113+
background-color: var(--primary-color);
114+
color: var(--primary-color-invert);
115+
border-radius: var(--border-radius);;
116+
-webkit-appearance: none;
117+
}
118+
106119
pre::-webkit-scrollbar-track,
107120
textarea::-webkit-scrollbar-track{
108121
background:var(--input-bg);
109122
}
110-
123+
111124
pre::-webkit-scrollbar,
112125
textarea::-webkit-scrollbar{
113126
width: 8px;
@@ -117,11 +130,11 @@ textarea::-webkit-scrollbar{
117130
118131
pre::-webkit-scrollbar-thumb,
119132
textarea::-webkit-scrollbar-thumb {
120-
border-radius:2px;
133+
border-radius: 2px;
121134
background-color: var(--primary-color)
122135
}
123136
124-
.link{
137+
.link {
125138
font-size:var(--font-size-small);
126139
text-decoration: underline;
127140
color:var(--blue);

src/templates/endpoint-template.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ function toggleExpand(path) {
2222

2323
function endpointHeadTemplate(path) {
2424
return html`
25-
<div @click="${(e) => { toggleExpand.call(this, path, e); }}" class='endpoint-head ${path.method} ${path.expanded ? 'expanded' : 'collapsed'}'>
26-
<div class="method ${path.method}"> ${path.method} </div>
25+
<div @click="${(e) => { toggleExpand.call(this, path, e); }}" class='endpoint-head ${path.method} ${path.deprecated ? 'deprecated' : ''} ${path.expanded ? 'expanded' : 'collapsed'}'>
26+
<div class="method ${path.method} ${path.deprecated ? 'deprecated' : ''}"> ${path.method} </div>
2727
<div class="path ${path.deprecated ? 'deprecated' : ''}">
2828
${path.path}
2929
</div>
@@ -50,7 +50,7 @@ function endpointBodyTemplate(path) {
5050
accept = accept.replace(/,\s*$/, ''); // remove trailing comma
5151
const nonEmptyApiKeys = this.resolvedSpec.securitySchemes.filter((v) => (v.finalKeyValue)) || [];
5252
return html`
53-
<div class='endpoint-body ${path.method}'>
53+
<div class='endpoint-body ${path.method} ${path.deprecated ? 'deprecated' : ''}'>
5454
<div class="summary">
5555
${path.summary && path.summary !== path.description ? html`<div class="title">${path.summary}</div>` : ''}
5656
${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}

src/templates/expanded-endpoint-template.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ function endpointBodyTemplate(path) {
6969
const nonEmptyApiKeys = this.resolvedSpec.securitySchemes.filter((v) => (v.finalKeyValue)) || [];
7070
return html`
7171
<div class='divider'></div>
72-
<div class='expanded-endpoint-body observe-me ${path.method}' id='${path.method}-${path.path.replace(/[\s#:?&=]/g, '-')}' >
72+
<div class='expanded-endpoint-body observe-me ${path.method} ${path.deprecated ? 'deprecated' : ''} ' id='${path.method}-${path.path.replace(/[\s#:?&=]/g, '-')}' >
7373
7474
${path.deprecated ? html`<div class="bold-text red-text" > DEPRECATED </div>` : ''}
7575
${html`

src/utils/common-utils.js

Lines changed: 62 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,48 @@ export function getSampleValueByType(schemaObj) {
169169
}
170170
}
171171

172+
/*
173+
{
174+
'prop1' : 'one',
175+
'prop2' : 'two',
176+
'prop3' : [ 'a', 'b', 'c' ],
177+
'prop4' : {
178+
'ob1' : 'val-1',
179+
'ob2' : 'val-2'
180+
}
181+
}
182+
<root>
183+
<prop1>simple</prop1>
184+
<prop2>
185+
<0> a </0>
186+
<1> b </1>
187+
<2> c </2>
188+
</prop2>
189+
<prop3>
190+
<ob1>val-1</ob1>
191+
<ob2>val-2</ob2>
192+
</prop3>
193+
</root>
194+
*/
195+
196+
export function json2xml(obj, level = 1) {
197+
const indent = ' '.repeat(level);
198+
let xmlText = '';
199+
if (level === 1 && typeof obj !== 'object') {
200+
return `\n${indent}${obj.toString()}`;
201+
}
202+
for (const prop in obj) {
203+
if (Array.isArray(obj[prop])) {
204+
xmlText = `${xmlText}\n${indent}<${prop}> ${json2xml(obj[prop], level + 1)}\n${indent}</${prop}>`;
205+
} else if (typeof obj[prop] === 'object') {
206+
xmlText = `${xmlText}\n${indent}<${prop}> ${json2xml(obj[prop], level + 1)}\n${indent}</${prop}>`;
207+
} else {
208+
xmlText = `${xmlText}\n${indent}<${prop}> ${obj[prop].toString()} </${prop}>`;
209+
}
210+
}
211+
return xmlText;
212+
}
213+
172214
/* For changing JSON-Schema to a Sample Object, as per the schema (to generate examples based on schema) */
173215
export function schemaToSampleObj(schema, config = { }) {
174216
let obj = {};
@@ -364,6 +406,8 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
364406
/* Create Example object */
365407
export function generateExample(examples, example, schema, mimeType, includeReadOnly = true, outputType) {
366408
const finalExamples = [];
409+
410+
// First check if examples is provided
367411
if (examples) {
368412
for (const eg in examples) {
369413
let egContent = '';
@@ -420,7 +464,7 @@ export function generateExample(examples, example, schema, mimeType, includeRead
420464
egFormat = 'text';
421465
}
422466
finalExamples.push({
423-
exampleId: '_default',
467+
exampleId: 'Example',
424468
exampleSummary: '',
425469
exampleDescription: '',
426470
exampleType: mimeType,
@@ -433,14 +477,14 @@ export function generateExample(examples, example, schema, mimeType, includeRead
433477
if (schema) {
434478
if (schema.example) { // Note: schema.examples (plurals) is not allowed as per spec
435479
finalExamples.push({
436-
exampleId: '_default',
480+
exampleId: 'Example',
437481
exampleSummary: '',
438482
exampleDescription: '',
439483
exampleType: mimeType,
440484
exampleValue: schema.example,
441485
exampleFormat: 'text',
442486
});
443-
} else if (mimeType.toLowerCase().includes('json') || mimeType.toLowerCase().includes('*/*')) {
487+
} else if (mimeType.toLowerCase().includes('json') || mimeType.toLowerCase().includes('text') || mimeType.toLowerCase().includes('*/*')) {
444488
const egJson = schemaToSampleObj(
445489
schema,
446490
{
@@ -451,26 +495,35 @@ export function generateExample(examples, example, schema, mimeType, includeRead
451495
);
452496

453497
finalExamples.push({
454-
exampleId: '_default',
498+
exampleId: 'Example',
455499
exampleSummary: '',
456500
exampleDescription: '',
457501
exampleType: mimeType,
458502
exampleFormat: outputType,
459503
exampleValue: outputType === 'text' ? JSON.stringify(egJson, null, 2) : egJson,
460504
});
461505
} else if (mimeType.toLowerCase().includes('xml')) {
462-
// TODO: in case the mimeType is XML then generate an XML example
506+
const xmlRootStart = (schema.xml && schema.xml.name) ? `<${schema.xml.name}>` : '<root>';
507+
const xmlRootEnd = (schema.xml && schema.xml.name) ? `</${schema.xml.name}>` : '</root>';
508+
const egJson = schemaToSampleObj(
509+
schema,
510+
{
511+
includeReadOnly,
512+
includeWriteOnly: true,
513+
deprecated: true,
514+
},
515+
);
463516
finalExamples.push({
464-
exampleId: '_default',
517+
exampleId: 'Example',
465518
exampleSummary: '',
466519
exampleDescription: '',
467520
exampleType: mimeType,
468-
exampleValue: '',
521+
exampleValue: `${xmlRootStart}${json2xml(egJson)}\n${xmlRootEnd}`,
469522
exampleFormat: 'text',
470523
});
471524
} else {
472525
finalExamples.push({
473-
exampleId: '_default',
526+
exampleId: 'Example',
474527
exampleSummary: '',
475528
exampleDescription: '',
476529
exampleType: mimeType,
@@ -481,7 +534,7 @@ export function generateExample(examples, example, schema, mimeType, includeRead
481534
} else {
482535
// No Example or Schema provided (should never reach here)
483536
finalExamples.push({
484-
exampleId: '_default',
537+
exampleId: 'Example',
485538
exampleSummary: '',
486539
exampleDescription: '',
487540
exampleType: mimeType,
@@ -493,7 +546,6 @@ export function generateExample(examples, example, schema, mimeType, includeRead
493546
return finalExamples;
494547
}
495548

496-
497549
export function getBaseUrlFromUrl(url) {
498550
const pathArray = url.split('/');
499551
return `${pathArray[0]}//${pathArray[2]}`;

0 commit comments

Comments
 (0)