feat: custom code editor; use example data; copy result

chore: extract business logic to CamundaContext
chore: add `sass-loader`

Author: jarekdanielak

demo/App.jsx

@@ -20,7 +20,7 @@ function App() {
   const modelerRef = useRef(null);
 
   const [ modeler, setModeler ] = useState(null);
-  const [ tab, setTab ] = useState('debugger');
+  const [ tab, setTab ] = useState('test');
 
   useEffect(() => {
     if (modelerRef.current) {
@@ -65,20 +65,20 @@ function App() {
           <div className={ `bottom-panel_tabs-item ${tab === 'problems' ? 'active' : ''}` } onClick={ () => setTab('problems') }>
             Problems
           </div>
-          <div className={ `bottom-panel_tabs-item ${tab === 'debugger' ? 'active' : ''}` } onClick={ () => setTab('debugger') }>
-            Debugger
+          <div className={ `bottom-panel_tabs-item ${tab === 'test' ? 'active' : ''}` } onClick={ () => setTab('test') }>
+            Task testing
           </div>
         </div>
         <div className="bottom-panel_tabs-content">
           {tab === 'problems' && <ProblemsTab />}
-          {tab === 'debugger' && <DebuggerTab { ...props } />}
+          {tab === 'test' && <TestTab { ...props } />}
         </div>
       </div>
     </>
   );
 }
 
-function DebuggerTab(props) {
+function TestTab(props) {
   const { injector } = props;
 
   if (!injector) {
@@ -89,8 +89,7 @@ function DebuggerTab(props) {
 }
 
 function ProblemsTab() {
-  return <div style={ { padding: '10px' } }>I got 99 problems but debugging ain&apos;t one.</div>;
+  return <div style={ { padding: '10px' } }>I got 99 problems but running a single task ain&apos;t one.</div>;
 }
 
-
 export default App;

demo/diagram.xml

@@ -1,13 +1,28 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:modeler="http://camunda.org/schema/modeler/1.0" id="Definitions_1rrr52f" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="5.35.0" modeler:executionPlatform="Camunda Cloud" modeler:executionPlatformVersion="8.8.0">
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:zeebe="http://camunda.org/schema/zeebe/1.0" xmlns:modeler="http://camunda.org/schema/modeler/1.0" id="Definitions_1rrr52f" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="5.35.0" modeler:executionPlatform="Camunda Cloud" modeler:executionPlatformVersion="8.8.0">
   <bpmn:process id="Process_1kuphyf" isExecutable="true">
     <bpmn:startEvent id="StartEvent_1">
       <bpmn:outgoing>Flow_1xr5ql2</bpmn:outgoing>
     </bpmn:startEvent>
-    <bpmn:task id="Task_1">
+    <bpmn:task id="Task_1" name="Task_1">
+      <bpmn:extensionElements>
+        <zeebe:properties>
+          <zeebe:property name="camundaModeler:exampleOutputJson" value="{&#10;  &#34;response&#34;: { &#10;    &#34;body&#34;: {&#10;      &#34;var_1&#34;: 123,&#10;      &#34;var_2&#34;: true&#10;    } &#10;  }&#10;}" />
+        </zeebe:properties>
+      </bpmn:extensionElements>
       <bpmn:incoming>Flow_1xr5ql2</bpmn:incoming>
+      <bpmn:outgoing>Flow_1c72h11</bpmn:outgoing>
     </bpmn:task>
     <bpmn:sequenceFlow id="Flow_1xr5ql2" sourceRef="StartEvent_1" targetRef="Task_1" />
+    <bpmn:task id="Task_2" name="Task_2">
+      <bpmn:extensionElements>
+        <zeebe:properties>
+          <zeebe:property name="camundaModeler:exampleOutputJson" value="{&#10;  &#34;response&#34;: { &#10;    &#34;body&#34;: {&#10;      &#34;var_3&#34;: 356,&#10;      &#34;var_4&#34;: &#34;foo&#34;&#10;    } &#10;  }&#10;}" />
+        </zeebe:properties>
+      </bpmn:extensionElements>
+      <bpmn:incoming>Flow_1c72h11</bpmn:incoming>
+    </bpmn:task>
+    <bpmn:sequenceFlow id="Flow_1c72h11" sourceRef="Task_1" targetRef="Task_2" />
   </bpmn:process>
   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
     <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1kuphyf">
@@ -16,11 +31,20 @@
       </bpmndi:BPMNShape>
       <bpmndi:BPMNShape id="Task_1_di" bpmnElement="Task_1">
         <dc:Bounds x="270" y="80" width="100" height="80" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_008py6b_di" bpmnElement="Task_2">
+        <dc:Bounds x="430" y="80" width="100" height="80" />
+        <bpmndi:BPMNLabel />
       </bpmndi:BPMNShape>
       <bpmndi:BPMNEdge id="Flow_1xr5ql2_di" bpmnElement="Flow_1xr5ql2">
         <di:waypoint x="218" y="120" />
         <di:waypoint x="270" y="120" />
       </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_1c72h11_di" bpmnElement="Flow_1c72h11">
+        <di:waypoint x="370" y="120" />
+        <di:waypoint x="430" y="120" />
+      </bpmndi:BPMNEdge>
     </bpmndi:BPMNPlane>
   </bpmndi:BPMNDiagram>
 </bpmn:definitions>

karma.config.cjs

@@ -25,8 +25,12 @@ module.exports = function(config) {
             use: 'babel-loader'
           },
           {
-            test: /\.css$/,
-            use: [ 'style-loader', 'css-loader' ]
+            test: /\.scss$/,
+            use: [
+              'style-loader',
+              'css-loader',
+              'sass-loader'
+            ]
           }
         ]
       },

lib/components/CodeEditor/CodeEditor.jsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useRef } from 'react';
+
+import { basicSetup } from 'codemirror';
+import { EditorState } from '@codemirror/state';
+import { EditorView, placeholder } from '@codemirror/view';
+import { linter } from '@codemirror/lint';
+import { json, jsonParseLinter } from '@codemirror/lang-json';
+
+import './CodeEditor.scss';
+
+export default function CodeEditor({
+  value = '{\n}',
+  readOnly = false,
+  linting = true,
+  placeholder: placeholderText,
+  onChange = () => {},
+  onErrorChange = () => {},
+}) {
+
+  const editorRef = useRef(null);
+  const viewRef = useRef(null);
+
+  useEffect(() => {
+    if (!editorRef.current) return;
+
+    const startState = EditorState.create({
+      doc: value,
+      extensions: [
+        basicSetup,
+        json(),
+        linting ? linter(jsonLinter()) : [],
+        placeholderText ? placeholder(placeholderText) : [],
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            onChange(update.state.doc.toString());
+          }
+        }),
+        EditorState.readOnly.of(readOnly)
+      ],
+    });
+
+    const view = new EditorView({
+      state: startState,
+      parent: editorRef.current,
+    });
+
+    viewRef.current = view;
+
+    return () => {
+      view.destroy();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!viewRef.current) {
+      return;
+    }
+
+    const currentDoc = viewRef.current.state.doc.toString();
+    if (currentDoc === value) {
+      return;
+    }
+
+    viewRef.current.dispatch({
+      changes: {
+        from: 0,
+        to: currentDoc.length,
+        insert: value
+      }
+    });
+
+    // Scroll to the bottom
+    const docLength = viewRef.current.state.doc.length;
+    viewRef.current.dispatch({
+      effects: EditorView.scrollIntoView(docLength, { y: 'end' })
+    });
+  }, [ value ]);
+
+  const jsonLinter = () => {
+    return (view) => {
+      const errors = jsonParseLinter()(view);
+      onErrorChange(!!errors.length);
+      return errors;
+    };
+  };
+
+  return <div ref={ editorRef } className="code-editor_container" />;
+}

lib/components/CodeEditor/CodeEditor.scss

@@ -0,0 +1,24 @@
+.code-editor_container {
+  width: 100%;
+  height: 100%;
+}
+
+.code-editor_container .cm-editor {
+  height: 100%;
+}
+
+/* .code-editor_container .cm-content {
+  background: hsla(0, 0%, 96%, 1);
+}
+
+.code-editor_container .cm-gutter {
+  background: #E6E5E5;
+} */
+
+.code-editor_container .cm-focused {
+  outline: none;
+}
+
+.code-editor_container .cm-tooltip {
+  font-size: 12px;
+}

lib/components/Codemirror/Codemirror.css

@@ -1,35 +1,68 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 
-import CodeMirror from '../Codemirror/Codemirror';
-import { json } from '@codemirror/lang-json';
+import { Button } from '@carbon/react';
 
-import './Output.css';
+import CodeEditor from '../CodeEditor/CodeEditor';
 
-export default function Output({ log }) {
+import useCamundaContext from '../../hooks/useCamundaContext';
+
+export default function Output() {
+
+  const [ copyResultText, setCopyResultText ] = useState('Copy result');
+
+  const { log } = useCamundaContext();
 
   const value = useMemo(() => {
     if (!log.length) {
       return '';
     }
 
-    return log.map((entry) => {
-      return `${entry.elementId}: ${entry.message}`;
+    return log.map(({ elementId, message, type }) => {
+      if (type === 'info') {
+        return `${elementId}: ${message}`;
+      } else {
+        return message;
+      }
     }).join('\n');
   }, [ log ]);
 
+  const copyResult = () => {
+    const latestResult = [ ...log ].reverse().find(item => item.type === 'result');
+    if (latestResult) {
+      navigator.clipboard.writeText(latestResult.message);
+      setCopyResultText('Copied!');
+      setTimeout(() => {
+        setCopyResultText('Copy result');
+      }, 2000);
+    }
+  };
+
   return (
-    <div className="section output">
-      <div className="output-header section-header">
-        <p>Activity log</p>
-        <p className="cds--label">
-          {'Log of the task execution. If you run a task, the output will be displayed here.'}
-        </p>
+    <div className="section">
+      <div className="section-header">
+        <div className="section-header__info">
+          <p>Activity log</p>
+          <p className="cds--label">
+            {'Log of the task execution. If you run a task, the output will be displayed here.'}
+          </p>
+        </div>
+        <div className="section-header__buttons">
+          <Button
+            kind="tertiary"
+            size="sm"
+            onClick={ copyResult }
+            disabled={ !log.length }
+          >
+            {copyResultText}
+          </Button>
+        </div>
       </div>
-      <div className="section-content">
-        <CodeMirror
+      <div className="editor">
+        <CodeEditor
           value={ value }
-          extensions={ [ json() ] }
           readOnly={ true }
+          linting={ false }
+          placeholder="No output yet"
         />
       </div>
     </div>