Merge pull request #618 from hashicorp/feat-hidden-secret-component

feat: 🎸 Add hidden secret component

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

@@ -0,0 +1,10 @@
+<div class='hidden-secret'>
+  {{! TODO: The span wrap within a div because later we will add the toggle secret icon/button}}
+  <Copyable
+    @text={{@secret}}
+    @buttonText={{t 'actions.copy-to-clipboard'}}
+    @acknowledgeText={{t 'states.copied'}}
+  >
+    <span>{{this.textMask}}</span>
+  </Copyable>
+</div>

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

@@ -0,0 +1,5 @@
+import Component from '@glimmer/component';
+
+export default class HiddenSecretComponent extends Component {
+  textMask = '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■';
+}

ui/desktop/app/styles/app.scss

@@ -446,3 +446,20 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
     padding: sizing.rems(s);
   }
 }
+
+// Hidden secret component (app/components/hidden-secret)
+.hidden-secret {
+  display: flex;
+  align-items: center;
+  color: var(--ui-gray-subtler-2);
+
+  .copyable {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .rose-button-ghost {
+    color: var(--ui-gray-subtler-1);
+  }
+}

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

@@ -0,0 +1,21 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | hidden-secret', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders with a secret', async function (assert) {
+    assert.expect(2);
+    await render(hbs`
+      <HiddenSecret @secret='AAaaBBccDDeeOTXzSMT1234BB_Z8JzG7JkSVxI' />
+    `);
+
+    assert.ok(find('.hidden-secret'));
+    assert.equal(
+      find('.hidden-secret > span > span').textContent.trim(),
+      '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■'
+    );
+  });
+});