diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..c2ffa2b --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +coverage/ +_site/ +dist/ diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..4d387a6 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: ['@advanced-rest-client/eslint-config'].map(require.resolve), +}; diff --git a/.gitignore b/.gitignore index 4e52135..c6695bd 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,3 @@ - # General .DS_Store .AppleDouble @@ -56,5 +55,4 @@ $RECYCLE.BIN/ .nfs* node_modules -bower_components coverage diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..a128a97 --- /dev/null +++ b/.npmignore @@ -0,0 +1,14 @@ +coverage/ +test/ +demo/ +gen-tsd.json +CONTRIBUTING.md +.travis.yml +index.html +polymer.json +karma.* +husky.* +commitlint.* +.* +*.config.* +prettier.config.js diff --git a/.travis.yml b/.travis.yml index 5dec008..a9dcf9e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,27 +1,19 @@ + language: node_js -node_js: 8 +node_js: stable sudo: required -before_script: -- npm install -g polymer-cli istanbul wct-istanbub -- polymer install addons: - firefox: latest apt: sources: - google-chrome packages: - google-chrome-stable - sauce_connect: true script: -- xvfb-run polymer test --plugin local -- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test --plugin sauce --job-name - "api-request-editor:${TRAVIS_BRANCH}" --build-number=${TRAVIS_BUILD_NUMBER}; fi -cache: - directories: - - node_modules -after_success: -- node tasks/ci.js +- npm test +- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then npm run test:sl; fi env: global: - - secure: MssZ1ZQYbb6gSdrpLViJAT1Go16kfkGWKTpCXuAT/gXuLYZCu3XTf3FY0n7BUAaakxGZpQy24OlH0x2jdZ08lB7g8pAEx8v5sFD5nHoOW8mdHHADhHwP9RHj2c+9X/3me0EIkGboHjas2GbrkyOb7iFMrE2qbMf+N7hNHlV+dHO4FUrRXhkegPDx3ptdx0zeXOrYTGqRGv6gYy3shQRPxGCPmnauEsfs7yOFLcluqisTTsRgYwNmCP9fTEhpESHhDW5PvXUSrM+cTO3DEZXCbG1cr+vUZG5L0RepPIw+/gM9KvzaRvjSVBevUx1xdfKGMCPM/W6515oGU0IVRSfhZL8SA7rDBze4N9HxSP2/gecCTIska5uMm4MNZXM6GMD8Osl9i/mh1Y1TYit1BtNTpwCr6UiDdhjKasmhmTlUNDxx1lasEpM9krY8tyf/tlthx0KzyYo8WdLJcST/nl48xHKGTwW1czzHinAmygpyOv0dBoQKb544seFLO7f4uxFyXHPWxVKCsX7XsGMlBvQEUv22YcsxJbdae6UiAg1x/Sem4vTwSohYHJq0DErG+EIP7TB1oZfwnMZWHsBVrRvYcW40g7wtUqR78Ej/+QxMsKhzcQBK6XDBFc1N9WwbNfuGl+S6mG/Q3uEItqwWrfwo0HY/fD6mJyN9kgp+WLldtbg= - - secure: R6TKWQmBBJ3DtZiErr8c5bWH6jfYmVCaoQqRRJz8ZZYnDQZBtY7fQmpUtdiiiGQfm6Wjcl3Qcusu7O+7CMsMyl9SYhI3+aFZmhYIsbCTz4AfZAt9rLGExHWDop2tSGfFU+KSgENl1LR20TM9s81rRQzrwg5sMAmgO4yLGCH9QKwT5lG2Oe4tl1FMYsjBc/lJbtJOm/c1pJVQXMoanrFVvkRlYgYG157xas5e33vaxmDPltS0WkoHp0T98Tyn30UW7waQhjUKtJ1PoDcyuVi1ugyGXGNLRfyqWUoypySJgVRI0U43WzcOz3G4WhuM0/JiQsSiNCm0eQW5azr61O20AuGaIxYy33CBBdUKpHPunmIJVwOydZ4RNkI1pvHTryi7GjSpXhjNCb1297bVL8Nv+6EG29AdsAGYpHZnptim+XQAqGJ/3ZXVZiIyF2u8iSPKYvhcuE8y+6lCPw+gOsMqIIBL8cvhjHhWSswl7jRnhR+S3rxcclEM8cg4rtO2uDcKpL0WRUa1l+G71Kw3EtL7ZI1hl+6HQQxQlPy0bKlJvI6ThmlDYVwAYkmIYN4G/QhJnoNJwTtpAJw/I4SjAL2hlegv7tv/rt5BsrBYVnOvw/0BZUjD2OJl0O+H98FiP8A4smjUrs/DmL7pxqSuCnI0xUMha6bniXLqfhLLhwvnZaU= + - secure: >- + MssZ1ZQYbb6gSdrpLViJAT1Go16kfkGWKTpCXuAT/gXuLYZCu3XTf3FY0n7BUAaakxGZpQy24OlH0x2jdZ08lB7g8pAEx8v5sFD5nHoOW8mdHHADhHwP9RHj2c+9X/3me0EIkGboHjas2GbrkyOb7iFMrE2qbMf+N7hNHlV+dHO4FUrRXhkegPDx3ptdx0zeXOrYTGqRGv6gYy3shQRPxGCPmnauEsfs7yOFLcluqisTTsRgYwNmCP9fTEhpESHhDW5PvXUSrM+cTO3DEZXCbG1cr+vUZG5L0RepPIw+/gM9KvzaRvjSVBevUx1xdfKGMCPM/W6515oGU0IVRSfhZL8SA7rDBze4N9HxSP2/gecCTIska5uMm4MNZXM6GMD8Osl9i/mh1Y1TYit1BtNTpwCr6UiDdhjKasmhmTlUNDxx1lasEpM9krY8tyf/tlthx0KzyYo8WdLJcST/nl48xHKGTwW1czzHinAmygpyOv0dBoQKb544seFLO7f4uxFyXHPWxVKCsX7XsGMlBvQEUv22YcsxJbdae6UiAg1x/Sem4vTwSohYHJq0DErG+EIP7TB1oZfwnMZWHsBVrRvYcW40g7wtUqR78Ej/+QxMsKhzcQBK6XDBFc1N9WwbNfuGl+S6mG/Q3uEItqwWrfwo0HY/fD6mJyN9kgp+WLldtbg= + - secure: >- + R6TKWQmBBJ3DtZiErr8c5bWH6jfYmVCaoQqRRJz8ZZYnDQZBtY7fQmpUtdiiiGQfm6Wjcl3Qcusu7O+7CMsMyl9SYhI3+aFZmhYIsbCTz4AfZAt9rLGExHWDop2tSGfFU+KSgENl1LR20TM9s81rRQzrwg5sMAmgO4yLGCH9QKwT5lG2Oe4tl1FMYsjBc/lJbtJOm/c1pJVQXMoanrFVvkRlYgYG157xas5e33vaxmDPltS0WkoHp0T98Tyn30UW7waQhjUKtJ1PoDcyuVi1ugyGXGNLRfyqWUoypySJgVRI0U43WzcOz3G4WhuM0/JiQsSiNCm0eQW5azr61O20AuGaIxYy33CBBdUKpHPunmIJVwOydZ4RNkI1pvHTryi7GjSpXhjNCb1297bVL8Nv+6EG29AdsAGYpHZnptim+XQAqGJ/3ZXVZiIyF2u8iSPKYvhcuE8y+6lCPw+gOsMqIIBL8cvhjHhWSswl7jRnhR+S3rxcclEM8cg4rtO2uDcKpL0WRUa1l+G71Kw3EtL7ZI1hl+6HQQxQlPy0bKlJvI6ThmlDYVwAYkmIYN4G/QhJnoNJwTtpAJw/I4SjAL2hlegv7tv/rt5BsrBYVnOvw/0BZUjD2OJl0O+H98FiP8A4smjUrs/DmL7pxqSuCnI0xUMha6bniXLqfhLLhwvnZaU= diff --git a/README.md b/README.md index fbda391..06dd93c 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,235 @@ -[![Build Status](https://travis-ci.org/advanced-rest-client/api-url-data-model.svg?branch=stage)](https://travis-ci.org/advanced-rest-client/api-request-editor) +[![Published on NPM](https://img.shields.io/npm/v/@api-components/api-request-editor.svg)](https://www.npmjs.com/package/@api-components/api-request-editor) -[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/advanced-rest-client/api-request-editor) +[![Build Status](https://travis-ci.org/advanced-rest-client/api-request-editor.svg?branch=stage)](https://travis-ci.org/advanced-rest-client/api-request-editor) -# api-request-editor +## <api-request-editor> -A request editor that builds the UI based on AMF model. +A web component to render accessible request data editor based on AMF model. + +This component implements Material Design styles. + + +The component creates the UI for editing a HTTP request. It contains: + +- URL editor +- Headers editor +- Path/query parameters editor +- Payload (body) editor +- Authorization editor + +**See breaking changes and list of required dependencies at the bottom of this document** + +## Usage + +### Installation - + +### Handling request event + +The element do not perform a request. It dispatches `api-request` 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 `api-response` property with the same `id` value from the request object. The element clears its state when the event is handled. + +### AMF model selection + +The element handles selected shape computation after `selected` property is set. +The property should be set to AMF supportedOperation node's `@id` value. + +Use [api-navigation](https://github.com/advanced-rest-client/api-navigation) element to provide the user with accessible navigation through the AMF model. + +### Override base URI + +Sometimes you may need to override APIs base URI. The element provides `baseUri` property that can be set to replace API's base URI to some other value. + +### Allowing custom properties + +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. + +To allow the user to add custom properties in the editors use `allowCustom` property. It will force query parameters editor to appear when hidden and the editors renders "add" button in their forms. + + +### Partial model support + +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. + +Partial model contains data that are only required to generate view for current API selection. + +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. + +Note, this can be ignored when setting `baseUri` as this overrides any API model value. + +Pass corresponding model values to `server`, `protocols`, and `version` properties when expecting partial AMF model. + + +### OAuth 2 + +You need to set `redirectUri` property to a OAuth 2 redirect popup location. Otherwise authorization won't be initialized. + + +### Validation + +The element sets `invalid` attribute when the editor contains invalid data. You can use it to style the element for invalid input. + +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. + +### api-request event + +Dispatched when the user requests to send current request. + +Properties set on the detail object: + +- url `String` The request URL. Can be empty string. +- method `String` HTTP method name. Can be empty. +- headers `String` HTTP headers string. Can be empty. +- payload `String|File|FormData` Message body. Can be undefined. +- auth `Object` Optional, authorization settings from the auth panel. +- authType `String` Name of the authorization methods. One of `advanced-rest-client/auth-methods`. +- id `String` Generated UUID for the request. Each call of the `execute()` function regenerates the `id`. + + +Use the `id` property to report the response back with `api-response` event. + + +### In an html file ```html -