@api-client/ui 0.0.4 → 0.0.7

package/dist/elements/http/RequestEditor.js

@@ -15,6 +15,7 @@ import '../../define/http/http-headers-form.js';
 import '../../define/http/http-snippets.js';
 import '../../define/http/http-body-editor.js';
 import '../../define/http/http-assertions.js';
+import '../../define/http/http-flows.js';
 import '../../define/http/http-request-config.js';
 import '../../define/ui/ui-dropdown-list.js';
 import '../../define/ui/ui-list.js';
@@ -42,83 +43,6 @@ export const NonPayloadMethods = ['GET', 'HEAD'];
  * @fires uichange - When the UI model change.
  */
 export default class RequestEditor extends ApiElement {
-    /**
-     * A promise set when reading payload from the `request` object.
-     * It is resolved after the payload is read anf the `payload` property is set.
-     */
-    readingPayloadPromise = Promise.resolve();
-    /**
-     * A promise set when the payload is being written to the `request` object.
-     * It is resolved after the `payload` is set on the request as a serializable object.
-     */
-    writingPayloadPromise = Promise.resolve();
-    /**
-     * A flag used to determine when the payload is being read for the synchronous code.
-     */
-    readingPayload = false;
-    /**
-     * The base request object.
-     */
-    request = new HttpRequest().toJSON();
-    /**
-     * The request payload.
-     * It can be just a string or an object with the payload data depending on the content type.
-     */
-    payload;
-    /**
-     * The current content type value.
-     */
-    contentType;
-    authorization;
-    assertions;
-    /**
-     * Redirect URL for the OAuth2 authorization.
-     * If can be also set by dispatching `oauth2-redirect-url-changed`
-     * with `value` property on the `detail` object.
-     */
-    oauth2RedirectUri;
-    /**
-     * When set the editor is in read only mode.
-     */
-    readOnly = false;
-    /**
-     * A value to be passed to the OAuth 2 `authorizationUri` property in case
-     * if current configuration has no value.
-     * This is to be used as a default value.
-     */
-    oauth2AuthorizationUri;
-    /**
-     * A value to be passed to the OAuth 2 `accessTokenUri` property in case
-     * if current configuration has no value.
-     * This is to be used as a default value.
-     */
-    oauth2AccessTokenUri;
-    /**
-     * When set it ignores all `content-*` headers when the request method is `GET`.
-     * When not set or `false` it renders a warning message.
-     */
-    ignoreContentOnGet = false;
-    /**
-     * When set the `content-` headers warning dialog is rendered.
-     */
-    contentHeadersDialogOpened = false;
-    /**
-     * To be set when the request is being transported.
-     */
-    loading = false;
-    /**
-     * An index of currently opened tab.
-     * @default 0
-     */
-    selectedTab = 'parameters';
-    /**
-     * Optional instance of the `RequestUiMeta` to store the UI state.
-     */
-    ui;
-    /**
-     * HTTP request configuration for the transport.
-     */
-    config = new RequestConfig().toJSON();
     /**
      * @returns True when the request cannot have the payload on the message.
      */
@@ -129,19 +53,62 @@ export default class RequestEditor extends ApiElement {
         }
         return !NonPayloadMethods.includes(request.method);
     }
-    _awaitingOAuth2authorization = false;
-    /**
-     * This is set by the internal logic. When `ignoreContentOnGet` is set and the headers have `content-` headers
-     * a dialog is rendered when trying to send the request. When the user chooses to ignore the warning this
-     * flag makes sure that `send()` does not check headers.
-     *
-     * @todo(pawel): This should be done in the request logic module plugin.
-     * Plugins can stop request indefinitely or cancel it.
-     */
-    ignoreValidationOnGet = false;
-    snippets;
     constructor() {
         super();
+        /**
+         * A promise set when reading payload from the `request` object.
+         * It is resolved after the payload is read anf the `payload` property is set.
+         */
+        this.readingPayloadPromise = Promise.resolve();
+        /**
+         * A promise set when the payload is being written to the `request` object.
+         * It is resolved after the `payload` is set on the request as a serializable object.
+         */
+        this.writingPayloadPromise = Promise.resolve();
+        /**
+         * A flag used to determine when the payload is being read for the synchronous code.
+         */
+        this.readingPayload = false;
+        /**
+         * The base request object.
+         */
+        this.request = new HttpRequest().toJSON();
+        /**
+         * When set the editor is in read only mode.
+         */
+        this.readOnly = false;
+        /**
+         * When set it ignores all `content-*` headers when the request method is `GET`.
+         * When not set or `false` it renders a warning message.
+         */
+        this.ignoreContentOnGet = false;
+        /**
+         * When set the `content-` headers warning dialog is rendered.
+         */
+        this.contentHeadersDialogOpened = false;
+        /**
+         * To be set when the request is being transported.
+         */
+        this.loading = false;
+        /**
+         * An index of currently opened tab.
+         * @default 0
+         */
+        this.selectedTab = 'parameters';
+        /**
+         * HTTP request configuration for the transport.
+         */
+        this.config = new RequestConfig().toJSON();
+        this._awaitingOAuth2authorization = false;
+        /**
+         * This is set by the internal logic. When `ignoreContentOnGet` is set and the headers have `content-` headers
+         * a dialog is rendered when trying to send the request. When the user chooses to ignore the warning this
+         * flag makes sure that `send()` does not check headers.
+         *
+         * @todo(pawel): This should be done in the request logic module plugin.
+         * Plugins can stop request indefinitely or cancel it.
+         */
+        this.ignoreValidationOnGet = false;
         this.config.enabled = false;
         this.handleInternalSend = this.handleInternalSend.bind(this);
     }
@@ -349,8 +316,8 @@ export default class RequestEditor extends ApiElement {
         const request = this.getRequest();
         request.method = verb;
         this.requestUpdate();
-        this.notifyRequestChanged();
-        this.notifyChanged('method', verb);
+        this.notifyChange();
+        this.notifyPropertyChanged('method', verb);
         if (!this.isPayload && this.selectedTab === 'payload') {
             this.selectedTab = 'headers';
         }
@@ -377,8 +344,8 @@ export default class RequestEditor extends ApiElement {
         const request = this.getRequest();
         request.url = value;
         this.requestUpdate();
-        this.notifyRequestChanged();
-        this.notifyChanged('url', value);
+        this.notifyChange();
+        this.notifyPropertyChanged('url', value);
         this.computeSnippetsRequest();
     }
     handleTabSelect(e) {
@@ -386,7 +353,7 @@ export default class RequestEditor extends ApiElement {
         this.selectedTab = info.select;
         if (this.ui) {
             this.ui.selectedEditor = this.selectedTab;
-            this.notifyChanged('ui', this.ui);
+            this.notifyPropertyChanged('ui', this.ui);
         }
         CoreEvents.Telemetry.event({
             category: 'Request editor',
@@ -414,7 +381,7 @@ export default class RequestEditor extends ApiElement {
             this.ui.headers = {};
         }
         // this.ui.headers.source = source;
-        this.notifyChanged('ui', this.ui);
+        this.notifyPropertyChanged('ui', this.ui);
     }
     selectHeaders(model) {
         const request = this.getRequest();
@@ -423,7 +390,7 @@ export default class RequestEditor extends ApiElement {
         this.contentType = ct && ct.value;
         this.setPayloadMimeOption(request, this.contentType);
         this.requestUpdate();
-        this.notifyRequestChanged();
+        this.notifyChange();
         this.computeSnippetsRequest();
     }
     /**
@@ -443,7 +410,7 @@ export default class RequestEditor extends ApiElement {
         }
         this.ui.body.model = model;
         this.ui.body.selected = selected;
-        this.notifyChanged('ui', this.ui);
+        this.notifyPropertyChanged('ui', this.ui);
     }
     async updatePayload(value, mime) {
         const serialized = await PayloadSerializer.serialize(value);
@@ -452,8 +419,8 @@ export default class RequestEditor extends ApiElement {
         this.setPayloadMimeOption(request, mime);
         this.payload = value;
         this.requestUpdate();
-        this.notifyRequestChanged();
-        this.notifyChanged('payload', value);
+        this.notifyChange();
+        this.notifyPropertyChanged('payload', value);
     }
     /**
      * When `mime` is set it creates the `payloadOptions` property with the mime.
@@ -468,6 +435,15 @@ export default class RequestEditor extends ApiElement {
             request.payloadOptions.mime = mime;
         }
     }
+    handleFlows(e) {
+        e.preventDefault();
+        const node = e.target;
+        this.selectFlows(node.model);
+    }
+    selectFlows(flows) {
+        this.flows = flows;
+        this.notifyChange();
+    }
     handleAssertions(e) {
         e.preventDefault();
         const node = e.target;
@@ -475,7 +451,7 @@ export default class RequestEditor extends ApiElement {
     }
     selectAssertions(assertions) {
         this.assertions = assertions;
-        this.notifyRequestChanged();
+        this.notifyChange();
     }
     handleConfig(e) {
         const node = e.target;
@@ -483,14 +459,7 @@ export default class RequestEditor extends ApiElement {
     }
     selectRequestConfig(config) {
         this.config = config;
-        this.notifyRequestChanged();
-    }
-    /**
-     * Called when a value on one of the editors change.
-     * Dispatches non-bubbling `change` event.
-     */
-    notifyRequestChanged() {
-        this.dispatchEvent(new Event('change'));
+        this.notifyChange();
     }
     /**
      * Called to notify listeners about a particular property change
@@ -498,7 +467,7 @@ export default class RequestEditor extends ApiElement {
      * @param type The property that changed. The resulting event type is the combination of this value and the `change` suffix.
      * @param value The value of the changed property
      */
-    notifyChanged(type, value) {
+    notifyPropertyChanged(type, value) {
         this.dispatchEvent(new CustomEvent(`${type}change`, {
             detail: {
                 value
@@ -536,7 +505,7 @@ export default class RequestEditor extends ApiElement {
             this.authorization = [];
         }
         this.authorization.push(cnf.toJSON());
-        this.notifyChanged('authorization', this.authorization);
+        this.notifyPropertyChanged('authorization', this.authorization);
         this.requestUpdate();
         return cnf;
     }
@@ -557,7 +526,7 @@ export default class RequestEditor extends ApiElement {
         // eslint-disable-next-line no-param-reassign
         schema.valid = isValid;
         authorization[index] = schema;
-        this.notifyChanged('authorization', this.authorization);
+        this.notifyPropertyChanged('authorization', this.authorization);
     }
     /**
      * Removes authorization schema from the editor.
@@ -573,7 +542,7 @@ export default class RequestEditor extends ApiElement {
             return;
         }
         authorization.splice(index, 1);
-        this.notifyChanged('authorization', this.authorization);
+        this.notifyPropertyChanged('authorization', this.authorization);
         this.requestUpdate();
     }
     handleAuthAdd(e) {
@@ -710,6 +679,7 @@ export default class RequestEditor extends ApiElement {
       <ui-tab aria-controls="headers" id="headers-tab">Headers</ui-tab>
       <ui-tab ?hidden="${!isPayload}" aria-controls="payload" id="payload-tab">Body</ui-tab>
       <ui-tab aria-controls="authorization" id="authorization-tab">Authorization</ui-tab>
+      <ui-tab aria-controls="flows" id="flows-tab">Flows</ui-tab>
       <ui-tab aria-controls="assertions" id="assertions-tab">Assertions</ui-tab>
       <ui-tab aria-controls="config" id="config-tab">Config</ui-tab>
       <ui-tab aria-controls="code-snippets" id="code-snippets-tab">Code snippets</ui-tab>
@@ -727,12 +697,14 @@ export default class RequestEditor extends ApiElement {
         const codeVisible = selectedTab === 'code-snippets';
         const assertionsVisible = selectedTab === 'assertions';
         const configVisible = selectedTab === 'config';
+        const flowsVisible = selectedTab === 'flows';
         return html `
     <div class="panel">
       ${this.renderParameters(parametersVisible)}
     ${this.renderHeaders(headersVisible)}
     ${this.renderBody(bodyVisible)}
     ${this.renderAuthorization(authVisible)}
+    ${this.renderHttpFlows(flowsVisible)}
     ${this.renderAssertions(assertionsVisible)}
     ${this.renderRequestConfig(configVisible)}
     ${this.renderSnippets(codeVisible)}
@@ -898,6 +870,8 @@ export default class RequestEditor extends ApiElement {
       .authorization="${auth}"
       ?readOnly="${this.readOnly}"
       class="auth-panel"
+      canToggle
+      canDelete
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
     ></basic-authorization>
@@ -909,6 +883,8 @@ export default class RequestEditor extends ApiElement {
       .authorization="${auth}"
       ?readOnly="${this.readOnly}"
       class="auth-panel"
+      canToggle
+      canDelete
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
     ></bearer-authorization>
@@ -920,6 +896,8 @@ export default class RequestEditor extends ApiElement {
       .authorization="${auth}"
       ?readOnly="${this.readOnly}"
       class="auth-panel"
+      canToggle
+      canDelete
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
     ></ntlm-authorization>
@@ -931,6 +909,8 @@ export default class RequestEditor extends ApiElement {
       .authorization="${auth}"
       ?readOnly="${this.readOnly}"
       class="auth-panel"
+      canToggle
+      canDelete
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
       .defaultRedirectUri="${this.oauth2RedirectUri}"
@@ -943,6 +923,8 @@ export default class RequestEditor extends ApiElement {
       .authorization="${auth}"
       ?readOnly="${this.readOnly}"
       class="auth-panel"
+      canToggle
+      canDelete
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
       .defaultRedirectUri="${this.oauth2RedirectUri}"
@@ -955,6 +937,8 @@ export default class RequestEditor extends ApiElement {
       .authorization="${auth}"
       ?readOnly="${this.readOnly}"
       class="auth-panel"
+      canToggle
+      canDelete
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
     ></cc-authorization>
@@ -966,11 +950,29 @@ export default class RequestEditor extends ApiElement {
       .authorization="${auth}"
       ?readOnly="${this.readOnly}"
       class="auth-panel"
+      canToggle
+      canDelete
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
     ></apikey-authorization>
     `;
     }
+    renderHttpFlows(visible) {
+        if (!visible) {
+            return '';
+        }
+        const { flows = [] } = this;
+        return html `
+    <http-flows
+      aria-label="HTTP fLows" 
+      aria-labelledby="flows-tab" 
+      id="flows" 
+      role="tabpanel"
+      .model="${flows}" 
+      @change="${this.handleFlows}"
+    ></http-flows>
+    `;
+    }
     renderAssertions(visible) {
         if (!visible) {
             return '';
@@ -1058,6 +1060,9 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], RequestEditor.prototype, "assertions", void 0);
+__decorate([
+    property({ type: Array })
+], RequestEditor.prototype, "flows", void 0);
 __decorate([
     property({ type: String })
 ], RequestEditor.prototype, "oauth2RedirectUri", void 0);