From 018674a798cd5de325e302c2e457f1abd299d406 Mon Sep 17 00:00:00 2001
From: "Shannon Roberts (Beagin)" <beagins@users.noreply.github.com>
Date: Thu, 27 Feb 2025 10:42:07 -0800
Subject: [PATCH] [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                           |  3 +++
 .../templates/components/oidc/scope-form.hbs  |  2 +-
 .../access/oidc/scopes/scope/details.hbs      | 13 +++++-------
 .../templates/vault/cluster/policy/show.hbs   | 21 +++++++++++--------
 .../core/addon/components/policy-example.hbs  |  9 +-------
 .../addon/components/page/role/details.hbs    | 13 +++++-------
 .../components/oidc/scope-form-test.js        | 20 ++----------------
 .../components/policy-example-test.js         |  2 +-
 8 files changed, 30 insertions(+), 53 deletions(-)
 create mode 100644 changelog/29720.txt

diff --git a/changelog/29720.txt b/changelog/29720.txt
new file mode 100644
index 0000000000..9748c332a3
--- /dev/null
+++ b/changelog/29720.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Use Hds::CodeBlock component to replace readonly JsonEditor instances
+```
\ No newline at end of file
diff --git a/ui/app/templates/components/oidc/scope-form.hbs b/ui/app/templates/components/oidc/scope-form.hbs
index 5d14013a2f..1e77ed17e8 100644
--- a/ui/app/templates/components/oidc/scope-form.hbs
+++ b/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">
diff --git a/ui/app/templates/vault/cluster/access/oidc/scopes/scope/details.hbs b/ui/app/templates/vault/cluster/access/oidc/scopes/scope/details.hbs
index 343afaa83d..f4ad8f3c99 100644
--- a/ui/app/templates/vault/cluster/access/oidc/scopes/scope/details.hbs
+++ b/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>
\ No newline at end of file
diff --git a/ui/app/templates/vault/cluster/policy/show.hbs b/ui/app/templates/vault/cluster/policy/show.hbs
index 4e5106108a..69a6319baa 100644
--- a/ui/app/templates/vault/cluster/policy/show.hbs
+++ b/ui/app/templates/vault/cluster/policy/show.hbs
@@ -46,15 +46,18 @@
   </ToolbarActions>
 </Toolbar>
 <div class="box is-bottomless is-fullwidth is-marginless">
-  <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"
-    />
-  </div>
+  {{#if this.model.policy}}
+    <div class="field">
+      <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>
diff --git a/ui/lib/core/addon/components/policy-example.hbs b/ui/lib/core/addon/components/policy-example.hbs
index e57859fd6c..a63ecf13a1 100644
--- a/ui/lib/core/addon/components/policy-example.hbs
+++ b/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
diff --git a/ui/lib/kubernetes/addon/components/page/role/details.hbs b/ui/lib/kubernetes/addon/components/page/role/details.hbs
index 1693464733..0ce251acf0 100644
--- a/ui/lib/kubernetes/addon/components/page/role/details.hbs
+++ b/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}}
 
diff --git a/ui/tests/integration/components/oidc/scope-form-test.js b/ui/tests/integration/components/oidc/scope-form-test.js
index b14bfd8146..a2454434d1 100644
--- a/ui/tests/integration/components/oidc/scope-form-test.js
+++ b/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');
   });
diff --git a/ui/tests/integration/components/policy-example-test.js b/ui/tests/integration/components/policy-example-test.js
index 831f5c659f..9e940aa64b 100644
--- a/ui/tests/integration/components/policy-example-test.js
+++ b/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]',
 };