@api-client/ui 0.0.1

package/demo/amf/lib/AmfDemoPage.ts

@@ -0,0 +1,278 @@
+import { html, TemplateResult } from 'lit';
+import { AmfDefinitions, ContextEvent, IOAuth2Authorization, IOidcTokenError, IOidcTokenInfo, ITokenInfo, OAuth2Authorization, OidcAuthorization } from '@api-client/core/build/browser.js';
+import { DemoPage } from '../../../src/pages/demo/DemoPage.js';
+import { reactive } from '../../../src/lib/decorators.js';
+import { RouteMixin, DomEventsAmfStore, Router, ApiNavigationEvent } from '../../../src/index.js';
+import { ReportingErrorEventDetail } from '../../../src/events/amf/ReportingEvents.js';
+import { EventTypes } from '../../../src/events/amf/EventTypes.js';
+import '../../../src/define/amf/api-navigation.js';
+import '../../../src/define/ui/ui-icon.js';
+import '../../../src/define/ui/ui-list-item.js';
+import '../../../src/define/ui/ui-dropdown-list.js';
+import '../../../src/define/ui/ui-list.js';
+import '../../../src/define/ui/ui-button.js';
+
+export interface ApiDemoSource {
+  label: string;
+  file: string;
+}
+
+export abstract class AmfDemoPage extends DemoPage {
+  @reactive() initialized = false;
+
+  @reactive() loaded = false;
+
+  /** 
+   * Currently loaded file.
+   */
+  @reactive() selectedFile?: string;
+
+  /** 
+   * Currently loaded file.
+   */
+  @reactive() redirectUri?: string;
+
+  store: DomEventsAmfStore;
+
+  /**
+   * When set the endpoint section in navigation is opened by default.
+   */
+  endpointsOpened: boolean;
+
+  /**
+   * When set the documentation section in navigation is opened by default.
+   */
+  docsOpened: boolean;
+
+  /**
+   * When set the types section in navigation is opened by default.
+   */
+  typesOpened: boolean;
+
+  /**
+   * When set the security section in navigation is opened by default.
+   */
+  securityOpened: boolean;
+
+  /**
+   * AMF model read from the API model file downloaded after initialization.
+   */
+  amf?: AmfDefinitions.IAmfDocument;
+
+  /**
+   * When set the API Navigation element won't be rendered.
+   */
+  noApiNavigation: boolean;
+
+  apis: ApiDemoSource[];
+
+  static get routes(): RouteMixin.IRoute[] {
+    return [
+      { 
+        pattern: '/file/(?<file>[^/]*)', 
+        method: 'fileRoute',
+      },
+    ];
+  }
+
+  constructor() {
+    super();
+    this.store = new DomEventsAmfStore(window);
+    this.store.listen();
+
+    this.loaded = false;
+    this.initialized = false;
+    this.endpointsOpened = true;
+    this.docsOpened = false;
+    this.typesOpened = false;
+    this.securityOpened = false;
+    this.noApiNavigation = false;
+
+    this.redirectUri = `${window.location.origin}/demo/oauth-popup.html`;
+
+    window.addEventListener(EventTypes.Navigation.apiNavigate, this._navChanged.bind(this));
+
+    this.apis = [
+      {
+        file: 'models/demo-api.json', 
+        label: 'Demo API',
+      }
+    ];
+  }
+
+  firstRender(): void {
+    super.firstRender();
+    if (this.initialized) {
+      this.selectApiWhenNeeded();
+    }
+  }
+
+  async autoLoad(): Promise<void> {
+    await this.loadMonaco();
+    this.initializeRouting();
+    this.initialized = true;
+    // router initializes itself in a raf
+    requestAnimationFrame(() => {
+      this.selectApiWhenNeeded();
+    });
+  }
+
+  selectApiWhenNeeded(): void {
+    if (this.selectedFile) {
+      return;
+    }
+    const [api] = this.apis;
+    if (!api) {
+      return;
+    }
+    Router.navigate('file', api.file);
+  }
+
+  /**
+   * Handler for the API selection change
+   */
+  _apiChanged(e: CustomEvent): void {
+    const target = e.detail.item as HTMLElement | undefined;
+    if (!target) {
+      return;
+    }
+    const { src } = target.dataset;
+    if (!src) {
+      return;
+    }
+    Router.navigate('file', src);
+  }
+
+  fileRoute(info: RouteMixin.IRouteResult): void {
+    const { params } = info;
+    if (!params || !params.file) {
+      return;
+    }
+    const file = params.file as string;
+    if (file === this.selectedFile) {
+      return;
+    }
+    this.selectedFile = file;
+    this._loadFile(file);
+  }
+
+  /**
+   * Handler for the API errors
+   */
+  _errorHandler(e: CustomEvent): void {
+    const info = (e.detail as ReportingErrorEventDetail);
+    const { description, component='Unknown component', error } = info;
+    console.error(`[${component}]: ${description}`);
+    console.error(error);
+  }
+
+  async _loadFile(file: string): Promise<void> {
+    this.loaded = false;
+    const response = await fetch(`/demo/${file}`);
+    let data = await response.json();
+    if (Array.isArray(data)) {
+      [data] = data;
+    }
+    this.amf = data;
+    this.store.amf = data;
+    this.loaded = true;
+  }
+
+  oauth2authorizeHandler(e: ContextEvent<IOAuth2Authorization, ITokenInfo>): void {
+    e.preventDefault();
+    const config = { ...e.detail } as IOAuth2Authorization;
+    e.detail.result = this.authorizeOauth2(config);
+  }
+
+  /**
+   * Authorize the user using provided settings.
+   *
+   * @param settings The authorization configuration.
+   */
+  async authorizeOauth2(settings: IOAuth2Authorization): Promise<ITokenInfo> {
+    const auth = new OAuth2Authorization(settings);
+    auth.checkConfig();
+    return auth.authorize();
+  }
+
+  oidcAuthorizeHandler(e: ContextEvent<IOAuth2Authorization, (IOidcTokenInfo|IOidcTokenError)[]>): void {
+    const config = { ...e.detail } as IOAuth2Authorization;
+    e.detail.result = this.authorizeOidc(config);
+  }
+
+  /**
+   * Authorize the user using provided settings.
+   *
+   * @param settings The authorization configuration.
+   */
+  async authorizeOidc(settings: IOAuth2Authorization): Promise<(IOidcTokenInfo|IOidcTokenError)[]> {
+    const auth = new OidcAuthorization(settings);
+    auth.checkConfig();
+    return auth.authorize();
+  }
+
+  /**
+   * This method to be overridden in child class to handle navigation.
+   * @param e Dispatched navigation event
+   */
+  _navChanged(e: ApiNavigationEvent): void {
+    const { domainId, domainType } = e.detail;
+    // eslint-disable-next-line no-console
+    console.log(`Navigation changed. Type: ${domainId}, selected: ${domainType}`);
+  }
+
+  /**
+   * This method to be overridden in child class to render API options.
+   * @returns HTML template for apis dropdown options.
+   */
+  _apiListTemplate(): TemplateResult[] {
+    const { apis } = this;
+    return apis.map((item) => html`
+      <ui-list-item role="menuitem" data-src="${item.file}">${item.label}</ui-list-item>
+    `);
+  }
+
+  /**
+   * Call this on the top of the `render()` method to render demo navigation
+   * @return HTML template for demo header
+   */
+  headerTemplate(): TemplateResult {
+    const { componentName, selectedFile } = this;
+    const info = this.apis.find(i => i.file === selectedFile);
+    const label = info?.label || 'Select demo API';
+    return html`
+    <header>
+      ${componentName ? html`<h1 class="display-medium">${componentName}</h1>` : ''}
+      <ui-dropdown-list 
+        @select="${this._apiChanged}"
+        closeOnOutsideClick
+        style="margin-left: auto"
+      >
+        <ui-button>
+          ${label}
+          <ui-icon role="presentation" icon="arrowDropDown"></ui-icon>
+        </ui-button>
+        <ui-list slot="dropdown" role="menu">
+          ${this._apiListTemplate()}
+        </ui-list>
+      </ui-dropdown-list>
+    </header>
+    `;
+  }
+
+  navigationTemplate(): TemplateResult {
+    if (this.noApiNavigation) {
+      return html``;
+    }
+    // sort, filter
+    return html`
+    <api-navigation
+      summary
+      ?endpointsOpened="${this.endpointsOpened}"
+      ?documentationsOpened="${this.docsOpened}"
+      ?schemasOpened="${this.typesOpened}"
+      ?securityOpened="${this.securityOpened}"
+      layout="tree"
+    ></api-navigation>`;
+  }
+}

package/demo/amf/oauth-authorize.html

@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+  <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic" as="style" crossorigin="anonymous">
+  <title>Demo log in</title>
+
+  <style>
+    html,
+    body {
+      height: 100vh;
+      margin: 0;
+      padding: 0;
+    }
+
+    html{
+      background-color: #fff;
+      -webkit-text-size-adjust: 100%;
+      -moz-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+      text-size-adjust: 100%
+    }
+    body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      text-rendering: optimizeLegibility;
+      font-size: 16px;
+      font-family: Roboto,sans-serif;
+      font-weight: 400;
+    }
+
+    .login {
+      width: 600px;
+      margin: 0 auto;
+    }
+  </style>
+  <link rel="stylesheet" crossorigin="anonymous" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
+</head>
+<body>
+  <section class="login">
+    <form autocomplete="on" method="post">
+      <h1>Demo log in</h1>
+      <p>Log in using any username and password to authorize Authorization Method component</p>
+      <ui-text-field
+        type="email"
+        name="username"
+        required
+        invalidMessage="Email is required"
+        label="Email"
+        autocomplete="on"
+      ></ui-text-field>
+      <ui-text-field
+        name="password"
+        required
+        autocomplete="on"
+        invalidMessage="Password is required"
+        label="Password"
+      ></ui-text-field>
+      <ui-button class="login-button">Authorize</ui-button>
+    </form>
+  </section>
+  <script type="module" src="oauth-authorize.ts"></script>
+</body>
+</html>

package/demo/amf/oauth-authorize.ts

@@ -0,0 +1,38 @@
+import { uuidV4 } from '@api-client/core/build/browser.js';
+
+function setupFormAction(): void {
+  const u = new URL(window.location.href)
+  const state = u.searchParams.get('state') as string;
+  const redirectUri = decodeURIComponent(u.searchParams.get('redirect_uri') as string);
+  const type = u.searchParams.get('response_type');
+  const codeParam = type === 'code' ? 'code' : 'access_token';
+  const params = new URLSearchParams();
+  params.set(codeParam, uuidV4());
+  params.set('state', state);
+  params.set('expires_in', '3600');
+  params.set('scope', 'dummy');
+  if (type !== 'code') {
+    params.set('token_type', 'bearer');
+    params.set('refresh_token', uuidV4());
+  }
+  const formUrl = `${redirectUri}#${params.toString()}`;
+  const form = document.querySelector('form') as HTMLFormElement;
+  form.action = formUrl;
+}
+
+function loginHandler(): void {
+  const form = document.querySelector('form') as HTMLFormElement;
+  window.location.assign(form.action);
+}
+
+function addButtonAction(): void {
+  const button = document.querySelector('.login-button') as HTMLButtonElement;
+  button.addEventListener('click', loginHandler);
+}
+
+function initialize(): void {
+  setupFormAction();
+  addButtonAction();
+}
+
+initialize();

package/demo/amf/request-editor.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+  <title>api-request-editor</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="./styles/demo-grid.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body class="styled">
+  <div id="app" class="layout"></div>
+  <script type="module" src="request-editor.ts"></script>
+
+</html>

package/demo/amf/request-editor.ts

@@ -0,0 +1,272 @@
+import { html, TemplateResult } from 'lit';
+import { AmfDemoPage } from './lib/AmfDemoPage.js';
+import { reactive } from '../../src/lib/decorators.js';
+import { AmfTypes, ApiNavigationEvent, ApiResponseEvent } from '../../src/index.js';
+import '../../src/define/amf/api-request-editor.js';
+import '../../src/define/ui/ui-checkbox.js';
+import '../../src/define/ui/ui-list-item.js';
+import '../../src/define/ui/ui-button.js';
+
+class ComponentDemo extends AmfDemoPage {
+  @reactive() domainId?: string;
+
+  @reactive() domainType?: AmfTypes.SelectionType;
+
+  @reactive() allowCustom: boolean;
+
+  @reactive() allowCustomBaseUri: boolean;
+
+  @reactive() allowHideOptional: boolean;
+
+  @reactive() urlLabel: boolean;
+
+  @reactive() urlEditor: boolean;
+
+  @reactive() renderCustomServer: boolean;
+
+  @reactive() noServerSelector: boolean;
+
+  @reactive() responseBody?: string;
+
+  constructor() {
+    super();
+    this.componentName = 'api-request-editor';
+    this.allowCustom = true;
+    this.allowCustomBaseUri = false;
+    this.allowHideOptional = true;
+    this.urlLabel = false;
+    this.urlEditor = true;
+    this.renderCustomServer = false;
+    this.noServerSelector = false;
+
+    [
+      ['google-drive-api', 'Google Drive'],
+      ['multi-server', 'Multiple servers'],
+      ['httpbin', 'httpbin.org'],
+      ['APIC-168', 'APIC-168: Custom scheme support'],
+      ['apic-169', 'apic-169'],
+      ['APIC-289', 'APIC-289: OAS param names'],
+      ['APIC-298', 'APIC-298: OAS param names 2'],
+      ['APIC-480', 'APIC-480'],
+      ['APIC-613', 'APIC-613'],
+      ['APIC-689', 'APIC-689: Enum values'],
+      ['SE-12042', 'SE-12042: Default values issue'],
+      ['SE-12224', 'SE-12224: Scope is not an array issues'],
+      ['SE-12957', 'SE-12957: OAS query parameters documentation'],
+      ['api-keys', 'API key'],
+      ['oas-demo', 'OAS Demo API'],
+      ['oauth-flows', 'OAS OAuth Flow'],
+      ['oas-bearer', 'OAS Bearer'],
+      ['secured-api', 'Security demo'],
+      ['21143', '21143'],
+      ['annotated-parameters', 'annotated-parameters'],
+    ].forEach(([file, label]) => {
+      this.apis.push({
+        file: `models/${file}.json`,
+        label,
+      })
+    });
+
+    this.autoLoad();
+  }
+
+  async _loadFile(file: string): Promise<void> {
+    await super._loadFile(file);
+    this.domainId = undefined;
+    this.domainType = undefined;
+  }
+
+  _navChanged(e: ApiNavigationEvent): void {
+    this.domainId = undefined;
+    this.responseBody = undefined;
+    const { domainId, domainType } = e.detail;
+    if (domainType === 'operation') {
+      this.domainId = domainId;
+      this.domainType = domainType;
+    }
+  }
+
+  _responseReady(e: ApiResponseEvent): void {
+    const { isError, response } = e.detail;
+    if (isError) {
+      this.responseBody = 'Error in response';
+    } else {
+      this.responseBody = response.payload as string;
+    }
+  }
+
+  requestChangeHandler(): void {
+    console.log('requestChangeHandler');
+  }
+
+  dispatchAnnotations(): void {
+    const detail = { 
+      values: [
+        { annotationName: 'credentialType', annotationValue: 'id', fieldValue: 'test value 1' },
+        { annotationName: 'credentialType', annotationValue: 'secret', fieldValue: 'test value 2' },
+      ] 
+    };
+    document.dispatchEvent(new CustomEvent('populate_annotated_fields', { detail, bubbles: true }));
+  }
+
+  _addCustomServers(): TemplateResult | string {
+    if (!this.renderCustomServer) {
+      return '';
+    }
+    return html`
+    <div class="other-section" slot="custom-base-uri">Other options</div>
+    <ui-list-item slot="custom-base-uri" data-value="http://mocking.com">Mocking service</ui-list-item>
+    <ui-list-item slot="custom-base-uri" data-value="http://customServer.com2">Custom instance</ui-list-item>
+    `;
+  }
+
+  _annotationsEventTemplate(): TemplateResult {
+    return html `
+      <section class="demo-section">
+        <h3>Annotations event</h3>
+        <p>
+          Dispatch event to update values from annotations.
+          <ui-button @click="${this.dispatchAnnotations}">Dispatch</ui-button>
+        </p>
+      </section>
+    `;
+  }
+
+  contentTemplate(): TemplateResult {
+    return html`
+    <a href="./">Back</a>
+    ${this.demoTemplate()}
+    ${this._annotationsEventTemplate()}
+    `;
+  }
+
+  demoTemplate(): TemplateResult {
+    const { loaded } = this;
+    return html `
+    ${!loaded ? html`<p>Load an API model first.</p>` : this.loadedTemplate()}
+    `;
+  }
+
+  loadedTemplate(): TemplateResult {
+    return html`
+    ${this.componentTemplate()}
+    `;
+  }
+
+  componentTemplate(): TemplateResult {
+    const {
+      redirectUri,
+      allowCustom,
+      allowHideOptional,
+      domainId,
+      responseBody,
+      urlLabel,
+      urlEditor,
+      noServerSelector,
+      allowCustomBaseUri,
+    } = this;
+    return html`
+    <section class="demo-section">
+      <api-request-editor
+        .domainId="${domainId}"
+        ?allowCustom="${allowCustom}"
+        ?allowHideOptional="${allowHideOptional}"
+        ?urlLabel="${urlLabel}"
+        ?urlEditor="${urlEditor}"
+        .redirectUri="${redirectUri}"
+        ?noServerSelector="${noServerSelector}"
+        ?allowCustomBaseUri="${allowCustomBaseUri}"
+        @change="${this.requestChangeHandler}"
+      >
+        ${this._addCustomServers()}
+      </api-request-editor>
+      ${responseBody ? html`<h3>Latest response</h3>
+      <output class="response-output" tabindex="0">${responseBody}</output>` : ''}
+    </section>
+
+    <section class="demo-section">
+
+      <p id="mainOptionsLabel">Element options</p>
+
+      <label class="label-large">
+        <ui-checkbox
+          @change="${this._toggleBooleanOption}" 
+          ?checked="${allowCustom}"
+          name="allowCustom"
+          aria-describedby="mainOptionsLabel"
+          aria-label="Allow custom"
+        ></ui-checkbox>
+        Allow custom
+      </label>
+
+      <label class="label-large">
+        <ui-checkbox
+          @change="${this._toggleBooleanOption}" 
+          ?checked="${allowHideOptional}"
+          name="allowHideOptional"
+          aria-describedby="mainOptionsLabel"
+          aria-label="Allow hide optional"
+        ></ui-checkbox>
+        Allow hide optional
+      </label>
+
+      <label class="label-large">
+        <ui-checkbox
+          @change="${this._toggleBooleanOption}" 
+          ?checked="${urlLabel}"
+          name="urlLabel"
+          aria-describedby="mainOptionsLabel"
+          aria-label="URL label"
+        ></ui-checkbox>
+        URL label
+      </label>
+
+      <label class="label-large">
+        <ui-checkbox
+          @change="${this._toggleBooleanOption}" 
+          ?checked="${urlEditor}"
+          name="urlEditor"
+          aria-describedby="mainOptionsLabel"
+          aria-label="URL editor"
+        ></ui-checkbox>
+        URL editor
+      </label>
+
+      <label class="label-large">
+        <ui-checkbox
+          @change="${this._toggleBooleanOption}" 
+          ?checked="${this.renderCustomServer}"
+          name="renderCustomServer"
+          aria-describedby="mainOptionsLabel"
+          aria-label="Custom servers"
+        ></ui-checkbox>
+        Custom servers
+      </label>
+
+      <label class="label-large">
+        <ui-checkbox
+          @change="${this._toggleBooleanOption}" 
+          ?checked="${allowCustomBaseUri}"
+          name="allowCustomBaseUri"
+          aria-describedby="mainOptionsLabel"
+          aria-label="Custom Base Uri"
+        ></ui-checkbox>
+        Custom Base Uri
+      </label>
+
+      <label class="label-large">
+        <ui-checkbox
+          @change="${this._toggleBooleanOption}" 
+          ?checked="${noServerSelector}"
+          name="noServerSelector"
+          aria-describedby="mainOptionsLabel"
+          aria-label="Remove Server Selector"
+        ></ui-checkbox>
+        Remove Server Selector
+      </label>
+    </section>
+    `;
+  }
+}
+const instance = new ComponentDemo();
+instance.render();