All files / app/assets/javascripts/notifications/components notifications_dropdown.vue

100% Statements 28/28
72.22% Branches 13/18
100% Functions 11/11
100% Lines 28/28

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154  1x 1x 1x 1x 1x 1x                                                                               33x             33x 198x             35x     45x 6x     39x     33x         35x       35x                 3x 2x       6x 6x       6x   6x 6x 2x 2x   4x   6x                   371x                                                                      
<script>
import { GlDropdown, GlDropdownDivider, GlTooltipDirective } from '@gitlab/ui';
import Api from '~/api';
import { sprintf } from '~/locale';
import { CUSTOM_LEVEL, i18n } from '../constants';
import CustomNotificationsModal from './custom_notifications_modal.vue';
import NotificationsDropdownItem from './notifications_dropdown_item.vue';
 
export default {
  name: 'NotificationsDropdown',
  components: {
    GlDropdown,
    GlDropdownDivider,
    NotificationsDropdownItem,
    CustomNotificationsModal,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  inject: {
    containerClass: {
      default: '',
    },
    disabled: {
      default: false,
    },
    dropdownItems: {
      default: [],
    },
    buttonSize: {
      default: 'medium',
    },
    initialNotificationLevel: {
      default: '',
    },
    projectId: {
      default: null,
    },
    groupId: {
      default: null,
    },
    showLabel: {
      default: false,
    },
  },
  data() {
    return {
      selectedNotificationLevel: this.initialNotificationLevel,
      isLoading: false,
      notificationsModalVisible: false,
    };
  },
  computed: {
    notificationLevels() {
      return this.dropdownItems.map((level) => ({
        level,
        title: this.$options.i18n.notificationTitles[level] || '',
        description: this.$options.i18n.notificationDescriptions[level] || '',
      }));
    },
    isCustomNotification() {
      return this.selectedNotificationLevel === CUSTOM_LEVEL;
    },
    buttonIcon() {
      if (this.isLoading) {
        return null;
      }
 
      return this.selectedNotificationLevel === 'disabled' ? 'notifications-off' : 'notifications';
    },
    buttonText() {
      return this.showLabel
        ? this.$options.i18n.notificationTitles[this.selectedNotificationLevel]
        : null;
    },
    buttonTooltip() {
      const notificationTitle =
        this.$options.i18n.notificationTitles[this.selectedNotificationLevel] ||
        this.selectedNotificationLevel;
 
      return this.disabled
        ? this.$options.i18n.notificationDescriptions.owner_disabled
        : sprintf(this.$options.i18n.notificationTooltipTitle, {
            notification_title: notificationTitle,
          });
    },
  },
  methods: {
    openNotificationsModal() {
      if (this.isCustomNotification) {
        this.notificationsModalVisible = true;
      }
    },
    selectItem(level) {
E      if (level !== this.selectedNotificationLevel) {
        this.updateNotificationLevel(level);
      }
    },
    async updateNotificationLevel(level) {
      this.isLoading = true;
 
      try {
        await Api.updateNotificationSettings(this.projectId, this.groupId, { level });
        this.selectedNotificationLevel = level;
        this.openNotificationsModal();
      } catch (error) {
        this.$toast.show(this.$options.i18n.updateNotificationLevelErrorMessage);
      } finally {
        this.isLoading = false;
      }
    },
  },
  customLevel: CUSTOM_LEVEL,
  i18n,
  modalId: 'custom-notifications-modal',
};
</script>
 
<template>
  <div :class="containerClass">
    <gl-dropdown
      v-gl-tooltip="{ title: buttonTooltip }"
      data-testid="notification-dropdown"
      :size="buttonSize"
      :icon="buttonIcon"
      :loading="isLoading"
      :disabled="disabled"
      :split="isCustomNotification"
      :text="buttonText"
      @click="openNotificationsModal"
    >
      <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>
    <custom-notifications-modal v-model="notificationsModalVisible" :modal-id="$options.modalId" />
  </div>
</template>