From bc0a10c0efb2f382d5147d223f0848886c7a7ecc Mon Sep 17 00:00:00 2001
From: Sipke Schoorstra <sipkeschoorstra@outlook.com>
Date: Thu, 29 Apr 2021 21:21:02 +0200
Subject: [PATCH] Fix activity body display

---
 src/designer/elsa-workflows-studio/src/models/events.ts    | 2 +-
 .../elsa-workflows-studio/src/plugins/cron-plugin.tsx      | 2 +-
 .../src/plugins/http-endpoint-plugin.tsx                   | 7 ++++---
 .../elsa-workflows-studio/src/plugins/if-plugin.tsx        | 2 +-
 .../src/plugins/send-email-plugin.tsx                      | 2 +-
 .../elsa-workflows-studio/src/plugins/start-at-plugin.tsx  | 2 +-
 .../elsa-workflows-studio/src/plugins/timer-plugin.tsx     | 2 +-
 .../elsa-workflows-studio/src/plugins/while-plugin.tsx     | 2 +-
 .../src/plugins/write-line-plugin.tsx                      | 2 +-
 9 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/designer/elsa-workflows-studio/src/models/events.ts b/src/designer/elsa-workflows-studio/src/models/events.ts
index 434b874c4..472db377a 100644
--- a/src/designer/elsa-workflows-studio/src/models/events.ts
+++ b/src/designer/elsa-workflows-studio/src/models/events.ts
@@ -27,7 +27,7 @@ export interface ActivityPickedEventArgs {
 export interface ActivityDesignDisplayContext {
   activityModel: ActivityModel;
   activityIcon: any;
-  bodyDisplay: any;
+  bodyDisplay: string;
   outcomes: Array<string>;
 }
 
diff --git a/src/designer/elsa-workflows-studio/src/plugins/cron-plugin.tsx b/src/designer/elsa-workflows-studio/src/plugins/cron-plugin.tsx
index 2bfe34f84..10bb8d3cb 100644
--- a/src/designer/elsa-workflows-studio/src/plugins/cron-plugin.tsx
+++ b/src/designer/elsa-workflows-studio/src/plugins/cron-plugin.tsx
@@ -17,6 +17,6 @@ export class CronPlugin implements ElsaPlugin {
     const props = activityModel.properties || [];
     const condition = props.find(x => x.name == 'CronExpression') || { name: 'CronExpression', expressions: {'Literal': ''}, syntax: 'Literal'};
     const expression = condition.expressions[condition.syntax] || '';
-    context.bodyDisplay = <p>{expression}</p>;
+    context.bodyDisplay = `<p>${expression}</p>`;
   }
 }
diff --git a/src/designer/elsa-workflows-studio/src/plugins/http-endpoint-plugin.tsx b/src/designer/elsa-workflows-studio/src/plugins/http-endpoint-plugin.tsx
index a3379e3e6..4ba7bd28f 100644
--- a/src/designer/elsa-workflows-studio/src/plugins/http-endpoint-plugin.tsx
+++ b/src/designer/elsa-workflows-studio/src/plugins/http-endpoint-plugin.tsx
@@ -1,6 +1,6 @@
 import {ElsaPlugin} from "../services/elsa-plugin";
 import {eventBus} from '../services/event-bus';
-import {ActivityDesignDisplayContext, EventTypes} from "../models";
+import {ActivityDesignDisplayContext, EventTypes, SyntaxNames} from "../models";
 import {h} from "@stencil/core";
 
 export class HttpEndpointPlugin implements ElsaPlugin {
@@ -15,7 +15,8 @@ export class HttpEndpointPlugin implements ElsaPlugin {
       return;
 
     const props = activityModel.properties || [];
-    const path = props.find(x => x.name == 'Path') || { name: 'Path', expressions: { 'Literal': '', syntax: 'Literal' } };
-    context.bodyDisplay = <p>{path.expressions[path.syntax]}</p>;
+    const path = props.find(x => x.name == 'Path') || { name: 'Path', expressions: { 'Literal': '', syntax: SyntaxNames.Literal } };
+    const syntax = path.syntax || SyntaxNames.Literal;
+    context.bodyDisplay = `<p>${path.expressions[syntax]}</p>`;
   }
 }
diff --git a/src/designer/elsa-workflows-studio/src/plugins/if-plugin.tsx b/src/designer/elsa-workflows-studio/src/plugins/if-plugin.tsx
index 47481fcca..3e169ddcb 100644
--- a/src/designer/elsa-workflows-studio/src/plugins/if-plugin.tsx
+++ b/src/designer/elsa-workflows-studio/src/plugins/if-plugin.tsx
@@ -19,6 +19,6 @@ export class IfPlugin implements ElsaPlugin {
     const expression = condition.expressions[condition.syntax] || '';
     const description = activityModel.description;
     const bodyText = description && description.length > 0 ? description : expression;
-    context.bodyDisplay = <p>{bodyText}</p>;
+    context.bodyDisplay = `<p>${bodyText}</p>`;
   }
 }
diff --git a/src/designer/elsa-workflows-studio/src/plugins/send-email-plugin.tsx b/src/designer/elsa-workflows-studio/src/plugins/send-email-plugin.tsx
index 00d26e8db..3263e978c 100644
--- a/src/designer/elsa-workflows-studio/src/plugins/send-email-plugin.tsx
+++ b/src/designer/elsa-workflows-studio/src/plugins/send-email-plugin.tsx
@@ -19,6 +19,6 @@ export class SendEmailPlugin implements ElsaPlugin {
     const expression = to.expressions[to.syntax || SyntaxNames.Json] || '';
     const description = activityModel.description;
     const bodyText = description && description.length > 0 ? description : expression;
-    context.bodyDisplay = <p>To: {bodyText}</p>;
+    context.bodyDisplay = `<p>To: ${bodyText}</p>`;
   }
 }
diff --git a/src/designer/elsa-workflows-studio/src/plugins/start-at-plugin.tsx b/src/designer/elsa-workflows-studio/src/plugins/start-at-plugin.tsx
index cbb63e7da..457d1e6e5 100644
--- a/src/designer/elsa-workflows-studio/src/plugins/start-at-plugin.tsx
+++ b/src/designer/elsa-workflows-studio/src/plugins/start-at-plugin.tsx
@@ -17,6 +17,6 @@ export class StartAtPlugin implements ElsaPlugin {
     const props = activityModel.properties || [];
     const condition = props.find(x => x.name == 'Instant') || { name: 'Instant', expressions: {'Literal': ''}, syntax: 'Literal'};
     const expression = condition.expressions[condition.syntax] || '';
-    context.bodyDisplay = <p>{expression}</p>;
+    context.bodyDisplay = `<p>${expression}</p>`;
   }
 }
diff --git a/src/designer/elsa-workflows-studio/src/plugins/timer-plugin.tsx b/src/designer/elsa-workflows-studio/src/plugins/timer-plugin.tsx
index 2af15e4ec..7707af4c7 100644
--- a/src/designer/elsa-workflows-studio/src/plugins/timer-plugin.tsx
+++ b/src/designer/elsa-workflows-studio/src/plugins/timer-plugin.tsx
@@ -17,6 +17,6 @@ export class TimerPlugin implements ElsaPlugin {
     const props = activityModel.properties || [];
     const condition = props.find(x => x.name == 'Timeout') || { name: 'Timeout', expressions: {'Literal': ''}, syntax: 'Literal'};
     const expression = condition.expressions[condition.syntax] || '';
-    context.bodyDisplay = <p>{expression}</p>;
+    context.bodyDisplay = `<p>${expression}</p>`;
   }
 }
diff --git a/src/designer/elsa-workflows-studio/src/plugins/while-plugin.tsx b/src/designer/elsa-workflows-studio/src/plugins/while-plugin.tsx
index 43f24c876..39b0ed7cb 100644
--- a/src/designer/elsa-workflows-studio/src/plugins/while-plugin.tsx
+++ b/src/designer/elsa-workflows-studio/src/plugins/while-plugin.tsx
@@ -19,6 +19,6 @@ export class WhilePlugin implements ElsaPlugin {
     const expression = condition.expressions[condition.syntax] || '';
     const description = activityModel.description;
     const bodyText = description && description.length > 0 ? description : expression;
-    context.bodyDisplay = <p>{bodyText}</p>;
+    context.bodyDisplay = `<p>${bodyText}</p>`;
   }
 }
diff --git a/src/designer/elsa-workflows-studio/src/plugins/write-line-plugin.tsx b/src/designer/elsa-workflows-studio/src/plugins/write-line-plugin.tsx
index 1971f2529..c02f77343 100644
--- a/src/designer/elsa-workflows-studio/src/plugins/write-line-plugin.tsx
+++ b/src/designer/elsa-workflows-studio/src/plugins/write-line-plugin.tsx
@@ -17,6 +17,6 @@ export class WriteLinePlugin implements ElsaPlugin {
     const props = activityModel.properties || [];
     const condition = props.find(x => x.name == 'Text') || { name: 'Text', expressions: {'Literal': ''}, syntax: SyntaxNames.Literal };
     const expression = condition.expressions[condition.syntax || 'Literal'] || '';
-    context.bodyDisplay = <p>{expression}</p>;
+    context.bodyDisplay = `<p>${expression}</p>`;
   }
 }