diff --git a/src/designer/elsa-workflows-studio/src/components.d.ts b/src/designer/elsa-workflows-studio/src/components.d.ts index 6a029fcbe..e3353209a 100644 --- a/src/designer/elsa-workflows-studio/src/components.d.ts +++ b/src/designer/elsa-workflows-studio/src/components.d.ts @@ -5,7 +5,7 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { ActivityDefinitionProperty, ActivityDescriptor, ActivityModel, ActivityPropertyDescriptor, ElsaStudio, OrderBy, SelectListItem, VersionOptions, WorkflowBlueprint, WorkflowDefinition, WorkflowExecutionLogRecord, WorkflowModel, WorkflowStatus, WorkflowTestActivityMessage } from "./models"; +import { ActivityDefinitionProperty, ActivityDescriptor, ActivityModel, ActivityPropertyDescriptor, ElsaStudio, OrderBy, SelectListItem, VersionOptions, WorkflowBlueprint, WorkflowDefinition, WorkflowExecutionLogRecord, WorkflowModel, WorkflowStatus } from "./models"; import { LocationSegments, MatchResults, RouterHistory } from "@stencil/router"; import { MenuItem } from "./components/controls/elsa-context-menu/models"; import { VNode } from "@stencil/core"; @@ -298,7 +298,7 @@ export namespace Components { interface ElsaWorkflowPropertiesPanel { "culture": string; "expandButtonPosition": number; - "selectTestActivity": (message?: WorkflowTestActivityMessage) => Promise; + "selectTestActivity": (activityId?: string) => Promise; "serverUrl": string; "workflowDefinition": WorkflowDefinition; } @@ -966,7 +966,6 @@ declare namespace LocalJSX { interface ElsaWorkflowPropertiesPanel { "culture"?: string; "expandButtonPosition"?: number; - "onTestActivityMessageReceived"?: (event: CustomEvent) => void; "serverUrl"?: string; "workflowDefinition"?: WorkflowDefinition; } diff --git a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx b/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx index 62ab3a675..cbb45c513 100644 --- a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx +++ b/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx @@ -59,6 +59,7 @@ export class ElsaWorkflowDesigner { @Event() activityContextMenuButtonClicked: EventEmitter; @Event() connectionContextMenuButtonClicked: EventEmitter; @State() workflowModel: WorkflowModel; + @State() workflowTestActivityMessages: Array = []; @State() activityContextMenuState: ActivityContextMenuState = { shown: false, @@ -214,6 +215,7 @@ export class ElsaWorkflowDesigner { eventBus.on(EventTypes.PasteActivity, this.onPasteActivity); eventBus.on(EventTypes.HideModalDialog, this.onCopyPasteActivityEnabled); eventBus.on(EventTypes.ShowWorkflowSettings, this.onCopyPasteActivityDisabled); + eventBus.on(EventTypes.TestActivityMessageReceived, this.onTestActivityMessageReceived); } disconnectedCallback() { @@ -222,6 +224,7 @@ export class ElsaWorkflowDesigner { eventBus.detach(EventTypes.PasteActivity, this.onPasteActivity); eventBus.detach(EventTypes.HideModalDialog, this.onCopyPasteActivityEnabled); eventBus.detach(EventTypes.ShowWorkflowSettings, this.onCopyPasteActivityDisabled); + eventBus.detach(EventTypes.TestActivityMessageReceived, this.onTestActivityMessageReceived); d3.selectAll('.node').on('click', null); d3.selectAll('.edgePath').on('contextmenu', null); } @@ -655,6 +658,18 @@ export class ElsaWorkflowDesigner { this.ignoreCopyPasteActivities = true } + onTestActivityMessageReceived = async args => { + const message = args as WorkflowTestActivityMessage; + if (!!message) { + this.workflowTestActivityMessages = this.workflowTestActivityMessages.filter(x => x.activityId !== message.activityId); + this.workflowTestActivityMessages = [...this.workflowTestActivityMessages, message]; + } + else + this.workflowTestActivityMessages = []; + + this.rerenderTree(); + }; + renderNodes() { const prevTransform = this.innerD3Selected.attr('transform'); const scaleAfter = this.zoomParams.scale; @@ -808,6 +823,20 @@ export class ElsaWorkflowDesigner { `; } + renderActivityTestIcon(activityId: string) { + + var testActivityMessage = this.workflowTestActivityMessages.find(x => x.activityId == activityId); + if (testActivityMessage == undefined) + return ""; + + const color = testActivityMessage.status == "Executed" ? "green" : "red"; + + return ` + + + `; + } + renderActivity(activity: ActivityModel) { const activityDisplayContexts = this.activityDisplayContexts || {}; const displayContext = activityDisplayContexts[activity.activityId] || undefined; @@ -820,6 +849,7 @@ export class ElsaWorkflowDesigner { return `
+ ${this.renderActivityTestIcon(activity.activityId)}
diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-screen/elsa-workflow-definition-editor-screen.tsx b/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-screen/elsa-workflow-definition-editor-screen.tsx index ae6e115d2..e2d6ab1f9 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-screen/elsa-workflow-definition-editor-screen.tsx +++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-screen/elsa-workflow-definition-editor-screen.tsx @@ -10,8 +10,7 @@ import { VersionOptions, WorkflowDefinition, WorkflowModel, - WorkflowPersistenceBehavior, - WorkflowTestActivityMessage + WorkflowPersistenceBehavior } from "../../../../models"; import {eventBus, createElsaClient, SaveWorkflowDefinitionRequest} from "../../../../services"; import state from '../../../../utils/store'; @@ -47,7 +46,6 @@ export class ElsaWorkflowDefinitionEditorScreen { @State() imported: boolean; @State() networkError: string; @State() selectedActivityId?: string; - @State() workflowTestActivityMessages: Array = []; @State() activityContextMenuState: ActivityContextMenuState = { shown: false, @@ -386,16 +384,12 @@ export class ElsaWorkflowDefinitionEditorScreen { async onActivitySelected(e: CustomEvent) { this.selectedActivityId = e.detail.activityId; - var message = this.workflowTestActivityMessages.find(x => x.activityId == this.selectedActivityId); - - if (!!message) - await this.propertiesPanel.selectTestActivity(message); + await this.propertiesPanel.selectTestActivity(this.selectedActivityId); } async onActivityDeselected(e: CustomEvent) { if (this.selectedActivityId == e.detail.activityId) this.selectedActivityId = null; - await this.propertiesPanel.selectTestActivity(null); } @@ -408,17 +402,6 @@ export class ElsaWorkflowDefinitionEditorScreen { await this.saveWorkflowInternal(this.workflowModel); } - onTestActivityMessageReceived(e: CustomEvent) { - const message = e.detail; - if (!!message) { - this.workflowTestActivityMessages = this.workflowTestActivityMessages.filter(x => x.activityId !== message.activityId); - this.workflowTestActivityMessages = [...this.workflowTestActivityMessages, message]; - this.selectedActivityId = message.activityId; - } - else - this.workflowTestActivityMessages = []; - } - render() { const tunnelState: WorkflowEditorState = { serverUrl: this.serverUrl, @@ -639,8 +622,7 @@ export class ElsaWorkflowDefinitionEditorScreen { private renderPropertiesPanel() { return ( this.propertiesPanel = el} - workflowDefinition={this.workflowDefinition} - onTestActivityMessageReceived={e => this.onTestActivityMessageReceived(e)} + workflowDefinition={this.workflowDefinition} expandButtonPosition={2} />); } diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-properties-panel/elsa-workflow-properties-panel.tsx b/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-properties-panel/elsa-workflow-properties-panel.tsx index dd43055be..9d697b4b9 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-properties-panel/elsa-workflow-properties-panel.tsx +++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-properties-panel/elsa-workflow-properties-panel.tsx @@ -2,11 +2,11 @@ import {Component, Prop, Event, EventEmitter, h, Method, State, Watch, Host} fro import {HubConnection, HubConnectionBuilder} from '@microsoft/signalr'; import {enter, leave} from "el-transition" import * as collection from 'lodash/collection'; -import {WorkflowDefinition, WorkflowDefinitionSummary, WorkflowTestActivityMessage} from "../../../../models"; +import {EventTypes, WorkflowDefinition, WorkflowDefinitionSummary, WorkflowTestActivityMessage} from "../../../../models"; import {i18n} from "i18next"; import {loadTranslations} from "../../../i18n/i18n-loader"; import {resources} from "./localizations"; -import {createElsaClient, WorkflowTestExecuteRequest, WorkflowTestSaveRequest} from "../../../../services"; +import {createElsaClient, eventBus, WorkflowTestExecuteRequest, WorkflowTestSaveRequest} from "../../../../services"; import Tunnel from "../../../../data/dashboard"; interface Tab { @@ -41,7 +41,7 @@ export class ElsaWorkflowPropertiesPanel { @State() expanded: boolean; @State() selectedTabId: string = 'testProperties'; @State() hubConnection: HubConnection; - @Event() testActivityMessageReceived: EventEmitter; + @State() workflowTestActivityMessages: Array = []; i18next: i18n; signalRConnectionId: string; @@ -50,7 +50,8 @@ export class ElsaWorkflowPropertiesPanel { testActivity: WorkflowTestActivityMessage; @Method() - async selectTestActivity(message?: WorkflowTestActivityMessage) { + async selectTestActivity(activityId?: string) { + const message = this.workflowTestActivityMessages.find(x => x.activityId == activityId) const messageInternal = !!message ? message : null; this.selectTestActivityMessageInternal(messageInternal); this.selectedTabId = 'testProperties'; @@ -80,7 +81,9 @@ export class ElsaWorkflowPropertiesPanel { this.hubConnection.on('DispatchMessage', (message) => { message.data = JSON.parse(message.data); - this.testActivityMessageReceived.emit(message); + this.workflowTestActivityMessages = this.workflowTestActivityMessages.filter(x => x.activityId !== message.activityId); + this.workflowTestActivityMessages = [...this.workflowTestActivityMessages, message]; + eventBus.emit(EventTypes.TestActivityMessageReceived, this, message); }); this.hubConnection.start() @@ -94,7 +97,8 @@ export class ElsaWorkflowPropertiesPanel { } async onExecuteWorkflowClick() { - this.testActivityMessageReceived.emit(null); + this.workflowTestActivityMessages = []; + eventBus.emit(EventTypes.TestActivityMessageReceived, this, null); const elsaClient = this.createClient(); const request: WorkflowTestExecuteRequest = { diff --git a/src/designer/elsa-workflows-studio/src/models/events.ts b/src/designer/elsa-workflows-studio/src/models/events.ts index 2a5989e7f..77477b365 100644 --- a/src/designer/elsa-workflows-studio/src/models/events.ts +++ b/src/designer/elsa-workflows-studio/src/models/events.ts @@ -32,7 +32,8 @@ export const EventTypes = { WorkflowRegistryUpdated: 'workflow-registry.updated', ClipboardPermissionDenied: 'clipboard-permission-denied', ClipboardCopied: 'clipboard-copied', - PasteActivity: 'paste-activity' + PasteActivity: 'paste-activity', + TestActivityMessageReceived: 'test-activity-message-received' }; export interface AddActivityEventArgs {