Merge pull request #780 from hmhealey/plt258

PLT-258 Added help text to notification settings to say which browsers support them

2 files changed, 20 insertions, 2 deletions

diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx
index 83067240d..9eda68b38 100644
--- a/web/react/components/channel_notifications.jsx
+++ b/web/react/components/channel_notifications.jsx
@@ -163,10 +163,22 @@ export default class ChannelNotifications extends React.Component {
             }.bind(this);
 
             let curChannel = ChannelStore.get(this.state.channelId);
-            let extraInfo = (<span>These settings will override the global notification settings</span>);
+            let extraInfo = (
+                <span>
+                    These settings will override the global notification settings.
+                    <br/>
+                    Desktop notifications are available on Firefox, Safari, and Chrome.
+                </span>
+            );
 
             if (curChannel && curChannel.display_name) {
-                extraInfo = (<span>These settings will override the global notification settings for the <b>{curChannel.display_name}</b> channel</span>);
+                extraInfo = (
+                    <span>
+                        These settings will override the global notification settings for the <b>{curChannel.display_name}</b> channel.
+                        <br/>
+                        Desktop notifications are available on Firefox, Safari, and Chrome.
+                    </span>
+                );
             }
 
             return (
diff --git a/web/react/components/user_settings/user_settings_notifications.jsx b/web/react/components/user_settings/user_settings_notifications.jsx
index 8d364cde7..ba14f019f 100644
--- a/web/react/components/user_settings/user_settings_notifications.jsx
+++ b/web/react/components/user_settings/user_settings_notifications.jsx
@@ -265,9 +265,12 @@ export default class NotificationsTab extends React.Component {
                 e.preventDefault();
             }.bind(this);
 
+            const extraInfo = <span>{'Desktop notifications are available on Firefox, Safari, and Chrome.'}</span>;
+
             desktopSection = (
                 <SettingItemMax
                     title='Send desktop notifications'
+                    extraInfo={extraInfo}
                     inputs={inputs}
                     submit={this.handleSubmit}
                     server_error={serverError}
@@ -343,9 +346,12 @@ export default class NotificationsTab extends React.Component {
                 e.preventDefault();
             }.bind(this);
 
+            const extraInfo = <span>{'Desktop notification sounds are available on Firefox, Safari, Chrome, Internet Explorer, and Edge.'}</span>;
+
             soundSection = (
                 <SettingItemMax
                     title='Desktop notification sounds'
+                    extraInfo={extraInfo}
                     inputs={inputs}
                     submit={this.handleSubmit}
                     server_error={serverError}