From b0d999cf3cffbf3db09f7add83bd7acba8b1b470 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <me@calcaide.com>
Date: Wed, 7 Jul 2021 12:39:44 -0700
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20toggle=20secre?=
 =?UTF-8?q?t=20feature?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add toggle secret feature to the hidde secret component
---
 ui/desktop/app/components/hidden-secret/index.hbs   | 13 ++++++++++++-
 ui/desktop/app/components/hidden-secret/index.js    |  9 +++++++++
 ui/desktop/app/styles/app.scss                      |  4 ++++
 .../app/templates/scopes/scope/projects/targets.hbs |  4 ++--
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/ui/desktop/app/components/hidden-secret/index.hbs b/ui/desktop/app/components/hidden-secret/index.hbs
index a28042fd6..aacb6d165 100644
--- a/ui/desktop/app/components/hidden-secret/index.hbs
+++ b/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>
\ No newline at end of file
diff --git a/ui/desktop/app/components/hidden-secret/index.js b/ui/desktop/app/components/hidden-secret/index.js
index f5b443ff2..6894d79d1 100644
--- a/ui/desktop/app/components/hidden-secret/index.js
+++ b/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;
+  }
 }
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index 6bf7c387e..ad090994c 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/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%;
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
index 1f0b434ef..3ec6abb3b 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
+++ b/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>

From 580a2f41595f56e3254be6f55ef771ff9bffb45e Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <me@calcaide.com>
Date: Wed, 7 Jul 2021 13:09:47 -0700
Subject: [PATCH 2/3] Add lint changes

---
 ui/desktop/app/templates/scopes/scope/projects/targets.hbs | 4 +++-
 1 file changed, 3 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 3ec6abb3b..d15907de9 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
@@ -102,7 +102,9 @@
                         <table.body as |body|>
                           {{#each credential.secrets as |secret|}}
                             <body.row as |row|>
-                              <row.headerCell @shrink={{true}}>{{secret.key}}</row.headerCell>
+                              <row.headerCell
+                                @shrink={{true}}
+                              >{{secret.key}}</row.headerCell>
                               <row.cell colspan='2'>
                                 <HiddenSecret @secret={{secret.value}} />
                               </row.cell>

From 9bcb402fa2e34b4d9ce3703b81ba0cea669e0664 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <me@calcaide.com>
Date: Mon, 12 Jul 2021 09:46:56 -0700
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Refactor=20details?=
 =?UTF-8?q?=20of=20the=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Delete unnecessary <span>. Make icon smaller and aligned. Fix linting
issues.
---
 ui/admin/app/styles/app.scss                     |  2 ++
 .../app/components/hidden-secret/index.hbs       | 16 +++++++---------
 ui/desktop/app/components/hidden-secret/index.js |  4 ++--
 ui/desktop/app/styles/app.scss                   |  1 +
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index d0b02c532..45d9b4bdc 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -95,12 +95,14 @@
   p {
     margin-bottom: 0;
   }
+
   .rose-table-header-cell {
     p {
       color: var(--ui-gray-subtler-1);
       font-weight: normal;
     }
   }
+
   .rose-form-checkbox {
     margin-bottom: 0;
 
diff --git a/ui/desktop/app/components/hidden-secret/index.hbs b/ui/desktop/app/components/hidden-secret/index.hbs
index aacb6d165..8b5cc1cac 100644
--- a/ui/desktop/app/components/hidden-secret/index.hbs
+++ b/ui/desktop/app/components/hidden-secret/index.hbs
@@ -1,7 +1,7 @@
 <div class='hidden-secret'>
   <Rose::Icon
-    @name={{if this.secretVisible 'visibility-show' 'visibility-hide'}}
-    @size='large'
+    @name={{if this.isHidden 'visibility-show' 'visibility-hide'}}
+    @size='medium'
     {{on 'click' this.toggleSecretVisibility}}
   />
   <Copyable
@@ -9,12 +9,10 @@
     @buttonText={{t 'actions.copy-to-clipboard'}}
     @acknowledgeText={{t 'states.copied'}}
   >
-    <span>
-      {{#if this.secretVisible}}
-        {{@secret}}
-      {{else}}
-        {{this.textMask}}
-      {{/if}}
-    </span>
+    {{#if this.isHidden}}
+      {{@secret}}
+    {{else}}
+      {{this.textMask}}
+    {{/if}}
   </Copyable>
 </div>
\ No newline at end of file
diff --git a/ui/desktop/app/components/hidden-secret/index.js b/ui/desktop/app/components/hidden-secret/index.js
index 6894d79d1..2541c81fb 100644
--- a/ui/desktop/app/components/hidden-secret/index.js
+++ b/ui/desktop/app/components/hidden-secret/index.js
@@ -5,10 +5,10 @@ import { tracked } from '@glimmer/tracking';
 export default class HiddenSecretComponent extends Component {
   textMask = '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■';
 
-  @tracked secretVisible = false;
+  @tracked isHidden = false;
 
   @action
   toggleSecretVisibility() {
-    this.secretVisible = !this.secretVisible;
+    this.isHidden = !this.isHidden;
   }
 }
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index ad090994c..f65623c56 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -481,6 +481,7 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
   color: var(--ui-gray-subtler-2);
 
   .rose-icon {
+    margin-top: sizing.rems(xxxs);
     margin-right: sizing.rems(s);
   }