diff --git a/src/designer/elsa-workflows-studio/src/components/editors/properties/elsa-script-property/elsa-script-property.tsx b/src/designer/elsa-workflows-studio/src/components/editors/properties/elsa-script-property/elsa-script-property.tsx index 3a15bfc70..b87d6905d 100644 --- a/src/designer/elsa-workflows-studio/src/components/editors/properties/elsa-script-property/elsa-script-property.tsx +++ b/src/designer/elsa-workflows-studio/src/components/editors/properties/elsa-script-property/elsa-script-property.tsx @@ -1,5 +1,10 @@ import {Component, h, Prop, State} from '@stencil/core'; -import {ActivityDefinitionProperty, ActivityPropertyDescriptor, ActivityValidatingContext, EventTypes} from "../../../../models"; +import { + ActivityDefinitionProperty, + ActivityPropertyDescriptor, + ActivityValidatingContext, + ConfigureScriptPropertyCustomButtonContext, + EventTypes} from "../../../../models"; import {createElsaClient, eventBus} from "../../../../services"; import Tunnel from '../../../../data/workflow-editor'; import {MonacoValueChangedArgs} from "../../../controls/elsa-monaco/elsa-monaco"; @@ -18,13 +23,15 @@ export class ElsaScriptProperty { @Prop() syntax?: string; @Prop({mutable: true}) serverUrl: string; @Prop({mutable: true}) workflowDefinitionId: string; - @State() currentValue?: string; + @State() currentValue?: string; monacoEditor: HTMLElsaMonacoElement; private activityValidatingContext: ActivityValidatingContext = null; + private scriptPropertyCustomButtonContext: ConfigureScriptPropertyCustomButtonContext = null; async componentWillLoad() { this.currentValue = this.propertyModel.expressions['Literal']; + this.configureScriptPropertyCustomButton(); this.validate(this.currentValue); } @@ -35,6 +42,15 @@ export class ElsaScriptProperty { await this.monacoEditor.addJavaScriptLib(libSource, libUri); } + async configureScriptPropertyCustomButton() { + this.scriptPropertyCustomButtonContext = { + activityType: this.context, + prop: this.propertyDescriptor.name, + data: null + }; + await eventBus.emit(EventTypes.ScriptPropertyLoadingCustomButton, this, this.scriptPropertyCustomButtonContext); + } + mapSyntaxToLanguage(syntax: string): any { switch (syntax) { case 'JavaScript': @@ -47,9 +63,14 @@ export class ElsaScriptProperty { } } - onConvertToJsonSchemaClick(e: Event) { + onCustomButtonClick(e: Event) { e.preventDefault(); - window.open('https://www.convertsimple.com/convert-json-to-json-schema/'); + this.scriptPropertyCustomButtonContext = { + activityType: this.context, + prop: this.propertyDescriptor.name, + data: null + }; + eventBus.emit(EventTypes.ScriptPropertyCustomButtonClick, this, this.scriptPropertyCustomButtonContext); } onMonacoValueChanged(e: MonacoValueChangedArgs) { @@ -79,7 +100,6 @@ export class ElsaScriptProperty { const fieldLabel = propertyDescriptor.label || propertyName; const fieldHint = propertyDescriptor.hint; const value = this.currentValue; - const isSchema = fieldName === "Schema"; const renderValidationResult = () => { if (this.activityValidatingContext == null || !this.activityValidatingContext.isValidated) @@ -97,6 +117,23 @@ export class ElsaScriptProperty { ) } + const renderCustomButton = () => { + if (this.scriptPropertyCustomButtonContext.data == null) + return; + + const label = this.scriptPropertyCustomButtonContext.data.label; + + return ( +
+ this.onCustomButtonClick(e)} + class="elsa-relative elsa-inline-flex elsa-items-center elsa-px-4 elsa-py-2 elsa-border elsa-border-gray-300 elsa-text-sm elsa-leading-5 elsa-font-medium elsa-rounded-md elsa-text-gray-700 elsa-bg-white hover:elsa-text-gray-500 focus:elsa-outline-none focus:elsa-shadow-outline-blue focus:elsa-border-blue-300 active:elsa-bg-gray-100 active:elsa-text-gray-700 elsa-transition elsa-ease-in-out elsa-duration-150"> + {label} + +
+ ) + } + return
@@ -128,16 +165,7 @@ export class ElsaScriptProperty { {fieldHint ?

{fieldHint}

: undefined} {renderValidationResult()} - {isSchema ? - - : undefined - } + {renderCustomButton()}
} } diff --git a/src/designer/elsa-workflows-studio/src/models/events.ts b/src/designer/elsa-workflows-studio/src/models/events.ts index 274e9ffed..7100f0d39 100644 --- a/src/designer/elsa-workflows-studio/src/models/events.ts +++ b/src/designer/elsa-workflows-studio/src/models/events.ts @@ -39,7 +39,9 @@ export const EventTypes = { ClipboardCopied: 'clipboard-copied', PasteActivity: 'paste-activity', TestActivityMessageReceived: 'test-activity-message-received', - FlyoutPanelTabSelected: 'flyout-panel-tab-selected' + FlyoutPanelTabSelected: 'flyout-panel-tab-selected', + ScriptPropertyLoadingCustomButton: 'script-property-loading-custom-button', + ScriptPropertyCustomButtonClick: 'script-property-custom-button-click' }; export interface AddActivityEventArgs { @@ -89,3 +91,9 @@ export interface ConfigureWorkflowRegistryColumnsContext { export interface ConfigureWorkflowRegistryUpdatingContext { params: any; } + +export interface ConfigureScriptPropertyCustomButtonContext { + activityType: string + prop: string, + data?: any; +} diff --git a/src/designer/elsa-workflows-studio/src/plugins/http-endpoint-plugin.tsx b/src/designer/elsa-workflows-studio/src/plugins/http-endpoint-plugin.tsx index ff8ae0e9a..22bd93b86 100644 --- a/src/designer/elsa-workflows-studio/src/plugins/http-endpoint-plugin.tsx +++ b/src/designer/elsa-workflows-studio/src/plugins/http-endpoint-plugin.tsx @@ -1,5 +1,11 @@ import {eventBus, ElsaPlugin} from "../services"; -import {ActivityDesignDisplayContext, ActivityUpdatedContext, ActivityValidatingContext, EventTypes, SyntaxNames} from "../models"; +import { + ActivityDesignDisplayContext, + ActivityUpdatedContext, + ActivityValidatingContext, + EventTypes, + ConfigureScriptPropertyCustomButtonContext, + SyntaxNames} from "../models"; import {htmlEncode} from "../utils/utils"; import Ajv from "ajv" @@ -8,6 +14,8 @@ export class HttpEndpointPlugin implements ElsaPlugin { eventBus.on(EventTypes.ActivityDesignDisplaying, this.onActivityDisplaying); eventBus.on(EventTypes.ActivityPluginUpdated, this.onActivityUpdated); eventBus.on(EventTypes.ActivityPluginValidating, this.onActivityValidating); + eventBus.on(EventTypes.ScriptPropertyLoadingCustomButton, this.onLoadingCustomButton); + eventBus.on(EventTypes.ScriptPropertyCustomButtonClick, this.onCustomButtonClick); } onActivityDisplaying(context: ActivityDesignDisplayContext) { @@ -23,6 +31,21 @@ export class HttpEndpointPlugin implements ElsaPlugin { context.bodyDisplay = `

${bodyDisplay}

`; } + onLoadingCustomButton(context: ConfigureScriptPropertyCustomButtonContext) { + if (context.activityType !== 'HttpEndpoint' || context.prop !== 'Schema') + return; + + const label: string = 'Convert to Json Schema'; + context.data = {label}; + } + + onCustomButtonClick(context: ConfigureScriptPropertyCustomButtonContext) { + if (context.activityType !== 'HttpEndpoint' || context.prop !== 'Schema') + return; + + window.open('https://www.convertsimple.com/convert-json-to-json-schema/'); + } + onActivityUpdated(context: ActivityUpdatedContext) { const activityModel = context.activityModel; if (activityModel.type !== 'HttpEndpoint')