WIP

Author: philippfromme

lib/components/Output/ExecutionLog.jsx

@@ -10,6 +10,8 @@ import {
 
 import { Link } from '@carbon/react';
 
+import OutputEditor from './OutputEditor';
+
 const STATUS_LABELS = {
   deploying: 'Process deployed',
   'starting-instance': 'Process instance created',
@@ -360,9 +362,7 @@ function ChildElement({ child }) {
       { expanded && hasVariables && (
         <div className="execution-log__child-variables">
           <span className="execution-log__child-variables-label">Local variables</span>
-          <pre className="execution-log__child-variables-code">
-            { JSON.stringify(child.variables, null, 2) }
-          </pre>
+          <OutputEditor value={ JSON.stringify(child.variables, null, 2) } />
         </div>
       ) }
     </li>
@@ -413,7 +413,7 @@ function WaitingItem({ item, timestamp, isLast, isFinished, onSelectElement }) {
   const isBoundaryEvent = item.type === 'boundary-event';
   const isClickable = isBoundaryEvent && onSelectElement && item.data?.elementId;
 
-  const isPending = isPendingItem(item);
+  const isPending = !isFinished && isPendingItem(item);
 
   let dotClass = 'execution-log__dot';
   if (isPending) {

lib/style/style.scss

@@ -558,19 +558,6 @@
       margin-bottom: 6px;
     }
 
-    .execution-log__child-variables-code {
-      font-family: 'IBM Plex Mono', monospace;
-      font-size: 12px;
-      line-height: 1.5;
-      color: #393939;
-      background: #f4f4f4;
-      border-radius: 4px;
-      padding: 8px 12px;
-      margin: 0;
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-
     .execution-log__dot {
       position: absolute;
       left: -16px;