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 }

test/components/Input/InputEditor.spec.js

@@ -312,6 +312,137 @@ describe('InputEditor', function() {
 
   });
 
+
+  describe('undo/redo', function() {
+
+    const isMac = /Mac/.test(navigator.platform);
+    const undoKeys = isMac ? '{Meta>}z{/Meta}' : '{Control>}z{/Control}';
+    const redoKeys = isMac ? '{Meta>}{Shift>}z{/Shift}{/Meta}' : '{Control>}y{/Control}';
+
+
+    it('should undo typing', async function() {
+
+      // given
+      const onChangeSpy = sinon.spy();
+
+      const { getByRole } = renderWithProps({
+        value: '{}',
+        onChange: onChangeSpy
+      });
+
+      const textbox = getByRole('textbox');
+      await user.click(textbox);
+
+      // when - type something
+      await user.keyboard('{ArrowRight}{Enter}"a": 1');
+
+      // assume - typing happened
+      await waitFor(() => {
+        expect(onChangeSpy).to.have.been.called;
+      });
+
+      const valueAfterTyping = onChangeSpy.lastCall.args[0];
+      expect(valueAfterTyping).to.contain('"a": 1');
+
+      onChangeSpy.resetHistory();
+
+      // when - undo
+      await user.keyboard(undoKeys);
+
+      // then - onChange should fire with reverted content
+      await waitFor(() => {
+        expect(onChangeSpy).to.have.been.called;
+      });
+    });
+
+
+    it('should undo reset', async function() {
+
+      // given
+      const onChangeSpy = sinon.spy();
+      const originalValue = '{\n  "foo": "bar"\n}';
+      const resetValue = '{}';
+
+      const { container, getByRole, rerender } = renderWithProps({
+        value: originalValue,
+        onChange: onChangeSpy
+      });
+
+      // assume - editor shows original value
+      expect(container.textContent).to.contain('"foo": "bar"');
+
+      // when - simulate reset by changing value prop
+      rerender(
+        <InputEditor
+          value={ resetValue }
+          onChange={ onChangeSpy }
+          onErrorChange={ () => {} }
+        />
+      );
+
+      await waitFor(() => {
+        expect(container.textContent).to.not.contain('"foo": "bar"');
+      });
+
+      // when - undo the reset
+      const textbox = getByRole('textbox');
+      await user.click(textbox);
+      await user.keyboard(undoKeys);
+
+      // then - editor should revert to original value
+      await waitFor(() => {
+        expect(onChangeSpy).to.have.been.calledWith(originalValue);
+      });
+    });
+
+
+    it('should redo after undo', async function() {
+
+      // given
+      const onChangeSpy = sinon.spy();
+      const originalValue = '{\n  "foo": "bar"\n}';
+      const resetValue = '{}';
+
+      const { container, getByRole, rerender } = renderWithProps({
+        value: originalValue,
+        onChange: onChangeSpy
+      });
+
+      // reset
+      rerender(
+        <InputEditor
+          value={ resetValue }
+          onChange={ onChangeSpy }
+          onErrorChange={ () => {} }
+        />
+      );
+
+      await waitFor(() => {
+        expect(container.textContent).to.not.contain('"foo": "bar"');
+      });
+
+      // undo
+      const textbox = getByRole('textbox');
+      await user.click(textbox);
+      await user.keyboard(undoKeys);
+
+      await waitFor(() => {
+        expect(onChangeSpy).to.have.been.calledWith(originalValue);
+      });
+
+      onChangeSpy.resetHistory();
+
+      // when - redo
+      await user.keyboard(redoKeys);
+
+      // then - should go back to reset value
+      await waitFor(() => {
+        expect(onChangeSpy).to.have.been.calledWith(resetValue);
+      });
+    });
+
+  });
+
 });
 
 function renderWithProps(props = {}) {