Added last used to cluster token table

Added Last used to token_table vue
Update associated tests and translations

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

@@ -18,8 +18,10 @@ export default {
     createToken: s__('ClusterAgents|You will need to create a token to connect to your agent'),
     dateCreated: s__('ClusterAgents|Date created'),
     description: s__('ClusterAgents|Description'),
+    lastUsed: s__('ClusterAgents|Last used'),
     learnMore: s__('ClusterAgents|Learn how to create an agent access token'),
     name: s__('ClusterAgents|Name'),
+    neverUsed: s__('ClusterAgents|Never'),
     noTokens: s__('ClusterAgents|This agent has no tokens'),
     unknownUser: s__('ClusterAgents|Unknown user'),
   },
@@ -37,6 +39,11 @@ export default {
           label: this.$options.i18n.name,
           tdAttr: { 'data-testid': 'agent-token-name' },
         },
+        {
+          key: 'lastUsed',
+          label: this.$options.i18n.lastUsed,
+          tdAttr: { 'data-testid': 'agent-token-used' },
+        },
         {
           key: 'createdAt',
           label: this.$options.i18n.dateCreated,
@@ -77,6 +84,11 @@ export default {
     </div>
 
     <gl-table :items="tokens" :fields="fields" fixed stacked="md">
+      <template #cell(lastUsed)="{ item }">
+        <time-ago-tooltip v-if="item.lastUsedAt" :time="item.lastUsedAt" />
+        <span v-else>{{ $options.i18n.neverUsed }}</span>
+      </template>
+
       <template #cell(createdAt)="{ item }">
         <time-ago-tooltip :time="item.createdAt" />
       </template>

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

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

ee/changelogs/unreleased/322128-token-used-table.yml

+---
+title: Add last used to cluster token table
+merge_request: 57141
+author:
+type: changed

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

@@ -2,6 +2,7 @@ import { GlEmptyState, GlLink, GlTooltip, GlTruncate } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import TokenTable from 'ee/clusters/agents/components/token_table.vue';
 import { useFakeDate } from 'helpers/fake_date';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 describe('ClusterAgentTokenTable', () => {
   let wrapper;
@@ -15,6 +16,7 @@ describe('ClusterAgentTokenTable', () => {
       createdByUser: {
         name: 'user-1',
       },
+      lastUsedAt: '2021-02-13T00:00:00Z',
       name: 'token-1',
     },
     {
@@ -22,13 +24,13 @@ describe('ClusterAgentTokenTable', () => {
       createdAt: '2021-02-10T00:00:00Z',
       description: null,
       createdByUser: null,
+      lastUsedAt: null,
       name: 'token-2',
     },
   ];
 
   const createComponent = (tokens) => {
-    wrapper = mount(TokenTable, { propsData: { tokens } });
-    return wrapper.vm.$nextTick();
+    wrapper = extendedWrapper(mount(TokenTable, { propsData: { tokens } }));
   };
 
   const findEmptyState = () => wrapper.find(GlEmptyState);
@@ -60,6 +62,20 @@ describe('ClusterAgentTokenTable', () => {
     expect(token.text()).toBe(name);
   });
 
+  it.each`
+    lastUsedText    | lineNumber
+    ${'2 days ago'} | ${0}
+    ${'Never'}      | ${1}
+  `(
+    'displays last used information "$lastUsedText" for line "$lineNumber"',
+    ({ lastUsedText, lineNumber }) => {
+      const tokens = wrapper.findAllByTestId('agent-token-used');
+      const token = tokens.at(lineNumber);
+
+      expect(token.text()).toBe(lastUsedText);
+    },
+  );
+
   it.each`
     createdText     | lineNumber
     ${'2 days ago'} | ${0}

locale/gitlab.pot

@@ -6461,6 +6461,9 @@ msgstr ""
 msgid "ClusterAgents|Integrate with the GitLab Agent"
 msgstr ""
 
+msgid "ClusterAgents|Last used"
+msgstr ""
+
 msgid "ClusterAgents|Learn how to create an agent access token"
 msgstr ""
 
@@ -6470,6 +6473,9 @@ msgstr ""
 msgid "ClusterAgents|Name"
 msgstr ""
 
+msgid "ClusterAgents|Never"
+msgstr ""
+
 msgid "ClusterAgents|The GitLab Agent also requires %{linkStart}enabling the Agent Server%{linkEnd}"
 msgstr ""