different approach to move onto parse at create and edit. it breaks t…

…hings, hopefully fixed in next commits

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

@@ -26,14 +26,8 @@ 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);
-      //* Comparing tracked state against editor.getValue *//
-      // 1. Parse so that you can compare values.
-      // this is important because editor.getValue will return exactly what is displayed on the editor including new-lines. Whereas nameArg tracked content could have already been modified (e.g. parsed) and may not include new lines.
-      const editorValue = JSON.parse(this._editor.getValue());
-      const namedArgsContent = JSON.parse(namedArgs.content);
-      // 2. in JavaScript two objects are considered equal only if they are the same object. So after parsing to remove excess white space, we stringify them.
-      if (JSON.stringify(editorValue) !== JSON.stringify(namedArgsContent)) {
-        // every time setValue is called the cursor jumps to the start of the editor so it's pertinent it's only called when necessary.
+      if (namedArgs.content && this._editor.getValue() !== namedArgs.content) {
+        // when setValue is called if there is a change in the value, the cursor will jump to the beginning of the text field. Heads up if you've found yourself debugging this behavior. It's likely due to the parsing the namedArgs value before it hits the codeMirrorModifier.
         this._editor.setValue(namedArgs.content);
       }
     }

ui/lib/kv/addon/components/kv-data-fields.hbs

@@ -15,7 +15,7 @@
 {{#if @showJson}}
   <JsonEditor
     @title="{{if (eq @type 'create') 'Secret' 'Version'}} data"
-    @value={{this.stringifiedSecretData}}
+    @value={{this.codeMirrorSecretData}}
     @allowObscure={{true}}
     @valueUpdated={{this.handleJson}}
     @readOnly={{eq @type "details"}}

ui/lib/kv/addon/components/kv-data-fields.js

@@ -28,6 +28,9 @@ import { stringify } from 'core/helpers/stringify';
 
 export default class KvDataFields extends Component {
   @tracked lintingErrors;
+  @tracked codeMirrorSecretData = this.args.secret?.secretData
+    ? stringify([this.args.secret.secretData], {})
+    : this.startingValue;
 
   get startingValue() {
     // must pass the third param called "space" in JSON.stringify to structure object with whitespace
@@ -37,16 +40,15 @@ export default class KvDataFields extends Component {
     return JSON.stringify({ '': '' }, null, 2);
   }
 
-  get stringifiedSecretData() {
-    return this.args.secret?.secretData ? stringify([this.args.secret.secretData], {}) : this.startingValue;
-  }
-
   @action
   handleJson(value, codemirror) {
     codemirror.performLint();
     this.lintingErrors = codemirror.state.lint.marked.length > 0;
     if (!this.lintingErrors) {
-      this.args.secret.secretData = JSON.parse(value);
+      // parse on save not on onChange to avoid problems with json comparisons within the codemirror modifier.
+      // update the codemirror value so the modifier correct parses and updates values
+      this.codeMirrorSecretData = value;
+      this.args.secret.secretData = value;
     }
   }
 }

ui/lib/kv/addon/components/page/secret/edit.js

@@ -77,11 +77,14 @@ export default class KvSecretEdit extends Component {
   *save(event) {
     event.preventDefault();
     try {
+      // before validating, set the secretData to the parsed value otherwise you'll hit validation errors
+      // and only parse the value right before saving, otherwise the value will be parsed on every change and run into issues with the codemirror modifier comparison checks
+      const { secret } = this.args;
+      secret.secretData = JSON.parse(secret.secretData);
       const { isValid, state, invalidFormMessage } = this.args.secret.validate();
       this.modelValidations = isValid ? null : state;
       this.invalidFormAlert = invalidFormMessage;
       if (isValid) {
-        const { secret } = this.args;
         yield secret.save();
         this.flashMessages.success(`Successfully created new version of ${secret.path}.`);
         this.router.transitionTo('vault.cluster.secrets.backend.kv.secret.details', {

ui/lib/kv/addon/components/page/secrets/create.js

@@ -50,12 +50,14 @@ export default class KvSecretCreate extends Component {
   *save(event) {
     event.preventDefault();
     this.resetErrors();
-
+    // before validating, set the secretData to the parsed value otherwise you'll hit validation errors
+    // and only parse the value right before saving, otherwise the value will be parsed on every change and run into issues with the codemirror modifier comparison checks
+    const { secret, metadata } = this.args;
+    secret.secretData = JSON.parse(secret.secretData);
     const { isValid, state } = this.validate();
     this.modelValidations = isValid ? null : state;
     this.invalidFormAlert = isValid ? '' : 'There is an error with this form.';
 
-    const { secret, metadata } = this.args;
     if (isValid) {
       try {
         // try saving secret data first