debian-mirror-gitlab/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue

205 lines
6.2 KiB
Vue
Raw Normal View History

2020-01-01 13:55:28 +05:30
<script>
2020-11-24 15:15:51 +05:30
/* eslint-disable vue/no-v-html */
import { GlModal, GlButton, GlFormInput, GlSprintf } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { escape } from 'lodash';
2020-01-01 13:55:28 +05:30
import csrf from '~/lib/utils/csrf';
2021-03-11 19:13:27 +05:30
import { s__, sprintf } from '~/locale';
import SplitButton from '~/vue_shared/components/split_button.vue';
2020-01-01 13:55:28 +05:30
const splitButtonActionItems = [
{
title: s__('ClusterIntegration|Remove integration and resources'),
description: s__(
'ClusterIntegration|Deletes all GitLab resources attached to this cluster during removal',
),
eventName: 'remove-cluster-and-cleanup',
},
{
title: s__('ClusterIntegration|Remove integration'),
description: s__(
'ClusterIntegration|Removes cluster from project but keeps associated resources',
),
eventName: 'remove-cluster',
},
];
export default {
splitButtonActionItems,
components: {
SplitButton,
GlModal,
2020-07-28 23:09:34 +05:30
GlButton,
2020-01-01 13:55:28 +05:30
GlFormInput,
2020-10-24 23:57:45 +05:30
GlSprintf,
2020-01-01 13:55:28 +05:30
},
props: {
clusterPath: {
type: String,
required: true,
},
clusterName: {
type: String,
required: true,
},
2020-07-28 23:09:34 +05:30
hasManagementProject: {
type: Boolean,
required: false,
},
2020-01-01 13:55:28 +05:30
},
data() {
return {
enteredClusterName: '',
confirmCleanup: false,
};
},
computed: {
csrfToken() {
return csrf.token;
},
modalTitle() {
return this.confirmCleanup
? s__('ClusterIntegration|Remove integration and resources?')
: s__('ClusterIntegration|Remove integration?');
},
warningMessage() {
return this.confirmCleanup
? s__(
'ClusterIntegration|You are about to remove your cluster integration and all GitLab-created resources associated with this cluster.',
)
: s__('ClusterIntegration|You are about to remove your cluster integration.');
},
confirmationTextLabel() {
return sprintf(
this.confirmCleanup
? s__(
'ClusterIntegration|To remove your integration and resources, type %{clusterName} to confirm:',
)
: s__('ClusterIntegration|To remove your integration, type %{clusterName} to confirm:'),
{
2020-05-24 23:13:21 +05:30
clusterName: `<code>${escape(this.clusterName)}</code>`,
2020-01-01 13:55:28 +05:30
},
false,
);
},
canSubmit() {
return this.enteredClusterName === this.clusterName;
},
2020-07-28 23:09:34 +05:30
canCleanupResources() {
return !this.hasManagementProject;
},
2020-01-01 13:55:28 +05:30
},
methods: {
handleClickRemoveCluster(cleanup = false) {
this.confirmCleanup = cleanup;
this.$refs.modal.show();
},
handleCancel() {
this.$refs.modal.hide();
this.enteredClusterName = '';
},
handleSubmit(cleanup = false) {
this.$refs.cleanup.name = cleanup === true ? 'cleanup' : 'no_cleanup';
this.$refs.form.submit();
this.enteredClusterName = '';
},
},
};
</script>
<template>
2020-10-24 23:57:45 +05:30
<div class="gl-display-flex gl-justify-content-end">
2020-01-01 13:55:28 +05:30
<split-button
2020-07-28 23:09:34 +05:30
v-if="canCleanupResources"
2020-01-01 13:55:28 +05:30
:action-items="$options.splitButtonActionItems"
menu-class="dropdown-menu-large"
variant="danger"
@remove-cluster="handleClickRemoveCluster(false)"
@remove-cluster-and-cleanup="handleClickRemoveCluster(true)"
/>
2020-07-28 23:09:34 +05:30
<gl-button
v-else
variant="danger"
data-testid="btnRemove"
@click="handleClickRemoveCluster(false)"
>
{{ s__('ClusterIntegration|Remove integration') }}
</gl-button>
2020-01-01 13:55:28 +05:30
<gl-modal
ref="modal"
size="lg"
modal-id="delete-cluster-modal"
:title="modalTitle"
kind="danger"
>
2021-03-11 19:13:27 +05:30
<p>{{ warningMessage }}</p>
<div v-if="confirmCleanup">
{{ s__('ClusterIntegration|This will permanently delete the following resources:') }}
<ul>
<li>
{{ s__('ClusterIntegration|All installed applications and related resources') }}
</li>
<li>
<gl-sprintf :message="s__('ClusterIntegration|The %{gitlabNamespace} namespace')">
<template #gitlabNamespace>
<!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
<code>{{ 'gitlab-managed-apps' }}</code>
</template>
</gl-sprintf>
</li>
<li>{{ s__('ClusterIntegration|Any project namespaces') }}</li>
<!-- eslint-disable @gitlab/vue-require-i18n-strings -->
<li><code>clusterroles</code></li>
<li><code>clusterrolebindings</code></li>
<!-- eslint-enable @gitlab/vue-require-i18n-strings -->
</ul>
</div>
<strong v-html="confirmationTextLabel"></strong>
<form ref="form" :action="clusterPath" method="post" class="gl-mb-5">
<input ref="method" type="hidden" name="_method" value="delete" />
<input :value="csrfToken" type="hidden" name="authenticity_token" />
<input ref="cleanup" type="hidden" name="cleanup" value="true" />
<gl-form-input
v-model="enteredClusterName"
autofocus
type="text"
name="confirm_cluster_name_input"
autocomplete="off"
/>
</form>
<span v-if="confirmCleanup">{{
s__(
'ClusterIntegration|If you do not wish to delete all associated GitLab resources, you can simply remove the integration.',
)
}}</span>
2020-06-23 00:09:42 +05:30
<template #modal-footer>
2020-11-24 15:15:51 +05:30
<gl-button variant="secondary" @click="handleCancel">{{ s__('Cancel') }}</gl-button>
2020-01-01 13:55:28 +05:30
<template v-if="confirmCleanup">
2020-11-24 15:15:51 +05:30
<gl-button
:disabled="!canSubmit"
variant="warning"
category="primary"
@click="handleSubmit"
>{{ s__('ClusterIntegration|Remove integration') }}</gl-button
>
<gl-button
2020-04-22 19:07:51 +05:30
:disabled="!canSubmit"
variant="danger"
2020-11-24 15:15:51 +05:30
category="primary"
2020-04-22 19:07:51 +05:30
@click="handleSubmit(true)"
2020-11-24 15:15:51 +05:30
>{{ s__('ClusterIntegration|Remove integration and resources') }}</gl-button
2020-04-22 19:07:51 +05:30
>
2020-01-01 13:55:28 +05:30
</template>
<template v-else>
2020-11-24 15:15:51 +05:30
<gl-button
:disabled="!canSubmit"
variant="danger"
category="primary"
@click="handleSubmit"
>{{ s__('ClusterIntegration|Remove integration') }}</gl-button
>
2020-01-01 13:55:28 +05:30
</template>
</template>
</gl-modal>
</div>
</template>