ui: Add copy button for Secret ID in Tokens list page (#10735)

hashicorp · Jul 30, 2021 · 2ee501b · 2ee501b
1 parent 97fed47
commit 2ee501b
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 6 deletions.
diff --git a/.changelog/10735.txt 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
+```
diff --git 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
@@ -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
@@ -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
@@ -15,14 +15,15 @@ ${ 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}",
 ` : ``}
             "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
@@ -52,6 +52,7 @@ token:
         global-management: Global Management
         global: Global Scope
         local: Local Scope
+  secretID: Secret ID
 policy:
   search-bar:
     kind: