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

* Add options to system console dropdown menu

* Updating modal css

model/config.go

@@ -75,12 +75,15 @@ const (
 
 	EMAIL_SETTINGS_DEFAULT_FEEDBACK_ORGANIZATION = ""
 
-	SUPPORT_SETTINGS_DEFAULT_TERMS_OF_SERVICE_LINK = "https://about.mattermost.com/default-terms/"
-	SUPPORT_SETTINGS_DEFAULT_PRIVACY_POLICY_LINK   = "https://about.mattermost.com/default-privacy-policy/"
-	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_SUPPORT_EMAIL         = "feedback@mattermost.com"
+	SUPPORT_SETTINGS_DEFAULT_TERMS_OF_SERVICE_LINK      = "https://about.mattermost.com/default-terms/"
+	SUPPORT_SETTINGS_DEFAULT_PRIVACY_POLICY_LINK        = "https://about.mattermost.com/default-privacy-policy/"
+	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 = ""
 	LDAP_SETTINGS_DEFAULT_LAST_NAME_ATTRIBUTE  = ""
@@ -274,12 +277,15 @@ type PrivacySettings struct {
 }
 
 type SupportSettings struct {
-	TermsOfServiceLink *string
-	PrivacyPolicyLink  *string
-	AboutLink          *string
-	HelpLink           *string
-	ReportAProblemLink *string
-	SupportEmail       *string
+	TermsOfServiceLink       *string
+	PrivacyPolicyLink        *string
+	AboutLink                *string
+	HelpLink                 *string
+	ReportAProblemLink       *string
+	AdministratorsGuideLink  *string
+	TroubleshootingForumLink *string
+	CommercialSupportLink    *string
+	SupportEmail             *string
 }
 
 type TeamSettings struct {
@@ -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;
+    }
 
-    .modal {
-        .about-modal {
+    .about-modal {
+        .modal-content {
             .modal-header {
                 background: transparent;
                 border: none;
@@ -25,69 +29,68 @@
                     margin: 0 4px 0 8px;
                 }
             }
+        }
 
+        .modal-body {
+            padding: 20px 25px 10px;
+        }
+
+        &.large {
             .modal-body {
-                padding: 20px 25px 5px;
+                padding-bottom: 20px;
             }
+        }
 
-            &.large {
-                .modal-body {
-                    padding-bottom: 20px;
-                }
-            }
+        .about-modal__content {
+            @include clearfix;
+            @include display-flex;
+            @include flex-direction(row);
+            padding: 1em 0 3em;
+        }
 
-            .about-modal__content {
-                @include clearfix;
-                @include display-flex;
-                @include flex-direction(row);
-                padding: 1em 0 3em;
-            }
+        .about-modal__copyright {
+            @include opacity(.6);
+            margin-top: .5em;
+        }
 
-            .about-modal__copyright {
-                @include opacity(.6);
-                margin-top: .5em;
-            }
+        .about-modal__footer {
+            font-size: 13.5px;
+        }
 
-            .about-modal__footer {
-                font-size: 13.5px;
-            }
+        .about-modal__title {
+            line-height: 1.5;
+            margin: 0 0 10px;
+        }
 
-            .about-modal__title {
-                line-height: 1.5;
-                margin: 0 0 10px;
-            }
+        .about-modal__subtitle {
+            @include opacity(.6);
+        }
 
-            .about-modal__subtitle {
-                @include opacity(.6);
-            }
+        .about-modal__hash {
+            @include opacity(.4);
+            font-size: .75em;
+            text-align: right;
 
-            .about-modal__hash {
-                @include opacity(.4);
-                font-size: .75em;
-                text-align: right;
-
-                p {
-                    &:first-child {
-                        float: left;
-                        text-align: left;
-                    }
-                }
-            }
-
-            .about-modal__logo {
-                @include opacity(.9);
-                padding: 0 40px 0 20px;
-
-                svg {
-                    height: 125px;
-                    width: 125px;
-                }
-
-                path {
-                    fill: inherit;
+            p {
+                &:first-child {
+                    float: left;
+                    text-align: left;
                 }
             }
         }
-    }
 
+        .about-modal__logo {
+            @include opacity(.9);
+            padding: 0 40px 0 20px;
+
+            svg {
+                height: 125px;
+                width: 125px;
+            }
+
+            path {
+                fill: inherit;
+            }
+        }
+    }
 }