142 lines
3.9 KiB
Vue
142 lines
3.9 KiB
Vue
<script>
|
|
import { GlAlert, GlButton, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui';
|
|
import { __, s__ } from '~/locale';
|
|
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
|
|
import csrf from '~/lib/utils/csrf';
|
|
import TopicSelect from './topic_select.vue';
|
|
|
|
export default {
|
|
components: {
|
|
GlAlert,
|
|
GlButton,
|
|
GlModal,
|
|
GlSprintf,
|
|
TopicSelect,
|
|
},
|
|
directives: {
|
|
GlModal: GlModalDirective,
|
|
},
|
|
inject: ['path'],
|
|
data() {
|
|
return {
|
|
sourceTopic: {},
|
|
targetTopic: {},
|
|
};
|
|
},
|
|
computed: {
|
|
sourceTopicId() {
|
|
return getIdFromGraphQLId(this.sourceTopic?.id);
|
|
},
|
|
targetTopicId() {
|
|
return getIdFromGraphQLId(this.targetTopic?.id);
|
|
},
|
|
validSelectedTopics() {
|
|
return (
|
|
Object.keys(this.sourceTopic).length &&
|
|
Object.keys(this.targetTopic).length &&
|
|
this.sourceTopic !== this.targetTopic
|
|
);
|
|
},
|
|
actionPrimary() {
|
|
return {
|
|
text: __('Merge'),
|
|
attributes: {
|
|
variant: 'danger',
|
|
disabled: !this.validSelectedTopics,
|
|
},
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
selectSourceTopic(topic) {
|
|
this.sourceTopic = topic;
|
|
},
|
|
selectTargetTopic(topic) {
|
|
this.targetTopic = topic;
|
|
},
|
|
mergeTopics() {
|
|
this.$refs.mergeForm.submit();
|
|
},
|
|
},
|
|
i18n: {
|
|
title: s__('MergeTopics|Merge topics'),
|
|
body: s__(
|
|
'MergeTopics|Move all assigned projects from the source topic to the target topic and remove the source topic.',
|
|
),
|
|
sourceTopic: s__('MergeTopics|Source topic'),
|
|
targetTopic: s__('MergeTopics|Target topic'),
|
|
warningTitle: s__('MergeTopics|Merging topics will cause the following:'),
|
|
warningBody: s__('MergeTopics|This action cannot be undone.'),
|
|
warningRemoveTopic: s__('MergeTopics|%{sourceTopic} will be removed'),
|
|
warningMoveProjects: s__('MergeTopics|All assigned projects will be moved to %{targetTopic}'),
|
|
},
|
|
modal: {
|
|
id: 'merge-topics',
|
|
actionSecondary: {
|
|
text: __('Cancel'),
|
|
attributes: {
|
|
variant: 'default',
|
|
},
|
|
},
|
|
},
|
|
csrf,
|
|
};
|
|
</script>
|
|
<template>
|
|
<div class="gl-mr-3">
|
|
<gl-button v-gl-modal="$options.modal.id" category="secondary">{{
|
|
$options.i18n.title
|
|
}}</gl-button>
|
|
<gl-modal
|
|
:title="$options.i18n.title"
|
|
:action-primary="actionPrimary"
|
|
:action-secondary="$options.modal.actionSecondary"
|
|
:modal-id="$options.modal.id"
|
|
size="sm"
|
|
@primary="mergeTopics"
|
|
>
|
|
<p>{{ $options.i18n.body }}</p>
|
|
<topic-select
|
|
:selected-topic="sourceTopic"
|
|
:label-text="$options.i18n.sourceTopic"
|
|
@click="selectSourceTopic"
|
|
/>
|
|
<topic-select
|
|
:selected-topic="targetTopic"
|
|
:label-text="$options.i18n.targetTopic"
|
|
@click="selectTargetTopic"
|
|
/>
|
|
<gl-alert
|
|
v-if="validSelectedTopics"
|
|
:title="$options.i18n.warningTitle"
|
|
:dismissible="false"
|
|
variant="danger"
|
|
>
|
|
<ul>
|
|
<li>
|
|
<gl-sprintf :message="$options.i18n.warningRemoveTopic">
|
|
<template #sourceTopic>
|
|
<strong>{{ sourceTopic.name }}</strong>
|
|
</template>
|
|
</gl-sprintf>
|
|
</li>
|
|
<li>
|
|
<gl-sprintf :message="$options.i18n.warningMoveProjects">
|
|
<template #targetTopic>
|
|
<strong>{{ targetTopic.name }}</strong>
|
|
</template>
|
|
</gl-sprintf>
|
|
</li>
|
|
</ul>
|
|
{{ $options.i18n.warningBody }}
|
|
</gl-alert>
|
|
<form ref="mergeForm" method="post" :action="path">
|
|
<input type="hidden" name="_method" value="post" />
|
|
<input type="hidden" name="authenticity_token" :value="$options.csrf.token" />
|
|
<input type="hidden" name="source_topic_id" :value="sourceTopicId" />
|
|
<input type="hidden" name="target_topic_id" :value="targetTopicId" />
|
|
</form>
|
|
</gl-modal>
|
|
</div>
|
|
</template>
|