api-console-assets

<link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> <link rel="import" href="../paper-styles/typography.html"> <link rel="import" href="../paper-tabs/paper-tabs.html"> <link rel="import" href="../paper-tabs/paper-tab.html"> <link rel="import" href="../iron-pages/iron-pages.html"> <link rel="import" href="../raml-body-editor-panel/raml-body-editor-panel.html"> <link rel="import" href="../raml-request-headers-editor/raml-request-headers-editor.html"> <link rel="import" href="../raml-docs-response-panel/raml-docs-response-panel.html"> <link rel="import" href="../raml-docs-method-viewer/raml-docs-method-viewer.html"> <link rel="import" href="../raml-request-parameters-editor/raml-request-parameters-editor.html"> <link rel="import" href="../iron-media-query/iron-media-query.html"> <link rel="import" href="../raml-request-url-editor/raml-request-url-editor.html"> <link rel="import" href="../paper-button/paper-button.html"> <link rel="import" href="../paper-spinner/paper-spinner.html"> <link rel="import" href="../authorization-panel/authorization-panel.html"> <link rel="import" href="../oauth-authorization/oauth2-authorization.html"> <link rel="import" href="../oauth-authorization/oauth1-authorization.html"> <link rel="import" href="../promise-polyfill/promise-polyfill-lite.html"> <link rel="import" href="../fetch-polyfill/fetch-polyfill.html"> <link rel="import" href="../paper-dialog-scrollable/paper-dialog-scrollable.html"> <link rel="import" href="../paper-dialog/paper-dialog.html"> <link rel="import" href="../paper-toast/paper-toast.html"> <link rel="import" href="../raml-request-parameters-editor/raml-request-parameters-model.html"> <link rel="import" href="raml-request-panel-simple-xhr.html">  <dom-module id="raml-request-panel"> <template> <style> :host { display: block; @apply(--raml-request-panel); } *[hidden] { display: none !important; } .content { height: 100%; @apply(--layout-vertical); @apply(--raml-request-panel-container); } h2 { @apply(--paper-font-subhead); margin: 8px 12px; font-weight: var(--raml-request-panel-navigation-title-font-weight, 500); @apply --raml-request-panel-popup-header; } .buttons { @apply --raml-request-panel-popup-btn-container; } [dialog-confirm] { @apply --raml-request-panel-popup-btn-confirm; } [dialog-confirm]:hover { @apply --raml-request-panel-popup-btn-confirm-hover; } [dialog-dismiss] { @apply --raml-request-panel-popup-btn-dismiss; } [dialog-dismiss]:hover { @apply --raml-request-panel-popup-btn-dismiss-hover; } *[hidden] { display: none !important; } iron-pages>* { border: 1px var(--raml-request-panel-panel-border-color, transparent) solid; min-height: 120px; } .action-bar { @apply(--layout-horizontal); @apply(--layout-end-justified); @apply(--layout-center); margin-top: 8px; } .action-button { background-color: var(--primary-button-background-color, --accent-color); color: var(--primary-button-color, #fff); @apply(--action-button); } .action-button:hover { background-color: var(--primary-button-hover-background-color, --accent-color); color: var(--primary-button-hover-color, #fff); @apply(--action-button-hover); } .action-button[disabled] { background-color: var(--action-accent-button-disabled-color); color: #fff; @apply(--action-button-disabled); } .url-editor { @apply(--layout-horizontal); @apply(--layout-center); } raml-request-url-editor { @apply(--layout-flex); } :host([narrow]) .content { @apply(--layout-vertical); @apply(--raml-request-panel-container-narrow); } :host([narrow]) raml-request-url-editor { width: auto; } paper-spinner { margin-right: 8px; } paper-dialog { @apply(--raml-request-panel-popup); } .panel-warning { width: 16px; height: 16px; margin-left: 4px; color: #FF5722; } .url-invalid-info { @apply --arc-font-body1; } </style> <iron-media-query query="(max-width: [[narrowWidth]])" query-matches="{{narrow}}"></iron-media-query> <raml-request-parameters-model query-parameters="[[method.queryParameters]]" uri-parameters="[[method.allUriParameters]]" query-model="{{queryModel}}" uri-model="{{uriModel}}" has-query-parameters="{{hasQueryParameters}}" has-uri-parameters="{{hasUriParameters}}" has-parameters="{{hasParameters}}"></raml-request-parameters-model> <div class="content"> <div class="url-editor" hidden$="[[noUrlEditor]]"> <raml-request-url-editor auto-validate required value="{{url}}" invalid="{{urlInvalid}}" base-uri="[[_baseUri]]" endpoint-uri="[[method.relativeUri]]" query-model="[[queryModel]]" uri-model="[[uriModel]]"></raml-request-url-editor> </div> <paper-tabs selected="{{selectedTab}}"> <paper-tab hidden$="[[noAuth]]"> Authorization <iron-icon icon="arc:warning" class="panel-warning" hidden$="[[authValid]]" title="Fill up missing auth data"></iron-icon> </paper-tab> <paper-tab>Parameters</paper-tab> <paper-tab>Headers</paper-tab> <paper-tab hidden$="[[!isPayloadRequest]]">Body</paper-tab> </paper-tabs> <iron-pages selected="{{selectedTab}}"> <authorization-panel hidden$="[[noAuth]]" secured-by="[[method.securedBy]]" redirect-url="[[redirectUrl]]" auth-required="{{authRequired}}" auth-valid="{{authValid}}"></authorization-panel> <raml-request-parameters-editor query-model="[[queryModel]]" uri-model="[[uriModel]]" has-query-parameters="[[hasQueryParameters]]" has-uri-parameters="[[hasUriParameters]]" has-parameters="[[hasParameters]]"></raml-request-parameters-editor> <raml-request-headers-editor narrow="[[narrow]]" raml-headers="[[method.headers]]" content-type="{{contentType}}" is-payload="[[isPayloadRequest]]" value="{{headers}}"></raml-request-headers-editor> <raml-body-editor-panel narrow="[[narrow]]" body="[[method.body]]" hidden$="[[!isPayloadRequest]]" content-type="{{contentType}}" value="{{payload}}"></raml-body-editor-panel> </iron-pages> <div class="action-bar"> <paper-spinner alt="Loading contacts list" active="[[loadingRequest]]"></paper-spinner> <span class="url-invalid-info" hidden$="[[!urlInvalid]]">Request URL is invalid.</span> <paper-button class="action-button" on-tap="execute" hidden$="[[!authValid]]" disabled="[[urlInvalid]]">Send</paper-button> <template is="dom-if" if="[[!authValid]]"> <paper-button class="action-button" on-tap="authAndExecute" disabled="[[urlInvalid]]">Authorize and send</paper-button> </template> </div> </div> <oauth2-authorization></oauth2-authorization> <oauth1-authorization></oauth1-authorization> <raml-request-panel-simple-xhr id="xhr"></raml-request-panel-simple-xhr> <paper-toast text="Authorization is required for this endpoint" id="authRequired" horizontal-align="right" horizontal-offset="12"></paper-toast> <paper-toast text="Fill in the authorization form first" id="authFormError" horizontal-align="right" horizontal-offset="12"></paper-toast> </template> <script> Polymer({ is: 'raml-request-panel', /** * Fired when the response has been recorded and request, response, redirects and timings data * are set. * * @event api-console-response-ready * * @param {Boolean} isXhr True if the transport method is a basic transport. * @param {Response} response The response object * @param {Error} responseError Error object if the response is errored * @param {Request} request The request object. * @param {Number} loadingTime Request loading time * @param {Object} timings As defined in HAR 1.2 timnings object * @param {Array<Object>} redirectTimings List of redirect timings * @param {Array} redirects List of redirect Responses * @param {String} sourceMessage Source HTTP message sent to the server. */ /** * Event fired when the console want to make a request to an endpoint. * If the hosting application can handle the event and will make a request on behalf of the * console, this event must be cancelled. Otherwise internal XHR request will be made. * * @event api-console-request * @param {String} method The HTTP method name * @param {String} url Endpoint's URL * @param {String} headers A HTTP headers string (as defined in the spec) * @param {String} payload A message body (encoded if necessary). * @param {Object} auth Collected authorization data. In most cases it is * unused. It is required for OAuth1 to pass this data to handle request signing * by the `oauth-authorization` element. */ properties: { /** * A RAML node representing a method node in RAML definition. * It should be obtained from the `raml-path-to-object` element. */ method: { type: Object, observer: '_methodChanged' }, // Selected request tab. selectedTab: { type: Number, value: 0, notify: true }, // Current content type. contentType: { type: String, notify: true }, // Computed value if the method can carry a payload isPayloadRequest: { type: Boolean, value: false, computed: '_computeIsPayloadRequest(method.*)' }, // Headers for the request. headers: String, // Body for the request payload: String, // Current URL url: { type: String, notify: true }, /** * If set it will renders the view in the narrow layout. */ narrow: { type: Boolean, notify: true, reflectToAttribute: true }, // A widith below which the `narrow` property will be set to true. narrowWidth: { type: String, value: '768px' }, // If true then the request is currently loaded. loadingRequest: { type: Boolean, notify: true, readOnly: true, value: false }, // If true then the request was made using the XHR object (it has less data in the response). responseIsXhr: { type: Boolean, notify: true, readOnly: true }, /** * The request object created by the transport. * It should be the `Request` object as defined in the Fetch API spec. * This element provides the polyfill for this API. */ request: { type: Request, notify: true, readOnly: true }, /** * The response object from the transport. * It should be the `Response` object as defined in the Fetch API spec. * This element provides the polyfill for this API. */ response: { type: Response, notify: true, readOnly: true }, // Set when the response errored. responseError: { type: Object, notify: true, readOnly: true }, // Response full loading time. loadingTime: { type: Number, notify: true, readOnly: true }, /** * If the transport method is able to collect detailed information about request timings * then this value will be set. It's the `timings` property from the HAR 1.2 spec. */ timings: { type: Object, notify: true, readOnly: true }, /** * If the transport method is able to collect detailed information about redirects timings * then this value will be set. It's a list of `timings` property from the HAR 1.2 spec. */ redirectTimings: { type: Array, notify: true, readOnly: true }, /** * It will be set if the transport method can generate information about redirections. */ redirects: { type: Array, notify: true, readOnly: true }, /** * Http message sent to the server. * * This information should be available only in case of advanced HTTP transport. */ sourceMessage: { type: String, notify: true, readOnly: true }, // Received from the authorization panel state if authorization is required authRequired: Boolean, // Received from the authorization panel state if authorization data is valid authValid: Boolean, // OAuth2 redirect URL redirectUrl: String, // Selected by the user auth method (if any) authMethod: String, // Current authorization settings. authSettings: Object, /** * Computed value when the URL change. * If not valid form submission won't be possible. */ urlInvalid: Boolean, /** * Hides the URL editor from the view. * The editor is still in the DOM and the `urlInvalid` property still will be set. */ noUrlEditor: Boolean, /** * A base URI for the API. To be set if RAML spec is missing `baseUri` * declaration and this produces invalid URL input. This information * is passed to the URL editor that prefixes the URL with `baseUri` value * if passed URL is a relative URL. */ baseUri: { type: String, observer: '_baseUriChanged' }, // Computed baseUri value passed to the URL editor. _baseUri: String, // Computed model for query parameters queryModel: Object, // Computed model for URI parameters uriModel: Object, // Computed value from the parameters model hasUriParameters: Boolean, // Computed value from the parameters model hasQueryParameters: Boolean, // Computed value from the parameters model hasParameters: Boolean, /** * Value computed when RAML method change. * It is set to true when authorization is not defined for current * endpoint's method. */ noAuth: { type: Boolean, readOnly: true, value: true } }, observers: [ '_isPayloadRequestChanged(isPayloadRequest)', '_noAuthChanged(noAuth)', '_selectedTabChanged(selectedTab)', '_methodBaseUriChanged(method.baseUri)' ], listeners: { 'authorization-settings-changed': '_authSettingsChanged' }, attached: function() { this.listen(window, 'api-console-response', '_responseHandler'); }, detached: function() { this.unlisten(window, 'api-console-response', '_responseHandler'); }, // Called when RAML method definition changed. _methodChanged: function(method) { this._updateAuthorizationState(method); }, /** * Updates `noAuth` property depending on number of security schemes * defined in RAML for this method. * * @param {Object} ramlMethod RAML method definition. */ _updateAuthorizationState: function(ramlMethod) { var state = true; if (ramlMethod && ramlMethod.securedBy && ramlMethod.securedBy.length) { var methods = []; var allowed = ['Digest Authentication', 'Basic Authentication', 'OAuth 1.0', 'OAuth 2.0', 'x-custom']; ramlMethod.securedBy.forEach(function(item) { if (!item) { return; } if (allowed.indexOf(item.type) !== -1) { methods.push(item.type); } }); state = methods.length < 1; } this._setNoAuth(state); }, // Computes boolean value if the selected object (method) can carry a payload _computeIsPayloadRequest: function(record) { var base = record.base; if (!base || !base.method) { return false; } return ['get', 'head'].indexOf(base.method) === -1; }, /** * Refreshes tabs selection. To be called when number of tabs changes. */ _refreshTabs: function() { var tabs = this.$$('paper-tabs'); if (!tabs) { return; } tabs.notifyResize(); }, _isPayloadRequestChanged: function(required) { if (!required && this.selectedTab === 3) { if (this.authRequired) { this.selectedTab = 0; } else { this.selectedTab = 1; } } this._refreshTabs(); }, // Handler for `noAuth` property change. _noAuthChanged: function(noAuth) { if (!noAuth && this.selectedTab === 2) { this.selectedTab = 0; } else if (noAuth && this.selectedTab === 0) { this.selectedTab = 1; } this._refreshTabs(); }, /** * Execute the request with current settings. * This method fires the `api-console-request` so the request can be handled by the * hosting app. * Hosting app must call `event.preventDefault()` on the event otherwise the console * will attempt to make a request usnig XHR object. */ execute: function() { this._clearRequestData(); this._setLoadingRequest(true); var event = new CustomEvent('api-console-request', { cancelable: true, bubbles: true, composed: true, detail: this.serializeRequest() }); this.dispatchEvent(event); if (!event.defaultPrevented) { this._executeRequest(event.detail); } }, /** * Performs an authorization by bringing up the authorization * form in a popup and after successful authorization executes the * request. */ authAndExecute: function() { if (this.authMethod === 'oauth1' || this.authMethod === 'oauth2') { var panel = this.$$('authorization-panel'); panel.forceTokenAuthorization(); this.__pendingRequest = true; return; } if (this.selectedTab !== 0) { this.selectedTab = 0; } this.$.authFormError.opened = true; }, /** * Returns an object with the request properties. * The object contains: * - method (String) * - url (String) * - headers (String) * - payload (String) * - auth (Object) * * The `auth` property is optional and is only added to the request if simple `authorization` * header will not work. For example NTLM auth method has to be made on a single socket * connection (authorization and the request) so it can't be made before the request. * * The `auth` object contains 2 properties: * - type (String) the authorization type - one of from the `auth-methods` element * - settings (Object) Authorization parameters entered by the user. It vary and depends on * selected auth method. For example in case of the NTLM it will be: `username`, `password` and * `domain`. */ serializeRequest: function() { var result = { method: this.method.method.toUpperCase(), url: this.url, headers: this.headers, payload: this.payload }; if (this.authMethod && this.authSettings) { result.auth = this.authSettings; } return result; }, _executeRequest: function(data) { this.$.xhr.execute(data); }, // A handler for the `api-console-response` event. _responseHandler: function(e) { var isXhr = typeof e.detail.isXhr === 'boolean' ? e.detail.isXhr : true; this._setResponseIsXhr(isXhr); this._setResponse(e.detail.response); this._setResponseError(e.detail.error); this._setRequest(e.detail.request); this._setLoadingTime(e.detail.loadingTime); this._setTimings(e.detail.timings); this._setRedirectTimings(e.detail.redirectTimings); this._setRedirects(e.detail.redirects); this._setSourceMessage(e.detail.sourceMessage); this.fire('api-console-response-ready', { isXhr: e.detail.isXhr, response: e.detail.response, responseError: e.detail.error, request: e.detail.request, loadingTime: e.detail.loadingTime, timings: e.detail.timings, redirectTimings: e.detail.redirectTimings, redirects: e.detail.redirects, sourceMessage: e.detail.sourceMessage }); this._setLoadingRequest(false); }, _clearRequestData: function() { this._setResponseIsXhr(false); this._setResponse(undefined); this._setResponseError(undefined); this._setRequest(undefined); this._setLoadingTime(undefined); this._setTimings(undefined); this._setRedirectTimings(undefined); this._setRedirects(undefined); }, _authSettingsChanged: function(e) { this.authMethod = e.detail.type; this.authSettings = e.detail.settings; if (this.__pendingRequest) { this.__pendingRequest = false; this.execute(); } }, /** * Updates the body editor if selected. */ _selectedTabChanged: function(selectedTab) { if (selectedTab === 3) { this.$$('raml-body-editor-panel').notifyResize(); } }, /** * Sets the `_baseUri` property to the RAML method `baseUri` only if * `baseUri` property is not set. * * @param {String} methodBaseUri RAML method base URI. */ _methodBaseUriChanged: function(methodBaseUri) { if (this.baseUri) { return; } this._baseUri = methodBaseUri; }, _baseUriChanged: function(value) { if (!value) { if (this.method) { this._baseUri = this.method.baseUri; } } else { this._baseUri = value; } } }); </script> </dom-module>