Merge pull request #19346 from nextcloud/refactor/external-toast-deprecate

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,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);
 

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

core/src/OCP/toast.js

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

package-lock.json

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

package.json

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