Added possibility to remove agent from UI

We are adding a possiblity to delete agent from the UI.
The functionality is available from the agents table
view under the Actions column.

Changelog: added

app/assets/javascripts/clusters_list/components/agent_actions.vue

+<script>
+import {
+  GlDropdown,
+  GlDropdownItem,
+  GlModal,
+  GlModalDirective,
+  GlSprintf,
+  GlFormGroup,
+  GlFormInput,
+} from '@gitlab/ui';
+import { s__, __, sprintf } from '~/locale';
+import { DELETE_AGENT_MODAL_ID } from '../constants';
+import deleteAgent from '../graphql/mutations/delete_agent.mutation.graphql';
+import getAgentsQuery from '../graphql/queries/get_agents.query.graphql';
+import { removeAgentFromStore } from '../graphql/cache_update';
+
+export default {
+  i18n: {
+    dropdownText: __('More actions'),
+    deleteButton: s__('ClusterAgents|Delete agent'),
+    modalTitle: __('Are you sure?'),
+    modalBody: s__(
+      'ClusterAgents|Are you sure you want to delete this agent? This action cannot be undone.',
+    ),
+    modalInputLabel: s__('ClusterAgents|To delete the agent, type %{name} to confirm:'),
+    modalAction: s__('ClusterAgents|Delete'),
+    modalCancel: __('Cancel'),
+    successMessage: s__('ClusterAgents|%{name} successfully deleted'),
+    defaultError: __('An error occurred. Please try again.'),
+  },
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    GlModal,
+    GlSprintf,
+    GlFormGroup,
+    GlFormInput,
+  },
+  directives: {
+    GlModalDirective,
+  },
+  inject: ['projectPath'],
+  props: {
+    agent: {
+      required: true,
+      type: Object,
+    },
+    defaultBranchName: {
+      default: '.noBranch',
+      required: false,
+      type: String,
+    },
+    maxAgents: {
+      default: null,
+      required: false,
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      error: null,
+      deleteConfirmText: null,
+    };
+  },
+  computed: {
+    getAgentsQueryVariables() {
+      return {
+        defaultBranchName: this.defaultBranchName,
+        first: this.maxAgents,
+        last: null,
+        projectPath: this.projectPath,
+      };
+    },
+    modalId() {
+      return sprintf(DELETE_AGENT_MODAL_ID, {
+        agentName: this.agent.name,
+      });
+    },
+    primaryModalProps() {
+      return {
+        text: this.$options.i18n.modalAction,
+        attributes: [
+          { disabled: this.loading || this.disableModalSubmit, loading: this.loading },
+          { variant: 'danger' },
+        ],
+      };
+    },
+    cancelModalProps() {
+      return {
+        text: this.$options.i18n.modalCancel,
+        attributes: [],
+      };
+    },
+    disableModalSubmit() {
+      return this.deleteConfirmText !== this.agent.name;
+    },
+  },
+  methods: {
+    async deleteAgent() {
+      this.loading = true;
+      this.error = null;
+
+      const successMessage = sprintf(this.$options.i18n.successMessage, { name: this.agent.name });
+
+      try {
+        const { errors } = await this.deleteAgentMutation();
+
+        if (errors?.length > 0) {
+          throw new Error(errors[0]);
+        }
+      } catch (error) {
+        if (error?.message) {
+          this.error = error.message;
+        } else {
+          this.error = this.$options.i18n.defaultError;
+        }
+      } finally {
+        this.loading = false;
+
+        if (!this.error) {
+          this.$toast.show(successMessage);
+        } else {
+          this.$toast.show(this.error);
+        }
+
+        this.$refs.modal.hide();
+      }
+    },
+    deleteAgentMutation() {
+      return this.$apollo
+        .mutate({
+          mutation: deleteAgent,
+          variables: {
+            input: {
+              id: this.agent.id,
+            },
+          },
+          update: (store) => {
+            const deleteClusterAgent = this.agent;
+            removeAgentFromStore(
+              store,
+              deleteClusterAgent,
+              getAgentsQuery,
+              this.getAgentsQueryVariables,
+            );
+          },
+        })
+
+        .then(({ data: { clusterAgentDelete } }) => {
+          return clusterAgentDelete;
+        });
+    },
+    hideModal() {
+      this.loading = false;
+      this.error = null;
+      this.deleteConfirmText = null;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-dropdown
+      icon="ellipsis_v"
+      right
+      :disabled="loading"
+      :text="$options.i18n.dropdownText"
+      text-sr-only
+      category="tertiary"
+      no-caret
+    >
+      <gl-dropdown-item v-gl-modal-directive="modalId">
+        {{ $options.i18n.deleteButton }}
+      </gl-dropdown-item>
+    </gl-dropdown>
+
+    <gl-modal
+      ref="modal"
+      :modal-id="modalId"
+      :title="$options.i18n.modalTitle"
+      :action-primary="primaryModalProps"
+      :action-cancel="cancelModalProps"
+      size="sm"
+      @primary="deleteAgent"
+      @hide="hideModal"
+    >
+      <p>{{ $options.i18n.modalBody }}</p>
+
+      <gl-form-group>
+        <template #label>
+          <gl-sprintf :message="$options.i18n.modalInputLabel">
+            <template #name>
+              <code>{{ agent.name }}</code>
+            </template>
+          </gl-sprintf>
+        </template>
+        <gl-form-input v-model="deleteConfirmText" @keyup.enter="deleteAgent" />
+      </gl-form-group>
+    </gl-modal>
+  </div>
+</template>

app/assets/javascripts/clusters_list/components/agent_table.vue

 <script>
-import {
-  GlLink,
-  GlModalDirective,
-  GlTable,
-  GlIcon,
-  GlSprintf,
-  GlTooltip,
-  GlPopover,
-} from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { GlLink, GlTable, GlIcon, GlSprintf, GlTooltip, GlPopover } from '@gitlab/ui';
+import { s__, __ } from '~/locale';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { INSTALL_AGENT_MODAL_ID, AGENT_STATUSES } from '../constants';
+import { AGENT_STATUSES } from '../constants';
 import { getAgentConfigPath } from '../clusters_util';
+import AgentActions from './agent_actions.vue';
 
 export default {
+  i18n: {
+    nameLabel: s__('ClusterAgents|Name'),
+    statusLabel: s__('ClusterAgents|Connection status'),
+    lastContactLabel: s__('ClusterAgents|Last contact'),
+    configurationLabel: s__('ClusterAgents|Configuration'),
+    actionsLabel: __('Actions'),
+    troubleshootingText: s__('ClusterAgents|Learn how to troubleshoot'),
+    neverConnectedText: s__('ClusterAgents|Never'),
+  },
   components: {
     GlLink,
     GlTable,
@@ -24,14 +26,10 @@ export default {
     GlTooltip,
     GlPopover,
     TimeAgoTooltip,
-  },
-  directives: {
-    GlModalDirective,
+    AgentActions,
   },
   mixins: [timeagoMixin],
-  INSTALL_AGENT_MODAL_ID,
   AGENT_STATUSES,
-
   troubleshooting_link: helpPagePath('user/clusters/agent/index', {
     anchor: 'troubleshooting',
   }),
@@ -40,6 +38,16 @@ export default {
       required: true,
       type: Array,
     },
+    defaultBranchName: {
+      default: '.noBranch',
+      required: false,
+      type: String,
+    },
+    maxAgents: {
+      default: null,
+      required: false,
+      type: Number,
+    },
   },
   computed: {
     fields() {
@@ -47,22 +55,27 @@ export default {
       return [
         {
           key: 'name',
-          label: s__('ClusterAgents|Name'),
+          label: this.$options.i18n.nameLabel,
           tdClass,
         },
         {
           key: 'status',
-          label: s__('ClusterAgents|Connection status'),
+          label: this.$options.i18n.statusLabel,
           tdClass,
         },
         {
           key: 'lastContact',
-          label: s__('ClusterAgents|Last contact'),
+          label: this.$options.i18n.lastContactLabel,
           tdClass,
         },
         {
           key: 'configuration',
-          label: s__('ClusterAgents|Configuration'),
+          label: this.$options.i18n.configurationLabel,
+          tdClass,
+        },
+        {
+          key: 'actions',
+          label: this.$options.i18n.actionsLabel,
           tdClass,
         },
       ];
@@ -118,7 +131,7 @@ export default {
         </p>
         <p class="gl-mb-0">
           <gl-link :href="$options.troubleshooting_link" target="_blank" class="gl-font-sm">
-            {{ s__('ClusterAgents|Learn how to troubleshoot') }}</gl-link
+            {{ $options.i18n.troubleshootingText }}</gl-link
           >
         </p>
       </gl-popover>
@@ -127,7 +140,7 @@ export default {
     <template #cell(lastContact)="{ item }">
       <span data-testid="cluster-agent-last-contact">
         <time-ago-tooltip v-if="item.lastContact" :time="item.lastContact" />
-        <span v-else>{{ s__('ClusterAgents|Never') }}</span>
+        <span v-else>{{ $options.i18n.neverConnectedText }}</span>
       </span>
     </template>
 
@@ -140,5 +153,13 @@ export default {
         <span v-else>{{ getAgentConfigPath(item.name) }}</span>
       </span>
     </template>
+
+    <template #cell(actions)="{ item }">
+      <agent-actions
+        :agent="item"
+        :default-branch-name="defaultBranchName"
+        :max-agents="maxAgents"
+      />
+    </template>
   </gl-table>
 </template>

app/assets/javascripts/clusters_list/components/agents.vue

@@ -151,7 +151,11 @@ export default {
 
   <section v-else-if="agentList">
     <div v-if="agentList.length">
-      <agent-table :agents="agentList" />
+      <agent-table
+        :agents="agentList"
+        :default-branch-name="defaultBranchName"
+        :max-agents="cursor.first"
+      />
 
       <div v-if="showPagination" class="gl-display-flex gl-justify-content-center gl-mt-5">
         <gl-keyset-pagination v-bind="agentPageInfo" @prev="prevPage" @next="nextPage" />

app/assets/javascripts/clusters_list/constants.js

@@ -242,3 +242,5 @@ export const EVENT_ACTIONS_CHANGE = 'change_tab';
 
 export const MODAL_TYPE_EMPTY = 'empty_state';
 export const MODAL_TYPE_REGISTER = 'agent_registration';
+
+export const DELETE_AGENT_MODAL_ID = 'delete-agent-modal-%{agentName}';

app/assets/javascripts/clusters_list/graphql/cache_update.js

@@ -63,3 +63,25 @@ export function addAgentConfigToStore(
     });
   }
 }
+
+export function removeAgentFromStore(store, deleteClusterAgent, query, variables) {
+  if (!hasErrors(deleteClusterAgent)) {
+    const sourceData = store.readQuery({
+      query,
+      variables,
+    });
+
+    const data = produce(sourceData, (draftData) => {
+      draftData.project.clusterAgents.nodes = draftData.project.clusterAgents.nodes.filter(
+        ({ id }) => id !== deleteClusterAgent.id,
+      );
+      draftData.project.clusterAgents.count -= 1;
+    });
+
+    store.writeQuery({
+      query,
+      variables,
+      data,
+    });
+  }
+}

app/assets/javascripts/clusters_list/graphql/mutations/delete_agent.mutation.graphql

+mutation deleteClusterAgent($input: ClusterAgentDeleteInput!) {
+  clusterAgentDelete(input: $input) {
+    errors
+  }
+}

app/assets/javascripts/clusters_list/index.js

+import { GlToast } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import loadClusters from './load_clusters';
 import loadMainView from './load_main_view';
 
+Vue.use(GlToast);
 Vue.use(VueApollo);
 
 export default () => {

doc/user/clusters/agent/index.md

@@ -136,7 +136,13 @@ with the following differences:
 
 ## Remove an agent
 
-1. Get the `<cluster-agent-id>` and the `<cluster-agent-token-id>` from a query in the interactive GraphQL explorer.
+1. From your project's sidebar, select **Infrastructure > Kubernetes clusters**.
+1. Select your agent from the table, and then in the **Actions** column, click the vertical ellipsis 
+(**{ellipsis_v}**) button and select **Delete agent**. 
+
+### Remove an agent with the GitLab GraphQL API
+
+1. Get the `<cluster-agent-token-id>` from a query in the interactive GraphQL explorer.
 For GitLab.com, go to <https://gitlab.com/-/graphql-explorer> to open GraphQL Explorer.
 For self-managed GitLab instances, go to `https://gitlab.example.com/-/graphql-explorer`, replacing `gitlab.example.com` with your own instance's URL.
 
@@ -157,7 +163,7 @@ For self-managed GitLab instances, go to `https://gitlab.example.com/-/graphql-e
    }
    ```
 
-1. Remove an Agent record with GraphQL by deleting the `clusterAgent` and the `clusterAgentToken`.
+1. Remove an agent record with GraphQL by deleting the `clusterAgentToken`.
 
    ```graphql
    mutation deleteAgent {

locale/gitlab.pot

@@ -7500,6 +7500,9 @@ msgstr ""
 msgid "Cluster type must be specificed for Stages::ClusterEndpointInserter"
 msgstr ""
 
+msgid "ClusterAgents|%{name} successfully deleted"
+msgstr ""
+
 msgid "ClusterAgents|%{number} of %{total} agents"
 msgstr ""
 
@@ -7557,6 +7560,9 @@ msgstr ""
 msgid "ClusterAgents|An unknown error occurred. Please try again."
 msgstr ""
 
+msgid "ClusterAgents|Are you sure you want to delete this agent? This action cannot be undone."
+msgstr ""
+
 msgid "ClusterAgents|Certificate"
 msgstr ""
 
@@ -7602,6 +7608,12 @@ msgstr ""
 msgid "ClusterAgents|Date created"
 msgstr ""
 
+msgid "ClusterAgents|Delete"
+msgstr ""
+
+msgid "ClusterAgents|Delete agent"
+msgstr ""
+
 msgid "ClusterAgents|Deprecated"
 msgstr ""
 
@@ -7715,6 +7727,9 @@ msgstr[1] ""
 msgid "ClusterAgents|This agent has no tokens"
 msgstr ""
 
+msgid "ClusterAgents|To delete the agent, type %{name} to confirm:"
+msgstr ""
+
 msgid "ClusterAgents|To install a new agent, first add the agent's configuration file to this repository. %{linkStart}What's the agent's configuration file?%{linkEnd}"
 msgstr ""
 

spec/frontend/clusters_list/components/agent_actions_spec.js

+import { GlDropdownItem, GlModal, GlFormInput } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import getAgentsQuery from '~/clusters_list/graphql/queries/get_agents.query.graphql';
+import deleteAgentMutation from '~/clusters_list/graphql/mutations/delete_agent.mutation.graphql';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import AgentActions from '~/clusters_list/components/agent_actions.vue';
+import { MAX_LIST_COUNT } from '~/clusters_list/constants';
+import { getAgentResponse, mockDeleteResponse, mockErrorDeleteResponse } from '../mocks/apollo';
+
+Vue.use(VueApollo);
+
+const projectPath = 'path/to/project';
+const defaultBranchName = 'default';
+const maxAgents = MAX_LIST_COUNT;
+const agent = {
+  id: 'agent-id',
+  name: 'agent-name',
+  webPath: 'agent-webPath',
+};
+
+describe('AgentActions', () => {
+  let wrapper;
+  let toast;
+  let apolloProvider;
+  let deleteResponse;
+
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findDeleteBtn = () => wrapper.findComponent(GlDropdownItem);
+  const findInput = () => wrapper.findComponent(GlFormInput);
+  const findPrimaryAction = () => findModal().props('actionPrimary');
+  const findPrimaryActionAttributes = (attr) => findPrimaryAction().attributes[0][attr];
+
+  const createMockApolloProvider = ({ mutationResponse }) => {
+    deleteResponse = jest.fn().mockResolvedValue(mutationResponse);
+
+    return createMockApollo([[deleteAgentMutation, deleteResponse]]);
+  };
+
+  const writeQuery = () => {
+    apolloProvider.clients.defaultClient.cache.writeQuery({
+      query: getAgentsQuery,
+      variables: {
+        projectPath,
+        defaultBranchName,
+        first: maxAgents,
+        last: null,
+      },
+      data: getAgentResponse.data,
+    });
+  };
+
+  const createWrapper = ({ mutationResponse = mockDeleteResponse } = {}) => {
+    apolloProvider = createMockApolloProvider({ mutationResponse });
+    const provide = {
+      projectPath,
+    };
+    const propsData = {
+      defaultBranchName,
+      maxAgents,
+      agent,
+    };
+
+    toast = jest.fn();
+
+    wrapper = shallowMountExtended(AgentActions, {
+      apolloProvider,
+      provide,
+      propsData,
+      mocks: { $toast: { show: toast } },
+      stubs: { GlModal },
+    });
+    wrapper.vm.$refs.modal.hide = jest.fn();
+
+    writeQuery();
+    return wrapper.vm.$nextTick();
+  };
+
+  beforeEach(() => {
+    return createWrapper({});
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    apolloProvider = null;
+    deleteResponse = null;
+    toast = null;
+  });
+
+  describe('delete agent action', () => {
+    it('displays a delete button', () => {
+      expect(findDeleteBtn().text()).toBe('Delete agent');
+    });
+
+    describe('when clicking the delete button', () => {
+      beforeEach(() => {
+        findDeleteBtn().vm.$emit('click');
+      });
+
+      it('displays a delete confirmation modal', () => {
+        expect(findModal().isVisible()).toBe(true);
+      });
+    });
+
+    describe('when the input with agent name is missing', () => {
+      beforeEach(() => {
+        findDeleteBtn().vm.$emit('click');
+      });
+
+      it('disables the modal primary button', () => {
+        expect(findPrimaryActionAttributes('disabled')).toBe(true);
+      });
+    });
+
+    describe('when submitting the delete modal and the input with agent name is correct ', () => {
+      beforeEach(() => {
+        findDeleteBtn().vm.$emit('click');
+        findInput().vm.$emit('input', agent.name);
+        findModal().vm.$emit('primary');
+
+        return wrapper.vm.$nextTick();
+      });
+
+      it('calls the delete mutation', () => {
+        expect(deleteResponse).toHaveBeenCalledWith({ input: { id: agent.id } });
+      });
+
+      it('calls the toast action', () => {
+        expect(toast).toHaveBeenCalledWith(`${agent.name} successfully deleted`);
+      });
+    });
+  });
+
+  describe('when getting an error deleting agent', () => {
+    beforeEach(async () => {
+      await createWrapper({ mutationResponse: mockErrorDeleteResponse });
+
+      findDeleteBtn().vm.$emit('click');
+      findModal().vm.$emit('primary');
+    });
+
+    it('displays the error message', () => {
+      expect(toast).toHaveBeenCalledWith('could not delete agent');
+    });
+  });
+});

spec/frontend/clusters_list/components/agent_table_spec.js

 import { GlLink, GlIcon } from '@gitlab/ui';
 import AgentTable from '~/clusters_list/components/agent_table.vue';
+import AgentActions from '~/clusters_list/components/agent_actions.vue';
 import { ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { stubComponent } from 'helpers/stub_component';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 
 const connectedTimeNow = new Date();
 const connectedTimeInactive = new Date(connectedTimeNow.getTime() - ACTIVE_CONNECTION_TIME);
 
+const provideData = {
+  projectPath: 'path/to/project',
+};
 const propsData = {
   agents: [
     {
@@ -48,6 +53,10 @@ const propsData = {
   ],
 };
 
+const AgentActionsStub = stubComponent(AgentActions, {
+  template: `<div></div>`,
+});
+
 describe('AgentTable', () => {
   let wrapper;
 
@@ -57,15 +66,21 @@ describe('AgentTable', () => {
   const findLastContactText = (at) => wrapper.findAllByTestId('cluster-agent-last-contact').at(at);
   const findConfiguration = (at) =>
     wrapper.findAllByTestId('cluster-agent-configuration-link').at(at);
+  const findAgentActions = () => wrapper.findAllComponents(AgentActions);
 
   beforeEach(() => {
-    wrapper = mountExtended(AgentTable, { propsData });
+    wrapper = mountExtended(AgentTable, {
+      propsData,
+      provide: provideData,
+      stubs: {
+        AgentActions: AgentActionsStub,
+      },
+    });
   });
 
   afterEach(() => {
     if (wrapper) {
       wrapper.destroy();
-      wrapper = null;
     }
   });
 
@@ -108,5 +123,9 @@ describe('AgentTable', () => {
       expect(findLink.exists()).toBe(hasLink);
       expect(findConfiguration(lineNumber).text()).toBe(agentPath);
     });
+
+    it('displays actions menu for each agent', () => {
+      expect(findAgentActions()).toHaveLength(3);
+    });
   });
 });

spec/frontend/clusters_list/mocks/apollo.js

@@ -75,3 +75,15 @@ export const getAgentResponse = {
     },
   },
 };
+
+export const mockDeleteResponse = {
+  data: { clusterAgentDelete: { errors: [] } },
+};
+
+export const mockErrorDeleteResponse = {
+  data: {
+    clusterAgentDelete: {
+      errors: ['could not delete agent'],
+    },
+  },
+};