From 66268d66481dcd00fbb3830739aadde91c431de2 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <Monkeychip@users.noreply.github.com>
Date: Mon, 20 May 2024 09:03:38 -0600
Subject: [PATCH] UI Bug fix, cursor jumps in KVv2 after initial input (#27120)

* the fix

* changelog

* fix tests

* fix kv test

* fix
---
 changelog/27120.txt                                    |  3 +++
 ui/lib/kv/addon/components/kv-data-fields.js           | 10 +++++++++-
 .../backend/kv/kv-v2-workflow-edge-cases-test.js       | 10 ++++++++--
 .../integration/components/kv/kv-data-fields-test.js   |  4 ++--
 4 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 changelog/27120.txt

diff --git a/changelog/27120.txt b/changelog/27120.txt
new file mode 100644
index 0000000000..3a9630b986
--- /dev/null
+++ b/changelog/27120.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix KVv2 cursor jumping inside json editor after initial input.
+```
\ No newline at end of file
diff --git a/ui/lib/kv/addon/components/kv-data-fields.js b/ui/lib/kv/addon/components/kv-data-fields.js
index 4ffd7ab574..e1902f82fb 100644
--- 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
index 7a17ae8ae7..3e5c62fa3a 100644
--- 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';
@@ -281,7 +281,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);
 
diff --git a/ui/tests/integration/components/kv/kv-data-fields-test.js b/ui/tests/integration/components/kv/kv-data-fields-test.js
index 0cd83dfb0c..16f8a3df27 100644
--- a/ui/tests/integration/components/kv/kv-data-fields-test.js
+++ b/ui/tests/integration/components/kv/kv-data-fields-test.js
@@ -43,8 +43,8 @@ module('Integration | Component | kv-v2 | KvDataFields', function (hooks) {
     await render(hbs`<KvDataFields @showJson={{true}} @secret={{this.secret}} />`, { owner: this.engine });
     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');