diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-16 21:18:33 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-16 21:18:33 +0300 |
commit | f64a639bcfa1fc2bc89ca7db268f594306edfd7c (patch) | |
tree | a2c3c2ebcc3b45e596949db485d6ed18ffaacfa1 /app/assets/javascripts/notifications | |
parent | bfbc3e0d6583ea1a91f627528bedc3d65ba4b10f (diff) |
Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40
Diffstat (limited to 'app/assets/javascripts/notifications')
4 files changed, 40 insertions, 61 deletions
diff --git a/app/assets/javascripts/notifications/components/custom_notifications_modal.vue b/app/assets/javascripts/notifications/components/custom_notifications_modal.vue index 0f628897e17..2b5cff35fc8 100644 --- a/app/assets/javascripts/notifications/components/custom_notifications_modal.vue +++ b/app/assets/javascripts/notifications/components/custom_notifications_modal.vue @@ -24,12 +24,21 @@ export default { default: '', }, }, + model: { + prop: 'visible', + event: 'change', + }, props: { modalId: { type: String, required: false, default: 'custom-notifications-modal', }, + visible: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -95,9 +104,11 @@ export default { <template> <gl-modal ref="modal" + :visible="visible" :modal-id="modalId" :title="$options.i18n.customNotificationsModal.title" @show="onOpen" + v-on="$listeners" > <div class="container-fluid"> <div class="row"> @@ -115,7 +126,11 @@ export default { <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3" /> <template v-else> <gl-form-group v-for="event in events" :key="event.id"> - <gl-form-checkbox v-model="event.enabled" @change="updateEvent($event, event)"> + <gl-form-checkbox + v-model="event.enabled" + :data-testid="`notification-setting-${event.id}`" + @change="updateEvent($event, event)" + > <strong>{{ event.name }}</strong ><gl-loading-icon v-if="event.loading" :inline="true" class="gl-ml-2" /> </gl-form-checkbox> diff --git a/app/assets/javascripts/notifications/components/notifications_dropdown.vue b/app/assets/javascripts/notifications/components/notifications_dropdown.vue index e4cedfdb810..4963b9386c1 100644 --- a/app/assets/javascripts/notifications/components/notifications_dropdown.vue +++ b/app/assets/javascripts/notifications/components/notifications_dropdown.vue @@ -1,12 +1,5 @@ <script> -import { - GlButtonGroup, - GlButton, - GlDropdown, - GlDropdownDivider, - GlTooltipDirective, - GlModalDirective, -} from '@gitlab/ui'; +import { GlDropdown, GlDropdownDivider, GlTooltipDirective } from '@gitlab/ui'; import Api from '~/api'; import { sprintf } from '~/locale'; import { CUSTOM_LEVEL, i18n } from '../constants'; @@ -16,8 +9,6 @@ import NotificationsDropdownItem from './notifications_dropdown_item.vue'; export default { name: 'NotificationsDropdown', components: { - GlButtonGroup, - GlButton, GlDropdown, GlDropdownDivider, NotificationsDropdownItem, @@ -25,7 +16,6 @@ export default { }, directives: { GlTooltip: GlTooltipDirective, - 'gl-modal': GlModalDirective, }, inject: { containerClass: { @@ -57,6 +47,7 @@ export default { return { selectedNotificationLevel: this.initialNotificationLevel, isLoading: false, + notificationsModalVisible: false, }; }, computed: { @@ -95,6 +86,11 @@ export default { }, }, methods: { + openNotificationsModal() { + if (this.isCustomNotification) { + this.notificationsModalVisible = true; + } + }, selectItem(level) { if (level !== this.selectedNotificationLevel) { this.updateNotificationLevel(level); @@ -106,10 +102,7 @@ export default { try { await Api.updateNotificationSettings(this.projectId, this.groupId, { level }); this.selectedNotificationLevel = level; - - if (level === CUSTOM_LEVEL) { - this.$refs.customNotificationsModal.open(); - } + this.openNotificationsModal(); } catch (error) { this.$toast.show(this.$options.i18n.updateNotificationLevelErrorMessage, { type: 'error' }); } finally { @@ -125,52 +118,16 @@ export default { <template> <div :class="containerClass"> - <gl-button-group - v-if="isCustomNotification" - v-gl-tooltip="{ title: buttonTooltip }" - data-testid="notificationButton" - :size="buttonSize" - > - <gl-button - v-gl-modal="$options.modalId" - :size="buttonSize" - :icon="buttonIcon" - :loading="isLoading" - :disabled="disabled" - > - <template v-if="buttonText">{{ buttonText }}</template> - </gl-button> - <gl-dropdown :size="buttonSize" :disabled="disabled"> - <notifications-dropdown-item - v-for="item in notificationLevels" - :key="item.level" - :level="item.level" - :title="item.title" - :description="item.description" - :notification-level="selectedNotificationLevel" - @item-selected="selectItem" - /> - <gl-dropdown-divider /> - <notifications-dropdown-item - :key="$options.customLevel" - :level="$options.customLevel" - :title="$options.i18n.notificationTitles.custom" - :description="$options.i18n.notificationDescriptions.custom" - :notification-level="selectedNotificationLevel" - @item-selected="selectItem" - /> - </gl-dropdown> - </gl-button-group> - <gl-dropdown - v-else v-gl-tooltip="{ title: buttonTooltip }" - data-testid="notificationButton" - :text="buttonText" + data-testid="notification-dropdown" + :size="buttonSize" :icon="buttonIcon" :loading="isLoading" - :size="buttonSize" :disabled="disabled" + :split="isCustomNotification" + :text="buttonText" + @click="openNotificationsModal" > <notifications-dropdown-item v-for="item in notificationLevels" @@ -191,6 +148,6 @@ export default { @item-selected="selectItem" /> </gl-dropdown> - <custom-notifications-modal ref="customNotificationsModal" :modal-id="$options.modalId" /> + <custom-notifications-modal v-model="notificationsModalVisible" :modal-id="$options.modalId" /> </div> </template> diff --git a/app/assets/javascripts/notifications/components/notifications_dropdown_item.vue b/app/assets/javascripts/notifications/components/notifications_dropdown_item.vue index 73bb9c1b36f..2138372d8ad 100644 --- a/app/assets/javascripts/notifications/components/notifications_dropdown_item.vue +++ b/app/assets/javascripts/notifications/components/notifications_dropdown_item.vue @@ -33,7 +33,13 @@ export default { </script> <template> - <gl-dropdown-item is-check-item :is-checked="isActive" @click="$emit('item-selected', level)"> + <gl-dropdown-item + is-check-item + :is-checked="isActive" + :class="{ 'is-active': isActive }" + data-testid="notification-item" + @click="$emit('item-selected', level)" + > <div class="gl-display-flex gl-flex-direction-column"> <span class="gl-font-weight-bold">{{ title }}</span> <span class="gl-text-gray-500">{{ description }}</span> diff --git a/app/assets/javascripts/notifications/constants.js b/app/assets/javascripts/notifications/constants.js index 07c569a0293..4f875977d78 100644 --- a/app/assets/javascripts/notifications/constants.js +++ b/app/assets/javascripts/notifications/constants.js @@ -22,10 +22,10 @@ export const i18n = { owner_disabled: __('Notifications have been disabled by the project or group owner'), }, updateNotificationLevelErrorMessage: __( - 'An error occured while updating the notification settings. Please try again.', + 'An error occurred while updating the notification settings. Please try again.', ), loadNotificationLevelErrorMessage: __( - 'An error occured while loading the notification settings. Please try again.', + 'An error occurred while loading the notification settings. Please try again.', ), customNotificationsModal: { title: __('Custom notification events'), @@ -53,6 +53,7 @@ export const i18n = { reassign_merge_request: s__('NotificationEvent|Reassign merge request'), reopen_issue: s__('NotificationEvent|Reopen issue'), reopen_merge_request: s__('NotificationEvent|Reopen merge request'), + merge_when_pipeline_succeeds: s__('NotificationEvent|Merge when pipeline succeeds'), success_pipeline: s__('NotificationEvent|Successful pipeline'), }, }; |