feat: adjust clear button to undoable reset to default prefill

Closes #76

Author: Buckwich

lib/components/Input/Input.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 
 import { Link } from '@carbon/react';
 import { Launch } from '@carbon/icons-react';
@@ -13,12 +13,19 @@ export default function Input({
   onSetInput,
   variablesForElement
 }) {
-  const handleResetInput = () => {
+
+  const containerRef = /** @type {import('react').RefObject<HTMLDivElement | null>} */ (useRef(null));
+
+  const handleReset = () => {
     onResetInput();
+    const cmContent = /** @type {HTMLElement | undefined} */ (
+      containerRef.current?.querySelector('.cm-content')
+    );
+    cmContent?.focus();
   };
 
   return (
-    <div className="input">
+    <div className="input" ref={ containerRef }>
       <div className="input__header">
         <div className="input__header--title">
           Input process variables
@@ -28,8 +35,8 @@ export default function Input({
         </Link>
         <Link
           className="input__header--button-reset"
-          onClick={ handleResetInput }
-          role="button">Clear</Link>
+          onClick={ handleReset }
+          role="button">Reset</Link>
       </div>
       <InputEditor
         allOutputs={ allOutputs }

lib/components/Input/InputEditor.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 
 import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
-import { defaultKeymap } from '@codemirror/commands';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
 import { bracketMatching, indentOnInput } from '@codemirror/language';
 import { Compartment, EditorState, Annotation } from '@codemirror/state';
 import { EditorView, keymap, placeholder } from '@codemirror/view';
@@ -100,8 +100,10 @@ export default function InputEditor({
         closeBrackets(),
         bracketMatching(),
         indentOnInput(),
+        history(),
         keymap.of([
-          ...defaultKeymap
+          ...defaultKeymap,
+          ...historyKeymap
         ]),
         new Compartment().of(json()),
         new Compartment().of(EditorState.tabSize.of(2)),
@@ -249,4 +251,5 @@ function getDetail(value) {
   }
 
   return type.charAt(0).toUpperCase() + type.slice(1);
-}
+}
+

lib/utils/prefill.js

@@ -1,6 +1,6 @@
 import { has, isObject, isString } from 'min-dash';
 
-export const DEFAULT_INPUT_CONFIG = '{}';
+export const DEFAULT_INPUT_CONFIG = '{\n  \n}';
 
 
 /**

test/ElementConfig.spec.js

@@ -112,7 +112,7 @@ describe('ElementConfig', function() {
       // then
       const inputConfigForElement = elementConfig.getInputConfigForElement(element);
 
-      expect(inputConfigForElement).to.eql('{}');
+      expect(inputConfigForElement).to.eql('{\n  \n}');
 
       expect(spy).to.have.been.calledOnce;
     }));
@@ -195,7 +195,7 @@ describe('ElementConfig', function() {
       const inputConfigForElement = elementConfig.getInputConfigForElement(element);
 
       // then
-      expect(inputConfigForElement).to.eql('{}');
+      expect(inputConfigForElement).to.eql('{\n  \n}');
     }));
 
   });

test/components/Input/Input.spec.js

@@ -38,8 +38,9 @@ function renderWithProps(props) {
   const {
     element = elementRegistry.get('ServiceTask_1'),
     input = '{}',
-    setInput = () => {},
-    reset = () => {},
+    onSetInput = () => {},
+    onResetInput = () => {},
+    onErrorChange = () => {},
     variablesForElement,
     output,
     onRunTask = () => {}
@@ -49,8 +50,9 @@ function renderWithProps(props) {
     <Input
       element={ element }
       input={ input }
-      setInput={ setInput }
-      reset={ reset }
+      onSetInput={ onSetInput }
+      onResetInput={ onResetInput }
+      onErrorChange={ onErrorChange }
       variablesForElement={ variablesForElement }
       output={ output }
       onRunTask={ onRunTask }