Incremental work on switch activity

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

@@ -303,7 +303,7 @@ export class FlowchartComponent implements ContainerActivityComponent {
   }
 
   onGraphClick = async (e: PositionEventArgs<JQuery.ClickEvent>) => {
-    const activityId = this.activity.id;
+    const activityId = this.activity?.id;
 
     const args: ContainerSelectedArgs = {
       activity: this.activity,

src/designer/elsa-workflows-designer/src/components/designer/activity-templates/default-activity-template.tsx

@@ -1,6 +1,6 @@
 import {Component, h, Prop, State, Event, EventEmitter, Listen, Element} from "@stencil/core";
 import {camelCase} from 'lodash';
-import {ActivityIcon, ActivityIconRegistry} from "../../../services";
+import {ActivityIcon, ActivityIconRegistry, PortProviderRegistry} from "../../../services";
 import {Container} from "typedi";
 import {Activity, ActivityDescriptor, ActivityKind, ActivitySelectedArgs, ChildActivitySelectedArgs, EditChildActivityArgs, Port, PortMode} from "../../../models";
 import descriptorsStore from "../../../data/descriptors-store";
@@ -13,12 +13,14 @@ import WorkflowEditorTunnel from "../state";
 })
 export class DefaultActivityTemplate {
   private readonly iconRegistry: ActivityIconRegistry;
+  private readonly portProviderRegistry: PortProviderRegistry;
   private activityDescriptor: ActivityDescriptor;
   private icon: ActivityIcon;
   private portElements: Array<HTMLElement> = [];
 
   constructor() {
     this.iconRegistry = Container.get(ActivityIconRegistry);
+    this.portProviderRegistry = Container.get(PortProviderRegistry);
   }
 
   @Prop({attribute: 'activity-type'}) activityType: string;
@@ -106,7 +108,8 @@ export class DefaultActivityTemplate {
       return undefined;
 
     const activityDescriptor = this.activityDescriptor;
-    const ports = activityDescriptor?.ports ?? [];
+    const portProvider = this.portProviderRegistry.get(activityDescriptor.activityType);
+    const ports = portProvider.getOutboundPorts({ activityDescriptor, activity });
     const embeddedPorts = ports.filter(x => x.mode == PortMode.Embedded);
 
     if (embeddedPorts.length == 0)
@@ -123,8 +126,9 @@ export class DefaultActivityTemplate {
     const canStartWorkflow = activity?.canStartWorkflow == true;
     const textColor = canStartWorkflow ? 'text-white' : 'text-gray-700';
     const borderColor = port.name == this.selectedPortName ? 'border-blue-600' : 'border-gray-300';
-    const portName = camelCase(port.name);
-    const activityProperty: Activity = activity ? activity[portName] : null;
+    const activityDescriptor = this.activityDescriptor;
+    const portProvider = this.portProviderRegistry.get(activityDescriptor.activityType);
+    const activityProperty = portProvider.resolvePort(port.name, { activity, activityDescriptor }) as Activity;
     const childActivityDescriptor: ActivityDescriptor = activityProperty != null ? descriptorsStore.activityDescriptors.find(x => x.activityType == activityProperty.typeName) : null;
     let childActivityDisplayText = activityProperty?.metadata?.displayText;
 

src/designer/elsa-workflows-designer/src/plugins/switch/switch-activity-driver.tsx

@@ -1,28 +0,0 @@
-import 'reflect-metadata';
-import {h} from "@stencil/core";
-import {Container, Service} from "typedi";
-import {ActivityKind} from '../../models';
-import {ActivityDisplayContext, ActivityDriver, ActivityIcon, ActivityIconRegistry} from '../../services';
-
-@Service()
-export class SwitchActivityDriver implements ActivityDriver {
-
-  display(context: ActivityDisplayContext): any {
-    const activityDescriptor = context.activityDescriptor;
-    const text = activityDescriptor?.displayName;
-
-    return (`
-          <div>
-            <div class="activity-wrapper border border-sky-600 bg-sky-400 rounded text-white overflow-hidden">
-              <div class="activity-content-wrapper flex flex-row">
-                <div class="flex items-center">
-                  <div class="px-4 py-4">
-                    ${text}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        `);
-  }
-}

src/designer/elsa-workflows-designer/src/plugins/switch/switch-plugin.tsx

@@ -5,16 +5,20 @@ import {ActivityIconRegistry, InputControlRegistry, PortProviderRegistry} from "
 import {Plugin} from "../../models";
 import {SwitchPortProvider} from "./switch-port-provider";
 import {ActivityIconSettings, getActivityIconCssClass} from "../../components/icons/activities";
+import {SwitchPortUpdater} from "./switch-port-updater";
 
 @Service()
 export class SwitchPlugin implements Plugin {
-  public static readonly ActivityTypeName: string = 'Elsa.Switch';
+  static readonly ActivityTypeName: string = 'Elsa.Switch';
+
+  private readonly switchPortUpdater: SwitchPortUpdater;
 
   constructor() {
     const activityTypeName = SwitchPlugin.ActivityTypeName;
     const inputControlRegistry = Container.get(InputControlRegistry);
     const portProviderRegistry = Container.get(PortProviderRegistry);
     const iconRegistry = Container.get(ActivityIconRegistry);
+    this.switchPortUpdater = Container.get(SwitchPortUpdater);
 
     inputControlRegistry.add('switch-editor', c => <elsa-switch-editor inputContext={c}/>);
     portProviderRegistry.add(activityTypeName, () => Container.get(SwitchPortProvider));

src/designer/elsa-workflows-designer/src/plugins/switch/switch-port-provider.ts

@@ -1,20 +1,30 @@
 import 'reflect-metadata';
 import {Service} from "typedi";
-import {Port, PortMode} from "../../models";
-import {SwitchActivity} from "./models";
+import {Activity, Port, PortMode} from "../../models";
+import {SwitchActivity, SwitchCase} from "./models";
 import {PortProvider, PortProviderContext} from "../../services";
 
 @Service()
 export class SwitchPortProvider implements PortProvider {
 
-  public getInboundPorts(context: PortProviderContext): Array<Port> {
+  getInboundPorts(context: PortProviderContext): Array<Port> {
     return [];
   }
 
-  public getOutboundPorts(context: PortProviderContext): Array<Port> {
+  getOutboundPorts(context: PortProviderContext): Array<Port> {
     const activity = context.activity as SwitchActivity;
-    const cases = activity.cases;
-
+    const cases = activity.cases ?? [];
     return cases.map(x => ({name: x.label, displayName: x.label, mode: PortMode.Embedded}));
   }
+
+  resolvePort(portName: string, context: PortProviderContext): Activity | Array<Activity> {
+    const activity = context.activity as SwitchActivity;
+    const cases: Array<SwitchCase> = activity.cases ?? [];
+    const caseItem = cases.find(x => x.label == portName);
+
+    if(!caseItem)
+      return null;
+
+    return caseItem.activity;
+  }
 }

src/designer/elsa-workflows-designer/src/services/activity-walker.ts

@@ -5,6 +5,7 @@ import {Activity, ActivityDescriptor} from "../models";
 import {PortProviderRegistry} from "./port-provider-registry";
 import descriptorsStore from '../data/descriptors-store';
 import {Hash} from "../utils";
+import {PortProviderContext} from "./port-provider";
 
 export interface ActivityNode {
   activity: Activity;
@@ -94,9 +95,13 @@ function getPorts(node: ActivityNode, activity: Activity, descriptors: Array<Act
   const ports = portProvider.getOutboundPorts({activity, activityDescriptor});
   let activityPorts: Array<ActivityPort> = [];
 
+  const portProviderContext: PortProviderContext = {
+    activityDescriptor,
+    activity
+  };
+
   for (const port of ports) {
-    const propName = camelCase(port.name);
-    const value = activity[propName];
+    const value = portProvider.resolvePort(port.name, portProviderContext);
 
     if (!value)
       continue;

src/designer/elsa-workflows-designer/src/services/default-port-provider.ts

@@ -1,7 +1,8 @@
 import 'reflect-metadata';
+import {camelCase} from 'lodash';
 import {Service} from "typedi"
 import {PortProvider, PortProviderContext} from "./port-provider";
-import {Port} from "../models";
+import {Activity, Port} from "../models";
 
 @Service()
 export class DefaultPortProvider implements PortProvider {
@@ -15,4 +16,14 @@ export class DefaultPortProvider implements PortProvider {
     return [...activityDescriptor.ports];
   }
 
+  resolvePort(portName: string, context: PortProviderContext): Activity | Array<Activity> {
+    const propName = camelCase(portName);
+    const activity = context.activity;
+
+    if(!activity)
+      return null;
+
+    return activity[propName] as Activity | Array<Activity>;
+  }
+
 }

src/designer/elsa-workflows-designer/src/services/port-provider.ts

@@ -2,7 +2,10 @@ import {Activity, ActivityDescriptor, Port} from "../models";
 
 export interface PortProvider {
   getInboundPorts(context: PortProviderContext): Array<Port>;
+
   getOutboundPorts(context: PortProviderContext): Array<Port>;
+
+  resolvePort(portName: string, context: PortProviderContext): Activity | Array<Activity>;
 }
 
 export interface PortProviderContext {