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

.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
+```

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;
+  display: inline-flex;
-  align-self: center;
 }
 
 %composite-row-header:nth-last-child(2) {

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">

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>';
+  }
 }

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 `
                       {

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: