Add name to agent token table

ee/app/assets/javascripts/clusters/agents/components/token_table.vue

@@ -19,6 +19,7 @@ export default {
     dateCreated: s__('ClusterAgents|Date created'),
     description: s__('ClusterAgents|Description'),
     learnMore: s__('ClusterAgents|Learn how to create an agent access token'),
+    name: s__('ClusterAgents|Name'),
     noTokens: s__('ClusterAgents|This agent has no tokens'),
     unknownUser: s__('ClusterAgents|Unknown user'),
   },
@@ -31,6 +32,11 @@ export default {
   computed: {
     fields() {
       return [
+        {
+          key: 'name',
+          label: this.$options.i18n.name,
+          tdAttr: { 'data-testid': 'agent-token-name' },
+        },
         {
           key: 'createdAt',
           label: this.$options.i18n.dateCreated,

ee/app/assets/javascripts/clusters/agents/graphql/fragments/cluster_agent_token.fragment.graphql

@@ -2,6 +2,7 @@ fragment Token on ClusterAgentToken {
   id
   createdAt
   description
+  name
 
   createdByUser {
     name

ee/changelogs/unreleased/emilyring-add-name-to-token-details.yml

+---
+title: Add name to agent token table
+merge_request: 55503
+author:
+type: changed

ee/spec/frontend/clusters/agents/components/show_spec.js

@@ -27,6 +27,7 @@ describe('ClusterAgentShow', () => {
     createdByUser: {
       name: 'user-1',
     },
+    name: 'token-1',
     tokens: {
       count: 1,
       nodes: [],

ee/spec/frontend/clusters/agents/components/token_table_spec.js

@@ -15,12 +15,14 @@ describe('ClusterAgentTokenTable', () => {
       createdByUser: {
         name: 'user-1',
       },
+      name: 'token-1',
     },
     {
       id: '2',
       createdAt: '2021-02-10T00:00:00Z',
       description: null,
       createdByUser: null,
+      name: 'token-2',
     },
   ];
 
@@ -47,6 +49,17 @@ describe('ClusterAgentTokenTable', () => {
     expect(learnMoreLink.text()).toBe(TokenTable.i18n.learnMore);
   });
 
+  it.each`
+    name         | lineNumber
+    ${'token-1'} | ${0}
+    ${'token-2'} | ${1}
+  `('displays token name "$name" for line "$lineNumber"', ({ name, lineNumber }) => {
+    const tokens = wrapper.findAll('[data-testid="agent-token-name"]');
+    const token = tokens.at(lineNumber);
+
+    expect(token.text()).toBe(name);
+  });
+
   it.each`
     createdText     | lineNumber
     ${'2 days ago'} | ${0}