Fix for variables in output tab not being refreshed

src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-definitions/components/editor.tsx

@@ -19,6 +19,7 @@ import {LayoutDirection, UpdateActivityArgs} from "../../flowchart/models";
 import {cloneDeep} from '@antv/x6/lib/util/object/object';
 import {removeGuidsFromPortNames} from '../../../utils/graph';
 import {constrainTimeouts} from "@stencil/core/mock-doc";
+import { WorkflowPropertiesEditorTabs } from '../models/props-editor-tabs';
 
 @Component({
   tag: 'elsa-workflow-definition-editor',
@@ -275,6 +276,16 @@ export class WorkflowDefinitionEditor {
 
   private onWorkflowPropsUpdated = (e: CustomEvent<WorkflowDefinitionPropsUpdatedArgs>) => {
     this.saveChangesDebounced();
+
+    if(e.detail.updatedTab == WorkflowPropertiesEditorTabs.Variables){
+      rerenderActivityEditor();
+    }
+
+    function rerenderActivityEditor() {
+      const currentSelectedActivity = this.selectedActivity;
+      this.selectedActivity = null;
+      this.selectedActivity = currentSelectedActivity;
+    }
   }
 
   private async onActivitySelected(e: CustomEvent<ActivitySelectedArgs>) {

src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-definitions/components/workflow-properties/properties.tsx

@@ -9,6 +9,7 @@ import {InfoList} from "../../../../components/shared/forms/info-list";
 import {TabChangedArgs, Variable} from "../../../../models";
 import {WorkflowDefinitionsApi} from "../../services/api";
 import descriptorsStore from "../../../../data/descriptors-store";
+import {WorkflowPropertiesEditorTabs} from "../../models/props-editor-tabs";
 
 @Component({
   tag: 'elsa-workflow-definition-properties-editor',
@@ -258,7 +259,7 @@ export class WorkflowDefinitionPropertiesEditor {
   private onPropertyEditorChanged = (apply: (w: WorkflowDefinition) => void) => {
     const workflowDefinition = this.workflowDefinition;
     apply(workflowDefinition);
-    this.workflowPropsUpdated.emit({workflowDefinition});
+    this.workflowPropsUpdated.emit({workflowDefinition: workflowDefinition});
   }
 
   private onVariablesUpdated = async (e: CustomEvent<Array<Variable>>) => this.onPropsUpdated('variables', e.detail)
@@ -280,7 +281,17 @@ export class WorkflowDefinitionPropertiesEditor {
     }
 
     workflowDefinition[propName] = propValue;
-    this.workflowPropsUpdated.emit({workflowDefinition});
+    const updatedTab = this.getPropEditorSectionByPropName(propName);
+    this.workflowPropsUpdated.emit({workflowDefinition,updatedTab});
     await this.createModel();
   }
+
+  private getPropEditorSectionByPropName(propName: string) : WorkflowPropertiesEditorTabs {
+    const enumKey = Object.keys(WorkflowPropertiesEditorTabs).find(key => WorkflowPropertiesEditorTabs[key as keyof typeof WorkflowPropertiesEditorTabs] === propName);
+
+    if (enumKey) {
+      return WorkflowPropertiesEditorTabs[enumKey as keyof typeof WorkflowPropertiesEditorTabs];
+    }
+    return null;
+  }
 }

src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-definitions/models/props-editor-tabs.ts

@@ -0,0 +1,7 @@
+export enum WorkflowPropertiesEditorTabs {
+    Properties = 'properties',
+    Variables = 'variables',
+    Settings = 'settings',
+    InputOutput = 'input-output',
+    VersionHistory = 'versionHistory'
+}

src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-definitions/models/ui.ts

@@ -1,5 +1,6 @@
 import {Activity, ActivityDescriptor, InputDescriptor, PropertyDescriptor, TabDefinition} from "../../../models";
 import {WorkflowDefinition} from "./entities";
+import { WorkflowPropertiesEditorTabs } from "./props-editor-tabs";
 
 export const WorkflowEditorEventTypes = {
   WorkflowDefinition: {
@@ -36,6 +37,7 @@ export interface WorkflowDefinitionUpdatedArgs {
 
 export interface WorkflowDefinitionPropsUpdatedArgs {
   workflowDefinition: WorkflowDefinition;
+  updatedTab?: WorkflowPropertiesEditorTabs;
 }
 
 export interface WorkflowPropertiesEditorDisplayingArgs {
@@ -74,8 +76,6 @@ export interface ActivityUpdatedArgs {
   newId?: string;
   activity: Activity;
   activityDescriptor: ActivityDescriptor;
-  // propertyName?: string;
-  // propertyDescriptor?: PropertyDescriptor;
 }
 
 export interface ActivityIdUpdatedArgs {

src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-instances/components/viewer.tsx

@@ -88,8 +88,8 @@ export class WorkflowInstanceViewer {
     const activityId = e.detail.activity.id;
     const activityNode = e.detail.activityNode;
 
-    let graph = await this.flowchartElement.getGraph();
-    let graphNode = graph.getNodes().find(n => n.id == activityId)
+    const graph = await this.flowchartElement.getGraph();
+    const graphNode = graph.getNodes().find(n => n.id == activityId)
 
     if(graphNode == null) {
       await this.importSelectedItemsWorkflow(activityNode);
@@ -101,7 +101,7 @@ export class WorkflowInstanceViewer {
       this.selectedActivity = graphNode.data;
     }
 
-    var log = e.detail.executionLog;
+    const log = e.detail.executionLog;
     this.selectedActivityExecutionLog = log.faulted ? log.faultedRecord : log.completed ? log.completedRecord : log.startedRecord;
   }
   
@@ -116,12 +116,12 @@ export class WorkflowInstanceViewer {
   }
 
   private findConsumingWorkflowRecursive(activityNode: ActivityNode) : ActivityNode {
-    let parent = activityNode.parents[0];
+    const parent = activityNode.parents[0];
     if(parent == null) {
       return activityNode;
     }
     else{
-      var type = parent.activity.type;
+      const type = parent.activity.type;
       if(type == "Elsa.Workflow" || type == "Elsa.Flowchart") {
         return this.findConsumingWorkflowRecursive(parent);
       }