[VAULT-33969] UI: replace readonly JsonEditor with Hds::CodeBlock (#29720)

* http://localhost:4200/ui/vault/secrets/kubernetes/kubernetes/roles/test/details readOnly JsonEditor to Hds::CodeBlock

* http://localhost:4200/ui/vault/policies/acl/create readonly JsonEditor to Hds::CodeBlock

* http://localhost:4200/ui/vault/policy/acl/default readonly JsonEditor to Hds::CodeBlock

* http://localhost:4200/ui/vault/access/oidc/scopes/test/details readonly JsonEditor to Hds::CodeBlock

* http://localhost:4200/ui/vault/access/oidc/scopes/create readonly JsonEditor to Hds::CodeBlock

* fix (some) tests

* fix remaining tests

* add changelog

changelog/29720.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Use Hds::CodeBlock component to replace readonly JsonEditor instances
+```

ui/app/templates/components/oidc/scope-form.hbs

@@ -82,7 +82,7 @@
       <p data-test-scope-modal="text">
         Example of a JSON template for scopes:
       </p>
-      <JsonEditor @value={{this.exampleTemplate}} @mode="ruby" @readOnly={{true}} @container=".hds-modal" />
+      <Hds::CodeBlock @value={{this.exampleTemplate}} @language="ruby" @hasCopyButton={{true}} />
       <p class="has-top-margin-m">
         The full list of template parameters can be found
         <DocLink @path="/vault/docs/concepts/oidc-provider#scopes">

ui/app/templates/vault/cluster/access/oidc/scopes/scope/details.hbs

@@ -56,12 +56,9 @@
 <div class="box is-fullwidth is-sideless is-paddingless is-marginless">
   <InfoTableRow @label="Name" @value={{this.model.name}} />
   <InfoTableRow @label="Description" @value={{this.model.description}} />
-  <JsonEditor
-    @title="JSON Template"
-    @mode="ruby"
-    @value={{this.model.template}}
-    @readOnly={{true}}
-    class="has-top-margin-xl has-bottom-margin-xl"
-    data-test-oidc-scope-json
-  />
+  <Hds::CodeBlock @value={{this.model.template}} @language="ruby" @hasCopyButton={{true}} as |CB|>
+    <CB.Title @tag="h3">
+      JSON Template
+    </CB.Title>
+  </Hds::CodeBlock>
 </div>

ui/app/templates/vault/cluster/policy/show.hbs

@@ -46,15 +46,18 @@
   </ToolbarActions>
 </Toolbar>
 <div class="box is-bottomless is-fullwidth is-marginless">
+  {{#if this.model.policy}}
     <div class="field">
-    <JsonEditor
-      @title="Policy"
-      @subTitle={{if (eq this.policyType "acl") (concat this.uppercase this.model.format " format")}}
-      @value={{this.model.policy}}
-      @readOnly={{true}}
-      @mode="ruby"
-    />
+      <Hds::CodeBlock @value={{this.model.policy}} @hasCopyButton={{true}} @maxHeight="300px" @language="ruby" as |CB|>
+        <CB.Title @tag="h3">
+          Policy
+        </CB.Title>
+        <CB.Description>
+          ({{if (eq this.policyType "acl") (concat this.uppercase this.model.format " format")}})
+        </CB.Description>
+      </Hds::CodeBlock>
     </div>
+  {{/if}}
   {{#if this.model.paths}}
     <div class="field box is-shadowless no-bottom-padding is-marginless">
       <h2 class="title is-6">Paths</h2>

ui/lib/core/addon/components/policy-example.hbs

@@ -54,14 +54,7 @@
     </p>
   {{/if}}
 </div>
-<JsonEditor
-  @value={{get this.policyTemplates @policyType}}
-  @mode="ruby"
-  @readOnly={{true}}
-  @showToolbar={{true}}
-  {{! Passed to copy button }}
-  @container={{@container}}
-/>
+<Hds::CodeBlock @value={{get this.policyTemplates @policyType}} @language="ruby" @hasCopyButton={{true}} />
 <div class="has-bottom-margin-m has-top-padding-s">
   <p>
     More information about

ui/lib/kubernetes/addon/components/page/role/details.hbs

@@ -52,14 +52,11 @@
 {{#if @model.generatedRoleRules}}
   <div class="has-top-margin-xl" data-test-generated-role-rules>
     <h2 class="title is-4">Generated role rules</h2>
-    <JsonEditor
-      @title="Role rules"
-      @value={{@model.generatedRoleRules}}
-      @mode="ruby"
-      @readOnly={{true}}
-      @showToolbar={{true}}
-      @theme="hashi auto-height"
-    />
+    <Hds::CodeBlock @value={{@model.generatedRoleRules}} @language="ruby" @hasCopyButton={{true}} as |CB|>
+      <CB.Title @tag="h3">
+        Role rules
+      </CB.Title>
+    </Hds::CodeBlock>
   </div>
 {{/if}}
 

ui/tests/integration/components/oidc/scope-form-test.js

@@ -155,16 +155,6 @@ module('Integration | Component | oidc/scope-form', function (hooks) {
     const MODAL = (e) => `[data-test-scope-modal="${e}"]`;
     this.model = this.store.createRecord('oidc/scope');
 
-    // formatting here is purposeful so that it matches formatting in the template modal
-    const exampleTemplate = `{
-  "username": {{identity.entity.aliases.$MOUNT_ACCESSOR.name}},
-  "contact": {
-    "email": {{identity.entity.metadata.email}},
-    "phone_number": {{identity.entity.metadata.phone_number}}
-  },
-  "groups": {{identity.entity.groups.names}}
-}`;
-
     await render(hbs`
       <Oidc::ScopeForm
         @model={{this.model}}
@@ -176,14 +166,8 @@ module('Integration | Component | oidc/scope-form', function (hooks) {
     await click('[data-test-oidc-scope-example]');
     assert.dom(MODAL('title')).hasText('Scope template', 'Modal title renders');
     assert.dom(MODAL('text')).hasText('Example of a JSON template for scopes:', 'Modal text renders');
-    assert
-      .dom('#scope-template-modal [data-test-copy-button]')
-      .hasAttribute(
-        'data-test-copy-button',
-        exampleTemplate,
-        'Modal copy button copies the example template'
-      );
-    assert.dom('.cm-string').hasText('"username"', 'Example template json renders');
+    assert.dom('#scope-template-modal .hds-icon-clipboard-copy').exists('Modal copy button exists');
+    assert.dom('.token .string').hasText('"username"', 'Example template json renders');
     await click('[data-test-close-modal]');
     assert.dom('.hds#scope-template-modal').doesNotExist('Modal is hidden');
   });

ui/tests/integration/components/policy-example-test.js

@@ -12,7 +12,7 @@ import { setRunOptions } from 'ember-a11y-testing/test-support';
 const SELECTORS = {
   policyText: '[data-test-modal-title]',
   policyDescription: (type) => `[data-test-example-modal-text=${type}]`,
-  jsonText: '[data-test-component="code-mirror-modifier"]',
+  jsonText: '.hds-code-block',
   informationLink: '[data-test-example-modal-information-link]',
 };