[PLT-5440] Add Options to System Console Dropdown Menu (#5939)

* Add options to system console dropdown menu

* Updating modal css

model/config.go

@@ -80,6 +80,9 @@ const (
 	SUPPORT_SETTINGS_DEFAULT_ABOUT_LINK                 = "https://about.mattermost.com/default-about/"
 	SUPPORT_SETTINGS_DEFAULT_HELP_LINK                  = "https://about.mattermost.com/default-help/"
 	SUPPORT_SETTINGS_DEFAULT_REPORT_A_PROBLEM_LINK      = "https://about.mattermost.com/default-report-a-problem/"
+	SUPPORT_SETTINGS_DEFAULT_ADMINISTRATORS_GUIDE_LINK  = "https://about.mattermost.com/administrators-guide/"
+	SUPPORT_SETTINGS_DEFAULT_TROUBLESHOOTING_FORUM_LINK = "https://about.mattermost.com/troubleshooting-forum/"
+	SUPPORT_SETTINGS_DEFAULT_COMMERCIAL_SUPPORT_LINK    = "https://about.mattermost.com/commercial-support/"
 	SUPPORT_SETTINGS_DEFAULT_SUPPORT_EMAIL              = "feedback@mattermost.com"
 
 	LDAP_SETTINGS_DEFAULT_FIRST_NAME_ATTRIBUTE = ""
@@ -279,6 +282,9 @@ type SupportSettings struct {
 	AboutLink                *string
 	HelpLink                 *string
 	ReportAProblemLink       *string
+	AdministratorsGuideLink  *string
+	TroubleshootingForumLink *string
+	CommercialSupportLink    *string
 	SupportEmail             *string
 }
 
@@ -750,6 +756,33 @@ func (o *Config) SetDefaults() {
 		*o.SupportSettings.ReportAProblemLink = SUPPORT_SETTINGS_DEFAULT_REPORT_A_PROBLEM_LINK
 	}
 
+	if !IsSafeLink(o.SupportSettings.AdministratorsGuideLink) {
+		*o.SupportSettings.AdministratorsGuideLink = ""
+	}
+
+	if o.SupportSettings.AdministratorsGuideLink == nil {
+		o.SupportSettings.AdministratorsGuideLink = new(string)
+		*o.SupportSettings.AdministratorsGuideLink = SUPPORT_SETTINGS_DEFAULT_ADMINISTRATORS_GUIDE_LINK
+	}
+
+	if !IsSafeLink(o.SupportSettings.TroubleshootingForumLink) {
+		*o.SupportSettings.TroubleshootingForumLink = ""
+	}
+
+	if o.SupportSettings.TroubleshootingForumLink == nil {
+		o.SupportSettings.TroubleshootingForumLink = new(string)
+		*o.SupportSettings.TroubleshootingForumLink = SUPPORT_SETTINGS_DEFAULT_TROUBLESHOOTING_FORUM_LINK
+	}
+
+	if !IsSafeLink(o.SupportSettings.CommercialSupportLink) {
+		*o.SupportSettings.CommercialSupportLink = ""
+	}
+
+	if o.SupportSettings.CommercialSupportLink == nil {
+		o.SupportSettings.CommercialSupportLink = new(string)
+		*o.SupportSettings.CommercialSupportLink = SUPPORT_SETTINGS_DEFAULT_COMMERCIAL_SUPPORT_LINK
+	}
+
 	if o.SupportSettings.SupportEmail == nil {
 		o.SupportSettings.SupportEmail = new(string)
 		*o.SupportSettings.SupportEmail = SUPPORT_SETTINGS_DEFAULT_SUPPORT_EMAIL

utils/config.go

@@ -403,6 +403,9 @@ func getClientConfig(c *model.Config) map[string]string {
 	props["AboutLink"] = *c.SupportSettings.AboutLink
 	props["HelpLink"] = *c.SupportSettings.HelpLink
 	props["ReportAProblemLink"] = *c.SupportSettings.ReportAProblemLink
+	props["AdministratorsGuideLink"] = *c.SupportSettings.AdministratorsGuideLink
+	props["TroubleshootingForumLink"] = *c.SupportSettings.TroubleshootingForumLink
+	props["CommercialSupportLink"] = *c.SupportSettings.CommercialSupportLink
 	props["SupportEmail"] = *c.SupportSettings.SupportEmail
 
 	props["EnableFileAttachments"] = strconv.FormatBool(*c.FileSettings.EnableFileAttachments)

webapp/components/admin_console/admin_navbar_dropdown.jsx

@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom';
 
 import TeamStore from 'stores/team_store.jsx';
 import Constants from 'utils/constants.jsx';
+import AboutBuildModal from 'components/about_build_modal.jsx';
 import {sortTeamsByDisplayName} from 'utils/team_utils.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
 
@@ -22,10 +23,13 @@ export default class AdminNavbarDropdown extends React.Component {
         super(props);
         this.blockToggle = false;
         this.onTeamChange = this.onTeamChange.bind(this);
+        this.handleAboutModal = this.handleAboutModal.bind(this);
+        this.aboutModalDismissed = this.aboutModalDismissed.bind(this);
 
         this.state = {
             teams: TeamStore.getAll(),
-            teamMembers: TeamStore.getMyTeamMembers()
+            teamMembers: TeamStore.getMyTeamMembers(),
+            showAboutModal: false
         };
     }
 
@@ -45,6 +49,16 @@ export default class AdminNavbarDropdown extends React.Component {
         TeamStore.removeChangeListener(this.onTeamChange);
     }
 
+    handleAboutModal(e) {
+        e.preventDefault();
+
+        this.setState({showAboutModal: true});
+    }
+
+    aboutModalDismissed() {
+        this.setState({showAboutModal: false});
+    }
+
     onTeamChange() {
         this.setState({
             teams: TeamStore.getAll(),
@@ -53,6 +67,7 @@ export default class AdminNavbarDropdown extends React.Component {
     }
 
     render() {
+        const config = global.window.mm_config;
         var teamsArray = [];  // Array of team objects
         var teams = [];  // Array of team components
         let switchTeams;
@@ -137,6 +152,54 @@ export default class AdminNavbarDropdown extends React.Component {
                             key='teamDiv'
                             className='divider'
                         />
+                        <li>
+                            <Link
+                                to={config.AdministratorsGuideLink}
+                                rel='noopener noreferrer'
+                                target='_blank'
+                            >
+                                <FormattedMessage
+                                    id='admin.nav.administratorsGuide'
+                                    defaultMessage='Administrator Guide'
+                                />
+                            </Link>
+                        </li>
+                        <li>
+                            <Link
+                                to={config.TroubleshootingForumLink}
+                                rel='noopener noreferrer'
+                                target='_blank'
+                            >
+                                <FormattedMessage
+                                    id='admin.nav.troubleshootingForum'
+                                    defaultMessage='Troubleshooting Forum'
+                                />
+                            </Link>
+                        </li>
+                        <li>
+                            <Link
+                                to={config.CommercialSupportLink}
+                                rel='noopener noreferrer'
+                                target='_blank'
+                            >
+                                <FormattedMessage
+                                    id='admin.nav.commercialSupport'
+                                    defaultMessage='Commercial Support'
+                                />
+                            </Link>
+                        </li>
+                        <li>
+                            <a
+                                href='#'
+                                onClick={this.handleAboutModal}
+                            >
+                                <FormattedMessage
+                                    id='navbar_dropdown.about'
+                                    defaultMessage='About Mattermost'
+                                />
+                            </a>
+                        </li>
+                        <li className='divider'/>
                         <li>
                             <a
                                 href='#'
@@ -149,6 +212,10 @@ export default class AdminNavbarDropdown extends React.Component {
                                 />
                             </a>
                         </li>
+                        <AboutBuildModal
+                            show={this.state.showAboutModal}
+                            onModalDismissed={this.aboutModalDismissed}
+                        />
                     </ul>
                 </li>
             </ul>

webapp/i18n/en.json

@@ -545,10 +545,13 @@
   "admin.mfa.bannerDesc": "<a href='https://docs.mattermost.com/deployment/auth.html' target='_blank'>Multi-factor authentication</a> is available for accounts with AD/LDAP or email login. If other login methods are used, MFA should be configured with the authentication provider.",
   "admin.mfa.cluster": "High",
   "admin.mfa.title": "Multi-factor Authentication",
+  "admin.nav.administratorsGuide": "Administrator's Guide",
+  "admin.nav.commercialSupport": "Commercial Support",
   "admin.nav.help": "Help",
   "admin.nav.logout": "Logout",
   "admin.nav.report": "Report a Problem",
   "admin.nav.switch": "Team Selection",
+  "admin.nav.troubleshootingForum": "Troubleshooting Forum",
   "admin.notifications.email": "Email",
   "admin.notifications.push": "Mobile Push",
   "admin.notifications.title": "Notification Settings",

webapp/sass/routes/_about-modal.scss

@@ -1,9 +1,13 @@
 @charset 'UTF-8';
 
-.app__body {
-
 .modal {
+    .modal-content {
+        @include box-shadow(0 0 10px rgba($black, .5));
+        border-radius: $border-rad;
+    }
+
     .about-modal {
+        .modal-content {
             .modal-header {
                 background: transparent;
                 border: none;
@@ -25,9 +29,10 @@
                     margin: 0 4px 0 8px;
                 }
             }
+        }
 
         .modal-body {
-                padding: 20px 25px 5px;
+            padding: 20px 25px 10px;
         }
 
         &.large {
@@ -89,5 +94,3 @@
         }
     }
 }
-
-}