From dd0d37241cfcec57e3ed8c94d8ba4edf324d7c81 Mon Sep 17 00:00:00 2001
From: Zhihe Li <zhihe.li@hashicorp.com>
Date: Fri, 26 Aug 2022 11:01:23 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20code=20editor=20to?=
 =?UTF-8?q?=20api=20response=20display=20(#1271)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: ICU-5767
---
 .../templates/scopes/scope/projects/targets.hbs  | 16 +++++++++++++++-
 ui/desktop/ember-cli-build.js                    |  3 +++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
index 68a08f950..72b16c9c1 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
@@ -123,7 +123,21 @@
                         'resources.session.credential.actions.raw-api.show'
                       }}
                     >
-                      <pre>{{raw-json credential.rawCredential}}</pre>
+                      <Rose::CodeEditor
+                        @codeValue={{raw-json credential.rawCredential}}
+                        as |c|
+                      >
+                        <c.fieldEditor
+                          class='rose-autosize'
+                          @options={{hash
+                            mode='application/json'
+                            readOnly=true
+                            lineNumbers=false
+                            cursorBlinkRate=-1
+                            styleActiveLine=false
+                          }}
+                        />
+                      </Rose::CodeEditor>
                     </Reveal>
                   </:footer>
                 </Card>
diff --git a/ui/desktop/ember-cli-build.js b/ui/desktop/ember-cli-build.js
index 91b6adad0..d66f1f5c0 100644
--- a/ui/desktop/ember-cli-build.js
+++ b/ui/desktop/ember-cli-build.js
@@ -40,5 +40,8 @@ module.exports = function (defaults) {
   // please specify an object with the list of modules as keys
   // along with the exports of each module as its value.
 
+  app.import('node_modules/codemirror/lib/codemirror.css');
+  app.import('node_modules/codemirror/theme/monokai.css');
+
   return app.toTree();
 };