From 7ef28b41c20de86fb0a02a746e3dac5eeb420051 Mon Sep 17 00:00:00 2001 From: axeleron007 Date: Thu, 3 Jun 2021 13:10:26 +0300 Subject: [PATCH] Fixes to the webhooks UI Fixes to the webhooks UI --- .../elsa-workflows-studio/src/components.d.ts | 6 +- .../elsa-studio-root/elsa-studio-root.tsx | 2 +- .../elsa-studio-webhook-definitions-edit.tsx | 6 +- ...ebhook-definition-editor-notifications.tsx | 2 +- .../elsa-webhook-definition-editor-screen.tsx | 67 ++++++++++++------- .../elsa-webhook-definitions-list-screen.tsx | 4 +- .../src/models/webhook/index.ts | 3 +- .../src/models/webhook/view.ts | 2 - 8 files changed, 55 insertions(+), 37 deletions(-) diff --git a/src/designer/elsa-workflows-studio/src/components.d.ts b/src/designer/elsa-workflows-studio/src/components.d.ts index cf6fbf17c..19373a0cb 100644 --- a/src/designer/elsa-workflows-studio/src/components.d.ts +++ b/src/designer/elsa-workflows-studio/src/components.d.ts @@ -150,8 +150,8 @@ export namespace Components { "serverUrl": string; } interface ElsaStudioWebhookDefinitionsEdit { + "history": RouterHistory; "match": MatchResults; - "monacoLibPath": string; "serverUrl": string; } interface ElsaStudioWebhookDefinitionsList { @@ -196,6 +196,7 @@ export namespace Components { interface ElsaWebhookDefinitionEditorScreen { "getServerUrl": () => Promise; "getWebhookId": () => Promise; + "history"?: RouterHistory; "monacoLibPath": string; "serverUrl": string; "webhookId": string; @@ -720,8 +721,8 @@ declare namespace LocalJSX { "serverUrl"?: string; } interface ElsaStudioWebhookDefinitionsEdit { + "history"?: RouterHistory; "match"?: MatchResults; - "monacoLibPath"?: string; "serverUrl"?: string; } interface ElsaStudioWebhookDefinitionsList { @@ -762,6 +763,7 @@ declare namespace LocalJSX { interface ElsaWebhookDefinitionEditorNotifications { } interface ElsaWebhookDefinitionEditorScreen { + "history"?: RouterHistory; "monacoLibPath"?: string; "onWebhookSaved"?: (event: CustomEvent) => void; "serverUrl"?: string; diff --git a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-root/elsa-studio-root.tsx b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-root/elsa-studio-root.tsx index 10913a1bb..120ff4ec6 100644 --- a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-root/elsa-studio-root.tsx +++ b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-root/elsa-studio-root.tsx @@ -62,7 +62,7 @@ export class ElsaStudioRoot { - + {/**/} diff --git a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-webhook-definitions-edit/elsa-studio-webhook-definitions-edit.tsx b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-webhook-definitions-edit/elsa-studio-webhook-definitions-edit.tsx index 8847588aa..fcbf89841 100644 --- a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-webhook-definitions-edit/elsa-studio-webhook-definitions-edit.tsx +++ b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-webhook-definitions-edit/elsa-studio-webhook-definitions-edit.tsx @@ -1,5 +1,5 @@ import {Component, Prop, h} from '@stencil/core'; -import {MatchResults} from '@stencil/router'; +import {RouterHistory, MatchResults} from '@stencil/router'; @Component({ tag: 'elsa-studio-webhook-definitions-edit', @@ -8,7 +8,7 @@ import {MatchResults} from '@stencil/router'; export class ElsaStudioWebhookDefinitionsEdit { @Prop() match: MatchResults; @Prop() serverUrl: string; - @Prop() monacoLibPath: string; + @Prop() history: RouterHistory; id?: string; @@ -25,7 +25,7 @@ export class ElsaStudioWebhookDefinitionsEdit { const id = this.id; return
- +
; } } diff --git a/src/designer/elsa-workflows-studio/src/components/screens/webhook-definition-editor/elsa-webhook-definition-editor-notifications/elsa-webhook-definition-editor-notifications.tsx b/src/designer/elsa-workflows-studio/src/components/screens/webhook-definition-editor/elsa-webhook-definition-editor-notifications/elsa-webhook-definition-editor-notifications.tsx index 228de74cf..a070667e6 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/webhook-definition-editor/elsa-webhook-definition-editor-notifications/elsa-webhook-definition-editor-notifications.tsx +++ b/src/designer/elsa-workflows-studio/src/components/screens/webhook-definition-editor/elsa-webhook-definition-editor-notifications/elsa-webhook-definition-editor-notifications.tsx @@ -21,7 +21,7 @@ export class ElsaWebhookEditorNotifications { onWebhookSaved = async (webhookDefinition: WebhookDefinition) => await this.toastNotificationElement.show({ autoCloseIn: 1500, title: 'Webhook Saved', - message: `Webhook successfully saved.` + message: `Webhook successfully saved with name ${webhookDefinition.name}.` }); render() { diff --git a/src/designer/elsa-workflows-studio/src/components/screens/webhook-definition-editor/elsa-webhook-definition-editor-screen/elsa-webhook-definition-editor-screen.tsx b/src/designer/elsa-workflows-studio/src/components/screens/webhook-definition-editor/elsa-webhook-definition-editor-screen/elsa-webhook-definition-editor-screen.tsx index 48d544f5d..630ca3401 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/webhook-definition-editor/elsa-webhook-definition-editor-screen/elsa-webhook-definition-editor-screen.tsx +++ b/src/designer/elsa-workflows-studio/src/components/screens/webhook-definition-editor/elsa-webhook-definition-editor-screen/elsa-webhook-definition-editor-screen.tsx @@ -1,18 +1,13 @@ import {Component, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch} from '@stencil/core'; import {eventBus} from '../../../../services/event-bus'; -import {ActivityDefinition, ActivityDescriptor, ActivityModel, ConnectionDefinition, ConnectionModel, VersionOptions, WorkflowPersistenceBehavior} from "../../../../models"; -import {EventTypes, WebhookDefinition, WebhookModel} from "../../../../models/webhook"; +import {EventTypes, WebhookDefinition} from "../../../../models/webhook"; import {createElsaClient, SaveWebhookDefinitionRequest} from "../../../../services/elsa-client"; import {pluginManager} from '../../../../services/plugin-manager'; import state from '../../../../utils/store'; +import {RouterHistory} from '@stencil/router'; import Tunnel, {WebhookEditorState} from '../../../../data/webhook-editor'; import {checkBox, FormContext, selectField, SelectOption, textArea, textInput} from "../../../../utils/forms"; -interface VariableDefinition { - name?: string; - value?: string -} - @Component({ tag: 'elsa-webhook-definition-editor-screen', shadow: false, @@ -27,7 +22,7 @@ export class ElsaWebhookDefinitionEditorScreen { @Prop({attribute: 'webhook-definition-id', reflect: true}) webhookId: string; @Prop({attribute: 'server-url', reflect: true}) serverUrl: string; @Prop({attribute: 'monaco-lib-path', reflect: true}) monacoLibPath: string; - //@Prop() webhookDefinitionInternal: WebhookDefinition; + @Prop() history?: RouterHistory; @State() webhookDefinition: WebhookDefinition; @State() saving: boolean; @State() saved: boolean; @@ -47,7 +42,7 @@ export class ElsaWebhookDefinitionEditorScreen { } @Watch('webhookDefinition') - handleWebhookDefinitionChanged(newValue: WebhookDefinition) { + async webhookDefinitionChangedHandler(newValue: WebhookDefinition) { this.webhookDefinition = {...newValue}; this.formContext = new FormContext(this.webhookDefinition, newValue => this.webhookDefinition = newValue); } @@ -58,7 +53,7 @@ export class ElsaWebhookDefinitionEditorScreen { let webhookDefinition: WebhookDefinition = ElsaWebhookDefinitionEditorScreen.createWebhookDefinition(); webhookDefinition.id = webhookId; const client = createElsaClient(this.serverUrl); - debugger + if (webhookId && webhookId.length > 0) { try { webhookDefinition = await client.webhookDefinitionsApi.getByWebhookId(webhookId); @@ -74,18 +69,20 @@ export class ElsaWebhookDefinitionEditorScreen { async serverUrlChangedHandler(newValue: string) { } - //@Listen('webhook-changed') - //async webhookChangedHandler(event: CustomEvent) { - //const webhookModel = event.detail; -// await this.saveWebhook(webhookModel); - //} - async componentWillLoad() { await this.serverUrlChangedHandler(this.serverUrl); await this.webhookIdChangedHandler(this.webhookId); - await this.handleWebhookDefinitionChanged(this.webhookDefinition); + await this.webhookDefinitionChangedHandler(this.webhookDefinition); } + /*connectedCallback() { + eventBus.on(EventTypes.WebhookModelChanged, this.onUpdateWorkflowSettings); + } + + disconnectedCallback() { + eventBus.detach(EventTypes.UpdateWorkflowSettings, this.onUpdateWorkflowSettings); + }*/ + async saveWebhook() { if (!this.serverUrl || this.serverUrl.length == 0) @@ -103,14 +100,20 @@ export class ElsaWebhookDefinitionEditorScreen { isEnabled: webhookDefinition.isEnabled, }; + this.saving = true; + try { webhookDefinition = await client.webhookDefinitionsApi.save(request); + this.saving = false; + this.saved = true; this.webhookDefinition = webhookDefinition; - setTimeout(() => this.saved = false, 500); + setTimeout(() => this.saved = false, 2000); this.webhookSaved.emit(webhookDefinition); } catch (e) { console.error(e); + this.saving = false; + this.saved = false; this.networkError = e.message; setTimeout(() => this.networkError = null, 10000); } @@ -123,17 +126,20 @@ export class ElsaWebhookDefinitionEditorScreen { async onSaveClicked(e: Event) { e.preventDefault(); await this.saveWebhook(); + eventBus.emit(EventTypes.WebhookSaved, this, this.webhookDefinition); + this.history.push(`/webhook-definitions`, {}); } render() { - const tunnelState: WebhookEditorState = { + + /*const tunnelState: WebhookEditorState = { serverUrl: this.serverUrl, webhookId: this.webhookDefinition.id - }; + };*/ return ( this.el = el}> - +
this.onSaveClicked(e)}>
@@ -141,6 +147,7 @@ export class ElsaWebhookDefinitionEditorScreen {
{this.renderWebhookFields()} + {this.renderCanvas()}
@@ -151,8 +158,7 @@ export class ElsaWebhookDefinitionEditorScreen {
- - + ); } @@ -174,6 +180,21 @@ export class ElsaWebhookDefinitionEditorScreen { ); } + renderCanvas() { + + return ( +
+ +
+
+ {this.renderSavingIndicator()} + {this.renderNetworkError()} +
+
+
+ ); + } + renderSavingIndicator() { const message = diff --git a/src/designer/elsa-workflows-studio/src/components/screens/webhook-definition-list/else-webhook-definitions-screen/elsa-webhook-definitions-list-screen.tsx b/src/designer/elsa-workflows-studio/src/components/screens/webhook-definition-list/else-webhook-definitions-screen/elsa-webhook-definitions-list-screen.tsx index f7198e792..dc4699ef1 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/webhook-definition-list/else-webhook-definitions-screen/elsa-webhook-definitions-list-screen.tsx +++ b/src/designer/elsa-workflows-studio/src/components/screens/webhook-definition-list/else-webhook-definitions-screen/elsa-webhook-definitions-list-screen.tsx @@ -96,9 +96,7 @@ export class ElsaWebhookDefinitionsListScreen { ); - - debugger - + return ( diff --git a/src/designer/elsa-workflows-studio/src/models/webhook/index.ts b/src/designer/elsa-workflows-studio/src/models/webhook/index.ts index 39bec6001..e305f0ef3 100644 --- a/src/designer/elsa-workflows-studio/src/models/webhook/index.ts +++ b/src/designer/elsa-workflows-studio/src/models/webhook/index.ts @@ -1,3 +1,2 @@ export * from './domain'; -export * from './events'; -export * from './view'; \ No newline at end of file +export * from './events'; \ No newline at end of file diff --git a/src/designer/elsa-workflows-studio/src/models/webhook/view.ts b/src/designer/elsa-workflows-studio/src/models/webhook/view.ts index 3eb35ef88..e69de29bb 100644 --- a/src/designer/elsa-workflows-studio/src/models/webhook/view.ts +++ b/src/designer/elsa-workflows-studio/src/models/webhook/view.ts @@ -1,2 +0,0 @@ -export interface WebhookModel { -} \ No newline at end of file