From 77f8235ebf4112439411cd7aaf9e8f52a2691658 Mon Sep 17 00:00:00 2001
From: Kristin Bradley <kristin.bradley@hashicorp.com>
Date: Fri, 8 Dec 2023 09:03:47 -0800
Subject: [PATCH] Replace `Rose::CodeEditor` with `Hds::CodeBlock` within
 Desktop client (HDS-2827) (#2020)

* HDS-2827 Replace Rose::CodeEditor with Hds::CodeBlock on Create New Worker page

* HDS-2827 Replace Rose::CodeEditor with Hds::CodeBlock in credentials panel

* HDS-2827 Remove un-needed getters, fix formatting errors

* HDS-2827 Revert instances of Hds::CodeBlock added to create workers page

* HDS-2827 Fix failing test

* Apply suggestions from code review

* HDS-2827 Delete old unused css

* HDS-2827 Delete old css

---------

Co-authored-by: Dharini Jeeva <dharini@hashicorp.com>
---
 .../components/credentials-panel/index.hbs    | 50 +++++++------------
 ui/desktop/app/styles/app.scss                | 16 ------
 .../components/credentials-panel-test.js      |  2 +-
 3 files changed, 19 insertions(+), 49 deletions(-)

diff --git a/ui/desktop/app/components/credentials-panel/index.hbs b/ui/desktop/app/components/credentials-panel/index.hbs
index 43ed5e6fd..0734968df 100644
--- a/ui/desktop/app/components/credentials-panel/index.hbs
+++ b/ui/desktop/app/components/credentials-panel/index.hbs
@@ -24,39 +24,25 @@
 {{#each @credentials as |credential|}}
   {{#if this.isRawApiVisible}}
     <div class='raw-credential-panel-body'>
-      <div class='raw-credential-header'>
-        <div class='raw-credential-title'>
-          <div class='credential-name hds-typography-display-200'>
-            {{#if credential.source.name}}
-              {{credential.source.name}}
-            {{else}}
-              {{credential.source.id}}
-            {{/if}}
-          </div>
-          <Hds::Copy::Button
-            @text='Copy'
-            @isIconOnly={{true}}
-            @textToCopy={{raw-json credential.rawCredential}}
-          />
-        </div>
-        <div class='hds-typography-body-100'>
+      <Hds::CodeBlock
+        @language='json'
+        @value={{raw-json credential.rawCredential}}
+        @hasLineNumbers={{false}}
+        @hasCopyButton={{true}}
+        data-test-raw-secret
+        as |CB|
+      >
+        <CB.Title>
+          {{#if credential.source.name}}
+            {{credential.source.name}}
+          {{else}}
+            {{credential.source.id}}
+          {{/if}}
+        </CB.Title>
+        <CB.Description>
           {{credential.source.description}}
-        </div>
-      </div>
-
-      <Rose::CodeEditor @codeValue={{raw-json credential.rawCredential}} as |c|>
-        <c.fieldEditor
-          class='rose-autosize raw-secret'
-          @options={{hash
-            mode='application/json'
-            readOnly=true
-            lineNumbers=false
-            cursorBlinkRate=-1
-            styleActiveLine=false
-            autoRefresh=true
-          }}
-        />
-      </Rose::CodeEditor>
+        </CB.Description>
+      </Hds::CodeBlock>
     </div>
   {{else}}
     <div class='credential-panel-body'>
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index f39c28069..ae411bc9e 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -646,22 +646,6 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
 .raw-credential-panel-body {
   display: block;
   margin-top: 0.75rem;
-
-  .raw-credential-header {
-    border: 1px solid var(--token-color-border-primary);
-    border-radius: 5px 5px 0 0;
-    border-bottom: none;
-    padding: 1.5rem 1.5rem 0.75rem;
-  }
-
-  .raw-credential-title {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .raw-secret .CodeMirror {
-    border-radius: 0 0 5px 5px;
-  }
 }
 
 // Host Modal
diff --git a/ui/desktop/tests/integration/components/credentials-panel-test.js b/ui/desktop/tests/integration/components/credentials-panel-test.js
index a0a9a4d9b..d26483017 100644
--- a/ui/desktop/tests/integration/components/credentials-panel-test.js
+++ b/ui/desktop/tests/integration/components/credentials-panel-test.js
@@ -60,6 +60,6 @@ module('Integration | Component | credentials-panel', function (hooks) {
 
     await click('[data-test-toggle-credentials]');
 
-    assert.dom('.raw-secret').isVisible();
+    assert.dom("[data-test-raw-secret]").isVisible();
   });
 });