KVv2 json cursor jumps on "enter"

changelog/27569.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix cursor jump on KVv2 json editor that would occur after pressing ENTER.
+```

ui/lib/core/addon/modifiers/code-mirror.js

@@ -7,6 +7,7 @@ import { action } from '@ember/object';
 import { bind } from '@ember/runloop';
 import codemirror from 'codemirror';
 import Modifier from 'ember-modifier';
+import { stringify } from 'core/helpers/stringify';
 
 import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/selection/active-line';
@@ -26,8 +27,20 @@ export default class CodeMirrorModifier extends Modifier {
     } else {
       // this hook also fires any time there is a change to tracked state
       this._editor.setOption('readOnly', namedArgs.readOnly);
-      if (namedArgs.content && this._editor.getValue() !== namedArgs.content) {
-        this._editor.setValue(namedArgs.content);
+      let value = this._editor.getValue();
+      let content = namedArgs.content;
+      if (!content) return;
+      try {
+        // First parse json to make white space and line breaks consistent between the two items,
+        // then stringify so they can be compared.
+        // We use the stringify helper so we do not flatten the json object
+        value = stringify([JSON.parse(value)], {});
+        content = stringify([JSON.parse(content)], {});
+      } catch {
+        // this catch will occur for non-json content when the mode is not javascript (e.g. ruby).
+      }
+      if (value !== content) {
+        this._editor.setValue(content);
       }
     }
   }

ui/tests/acceptance/secrets/backend/kv/kv-v2-workflow-edge-cases-test.js

@@ -5,7 +5,16 @@
 /* eslint-disable no-useless-escape */
 import { module, test } from 'qunit';
 import { v4 as uuidv4 } from 'uuid';
-import { click, currentURL, fillIn, findAll, setupOnerror, typeIn, visit } from '@ember/test-helpers';
+import {
+  click,
+  currentURL,
+  fillIn,
+  findAll,
+  setupOnerror,
+  typeIn,
+  visit,
+  triggerKeyEvent,
+} from '@ember/test-helpers';
 import { setupApplicationTest } from 'vault/tests/helpers';
 import authPage from 'vault/tests/pages/auth';
 import {
@@ -24,6 +33,7 @@ import {
 } from 'vault/tests/helpers/kv/policy-generator';
 import { clearRecords, writeSecret, writeVersionedSecret } from 'vault/tests/helpers/kv/kv-run-commands';
 import { FORM, PAGE } from 'vault/tests/helpers/kv/kv-selectors';
+import { GENERAL } from 'vault/tests/helpers/general-selectors';
 import codemirror from 'vault/tests/helpers/codemirror';
 
 /**
@@ -309,6 +319,19 @@ module('Acceptance | kv-v2 workflow | edge cases', function (hooks) {
     assert.false(codemirror().getValue().includes('*'), 'Values are not obscured on edit view');
   });
 
+  test('on enter the JSON editor cursor goes to the next line', async function (assert) {
+    // see issue here: https://github.com/hashicorp/vault/issues/27524
+    const predictedCursorPosition = JSON.stringify({ line: 3, ch: 0, sticky: null });
+    await visit(`/vault/secrets/${this.backend}/kv/create`);
+    await fillIn(FORM.inputByAttr('path'), 'json jump');
+
+    await click(FORM.toggleJson);
+    codemirror().setCursor({ line: 2, ch: 1 });
+    await triggerKeyEvent(GENERAL.codemirrorTextarea, 'keydown', 'Enter');
+    const actualCursorPosition = JSON.stringify(codemirror().getCursor());
+    assert.strictEqual(actualCursorPosition, predictedCursorPosition, 'the cursor stayed on the next line');
+  });
+
   test('viewing advanced secret data versions displays the correct version data', async function (assert) {
     assert.expect(2);
     const obscuredDataV1 = `{

ui/tests/helpers/general-selectors.ts

@@ -81,4 +81,6 @@ export const GENERAL = {
   cancelButton: '[data-test-cancel]',
   saveButton: '[data-test-save]',
   maskedInput: (name: string) => `[data-test-textarea="${name}"]`,
+  codemirror: `[data-test-component="code-mirror-modifier"]`,
+  codemirrorTextarea: `[data-test-component="code-mirror-modifier"] textarea`,
 };

ui/tests/integration/components/json-editor-test.js

@@ -11,18 +11,19 @@ import hbs from 'htmlbars-inline-precompile';
 import jsonEditor from '../../pages/components/json-editor';
 import sinon from 'sinon';
 import { setRunOptions } from 'ember-a11y-testing/test-support';
+import codemirror from 'vault/tests/helpers/codemirror';
 
 const component = create(jsonEditor);
 
 module('Integration | Component | json-editor', function (hooks) {
   setupRenderingTest(hooks);
 
   const JSON_BLOB = `{
-    "test": "test"
-  }`;
+  "test": "test"
+}`;
   const BAD_JSON_BLOB = `{
-    "test": test
-  }`;
+  "test": test
+}`;
 
   hooks.beforeEach(function () {
     this.set('valueUpdated', sinon.spy());
@@ -122,12 +123,27 @@ module('Integration | Component | json-editor', function (hooks) {
     assert.dom('.CodeMirror-code').hasText(`{ "test": "********"}`, 'shows data with obscured values');
     assert.dom('[data-test-toggle-input="revealValues"]').isNotChecked('reveal values toggle is unchecked');
     await click('[data-test-toggle-input="revealValues"]');
-    assert.dom('.CodeMirror-code').hasText(JSON_BLOB, 'shows data with real values');
+    assert.strictEqual(codemirror().getValue(), JSON_BLOB, 'shows data with real values');
     assert.dom('[data-test-toggle-input="revealValues"]').isChecked('reveal values toggle is checked');
     // turn obscure back on to ensure readonly overrides reveal setting
     await click('[data-test-toggle-input="revealValues"]');
     this.set('readOnly', false);
     assert.dom('[data-test-toggle-input="revealValues"]').doesNotExist('reveal values toggle is hidden');
-    assert.dom('.CodeMirror-code').hasText(JSON_BLOB, 'shows data with real values on edit mode');
+    assert.strictEqual(codemirror().getValue(), JSON_BLOB, 'shows data with real values on edit mode');
+  });
+
+  test('code-mirror modifier sets value correctly on non json object', async function (assert) {
+    this.value = '#A comment';
+    await render(hbs`
+      <JsonEditor
+        @value={{this.value}}
+        @example={{this.example}}
+        @mode="ruby"
+        @valueUpdated={{fn (mut this.value)}}
+      />
+    `);
+    assert.strictEqual(codemirror().getValue(), `#A comment`, 'shows initial non json value');
+    codemirror().setValue('#Another comment');
+    assert.strictEqual(codemirror().getValue(), `#Another comment`, 'shows updated non json value');
   });
 });