Add webapp/utils/url.jsx (#5285)

webapp/utils/utils.jsx got big and that caused a potential circular
dependency with webapp/stores/team_store.jsx. This change solves the
issue by introducing webapp/utils/url.jsx and moving URL-related
functions, which is not likely to depend on actions and stores, from
webapp/utils/utils.jsx.

webapp/components/change_url_modal.jsx

@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom';
 import Constants from 'utils/constants.jsx';
 import {Modal, Tooltip, OverlayTrigger} from 'react-bootstrap';
 import TeamStore from 'stores/team_store.jsx';
-import * as Utils from 'utils/utils.jsx';
+import * as URL from 'utils/url.jsx';
 
 import {FormattedMessage} from 'react-intl';
 
@@ -105,7 +105,7 @@ export default class ChangeUrlModal extends React.Component {
         e.preventDefault();
 
         const url = ReactDOM.findDOMNode(this.refs.urlinput).value;
-        const cleanedURL = Utils.cleanUpUrlable(url);
+        const cleanedURL = URL.cleanUpUrlable(url);
         if (cleanedURL !== url || url.length < 2 || url.indexOf('__') > -1) {
             this.setState({urlError: this.getURLError(url)});
             return;
@@ -136,7 +136,7 @@ export default class ChangeUrlModal extends React.Component {
         }
 
         const fullTeamUrl = TeamStore.getCurrentTeamUrl();
-        const teamURL = Utils.getShortenedTeamURL(TeamStore.getCurrentTeamUrl());
+        const teamURL = URL.getShortenedTeamURL(TeamStore.getCurrentTeamUrl());
         const urlTooltip = (
             <Tooltip id='urlTooltip'>{fullTeamUrl}</Tooltip>
         );

webapp/components/channel_header.jsx

@@ -28,6 +28,7 @@ import * as WebrtcActions from 'actions/webrtc_actions.jsx';
 import * as ChannelActions from 'actions/channel_actions.jsx';
 import * as Utils from 'utils/utils.jsx';
 import * as ChannelUtils from 'utils/channel_utils.jsx';
+import {getSiteURL} from 'utils/url.jsx';
 import * as TextFormatting from 'utils/text_formatting.jsx';
 import {getFlaggedPosts} from 'actions/post_actions.jsx';
 
@@ -582,7 +583,7 @@ export default class ChannelHeader extends React.Component {
 
         let headerText;
         if (this.state.enableFormatting) {
-            headerText = TextFormatting.formatText(channel.header, {singleline: true, mentionHighlight: false, siteURL: Utils.getSiteURL()});
+            headerText = TextFormatting.formatText(channel.header, {singleline: true, mentionHighlight: false, siteURL: getSiteURL()});
         } else {
             headerText = channel.header;
         }

webapp/components/create_team/components/display_name.jsx

@@ -3,8 +3,8 @@
 
 import {track} from 'actions/analytics_actions.jsx';
 
-import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
+import {cleanUpUrlable} from 'utils/url.jsx';
 
 import logoImage from 'images/logo.png';
 
@@ -50,7 +50,7 @@ export default class TeamSignupDisplayNamePage extends React.Component {
 
         this.props.state.wizard = 'team_url';
         this.props.state.team.display_name = displayName;
-        this.props.state.team.name = Utils.cleanUpUrlable(displayName);
+        this.props.state.team.name = cleanUpUrlable(displayName);
         this.props.updateParent(this.props.state);
     }
 

webapp/components/create_team/components/team_url.jsx

@@ -1,11 +1,10 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import * as Utils from 'utils/utils.jsx';
-
 import {checkIfTeamExists, createTeam} from 'actions/team_actions.jsx';
 import {track} from 'actions/analytics_actions.jsx';
 import Constants from 'utils/constants.jsx';
+import * as URL from 'utils/url.jsx';
 
 import logoImage from 'images/logo.png';
 
@@ -38,7 +37,7 @@ export default class TeamUrl extends React.Component {
         e.preventDefault();
 
         const name = ReactDOM.findDOMNode(this.refs.name).value.trim();
-        const cleanedName = Utils.cleanUpUrlable(name);
+        const cleanedName = URL.cleanUpUrlable(name);
         const urlRegex = /^[a-z]+([a-z\-0-9]+|(__)?)[a-z0-9]+$/g;
 
         if (!name) {
@@ -136,7 +135,7 @@ export default class TeamUrl extends React.Component {
             nameDivClass += ' has-error';
         }
 
-        const title = `${Utils.getSiteURL()}/`;
+        const title = `${URL.getSiteURL()}/`;
         const urlTooltip = (
             <Tooltip id='urlTooltip'>{title}</Tooltip>
         );

webapp/components/integrations/components/installed_incoming_webhook.jsx

@@ -4,7 +4,7 @@
 import React from 'react';
 
 import ChannelStore from 'stores/channel_store.jsx';
-import * as Utils from 'utils/utils.jsx';
+import {getSiteURL} from 'utils/url.jsx';
 
 import {FormattedMessage} from 'react-intl';
 
@@ -116,7 +116,7 @@ export default class InstalledIncomingWebhook extends React.Component {
                                 id='installed_integrations.url'
                                 defaultMessage='URL: {url}'
                                 values={{
-                                    url: Utils.getSiteURL() + '/hooks/' + incomingWebhook.id
+                                    url: getSiteURL() + '/hooks/' + incomingWebhook.id
                                 }}
                             />
                         </span>

webapp/components/message_wrapper.jsx

@@ -3,6 +3,7 @@
 
 import * as TextFormatting from 'utils/text_formatting.jsx';
 import * as Utils from 'utils/utils.jsx';
+import {getSiteURL} from 'utils/url.jsx';
 
 import React from 'react';
 
@@ -15,7 +16,7 @@ export default class MessageWrapper extends React.Component {
     render() {
         if (this.props.message) {
             const options = Object.assign({}, this.props.options, {
-                siteURL: Utils.getSiteURL()
+                siteURL: getSiteURL()
             });
 
             return (

webapp/components/new_channel_flow.jsx

@@ -4,6 +4,7 @@
 import * as Utils from 'utils/utils.jsx';
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
+import {cleanUpUrlable} from 'utils/url.jsx';
 
 import NewChannelModal from './new_channel_modal.jsx';
 import ChangeURLModal from './change_url_modal.jsx';
@@ -165,7 +166,7 @@ class NewChannelFlow extends React.Component {
             channelHeader: data.header
         });
         if (!this.state.nameModified) {
-            this.setState({channelName: Utils.cleanUpUrlable(data.displayName.trim())});
+            this.setState({channelName: cleanUpUrlable(data.displayName.trim())});
         }
     }
     render() {

webapp/components/post_view/components/post_message_view.jsx

@@ -8,6 +8,7 @@ import Constants from 'utils/constants.jsx';
 import * as PostUtils from 'utils/post_utils.jsx';
 import * as TextFormatting from 'utils/text_formatting.jsx';
 import * as Utils from 'utils/utils.jsx';
+import {getSiteURL} from 'utils/url.jsx';
 
 import {renderSystemMessage} from './system_message_helpers.jsx';
 
@@ -103,7 +104,7 @@ export default class PostMessageView extends React.Component {
 
         const options = Object.assign({}, this.props.options, {
             emojis: this.props.emojis,
-            siteURL: Utils.getSiteURL(),
+            siteURL: getSiteURL(),
             mentionKeys: this.props.mentionKeys,
             usernameMap: this.props.usernameMap,
             channelNamesMap: this.props.channelNamesMap,

webapp/components/rename_channel_modal.jsx

@@ -4,6 +4,7 @@
 import ReactDOM from 'react-dom';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
+import {cleanUpUrlable} from 'utils/url.jsx';
 
 import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
 import {updateChannel} from 'actions/channel_actions.jsx';
@@ -145,7 +146,7 @@ export class RenameChannelModal extends React.Component {
             state.nameError = formatMessage(holders.maxLength);
             state.invalid = true;
         } else {
-            const cleanedName = Utils.cleanUpUrlable(channel.name);
+            const cleanedName = cleanUpUrlable(channel.name);
             if (cleanedName === channel.name) {
                 state.nameError = '';
             } else {