PLT-1866/PLT-3509 Added links to download the native apps (#3651)

* PLT-1866 Added configurable links for native app downloads

* PLT-1866 Added native app download link to main menu

* PLT-3509 Added native app link to tutorial

* PLT-3509 Added native app link to welcome email

* PLT-3509 Made link to apps in welcome email conditional on being set

5 files changed, 200 insertions, 2 deletions

diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx
index 49df8f820..5c02f419e 100644
--- a/webapp/components/admin_console/admin_sidebar.jsx
+++ b/webapp/components/admin_console/admin_sidebar.jsx
@@ -581,6 +581,16 @@ export default class AdminSidebar extends React.Component {
                                         />
                                     }
                                 />
+                                <AdminSidebarSection
+                                    name='native_app_links'
+                                    title={
+                                        <FormattedMessage
+                                            id='admin.sidebar.nativeAppLinks'
+                                            defaultMessage='Native App Links'
+                                        />
+
+                                    }
+                                />
                             </AdminSidebarSection>
                             <AdminSidebarSection
                                 name='advanced'
diff --git a/webapp/components/admin_console/native_app_link_settings.jsx b/webapp/components/admin_console/native_app_link_settings.jsx
new file mode 100644
index 000000000..6c3acb14f
--- /dev/null
+++ b/webapp/components/admin_console/native_app_link_settings.jsx
@@ -0,0 +1,104 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import AdminSettings from './admin_settings.jsx';
+import {FormattedMessage} from 'react-intl';
+import SettingsGroup from './settings_group.jsx';
+import TextSetting from './text_setting.jsx';
+
+export default class NativeAppLinkSettings extends AdminSettings {
+    constructor(props) {
+        super(props);
+
+        this.getConfigFromState = this.getConfigFromState.bind(this);
+
+        this.renderSettings = this.renderSettings.bind(this);
+    }
+
+    getConfigFromState(config) {
+        config.NativeAppSettings.AppDownloadLink = this.state.appDownloadLink;
+        config.NativeAppSettings.AndroidAppDownloadLink = this.state.androidAppDownloadLink;
+        config.NativeAppSettings.IosAppDownloadLink = this.state.iosAppDownloadLink;
+
+        return config;
+    }
+
+    getStateFromConfig(config) {
+        return {
+            appDownloadLink: config.NativeAppSettings.AppDownloadLink,
+            androidAppDownloadLink: config.NativeAppSettings.AndroidAppDownloadLink,
+            iosAppDownloadLink: config.NativeAppSettings.IosAppDownloadLink
+        };
+    }
+
+    renderTitle() {
+        return (
+            <h3>
+                <FormattedMessage
+                    id='admin.customization.nativeAppLinks'
+                    defaultMessage='Native App Links'
+                />
+            </h3>
+        );
+    }
+
+    renderSettings() {
+        return (
+            <SettingsGroup>
+                <TextSetting
+                    id='appDownloadLink'
+                    label={
+                        <FormattedMessage
+                            id='admin.customization.appDownloadLinkTitle'
+                            defaultMessage='Mattermost Apps Download Page Link:'
+                        />
+                    }
+                    helpText={
+                        <FormattedMessage
+                            id='admin.customization.appDownloadLinkDesc'
+                            defaultMessage='Add a link to a download page for the Mattermost apps. When a link is present, an option to "Download Mattermost Apps" will be added in the Main Menu so users can find the download page. Leave this field blank to hide the option from the Main Menu.'
+                        />
+                    }
+                    value={this.state.appDownloadLink}
+                    onChange={this.handleChange}
+                />
+                <TextSetting
+                    id='androidAppDownloadLink'
+                    label={
+                        <FormattedMessage
+                            id='admin.customization.androidAppDownloadLinkTitle'
+                            defaultMessage='Android App Download Link:'
+                        />
+                    }
+                    helpText={
+                        <FormattedMessage
+                            id='admin.customization.androidAppDownloadLinkDesc'
+                            defaultMessage='Add a link to download the Android app. Users who access the site on a mobile web browser will be prompted with a page giving them the option to download the app. Leave this field blank to prevent the page from appearing.'
+                        />
+                    }
+                    value={this.state.androidAppDownloadLink}
+                    onChange={this.handleChange}
+                />
+                <TextSetting
+                    id='iosAppDownloadLink'
+                    label={
+                        <FormattedMessage
+                            id='admin.customization.iosAppDownloadLinkTitle'
+                            defaultMessage='iOS App Download Link:'
+                        />
+                    }
+                    helpText={
+                        <FormattedMessage
+                            id='admin.customization.iosAppDownloadLinkDesc'
+                            defaultMessage='Add a link to download the iOS app. Users who access the site on a mobile web browser will be prompted with a page giving them the option to download the app. Leave this field blank to prevent the page from appearing.'
+                        />
+                    }
+                    value={this.state.iosAppDownloadLink}
+                    onChange={this.handleChange}
+                />
+            </SettingsGroup>
+        );
+    }
+}
diff --git a/webapp/components/navbar_dropdown.jsx b/webapp/components/navbar_dropdown.jsx
index 4912b8ebf..81bd31269 100644
--- a/webapp/components/navbar_dropdown.jsx
+++ b/webapp/components/navbar_dropdown.jsx
@@ -332,6 +332,26 @@ export default class NavbarDropdown extends React.Component {
             );
         }
 
+        let nativeAppDivider = null;
+        let nativeAppLink = null;
+        if (global.window.mm_config.AppDownloadLink) {
+            nativeAppDivider = <li className='divider'/>;
+            nativeAppLink = (
+                <li>
+                    <Link
+                        target='_blank'
+                        rel='noopener noreferrer'
+                        to={global.window.mm_config.AppDownloadLink}
+                    >
+                        <FormattedMessage
+                            id='navbar_dropdown.nativeApps'
+                            defaultMessage='Download Native Apps'
+                        />
+                    </Link>
+                </li>
+            );
+        }
+
         return (
             <ul className='nav navbar-nav navbar-right'>
                 <li
@@ -403,6 +423,8 @@ export default class NavbarDropdown extends React.Component {
                                 />
                             </a>
                         </li>
+                        {nativeAppDivider}
+                        {nativeAppLink}
                         <UserSettingsModal
                             show={this.state.showUserSettingsModal}
                             onModalDismissed={() => this.setState({showUserSettingsModal: false})}
diff --git a/webapp/components/sidebar_right_menu.jsx b/webapp/components/sidebar_right_menu.jsx
index 25136e8bc..27e7c25d4 100644
--- a/webapp/components/sidebar_right_menu.jsx
+++ b/webapp/components/sidebar_right_menu.jsx
@@ -295,6 +295,25 @@ export default class SidebarRightMenu extends React.Component {
             this.openRightSidebar();
         }
 
+        let nativeAppLink = null;
+        if (global.window.mm_config.AppDownloadLink && !Utils.isMobileApp()) {
+            nativeAppLink = (
+                <li>
+                    <Link
+                        target='_blank'
+                        rel='noopener noreferrer'
+                        to={global.window.mm_config.AppDownloadLink}
+                    >
+                        <i className='icon fa fa-mobile'></i>
+                        <FormattedMessage
+                            id='sidebar_right_menu.nativeApps'
+                            defaultMessage='Download Native Apps'
+                        />
+                    </Link>
+                </li>
+            );
+        }
+
         return (
             <div
                 className='sidebar--menu'
@@ -378,6 +397,7 @@ export default class SidebarRightMenu extends React.Component {
                                 />
                             </a>
                         </li>
+                        {nativeAppLink}
                     </ul>
                 </div>
                 <UserSettingsModal
diff --git a/webapp/components/tutorial/tutorial_intro_screens.jsx b/webapp/components/tutorial/tutorial_intro_screens.jsx
index 639fa07b2..f435ff972 100644
--- a/webapp/components/tutorial/tutorial_intro_screens.jsx
+++ b/webapp/components/tutorial/tutorial_intro_screens.jsx
@@ -7,12 +7,12 @@ import PreferenceStore from 'stores/preference_store.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
 
-import Constants from 'utils/constants.jsx';
+import {Constants, Preferences} from 'utils/constants.jsx';
 
 import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
 import {browserHistory} from 'react-router/es6';
 
-const Preferences = Constants.Preferences;
+import AppIcons from 'images/appIcons.png';
 
 const NUM_SCREENS = 3;
 
@@ -91,6 +91,46 @@ export default class TutorialIntroScreens extends React.Component {
     createScreenTwo() {
         const circles = this.createCircles();
 
+        let appDownloadLink = null;
+        let appDownloadImage = null;
+        if (global.window.mm_config.AppDownloadLink) {
+            // not using a FormattedHTMLMessage here since mm_config.AppDownloadLink is configurable and could be used
+            // to inject HTML if we're not careful
+            appDownloadLink = (
+                <FormattedMessage
+                    id='tutorial_intro.mobileApps'
+                    defaultMessage='Install the apps for {link} for easy access and notifications on the go.'
+                    values={{
+                        link: (
+                            <a
+                                href={global.window.mm_config.AppDownloadLink}
+                                target='_blank'
+                                rel='noopener noreferrer'
+                            >
+                                <FormattedMessage
+                                    id='tutorial_intro.mobileAppsLinkText'
+                                    defaultMessage='PC, Mac, iOS and Android'
+                                />
+                            </a>
+                        )
+                    }}
+                />
+            );
+
+            appDownloadImage = (
+                <a
+                    href={global.window.mm_config.AppDownloadLink}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                >
+                    <img
+                        className='tutorial__app-icons'
+                        src={AppIcons}
+                    />
+                </a>
+            );
+        }
+
         return (
             <div>
                 <FormattedHTMLMessage
@@ -99,6 +139,8 @@ export default class TutorialIntroScreens extends React.Component {
                     <p>Communication happens in public discussion channels, private groups and direct messages.</p>
                     <p>Everything is archived and searchable from any web-enabled desktop, laptop or phone.</p>'
                 />
+                {appDownloadLink}
+                {appDownloadImage}
                 {circles}
             </div>
         );