1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<script>
import { GlLoadingIcon, GlButton } from '@gitlab/ui';
import { mapState, mapActions } from 'vuex';
import { __ } from '~/locale';
import showToast from '~/vue_shared/plugins/global_toast';
import ModalRuleCreate from './modal_rule_create.vue';
import ModalRuleRemove from './modal_rule_remove.vue';
export default {
components: {
ModalRuleCreate,
ModalRuleRemove,
GlButton,
GlLoadingIcon,
},
props: {
isMrEdit: {
type: Boolean,
default: true,
required: false,
},
},
computed: {
...mapState({
settings: 'settings',
isLoading: (state) => state.approvals.isLoading,
hasLoaded: (state) => state.approvals.hasLoaded,
targetBranch: (state) => state.approvals.targetBranch,
}),
createModalId() {
return `${this.settings.prefix}-approvals-create-modal`;
},
removeModalId() {
return `${this.settings.prefix}-approvals-remove-modal`;
},
},
mounted() {
return this.fetchRules({ targetBranch: this.targetBranch });
},
methods: {
...mapActions(['fetchRules', 'undoRulesChange']),
...mapActions({ openCreateModal: 'createModal/open' }),
resetToProjectDefaults() {
const { targetBranch } = this;
return this.fetchRules({ targetBranch, resetToDefault: true }).then(() => {
showToast(__('Approval rules reset to project defaults'), {
action: {
text: __('Undo'),
onClick: (_, toast) => {
this.undoRulesChange();
toast.hide();
},
},
});
});
},
},
};
</script>
<template>
<div class="js-approval-rules">
<gl-loading-icon v-if="!hasLoaded" size="lg" />
<template v-else>
<div class="border-bottom">
<slot name="rules"></slot>
</div>
<div v-if="settings.canEdit && settings.allowMultiRule" class="border-bottom py-3 px-3">
<div class="gl-display-flex">
<gl-button
:class="{ 'gl-mr-3': targetBranch, 'gl-mr-0': !targetBranch }"
:disabled="isLoading"
category="secondary"
variant="info"
size="small"
data-qa-selector="add_approvers_button"
data-testid="add-approval-rule"
@click="openCreateModal(null)"
>
{{ __('Add approval rule') }}
</gl-button>
<gl-button
v-if="targetBranch"
:disabled="isLoading"
size="small"
data-testid="reset-to-defaults"
@click="resetToProjectDefaults"
>
{{ __('Reset to project defaults') }}
</gl-button>
</div>
</div>
<slot name="footer"></slot>
</template>
<modal-rule-create :modal-id="createModalId" :is-mr-edit="isMrEdit" />
<modal-rule-remove :modal-id="removeModalId" />
</div>
</template>