[FIX] "Test Desktop Notifications" not triggering a notification (#13457)

* Import getAvatarUrlFromUsername from meteor/rocketchat:utils instead of meteor/rocketchat:ui-utils

* Update desktop notifications preference field

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -1001,6 +1001,7 @@
   "Desktop_Notifications_Duration": "Desktop Notifications Duration",
   "Desktop_Notifications_Duration_Description": "Seconds to display desktop notification. This may affect OS X Notification Center. Enter 0 to use default browser settings and not affect OS X Notification Center.",
   "Desktop_Notifications_Enabled": "Desktop Notifications are Enabled",
+  "Desktop_Notifications_Not_Enabled": "Desktop Notifications are Not Enabled",
   "Details": "Details",
   "Different_Style_For_User_Mentions": "Different style for user mentions",
   "Direct_message_someone": "Direct message someone",

packages/rocketchat-ui-account/client/accountPreferences.html

@@ -71,15 +71,24 @@
 						<div class="input-line double-col">
 							<label class="setting-label">{{_ "Desktop_Notifications"}}</label>
 							<div class="setting-field">
-								{{#if desktopNotificationEnabled}}
-									<label>{{_ "Desktop_Notifications_Enabled"}}</label>
-									<button class="button test-notifications"><i class="icon-comment-empty secondary-font-color"></i> <span>{{_ "Test_Desktop_Notifications"}}</span></button>
-								{{else}}
-									{{#if desktopNotificationDisabled}}
-										<label>{{_ "Desktop_Notifications_Disabled"}}</label>
+								<div>
+									{{#if desktopNotificationEnabled}}
+										<label>{{_ "Desktop_Notifications_Enabled"}}</label>
 									{{else}}
-										<button class="button enable-notifications"><i class="icon-comment-empty secondary-font-color"></i> <span>{{_ "Enable_Desktop_Notifications"}}</span></button>
+										{{#if desktopNotificationDisabled}}
+											<label>{{_ "Desktop_Notifications_Disabled"}}</label>
+										{{else}}
+											<label>{{_ "Desktop_Notifications_Not_Enabled"}}</label>
+										{{/if}}
 									{{/if}}
+								</div>
+
+								{{#if desktopNotificationEnabled}}
+									<button type="button" class="rc-button rc-button--primary js-test-notifications">{{_ "Test_Desktop_Notifications"}}</button>
+								{{else}}
+									{{#unless desktopNotificationDisabled}}
+										<button type="button" class="rc-button rc-button--primary js-enable-notifications">{{_ "Enable_Desktop_Notifications"}}</button>
+									{{/unless}}
 								{{/if}}
 							</div>
 						</div>

packages/rocketchat-ui-account/client/accountPreferences.js

@@ -289,9 +289,6 @@ Template.accountPreferences.events({
 	'change input[name=useEmojis]'(e, t) {
 		t.useEmojis.set($(e.currentTarget).val() === '1');
 	},
-	'click .enable-notifications'() {
-		KonchatNotification.getDesktopPermission();
-	},
 	'click .download-my-data'(e, t) {
 		e.preventDefault();
 		t.downloadMyData();
@@ -300,7 +297,7 @@ Template.accountPreferences.events({
 		e.preventDefault();
 		t.exportMyData();
 	},
-	'click .test-notifications'(e) {
+	'click .js-test-notifications'(e) {
 		e.preventDefault();
 		KonchatNotification.notify({
 			duration: $('input[name=desktopNotificationDuration]').val(),
@@ -310,6 +307,9 @@ Template.accountPreferences.events({
 			text: TAPi18n.__('This_is_a_desktop_notification'),
 		});
 	},
+	'click .js-enable-notifications'() {
+		KonchatNotification.getDesktopPermission();
+	},
 	'change .audio'(e) {
 		e.preventDefault();
 		const audio = $(e.currentTarget).val();

packages/rocketchat-ui/client/lib/notification.js

@@ -10,7 +10,7 @@ import s from 'underscore.string';
 import { e2e } from 'meteor/rocketchat:e2e';
 import { Users, ChatSubscription } from 'meteor/rocketchat:models';
 import { getUserPreference } from 'meteor/rocketchat:utils';
-import { getAvatarUrlFromUsername } from 'meteor/rocketchat:ui-utils';
+import { getAvatarUrlFromUsername } from 'meteor/rocketchat:utils';
 import { promises } from 'meteor/rocketchat:promises';
 import { getAvatarAsPng } from './avatar';