chore: refactor

Author: jarekdanielak

demo/diagram.xml

@@ -28,6 +28,7 @@
         <zeebe:ioMapping>
           <zeebe:input source="=secret_key" target="api_key" />
           <zeebe:input source="=&#34;http://users.com/get&#34;" target="url" />
+          <zeebe:input source="=false" target="publish" />
           <zeebe:output source="=response.body.id" target="user_id" />
           <zeebe:output source="=response.body.name" target="user_name" />
         </zeebe:ioMapping>

eslint.config.mjs

@@ -60,6 +60,14 @@ export default [
     return {
       ...config,
       files: files.test
-    };
+    }; 
   }),
+  {
+    languageOptions: {
+      globals: {
+        sinon: true,
+      }
+    },
+    files: files.test
+  }
 ];

lib/components/Input/RunButton.jsx lib/components/Button/Button.jsxlib/components/Input/RunButton.jsx renamed to lib/components/Button/Button.jsx

@@ -1,44 +1,40 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 
 import { Button, ButtonSkeleton, Tooltip } from '@carbon/react';
 
-export default function RunButton({ onClick, error }) {
+/**
+ * Carbon React Button wrapped in a tooltip.
+ *
+ * Displays a loading skeleton if `skeleton` prop is true and `onClick` returns a promise.
+ */
+export default function CustomButton({ children, onClick, kind, tooltip, skeleton }) {
 
   const [ loading, setLoading ] = useState(false);
 
-  const tooltipContent = useMemo(() => {
-    if (error) {
-      return 'Invalid JSON';
-    }
-    return null;
-  }, [ error ]);
-
   const handleClick = () => {
-    if (onClick) {
-      setLoading(true);
-      onClick().finally(() => setLoading(false));
-    }
+    setLoading(true);
+    onClick()?.finally(() => setLoading(false));
   };
 
-  if (loading) {
+  if (loading && skeleton) {
     return (
       <ButtonSkeleton size="sm" className="cds--layout--size-sm" />
     );
   }
 
   return (
     <Tooltip
-      className={ `${tooltipContent ? '' : 'hide-tooltip'}` }
-      label={ tooltipContent }
+      className={ `${tooltip ? '' : 'hide-tooltip'}` }
+      label={ tooltip }
       align="bottom"
       leaveDelayMs={ 100 }>
       <span tabIndex="0" style={ { display: 'inline-block' } }>
         <Button
+          kind={ kind }
           onClick={ handleClick }
-          disabled={ error }
           size="sm"
         >
-          Run this task
+          { children }
         </Button>
       </span>
     </Tooltip>

lib/components/Input/Input.jsx

@@ -4,10 +4,7 @@ import { Link } from '@carbon/react';
 import { Launch } from '@carbon/icons-react';
 
 import InputEditor from './InputEditor';
-
-import RunButton from './RunButton';
-
-// import './Input.scss';
+import Button from '../Button/Button';
 
 export default function Input({
   element,
@@ -36,10 +33,21 @@ export default function Input({
           </p>
         </div>
         <div className="section__header--buttons">
-          <RunButton
-            onClick={ () => onRunTask(input) }
-            error={ error }
-          />
+          <Button
+            kind="ghost"
+            onClick={ handleReset }
+            tooltip="Reset to input mapping"
+          >
+            Reset
+          </Button>
+          <Button
+            kind="primary"
+            onClick={ handleRun }
+            tooltip={ error && 'Invalid JSON' }
+            skeleton
+          >
+            Run
+          </Button>
         </div>
       </div>
       <div className="section__content">

lib/components/Output/Output.jsx

@@ -2,23 +2,22 @@ import React, { useMemo } from 'react';
 
 import { CodeSnippet, InlineLoading } from '@carbon/react';
 
-// import './Output.scss';
 
-export default function Output({ output, loading }) {
+export default function Output({ output, running }) {
 
   const value = useMemo(() => {
-    if (output instanceof Error) {
+    if (error) {
       return output.message;
     }
     return JSON.stringify(output, null, 2);
-  }, [ output ]);
+  }, [ output, error ]);
 
   const error = useMemo(() => {
     return output instanceof Error;
   }, [ output ]);
 
   const status = useMemo(() => {
-    if (loading) {
+    if (running) {
       return (
         <InlineLoading
           description="Running task..."
@@ -36,7 +35,7 @@ export default function Output({ output, loading }) {
     }
 
     return <div>No output</div>;
-  }, [ loading, output, error ]);
+  }, [ running, output, error ]);
 
   return (
     <div className="section">
@@ -53,7 +52,7 @@ export default function Output({ output, loading }) {
           { status}
         </div>
         <div className="result">
-          {value && !loading && <CodeSnippet
+          {value && !running && <CodeSnippet
             className="snippet"
             type="multi"
             align="left"

lib/hooks/useSelectedElement.js

@@ -3,10 +3,10 @@ import { useState, useEffect } from 'react';
 import { is } from 'bpmn-js/lib/util/ModelUtil.js';
 
 /**
- * Get currently selected BPMN element.
+ * Get currently selected BPMN element, if it is a single `bpmn:Task`.
  *
  * @param {Object} injector
- * @returns {Object|null} BPMN element or `null` if no or more than one elements are selected
+ * @return {Object|null} Selected BPMN element or null
  */
 export function useSelectedElement(injector) {
 
@@ -28,7 +28,7 @@ export function useSelectedElement(injector) {
     return () => {
       eventBus.off('selection.changed', handleSelection);
     };
-  }, [ injector ]);
+  }, [ ]);
 
   return selectedElement;
 }

lib/hooks/useVariableResolver.js

@@ -7,6 +7,7 @@ import ZeebeVariableResolver from '@bpmn-io/variable-resolver/lib/zeebe/Variable
  */
 export function useVariableResolver(injector, element) {
 
+  const [ variables, setVariables ] = useState();
   const [ fetching, setFetching ] = useState(false);
 
   const variableResolver = useMemo(() => {
@@ -16,7 +17,6 @@ export function useVariableResolver(injector, element) {
     return resolver;
   }, [ injector ]);
 
-  const [ variables, setVariables ] = useState();
 
   useEffect(() => {
     if (!element) {
@@ -36,10 +36,10 @@ export function useVariableResolver(injector, element) {
     };
 
     fetchVariables();
-  }, [ element, variableResolver ]);
+  }, [ element ]);
 
   return {
-    variables,
-    fetching
+    resolvedVariables: variables,
+    fetchingVariables: fetching
   };
 }

lib/index.jsx

@@ -27,7 +27,7 @@ export default function TaskTesting({
   saveConfig
 }) {
 
-  const [ loading, setLoading ] = useState(false);
+  const [ running, setRunning ] = useState(false);
 
   const element = useSelectedElement(injector);
   const { variables, fetching: loadingVariables } = useVariableResolver(injector, element);
@@ -61,7 +61,7 @@ export default function TaskTesting({
 
   const handleRunTask = async () => {
 
-    setLoading(true);
+    setRunning(true);
     const camundaApi = { deploy, startInstance, getInstance };
 
     try {
@@ -70,7 +70,7 @@ export default function TaskTesting({
     } catch (error) {
       setOutput(error);
     } finally {
-      setLoading(false);
+      setRunning(false);
     }
   };
 
@@ -95,7 +95,7 @@ export default function TaskTesting({
       />
       <Output
         output={ output }
-        loading={ loading }
+        running={ running }
       />
     </div>
   );

lib/style/_editor.scss

@@ -33,5 +33,26 @@
     span {
       font-style: italic;
     }
+
+    pre {
+      margin-top: 6px;
+    }
+  }
+
+  // JSON linter error
+  .cm-line:has(.cm-lintPoint-error) {
+    background-color: rgba(255, 0, 0, 0.1);
+
+    &::after {
+      content: " ← " var(--error-message, "Error");
+      color: #d32f2f;
+      font-size: 12px;
+      font-style: italic;
+      margin-left: 8px;
+    }
+  }
+
+  .cm-lintPoint-error::after {
+    display: none;
   }
 }

lib/style/_layout.scss

@@ -28,6 +28,7 @@
   .section__header--buttons {
     display: flex;
     align-items: center;
+    gap: 3px;
   }
 
   .section__content {