Workflow hierarchy nav fixes

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

@@ -6,7 +6,7 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { ActionDefinition, ActionInvokedArgs, Activity, ActivitySelectedArgs, ContainerSelectedArgs, EditChildActivityArgs, GraphUpdatedArgs, IntellisenseContext, SelectListItem, TabChangedArgs, TabDefinition, Variable, WorkflowDefinition, WorkflowDefinitionSummary, WorkflowInstance, WorkflowInstanceSummary } from "./models";
-import { ActivityUpdatedArgs, DeleteActivityRequestedArgs } from "./components/designer/workflow-definition-editor/activity-properties-editor";
+import { ActivityIdUpdatedArgs, ActivityUpdatedArgs, DeleteActivityRequestedArgs } from "./components/designer/workflow-definition-editor/activity-properties-editor";
 import { Button } from "./components/shared/button-group/models";
 import { ContainerActivityComponent } from "./components/activities/container-activity-component";
 import { AddActivityArgs } from "./components/designer/canvas/canvas";
@@ -638,6 +638,7 @@ declare namespace LocalJSX {
     }
     interface ElsaActivityPropertiesEditor {
         "activity"?: Activity;
+        "onActivityIdUpdated"?: (event: CustomEvent<ActivityIdUpdatedArgs>) => void;
         "onActivityUpdated"?: (event: CustomEvent<ActivityUpdatedArgs>) => void;
         "onDeleteActivityRequested"?: (event: CustomEvent<DeleteActivityRequestedArgs>) => void;
         "variables"?: Array<Variable>;

src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx

@@ -295,6 +295,7 @@ export class FlowchartComponent implements ContainerActivityComponent {
       activity: activity,
       applyChanges: a => {
 
+        debugger;
         // Update the node's data with the activity.
         node.data = a;
 

src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/activity-properties-editor.tsx

@@ -22,6 +22,13 @@ export interface ActivityUpdatedArgs {
   propertyDescriptor?: PropertyDescriptor;
 }
 
+export interface ActivityIdUpdatedArgs {
+  activity: Activity;
+  activityDescriptor: ActivityDescriptor;
+  originalId: string;
+  newId: string;
+}
+
 export interface DeleteActivityRequestedArgs {
   activity: Activity;
 }
@@ -42,20 +49,21 @@ export class ActivityPropertiesEditor {
   @Prop() variables: Array<Variable> = [];
 
   @Event() activityUpdated: EventEmitter<ActivityUpdatedArgs>;
+  @Event() activityIdUpdated: EventEmitter<ActivityIdUpdatedArgs>;
   @Event() deleteActivityRequested: EventEmitter<DeleteActivityRequestedArgs>;
   @State() private selectedTabIndex: number = 0;
 
   @Method()
-  public async show(): Promise<void> {
+  async show(): Promise<void> {
     await this.slideOverPanel.show();
   }
 
   @Method()
-  public async hide(): Promise<void> {
+  async hide(): Promise<void> {
     await this.slideOverPanel.hide();
   }
 
-  public componentWillRender() {
+  componentWillRender() {
     const activity = this.activity;
     const activityDescriptor = this.findActivityDescriptor();
     const title = activityDescriptor?.displayName ?? activityDescriptor?.activityType ?? 'Unknown Activity';
@@ -87,7 +95,7 @@ export class ActivityPropertiesEditor {
     }
   }
 
-  public render() {
+  render() {
     const {activity, activityDescriptor} = this.renderContext;
 
     const commonTab: TabDefinition = {
@@ -142,16 +150,21 @@ export class ActivityPropertiesEditor {
 
   private onActivityIdChanged = (e: any) => {
     const activity = this.activity;
+    const originalId = activity.id;
     const inputElement = e.target as HTMLInputElement;
-
-    activity.id = inputElement.value;
+    const newId = inputElement.value;
     const activityDescriptor = this.findActivityDescriptor();
+
     const inputDescriptor: InputDescriptor = {
       name: 'Id',
       displayName: 'Id',
       type: 'string'
     };
+
+    activity.id = newId;
+
     this.activityUpdated.emit({activity, activityDescriptor, propertyName: 'id', propertyDescriptor: inputDescriptor});
+    this.activityIdUpdated.emit({ activity, activityDescriptor, originalId, newId: activity.id });
   }
 
   private onActivityDisplayTextChanged(e: any) {

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

@@ -12,6 +12,7 @@ import {
   WorkflowDefinition
 } from '../../../models';
 import {
+  ActivityIdUpdatedArgs,
   ActivityUpdatedArgs,
   DeleteActivityRequestedArgs
 } from './activity-properties-editor';
@@ -194,15 +195,13 @@ export class WorkflowDefinitionEditor {
   }
 
   render() {
-    // const tunnelState: WorkflowDesignerState = {
-    //   workflowDefinition: this.workflowDefinitionState,
-    // };
+
+    const workflowDefinition = this.workflowDefinitionState;
 
     return (
-      // <WorkflowEditorTunnel.Provider state={tunnelState}>
       <div class="absolute inset-0" ref={el => this.container = el}>
         <elsa-workflow-definition-editor-toolbar zoomToFit={this.onZoomToFit}/>
-        <elsa-workflow-navigator items={this.currentWorkflowPath} workflowDefinition={this.workflowDefinition} onNavigate={this.onNavigateHierarchy}/>
+        <elsa-workflow-navigator items={this.currentWorkflowPath} workflowDefinition={workflowDefinition} onNavigate={this.onNavigateHierarchy}/>
         <elsa-panel
           class="elsa-activity-picker-container"
           position={PanelPosition.Left}
@@ -230,7 +229,6 @@ export class WorkflowDefinitionEditor {
           </div>
         </elsa-panel>
       </div>
-      // </WorkflowEditorTunnel.Provider>
     );
   }
 
@@ -240,6 +238,7 @@ export class WorkflowDefinitionEditor {
         activity={this.selectedActivity}
         variables={this.workflowDefinitionState.variables}
         onActivityUpdated={e => this.onActivityUpdated(e)}
+        onActivityIdUpdated={e => this.onActivityIdUpdated(e)}
         onDeleteActivityRequested={e => this.onDeleteActivityRequested(e)}/>
 
     return <elsa-workflow-definition-properties-editor
@@ -342,6 +341,20 @@ export class WorkflowDefinitionEditor {
     this.saveChangesDebounced();
   }
 
+  private onActivityIdUpdated = (e: CustomEvent<ActivityIdUpdatedArgs>) => {
+    const originalId = e.detail.originalId;
+    const newId = e.detail.newId;
+    const workflowPath = this.currentWorkflowPath;
+    const item = workflowPath.find(x => x.activityId == originalId);
+
+    if (!item)
+      return;
+
+    item.activityId = newId;
+    this.currentWorkflowPath = [...workflowPath];
+  }
+
+
   private onWorkflowPropsUpdated = (e: CustomEvent<WorkflowDefinitionPropsUpdatedArgs>) => this.saveChangesDebounced()
 
   private onDeleteActivityRequested = (e: CustomEvent<DeleteActivityRequestedArgs>) => {

src/designer/elsa-workflows-designer/src/components/designer/workflow-navigator/workflow-navigator.tsx

@@ -24,7 +24,7 @@ export class WorkflowNavigator {
 
     if (!this.workflowDefinition)
       return;
-
+    
     const nodes = flatten(walkActivities(this.workflowDefinition.root));
 
     return <div class="ml-8">