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 ( +
+ ) + } + return{fieldHint}
: undefined} {renderValidationResult()} - {isSchema ? - - : undefined - } + {renderCustomButton()}${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')