[PLT-6599] Add link to check Websocket port error message (#6743)

4 files changed, 12 insertions, 5 deletions

diff --git a/webapp/actions/websocket_actions.jsx b/webapp/actions/websocket_actions.jsx
index 72be226cc..52bd61006 100644
--- a/webapp/actions/websocket_actions.jsx
+++ b/webapp/actions/websocket_actions.jsx
@@ -13,7 +13,6 @@ import NotificationStore from 'stores/notification_store.jsx'; //eslint-disable-
 
 import WebSocketClient from 'client/web_websocket_client.jsx';
 import * as WebrtcActions from './webrtc_actions.jsx';
-import * as Utils from 'utils/utils.jsx';
 
 import * as GlobalActions from 'actions/global_actions.jsx';
 import {handleNewPost, loadProfilesForPosts} from 'actions/post_actions.jsx';
@@ -21,7 +20,7 @@ import {loadProfilesForSidebar} from 'actions/user_actions.jsx';
 import {loadChannelsForCurrentUser} from 'actions/channel_actions.jsx';
 import * as StatusActions from 'actions/status_actions.jsx';
 
-import {Constants, Preferences, SocketEvents, UserStatuses} from 'utils/constants.jsx';
+import {Constants, Preferences, SocketEvents, UserStatuses, ErrorBarTypes} from 'utils/constants.jsx';
 
 import {browserHistory} from 'react-router/es6';
 
@@ -124,7 +123,7 @@ function handleFirstConnect() {
 
 function handleClose(failCount) {
     if (failCount > MAX_WEBSOCKET_FAILS) {
-        ErrorStore.storeLastError({message: Utils.localizeMessage('channel_loader.socketError', 'Please check connection, Mattermost unreachable. If issue persists, ask administrator to check WebSocket port.')});
+        ErrorStore.storeLastError({message: ErrorBarTypes.WEBSOCKET_PORT_ERROR});
     }
 
     ErrorStore.setConnectionErrorCount(failCount);
diff --git a/webapp/components/announcement_bar/announcement_bar.jsx b/webapp/components/announcement_bar/announcement_bar.jsx
index 5d64d4d0f..0e731fd7c 100644
--- a/webapp/components/announcement_bar/announcement_bar.jsx
+++ b/webapp/components/announcement_bar/announcement_bar.jsx
@@ -254,6 +254,13 @@ export default class AnnouncementBar extends React.PureComponent {
                     defaultMessage='Enterprise license is expired and some features may be disabled. Please contact your System Administrator for details.'
                 />
             );
+        } else if (message === ErrorBarTypes.WEBSOCKET_PORT_ERROR) {
+            message = (
+                <FormattedHTMLMessage
+                    id={ErrorBarTypes.WEBSOCKET_PORT_ERROR}
+                    defaultMessage='Please check connection, Mattermost unreachable. If issue persists, ask administrator to <a href="https://about.mattermost.com/default-websocket-port-help" target="_blank">check WebSocket port</a>.'
+                />
+            );
         } else if (message === ErrorBarTypes.SITE_URL) {
             let id;
             let defaultMessage;
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 5c70493d8..038bb09cb 100755
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1121,7 +1121,7 @@
   "channel_invite.close": "Close",
   "channel_loader.connection_error": "There appears to be a problem with your internet connection.",
   "channel_loader.posted": "Posted",
-  "channel_loader.socketError": "Please check connection, Mattermost unreachable. If issue persists, ask administrator to check WebSocket port.",
+  "channel_loader.socketError": "Please check connection, Mattermost unreachable. If issue persists, ask administrator to <a href=\"https://about.mattermost.com/default-websocket-port-help\" target=\"_blank\">check WebSocket port</a>.",
   "channel_loader.someone": "Someone",
   "channel_loader.something": " did something new",
   "channel_loader.unknown_error": "We received an unexpected status code from the server.",
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index 1d49d1cae..f5e67bcaf 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -299,7 +299,8 @@ export const ErrorBarTypes = {
     LICENSE_EXPIRED: 'error_bar.license_expired',
     LICENSE_PAST_GRACE: 'error_bar.past_grace',
     PREVIEW_MODE: 'error_bar.preview_mode',
-    SITE_URL: 'error_bar.site_url'
+    SITE_URL: 'error_bar.site_url',
+    WEBSOCKET_PORT_ERROR: 'channel_loader.socketError'
 };
 
 export const Constants = {