@api-client/ui 0.0.8 → 0.0.9

package/src/elements/project/HttpProjectRequestHistory.ts

@@ -1,21 +1,22 @@
 import { 
   ErrorResponse, IHttpHistory, IResponse, IRequestLog, 
-  RequestLog, IHistoryRequestListOptions, ContextStateUpdateEvent,
-  ContextStateDeleteEvent,
+  RequestLog, IHistoryRequestListOptions, BroadcastEvent,
+  HistoryCreatedBroadcastEvent,
+  HistoryDeletedBroadcastEvent,
 } from "@api-client/core/build/browser.js";
 import { TemplateResult, html, PropertyValues, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import ApiElement from "../ApiElement.js";
 import { relativeDay } from "../../lib/time/Conversion.js";
-import { HttpHistoryChart,  } from '../../lib/chart/HttpHistoryChart.js';
+import { HttpHistoryChart } from '../../lib/chart/HttpHistoryChart.js';
 import { statusTemplate, } from '../http/HttpStatus.js';
 import { Events } from '../../events/Events.js';
-import { EventTypes } from '../../events/EventTypes.js';
-import SegmentedButton from "../../ui/button/SegmentedButton.js";
+import { StoreBroadcast } from "../../http-client/store/StoreBroadcast.js";
+import type SegmentedButton from "../../ui/button/SegmentedButton.js";
 import UiDialog, { UiDialogClosingReason } from "../../ui/dialog/UiDialog.js";
 import '@github/relative-time-element';
 import { SnackNotifications } from "../../ui/notification/SnackNotifications.js";
-import UiIconButton from "../../ui/button/UiIconButton.js";
+import type UiIconButton from "../../ui/button/UiIconButton.js";
 import '../../define/http/http-request-log.js';
 import '../../define/ui/ui-icon.js';
 import '../../define/ui/ui-button.js';
@@ -90,11 +91,12 @@ export default class HttpProjectRequestHistory extends ApiElement {
    */
   protected pageCursor?: string;
 
+  channel = new BroadcastChannel(StoreBroadcast.history);
+
   constructor() {
     super();
 
-    this.handleHistoryCreated = this.handleHistoryCreated.bind(this);
-    this.handleHistoryDeleted = this.handleHistoryDeleted.bind(this);
+    this.handleBroadcast = this.handleBroadcast.bind(this);
   }
 
   protected override willUpdate(cp: PropertyValues<this>): void {
@@ -110,14 +112,58 @@ export default class HttpProjectRequestHistory extends ApiElement {
 
   override connectedCallback(): void {
     super.connectedCallback();
-    window.addEventListener(EventTypes.Store.History.State.create, this.handleHistoryCreated as EventListenerOrEventListenerObject);
-    window.addEventListener(EventTypes.Store.History.State.delete, this.handleHistoryDeleted as EventListenerOrEventListenerObject);
+    this.channel.addEventListener('message', this.handleBroadcast);
   }
 
   override disconnectedCallback(): void {
     super.disconnectedCallback();
-    window.removeEventListener(EventTypes.Store.History.State.create, this.handleHistoryCreated as EventListenerOrEventListenerObject);
-    window.removeEventListener(EventTypes.Store.History.State.delete, this.handleHistoryDeleted as EventListenerOrEventListenerObject);
+    this.channel.removeEventListener('message', this.handleBroadcast);
+  }
+
+  protected handleBroadcast(e: MessageEvent): void {
+    const event = e.data as BroadcastEvent;
+    switch (event.operation) {
+      case 'created': this.handleHistoryCreated(event as HistoryCreatedBroadcastEvent); break;
+      case 'deleted': this.handleHistoryDeleted(event as HistoryDeletedBroadcastEvent); break;
+      default:
+    }
+  }
+
+  protected handleHistoryCreated(event: HistoryCreatedBroadcastEvent): void {
+    const { request, data } = event;
+    const item = data as IHttpHistory;
+    if (this.request !== request) {
+      return;
+    }
+    if (item) {
+      this.addItem(item, true);
+    }
+  }
+
+  protected handleHistoryDeleted(event: HistoryDeletedBroadcastEvent): void {
+    const { model, history } = this;
+    const { key, request } = event;
+    if (!model || !history || request !== this.request) {
+      return;
+    }
+    const historyIndex = history.findIndex(i => i.key === key);
+    if (historyIndex < 0) {
+      return;
+    }
+    history.splice(historyIndex, 1);
+    for (const group of model) {
+      const index = group.findIndex(i => i.key === key);
+      if (index >= 0) {
+        group.splice(index, 1);
+        if (group.length === 0) {
+          const groupIndex = model.indexOf(group);
+          model.splice(groupIndex, 1);
+        }
+        this.requestUpdate();
+        this.setupVisibility();
+        break;
+      }
+    }
   }
 
   protected setupVisibility(): void {
@@ -253,42 +299,6 @@ export default class HttpProjectRequestHistory extends ApiElement {
     return result;
   }
 
-  protected handleHistoryCreated(e: ContextStateUpdateEvent<IHttpHistory>): void {
-    const { item, parent } = e.detail;
-    if (this.request !== parent) {
-      return;
-    }
-    if (item) {
-      this.addItem(item, true);
-    }
-  }
-
-  protected handleHistoryDeleted(e: ContextStateDeleteEvent): void {
-    const { model, history } = this;
-    const { key, parent } = e.detail;
-    if (!model || !history || parent !== this.request) {
-      return;
-    }
-    const historyIndex = history.findIndex(i => i.key === key);
-    if (historyIndex < 0) {
-      return;
-    }
-    history.splice(historyIndex, 1);
-    for (const group of model) {
-      const index = group.findIndex(i => i.key === key);
-      if (index >= 0) {
-        group.splice(index, 1);
-        if (group.length === 0) {
-          const groupIndex = model.indexOf(group);
-          model.splice(groupIndex, 1);
-        }
-        this.requestUpdate();
-        this.setupVisibility();
-        break;
-      }
-    }
-  }
-
   protected computeSelectedItem(): void {
     const { history, selectedItem } = this;
     this.renderedItem = undefined;

package/src/elements/project/ProjectRunner.ts

@@ -9,14 +9,14 @@ import {
   ProjectExecutionKind,
   IProjectExecution,
   IProjectExecutionListOptions,
-  ContextStateUpdateEvent,
-  ContextStateDeleteEvent,
+  BroadcastEvent,
+  ProjectExecutionDeleteBroadcastEvent,
+  ProjectExecutionCreatedBroadcastEvent,
 } from '@api-client/core/build/browser.js';
 import ApiElement from '../ApiElement.js';
 import type CheckboxElement from '../../ui/input/CheckboxElement.js';
 import type Input from '../../ui/input/Input.js';
 import { Events } from '../../events/Events.js';
-import { EventTypes } from '../../events/EventTypes.js';
 import '@github/relative-time-element';
 import '../../define/http-project/project-run-report.js';
 import '../../define/ui/ui-checkbox.js';
@@ -27,11 +27,18 @@ import '../../define/ui/ui-icon.js';
 import '../../define/ui/ui-dropdown-list.js';
 import '../../define/ui/ui-list.js';
 import '../../define/ui/ui-list-item.js';
+import { StoreBroadcast } from '../../http-client/store/StoreBroadcast.js';
 
 /**
  * @fires change - When the configuration of the runner change.
  */
 export default class ProjectRunner extends ApiElement {
+  /**
+   * A reference to the global shared variables.
+   * Used with the communication with the execution server.
+   */
+  @property({ type: Object }) sharedVariables?: Record<string, string>;
+
   /**
    * The instance of the current project.
    */
@@ -93,23 +100,22 @@ export default class ProjectRunner extends ApiElement {
    */
   @state() renderedReport?: IProjectExecution;
 
+  channel = new BroadcastChannel(StoreBroadcast.projectRuns);
+
   constructor() {
     super();
 
-    this.handleProjectRunCreated = this.handleProjectRunCreated.bind(this);
-    this.handleProjectRunDeleted = this.handleProjectRunDeleted.bind(this);
+    this.handleBroadcast = this.handleBroadcast.bind(this);
   }
 
   override connectedCallback(): void {
     super.connectedCallback();
-    window.addEventListener(EventTypes.Store.ProjectRuns.State.create, this.handleProjectRunCreated as EventListenerOrEventListenerObject);
-    window.addEventListener(EventTypes.Store.ProjectRuns.State.delete, this.handleProjectRunDeleted as EventListenerOrEventListenerObject);
+    this.channel.addEventListener('message', this.handleBroadcast);
   }
 
   override disconnectedCallback(): void {
     super.disconnectedCallback();
-    window.removeEventListener(EventTypes.Store.ProjectRuns.State.create, this.handleProjectRunCreated as EventListenerOrEventListenerObject);
-    window.removeEventListener(EventTypes.Store.ProjectRuns.State.delete, this.handleProjectRunDeleted as EventListenerOrEventListenerObject);
+    this.channel.removeEventListener('message', this.handleBroadcast);
   }
 
   override willUpdate(cp: PropertyValues<this>): void {
@@ -119,6 +125,15 @@ export default class ProjectRunner extends ApiElement {
     }
   }
 
+  protected handleBroadcast(e: MessageEvent): void {
+    const event = e.data as BroadcastEvent;
+    switch (event.operation) {
+      case 'created': this.handleProjectRunCreated(event as ProjectExecutionCreatedBroadcastEvent); break;
+      case 'deleted': this.handleProjectRunDeleted(event as ProjectExecutionDeleteBroadcastEvent); break;
+      default:
+    }
+  }
+
   protected setupRoot(): void {
     const { project, folder } = this;
     if (!project) {
@@ -134,16 +149,16 @@ export default class ProjectRunner extends ApiElement {
     this.queryPageDebounce();
   }
 
-  protected handleProjectRunCreated(e: ContextStateUpdateEvent<IProjectExecution>): void {
-    const { parent } = e.detail;
-    const item = e.detail.item as IProjectExecution;
-    const { folder } = this;
-    // parent is either folder (if the log has a folder) or the project.
-    if (folder) {
-      if (parent !== folder || !item.parent || item.parent !== folder) {
-        return;
-      }
-    } else if (parent !== this.project?.key) {
+  protected handleProjectRunCreated(event: ProjectExecutionCreatedBroadcastEvent): void {
+    const { project, folder } = this;
+    if (!project) {
+      return;
+    }
+    if (project.key !== event.project) {
+      return;
+    }
+    const item = event.data as IProjectExecution;
+    if (folder && item.parent !== folder) {
       return;
     }
     this.history.push(item);
@@ -151,9 +166,15 @@ export default class ProjectRunner extends ApiElement {
     this.selectHistory(item.key);
   }
 
-  protected handleProjectRunDeleted(e: ContextStateDeleteEvent): void {
-    const { history } = this;
-    const { key } = e.detail;
+  protected handleProjectRunDeleted(event: ProjectExecutionDeleteBroadcastEvent): void {
+    const { history, project } = this;
+    if (!project) {
+      return;
+    }
+    if (project.key !== event.project) {
+      return;
+    }
+    const { key } = event;
     const index = history.findIndex(i => i.key === key);
     if (index < 0) {
       return;
@@ -185,6 +206,13 @@ export default class ProjectRunner extends ApiElement {
     if (folder) {
       config.parent = folder;
     }
+    // Note, we intentionally don't add shared variables.
+    // Project / folder execution should be contained and can only leak 
+    // out the variables to the rest of the app, not in.
+
+    // if (sharedVariables && !config.variables) {
+    //   config.variables = sharedVariables;
+    // }
     const init: IHttpProjectProxyInit = {
       kind: HttpProjectKind,
       project: project.toJSON(),
@@ -197,6 +225,7 @@ export default class ProjectRunner extends ApiElement {
       if (!result) {
         this.lastError = 'The project execution event was not handled.';
       } else {
+        this.mergeExecutedVariables(result.result);
         this.createHistory(result.result);
       }
     } catch (e) {
@@ -205,6 +234,24 @@ export default class ProjectRunner extends ApiElement {
     this.running = false;
   }
 
+  mergeExecutedVariables(result: IProjectExecutionLog): void {
+    const { sharedVariables } = this;
+    if (!sharedVariables) {
+      return;
+    }
+
+    result.iterations.forEach((iteration) => {
+      const { variables } = iteration;
+      if (!variables) {
+        return;
+      }
+      Object.keys(variables).forEach((key) => {
+        sharedVariables[key] = variables[key];
+      });
+    });
+
+  }
+
   protected async createHistory(result: IProjectExecutionLog): Promise<void> {
     const { appInfo, project } = this;
     if (!appInfo) {

package/src/events/EventTypes.ts

@@ -21,10 +21,6 @@ export const EventTypes = Object.freeze({
       delete: 'storefilesdelete',
       patchUsers: 'storefilespatchusers',
       listUsers: 'storefileslistusers',
-      State: Object.freeze({
-        change: 'storefileschange',
-        fileChange: 'storefilechange',
-      }),
     }),
     User: Object.freeze({
       me: 'storeuserme',
@@ -41,10 +37,6 @@ export const EventTypes = Object.freeze({
       clearSpace: 'storehistoryclearspace',
       clearProject: 'storehistoryclearproject',
       clearRequest: 'storehistoryclearrequest',
-      State: Object.freeze({
-        create: 'storehistorystatecreate',
-        delete: 'storehistorystatedelete',
-      }),
     }),
     ProjectRuns: Object.freeze({
       add: 'storeprojectrunsadd',
@@ -55,10 +47,13 @@ export const EventTypes = Object.freeze({
       clearSpace: 'storeprojectrunsclearspace',
       clearProject: 'storeprojectrunsclearproject',
       clearParent: 'storeprojectrunsclearparent',
-      State: Object.freeze({
-        create: 'storeprojectrunsstatecreate',
-        delete: 'storeprojectrunsstatedelete',
-      }),
+    }),
+    Certificate: Object.freeze({
+      read: 'storeclientcertificateread',
+      list: 'storeclientcertificatelist',
+      delete: 'storeclientcertificatedelete',
+      update: 'storeclientcertificateupdate',
+      insert: 'storeclientcertificateinsert',
     }),
   }),
   Config: Object.freeze({
@@ -151,17 +146,6 @@ export const EventTypes = Object.freeze({
       destroyed: 'modeldestroyed',
       restored: 'modelrestored',
       
-      Certificate: Object.freeze({
-        read: 'modelclientcertificateread',
-        list: 'modelclientcertificatelist',
-        delete: 'modelclientcertificatedelete',
-        update: 'modelclientcertificateupdate',
-        insert: 'modelclientcertificateinsert',
-        State: Object.freeze({
-          update: 'modelstateclientcertificateupdate',
-          delete: 'modelstateclientcertificatedelete',
-        }),
-      }),
       UrlHistory: Object.freeze({
         add: 'modelclienturlhistoryadd',
         query: 'modelclienturlhistoryquery',

package/src/events/StoreEvents.ts

@@ -2,7 +2,7 @@
 import { 
   IBackendInfo, IFile, IFileCreateOptions,
   ListFileKind, AccessOperation, IUser, IPatchRevision, IApplication, IHttpHistory, IHttpHistoryBulkAdd, HistoryListOptions, 
-  ContextChangeRecord, ContextStateUpdateEvent, ContextDeleteRecord, ContextStateDeleteEvent, ContextDeleteEvent, ContextDeleteBulkEvent, ContextListOptions, ContextListResult, IProjectExecution, IProjectExecutionListOptions, IBulkOperationResult,
+  ContextChangeRecord, ContextDeleteEvent, ContextDeleteBulkEvent, ContextListOptions, ContextListResult, IProjectExecution, IProjectExecutionListOptions, IBulkOperationResult,
 } from '@api-client/core/build/browser.js';
 import { Patch } from '@api-client/json';
 import { IConfigEnvironment, IConfigInit } from '../lib/config/Config.js';
@@ -542,17 +542,6 @@ export const StoreEvents = Object.freeze({
       target.dispatchEvent(e);
       await e.detail.result;
     },
-
-    State: Object.freeze({
-      create(record: ContextChangeRecord<IHttpHistory>, target: EventTarget = window): void {
-        const e = new ContextStateUpdateEvent(EventTypes.Store.History.State.create, record);
-        target.dispatchEvent(e);
-      },
-      delete(record: ContextDeleteRecord, target: EventTarget = window): void {
-        const e = new ContextStateDeleteEvent(EventTypes.Store.History.State.delete, record);
-        target.dispatchEvent(e);
-      }
-    }),
   }),
   ProjectRuns: Object.freeze({
     /**
@@ -690,16 +679,5 @@ export const StoreEvents = Object.freeze({
       target.dispatchEvent(e);
       await e.detail.result;
     },
-
-    State: Object.freeze({
-      create(record: ContextChangeRecord<IProjectExecution>, target: EventTarget = window): void {
-        const e = new ContextStateUpdateEvent(EventTypes.Store.ProjectRuns.State.create, record);
-        target.dispatchEvent(e);
-      },
-      delete(record: ContextDeleteRecord, target: EventTarget = window): void {
-        const e = new ContextStateDeleteEvent(EventTypes.Store.ProjectRuns.State.delete, record);
-        target.dispatchEvent(e);
-      }
-    }),
   }),
 });

package/src/events/http-client/models/CertificatesEvents.ts

@@ -1,12 +1,8 @@
 /* eslint-disable max-classes-per-file */
 import { 
-  ContextChangeRecord, 
-  ContextDeleteRecord, 
   ContextListEvent, 
   ContextListResult, 
   ContextSpaceListOptions, 
-  ContextStateDeleteEvent, 
-  ContextStateUpdateEvent, 
   HttpCertificate 
 } from '@api-client/core/build/browser.js';
 import { EventTypes } from '../../EventTypes.js';
@@ -20,32 +16,8 @@ export class CertificatesEvents {
    * @returns The list result.
    */
   static async list(opts: ContextSpaceListOptions, target: EventTarget = window): Promise<ContextListResult<HttpCertificate> | undefined> {
-    const e = new ContextListEvent(EventTypes.HttpClient.Model.Certificate.list, opts);
+    const e = new ContextListEvent(EventTypes.Store.Certificate.list, opts);
     target.dispatchEvent(e);
     return e.detail.result as Promise<ContextListResult<HttpCertificate> | undefined>;
   }
-
-  static State = class {
-    /**
-     * Dispatches an event after a client certificate was updated
-     *
-     * @param record Change record
-     * @param target A node on which to dispatch the event.
-     */
-    static update(record: ContextChangeRecord<HttpCertificate>, target: EventTarget = window): void {
-      const e = new ContextStateUpdateEvent(EventTypes.HttpClient.Model.Certificate.State.update, record);
-      target.dispatchEvent(e);
-    }
-
-    /**
-     * Dispatches an event after a client certificate was deleted
-     *
-     * @param record Certificate delete record.
-     * @param target A node on which to dispatch the event.
-     */
-    static delete(record: ContextDeleteRecord, target: EventTarget = window): void {
-      const e = new ContextStateDeleteEvent(EventTypes.HttpClient.Model.Certificate.State.delete, record);
-      target.dispatchEvent(e);
-    }
-  }
 }

package/src/pages/http-project/HttpProject.screen.ts

@@ -114,6 +114,14 @@ export default class HttpProjectScreen extends ApplicationScreen {
 
   protected uiMap = new Map<string, IRequestUiMeta>();
 
+  /**
+   * A list of shared execution variables.
+   * These are set by the core execution logic and distributed to the UI elements
+   * that make HTTP request. These elements can freely change the sate and send it 
+   * to the execution.
+   */
+  sharedVariables: Record<string, string> = {};
+
   constructor(bindings: HttpClientProjectBindings) {
     super(bindings);
 
@@ -153,6 +161,7 @@ export default class HttpProjectScreen extends ApplicationScreen {
 
     await this.bindings.store.observeFile(this.key, 'media');
     await this.bindings.store.observeHistory();
+    await this.bindings.store.observeProjectExecutions();
 
     this.layoutStoreKey = `http-client.http-project.state.layout.${this.key}`;
     const state = await this.restoreLayout();
@@ -778,6 +787,7 @@ export default class HttpProjectScreen extends ApplicationScreen {
     <div class="request-container surface1" ?hidden="${!visible}" data-key="${key}">
       <div class="scrollable">
         <http-project-request  
+          .sharedVariables="${this.sharedVariables}"
           data-key="${key}" 
           key="${key}" 
           .project="${project}" 
@@ -831,9 +841,10 @@ export default class HttpProjectScreen extends ApplicationScreen {
     const config = item.value as IProjectRunnerOptions | undefined;
     
     return html`
-    <div class="environment-editor-content surface1" ?hidden="${!visible}" data-key="${key}">
+    <div class="project-runner-content surface1" ?hidden="${!visible}" data-key="${key}">
       <div class="scrollable">
         <project-runner
+          .sharedVariables="${this.sharedVariables}"
           .project="${this.project}" 
           .appInfo="${AppInfo}"
           .folder="${parent}"

package/src/pages/http-project/HttpProject.styles.ts

@@ -55,7 +55,8 @@ split-view {
 } */
 
 .request-container,
-.environment-editor-content {
+.environment-editor-content,
+.project-runner-content {
   border-radius: 0 0 12px 12px;
   overflow: hidden;
   padding: 12px;

package/test/events/EventTypes.test.ts

@@ -42,47 +42,6 @@ describe('events', () => {
           ensureUnique('EventTypes.HttpClient.Workspace.State', EventTypes.HttpClient.Workspace.State);
         });
       });
-
-      describe('Model', () => {
-        describe('Certificate', () => {
-          it('has Certificate namespace', () => {
-            assert.typeOf(EventTypes.HttpClient.Model.Certificate, 'object');
-          });
-      
-          [
-            ['read', 'modelclientcertificateread'],
-            ['list', 'modelclientcertificatelist'],
-            ['delete', 'modelclientcertificatedelete'],
-            ['update', 'modelclientcertificateupdate'],
-            ['insert', 'modelclientcertificateinsert'],
-          ].forEach(([prop, value]) => {
-            it(`has ${prop} property`, () => {
-              assert.equal(EventTypes.HttpClient.Model.Certificate[prop], value);
-            });
-          });
-      
-          it('has the State namespace', () => {
-            assert.typeOf(EventTypes.HttpClient.Model.Certificate.State, 'object');
-          });
-      
-          [
-            ['update', 'modelstateclientcertificateupdate'],
-            ['delete', 'modelstateclientcertificatedelete'],
-          ].forEach(([prop, value]) => {
-            it(`has ${prop} property`, () => {
-              assert.equal(EventTypes.HttpClient.Model.Certificate.State[prop], value);
-            });
-          });
-
-          it('has unique events', () => {
-            ensureUnique('EventTypes.HttpClient.Model.Certificate', EventTypes.HttpClient.Model.Certificate);
-          });
-  
-          it('has unique events on the State namespace', () => {
-            ensureUnique('EventTypes.HttpClient.Model.Certificate.State', EventTypes.HttpClient.Model.Certificate.State);
-          });
-        });
-      });
     });
 
     describe('SchemaDesign', () => {
@@ -314,25 +273,6 @@ describe('events', () => {
         });
       });
 
-      describe('File.State namespace', () => {
-        it('has the namespace', () => {
-          assert.typeOf(EventTypes.Store, 'object');
-        });
-  
-        [
-          ['change', 'storefileschange'],
-          ['fileChange', 'storefilechange'],
-        ].forEach(([prop, value]) => {
-          it(`has ${prop} property`, () => {
-            assert.equal(EventTypes.Store.File.State[prop], value);
-          });
-        });
-    
-        it('has unique events', () => {
-          ensureUnique('EventTypes.Store.File.State', EventTypes.Store.File.State);
-        });
-      });
-
       describe('User namespace', () => {
         it('has the namespace', () => {
           assert.typeOf(EventTypes.Store, 'object');
@@ -374,6 +314,28 @@ describe('events', () => {
           ensureUnique('EventTypes.Store.History', EventTypes.Store.History);
         });
       });
+
+      describe('Certificate namespace', () => {
+        it('has Certificate namespace', () => {
+          assert.typeOf(EventTypes.Store.Certificate, 'object');
+        });
+
+        [
+          ['read', 'storeclientcertificateread'],
+          ['list', 'storeclientcertificatelist'],
+          ['delete', 'storeclientcertificatedelete'],
+          ['update', 'storeclientcertificateupdate'],
+          ['insert', 'storeclientcertificateinsert'],
+        ].forEach(([prop, value]) => {
+          it(`has ${prop} property`, () => {
+            assert.equal(EventTypes.Store.Certificate[prop], value);
+          });
+        });
+
+        it('has unique events', () => {
+          ensureUnique('EventTypes.HttpClient.Model.Certificate', EventTypes.Store.Certificate);
+        });
+      });
     });
 
     describe('Config', () => {