Added suggested changes after FE and TW reviews

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

@@ -16,11 +16,11 @@ import { removeAgentFromStore } from '../graphql/cache_update';
 
 export default {
   i18n: {
-    dropdownText: __('More actions'),
+    dropdownText: __('More options'),
     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.',
+      'ClusterAgents|Are you sure you want to delete this agent? You cannot undo this.',
     ),
     modalInputLabel: s__('ClusterAgents|To delete the agent, type %{name} to confirm:'),
     modalAction: s__('ClusterAgents|Delete'),
@@ -44,6 +44,7 @@ export default {
     agent: {
       required: true,
       type: Object,
+      validator: (value) => ['id', 'name'].every((prop) => value[prop]),
     },
     defaultBranchName: {
       default: '.noBranch',
@@ -113,20 +114,12 @@ export default {
           throw new Error(errors[0]);
         }
       } catch (error) {
-        if (error?.message) {
-          this.error = error.message;
-        } else {
-          this.error = this.$options.i18n.defaultError;
-        }
+        this.error = error?.message || this.$options.i18n.defaultError;
       } finally {
         this.loading = false;
         const successMessage = sprintf(this.$options.i18n.successMessage, { name: this.agentName });
 
-        if (!this.error) {
-          this.$toast.show(successMessage);
-        } else {
-          this.$toast.show(this.error);
-        }
+        this.$toast.show(this.error || successMessage);
 
         this.$refs.modal.hide();
       }

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

@@ -6,7 +6,7 @@ import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { AGENT_STATUSES } from '../constants';
 import { getAgentConfigPath } from '../clusters_util';
-import AgentActions from './agent_actions.vue';
+import AgentOptions from './agent_options.vue';
 
 export default {
   i18n: {
@@ -14,7 +14,7 @@ export default {
     statusLabel: s__('ClusterAgents|Connection status'),
     lastContactLabel: s__('ClusterAgents|Last contact'),
     configurationLabel: s__('ClusterAgents|Configuration'),
-    actionsLabel: __('Actions'),
+    optionsLabel: __('Options'),
     troubleshootingText: s__('ClusterAgents|Learn how to troubleshoot'),
     neverConnectedText: s__('ClusterAgents|Never'),
   },
@@ -26,7 +26,7 @@ export default {
     GlTooltip,
     GlPopover,
     TimeAgoTooltip,
-    AgentActions,
+    AgentOptions,
   },
   mixins: [timeagoMixin],
   AGENT_STATUSES,
@@ -74,8 +74,8 @@ export default {
           tdClass,
         },
         {
-          key: 'actions',
-          label: this.$options.i18n.actionsLabel,
+          key: 'options',
+          label: this.$options.i18n.optionsLabel,
           tdClass,
         },
       ];
@@ -154,8 +154,8 @@ export default {
       </span>
     </template>
 
-    <template #cell(actions)="{ item }">
-      <agent-actions
+    <template #cell(options)="{ item }">
+      <agent-options
         :agent="item"
         :default-branch-name="defaultBranchName"
         :max-agents="maxAgents"

doc/user/clusters/agent/index.md

@@ -136,8 +136,17 @@ with the following differences:
 
 ## Remove an agent
 
+You can remove an agent using the [GitLab UI](#remove-an-agent-through-the-gitlab-ui) or through the [GraphQL API](#remove-an-agent-with-the-gitlab-graphql-api).
+
+### Remove an agent through the GitLab UI
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/323055) in GitLab 14.7.
+
+To remove an agent from the UI:
+
+1. Go to your agent's configuration repository.
 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 
+1. Select your agent from the table, and then in the **Options** column, click the vertical ellipsis 
 (**{ellipsis_v}**) button and select **Delete agent**. 
 
 ### Remove an agent with the GitLab GraphQL API

locale/gitlab.pot

@@ -7560,7 +7560,7 @@ 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."
+msgid "ClusterAgents|Are you sure you want to delete this agent? You cannot undo this."
 msgstr ""
 
 msgid "ClusterAgents|Certificate"
@@ -23041,6 +23041,9 @@ msgstr ""
 msgid "More information."
 msgstr ""
 
+msgid "More options"
+msgstr ""
+
 msgid "More than %{number_commits_distance} commits different with %{default_branch}"
 msgstr ""
 

spec/frontend/clusters_list/components/agent_actions_spec.js → spec/frontend/clusters_list/components/agent_options_spec.js

@@ -6,7 +6,7 @@ import { ENTER_KEY } from '~/lib/utils/keys';
 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 AgentOptions from '~/clusters_list/components/agent_options.vue';
 import { MAX_LIST_COUNT } from '~/clusters_list/constants';
 import { getAgentResponse, mockDeleteResponse, mockErrorDeleteResponse } from '../mocks/apollo';
 
@@ -21,7 +21,7 @@ const agent = {
   webPath: 'agent-webPath',
 };
 
-describe('AgentActions', () => {
+describe('AgentOptions', () => {
   let wrapper;
   let toast;
   let apolloProvider;
@@ -66,7 +66,7 @@ describe('AgentActions', () => {
 
     toast = jest.fn();
 
-    wrapper = shallowMountExtended(AgentActions, {
+    wrapper = shallowMountExtended(AgentOptions, {
       apolloProvider,
       provide,
       propsData,
@@ -190,7 +190,7 @@ describe('AgentActions', () => {
       submitAgentToDelete();
     });
 
-    it('reenables the actions dropdown', async () => {
+    it('reenables the options dropdown', async () => {
       expect(findPrimaryActionAttributes('loading')).toBe(true);
       expect(findDropdown().attributes('disabled')).toBe('true');
 

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 AgentOptions from '~/clusters_list/components/agent_options.vue';
 import { ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { stubComponent } from 'helpers/stub_component';
@@ -16,6 +16,7 @@ const propsData = {
   agents: [
     {
       name: 'agent-1',
+      id: 'agent-1-id',
       configFolder: {
         webPath: '/agent/full/path',
       },
@@ -26,6 +27,7 @@ const propsData = {
     },
     {
       name: 'agent-2',
+      id: 'agent-2-id',
       webPath: '/agent-2',
       status: 'active',
       lastContact: connectedTimeNow.getTime(),
@@ -39,6 +41,7 @@ const propsData = {
     },
     {
       name: 'agent-3',
+      id: 'agent-3-id',
       webPath: '/agent-3',
       status: 'inactive',
       lastContact: connectedTimeInactive.getTime(),
@@ -53,7 +56,7 @@ const propsData = {
   ],
 };
 
-const AgentActionsStub = stubComponent(AgentActions, {
+const AgentOptionsStub = stubComponent(AgentOptions, {
   template: `<div></div>`,
 });
 
@@ -66,14 +69,14 @@ 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);
+  const findAgentOptions = () => wrapper.findAllComponents(AgentOptions);
 
   beforeEach(() => {
     wrapper = mountExtended(AgentTable, {
       propsData,
       provide: provideData,
       stubs: {
-        AgentActions: AgentActionsStub,
+        AgentOptions: AgentOptionsStub,
       },
     });
   });
@@ -125,7 +128,7 @@ describe('AgentTable', () => {
     });
 
     it('displays actions menu for each agent', () => {
-      expect(findAgentActions()).toHaveLength(3);
+      expect(findAgentOptions()).toHaveLength(3);
     });
   });
 });