Use toasts from @nextcloud/dialogs, deprecate OCP.Toast and fix usages

apps/files/src/components/TransferOwnershipDialogue.vue

@@ -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 })

apps/workflowengine/src/components/Event.vue

@@ -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

core/js/tests/specs/coreSpec.js

@@ -677,7 +677,6 @@ describe('Core base tests', function() {
 		});
 	});
 	describe('Notifications', function() {
-		var showSpy;
 		var showHtmlSpy;
 		var clock;
 
@@ -694,118 +693,106 @@ 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);
 			});
 		});
 		describe('show', 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);
 			});
 		});
 		describe('showHtml', 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,15 +802,15 @@ 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);
 
 				// 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,15 +820,15 @@ 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);
 
 				// 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,15 +838,15 @@ 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);
 
 				// 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);
 

core/src/OC/notification.js

@@ -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

core/src/OCP/index.js

@@ -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,
 }