From 2ee501be8d5314252f86345a8ebaf87ffddd887f Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Fri, 30 Jul 2021 13:52:37 -0400
Subject: [PATCH] ui: Add copy button for Secret ID in Tokens list page
 (#10735)

---
 .changelog/10735.txt                                     | 3 +++
 .../consul-ui/app/components/composite-row/layout.scss   | 5 ++---
 .../consul-ui/app/components/consul/token/list/index.hbs | 9 ++++++++-
 ui/packages/consul-ui/app/models/token.js                | 5 +++++
 ui/packages/consul-ui/mock-api/v1/acl/tokens             | 5 +++--
 .../consul-ui/translations/components/consul/en-us.yaml  | 1 +
 6 files changed, 22 insertions(+), 6 deletions(-)
 create mode 100644 .changelog/10735.txt

diff --git a/.changelog/10735.txt b/.changelog/10735.txt
new file mode 100644
index 0000000000..5a41fd263a
--- /dev/null
+++ b/.changelog/10735.txt
@@ -0,0 +1,3 @@
+```release-note:feature
+ui: Adds a copy button to each composite row in tokens list page, if Secret ID returns an actual ID
+```
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/components/composite-row/layout.scss b/ui/packages/consul-ui/app/components/composite-row/layout.scss
index 726ea8af6e..fd3b465a5f 100644
--- a/ui/packages/consul-ui/app/components/composite-row/layout.scss
+++ b/ui/packages/consul-ui/app/components/composite-row/layout.scss
@@ -1,6 +1,6 @@
 %composite-row {
   display: grid;
-  grid-template-columns: auto 50px;
+  grid-template-columns: 1fr auto;
   grid-template-rows: 50% 50%;
 
   grid-template-areas:
@@ -25,8 +25,7 @@
 }
 %composite-row-actions {
   grid-area: actions;
-  justify-self: center;
-  align-self: center;
+  display: inline-flex;
 }
 
 %composite-row-header:nth-last-child(2) {
diff --git a/ui/packages/consul-ui/app/components/consul/token/list/index.hbs b/ui/packages/consul-ui/app/components/consul/token/list/index.hbs
index e0e7e13ae8..e7b71e4bb8 100644
--- a/ui/packages/consul-ui/app/components/consul/token/list/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/token/list/index.hbs
@@ -30,7 +30,14 @@ as |item|>
         </dl>
     </BlockSlot>
     <BlockSlot @name="actions" as |Actions|>
-
+    {{#if item.hasSecretID}}
+      <CopyButton
+        @value={{item.SecretID}}
+        @name={{t "components.consul.token.secretID"}}
+      >
+        {{t "components.consul.token.secretID"}}
+      </CopyButton>
+    {{/if}}
       <Actions as |Action|>
         <Action data-test-edit-action @href={{href-to 'dc.acls.tokens.edit' item.AccessorID}}>
           <BlockSlot @name="label">
diff --git a/ui/packages/consul-ui/app/models/token.js b/ui/packages/consul-ui/app/models/token.js
index a37446bc09..9e19a38725 100644
--- a/ui/packages/consul-ui/app/models/token.js
+++ b/ui/packages/consul-ui/app/models/token.js
@@ -38,4 +38,9 @@ export default class Token extends Model {
   get isGlobalManagement() {
     return (this.Policies || []).find(item => item.ID === MANAGEMENT_ID);
   }
+
+  @computed('SecretID')
+  get hasSecretID() {
+    return this.SecretID !== '' && this.SecretID !== '<hidden>';
+  }
 }
diff --git a/ui/packages/consul-ui/mock-api/v1/acl/tokens b/ui/packages/consul-ui/mock-api/v1/acl/tokens
index a76d58c497..384b914b8e 100644
--- a/ui/packages/consul-ui/mock-api/v1/acl/tokens
+++ b/ui/packages/consul-ui/mock-api/v1/acl/tokens
@@ -15,6 +15,7 @@ ${ env('CONSUL_ACLS_LEGACY', false) ? `rpc error making call: rpc: can't find me
         return `
           {
             "AccessorID": "${i === 1 ? '00000000-0000-0000-0000-000000000002' : fake.random.uuid()}",
+            "SecretID": "${fake.helpers.randomize([fake.random.uuid(), '<hidden>', ''])}",
             "Name": "token-${i}",
 ${typeof location.search.ns !== 'undefined' ? `
             "Namespace": "${location.search.ns}",
@@ -22,7 +23,7 @@ ${typeof location.search.ns !== 'undefined' ? `
             "IDPName": "${fake.hacker.noun()}",
             "Policies": [
               ${
-                range(env('CONSUL_POLICY_COUNT', 10)).map(
+                range(env('CONSUL_POLICY_COUNT', 3)).map(
                   function(item, j) {
                     if(i == 1 && j == 0) {
                       return `
@@ -44,7 +45,7 @@ ${typeof location.search.ns !== 'undefined' ? `
             ],
             "Roles": [
               ${
-                range(env('CONSUL_ROLE_COUNT', 10)).map(
+                range(env('CONSUL_ROLE_COUNT', 3)).map(
                   function(item, j) {
                     return `
                       {
diff --git a/ui/packages/consul-ui/translations/components/consul/en-us.yaml b/ui/packages/consul-ui/translations/components/consul/en-us.yaml
index 62e8497c43..a603d989ab 100644
--- a/ui/packages/consul-ui/translations/components/consul/en-us.yaml
+++ b/ui/packages/consul-ui/translations/components/consul/en-us.yaml
@@ -52,6 +52,7 @@ token:
         global-management: Global Management
         global: Global Scope
         local: Local Scope
+  secretID: Secret ID
 policy:
   search-bar:
     kind: