Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix/w-13832170/cookies-request #36

Merged
merged 3 commits into from
Sep 13, 2023
Merged

Fix/w-13832170/cookies-request #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
41e0730
chore: Cookie Authentication value is not sent in Cookie header
leandrogilcarrano Sep 13, 2023
071d489
chore: Cookie Authentication value is not sent in Cookie header
leandrogilcarrano Sep 13, 2023
c735360
rerun
leandrogilcarrano Sep 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
256 changes: 140 additions & 116 deletions demo/api-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ class ComponentDemo extends ApiDemoPage {
'urlLabel',
'renderCustomServer',
'allowCustomBaseUri',
'noServerSelector',
'noServerSelector'
]);
this.componentName = 'api-request-editor';
this.allowCustom = false;
Expand Down Expand Up @@ -83,10 +83,15 @@ class ComponentDemo extends ApiDemoPage {
['api-keys', 'API key'],
['oauth-flows', 'OAS OAuth Flow'],
['oas-bearer', 'OAS Bearer'],
].map(([file, label]) => html`
<anypoint-item data-src="${file}-compact.json">${label} - compact model</anypoint-item>
<anypoint-item data-src="${file}.json">${label}</anypoint-item>
`);
['cookies', 'Cookies']
].map(
([file, label]) => html`
<anypoint-item data-src="${file}-compact.json"
>${label} - compact model</anypoint-item
>
<anypoint-item data-src="${file}.json">${label}</anypoint-item>
`
);
}

_responseReady(e) {
Expand Down Expand Up @@ -120,23 +125,20 @@ class ComponentDemo extends ApiDemoPage {
responseBody,
urlLabel,
noServerSelector,
allowCustomBaseUri,
allowCustomBaseUri
} = this;
return html `
<section class="documentation-section">
return html` <section class="documentation-section">
<h3>Interactive demo</h3>
<p>
This demo lets you preview the API Request Editor element with various
configuration options.
</p>


<arc-interactive-demo
.states="${demoStates}"
@state-changed="${this._demoStateHandler}"
?dark="${darkThemeActive}"
>

<div slot="content">
<api-request-editor
.amf="${amf}"
Expand All @@ -157,12 +159,16 @@ class ComponentDemo extends ApiDemoPage {
>
${this._addCustomServers()}
</api-request-editor>
${responseBody ? html`<h3>Latest response</h3>
<output class="response-output" tabindex="0">${responseBody}</output>` : ''}
${responseBody
? html`<h3>Latest response</h3>
<output class="response-output" tabindex="0"
>${responseBody}</output
>`
: ''}
</div>

<label slot="options" id="mainOptionsLabel">Options</label>

<anypoint-checkbox
aria-describedby="mainOptionsLabel"
slot="options"
Expand Down Expand Up @@ -245,26 +251,30 @@ class ComponentDemo extends ApiDemoPage {
return '';
}
const { compatibility } = this;
return html`
<div class="other-section" slot="custom-base-uri">Other options</div>
<anypoint-item
slot="custom-base-uri"
value="http://mocking.com"
?compatibility="${compatibility}"
>Mocking service</anypoint-item>
<anypoint-item
slot="custom-base-uri"
value="http://customServer.com2"
?compatibility="${compatibility}"
>Custom instance</anypoint-item>`;
return html` <div class="other-section" slot="custom-base-uri">
Other options
</div>
<anypoint-item
slot="custom-base-uri"
value="http://mocking.com"
?compatibility="${compatibility}"
>Mocking service</anypoint-item
>
<anypoint-item
slot="custom-base-uri"
value="http://customServer.com2"
?compatibility="${compatibility}"
>Custom instance</anypoint-item
>`;
}

_introductionTemplate() {
return html `
return html`
<section class="documentation-section">
<h3>Introduction</h3>
<p>
A web component to render accessible request data editor based on AMF model.
A web component to render accessible request data editor based on AMF
model.
</p>
<p>
This component implements Material Design styles.
Expand All @@ -274,111 +284,125 @@ class ComponentDemo extends ApiDemoPage {
}

_usageTemplate() {
return html `
<section class="documentation-section">
<h2>Usage</h2>
<p>API request editor comes with 3 predefied styles:</p>
<ul>
<li><b>Filled</b> (default)</li>
<li><b>Outlined</b> - Material desing outlined inputs, use <code>outlined</code> property</li>
<li>
<b>Compatibility</b> - To provide compatibility with Anypoint design, use
<code>compatibility</code> property
</li>
</ul>
return html` <section class="documentation-section">
<h2>Usage</h2>
<p>API request editor comes with 3 predefied styles:</p>
<ul>
<li><b>Filled</b> (default)</li>
<li>
<b>Outlined</b> - Material desing outlined inputs, use
<code>outlined</code> property
</li>
<li>
<b>Compatibility</b> - To provide compatibility with Anypoint design,
use <code>compatibility</code> property
</li>
</ul>

<h3>Handling request event</h3>
<p>
The element do not perform a request. It dispatches <code>api-request</code> custom event with
request object on the detail property of the event. The hosting application should handle this event
and perform the request. When the response is ready the application should dispatch <code>api-response</code>
property with the same <code>id</code> value from the request object. The element clears its state when
the event is handled.
</p>
<h3>Handling request event</h3>
<p>
The element do not perform a request. It dispatches
<code>api-request</code> custom event with request object on the detail
property of the event. The hosting application should handle this event
and perform the request. When the response is ready the application
should dispatch <code>api-response</code> property with the same
<code>id</code> value from the request object. The element clears its
state when the event is handled.
</p>

<h3>AMF model selection</h3>
<p>
The element handles selected shape computation after <code>selected</code> property is set.
The property should be set to AMF supportedOperation node's <code>@id</code> value.
</p>
<p>
Use
<a href="https://github.com/advanced-rest-client/api-navigation">
api-navigation
</a>
element to provide the user with accessible navigation through the AMF model.
</p>
<h3>AMF model selection</h3>
<p>
The element handles selected shape computation after
<code>selected</code> property is set. The property should be set to AMF
supportedOperation node's <code>@id</code> value.
</p>
<p>
Use
<a href="https://github.com/advanced-rest-client/api-navigation">
api-navigation
</a>
element to provide the user with accessible navigation through the AMF
model.
</p>

<h3>Override base URI</h3>
<p>
Sometimes you may need to override APIs base URI. The element provides <code>baseUri</code>
property that can be set to replace API's base URI to some other value.
</p>
<h3>Override base URI</h3>
<p>
Sometimes you may need to override APIs base URI. The element provides
<code>baseUri</code>
property that can be set to replace API's base URI to some other value.
</p>

<h3>Allowing custom properties</h3>
<p>
By default the editor only renders form controls to the ones defined in the API spec file.
When model for URI/query parameters, headers, or body is not present then the corresponding editor
is not rendered. Also, when the editors are rendered there's no option for the user
to defined a parameter that is not defined in the API specification.
</p>
<h3>Allowing custom properties</h3>
<p>
By default the editor only renders form controls to the ones defined in
the API spec file. When model for URI/query parameters, headers, or body
is not present then the corresponding editor is not rendered. Also, when
the editors are rendered there's no option for the user to defined a
parameter that is not defined in the API specification.
</p>

<p>
To allow the user to add custom properties in the editors use <code>allowCustom</code>
property. It will force query parameters editor to appear when hidden and the editors
renders "add" button in their forms.
</p>
<p>
To allow the user to add custom properties in the editors use
<code>allowCustom</code>
property. It will force query parameters editor to appear when hidden
and the editors renders "add" button in their forms.
</p>

<h3>Partial model support</h3>
<p>
Partial model is generated by the AMF service (by MuleSoft) to reduce data transfer size
and to reach the performance budget when initializing applications like API Console.<br/>
Partial model contains data that are only required to generate view for current API selection.
</p>
<h3>Partial model support</h3>
<p>
Partial model is generated by the AMF service (by MuleSoft) to reduce
data transfer size and to reach the performance budget when initializing
applications like API Console.<br />
Partial model contains data that are only required to generate view for
current API selection.
</p>

<p>
The element renders the model that is given to it. However, partial model may be missing
information about server, protocols, and API version which are required to properly
compute URL value.
</p>
<p>
The element renders the model that is given to it. However, partial
model may be missing information about server, protocols, and API
version which are required to properly compute URL value.
</p>

<p>
Note, this can be ignored when setting <code>baseUri</code> as this overrides any API
model value.
</p>
<p>
Note, this can be ignored when setting <code>baseUri</code> as this
overrides any API model value.
</p>

<p>
Pass corresponding model values to <code>server</code>, <code>protocols</code>, and <code>version</code>
properties when expecting partial AMF model.
</p>
<p>
Pass corresponding model values to <code>server</code>,
<code>protocols</code>, and <code>version</code>
properties when expecting partial AMF model.
</p>

<h3>OAuth 2</h3>
<p>
You need to set <code>redirectUri</code> property to a OAuth 2 redirect popup location.
Otherwise authorization won't be initialized.
</p>
<h3>OAuth 2</h3>
<p>
You need to set <code>redirectUri</code> property to a OAuth 2 redirect
popup location. Otherwise authorization won't be initialized.
</p>

<h3>Validation</h3>
<p>
The element sets <code>invalid</code> attribute when the editor contains invalid data.
You can use it to style the element for invalid input.
</p>
<h3>Validation</h3>
<p>
The element sets <code>invalid</code> attribute when the editor contains
invalid data. You can use it to style the element for invalid input.
</p>

<p>
* When all forms are reported valid but OAuth 2 has no access token value the element
still reports it as valid. When the user try to press the send button it will try to
force authorization on currently selected authorization panel before making the request.
</p>
</section>`;
<p>
* When all forms are reported valid but OAuth 2 has no access token
value the element still reports it as valid. When the user try to press
the send button it will try to force authorization on currently selected
authorization panel before making the request.
</p>
</section>`;
}

contentTemplate() {
return html`
<xhr-simple-request @api-response="${this._responseReady}"></xhr-simple-request>
<h2 class="centered main">API request editor</h2>
${this._demoTemplate()}
${this._introductionTemplate()}
${this._usageTemplate()}
<xhr-simple-request
@api-response="${this._responseReady}"
></xhr-simple-request>
<h2 class="centered main">API request editor</h2>
${this._demoTemplate()} ${this._introductionTemplate()}
${this._usageTemplate()}
`;
}
}
Expand Down
9 changes: 5 additions & 4 deletions demo/api-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ class ComponentDemo extends ApiDemoPage {
'allowCustomBaseUri',
'noServerSelector',
'urlLabel',
'selectedServerValue',
'selectedServerValue'
]);
this.componentName = 'api-request-panel';
this.allowCustom = false;
Expand Down Expand Up @@ -73,6 +73,7 @@ class ComponentDemo extends ApiDemoPage {

_apiListTemplate() {
return [
['cookies', 'Cookies'],
['google-drive-api', 'Google Drive'],
['httpbin', 'httpbin.org'],
['demo-api', 'Demo API'],
Expand All @@ -84,7 +85,7 @@ class ComponentDemo extends ApiDemoPage {
['SE-12224', 'Scope is not an array issues (SE-12224)'],
['APIC-168', 'Custom scheme support (APIC-168)'],
['async-api', 'AsyncAPI'],
['payload-vulnerability', 'payload-vulnerability'],
['payload-vulnerability', 'payload-vulnerability']
].map(
([file, label]) => html`
<anypoint-item data-src="${file}-compact.json"
Expand Down Expand Up @@ -138,7 +139,7 @@ class ComponentDemo extends ApiDemoPage {
allowCustomBaseUri,
noUrlEditor,
urlLabel,
selectedServerValue,
selectedServerValue
} = this;
return html` <section class="documentation-section">
<h3>Interactive demo</h3>
Expand Down Expand Up @@ -212,7 +213,7 @@ class ComponentDemo extends ApiDemoPage {
@change="${this._toggleMainOption}"
>Allow disable params</anypoint-checkbox
>

<anypoint-checkbox
aria-describedby="mainOptionsLabel"
slot="options"
Expand Down
1 change: 1 addition & 0 deletions demo/apis.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"oauth-flows/oauth-flows.yaml": { "type": "OAS 3.0", "mime": "application/yaml" },
"oas-bearer/oas-bearer.yaml": { "type": "OAS 3.0", "mime": "application/yaml" },
"oas-demo/oas-demo.yaml": { "type": "OAS 3.0", "mime": "application/yaml" },
"cookies/cookies.yaml": { "type": "OAS 3.0", "mime": "application/yaml" },
"multi-server/multi-server.yaml": { "type": "OAS 3.0", "mime": "application/yaml" },
"loan-ms/loan-microservice.json": { "type": "OAS 2.0", "mime": "application/json" },
"async-api/async-api.yaml": "ASYNC 2.0",
Expand Down
Loading
Loading