1 files changed, 16 insertions, 1 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>