Test Panel functionality fixed.

src/designer/elsa-workflows-studio/src/components.d.ts

@@ -329,9 +329,9 @@ export namespace Components {
     }
     interface ElsaWorkflowTestPanel {
         "culture": string;
-        "selectTestActivity": (activityId?: string) => Promise<void>;
         "serverUrl": string;
         "workflowDefinition": WorkflowDefinition;
+        "workflowTestActivityId": string;
     }
 }
 declare global {
@@ -1048,6 +1048,7 @@ declare namespace LocalJSX {
         "culture"?: string;
         "serverUrl"?: string;
         "workflowDefinition"?: WorkflowDefinition;
+        "workflowTestActivityId"?: string;
     }
     interface IntrinsicElements {
         "elsa-activity-editor-modal": ElsaActivityEditorModal;

src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-screen/elsa-workflow-definition-editor-screen.tsx

@@ -64,8 +64,6 @@ export class ElsaWorkflowDefinitionEditorScreen {
   i18next: i18n;
   el: HTMLElement;
   designer: HTMLElsaDesignerTreeElement;
-  testPanel: HTMLElsaWorkflowTestPanelElement;  
-  flyoutPanel: HTMLElsaFlyoutPanelElement;
 
   @Method()
   async getServerUrl(): Promise<string> {
@@ -385,13 +383,11 @@ export class ElsaWorkflowDefinitionEditorScreen {
 
   async onActivitySelected(e: CustomEvent<ActivityModel>) {
     this.selectedActivityId = e.detail.activityId;
-    await this.testPanel.selectTestActivity(this.selectedActivityId);
   }
 
   async onActivityDeselected(e: CustomEvent<ActivityModel>) {
     if (this.selectedActivityId == e.detail.activityId)
       this.selectedActivityId = null;
-    await this.testPanel.selectTestActivity(null);
   }
   
   onConnectionContextMenuButtonClicked(e: CustomEvent<ActivityContextMenuState>) {
@@ -625,7 +621,7 @@ export class ElsaWorkflowDefinitionEditorScreen {
 
   private renderPanel() {
     return (
-      <elsa-flyout-panel ref={el => this.flyoutPanel = el}>
+      <elsa-flyout-panel>
         <elsa-tab-header tab="general" slot="header">General</elsa-tab-header>
         <elsa-tab-content tab="general" slot="content">
           <elsa-workflow-properties-panel
@@ -634,8 +630,9 @@ export class ElsaWorkflowDefinitionEditorScreen {
         </elsa-tab-content>
         <elsa-tab-header tab="test" slot="header">Test</elsa-tab-header>
         <elsa-tab-content tab="test" slot="content">
-          <elsa-workflow-test-panel ref={el => this.testPanel = el}
+          <elsa-workflow-test-panel
             workflowDefinition={this.workflowDefinition}
+            workflowTestActivityId={this.selectedActivityId}
           />
         </elsa-tab-content>        
       </elsa-flyout-panel>

src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-test-panel/elsa-workflow-test-panel.tsx

@@ -22,35 +22,29 @@ interface Tab {
 export class ElsaWorkflowTestPanel {
 
   @Prop() workflowDefinition: WorkflowDefinition;
+  @Prop() workflowTestActivityId: string;
   @Prop() culture: string;
   @Prop() serverUrl: string;
-  @State() publishedVersion: number;
   @State() hubConnection: HubConnection;
   @State() workflowTestActivityMessages: Array<WorkflowTestActivityMessage> = [];
 
   i18next: i18n;
-  signalRConnectionId: string;
-  el: HTMLElement;
-  tabs: Array<Tab> = [];
-  testActivity: WorkflowTestActivityMessage;
-
-  @Method()
-  async selectTestActivity(activityId?: string) {
-    const message = this.workflowTestActivityMessages.find(x => x.activityId == activityId)
-    const messageInternal = !!message ? message : null;
-    this.selectTestActivityMessageInternal(messageInternal);
-    this.render();
-  }
+  signalRConnectionId: string;  
+  message: WorkflowTestActivityMessage;
 
   @Watch('workflowDefinition')
   async workflowDefinitionChangedHandler(newWorkflow: WorkflowDefinition, oldWorkflow: WorkflowDefinition) {
-    if (newWorkflow.version !== oldWorkflow.version || newWorkflow.isPublished !== oldWorkflow.isPublished || newWorkflow.isLatest !== oldWorkflow.isLatest)
-      await this.loadPublishedVersion();
   }
 
+  @Watch('workflowTestActivityId')
+  async workflowTestActivityMessageChangedHandler(newMessage: string, oldMessage: string) {
+    const message = this.workflowTestActivityMessages.find(x => x.activityId == newMessage);
+    debugger;
+    this.message = !!message ? message : null;
+  }  
+
   async componentWillLoad() {
     this.i18next = await loadTranslations(this.culture, resources);
-    await this.loadPublishedVersion();
     this.connectMessageHub();
   }
 
@@ -76,6 +70,7 @@ export class ElsaWorkflowTestPanel {
   }
 
   async onExecuteWorkflowClick() {
+    this.message = null;
     this.workflowTestActivityMessages = [];
     eventBus.emit(EventTypes.TestActivityMessageReceived, this, null);
     const elsaClient = this.createClient();
@@ -90,19 +85,15 @@ export class ElsaWorkflowTestPanel {
   }
 
   async onUseAsSchemaClick() {    
-    const value = this.testActivity.data["Inbound Request"];
+    const value = this.message.data["Inbound Request"];
     const request: WorkflowTestUpdateRequest = {
-      activityId: this.testActivity.activityId,
+      activityId: this.message.activityId,
       jsonSchema: JSON.stringify(convert(value), null, 4)
     };
 
     eventBus.emit(EventTypes.ActivityJsonSchemaUpdated, this, request);
   }
 
-  selectTestActivityMessageInternal(message?: WorkflowTestActivityMessage) {
-    this.testActivity = message;
-  }
-
   render() {
 
     const t = (x, params?) => this.i18next.t(x, params);
@@ -121,10 +112,10 @@ export class ElsaWorkflowTestPanel {
 
 
   renderActivityTestMessage() {
-debugger
-    const {testActivity} = this;
 
-    if (testActivity == undefined)
+    const {message} = this;
+
+    if (message == undefined || !message)
       return    
       
     const t = (x, params?) => this.i18next.t(x, params);
@@ -132,14 +123,14 @@ debugger
     const wellKnownDataKeys = {State: true, Input: null, Outcomes: true, Exception: true};
     let dataKey = null;
 
-    for (const key in testActivity.data) {
-      if (!testActivity.data.hasOwnProperty(key))
+    for (const key in message.data) {
+      if (!message.data.hasOwnProperty(key))
         continue;
 
       if (!!wellKnownDataKeys[key])
         continue;
 
-      const value = testActivity.data[key];
+      const value = message.data[key];
 
       if (!value && value != 0)
         continue;
@@ -165,11 +156,11 @@ debugger
       <dl class="elsa-border-b elsa-border-gray-200 elsa-divide-y elsa-divide-gray-200">
       <div class="elsa-py-3 elsa-flex elsa-justify-between elsa-text-sm elsa-font-medium">
         <dt class="elsa-text-gray-500">{'Correlation Id'}</dt>
-        <dd class="elsa-text-gray-900">{testActivity.correlationId}</dd>
+        <dd class="elsa-text-gray-900">{message.correlationId}</dd>
       </div>
       <div class="elsa-py-3 elsa-flex elsa-justify-between elsa-text-sm elsa-font-medium">
         <dt class="elsa-text-gray-500">{t('Status')}</dt>
-        <dd class="elsa-text-gray-900">{testActivity.status}</dd>
+        <dd class="elsa-text-gray-900">{message.status}</dd>
       </div>
       {collection.map(filteredData, (v, k) => (
         <div>
@@ -195,20 +186,20 @@ debugger
 
   renderActivityTestError() {
 
-    const {testActivity} = this;
+    const {message} = this;
 
-    if (testActivity == undefined)
+    if (message == undefined || !message)
       return    
       
     const t = (x, params?) => this.i18next.t(x, params);
 
-    if (!testActivity.error)
+    if (!message.error)
       return;
 
     return (
       <div class="elsa-py-3 elsa-flex elsa-justify-between elsa-text-sm elsa-font-medium">
         <dt class="elsa-text-gray-500">{t('Error')}</dt>
-        <dd class="elsa-mt-1 elsa-text-sm elsa-text-gray-900 elsa-mb-2 elsa-overflow-x-auto">{testActivity.error}</dd>
+        <dd class="elsa-mt-1 elsa-text-sm elsa-text-gray-900 elsa-mb-2 elsa-overflow-x-auto">{message.error}</dd>
       </div>
     );
   }  
@@ -216,18 +207,6 @@ debugger
   createClient() {
     return createElsaClient(this.serverUrl);
   }
-
-  async loadPublishedVersion() {
-    const elsaClient = this.createClient();
-    const {workflowDefinition} = this;
-
-    const publishedWorkflowDefinitions = await elsaClient.workflowDefinitionsApi.getMany([workflowDefinition.definitionId], {isPublished: true});
-    const publishedDefinition: WorkflowDefinitionSummary = workflowDefinition.isPublished ? workflowDefinition : publishedWorkflowDefinitions.find(x => x.definitionId == workflowDefinition.definitionId);
-
-    if (publishedDefinition) {
-      this.publishedVersion = publishedDefinition.version;
-    }
-  }  
 }
 
 Tunnel.injectProps(ElsaWorkflowTestPanel, ['serverUrl', 'culture']);