feat: 🎸 Add toggle secret feature

Add toggle secret feature to the hidde secret component

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

@@ -1,9 +1,20 @@
 <div class='hidden-secret'>
+  <Rose::Icon
+    @name={{if this.secretVisible 'visibility-show' 'visibility-hide'}}
+    @size='large'
+    {{on 'click' this.toggleSecretVisibility}}
+  />
   <Copyable
     @text={{@secret}}
     @buttonText={{t 'actions.copy-to-clipboard'}}
     @acknowledgeText={{t 'states.copied'}}
   >
-    <span>{{this.textMask}}</span>
+    <span>
+      {{#if this.secretVisible}}
+        {{@secret}}
+      {{else}}
+        {{this.textMask}}
+      {{/if}}
+    </span>
   </Copyable>
 </div>

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

@@ -1,5 +1,14 @@
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 export default class HiddenSecretComponent extends Component {
   textMask = '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■';
+
+  @tracked secretVisible = false;
+
+  @action
+  toggleSecretVisibility() {
+    this.secretVisible = !this.secretVisible;
+  }
 }

ui/desktop/app/styles/app.scss

@@ -480,6 +480,10 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
   align-items: center;
   color: var(--ui-gray-subtler-2);
 
+  .rose-icon {
+    margin-right: sizing.rems(s);
+  }
+
   .copyable {
     display: flex;
     width: 100%;

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

@@ -91,7 +91,7 @@
                       <Rose::Table @style='condensed' as |table|>
                         <table.header as |header|>
                           <header.row as |row|>
-                            <row.headerCell>{{t
+                            <row.headerCell @shrink={{true}}>{{t
                                 'form.key.label'
                               }}</row.headerCell>
                             <row.headerCell colspan='2'>{{t
@@ -102,7 +102,7 @@
                         <table.body as |body|>
                           {{#each credential.secrets as |secret|}}
                             <body.row as |row|>
-                              <row.headerCell>{{secret.key}}</row.headerCell>
+                              <row.headerCell @shrink={{true}}>{{secret.key}}</row.headerCell>
                               <row.cell colspan='2'>
                                 <HiddenSecret @secret={{secret.value}} />
                               </row.cell>