Default to Json editor if KV secret is nested

changelog/24290.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: When Kv v2 secret is an object, fix so details view defaults to readOnly JSON editor.
+```

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

@@ -4,19 +4,20 @@
 ~}}
 
 {{#let (find-by "name" "path" @secret.allFields) as |attr|}}
-  {{#if @isEdit}}
+  {{#if (eq @type "edit")}}
     <ReadonlyFormField @attr={{attr}} @value={{get @secret attr.name}} />
-  {{else}}
+  {{else if (eq @type "create")}}
     <FormField @attr={{attr}} @model={{@secret}} @modelValidations={{@modelValidations}} @onKeyUp={{@pathValidations}} />
   {{/if}}
 {{/let}}
 
 <hr class="is-marginless has-background-gray-200" />
 {{#if @showJson}}
   <JsonEditor
-    @title="{{if @isEdit 'Version' 'Secret'}} data"
+    @title="{{if (eq @type 'create') 'Secret' 'Version'}} data"
     @value={{this.codeMirrorString}}
     @valueUpdated={{this.handleJson}}
+    @readOnly={{if (eq @type "details") true false}}
   />
   {{#if (or @modelValidations.secretData.errors this.lintingErrors)}}
     <AlertInline @type={{if this.lintingErrors "warning" "danger"}} @paddingTop={{true}}>
@@ -30,7 +31,7 @@
 {{else}}
   <KvObjectEditor
     class="has-top-margin-m"
-    @label="{{if @isEdit 'Version' 'Secret'}} data"
+    @label="{{if (eq @type 'create') 'Secret' 'Version'}} data"
     @value={{@secret.secretData}}
     @onChange={{fn (mut @secret.secretData)}}
     @isMasked={{true}}

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

@@ -14,7 +14,7 @@ import { stringify } from 'core/helpers/stringify';
  * <KvDataFields
  *  @showJson={{true}}
  *  @secret={{@secret}}
- *  @isEdit={{true}}
+ *  @type="edit"
  *  @modelValidations={{this.modelValidations}}
  *  @pathValidations={{this.pathValidations}}
  * />
@@ -23,7 +23,7 @@ import { stringify } from 'core/helpers/stringify';
  * @param {boolean} showJson - boolean passed from parent to hide/show json editor
  * @param {object} [modelValidations] - object of errors.  If attr.name is in object and has error message display in AlertInline.
  * @param {callback} [pathValidations] - callback function fired for the path input on key up
- * @param {boolean} [isEdit=false] - if true, this is a new secret version rather than a new secret. Used to change text for some form labels
+ * @param {boolean} [type=false] - can be edit, create, or details. Used to change text for some form labels
  */
 
 export default class KvDataFields extends Component {

ui/lib/kv/addon/components/page/secret/details.hbs

@@ -15,7 +15,12 @@
 
   <:toolbarFilters>
     {{#unless this.emptyState}}
-      <Toggle @name="json" @checked={{this.showJsonView}} @onChange={{fn (mut this.showJsonView)}}>
+      <Toggle
+        @name="json"
+        @checked={{or this.showJsonView this.secretDataIsAdvanced}}
+        @onChange={{fn (mut this.showJsonView)}}
+        @disabled={{this.secretDataIsAdvanced}}
+      >
         <span class="has-text-grey">JSON</span>
       </Toggle>
     {{/unless}}
@@ -93,15 +98,10 @@
     {{/if}}
   </EmptyState>
 {{else}}
-  {{#if this.showJsonView}}
-    <JsonEditor @title="Version data" @value={{stringify @secret.secretData}} @readOnly={{true}} />
-  {{else}}
-    {{#each-in @secret.secretData as |key value|}}
-      <InfoTableRow @label={{key}} @value={{value}} @alwaysRender={{true}}>
-        <MaskedInput @name={{key}} @value={{value}} @displayOnly={{true}} @allowCopy={{true}} @allowDownload={{true}} />
-      </InfoTableRow>
-    {{else}}
-      <InfoTableRow @label="" @value="" @alwaysRender={{true}} />
-    {{/each-in}}
-  {{/if}}
+  <KvDataFields
+    @showJson={{or this.showJsonView this.secretDataIsAdvanced}}
+    @secret={{@secret}}
+    @modelValidations={{this.modelValidations}}
+    @type="details"
+  />
 {{/if}}

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

@@ -35,6 +35,16 @@ export default class KvSecretDetails extends Component {
 
   @tracked showJsonView = false;
   @tracked wrappedData = null;
+  secretDataIsAdvanced;
+
+  constructor() {
+    super(...arguments);
+    this.originalSecret = JSON.stringify(this.args.secret.secretData || {});
+    if (this.originalSecret.lastIndexOf('{') > 0) {
+      // Dumb way to check if there's a nested object in the secret
+      this.secretDataIsAdvanced = true;
+    }
+  }
 
   @action
   closeVersionMenu(dropdown) {

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

@@ -46,7 +46,7 @@
       @showJson={{or this.showJsonView this.secretDataIsAdvanced}}
       @secret={{@secret}}
       @modelValidations={{this.modelValidations}}
-      @isEdit={{true}}
+      @type="edit"
     />
 
     <div class="has-top-margin-m">

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

@@ -21,6 +21,7 @@
       @secret={{@secret}}
       @modelValidations={{this.modelValidations}}
       @pathValidations={{this.pathValidations}}
+      @type="create"
     />
 
     <ToggleButton