Exclude revoked tokens from agent tokens list

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/78420

app/assets/javascripts/clusters/agents/components/show.vue

@@ -10,7 +10,7 @@ import {
 } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import { MAX_LIST_COUNT } from '../constants';
+import { MAX_LIST_COUNT, TOKEN_STATUS_ACTIVE } from '../constants';
 import getClusterAgentQuery from '../graphql/queries/get_cluster_agent.query.graphql';
 import TokenTable from './token_table.vue';
 import ActivityEvents from './activity_events_list.vue';
@@ -30,6 +30,7 @@ export default {
         return {
           agentName: this.agentName,
           projectPath: this.projectPath,
+          tokenStatus: TOKEN_STATUS_ACTIVE,
           ...this.cursor,
         };
       },

app/assets/javascripts/clusters/agents/constants.js

@@ -36,3 +36,4 @@ export const EVENT_DETAILS = {
 };
 
 export const DEFAULT_ICON = 'token';
+export const TOKEN_STATUS_ACTIVE = 'ACTIVE';

app/assets/javascripts/clusters/agents/graphql/queries/get_cluster_agent.query.graphql

@@ -4,6 +4,7 @@
 query getClusterAgent(
   $projectPath: ID!
   $agentName: String!
+  $tokenStatus: AgentTokenStatus!
   $first: Int
   $last: Int
   $afterToken: String
@@ -20,7 +21,13 @@ query getClusterAgent(
         name
       }
 
-      tokens(first: $first, last: $last, before: $beforeToken, after: $afterToken) {
+      tokens(
+        status: $tokenStatus
+        first: $first
+        last: $last
+        before: $beforeToken
+        after: $afterToken
+      ) {
         count
 
         nodes {

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

@@ -11,12 +11,14 @@ import { useFakeDate } from 'helpers/fake_date';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import { MAX_LIST_COUNT, TOKEN_STATUS_ACTIVE } from '~/clusters/agents/constants';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
 describe('ClusterAgentShow', () => {
   let wrapper;
+  let agentQueryResponse;
   useFakeDate([2021, 2, 15]);
 
   const provide = {
@@ -40,7 +42,7 @@ describe('ClusterAgentShow', () => {
   };
 
   const createWrapper = ({ clusterAgent, queryResponse = null }) => {
-    const agentQueryResponse =
+    agentQueryResponse =
       queryResponse ||
       jest.fn().mockResolvedValue({ data: { project: { id: 'project-1', clusterAgent } } });
     const apolloProvider = createMockApollo([[getAgentQuery, agentQueryResponse]]);
@@ -84,6 +86,18 @@ describe('ClusterAgentShow', () => {
       return createWrapper({ clusterAgent: defaultClusterAgent });
     });
 
+    it('sends expected params', () => {
+      const variables = {
+        agentName: provide.agentName,
+        projectPath: provide.projectPath,
+        tokenStatus: TOKEN_STATUS_ACTIVE,
+        first: MAX_LIST_COUNT,
+        last: null,
+      };
+
+      expect(agentQueryResponse).toHaveBeenCalledWith(variables);
+    });
+
     it('displays the agent name', () => {
       expect(wrapper.text()).toContain(provide.agentName);
     });