diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-01-20 12:16:11 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-01-20 12:16:11 +0300 |
commit | edaa33dee2ff2f7ea3fac488d41558eb5f86d68c (patch) | |
tree | 11f143effbfeba52329fb7afbd05e6e2a3790241 /app/assets/javascripts/clusters_list/components/agent_options.vue | |
parent | d8a5691316400a0f7ec4f83832698f1988eb27c1 (diff) |
Add latest changes from gitlab-org/gitlab@14-7-stable-eev14.7.0-rc42
Diffstat (limited to 'app/assets/javascripts/clusters_list/components/agent_options.vue')
-rw-r--r-- | app/assets/javascripts/clusters_list/components/agent_options.vue | 200 |
1 files changed, 200 insertions, 0 deletions
diff --git a/app/assets/javascripts/clusters_list/components/agent_options.vue b/app/assets/javascripts/clusters_list/components/agent_options.vue new file mode 100644 index 00000000000..a364122ba56 --- /dev/null +++ b/app/assets/javascripts/clusters_list/components/agent_options.vue @@ -0,0 +1,200 @@ +<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 options'), + deleteButton: s__('ClusterAgents|Delete agent'), + modalTitle: __('Are you sure?'), + modalBody: s__( + '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'), + 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, + validator: (value) => ['id', 'name'].every((prop) => value[prop]), + }, + defaultBranchName: { + default: '.noBranch', + required: false, + type: String, + }, + maxAgents: { + default: null, + required: false, + type: Number, + }, + }, + data() { + return { + loading: false, + error: null, + deleteConfirmText: null, + agentName: this.agent.name, + }; + }, + 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() { + if (this.disableModalSubmit || this.loading) { + return; + } + + this.loading = true; + this.error = null; + + try { + const { errors } = await this.deleteAgentMutation(); + + if (errors.length) { + throw new Error(errors[0]); + } + } catch (error) { + this.error = error?.message || this.$options.i18n.defaultError; + } finally { + this.loading = false; + const successMessage = sprintf(this.$options.i18n.successMessage, { name: this.agentName }); + + this.$toast.show(this.error || successMessage); + + 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" @keydown.enter="deleteAgent" /> + </gl-form-group> + </gl-modal> + </div> +</template> |