Merge pull request #19346 from nextcloud/refactor/external-toast-deprecate
Use toasts from @nextcloud/dialogs, deprecate OCP.Toast and fix usages
This commit is contained in:
Roeland Jago Douma
GitHub
commit
5a82de1443
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -70,7 +70,7 @@
|
|||
import axios from '@nextcloud/axios'
|
||||
import debounce from 'debounce'
|
||||
import { generateOcsUrl } from '@nextcloud/router'
|
||||
import { getFilePickerBuilder } from '@nextcloud/dialogs'
|
||||
import { getFilePickerBuilder, showSuccess } from '@nextcloud/dialogs'
|
||||
import { Multiselect } from '@nextcloud/vue/dist/Components/Multiselect'
|
||||
import Vue from 'vue'
|
||||
|
||||
|
|
@ -210,7 +210,7 @@ export default {
|
|||
|
||||
this.directory = undefined
|
||||
this.selectedUser = null
|
||||
OCP.Toast.success(t('files', 'Ownership transfer request sent'))
|
||||
showSuccess(t('files', 'Ownership transfer request sent'))
|
||||
})
|
||||
.catch(error => {
|
||||
logger.error('Could not send ownership transfer request', { error })
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -28,6 +28,7 @@
|
|||
|
||||
<script>
|
||||
import { Multiselect } from '@nextcloud/vue/dist/Components/Multiselect'
|
||||
import { showWarning } from '@nextcloud/dialogs'
|
||||
|
||||
export default {
|
||||
name: 'Event',
|
||||
|
|
@ -57,7 +58,7 @@ export default {
|
|||
methods: {
|
||||
updateEvent(events) {
|
||||
if (events.length === 0) {
|
||||
window.OCP.Toast.warning(t('workflowengine', 'At least one event must be selected'))
|
||||
showWarning(t('workflowengine', 'At least one event must be selected'))
|
||||
return
|
||||
}
|
||||
const existingEntity = this.rule.entity
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -677,7 +677,6 @@ describe('Core base tests', function() {
|
|||
});
|
||||
});
|
||||
describe('Notifications', function() {
|
||||
var showSpy;
|
||||
var showHtmlSpy;
|
||||
var clock;
|
||||
|
||||
|
|
@ -694,68 +693,56 @@ describe('Core base tests', function() {
|
|||
|
||||
beforeEach(function() {
|
||||
clock = sinon.useFakeTimers();
|
||||
showSpy = sinon.spy(OCP.Toast, 'message');
|
||||
|
||||
$('#testArea').append('<div id="content"></div>');
|
||||
});
|
||||
afterEach(function() {
|
||||
showSpy.restore();
|
||||
// jump past animations
|
||||
clock.tick(10000);
|
||||
clock.restore();
|
||||
$('#testArea .toastify').remove();
|
||||
$('body .toastify').remove();
|
||||
});
|
||||
describe('showTemporary', function() {
|
||||
it('shows a plain text notification with default timeout', function() {
|
||||
OC.Notification.showTemporary('My notification test');
|
||||
|
||||
expect(showSpy.calledOnce).toEqual(true);
|
||||
expect(showSpy.firstCall.args[0]).toEqual('My notification test');
|
||||
//expect(showSpy.firstCall.args[1]).toEqual({isHTML: false, timeout: 7});
|
||||
|
||||
var $row = $('#testArea .toastify');
|
||||
var $row = $('body .toastify');
|
||||
expect($row.length).toEqual(1);
|
||||
expect(getNotificationText($row)).toEqual('My notification test');
|
||||
});
|
||||
it('shows a HTML notification with default timeout', function() {
|
||||
OC.Notification.showTemporary('<a>My notification test</a>', { isHTML: true });
|
||||
|
||||
expect(showSpy.calledOnce).toEqual(true);
|
||||
expect(showSpy.firstCall.args[0]).toEqual('<a>My notification test</a>');
|
||||
expect(showSpy.firstCall.args[1].isHTML).toEqual(true)
|
||||
|
||||
var $row = $('#testArea .toastify');
|
||||
var $row = $('body .toastify');
|
||||
expect($row.length).toEqual(1);
|
||||
expect(getNotificationText($row)).toEqual('<a>My notification test</a>');
|
||||
});
|
||||
it('hides itself after 7 seconds', function() {
|
||||
OC.Notification.showTemporary('');
|
||||
|
||||
var $row = $('#testArea .toastify');
|
||||
var $row = $('body .toastify');
|
||||
expect($row.length).toEqual(1);
|
||||
|
||||
// travel in time +7000 milliseconds
|
||||
clock.tick(7500);
|
||||
|
||||
$row = $('#testArea .toastify');
|
||||
$row = $('body .toastify');
|
||||
expect($row.length).toEqual(0);
|
||||
});
|
||||
it('hides itself after a given time', function() {
|
||||
OC.Notification.showTemporary('', {timeout: 10});
|
||||
|
||||
var $row = $('#testArea .toastify');
|
||||
var $row = $('body .toastify');
|
||||
expect($row.length).toEqual(1);
|
||||
|
||||
// travel in time +7000 milliseconds
|
||||
clock.tick(7500);
|
||||
|
||||
$row = $('#testArea .toastify');
|
||||
$row = $('body .toastify');
|
||||
expect($row.length).toEqual(1);
|
||||
|
||||
// travel in time another 4000 milliseconds
|
||||
clock.tick(4000);
|
||||
|
||||
$row = $('#testArea .toastify');
|
||||
$row = $('body .toastify');
|
||||
expect($row.length).toEqual(0);
|
||||
});
|
||||
});
|
||||
|
|
@ -763,24 +750,24 @@ describe('Core base tests', function() {
|
|||
it('hides itself after a given time', function() {
|
||||
OC.Notification.show('', {timeout: 10});
|
||||
|
||||
var $row = $('#testArea .toastify');
|
||||
var $row = $('body .toastify');
|
||||
expect($row.length).toEqual(1);
|
||||
|
||||
clock.tick(11500);
|
||||
|
||||
$row = $('#testArea .toastify');
|
||||
$row = $('body .toastify');
|
||||
expect($row.length).toEqual(0);
|
||||
});
|
||||
it('does not hide itself if no timeout given to show', function() {
|
||||
OC.Notification.show('');
|
||||
|
||||
var $row = $('#testArea .toastify');
|
||||
var $row = $('body .toastify');
|
||||
expect($row.length).toEqual(1);
|
||||
|
||||
// travel in time +1000 seconds
|
||||
clock.tick(1000000);
|
||||
|
||||
$row = $('#testArea .toastify');
|
||||
$row = $('body .toastify');
|
||||
expect($row.length).toEqual(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -788,24 +775,24 @@ describe('Core base tests', function() {
|
|||
it('hides itself after a given time', function() {
|
||||
OC.Notification.showHtml('<p></p>', {timeout: 10});
|
||||
|
||||
var $row = $('#testArea .toastify');
|
||||
var $row = $('body .toastify');
|
||||
expect($row.length).toEqual(1);
|
||||
|
||||
clock.tick(11500);
|
||||
|
||||
$row = $('#testArea .toastify');
|
||||
$row = $('body .toastify');
|
||||
expect($row.length).toEqual(0);
|
||||
});
|
||||
it('does not hide itself if no timeout given to show', function() {
|
||||
OC.Notification.showHtml('<p></p>');
|
||||
|
||||
var $row = $('#testArea .toastify');
|
||||
var $row = $('body .toastify');
|
||||
expect($row.length).toEqual(1);
|
||||
|
||||
// travel in time +1000 seconds
|
||||
clock.tick(1000000);
|
||||
|
||||
$row = $('#testArea .toastify');
|
||||
$row = $('body .toastify');
|
||||
expect($row.length).toEqual(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -815,7 +802,7 @@ describe('Core base tests', function() {
|
|||
|
||||
var notification = OC.Notification.showTemporary('');
|
||||
|
||||
var $row = $('#testArea .toastify');
|
||||
var $row = $('body .toastify');
|
||||
expect($row.length).toEqual(1);
|
||||
|
||||
OC.Notification.hide(notification, hideCallback);
|
||||
|
|
@ -823,7 +810,7 @@ describe('Core base tests', function() {
|
|||
// Give time to the hide animation to finish
|
||||
clock.tick(1000);
|
||||
|
||||
$row = $('#testArea .toastify');
|
||||
$row = $('body .toastify');
|
||||
expect($row.length).toEqual(0);
|
||||
|
||||
expect(hideCallback.calledOnce).toEqual(true);
|
||||
|
|
@ -833,7 +820,7 @@ describe('Core base tests', function() {
|
|||
|
||||
var notification = OC.Notification.show('', {timeout: 10});
|
||||
|
||||
var $row = $('#testArea .toastify');
|
||||
var $row = $('body .toastify');
|
||||
expect($row.length).toEqual(1);
|
||||
|
||||
OC.Notification.hide(notification, hideCallback);
|
||||
|
|
@ -841,7 +828,7 @@ describe('Core base tests', function() {
|
|||
// Give time to the hide animation to finish
|
||||
clock.tick(1000);
|
||||
|
||||
$row = $('#testArea .toastify');
|
||||
$row = $('body .toastify');
|
||||
expect($row.length).toEqual(0);
|
||||
|
||||
expect(hideCallback.calledOnce).toEqual(true);
|
||||
|
|
@ -851,7 +838,7 @@ describe('Core base tests', function() {
|
|||
|
||||
var notification = OC.Notification.show('');
|
||||
|
||||
var $row = $('#testArea .toastify');
|
||||
var $row = $('body .toastify');
|
||||
expect($row.length).toEqual(1);
|
||||
|
||||
OC.Notification.hide(notification, hideCallback);
|
||||
|
|
@ -859,7 +846,7 @@ describe('Core base tests', function() {
|
|||
// Give time to the hide animation to finish
|
||||
clock.tick(1000);
|
||||
|
||||
$row = $('#testArea .toastify');
|
||||
$row = $('body .toastify');
|
||||
expect($row.length).toEqual(0);
|
||||
|
||||
expect(hideCallback.calledOnce).toEqual(true);
|
||||
|
|
@ -870,7 +857,7 @@ describe('Core base tests', function() {
|
|||
var $row2 = OC.Notification.showTemporary('Two', {timeout: 2});
|
||||
var $row3 = OC.Notification.showTemporary('Three');
|
||||
|
||||
var $el = $('#testArea');
|
||||
var $el = $('body');
|
||||
var $rows = $el.find('.toastify');
|
||||
expect($rows.length).toEqual(3);
|
||||
|
||||
|
|
@ -890,7 +877,7 @@ describe('Core base tests', function() {
|
|||
var $row1 = OC.Notification.show('One');
|
||||
var $row2 = OC.Notification.show('Two');
|
||||
|
||||
var $el = $('#testArea');
|
||||
var $el = $('body');
|
||||
var $rows = $el.find('.toastify');
|
||||
expect($rows.length).toEqual(2);
|
||||
|
||||
|
|
|
|||
|
|
@ -21,10 +21,11 @@
|
|||
|
||||
import _ from 'underscore'
|
||||
import $ from 'jquery'
|
||||
import { showMessage } from '@nextcloud/dialogs'
|
||||
|
||||
/**
|
||||
* @todo Write documentation
|
||||
* @deprecated 17.0.0 use OCP.Toast
|
||||
* @deprecated 17.0.0 use the `@nextcloud/dialogs` package instead
|
||||
* @namespace OC.Notification
|
||||
*/
|
||||
export default {
|
||||
|
|
@ -35,7 +36,7 @@ export default {
|
|||
|
||||
/**
|
||||
* @param {Function} callback callback function
|
||||
* @deprecated 17.0.0 use OCP.Toast
|
||||
* @deprecated 17.0.0 use the `@nextcloud/dialogs` package
|
||||
*/
|
||||
setDefault: function(callback) {
|
||||
this.getDefaultNotificationFunction = callback
|
||||
|
|
@ -49,7 +50,7 @@ export default {
|
|||
*
|
||||
* @param {jQuery} [$row] notification row
|
||||
* @param {Function} [callback] callback
|
||||
* @deprecated 17.0.0 use OCP.Toast
|
||||
* @deprecated 17.0.0 use the `@nextcloud/dialogs` package
|
||||
*/
|
||||
hide: function($row, callback) {
|
||||
if (_.isFunction($row)) {
|
||||
|
|
@ -65,7 +66,11 @@ export default {
|
|||
|
||||
// remove the row directly
|
||||
$row.each(function() {
|
||||
$(this)[0].toastify.hideToast()
|
||||
if ($(this)[0].toastify) {
|
||||
$(this)[0].toastify.hideToast()
|
||||
} else {
|
||||
console.error('cannot hide toast because object is not set')
|
||||
}
|
||||
if (this === this.updatableNotification) {
|
||||
this.updatableNotification = null
|
||||
}
|
||||
|
|
@ -88,13 +93,14 @@ export default {
|
|||
* @param {string} [options.type] notification type
|
||||
* @param {int} [options.timeout=0] timeout value, defaults to 0 (permanent)
|
||||
* @returns {jQuery} jQuery element for notification row
|
||||
* @deprecated 17.0.0 use OCP.Toast
|
||||
* @deprecated 17.0.0 use the `@nextcloud/dialogs` package
|
||||
*/
|
||||
showHtml: function(html, options) {
|
||||
options = options || {}
|
||||
options.isHTML = true
|
||||
options.timeout = (!options.timeout) ? -1 : options.timeout
|
||||
const toast = window.OCP.Toast.message(html, options)
|
||||
const toast = showMessage(html, options)
|
||||
toast.toastElement.toastify = toast
|
||||
return $(toast.toastElement)
|
||||
},
|
||||
|
||||
|
|
@ -106,12 +112,13 @@ export default {
|
|||
* @param {string} [options.type] notification type
|
||||
* @param {int} [options.timeout=0] timeout value, defaults to 0 (permanent)
|
||||
* @returns {jQuery} jQuery element for notification row
|
||||
* @deprecated 17.0.0 use OCP.Toast
|
||||
* @deprecated 17.0.0 use the `@nextcloud/dialogs` package
|
||||
*/
|
||||
show: function(text, options) {
|
||||
options = options || {}
|
||||
options.timeout = (!options.timeout) ? -1 : options.timeout
|
||||
const toast = window.OCP.Toast.message(text, options)
|
||||
const toast = showMessage(text, options)
|
||||
toast.toastElement.toastify = toast
|
||||
return $(toast.toastElement)
|
||||
},
|
||||
|
||||
|
|
@ -120,13 +127,14 @@ export default {
|
|||
*
|
||||
* @param {string} text Message to display
|
||||
* @returns {jQuery} JQuery element for notificaiton row
|
||||
* @deprecated 17.0.0 use OCP.Toast
|
||||
* @deprecated 17.0.0 use the `@nextcloud/dialogs` package
|
||||
*/
|
||||
showUpdate: function(text) {
|
||||
if (this.updatableNotification) {
|
||||
this.updatableNotification.hideToast()
|
||||
}
|
||||
this.updatableNotification = OCP.Toast.message(text, { timeout: -1 })
|
||||
this.updatableNotification = showMessage(text, { timeout: -1 })
|
||||
this.updatableNotification.toastElement.toastify = this.updatableNotification
|
||||
return $(this.updatableNotification.toastElement)
|
||||
},
|
||||
|
||||
|
|
@ -140,19 +148,20 @@ export default {
|
|||
* @param {boolean} [options.isHTML=false] an indicator for HTML notifications (true) or text (false)
|
||||
* @param {string} [options.type] notification type
|
||||
* @returns {JQuery<any>} the toast element
|
||||
* @deprecated 17.0.0 use OCP.Toast
|
||||
* @deprecated 17.0.0 use the `@nextcloud/dialogs` package
|
||||
*/
|
||||
showTemporary: function(text, options) {
|
||||
options = options || {}
|
||||
options.timeout = options.timeout || 7
|
||||
const toast = window.OCP.Toast.message(text, options)
|
||||
const toast = showMessage(text, options)
|
||||
toast.toastElement.toastify = toast
|
||||
return $(toast.toastElement)
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns whether a notification is hidden.
|
||||
* @returns {boolean}
|
||||
* @deprecated 17.0.0 use OCP.Toast
|
||||
* @deprecated 17.0.0 use the `@nextcloud/dialogs` package
|
||||
*/
|
||||
isHidden: function() {
|
||||
return !$('#content').find('.toastify').length
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
/**
|
||||
*
|
||||
*/
|
||||
import * as AppConfig from './appconfig'
|
||||
import * as Comments from './comments'
|
||||
import Loader from './loader'
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
import Collaboration from './collaboration'
|
||||
import Toast from './toast'
|
||||
import * as WhatsNew from './whatsnew'
|
||||
import Toast from './toast'
|
||||
|
||||
/** @namespace OCP */
|
||||
export default {
|
||||
|
|
@ -21,6 +18,9 @@ export default {
|
|||
loadState,
|
||||
},
|
||||
Loader,
|
||||
/**
|
||||
* @deprecated 19.0.0 use the `@nextcloud/dialogs` package instead
|
||||
*/
|
||||
Toast,
|
||||
WhatsNew,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,70 +20,63 @@
|
|||
*
|
||||
*/
|
||||
|
||||
import Toastify from 'toastify-js'
|
||||
import {
|
||||
showError,
|
||||
showInfo, showMessage,
|
||||
showSuccess,
|
||||
showWarning,
|
||||
} from '@nextcloud/dialogs'
|
||||
|
||||
const TOAST_TYPE_CLASES = {
|
||||
error: 'toast-error',
|
||||
info: 'toast-info',
|
||||
warning: 'toast-warning',
|
||||
success: 'toast-success',
|
||||
permanent: 'permanent',
|
||||
}
|
||||
|
||||
const Toast = {
|
||||
|
||||
success(text, options = {}) {
|
||||
options.type = 'success'
|
||||
return this.message(text, options)
|
||||
export default {
|
||||
/**
|
||||
* @deprecated 19.0.0 use `showSuccess` from the `@nextcloud/dialogs` package instead
|
||||
*
|
||||
* @param {string} text the toast text
|
||||
* @param {object} options options
|
||||
* @returns {Toast}
|
||||
*/
|
||||
success(text, options) {
|
||||
return showSuccess(text, options)
|
||||
},
|
||||
|
||||
warning(text, options = {}) {
|
||||
options.type = 'warning'
|
||||
return this.message(text, options)
|
||||
/**
|
||||
* @deprecated 19.0.0 use `showWarning` from the `@nextcloud/dialogs` package instead
|
||||
*
|
||||
* @param {string} text the toast text
|
||||
* @param {object} options options
|
||||
* @returns {Toast}
|
||||
*/
|
||||
warning(text, options) {
|
||||
return showWarning(text, options)
|
||||
},
|
||||
|
||||
error(text, options = {}) {
|
||||
options.type = 'error'
|
||||
return this.message(text, options)
|
||||
/**
|
||||
* @deprecated 19.0.0 use `showError` from the `@nextcloud/dialogs` package instead
|
||||
*
|
||||
* @param {string} text the toast text
|
||||
* @param {object} options options
|
||||
* @returns {Toast}
|
||||
*/
|
||||
error(text, options) {
|
||||
return showError(text, options)
|
||||
},
|
||||
|
||||
info(text, options = {}) {
|
||||
options.type = 'info'
|
||||
return this.message(text, options)
|
||||
/**
|
||||
* @deprecated 19.0.0 use `showInfo` from the `@nextcloud/dialogs` package instead
|
||||
*
|
||||
* @param {string} text the toast text
|
||||
* @param {object} options options
|
||||
* @returns {Toast}
|
||||
*/
|
||||
info(text, options) {
|
||||
return showInfo(text, options)
|
||||
},
|
||||
|
||||
/**
|
||||
* @deprecated 19.0.0 use `showMessage` from the `@nextcloud/dialogs` package instead
|
||||
*
|
||||
* @param {string} text the toast text
|
||||
* @param {object} options options
|
||||
* @returns {Toast}
|
||||
*/
|
||||
message(text, options) {
|
||||
options = options || {}
|
||||
_.defaults(options, {
|
||||
timeout: 7,
|
||||
isHTML: false,
|
||||
type: undefined,
|
||||
close: true,
|
||||
callback: () => {},
|
||||
})
|
||||
if (!options.isHTML) {
|
||||
text = $('<div/>').text(text).html()
|
||||
}
|
||||
let classes = ''
|
||||
if (options.type) {
|
||||
classes = TOAST_TYPE_CLASES[options.type]
|
||||
}
|
||||
|
||||
const toast = Toastify({
|
||||
text: text,
|
||||
duration: options.timeout ? options.timeout * 1000 : null,
|
||||
callback: options.callback,
|
||||
close: options.close,
|
||||
gravity: 'top',
|
||||
selector: !window.TESTING ? 'content' : 'testArea',
|
||||
positionLeft: false,
|
||||
backgroundColor: '',
|
||||
className: 'toast ' + classes,
|
||||
})
|
||||
toast.showToast()
|
||||
// add toastify object to the element for reference in legacy OC.Notification
|
||||
toast.toastElement.toastify = toast
|
||||
return toast
|
||||
return showMessage(text, options)
|
||||
},
|
||||
|
||||
}
|
||||
export default Toast
|
||||
|
|
|
|||
|
|
@ -1816,11 +1816,6 @@
|
|||
"toastify-js": "^1.7.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": {
|
||||
"version": "3.6.4",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.4.tgz",
|
||||
"integrity": "sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw=="
|
||||
},
|
||||
"toastify-js": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.7.0.tgz",
|
||||
|
|
|
|||
|
|
@ -67,7 +67,6 @@
|
|||
"select2": "3.5.1",
|
||||
"snap.js": "^2.0.9",
|
||||
"strengthify": "git+https://github.com/MorrisJobke/strengthify.git#0.5.8",
|
||||
"toastify-js": "^1.6.2",
|
||||
"underscore": "^1.9.2",
|
||||
"url-search-params-polyfill": "^8.0.0",
|
||||
"v-tooltip": "^2.0.2",
|
||||
|
|
|
|||
Loading…
Reference in New Issue