SemianiakaVY/elsa-core
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

Fixes to the webhooks UI

Browse source 
Fixes to the webhooks UI
This commit is contained in:
axeleron007 2021-06-03 13:10:26 +03:00
parent 17831459a9
commit 7ef28b41c2
8 changed files with 55 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/designer/elsa-workflows-studio/src/components.d.ts vendored
View file

@ -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<string>;
"getWebhookId": () => Promise<string>;
"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<WebhookDefinition>) => void;
"serverUrl"?: string;

2
src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-root/elsa-studio-root.tsx
View file

@ -62,7 +62,7 @@ export class ElsaStudioRoot {
<stencil-route url="/workflow-instances" component="elsa-studio-workflow-instances-list" componentProps={{'serverUrl': serverUrl}} exact={true}/>
<stencil-route url="/workflow-instances/:id" component="elsa-studio-workflow-instances-view" componentProps={{'serverUrl': serverUrl}}/>
<stencil-route url="/webhook-definitions" component="elsa-studio-webhook-definitions-list" componentProps={{'serverUrl': serverUrl}} exact={true}/>
<stencil-route url="/webhook-definitions/:id" component="elsa-studio-webhook-definitions-edit" componentProps={{'serverUrl': serverUrl, 'monacoLibPath': monacoLibPath}}/>
<stencil-route url="/webhook-definitions/:id" component="elsa-studio-webhook-definitions-edit" componentProps={{'serverUrl': serverUrl}}/>
</stencil-route-switch>
</stencil-router>
{/*</Tunnel.Provider>*/}

6
src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-webhook-definitions-edit/elsa-studio-webhook-definitions-edit.tsx
View file

@ -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 <div>
<elsa-webhook-definition-editor-screen server-url={this.serverUrl} webhook-definition-id={id} monaco-lib-path={this.monacoLibPath}/>
<elsa-webhook-definition-editor-screen history={this.history} server-url={this.serverUrl} webhook-definition-id={id}/>
</div>;
}
}

2
src/designer/elsa-workflows-studio/src/components/screens/webhook-definition-editor/elsa-webhook-definition-editor-notifications/elsa-webhook-definition-editor-notifications.tsx
View file

@ -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() {

67
src/designer/elsa-workflows-studio/src/components/screens/webhook-definition-editor/elsa-webhook-definition-editor-screen/elsa-webhook-definition-editor-screen.tsx
View file

@ -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<WebhookModel>) {
//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 (
<Host class="elsa-flex elsa-flex-col elsa-w-full" ref={el => this.el = el}>
<form onSubmit={e => this.onSaveClicked(e)}>
<div class="elsa-px-8 mb-8">
<div class="elsa-border-b elsa-border-gray-200">
@ -141,6 +147,7 @@ export class ElsaWebhookDefinitionEditorScreen {
</div>
{this.renderWebhookFields()}
{this.renderCanvas()}
<div class="elsa-pt-5">
<div class="elsa-px-4 elsa-py-3 sm:elsa-px-6 sm:elsa-flex sm:elsa-flex-row-reverse">
@ -151,8 +158,7 @@ export class ElsaWebhookDefinitionEditorScreen {
</div>
</div>
</form>
</Host>
);
}
@ -174,6 +180,21 @@ export class ElsaWebhookDefinitionEditorScreen {
);
}
renderCanvas() {
return (
<div class="elsa-flex-1 elsa-flex elsa-relative">
<elsa-webhook-definition-editor-notifications/>
<div class="elsa-fixed elsa-bottom-10 elsa-right-12">
<div class="elsa-flex elsa-items-center elsa-space-x-4">
{this.renderSavingIndicator()}
{this.renderNetworkError()}
</div>
</div>
</div>
);
}
renderSavingIndicator() {
const message =

4
src/designer/elsa-workflows-studio/src/components/screens/webhook-definition-list/else-webhook-definitions-screen/elsa-webhook-definitions-list-screen.tsx
View file

@ -96,9 +96,7 @@ export class ElsaWebhookDefinitionsListScreen {
<path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/>
</svg>
);
debugger
return (
<tr>
<td class="elsa-px-6 elsa-py-3 elsa-whitespace-no-wrap elsa-text-sm elsa-leading-5 elsa-font-medium elsa-text-gray-900">

3
src/designer/elsa-workflows-studio/src/models/webhook/index.ts
View file

@ -1,3 +1,2 @@
export * from './domain';
export * from './events';
export * from './view';
export * from './events';

2
src/designer/elsa-workflows-studio/src/models/webhook/view.ts
View file

@ -1,2 +0,0 @@
export interface WebhookModel {
}