@api-client/ui 0.0.1

package/src/elements/amf/ApiRequestEditor.element.ts

@@ -0,0 +1,1777 @@
+import { html, nothing, TemplateResult } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { 
+  uuidV4, 
+  Headers, 
+  ApiDefinitions, 
+  AmfShapes, 
+  EventUtils, 
+  Events as CoreEvents,
+  Request,
+  IRequest,
+  IRequestProxyInit,
+  HttpRequestKind,
+  IProxyResult,
+  IRequestLog,
+} from '@api-client/core/build/browser.js';
+import { ensureContentType, generateHeaders } from "../../amf/lib/Utils.js";
+import { cachePayloadValue, getPayloadValue, PayloadInfo, readCachePayloadValue } from "../../amf/lib/PayloadUtils.js";
+import { applyUrlParameters, applyUrlVariables, computeEndpointUri, applyQueryParamStringToObject } from '../../amf/lib/UrlUtils.js';
+import { AmfInputParser } from '../../amf/lib/AmfInputParser.js';
+import * as InputCache from '../../amf/lib/InputCache.js';
+import { Events } from '../../events/amf/Events.js';
+import { EventTypes } from '../../events/amf/EventTypes.js';
+import { EventTypes as UiEventTypes } from '../../events/EventTypes.js';
+import { OperationParameter, PopulationInfo, SecuritySelectorListItem, ServerType } from '../../amf/types.js';
+import { Oauth2Credentials } from '../authorization/types.js';
+import BodyTextEditor from '../http/BodyTextEditor.js';
+import BodyUrlEncodedEditor from '../http/BodyUrlEncodedEditor.js';
+import { ifProperty } from '../../directives/if-property.js';
+import ApiElement from '../ApiElement.js';
+import type Input from '../../ui/input/Input.js';
+import type RadioElement from '../../ui/input/RadioElement.js';
+import { AmfParameters } from '../../amf/lib/AmfParameters.js';
+import { UiDropdownListSelection } from '../../ui/list/UiDropdownList.js';
+import { AmfSecurity } from '../../amf/lib/AmfSecurity.js';
+import { SnackNotifications } from '../../ui/notification/SnackNotifications.js';
+import '../../define/amf/api-authorization-editor.js';
+import '../../define/amf/api-server-picker.js';
+import '../../define/http/http-body-urlencoded-editor.js';
+import '../../define/http/http-body-multipart-editor.js';
+import '../../define/http/http-body-text-editor.js';
+import '../../define/ui/ui-icon.js';
+import '../../define/ui/ui-text-field.js';
+import '../../define/ui/ui-switch.js';
+import '../../define/ui/ui-button.js';
+import '../../define/ui/ui-dropdown-list.js';
+import '../../define/ui/ui-list.js';
+import '../../define/ui/ui-list-item.js';
+import '../../define/ui/ui-progress.js';
+
+export const EventCategory = 'API Request editor';
+
+/**
+ * @fires amfstoreopget - Dispatched when querying for an operation data
+ * @fires amfstoreopgetparent - Dispatched when querying for an operation data for an endpoint
+ * @fires amfstoreendpointget - Dispatched when querying for an endpoint data
+ * @fires apistoreserverquery - Dispatched when querying for API servers
+ * @fires amfstoreapiprotocols - Dispatched when querying for API protocols
+ * @fires amfstoreapiversion - Dispatched when querying for API version
+ * @fires response - Dispatched when the response was received by the editor.
+ */
+export default class ApiRequestEditor extends ApiElement {
+  /** 
+   * The currently selected media type for the payloads.
+   * @attribute
+   */
+  @property({ type: String, reflect: true, }) mimeType?: string;
+
+  /**
+   * When set it renders a label with the computed URL.
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) urlLabel?: boolean;
+
+  /**
+   * When set it renders the URL input above the URL parameters.
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) urlEditor?: boolean;
+
+  /**
+   * If set it computes `hasOptional` property and shows checkbox in the
+   * form to show / hide optional properties.
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) allowHideOptional?: boolean;
+
+  /**
+   * When set, renders "add custom" item button.
+   * If the element is to be used without AMF model this should always
+   * be enabled. Otherwise users won't be able to add a parameter.
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) allowCustom?: boolean;
+
+  /**
+   * OAuth2 redirect URI.
+   * This value **must** be set in order for OAuth 1/2 to work properly.
+   * @attribute
+   */
+  @property({ type: String }) redirectUri?: string;
+
+  /**
+   * Final request URL including settings like `baseUri`, AMF
+   * model settings and user provided parameters.
+   * @attribute
+   */
+  @property({ type: String }) url?: string;
+
+  /**
+   * Holds the value of the currently selected server
+   * Data type: URI
+   * @attribute
+   */
+  @property({ type: String }) serverValue?: string;
+
+  /**
+   * Holds the type of the currently selected server
+   * Values: `server` | `uri` | `custom`
+   * @attribute
+   */
+  @property({ type: String }) serverType?: string;
+
+  /**
+   * Optional property to set
+   * If true, the server selector is not rendered
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) noServerSelector?: boolean;
+
+  /**
+   * Optional property to set
+   * If true, the server selector custom base URI option is rendered
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) allowCustomBaseUri?: boolean;
+  
+  /**
+   * List of credentials source
+   */
+  @property({ type: Array }) credentialsSource?: Oauth2Credentials[];
+
+  /** 
+   * The domain id key of the selected security
+   * @attribute
+   */
+  @property({ type: String }) selectedSecurity?: string;
+
+  /** 
+   * Optional. The parent endpoint id. When set it uses this value to query for the endpoint
+   * instead of querying for a parent through the operation id.
+   * Also, when `endpoint` is set and the `endpointId` match then it ignores querying for 
+   * the endpoint.
+   * @attribute
+   */
+  @property({ type: String }) endpointId?: string;
+
+  protected domainIdValue: string | undefined;
+
+  /**
+   * The domain id (AMF id) of the rendered operation.
+   * @attribute
+   */
+  @property({ type: String, reflect: true })
+  get domainId(): string | undefined {
+    return this.domainIdValue;
+  }
+
+  set domainId(value: string | undefined) {
+    const old = this.domainIdValue;
+    /* istanbul ignore if */
+    if (old === value) {
+      return;
+    }
+    this.domainIdValue = value;
+    this.requestUpdate('domainId', old);
+    this.processDebounce();
+  }
+
+  protected endpointValue: ApiDefinitions.IApiEndPoint | undefined;
+
+
+  get endpoint(): ApiDefinitions.IApiEndPoint | undefined {
+    return this.endpointValue;
+  }
+
+  set endpoint(value: ApiDefinitions.IApiEndPoint | undefined) {
+    const old = this.endpointValue;
+    if (old === value) {
+      return;
+    }
+    this.endpointValue = value;
+    this.requestUpdate();
+    this.readUrlData();
+    this.notifyChange();
+  }
+
+  /**
+   * The HTTP method name.
+   */
+  get httpMethod(): string | undefined {
+    const op = this.operationValue;
+    if (!op) {
+      return undefined;
+    }
+    return op.method;
+  }
+
+  /**
+   * A flag set when the request is being made.
+   */
+  @state() loadingRequest: boolean | undefined;
+
+  protected baseUriValue: string | undefined;
+
+  /**
+   * 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.
+   * @attribute
+   */
+  @property({ type: String }) get baseUri(): string | undefined {
+    return this.baseUriValue;
+  }
+
+  set baseUri(value: string | undefined) {
+    const old = this.baseUriValue;
+    if (old === value) {
+      return;
+    }
+    this.baseUriValue = value;
+    this.readUrlData();
+    this.requestUpdate('baseUri', old);
+  }
+
+  protected serversValue: ApiDefinitions.IApiServer[] | undefined;
+
+  /**
+   * The computed list of servers.
+   */
+  get servers(): ApiDefinitions.IApiServer[] | undefined {
+    return this.serversValue;
+  }
+
+  protected serverLocalValue: ApiDefinitions.IApiServer | undefined;
+
+  get server(): ApiDefinitions.IApiServer | undefined {
+    return this.serverLocalValue;
+  }
+
+  /**
+   * This is the final computed value for the baseUri to propagate downwards
+   * If baseUri is defined, return baseUri
+   * Else, return the selectedServerValue if serverType is not `server`
+   */
+  get effectiveBaseUri(): string {
+    if (this.baseUri) {
+      return this.baseUri;
+    }
+    if (this.serverType !== 'server') {
+      return this.serverValue as string;
+    }
+    return '';
+  }
+
+  /**
+   * @return True when there is not enough servers to render the selector
+   */
+  get serverSelectorHidden(): boolean {
+    const { serversCount = 0, noServerSelector = false, allowCustomBaseUri } = this;
+    return noServerSelector || (!allowCustomBaseUri && serversCount < 2);
+  }
+
+  /** 
+   * The list of security list items to render.
+   * An operation may have multiple security definition in an or/and fashion.
+   * This allows to render the selector to pick the current security.
+   */
+  protected securityList: SecuritySelectorListItem[] | undefined;
+
+  /**
+   * The security requirement for the operation or undefined.
+   */
+  get security(): SecuritySelectorListItem[] | undefined {
+    const items = this.securityList;
+    if (Array.isArray(items) && items.length) {
+      return items;
+    }
+    return undefined;
+  }
+
+  /**
+   * The currently rendered payload, if any.
+   */
+  get payload(): ApiDefinitions.IApiPayload | undefined {
+    const { payloads } = this;
+    if (!payloads) {
+      return undefined;
+    }
+    const { mimeType } = this;
+    let payload: ApiDefinitions.IApiPayload | undefined;
+    if (mimeType) {
+      payload = payloads.find(i => i.mediaType === mimeType);
+    }
+    if (!payload) {
+      [payload] = payloads;
+    }
+    return payload;
+  }
+
+  /**
+   * The list of all possible payloads for this operation.
+   */
+  get payloads(): ApiDefinitions.IApiPayload[] | undefined {
+    const operation = this.operationValue;
+    if (!operation) {
+      return undefined;
+    }
+    const { request } = operation;
+    if (!request) {
+      return undefined;
+    }
+    const { payloads } = request;
+    if (!Array.isArray(payloads) || !payloads.length) {
+      return undefined;
+    }
+    return payloads;
+  }
+
+  /**
+   * @returns API defined base URI (current server + the endpoint)
+   */
+  get apiBaseUri(): string | undefined {
+    const endpoint = this.endpointValue;
+    const server = this.serverLocalValue;
+    if (!server || !endpoint) {
+      return undefined;
+    }
+    const { path = '' } = endpoint;
+    let { url = '' } = server;
+    if (url.endsWith('/')) {
+      url = url.substr(0, url.length - 1);
+    }
+    return `${url}${path}`;
+  }
+
+  protected urlInvalidValue?: boolean;
+
+  /**
+   * True when the URL input is invalid.
+   */
+  get urlInvalid(): boolean | undefined {
+    return this.urlInvalidValue;
+  }
+
+  protected protocolsValue: string[] | undefined;
+
+  /**
+   * The API's protocols.
+   */
+  get protocols(): string[] | undefined {
+    return this.protocolsValue;
+  }
+
+  protected versionValue: string | undefined;
+
+  /**
+   * The API's version.
+   */
+  get version(): string | undefined {
+    return this.versionValue;
+  }
+
+  queryDebouncerTimeout: number;
+
+  /** 
+   * Set when the selection change, this is a JS object created form the 
+   * supportedOperation definition of the AMF graph.
+   */
+  protected operationValue?: ApiDefinitions.IApiOperation;
+
+  /** 
+   * The list of parameter groups that are opened when `allowHideOptional` is set.
+   */
+  openedOptional: string[];
+
+  protected debounceValue: unknown;
+
+  protected urlSearchRegexpValue: RegExp | undefined;
+
+  serversCount?: number;
+
+  amfParameters: AmfParameters;
+
+  /**
+   * This is set while the HTTP request is being executed.
+   * It allows to abort the request.
+   */
+  requestController?: AbortController;
+
+  /**
+   * @constructor
+   */
+  constructor() {
+    super();
+    /** 
+     * The timeout after which the `queryGraph()` function is called 
+     * in the debouncer.
+     */
+    this.queryDebouncerTimeout = 1;
+    this.authRedirectChangedHandler = this.authRedirectChangedHandler.bind(this);
+    this.populateAnnotatedFieldsHandler = this.populateAnnotatedFieldsHandler.bind(this);
+    
+    this.openedOptional = [];
+    this.amfParameters = new AmfParameters(this);
+    this.amfParameters.addEventListener('render', () => this.requestUpdate());
+    this.amfParameters.addEventListener('change', () => this.notifyChange());
+    this.amfParameters.addEventListener('paramchange', this.paramChangeHandler.bind(this) as EventListener);
+    InputCache.registerLocal(this);
+    this.graphChangeHandler = this.graphChangeHandler.bind(this);
+    this.addEventListener(UiEventTypes.Http.Request.send, this.internalSendHandler.bind(this));
+  }
+
+  notifyChange(): void {
+    this.dispatchEvent(new Event('change'));
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.processDebounce();
+    this.amfParameters.globalCache = true;
+    const node = this.eventsTarget;
+    node.addEventListener(EventTypes.Store.graphChange, this.graphChangeHandler);
+    node.addEventListener(EventTypes.Request.redirectUriChange, this.authRedirectChangedHandler as EventListener);
+    node.addEventListener(EventTypes.Request.populateAnnotatedFields, this.populateAnnotatedFieldsHandler as EventListener);
+    
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.debounceValue) {
+      clearTimeout(this.debounceValue as number);
+      this.debounceValue = undefined;
+    }
+    const node = this.eventsTarget;
+    node.removeEventListener(EventTypes.Store.graphChange, this.graphChangeHandler);
+    node.removeEventListener(EventTypes.Request.redirectUriChange, this.authRedirectChangedHandler as EventListener);
+    node.removeEventListener(EventTypes.Request.populateAnnotatedFields, this.populateAnnotatedFieldsHandler as EventListener);
+  }
+
+  /**
+   * Handler for the event dispatched by the store when the graph model change.
+   */
+  protected graphChangeHandler(): void {
+    this.processDebounce()
+  }
+
+  /**
+   * Calls the `queryGraph()` function in a debouncer.
+   */
+  protected processDebounce(): void {
+    if (this.debounceValue) {
+      clearTimeout(this.debounceValue as number);
+    }
+    this.debounceValue = setTimeout(() => {
+      this.debounceValue = undefined;
+      this.processGraph();
+    }, this.queryDebouncerTimeout);
+  }
+
+  /**
+   * Reads the URL data from the ApiUrlDataModel library and sets local variables.
+   */
+  readUrlData(): void {
+    this.updateServerParameters();
+    this.orderPathParameters()
+    this.computeUrlValue();
+  }
+
+  /**
+   * It makes sure that the path parameters are rendered in order (server, endpoint) and in order of occurrence in the URL. 
+   */
+  protected orderPathParameters(): void {
+    const params = this.getOrderedPathParams();
+    if (!params || !params.length) {
+      return;
+    }
+    const { amfParameters } = this;
+    amfParameters.parametersValue = amfParameters.parametersValue.filter(item => item.binding !== 'path');
+    amfParameters.parametersValue = amfParameters.parametersValue.concat(params);
+  }
+
+  protected paramChangeHandler(e: CustomEvent<string>): void {
+    this.paramChanged(e.detail);
+  }
+
+  /**
+   * A function to be overwritten by child classes to execute an action when a parameter has changed.
+   */
+  protected paramChanged(key: string): void {
+    this.computeUrlValue();
+    this.validateUrl();
+    const { amfParameters } = this;
+    const param = amfParameters.parametersValue.find(p => p.paramId === key);
+    if (param && param.binding === 'header' && (param.parameter.name || '').toLocaleLowerCase() === 'content-type') {
+      const value = InputCache.get(this, param.paramId, true) as string;
+      this.mimeType = value;
+    }
+  }
+
+  /**
+   * Computes the URL value for the current serves, selected server, and endpoint's path.
+   */
+  protected computeUrlValue(): void {
+    const { effectiveBaseUri, server, protocols, version } = this;
+    const endpoint = this.endpointValue;
+    const result = computeEndpointUri({
+      baseUri: effectiveBaseUri,
+      server,
+      endpoint,
+      protocols,
+      version,
+      forceHttpProtocol: true,
+    });
+    const { amfParameters } = this;
+    const params = amfParameters.parametersValue.map(p => p.parameter);
+    const report = AmfInputParser.reportRequestInputs(params, InputCache.getStore(this, true), amfParameters.nilValues);
+    let url = applyUrlVariables(result, report.path, true);
+    url = applyUrlParameters(url, report.query, true);
+    this.url = url;
+  }
+
+  /**
+   * Checks if the current server has variables and update the parameters array
+   */
+  protected updateServerParameters(): void {
+    const { server } = this;
+    const source = 'server';
+    const { amfParameters } = this;
+    // clears previously set request parameters related to server configuration.
+    amfParameters.parametersValue = amfParameters.parametersValue.filter(item => item.source !== source);
+    if (!server || ['custom', 'uri'].includes(this.serverType || '')) {
+      // we don't need to compute server variables for a custom URLs.
+      return;
+    }
+    if (Array.isArray(server.variables) && server.variables.length) {
+      server.variables.forEach((param) => {
+        const item: OperationParameter = {
+          binding: param.binding || '',
+          paramId: param.id,
+          parameter: param,
+          source,
+        };
+        if (param.schema) {
+          item.schema = param.schema;
+          item.schemaId = param.schema.id;
+        }
+        amfParameters.parametersValue.push(item);
+      });
+    }
+  }
+
+  /**
+   * Checks if the current endpoint has variables and requests them when needed.
+   */
+  protected updateEndpointParameters(): void {
+    const source = 'endpoint';
+    const { amfParameters } = this;
+    // clears previously set request parameters related to server configuration.
+    amfParameters.parametersValue = amfParameters.parametersValue.filter(item => item.source !== source);
+    const endpoint = this.endpointValue;
+    if (!endpoint) {
+      // we don't need to compute endpoint variables for a custom URLs.
+      return;
+    }
+    if (Array.isArray(endpoint.parameters) && endpoint.parameters.length) {
+      endpoint.parameters.forEach((param) => {
+        const item: OperationParameter = {
+          binding: param.binding || '',
+          paramId: param.id,
+          parameter: param,
+          source,
+        };
+        if (param.schema) {
+          item.schema = param.schema;
+          item.schemaId = param.schema.id;
+        }
+        amfParameters.parametersValue.push(item);
+      });
+    }
+  }
+
+  reset(): void {
+    this.securityList = undefined;
+    this.mimeType = undefined;
+    this.amfParameters.parametersValue = [];
+  }
+
+  /**
+   * Processes the selection of the domain id for an operation.
+   */
+  async processGraph(): Promise<void> {
+    await this.queryEndpoint();
+    await this.queryOperation();
+    await this.queryServers();
+    await this.queryProtocols();
+    this.processEndpoint();
+    this.processOperation();
+    this.processSecurity();
+    this.processPayload();
+    this.computeUrlValue();
+    this.readUrlData();
+    this.notifyChange();
+  }
+
+  /**
+   * Queries the store for the operation data, when needed.
+   */
+  async queryOperation(): Promise<void> {
+    const { domainId } = this;
+    if (!domainId || domainId === 'undefined') {
+      // this.operationValue = undefined;
+      return;
+    }
+    if (this.operationValue && this.operationValue.id === domainId) {
+      // in case the operation model was provided via the property setter.
+      return;
+    }
+    try {
+      const endpointId = this.endpointValue && this.endpointValue.id;
+      const info = await Events.Operation.get(this, domainId, endpointId);
+      this.operationValue = info;
+    } catch (e) {
+      const ex = e as Error;
+      Events.Telemetry.exception(this, ex.message, false);
+      Events.Reporting.error(this, ex, `Unable to query for API operation data: ${ex.message}`, this.localName);
+    }
+  }
+
+  /**
+   * Queries the store for the endpoint data.
+   * @returns {Promise<void>}
+   */
+  async queryEndpoint(): Promise<void> {
+    const { domainId, endpointId } = this;
+    if (!domainId || domainId === 'undefined') {
+      // this.endpointValue = undefined;
+      return;
+    }
+    if (this.endpointValue && this.endpointValue.id === endpointId) {
+      // in case the endpoint model was provided via the property setter.
+      return;
+    }
+    this.endpointValue = undefined;
+    try {
+      const info = await (endpointId ? Events.Endpoint.get(this, endpointId) : Events.Operation.getParent(this, domainId));
+      this.endpointValue = info;
+    } catch (e) {
+      const ex = e as Error;
+      Events.Telemetry.exception(this, ex.message, false);
+      Events.Reporting.error(this, ex, `Unable to query for API endpoint data: ${ex.message}`, this.localName);
+    }
+  }
+
+  /**
+   * Queries for the current servers value.
+   */
+  async queryServers(): Promise<void> {
+    const { domainId } = this;
+    const endpointId = this.endpointValue && this.endpointValue.id;
+    try {
+      const info = await Events.Server.query(this, {
+        endpointId,
+        methodId: domainId,
+      });
+      this.serversValue = info || undefined;
+    } catch (e) {
+      const ex = e as Error;
+      this.serversValue = undefined;
+      Events.Telemetry.exception(this, ex.message, false);
+      Events.Reporting.error(this, ex, `Unable to query for API servers: ${ex.message}`, this.localName);
+    }
+  }
+
+  /**
+   * Queries the API store for the API protocols list.
+   */
+  async queryProtocols(): Promise<void> {
+    this.protocolsValue = undefined;
+    try {
+      const info = await Events.Api.protocols(this);
+      this.protocolsValue = info;
+    } catch (e) {
+      const ex = e as Error;
+      Events.Telemetry.exception(this, ex.message, false);
+      Events.Reporting.error(this, ex, `Unable to query for API protocols list: ${ex.message}`, this.localName);
+    }
+  }
+
+  /**
+   * Searches for the current operation endpoint and sets variables from the endpoint definition.
+   */
+  protected processEndpoint(): void {
+    this.updateEndpointParameters();
+    this.computeUrlRegexp();
+  }
+
+  /**
+   * Collects operations input parameters into a single object.
+   */
+  protected processOperation(): void {
+    const source = 'request';
+    const operation = this.operationValue;
+    const { amfParameters } = this;
+    // clears previously set request parameters (query, path, headers)
+    amfParameters.parametersValue = amfParameters.parametersValue.filter(item => item.source !== source);
+    if (!operation) {
+      return;
+    }
+    const { request } = operation;
+    if (!request) {
+      return;
+    }
+    const uri: ApiDefinitions.IApiParameter[] = [];
+    if (Array.isArray(request.uriParameters)) {
+      // OAS has this weird thing where you can define URI parameters on the endpoint and the operation.
+      // this eliminates the duplicates and merges the schemas
+      request.uriParameters.forEach((param) => {
+        if (!param.paramName) {
+          uri.push(param);
+          return;
+        }
+        const index = amfParameters.parametersValue.findIndex(p => p.binding === 'path' && p.parameter.paramName === param.paramName);
+        if (index !== -1) {
+          // remove the parameter that is being replaced by the local definition
+          amfParameters.parametersValue.splice(index, 1);
+        }
+        uri.push(param);
+      });
+    }
+    this.appendToParams(uri, source);
+    this.appendToParams(request.queryParameters, source);
+    this.appendToParams(request.headers, source);
+    this.appendToParams(request.cookieParameters, source);
+  }
+
+  /**
+   * Processes security information for the UI.
+   */
+  protected processSecurity(): void {
+    const operation = this.operationValue;
+    if (!operation) {
+      return;
+    }
+    const { security } = operation;
+    this.securityList = AmfSecurity.readSecurityList(security);
+    const [first] = this.securityList;
+    this.selectedSecurity = first ? first.security.id : undefined;
+  }
+
+  /**
+   * Makes sure the correct mime type is selected for the current selection.
+   */
+  protected processPayload(): void {
+    const operation = this.operationValue;
+    if (!operation) {
+      return;
+    }
+    const { request } = operation;
+    if (!request) {
+      return;
+    }
+    const { payloads = [] } = request;
+    if (!payloads.length) {
+      return;
+    }
+    let mime = this.mimeType;
+    
+    if (mime) {
+      const has = payloads.find(p => p.mediaType === mime);
+      if (!has) {
+        mime = undefined;
+      }
+    }
+    if (!mime) {
+      const first = payloads.find(p => p.mediaType);
+      if (first) {
+        mime = first.mediaType;
+      }
+    }
+    this.mimeType = mime;
+  }
+
+  /**
+   * Appends a list of parameters to the list of rendered parameters
+   */
+  protected appendToParams(list: ApiDefinitions.IApiParameter[], source: string): void {
+    const params = this.amfParameters.parametersValue;
+    if (Array.isArray(list)) {
+      list.forEach((param) => {
+        params.push({
+          paramId: param.id,
+          parameter: param,
+          binding: param.binding || '',
+          source,
+          schema: param.schema,
+          schemaId: param.schema && param.schema.id ? param.schema.id : undefined,
+        });
+      });
+    }
+  }
+
+  /**
+   * A handler for the change event dispatched by the `raw` editor.
+   */
+  protected rawBodyChangeHandler(e: Event): void {
+    const editor = e.target as BodyTextEditor;
+    const { value, dataset } = editor;
+    const { payloadId } = dataset;
+    if (!payloadId) {
+      return;
+    }
+    cachePayloadValue(payloadId, value as string);
+  }
+
+  /**
+   * A handler for the change event dispatched by the 
+   * `urlEncode` editor.
+   * Updated the local value, model, and notifies the change.
+   */
+  protected modelBodyEditorChangeHandler(e: Event): void {
+    const editor = e.target as BodyUrlEncodedEditor;
+    const { value, model, dataset } = editor;
+    const { payloadId } = dataset;
+    if (!payloadId) {
+      return;
+    }
+    cachePayloadValue(payloadId, value as string, model);
+  }
+
+  protected handleAuthSelect(e: CustomEvent<UiDropdownListSelection>): void {
+    const { item } = e.detail;
+    const { id } = item.dataset;
+    if (!id) {
+      return;
+    }
+    this.selectedSecurity = id;
+    this.requestUpdate();
+  }
+
+  /**
+   * Handles send button click.
+   * Depending on authorization validity it either sends the
+   * request or forces authorization and sends the request.
+   */
+  protected sendHandler(): void {
+    this.execute();
+  }
+
+  /**
+   * To be called when the user want to execute the request but
+   * authorization is invalid (missing values).
+   * This function brings the auth panel to front and displays error toast
+   */
+  async authAndExecute(): Promise<void> {
+    const { shadowRoot } = this;
+    if (!shadowRoot) {
+      throw new Error(`Invalid state. The element is not initialized.`);
+    }
+
+    const panel = shadowRoot.querySelector('api-authorization-editor');
+    if (!panel) {
+      throw new Error(`Invalid state. The authorization editor element was removed from the DOM.`);
+    }
+    await panel.authorize();
+    const valid = panel.validate();
+    if (valid) {
+      this.execute();
+    }
+  }
+
+  protected async proxyRequest(init: IRequestProxyInit): Promise<IProxyResult<IRequestLog> | undefined> {
+    let result: IProxyResult<IRequestLog> | undefined;
+    try {
+      result = await CoreEvents.Transport.Core.request(init, this);
+    } catch (e) {
+      // ...
+    }
+    return result;
+  }
+
+  /**
+   * Proxies the request to the endpoint using the core libraries.
+   */
+  async execute(): Promise<void> {
+    if (this.loadingRequest) {
+      this.abort();
+    }
+    Events.Telemetry.event(this, {
+      category: EventCategory,
+      action: 'request-execute',
+      label: 'true'
+    });
+    const request = await this.serialize();
+    const ctrl = new AbortController();
+    this.requestController = ctrl;
+    const init: IRequestProxyInit = {
+      kind: HttpRequestKind,
+      request: request.expects,
+      authorization: request.authorization,
+      signal: ctrl.signal,
+    };
+    this.loadingRequest = true;
+    const result = await this.proxyRequest(init);
+    this.loadingRequest = false;
+    if (!result) {
+      if (ctrl.signal.aborted) {
+        return;
+      }
+      const message = `The request was not sent. Proxy not available.`;
+      SnackNotifications.notify(message, { timeout: 2000, close: true });
+      throw new Error(message);
+    }
+    this.dispatchEvent(new CustomEvent<IRequestLog>('response', { detail: result.result }));
+  }
+
+  /**
+   * Uses the `requestController` to abort the ongoing HTTP request.
+   */
+  abort(): void {
+    Events.Telemetry.event(this, {
+      category: EventCategory,
+      action: 'request-abort',
+      label: 'true'
+    });
+    const { requestController } = this;
+    if (!requestController) {
+      return;
+    }
+    requestController.abort();
+    this.requestController = undefined;
+    this.loadingRequest = false;
+  }
+
+  /**
+   * Event handler for abort click.
+   */
+  protected abortHandler(): void {
+    this.abort();
+  }
+
+  /**
+   * Serializes the state of the request editor into the `ApiConsoleRequest` object.
+   */
+  async serialize(): Promise<IRequest> {
+    const op = this.operationValue;
+    if (!op) {
+      throw new Error(`No API operation defined on the editor`);
+    }
+    const method = (op.method || 'get').toUpperCase();
+    const params: ApiDefinitions.IApiParameter[] = [];
+    const { amfParameters } = this;
+    amfParameters.parametersValue.forEach((item) => {
+      const { parameter, enabled } = item;
+      if (enabled === false) {
+        return;
+      }
+      params.push(parameter);
+    });
+    const report = AmfInputParser.reportRequestInputs(params, InputCache.getStore(this, true), amfParameters.nilValues);
+    const serverUrl = computeEndpointUri({
+      baseUri: this.effectiveBaseUri,
+      server: this.server,
+      endpoint: this.endpointValue,
+      protocols: this.protocols,
+      forceHttpProtocol: true,
+    });
+    let url = applyUrlVariables(serverUrl, report.path, true);
+    url = applyUrlParameters(url, report.query, true);
+    const headers = generateHeaders(report.header);
+
+    const instance = new Request();
+    const expects = instance.getExpects();
+    expects.method = method;
+    expects.url = url;
+    expects.headers = headers;
+    
+    if (!['GET', 'HEAD'].includes(method)) {
+      let body: string | FormData | Blob | File | Buffer | ArrayBuffer | undefined;
+      const { payload } = this;
+      if (payload) {
+        const info = readCachePayloadValue(payload.id);
+        if (info && info.value) {
+          body = info.value;
+        }
+      }
+      if (body instanceof FormData) {
+        const parser = new Headers(expects.headers);
+        parser.delete('content-type');
+        expects.headers = parser.toString();
+      } else if (payload) {
+        expects.headers = ensureContentType(expects.headers || '', payload.mediaType);
+      }
+      if (typeof body !== 'undefined') {
+        await expects.writePayload(body);
+      }
+    }
+
+    const result = instance.toJSON();
+
+    const authElement = this.shadowRoot?.querySelector('api-authorization-editor');
+    if (authElement) {
+      const auth = authElement.serialize();
+      result.authorization = auth;
+    }
+    return result;
+  }
+
+  /**
+   * Handler for the `oauth2-redirect-uri-changed` custom event. Changes
+   * the `redirectUri` property.
+   */
+  protected authRedirectChangedHandler(e: CustomEvent): void {
+    this.redirectUri = e.detail.value;
+  }
+
+  /**
+   * Handle event for populating annotated fields in the editor.
+   */
+  protected populateAnnotatedFieldsHandler(e: CustomEvent): void {
+    const populationInfoArray: PopulationInfo[] = e.detail.values;
+    const { parametersValue = [] } = this.amfParameters;
+    const allAnnotated = parametersValue.filter(param => Array.isArray(param.parameter.customDomainProperties) && !!param.parameter.customDomainProperties.length);
+    let update = false;
+    populationInfoArray.forEach(({ annotationName, annotationValue, fieldValue }) => {
+      allAnnotated.forEach((item) => {
+        const { parameter, paramId } = item;
+        const hasAnnotation = (parameter.customDomainProperties || []).some((prop) => prop.name === annotationName && (prop.extension as AmfShapes.IApiScalarNode).value === annotationValue);
+        if (!hasAnnotation) {
+          return;
+        }
+        InputCache.set(this, paramId, fieldValue, true);
+        update = true;
+      });
+    });
+    if (update) {
+      this.requestUpdate();
+    }
+    /* @TODO populate values for the security schema. */
+  }
+
+  /**
+   * Computes a current server value for selection made in the server selector.
+   */
+  protected updateServer(): void {
+    const { serverValue, serverType, servers = [] } = this;
+    if (serverType !== 'server') {
+      this.serverLocalValue = undefined;
+    } else {
+      this.serverLocalValue = servers.find(server => server.url === serverValue);
+    }
+    this.readUrlData();
+    this.computeUrlRegexp();
+  }
+
+  /**
+   * Handler for the change dispatched from the server selector.
+   */
+  protected serverCountHandler(e: CustomEvent): void {
+    const { value = 0 } = e.detail;
+    this.serversCount = value;
+    this.updateServer();
+    this.requestUpdate();
+  }
+
+  /**
+   * Handler for the change dispatched from the server selector.
+   */
+  protected serverHandler(e: CustomEvent): void {
+    const { value, type } = e.detail;
+    this.serverType = type;
+    this.serverValue = value;
+    this.updateServer();
+    this.computeUrlRegexp();
+  }
+
+  /**
+   * Computes a regexp for the base URI defined in the server to process URL input change
+   * and set the `.urlSearchRegexpValue` value.
+   * This should be computed only when a server and en endpoint change.
+   */
+  protected computeUrlRegexp(): void {
+    const { effectiveBaseUri } = this;
+    let value;
+    if (effectiveBaseUri) {
+      value = computeEndpointUri({
+        baseUri: effectiveBaseUri,
+        endpoint: this.endpointValue,
+        forceHttpProtocol: true,
+      });
+    } else {
+      value = this.apiBaseUri;
+    }
+    if (!value) {
+      this.urlSearchRegexpValue = undefined;
+    } else {
+      value = value.replace('?', '\\?');
+      value = value.replace(/(\.|\/)/g, '\\$1');
+      value = value.replace(/{[\w\\+]+}/g, '([a-zA-Z0-9\\$\\-_\\.~\\+!\'\\(\\)\\*\\{\\}]+)');
+      value += '.*';
+      this.urlSearchRegexpValue = new RegExp(value);
+    }
+  }
+
+  protected handleMediaTypeSelect(e: Event): void {
+    const node = e.target as RadioElement;
+    const { value } = node;
+    this.mimeType = value;
+    const ctParam = this.amfParameters.parametersValue.find(p => p.binding === 'header' && (p.parameter.name || '').toLocaleLowerCase() === 'content-type');
+    if (ctParam) {
+      InputCache.set(this, ctParam.paramId, value, true);
+    }
+  }
+
+  protected async notifyResizeAfterUpdate(): Promise<void> {
+    await this.updateComplete;
+    this.dispatchEvent(new Event('resize', { bubbles: true, composed: true }));
+  }
+
+  /**
+   * Toggles optional parameter groups.
+   */
+  protected handleOptionalToggle(e: Event): void {
+    const node = e.target as HTMLElement;
+    const { target } = node.dataset;
+    if (!target) {
+      return;
+    }
+    if (!Array.isArray(this.openedOptional)) {
+      this.openedOptional = [];
+    }
+    if (this.openedOptional.includes(target)) {
+      const index = this.openedOptional.indexOf(target);
+      this.openedOptional.splice(index, 1);
+    } else {
+      this.openedOptional.push(target);
+    }
+    this.requestUpdate();
+    this.notifyResizeAfterUpdate();
+  }
+
+  /**
+   * When enabled it adds a new custom parameter to the request section defined in the source button.
+   */
+  protected addCustomHandler(e: Event): void {
+    const button = e.currentTarget as HTMLElement;
+    const { type } = button.dataset;
+    if (!['query', 'header'].includes(type as string)) {
+      return;
+    }
+    const id = uuidV4();
+    const param: OperationParameter = {
+      binding: type || '',
+      source: 'custom',
+      paramId: id,
+      parameter: {
+        id,
+        required: true,
+        binding: type,
+        name: '',
+        examples: [],
+        payloads: [],
+        customDomainProperties: [],
+        types: [],
+      },
+    };
+    this.amfParameters.parametersValue.push(param);
+    this.requestUpdate();
+  }
+
+  /**
+   * Updates path/query model from user input.
+   *
+   * @param e The change event
+   */
+  protected handleUrlEditorChange(e: Event): void {
+    const { value } = e.target as Input;
+    let matches;
+    const uriRegexp = this.urlSearchRegexpValue;
+    // parameters must be in order from server to the endpoint
+    const pathParams = this.getOrderedPathParams();
+    let changed = false;
+    if (pathParams.length && uriRegexp) {
+      matches = value.match(uriRegexp);
+      if (matches) {
+        matches.shift();
+        changed = this.applyUriValues(matches, pathParams);
+      }
+    }
+    const matchesNew = value.match(/[^&?]*?=[^&?]*/g);
+    if (matchesNew) {
+      const params: Record<string, string|string[]> = {};
+      matchesNew.forEach((item) => applyQueryParamStringToObject(item, params));
+      const qpChanged = this.applyQueryParamsValues(params);
+      if (!changed) {
+        changed = qpChanged;
+      }
+    }
+    this.url = value;
+    this.validateUrl();
+    this.notifyChange();
+    this.requestUpdate();
+  }
+
+  /**
+   * Sets the value of `.urlInvalidValue` and therefore `urlInvalid` properties.
+   */
+  validateUrl(): void {
+    this.urlInvalidValue = !this.readUrlValidity();
+    this.requestUpdate();
+  }
+
+  /**
+   * Validates the current URL value.
+   * @returns True when the current URL is a valid URL.
+   */
+  protected readUrlValidity(): boolean {
+    const { url } = this;
+    if (!url) {
+      return false;
+    }
+    if (typeof url !== 'string') {
+      return false;
+    }
+    if (url.indexOf('{') !== -1 && url.indexOf('}') !== -1) {
+      return false;
+    }
+    const { shadowRoot } = this;
+    if (!shadowRoot) {
+      return true;
+    }
+    const inputElement = shadowRoot.querySelector('.url-input') as Input;
+    if (inputElement) {
+      return inputElement.reportValidity();
+    }
+    return true;
+  }
+
+  /**
+   * Reads the ordered list of path parameters from the server and the endpoint.
+   */
+  protected getOrderedPathParams(): OperationParameter[] {
+    const result: OperationParameter[] = [];
+    const { effectiveBaseUri } = this;
+    let url;
+    if (effectiveBaseUri) {
+      url = computeEndpointUri({
+        baseUri: effectiveBaseUri,
+        endpoint: this.endpointValue,
+        forceHttpProtocol: true,
+      });
+    } else {
+      url = this.apiBaseUri;
+    }
+    if (!url) {
+      return result;
+    }
+    const matches = url.match(/{[\w\\+]+}/g);
+    if (!matches) {
+      return result;
+    }
+    const all = this.amfParameters.parametersValue;
+    matches.forEach((tpl) => {
+      const name = tpl.substr(1, tpl.length - 2);
+      const param = all.find(p => p.binding === 'path' && p.parameter.name === name);
+      if (param) {
+        result.push(param);
+      }
+    });
+    return result;
+  }
+
+  /**
+   * Applies values from the `values` array to the uri parameters which names are in the `names` array.
+   * Both lists are ordered list of parameters.
+   *
+   * @param values Values for the parameters
+   * @param params List of path parameters.
+   * @returns True when any parameter was changed.
+   */
+  protected applyUriValues(values: string[], params: OperationParameter[]): boolean {
+    let changed = false;
+    for (let i = 0, len = params.length; i < len; i++) {
+      const value = values[i];
+      if (value && value[0] === '{') {
+        // This is still a variable
+        continue;
+      }
+      const param = params[i];
+      if (InputCache.get(this, param.paramId, true) !== value) {
+        InputCache.set(this, param.paramId, value, true);
+        changed = true;
+      }
+    }
+    return changed;
+  }
+
+  /**
+   * Applies query parameters values to the render list.
+   *
+   * @returns True when any parameter was changed.
+   */
+  protected applyQueryParamsValues(map: Record<string, string|string[]>): boolean {
+    if (!map) {
+      return false;
+    }
+    const keys = Object.keys(map);
+    let changed = false;
+    keys.forEach((key) => {
+      const value = map[key];
+      if (value && value[0] === '{') {
+        // This is still a variable
+        return;
+      }
+      const param = this.amfParameters.parametersValue.find(p => p.binding === 'query' && p.parameter.name === key);
+      if (param) {
+        if (InputCache.get(this, param.paramId, true) !== value) {
+          InputCache.set(this, param.paramId, value, true);
+          changed = true;
+        }
+      }
+    });
+    return changed;
+  }
+
+  protected internalSendHandler(e: Event): void {
+    e.stopPropagation();
+    this.execute();
+  }
+
+  /**
+   * A handler for the change event on the authorization panel.
+   */
+  protected authorizationChangeHandler(): void {
+    this.notifyChange();
+  }
+
+  override render(): TemplateResult {
+    return html`
+    <div class="content">
+      ${this.serverSelectorTemplate()}
+      ${this.urlLabelTemplate()}
+      ${this.renderUrlEditor()}
+      ${this.parametersTemplate()}
+      ${this.headersTemplate()}
+      ${this.mediaTypeSelectorTemplate()}
+      ${this.bodyTemplate()}
+      ${this.authorizationTemplate()}
+      ${this.formActionsTemplate()}
+    </div>`;
+  }
+
+  /**
+   * @return Template for the request URL label.
+   */
+  protected urlLabelTemplate(): TemplateResult | typeof nothing {
+    const { urlLabel, url } = this;
+    if (!urlLabel) {
+      return nothing;
+    }
+    return html`<div class="url-label text-selectable" title="Current request URL">${url}</div>`;
+  }
+
+  protected authorizationTemplate(): TemplateResult | typeof nothing {
+    const { security } = this;
+    if (!security) {
+      return nothing;
+    }
+    const { selectedSecurity, redirectUri, credentialsSource } = this;
+    const rendered = security.find(i => i.security.id === selectedSecurity);
+    if (!rendered) {
+      return nothing;
+    }
+    return html`
+    <section class="authorization params-section">
+      <div class="section-title"><span class="label">Credentials</span></div>
+      ${security.length > 1 ? this.authorizationSelectorTemplate(security, rendered) : ''}
+      <api-authorization-editor 
+        .security="${rendered.security}"
+        .oauth2RedirectUri="${redirectUri}"
+        .credentialsSource="${credentialsSource}"
+        @change="${this.authorizationChangeHandler}"></api-authorization-editor>
+    </section>
+    `;
+  }
+
+  /**
+   * @returns The template for the security drop down selector.
+   */
+  protected authorizationSelectorTemplate(security: SecuritySelectorListItem[], selected: SecuritySelectorListItem): TemplateResult {
+    const finalValue = selected.labels.join(', ');
+    return html`
+    <ui-dropdown-list
+      class="authorization-selector"
+      closeOnOutsideClick
+      matchTriggerWidth
+      @select="${this.handleAuthSelect}"
+    >
+      <ui-text-field 
+        class="dropdown-trigger" 
+        label="Authorization method" 
+        readOnly 
+        name="authorization"
+        .value="${finalValue || ''}" 
+        @select="${EventUtils.cancelEvent}"
+      >
+        <ui-icon icon="arrowDropDown" role="presentation" slot="suffix"></ui-icon>
+      </ui-text-field>
+      <ui-list slot="dropdown" role="menu" selector="[data-value]" selectActive>
+        ${security.map((item) => this.authorizationSelectorItemTemplate(item))}
+      </ui-list>
+    </ui-dropdown-list>
+    `;
+  }
+
+  /**
+   * @returns The template for the security drop down selector list item.
+   */
+  protected authorizationSelectorItemTemplate(info: SecuritySelectorListItem): TemplateResult {
+    const { labels, types, security } = info;
+    
+    const label = labels.join(', ');
+    const type = types.join(', ');
+    const single = !type;
+    return html`
+    <ui-list-item 
+      role="menuitem" 
+      lines="${single ? 'one' : 'two'}"
+      data-id="${security.id}"
+    >
+      ${label}
+      ${!single ? html`<div slot="supporting-text">${type}</div>` : ''}
+    </ui-list-item>
+    `;
+  }
+
+  protected formActionsTemplate(): TemplateResult {
+    const loading = this.loadingRequest;
+    return html`
+    <div class="action-bar">
+      ${loading ? this.abortButtonTemplate() : this.sendButtonTemplate()}
+      <ui-progress ?hidden="${!loading}" indeterminate class="request-progress"></ui-progress>
+    </div>`;
+  }
+
+  /**
+   * Creates a template for the "abort" button.
+   */
+  protected abortButtonTemplate(): TemplateResult {
+    return html`
+    <ui-button
+      class="send-button abort"
+      type="filled"
+      @click="${this.abortHandler}"
+    >Abort</ui-button>`;
+  }
+
+  /**
+   * Creates a template for the "send" or "auth and send" button.
+   */
+  protected sendButtonTemplate(): TemplateResult {
+    return html`
+    <ui-button
+      class="send-button"
+      type="filled"
+      @click="${this.sendHandler}"
+    >Send</ui-button>`;
+  }
+
+  /**
+   * @return A template for the server selector
+   */
+  protected serverSelectorTemplate(): TemplateResult {
+    const {
+      serverType,
+      serverValue,
+      allowCustomBaseUri,
+      serverSelectorHidden,
+      domainId,
+    } = this;
+    return html`
+    <api-server-picker
+      ?hidden="${serverSelectorHidden}"
+      ?custom="${allowCustomBaseUri}"
+      .value="${serverValue}"
+      .type="${serverType as ServerType}"
+      .domainId="${domainId}"
+      domainType="operation"
+      auto
+      @serverscountchanged="${this.serverCountHandler}"
+      @apiserverchanged="${this.serverHandler}"
+    >
+      <slot name="custom-base-uri" slot="custom-base-uri"></slot>
+    </api-server-picker>`;
+  }
+
+  /**
+   * @return 
+   */
+  protected parametersTemplate(): TemplateResult | typeof nothing {
+    const qp: OperationParameter[] = [];
+    const path: OperationParameter[] = [];
+    // NOTE, the "* Required field" has been added after the a11y audit of API Console.
+    let hasRequired = false;
+    const { amfParameters } = this;
+    amfParameters.parametersValue.forEach((item) => {
+      if (!hasRequired && item.parameter && item.parameter.required) {
+        hasRequired = true;
+      }
+      if (item.binding === 'query') {
+        qp.push(item);
+      } else if (item.binding === 'path') {
+        path.push(item);
+      }
+    });
+    const { allowCustom, openedOptional = [] } = this;
+    if (!allowCustom && !qp.length && !path.length) {
+      return nothing;
+    }
+    const pathOptions = Object.freeze({ required: true });
+    const queryClasses = {
+      'query-params': true,
+      'hide-optional': !!this.allowHideOptional && !openedOptional.includes('query'),
+    };
+    return html`
+    <section class="params-section parameter">
+      <div class="section-title"><span class="label">Parameters</span></div>
+      ${hasRequired ? html`<p class="required-field">* Required field</p>` : ''}
+      <div class="path-params">
+        ${path.map(param => amfParameters.parameterTemplate(param, pathOptions))}
+      </div>
+      <div class="${classMap(queryClasses)}">
+        ${this.renderToggleOptional('query', qp)}
+        ${qp.map(param => amfParameters.parameterTemplate(param))}
+        ${allowCustom ? this.addCustomButtonTemplate('query') : ''}
+      </div>
+    </section>
+    `;
+  }
+
+  protected headersTemplate(): TemplateResult | typeof nothing {
+    const headers: OperationParameter[] = [];
+    // NOTE, the "* Required field" has been added after the a11y audit of API Console.
+    let hasRequired = false;
+    const { amfParameters } = this;
+    amfParameters.parametersValue.forEach((item) => {
+      if (item.binding === 'header') {
+        headers.push(item);
+        if (!hasRequired && item.parameter && item.parameter.required) {
+          hasRequired = true;
+        }
+      }
+    });
+    const { allowCustom, openedOptional = [] } = this;
+    if (!allowCustom && !headers.length) {
+      return nothing;
+    }
+    const classes = {
+      'header-params': true,
+      'hide-optional': !!this.allowHideOptional && !openedOptional.includes('header'),
+    };
+    return html`
+    <section class="params-section header" aria-label="HTTP headers">
+      <div class="section-title"><span class="label">Headers</span></div>
+      ${hasRequired ? html`<p class="required-field">* Required field</p>` : ''}
+      ${this.renderToggleOptional('header', headers)}
+      <div class="${classMap(classes)}">
+        ${headers.map(param => amfParameters.parameterTemplate(param))}
+        ${allowCustom ? this.addCustomButtonTemplate('header') : ''}
+      </div>
+    </section>
+    `;
+  }
+
+  /**
+   * @returns The template for the add custom parameter button
+   */
+  protected addCustomButtonTemplate(type: string): TemplateResult {
+    return html`
+    <div class="add-custom-button">
+      <ui-button
+        data-type="${type}"
+        title="Adds a new custom parameter to the request"
+        @click="${this.addCustomHandler}"
+        type="outlined"
+      >
+        <ui-icon icon="add" role="presentation"></ui-icon>
+        Add custom
+      </ui-button>
+    </div>
+    `;
+  }
+
+  /**
+   * @return The template for the payload's mime type selector.
+   */
+  protected mediaTypeSelectorTemplate(): TemplateResult | typeof nothing {
+    const { payloads, mimeType } = this;
+    if (!payloads || payloads.length === 1) {
+      return nothing;
+    }
+    const mimes = payloads.map(p => p.mediaType);
+    let index = mimes.indexOf(mimeType);
+    if (index === -1) {
+      index = 0;
+    }
+
+    return html`
+    <div class="payload-mime-selector">
+      <span id="body-mime" class="label-large">Body media type</span>
+      ${mimes.map((item) => html`
+      <label class="label-large">
+        <ui-radio
+          name="mediaTypeValue"
+          value="${item || ''}"
+          .checked="${item === mimeType}"
+          @change="${this.handleMediaTypeSelect}"
+        ></ui-radio>
+        ${item}
+      </label>
+      `)}
+    </div>
+    `;
+  }
+
+  /**
+   * @returns The template for the body editor. 
+   */
+  protected bodyTemplate(): TemplateResult | typeof nothing {
+    const { payload } = this;
+    if (!payload) {
+      return nothing;
+    }
+    const info = getPayloadValue(payload);
+    const mimeType = payload.mediaType;
+    let content: TemplateResult;
+    if (mimeType === 'application/x-www-form-urlencoded') {
+      content = this.formDataEditorTemplate(info, payload.id);
+    } else if (mimeType === 'multipart/form-data') {
+      content = this.multipartEditorTemplate(info, payload.id);
+    } else {
+      content = this.rawEditorTemplate(info, payload.id, mimeType);
+    }
+    return html`
+    <section class="params-section body" aria-label="HTTP body">
+      <div class="section-title"><span class="label">Body</span></div>
+      ${content}
+    </section>
+    `;
+  }
+
+  /**
+   * @returns The template for the editor that specializes in the URL encoded form data
+   */
+  protected formDataEditorTemplate(info: PayloadInfo, id: string): TemplateResult {
+    const editorModel = info.model;
+    const effectiveValue = Array.isArray(editorModel) && editorModel.length ? undefined : info.value;
+    return html`
+    <http-body-urlencoded-editor 
+      class="body-editor"
+      autoEncode
+      .value="${ifProperty(effectiveValue)}"
+      .model="${ifProperty(editorModel)}"
+      data-payload-id="${id}"
+      @change="${this.modelBodyEditorChangeHandler}"
+    ></http-body-urlencoded-editor>
+    `;
+  }
+
+  /**
+   * @returns The template for the editor that specializes in the multipart form data
+   */
+  protected multipartEditorTemplate(info: PayloadInfo, id: string): TemplateResult {
+    const editorModel = info.model;
+    const effectiveValue = Array.isArray(editorModel) && editorModel.length ? undefined : info.value;
+    return html`
+    <http-body-multipart-editor 
+      class="body-editor"
+      .value="${ifProperty(effectiveValue)}"
+      .model="${ifProperty(editorModel)}"
+      data-payload-id="${id}"
+      @change="${this.modelBodyEditorChangeHandler}"
+    ></http-body-multipart-editor>
+    `;
+  }
+
+  /**
+   * @returns The template for the editor that specializes in any text data
+   */
+  protected rawEditorTemplate(info: PayloadInfo, id: string, mimeType?: string): TemplateResult {
+    let schemas;
+    if (Array.isArray(info.schemas) && info.schemas.length) {
+      schemas = info.schemas;
+    }
+    return html`
+    <http-body-text-editor
+      class="body-editor" 
+      .value="${info.value as string}" 
+      .contentType="${mimeType}"
+      .schemas="${ifProperty(schemas)}"
+      data-payload-id="${id}"
+      @change="${this.rawBodyChangeHandler}"
+    ></http-body-text-editor>
+    `;
+  }
+
+  /**
+   * @param target The name of the target parameter group.
+   * @param params The list of parameters. When all are required or empty it won't render then button.
+   * @returns Template for the switch button to toggle visibility of the optional items.
+   */
+  protected renderToggleOptional(target: string, params: OperationParameter[]): TemplateResult | typeof nothing {
+    const { openedOptional = [], allowHideOptional } = this;
+    if (!allowHideOptional || !params || !params.length) {
+      return nothing;
+    }
+    const optional = params.some(p => !!p.parameter && !p.parameter.required);
+    if (!optional) {
+      return nothing;
+    }
+    const checked = openedOptional.includes(target);
+    return html`
+    <div class="optional-checkbox">
+      <label class="label-large">
+        <ui-switch
+          class="toggle-optional-switch"
+          .checked="${checked}"
+          @change="${this.handleOptionalToggle}"
+          title="Toggles optional parameters"
+          data-target="${target}"
+          name="toggleOptional"
+          aria-label="Toggle optional parameters"
+        ></ui-switch>
+        Show optional parameters
+      </label>
+    </div>
+    `;
+  }
+
+  /**
+   * @returns A template for the URL editor.
+   */
+  protected renderUrlEditor(): TemplateResult | typeof nothing {
+    const { urlEditor, url, urlInvalid } = this;
+    if (!urlEditor) {
+      return nothing;
+    }
+    return html`
+    <div class="url-input-wrapper">
+      <ui-text-field  
+        name="url" 
+        type="url" 
+        class="url-input"
+        ?invalid="${urlInvalid}"
+        required
+        invalidText="The URL is invalid"
+        .value="${url || ''}"
+        @change="${this.handleUrlEditorChange}"
+        @blur="${this.validateUrl}"
+        label="Request URL"
+      ></ui-text-field>
+    </div>
+    `;
+  }
+}