feat: input autocompletion

bup

Author: jarekdanielak

lib/components/Input/Input.jsx

@@ -1,20 +1,60 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
 
 import { Link } from '@carbon/react';
 import { Launch } from '@carbon/icons-react';
 
+import { map } from 'lodash';
+
 import InputEditor from './InputEditor';
 import Button from '../Button/Button';
 
 export default function Input({
   element,
   input,
   setInput,
-  variables,
+  reset,
+  resolvedVariables,
+  outputVariables,
   onRunTask,
 }) {
 
   const [ error, setError ] = useState(false);
+  const [ resetKey, setResetKey ] = useState(0);
+
+  const autocompletion = useMemo(() => {
+
+    const resolved = map(resolvedVariables, ({ name, detail, info }) => ({
+      label: name,
+      type: 'variable',
+      info: () => createInfo(info),
+      detail: detail ? `[${detail}]` : undefined,
+      value: info ? info : undefined,
+    })) ?? [];
+
+    const outputs = Object.entries(outputVariables)?.map(([ name, { value, source } ]) => ({
+      label: name,
+      type: 'constant',
+      info: () => createInfo(value, source),
+      detail: `[${typeof value}]`,
+      value: value,
+    }));
+
+    return [ ...resolved, ...outputs ];
+
+  }, [ resolvedVariables, outputVariables ]);
+
+  const handleRun = async () => {
+    if (error) {
+      return;
+    }
+    await onRunTask(input);
+  };
+
+  const handleReset = () => {
+    reset();
+    setResetKey(prev => prev + 1); // Force InputEditor to re-render
+  };
 
   const elementName = element.name || element.id;
 
@@ -52,12 +92,28 @@ export default function Input({
       </div>
       <div className="section__content">
         <InputEditor
+          key={ resetKey }
           value={ input }
           onChange={ setInput }
           onErrorChange={ setError }
-          variables={ variables }
+          autocompletion={ autocompletion }
         />
       </div>
     </div>
   );
 }
+
+function createInfo(value, source) {
+  const div = document.createElement('div');
+
+  const htmlString = renderToStaticMarkup(
+    <div className="info">
+      <span>{source ? `From output variables of "${source}"` : 'From process variables'}</span>
+      {value && <pre>{typeof value === 'object' ? JSON.stringify(value, null, 2) : value}</pre>}
+    </div>
+  );
+
+  div.innerHTML = htmlString;
+
+  return div;
+}

lib/components/Input/InputEditor.jsx

@@ -12,20 +12,24 @@ export default function InputEditor({
   value,
   onChange,
   onErrorChange,
-  variables = []
+  autocompletion = []
 }) {
 
   const editorRef = useRef(null);
   const viewRef = useRef(null);
 
-  const jsonLinter = () => {
-    return () => {
-      return (view) => {
-        const errors = jsonParseLinter()(view);
-        onErrorChange(!!errors.length);
-        return errors;
-      };
-    };
+  const jsonLinter = (view) => {
+    const errors = jsonParseLinter()(view);
+    onErrorChange(!!errors.length);
+
+    if (errors && errors.length > 0) {
+      const errorMessage = errors[0].message || 'Error';
+      editorRef.current?.style.setProperty('--error-message', `"${errorMessage}"`);
+    } else {
+      editorRef.current?.style.removeProperty('--error-message');
+    }
+
+    return errors;
   };
 
   useEffect(() => {
@@ -36,8 +40,8 @@ export default function InputEditor({
       extensions: [
         basicSetup,
         json(),
-        linter(jsonLinter(onErrorChange)()),
-        ...getAutocompletionExtensions(variables),
+        linter(jsonLinter, { delay: 100 }),
+        ...getAutocompletionExtensions(autocompletion),
         placeholder('Provide process variables in JSON format'),
         EditorView.updateListener.of((update) => {
           if (update.docChanged) {
@@ -58,7 +62,7 @@ export default function InputEditor({
     return () => {
       view.destroy();
     };
-  }, [ variables ]);
+  }, [ autocompletion ]);
 
   return <div ref={ editorRef } className="input-editor" />;
 }

lib/hooks/useInput.js

@@ -1,15 +1,17 @@
 import { useState, useCallback, useEffect } from 'react';
 
-import { getInputMapping } from '../utils/inputMapping.js';
+import { find } from 'lodash';
+
+import { getInputMapping } from '../utils/bpmnUtils.js';
 
 /**
  * Get and set input variables for the given element,
  * based on the input mapping and available process variables.
  *
  * @param {*} element - BPMN element
- * @param {Array} variables - Available process variables
+ * @param {*} resolvedVariables - Available process variables
  */
-export function useInput(element, variables) {
+export function useInput(element, resolvedVariables) {
 
   const [ input, setInput ] = useState({});
   const [ dirty, setDirty ] = useState({});
@@ -19,66 +21,32 @@ export function useInput(element, variables) {
       return;
     }
 
+    setInitialInput();
+  }, [ element, resolvedVariables ]);
+
+  /**
+   * Create initial input from the BPMN element input mapping.
+   */
+  const setInitialInput = useCallback(() => {
     const inputMapping = getInputMapping(element);
 
-    if (!inputMapping) {
+    if (!inputMapping || !resolvedVariables) {
       return;
     }
 
-    const values = inputMapping.reduce((acc, { target, source }) => {
-
-      const feelValue = getFeelValue(source);
-
-      if (!feelValue) {
-        return { ...acc, [target]: source };
-      }
-
-      if (isFeelConstant(feelValue)) {
-        return { ...acc, [target]: feelValue };
-      }
-
-      const knownVariable = variables?.find(variable => variable.name === target);
-
-      if (!knownVariable) {
-        console.log('no known variable for', target);
-        return { ...acc, [feelValue]: '' };
-      }
-
-      if (knownVariable.type === 'Context' && knownVariable.entries) {
-        const sourceEntries = Object.fromEntries(knownVariable.entries.map(entry => [ entry.name, '' ]));
-        return { ...acc, ...sourceEntries };
-      }
-
-      if (knownVariable.info) {
-        return { ...acc, [target]: knownVariable.info };
-      }
-
-      return { ...acc, [feelValue]: '' };
-    }, {});
-
-    // Convert flat object with dot notation to nested object
-    const nestedValues = Object.entries(values).reduce((acc, [ key, value ]) => {
-      const keys = key.split('.');
-      let current = acc;
-
-      for (let i = 0; i < keys.length - 1; i++) {
-        const keyPart = keys[i];
-        if (!(keyPart in current)) {
-          current[keyPart] = {};
-        }
-        current = current[keyPart];
-      }
-
-      current[keys[keys.length - 1]] = value;
-      return acc;
-    }, {});
+    const values = createFromInputMapping(inputMapping, resolvedVariables);
 
     setInput(prev => ({
       ...prev,
-      [element.id]: JSON.stringify(nestedValues, null, 2)
+      [element.id]: values
     }));
-  }, [ element, variables ]);
+  }, [ element, resolvedVariables ]);
 
+  /**
+   * Set input for the currently selected element.
+   *
+   * Mark the input as `dirty` to indicate it has been modified.
+   */
   const handleInput = useCallback((value) => {
     setInput(prev => ({
       ...prev,
@@ -92,25 +60,97 @@ export function useInput(element, variables) {
 
   }, [ element ]);
 
+  /**
+   * Set input back to the initial values based on the BPMN element input mapping.
+   */
+  const handleReset = useCallback(() => {
+
+    setInitialInput();
+
+    setDirty(prev => ({
+      ...prev,
+      [element.id]: false
+    }));
+  }, [ element, resolvedVariables ]);
+
   return {
     input: input[element?.id],
     setInput: handleInput,
+    reset: handleReset
   };
 }
 
-function getFeelValue(string) {
-  return string.startsWith('=') ? string.slice(1) : null;
+
+// helpers
+
+function createFromInputMapping(inputMapping, resolvedVariables) {
+
+  const values = inputMapping.reduce((acc, { target, source }) => {
+
+    const variable = find(resolvedVariables, { name: target });
+
+    if (!variable) {
+      return acc;
+    }
+
+    const { name, type, info } = variable;
+
+    if (type === 'Context') {
+
+      // TODO: We can't resolve Context variables yet
+      return { ...acc, [name]: {} };
+    }
+
+    if (!type && !info && source.startsWith('=')) {
+
+      // TODO: Remove when https://github.com/bpmn-io/variable-resolver/issues/52 is fixed.
+      if (source === '=false') {
+        return acc;
+      }
+
+      return { ...acc, [source.slice(1)]: '' };
+    }
+
+    return acc;
+  }, {});
+
+  const nestedValues = parseNestedValues(values);
+
+  return JSON.stringify(nestedValues, null, 2);
 }
 
-function isFeelConstant(value) {
+/**
+ * Convert flat object with dot notation to nested object.
+ *
+ * Example:
+ *
+ * `{
+ *   'foo.bar': 'baz'
+ * }`
+ * becomes:
+ * `{
+ *   foo: {
+ *     bar: 'baz'
+ *   }
+ * }`
+ */
+function parseNestedValues(values) {
 
-  if (!isNaN(parseInt(value))) {
-    return true;
-  }
+  const nestedValues = Object.entries(values).reduce((acc, [ key, value ]) => {
+    const keys = key.split('.');
+    let current = acc;
+
+    for (let i = 0; i < keys.length - 1; i++) {
+      const keyPart = keys[i];
+      if (!(keyPart in current)) {
+        current[keyPart] = {};
+      }
+      current = current[keyPart];
+    }
 
-  if (value.toLowerCase() === 'true' || value.toLowerCase() === 'false') {
-    return true;
-  }
+    current[keys[keys.length - 1]] = value;
+    return acc;
+  }, {});
 
-  return false;
+  return nestedValues;
 }