Commit ebd6e5f3 authored by Fatih Acet's avatar Fatih Acet

Merge branch '32916-browser-notifications-for-pipeline-running-in-a-mr-is-gone' into 'master'

Resolve "Browser notifications for pipeline running in a MR is gone"

Closes #32916

See merge request !11734
parents ffe52f01 13dd82b5
/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, consistent-return, prefer-arrow-callback, no-return-assign, object-shorthand, comma-dangle, no-param-reassign, max-len */
(function() {
(function(w) {
var notificationGranted, notifyMe, notifyPermissions;
notificationGranted = function(message, opts, onclick) {
var notification;
notification = new Notification(message, opts);
setTimeout(function() {
return notification.close();
// Hide the notification after X amount of seconds
}, 8000);
if (onclick) {
return notification.onclick = onclick;
}
};
notifyPermissions = function() {
if ('Notification' in window) {
return Notification.requestPermission();
}
};
notifyMe = function(message, body, icon, onclick) {
var opts;
opts = {
body: body,
icon: icon
};
// Let's check if the browser supports notifications
if (!('Notification' in window)) {
function notificationGranted(message, opts, onclick) {
var notification;
notification = new Notification(message, opts);
setTimeout(function() {
// Hide the notification after X amount of seconds
return notification.close();
}, 8000);
return notification.onclick = onclick || notification.close;
}
// do nothing
} else if (Notification.permission === 'granted') {
// If it's okay let's create a notification
function notifyPermissions() {
if ('Notification' in window) {
return Notification.requestPermission();
}
}
function notifyMe(message, body, icon, onclick) {
var opts;
opts = {
body: body,
icon: icon
};
// Let's check if the browser supports notifications
if (!('Notification' in window)) {
// do nothing
} else if (Notification.permission === 'granted') {
// If it's okay let's create a notification
return notificationGranted(message, opts, onclick);
} else if (Notification.permission !== 'denied') {
return Notification.requestPermission(function(permission) {
// If the user accepts, let's create a notification
if (permission === 'granted') {
return notificationGranted(message, opts, onclick);
} else if (Notification.permission !== 'denied') {
return Notification.requestPermission(function(permission) {
// If the user accepts, let's create a notification
if (permission === 'granted') {
return notificationGranted(message, opts, onclick);
}
});
}
};
w.notify = notifyMe;
return w.notifyPermissions = notifyPermissions;
})(window);
}).call(window);
});
}
}
const notify = {
notificationGranted,
notifyPermissions,
notifyMe,
};
export default notify;
......@@ -56,7 +56,6 @@ import './lib/utils/animate';
import './lib/utils/bootstrap_linked_tabs';
import './lib/utils/common_utils';
import './lib/utils/datetime_utility';
import './lib/utils/notify';
import './lib/utils/pretty_time';
import './lib/utils/text_utility';
import './lib/utils/url_utility';
......
......@@ -41,3 +41,4 @@ export { default as getStateKey } from './stores/get_state_key';
export { default as mrWidgetOptions } from './mr_widget_options';
export { default as stateMaps } from './stores/state_maps';
export { default as SquashBeforeMerge } from './components/states/mr_widget_squash_before_merge';
export { default as notify } from '../lib/utils/notify';
......@@ -4,6 +4,8 @@ import {
} from './dependencies';
document.addEventListener('DOMContentLoaded', () => {
gl.mrWidgetData.gitlabLogo = gon.gitlab_logo;
const vm = new Vue(mrWidgetOptions);
window.gl.mrWidget = {
......
......@@ -29,6 +29,7 @@ import {
eventHub,
stateMaps,
SquashBeforeMerge,
notify,
} from './dependencies';
export default {
......@@ -77,8 +78,10 @@ export default {
this.service.checkStatus()
.then(res => res.json())
.then((res) => {
this.handleNotification(res);
this.mr.setData(res);
this.setFavicon();
if (cb) {
cb.call(null, res);
}
......@@ -136,6 +139,15 @@ export default {
new Flash('Something went wrong. Please try again.'); // eslint-disable-line
});
},
handleNotification(data) {
if (data.ci_status === this.mr.ciStatus) return;
const label = data.pipeline.details.status.label;
const title = `Pipeline ${label}`;
const message = `Pipeline ${label} for "${data.title}"`;
notify.notifyMe(title, message, this.mr.gitlabLogo);
},
resumePolling() {
this.pollingInterval.resume();
},
......
......@@ -5,6 +5,8 @@ export default class MergeRequestStore {
constructor(data) {
this.sha = data.diff_head_sha;
this.gitlabLogo = data.gitlabLogo;
this.setData(data);
}
......
# rubocop:disable Metrics/AbcSize
module Gitlab
module GonHelper
def add_gon_variables
......@@ -13,6 +15,7 @@ module Gitlab
gon.sentry_dsn = current_application_settings.clientside_sentry_dsn if current_application_settings.clientside_sentry_enabled
gon.gitlab_url = Gitlab.config.gitlab.url
gon.revision = Gitlab::REVISION
gon.gitlab_logo = ActionController::Base.helpers.asset_path('gitlab_logo.png')
if current_user
gon.current_user_id = current_user.id
......
......@@ -2,6 +2,7 @@ import Vue from 'vue';
import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
import mrWidgetOptions from '~/vue_merge_request_widget/mr_widget_options';
import eventHub from '~/vue_merge_request_widget/event_hub';
import notify from '~/lib/utils/notify';
import mockData from './mock_data';
const createComponent = () => {
......@@ -107,6 +108,8 @@ describe('mrWidgetOptions', () => {
it('should tell service to check status', (done) => {
spyOn(vm.service, 'checkStatus').and.returnValue(returnPromise(mockData));
spyOn(vm.mr, 'setData');
spyOn(vm, 'handleNotification');
let isCbExecuted = false;
const cb = () => {
isCbExecuted = true;
......@@ -117,6 +120,7 @@ describe('mrWidgetOptions', () => {
setTimeout(() => {
expect(vm.service.checkStatus).toHaveBeenCalled();
expect(vm.mr.setData).toHaveBeenCalled();
expect(vm.handleNotification).toHaveBeenCalledWith(mockData);
expect(isCbExecuted).toBeTruthy();
done();
}, 333);
......@@ -254,6 +258,39 @@ describe('mrWidgetOptions', () => {
});
});
describe('handleNotification', () => {
const data = {
ci_status: 'running',
title: 'title',
pipeline: { details: { status: { label: 'running-label' } } },
};
beforeEach(() => {
spyOn(notify, 'notifyMe');
vm.mr.ciStatus = 'failed';
vm.mr.gitlabLogo = 'logo.png';
});
it('should call notifyMe', () => {
vm.handleNotification(data);
expect(notify.notifyMe).toHaveBeenCalledWith(
'Pipeline running-label',
'Pipeline running-label for "title"',
'logo.png',
);
});
it('should not call notifyMe if the status has not changed', () => {
vm.mr.ciStatus = data.ci_status;
vm.handleNotification(data);
expect(notify.notifyMe).not.toHaveBeenCalled();
});
});
describe('resumePolling', () => {
it('should call stopTimer on pollingInterval', () => {
spyOn(vm.pollingInterval, 'resume');
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment