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
This commit is contained in:
commit
ebd6e5f351
|
@ -1,47 +1,48 @@
|
|||
/* 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);
|
||||
|
||||
// do nothing
|
||||
} else if (Notification.permission === 'granted') {
|
||||
// If it's okay let's create a notification
|
||||
return notification.onclick = onclick || notification.close;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
# 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');
|
||||
|
|
Loading…
Reference in New Issue