fix: Show raw json when viewing raw api output in connect dia

ui/desktop/app/helpers/raw-json.js

@@ -0,0 +1,8 @@
+import { helper } from '@ember/component/helper';
+
+/**
+ * Helper to convert json object to string for display purposes.
+ */
+export default helper(function rawJson([json]) {
+  return JSON.stringify(json, null, '  ');
+});

ui/desktop/app/styles/app.scss

@@ -414,6 +414,11 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
     .reveal-trigger-text-close {
       display: none;
     }
+
+    pre {
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
   }
 }
 

ui/desktop/app/templates/scopes/scope/projects/targets.hbs

@@ -123,11 +123,7 @@
                         'resources.session.credential.actions.raw-api.show'
                       }}
                     >
-                      <pre>
-                        <code>
-                          {{credential.rawCredential}}
-                        </code>
-                      </pre>
+                      <pre>{{raw-json credential.rawCredential}}</pre>
                     </Reveal>
                   </:footer>
                 </Card>
@@ -150,4 +146,4 @@
   {{/each}}
 {{/each}}
 
-{{outlet}}
+{{outlet}}

ui/desktop/tests/integration/helpers/raw-json-test.js

@@ -0,0 +1,19 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Helper | raw-json', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    this.set('inputValue', {});
+    await render(hbs`{{raw-json inputValue}}`);
+    assert.equal(this.element.textContent.trim(), '{}');
+    this.set('inputValue', { key: 'value', nestedKey: { key: 'value' } });
+    assert.equal(
+      this.element.textContent.trim(),
+      `{\n  "key": "value",\n  "nestedKey": {\n    "key": "value"\n  }\n}`
+    );
+  });
+});