Add custom notifications modal

- Add modal for editing
custom notifications

app/assets/javascripts/notifications/components/custom_notifications_modal.vue

+<script>
+import { GlModal, GlSprintf, GlLink, GlLoadingIcon, GlFormGroup, GlFormCheckbox } from '@gitlab/ui';
+import Api from '~/api';
+import { i18n } from '../constants';
+
+export default {
+  name: 'CustomNotificationsModal',
+  components: {
+    GlModal,
+    GlSprintf,
+    GlLink,
+    GlLoadingIcon,
+    GlFormGroup,
+    GlFormCheckbox,
+  },
+  inject: {
+    projectId: {
+      default: null,
+    },
+    groupId: {
+      default: null,
+    },
+    helpPagePath: {
+      default: '',
+    },
+  },
+  props: {
+    modalId: {
+      type: String,
+      required: false,
+      default: 'custom-notifications-modal',
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+      events: [],
+    };
+  },
+  methods: {
+    open() {
+      this.$refs.modal.show();
+    },
+    buildEvents(events) {
+      return Object.keys(events).map((key) => ({
+        id: key,
+        enabled: Boolean(events[key]),
+        name: this.$options.i18n.eventNames[key] || '',
+        loading: false,
+      }));
+    },
+    async onOpen() {
+      if (!this.events.length) {
+        await this.loadNotificationSettings();
+      }
+    },
+    async loadNotificationSettings() {
+      this.isLoading = true;
+
+      try {
+        const {
+          data: { events },
+        } = await Api.getNotificationSettings(this.projectId, this.groupId);
+
+        this.events = this.buildEvents(events);
+      } catch (error) {
+        this.$toast.show(this.$options.i18n.loadNotificationLevelErrorMessage, { type: 'error' });
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    async updateEvent(isEnabled, event) {
+      const index = this.events.findIndex((e) => e.id === event.id);
+
+      // update loading state for the given event
+      this.$set(this.events, index, { ...this.events[index], loading: true });
+
+      try {
+        const {
+          data: { events },
+        } = await Api.updateNotificationSettings(this.projectId, this.groupId, {
+          [event.id]: isEnabled,
+        });
+
+        this.events = this.buildEvents(events);
+      } catch (error) {
+        this.$toast.show(this.$options.i18n.updateNotificationLevelErrorMessage, { type: 'error' });
+      }
+    },
+  },
+  i18n,
+};
+</script>
+
+<template>
+  <gl-modal
+    ref="modal"
+    :modal-id="modalId"
+    :title="$options.i18n.customNotificationsModal.title"
+    @show="onOpen"
+  >
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-lg-4">
+          <h4 class="gl-mt-0" data-testid="modalBodyTitle">
+            {{ $options.i18n.customNotificationsModal.bodyTitle }}
+          </h4>
+          <gl-sprintf :message="$options.i18n.customNotificationsModal.bodyMessage">
+            <template #notificationLink="{ content }">
+              <gl-link :href="helpPagePath" target="_blank">{{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </div>
+        <div class="col-lg-8">
+          <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)">
+                <strong>{{ event.name }}</strong
+                ><gl-loading-icon v-if="event.loading" :inline="true" class="gl-ml-2" />
+              </gl-form-checkbox>
+            </gl-form-group>
+          </template>
+        </div>
+      </div>
+    </div>
+  </gl-modal>
+</template>

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

@@ -5,11 +5,13 @@ import {
   GlDropdown,
   GlDropdownDivider,
   GlTooltipDirective,
+  GlModalDirective,
 } from '@gitlab/ui';
 import { sprintf } from '~/locale';
 import Api from '~/api';
 import { CUSTOM_LEVEL, i18n } from '../constants';
 import NotificationsDropdownItem from './notifications_dropdown_item.vue';
+import CustomNotificationsModal from './custom_notifications_modal.vue';
 
 export default {
   name: 'NotificationsDropdown',
@@ -19,9 +21,11 @@ export default {
     GlDropdown,
     GlDropdownDivider,
     NotificationsDropdownItem,
+    CustomNotificationsModal,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    'gl-modal': GlModalDirective,
   },
   inject: {
     containerClass: {
@@ -102,6 +106,10 @@ export default {
       try {
         await Api.updateNotificationSettings(this.projectId, this.groupId, { level });
         this.selectedNotificationLevel = level;
+
+        if (level === CUSTOM_LEVEL) {
+          this.$refs.customNotificationsModal.open();
+        }
       } catch (error) {
         this.$toast.show(this.$options.i18n.updateNotificationLevelErrorMessage, { type: 'error' });
       } finally {
@@ -111,6 +119,7 @@ export default {
   },
   customLevel: CUSTOM_LEVEL,
   i18n,
+  modalId: 'custom-notifications-modal',
 };
 </script>
 
@@ -122,7 +131,13 @@ export default {
       data-testid="notificationButton"
       :size="buttonSize"
     >
-      <gl-button :size="buttonSize" :icon="buttonIcon" :loading="isLoading" :disabled="disabled">
+      <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">
@@ -176,5 +191,6 @@ export default {
         @item-selected="selectItem"
       />
     </gl-dropdown>
+    <custom-notifications-modal ref="customNotificationsModal" :modal-id="$options.modalId" />
   </div>
 </template>

app/assets/javascripts/notifications/constants.js

@@ -24,4 +24,35 @@ export const i18n = {
   updateNotificationLevelErrorMessage: __(
     'An error occured while updating the notification settings. Please try again.',
   ),
+  loadNotificationLevelErrorMessage: __(
+    'An error occured while loading the notification settings. Please try again.',
+  ),
+  customNotificationsModal: {
+    title: __('Custom notification events'),
+    bodyTitle: __('Notification events'),
+    bodyMessage: __(
+      'Custom notification levels are the same as participating levels. With custom notification levels you will also receive notifications for select events. To find out more, check out %{notificationLinkStart} notification emails%{notificationLinkEnd}.',
+    ),
+  },
+  eventNames: {
+    change_reviewer_merge_request: s__('NotificationEvent|Change reviewer merge request'),
+    close_issue: s__('NotificationEvent|Close issue'),
+    close_merge_request: s__('NotificationEvent|Close merge request'),
+    failed_pipeline: s__('NotificationEvent|Failed pipeline'),
+    fixed_pipeline: s__('NotificationEvent|Fixed pipeline'),
+    issue_due: s__('NotificationEvent|Issue due'),
+    merge_merge_request: s__('NotificationEvent|Merge merge request'),
+    moved_project: s__('NotificationEvent|Moved project'),
+    new_epic: s__('NotificationEvent|New epic'),
+    new_issue: s__('NotificationEvent|New issue'),
+    new_merge_request: s__('NotificationEvent|New merge request'),
+    new_note: s__('NotificationEvent|New note'),
+    new_release: s__('NotificationEvent|New release'),
+    push_to_merge_request: s__('NotificationEvent|Push to merge request'),
+    reassign_issue: s__('NotificationEvent|Reassign issue'),
+    reassign_merge_request: s__('NotificationEvent|Reassign merge request'),
+    reopen_issue: s__('NotificationEvent|Reopen issue'),
+    reopen_merge_request: s__('NotificationEvent|Reopen merge request'),
+    success_pipeline: s__('NotificationEvent|Successful pipeline'),
+  },
 };

app/assets/javascripts/notifications/index.js

@@ -17,6 +17,7 @@ export default () => {
       disabled,
       dropdownItems,
       notificationLevel,
+      helpPagePath,
       projectId,
       groupId,
       showLabel,
@@ -30,6 +31,7 @@ export default () => {
         disabled: parseBoolean(disabled),
         dropdownItems: JSON.parse(dropdownItems),
         initialNotificationLevel: notificationLevel,
+        helpPagePath,
         projectId,
         groupId,
         showLabel: parseBoolean(showLabel),

locale/gitlab.pot

@@ -3050,6 +3050,9 @@ msgstr ""
 msgid "An error has occurred"
 msgstr ""
 
+msgid "An error occured while loading the notification settings. Please try again."
+msgstr ""
+
 msgid "An error occured while saving changes: %{error}"
 msgstr ""
 
@@ -8665,6 +8668,9 @@ msgstr ""
 msgid "Custom notification events"
 msgstr ""
 
+msgid "Custom notification levels are the same as participating levels. With custom notification levels you will also receive notifications for select events. To find out more, check out %{notificationLinkStart} notification emails%{notificationLinkEnd}."
+msgstr ""
+
 msgid "Custom notification levels are the same as participating levels. With custom notification levels you will also receive notifications for select events. To find out more, check out %{notification_link}."
 msgstr ""
 

spec/frontend/notifications/components/custom_notifications_modal_spec.js

+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import { shallowMount } from '@vue/test-utils';
+import { GlSprintf, GlModal, GlFormGroup, GlFormCheckbox, GlLoadingIcon } from '@gitlab/ui';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import httpStatus from '~/lib/utils/http_status';
+import CustomNotificationsModal from '~/notifications/components/custom_notifications_modal.vue';
+import { i18n } from '~/notifications/constants';
+
+const mockNotificationSettingsResponses = {
+  default: {
+    level: 'custom',
+    events: {
+      new_release: true,
+      new_note: false,
+    },
+  },
+  updated: {
+    level: 'custom',
+    events: {
+      new_release: true,
+      new_note: true,
+    },
+  },
+};
+
+const mockToastShow = jest.fn();
+
+describe('CustomNotificationsModal', () => {
+  let wrapper;
+  let mockAxios;
+
+  function createComponent(options = {}) {
+    const { injectedProperties = {}, props = {} } = options;
+    return extendedWrapper(
+      shallowMount(CustomNotificationsModal, {
+        props: {
+          ...props,
+        },
+        provide: {
+          ...injectedProperties,
+        },
+        mocks: {
+          $toast: {
+            show: mockToastShow,
+          },
+        },
+        stubs: {
+          GlModal,
+          GlFormGroup,
+          GlFormCheckbox,
+        },
+      }),
+    );
+  }
+
+  const findModalBodyDescription = () => wrapper.find(GlSprintf);
+  const findAllCheckboxes = () => wrapper.findAll(GlFormCheckbox);
+  const findCheckboxAt = (index) => findAllCheckboxes().at(index);
+
+  beforeEach(() => {
+    gon.api_version = 'v4';
+    mockAxios = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+    mockAxios.restore();
+  });
+
+  describe('template', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('displays the body title and the body message', () => {
+      expect(wrapper.findByTestId('modalBodyTitle').text()).toBe(
+        i18n.customNotificationsModal.bodyTitle,
+      );
+      expect(findModalBodyDescription().attributes('message')).toContain(
+        i18n.customNotificationsModal.bodyMessage,
+      );
+    });
+
+    describe('checkbox items', () => {
+      beforeEach(async () => {
+        wrapper = createComponent();
+
+        wrapper.setData({
+          events: [
+            { id: 'new_release', enabled: true, name: 'New release', loading: false },
+            { id: 'new_note', enabled: false, name: 'New note', loading: true },
+          ],
+        });
+
+        await wrapper.vm.$nextTick();
+      });
+
+      it.each`
+        index | eventId          | eventName        | enabled  | loading
+        ${0}  | ${'new_release'} | ${'New release'} | ${true}  | ${false}
+        ${1}  | ${'new_note'}    | ${'New note'}    | ${false} | ${true}
+      `(
+        'renders a checkbox for "$eventName" with checked=$enabled',
+        async ({ index, eventName, enabled, loading }) => {
+          const checkbox = findCheckboxAt(index);
+          expect(checkbox.text()).toContain(eventName);
+          expect(checkbox.vm.$attrs.checked).toBe(enabled);
+          expect(checkbox.find(GlLoadingIcon).exists()).toBe(loading);
+        },
+      );
+    });
+  });
+
+  describe('API calls', () => {
+    describe('load notification settings', () => {
+      beforeEach(() => {
+        jest.spyOn(axios, 'get');
+      });
+
+      it.each`
+        projectId | groupId | endpointUrl                                   | notificationType | condition
+        ${1}      | ${null} | ${'/api/v4/projects/1/notification_settings'} | ${'project'}     | ${'a projectId is given'}
+        ${null}   | ${1}    | ${'/api/v4/groups/1/notification_settings'}   | ${'group'}       | ${'a groupId is given'}
+        ${null}   | ${null} | ${'/api/v4/notification_settings'}            | ${'global'}      | ${'neither projectId nor groupId are given'}
+      `(
+        'requests $notificationType notification settings when $condition',
+        async ({ projectId, groupId, endpointUrl }) => {
+          const injectedProperties = {
+            projectId,
+            groupId,
+          };
+
+          mockAxios
+            .onGet(endpointUrl)
+            .reply(httpStatus.OK, mockNotificationSettingsResponses.default);
+
+          wrapper = createComponent({ injectedProperties });
+
+          wrapper.find(GlModal).vm.$emit('show');
+
+          await waitForPromises();
+
+          expect(axios.get).toHaveBeenCalledWith(endpointUrl);
+        },
+      );
+
+      it('updates the loading state and the events property', async () => {
+        const endpointUrl = '/api/v4/notification_settings';
+
+        mockAxios
+          .onGet(endpointUrl)
+          .reply(httpStatus.OK, mockNotificationSettingsResponses.default);
+
+        wrapper = createComponent();
+
+        wrapper.find(GlModal).vm.$emit('show');
+        expect(wrapper.vm.isLoading).toBe(true);
+
+        await waitForPromises();
+
+        expect(axios.get).toHaveBeenCalledWith(endpointUrl);
+        expect(wrapper.vm.isLoading).toBe(false);
+        expect(wrapper.vm.events).toEqual([
+          { id: 'new_release', enabled: true, name: 'New release', loading: false },
+          { id: 'new_note', enabled: false, name: 'New note', loading: false },
+        ]);
+      });
+
+      it('shows a toast message when the request fails', async () => {
+        mockAxios.onGet('/api/v4/notification_settings').reply(httpStatus.NOT_FOUND, {});
+        wrapper = createComponent();
+
+        wrapper.find(GlModal).vm.$emit('show');
+
+        await waitForPromises();
+
+        expect(
+          mockToastShow,
+        ).toHaveBeenCalledWith(
+          'An error occured while loading the notification settings. Please try again.',
+          { type: 'error' },
+        );
+      });
+    });
+
+    describe('update notification settings', () => {
+      beforeEach(() => {
+        jest.spyOn(axios, 'put');
+      });
+
+      it.each`
+        projectId | groupId | endpointUrl                                   | notificationType | condition
+        ${1}      | ${null} | ${'/api/v4/projects/1/notification_settings'} | ${'project'}     | ${'a projectId is given'}
+        ${null}   | ${1}    | ${'/api/v4/groups/1/notification_settings'}   | ${'group'}       | ${'a groupId is given'}
+        ${null}   | ${null} | ${'/api/v4/notification_settings'}            | ${'global'}      | ${'neither projectId nor groupId are given'}
+      `(
+        'updates the $notificationType notification settings when $condition and the user clicks the checkbox ',
+        async ({ projectId, groupId, endpointUrl }) => {
+          mockAxios
+            .onGet(endpointUrl)
+            .reply(httpStatus.OK, mockNotificationSettingsResponses.default);
+
+          mockAxios
+            .onPut(endpointUrl)
+            .reply(httpStatus.OK, mockNotificationSettingsResponses.updated);
+
+          const injectedProperties = {
+            projectId,
+            groupId,
+          };
+
+          wrapper = createComponent({ injectedProperties });
+
+          wrapper.setData({
+            events: [
+              { id: 'new_release', enabled: true, name: 'New release', loading: false },
+              { id: 'new_note', enabled: false, name: 'New note', loading: false },
+            ],
+          });
+
+          await wrapper.vm.$nextTick();
+
+          findCheckboxAt(1).vm.$emit('change', true);
+
+          await waitForPromises();
+
+          expect(axios.put).toHaveBeenCalledWith(endpointUrl, {
+            new_note: true,
+          });
+
+          expect(wrapper.vm.events).toEqual([
+            { id: 'new_release', enabled: true, name: 'New release', loading: false },
+            { id: 'new_note', enabled: true, name: 'New note', loading: false },
+          ]);
+        },
+      );
+
+      it('shows a toast message when the request fails', async () => {
+        mockAxios.onPut('/api/v4/notification_settings').reply(httpStatus.NOT_FOUND, {});
+        wrapper = createComponent();
+
+        wrapper.setData({
+          events: [
+            { id: 'new_release', enabled: true, name: 'New release', loading: false },
+            { id: 'new_note', enabled: false, name: 'New note', loading: false },
+          ],
+        });
+
+        await wrapper.vm.$nextTick();
+
+        findCheckboxAt(1).vm.$emit('change', true);
+
+        await waitForPromises();
+
+        expect(
+          mockToastShow,
+        ).toHaveBeenCalledWith(
+          'An error occured while updating the notification settings. Please try again.',
+          { type: 'error' },
+        );
+      });
+    });
+  });
+});

spec/frontend/notifications/components/notifications_dropdown_spec.js

@@ -7,6 +7,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 import httpStatus from '~/lib/utils/http_status';
 import NotificationsDropdown from '~/notifications/components/notifications_dropdown.vue';
 import NotificationsDropdownItem from '~/notifications/components/notifications_dropdown_item.vue';
+import CustomNotificationsModal from '~/notifications/components/custom_notifications_modal.vue';
 
 const mockDropdownItems = ['global', 'watch', 'participating', 'mention', 'disabled'];
 const mockToastShow = jest.fn();
@@ -14,17 +15,26 @@ const mockToastShow = jest.fn();
 describe('NotificationsDropdown', () => {
   let wrapper;
   let mockAxios;
+  let glModalDirective;
 
   function createComponent(injectedProperties = {}) {
+    glModalDirective = jest.fn();
+
     return shallowMount(NotificationsDropdown, {
       stubs: {
         GlButtonGroup,
         GlDropdown,
         GlDropdownItem,
         NotificationsDropdownItem,
+        CustomNotificationsModal,
       },
       directives: {
         GlTooltip: createMockDirective(),
+        glModal: {
+          bind(_, { value }) {
+            glModalDirective(value);
+          },
+        },
       },
       provide: {
         dropdownItems: mockDropdownItems,
@@ -94,6 +104,19 @@ describe('NotificationsDropdown', () => {
 
         expect(findButton().text()).toBe('');
       });
+
+      it('opens the modal when the user clicks the button', async () => {
+        jest.spyOn(axios, 'put');
+        mockAxios.onPut('/api/v4/notification_settings').reply(httpStatus.OK, {});
+
+        wrapper = createComponent({
+          initialNotificationLevel: 'custom',
+        });
+
+        findButton().vm.$emit('click');
+
+        expect(glModalDirective).toHaveBeenCalled();
+      });
     });
 
     describe('when notification level is not "custom"', () => {
@@ -236,5 +259,16 @@ describe('NotificationsDropdown', () => {
         { type: 'error' },
       );
     });
+
+    it('opens the modal when the user clicks on the "Custom" dropdown item', async () => {
+      mockAxios.onPut('/api/v4/notification_settings').reply(httpStatus.OK, {});
+      wrapper = createComponent();
+
+      const mockModalShow = jest.spyOn(wrapper.vm.$refs.customNotificationsModal, 'open');
+
+      await clickDropdownItemAt(5);
+
+      expect(mockModalShow).toHaveBeenCalled();
+    });
   });
 });