Wondering what’s next for npm?Check out our public roadmap! »

    This package has been deprecated

    Author message:

    This component is deprecated

    @advanced-rest-client/request-editor
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published

    Published on NPM

    Build Status

    Published on webcomponents.org

    request-editor

    A custom element that provides an UI to create a request object in Advanced REST Client.

    The editor consists of several other editors and puts them together to create a single place of managing request data:

    • http-method-selector - allows to specify HTTP method
    • url-input-editor - allows to edit the URL
    • api-headers-editor - AMF powered headers editor
    • api-body-editor - AMF powered payload editor
    • authorization-selector - an UI to provide authorization settings
    • request-actions-panel - ARC's requests actions editor
    • request-config - request configuration editor
    • http-code-snippets - not an editor, code snippets for current request data

    Usage

    Installation

    npm install --save @advanced-rest-client/request-editor
    

    In a LitElement

    import { LitElement, html } from 'lit-element';
    import '@advanced-rest-client/request-editor/request-editor.js';
     
    class SampleElement extends LitElement {
      render() {
        const { requestObject } = this;
        return html`
        <request-editor
          ?compatibility="${this.compatibility}"
          ?outlined="${this.outlined}"
          ?readOnly="${this.readOnly}"
          ?narrow="${this.narrow}"
          .oauth2RedirectUri="${this.oauth2RedirectUri}"
          ?ignorecontentonget="${this.ignoreContentOnGet}"
          .method="${requestObject.method}"
          .url="${requestObject.url}"
          .headers="${requestObject.headers}"
          .payload="${requestObject.payload}"
          .auth="${requestObject.auth}"
          .authType="${requestObject.authType}"
          .config="${requestObject.config}"
          .requestActions="${requestObject.requestActions}"
          .responseActions="${requestObject.responseActions}"
          @api-request="${this._requestHandler}"
          @change="${this._requestChanegd}"
        ></request-editor>
        `;
      }
     
      _requestChanegd(e) {
        this.requestObject = e.target.serializeRequest();
        console.log(e.type.split('-')[0], 'property changed');
      }
     
      _requestHandler(e) {
        // perform request
      }
    }
    customElements.define('sample-element', SampleElement);

    To configure request data use properties/attributes. The change of the value is notified via DOM event which type is the lowercase property name and -changed suffix. For example the url change is notified via url-changed event.

    You can also use serializeRequest() method that puts request parameters into an object.

    Note that the auth-changed event, unlike others, does not have detail object set on the event with value property. Also, auth-changed event is fired once for auth and authType property change.

    Authorization data

    Until version 3 the editor was processing authorization data and inserting authorization header if needed (basic and OAuth authorizations uses Authorization header). From version 4 the element just creates the auth object that should be processed by the transport library.

    api-request and api-response events

    When the user press the "Send" button the api-request event is dispatched with serialized request configuration on the detail object. The application must handle this event and make the request to the endpoint. Additionally the detail object contains the id property that identifies specific request dispatched from this instance of the editor. This id has to be reported back with the api-response event.

    When the response is ready the application should dispatch api-response event with response data that are acceptable by the response-view component (in ARC) or other component. The detail object must include the id provided in the api-request event. This way the request panel knows that the response is received and can update state to hide loaders.

    Note, the api-request event is not send when the URL is reported invalid.

    Breaking changes

    Version 4.0.0

    • The request-data-changed event has been renamed to change and does not carry detail object. Call serializeRequest() in the handler if needed.
    • The authorization-panel has been replaced by authorization-selector with combination with authorization-method; The auth elements does not process authorization values (does not update headers).
    • Added onchange property to register event handler for change event

    Development

    git clone https://github.com/advanced-rest-client/request-editor
    cd request-editor
    npm install

    Running the demo locally

    npm start

    Running the tests

    npm test

    API components

    This components is a part of API components ecosystem

    Install

    npm i @advanced-rest-client/request-editor

    DownloadsWeekly Downloads

    2

    Version

    5.0.0

    License

    Apache-2.0

    Unpacked Size

    172 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar