refactor: 💡 desktop display of complex nested secrets (#1551)

* refactor: 💡 desktop display of complex nested secrets

A quick solution for displaying JSON secret objects in connection modal.

✅ Closes: ICU-7409

* refactor: 💡 refactor hidden-secret.js and test

Guard against null for in `typeof` return.

✅ Closes: ICU-7409

* Update ui/desktop/app/styles/app.scss

Co-authored-by: Cameron Perera <cameron.perera@hashicorp.com>

* refactor: 💡 test

Changed test to check for secret output after clicking on reveal

* refactor: 💡 fix style for hidden-secret and test

Refactor hidden-secret span styling to have content centered and
refactored testing for assert.dom instead of find

Co-authored-by: Cameron Perera <cameron.perera@hashicorp.com>

ui/desktop/app/components/hidden-secret/index.hbs

@@ -11,12 +11,12 @@
     {{t 'actions.toggle-secret'}}
   </Rose::Button>
   <Copyable
-    @text={{@secret}}
+    @text={{this.displaySecretValue}}
     @buttonText={{t 'actions.copy-to-clipboard'}}
     @acknowledgeText={{t 'states.copied'}}
   >
     {{#if this.isHidden}}
-      {{@secret}}
+      <pre>{{this.displaySecretValue}}</pre>
     {{else}}
       <span class='secret-mask'>{{this.textMask}}</span>
     {{/if}}

ui/desktop/app/components/hidden-secret/index.js

@@ -7,6 +7,14 @@ export default class HiddenSecretComponent extends Component {
 
   @tracked isHidden = false;
 
+  get displaySecretValue() {
+    if (typeof this.args.secret === 'object' && this.args.secret !== null) {
+      return JSON.stringify(this.args.secret, null, 2);
+    } else {
+      return this.args.secret;
+    }
+  }
+
   @action
   toggleSecretVisibility() {
     this.isHidden = !this.isHidden;

ui/desktop/app/styles/app.scss

@@ -467,6 +467,16 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
     width: 100%;
     justify-content: space-between;
 
+    .copyable-content {
+      display: flex;
+      align-items: center;
+
+      pre {
+        white-space: pre-wrap;
+        line-height: normal;
+      }
+    }
+
     .secret-mask {
       color: var(--ui-gray-subtler-2);
     }

ui/desktop/tests/integration/components/hidden-secret-test.js

@@ -1,23 +1,46 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
+import { render, click } from '@ember/test-helpers';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { hbs } from 'ember-cli-htmlbars';
 import { setupIntl } from 'ember-intl/test-support';
-
 module('Integration | Component | hidden-secret', function (hooks) {
   setupRenderingTest(hooks);
   setupIntl(hooks);
+  setupMirage(hooks);
+
+  // Global Secret for mocking
+  this.secret = `{
+    "secret_key": "QWERTYUIOP",
+    "secret_access_key": "QWERT.YUIOP234567890",
+    "nested_secret": {
+      "session_token": "ZXCVBNMLKJHGFDSAQWERTYUIOP0987654321",
+      "complex_nest": {
+        "hash": "qazxswedcvfrtgbnjhyujm.1234567890"
+      }
+    }
+  }`;
+
+  async function renderComponent() {
+    return render(hbs`
+      <HiddenSecret
+        @secret={{this.secret}}
+      />
+    `);
+  }
 
   test('it renders with a secret', async function (assert) {
-    assert.expect(2);
+    assert.expect(1);
-    await render(hbs`
+    await renderComponent();
-      <HiddenSecret @secret='AAaaBBccDDeeOTXzSMT1234BB_Z8JzG7JkSVxI' />
+    assert
-    `);
+      .dom('.hidden-secret > span > span')
+      .hasText('■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■');
+  });
 
-    assert.ok(find('.hidden-secret'));
+  test('it reveals secret when button is clicked', async function (assert) {
-    assert.strictEqual(
+    assert.expect(1);
-      find('.hidden-secret > span > span').textContent.trim(),
+    await renderComponent();
-      '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■'
+    await click('.hidden-secret > button');
-    );
+    assert.dom('.hidden-secret > span > span').hasText(this.secret);
   });
 });