Highlight activity with a color in designer tree on text execution

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<void>;
+        "selectTestActivity": (activityId?: string) => Promise<void>;
         "serverUrl": string;
         "workflowDefinition": WorkflowDefinition;
     }
@@ -966,7 +966,6 @@ declare namespace LocalJSX {
     interface ElsaWorkflowPropertiesPanel {
         "culture"?: string;
         "expandButtonPosition"?: number;
-        "onTestActivityMessageReceived"?: (event: CustomEvent<WorkflowTestActivityMessage>) => void;
         "serverUrl"?: string;
         "workflowDefinition"?: WorkflowDefinition;
     }

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<ActivityContextMenuState>;
   @Event() connectionContextMenuButtonClicked: EventEmitter<ActivityContextMenuState>;
   @State() workflowModel: WorkflowModel;
+  @State() workflowTestActivityMessages: Array<WorkflowTestActivityMessage> = [];
 
   @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 {
       </svg>`;
   }
 
+  renderActivityTestIcon(activityId: string) {
+
+    var testActivityMessage = this.workflowTestActivityMessages.find(x => x.activityId == activityId);
+    if (testActivityMessage == undefined)
+      return "";
+
+    const color = testActivityMessage.status == "Executed" ? "green" : "red";
+
+    return `<svg class="elsa-h-8 elsa-w-8 elsa-text-${color}-500" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z"/>
+        <circle cx="12" cy="12" r="9" fill="${color}" />
+      </svg>`;
+  }
+
   renderActivity(activity: ActivityModel) {
     const activityDisplayContexts = this.activityDisplayContexts || {};
     const displayContext = activityDisplayContexts[activity.activityId] || undefined;
@@ -820,6 +849,7 @@ export class ElsaWorkflowDesigner {
 
     return `<div id=${`activity-${activity.activityId}`}
     class="activity elsa-border-2 elsa-border-solid elsa-rounded elsa-bg-white elsa-text-left elsa-text-black elsa-text-lg elsa-select-none elsa-max-w-md elsa-shadow-sm elsa-relative ${cssClass}">
+      ${this.renderActivityTestIcon(activity.activityId)}
       <div class="elsa-p-5">
         <div class="elsa-flex elsa-justify-between elsa-space-x-8">
           <div class="elsa-flex-shrink-0">

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<WorkflowTestActivityMessage> = [];
 
   @State() activityContextMenuState: ActivityContextMenuState = {
     shown: false,
@@ -386,16 +384,12 @@ export class ElsaWorkflowDefinitionEditorScreen {
 
   async onActivitySelected(e: CustomEvent<ActivityModel>) {
     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<ActivityModel>) {
     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<WorkflowTestActivityMessage>) {
-    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 (
       <elsa-workflow-properties-panel ref={el => this.propertiesPanel = el}
-        workflowDefinition={this.workflowDefinition}
-        onTestActivityMessageReceived={e => this.onTestActivityMessageReceived(e)}        
+        workflowDefinition={this.workflowDefinition}  
         expandButtonPosition={2}
       />);
   }

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<WorkflowTestActivityMessage>;
+  @State() workflowTestActivityMessages: Array<WorkflowTestActivityMessage> = [];
 
   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 = {

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 {