backport of commit 66268d6 (#27127)

Co-authored-by: Angel Garbarino <Monkeychip@users.noreply.github.com>
hashicorp · May 20, 2024 · f6e64d3 · f6e64d3
1 parent 4809a27
commit f6e64d3
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/changelog/27120.txt b/changelog/27120.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix KVv2 cursor jumping inside json editor after initial input.
+```
diff --git a/ui/lib/kv/addon/components/kv-data-fields.js b/ui/lib/kv/addon/components/kv-data-fields.js
@@ -29,8 +29,16 @@ import { stringify } from 'core/helpers/stringify';
 export default class KvDataFields extends Component {
   @tracked lintingErrors;
 
+  get startingValue() {
+    // must pass the third param called "space" in JSON.stringify to structure object with whitespace
+    // otherwise the following codemirror modifier check will pass `this._editor.getValue() !== namedArgs.content` and _setValue will be called.
+    // the method _setValue moves the cursor to the beginning of the text field.
+    // the effect is that the cursor jumps after the first key input.
+    return JSON.stringify({ '': '' }, null, 2);
+  }
+
   get stringifiedSecretData() {
-    return this.args.secret?.secretData ? stringify([this.args.secret.secretData], {}) : '{ "": "" }';
+    return this.args.secret?.secretData ? stringify([this.args.secret.secretData], {}) : this.startingValue;
   }
 
   @action

diff --git a/ui/tests/acceptance/secrets/backend/kv/kv-v2-workflow-edge-cases-test.js b/ui/tests/acceptance/secrets/backend/kv/kv-v2-workflow-edge-cases-test.js
@@ -2,7 +2,7 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
-
+/* 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';
@@ -276,7 +276,13 @@ module('Acceptance | kv-v2 workflow | edge cases', function (hooks) {
     await fillIn(FORM.inputByAttr('path'), 'complex');
 
     await click(FORM.toggleJson);
-    assert.strictEqual(codemirror().getValue(), '{ "": "" }');
+
+    assert.strictEqual(
+      codemirror().getValue(),
+      `{
+  \"\": \"\"
+}`
+    );
     codemirror().setValue('{ "foo3": { "name": "bar3" } }');
     await click(FORM.saveBtn);
     // Future: test that json is automatic on details too

diff --git a/ui/tests/integration/components/kv/kv-data-fields-test.js b/ui/tests/integration/components/kv/kv-data-fields-test.js
@@ -44,8 +44,8 @@ module('Integration | Component | kv-v2 | KvDataFields', function (hooks) {
 
     assert.strictEqual(
       codemirror().getValue(' '),
-      `{ \"\": \"\" }`, // eslint-disable-line no-useless-escape
-      'json editor initializes with empty object'
+      `{   \"\": \"\" }`, // eslint-disable-line no-useless-escape
+      'json editor initializes with empty object that includes whitespace'
     );
     await fillIn(`${FORM.jsonEditor} textarea`, 'blah');
     assert.strictEqual(codemirror().state.lint.marked.length, 1, 'codemirror lints input');