Refactor system console buttons into RequestButton component. (#6808)

Since I was going to make yet another button for the ElasticSearch test
config button, I refactored all of them to use a single common component
and tidied that component up and gave it some unit tests.

1 files changed, 45 insertions, 5 deletions

diff --git a/webapp/components/admin_console/ldap_settings.jsx b/webapp/components/admin_console/ldap_settings.jsx
index 87eab8004..9ffbe3b0e 100644
--- a/webapp/components/admin_console/ldap_settings.jsx
+++ b/webapp/components/admin_console/ldap_settings.jsx
@@ -7,13 +7,13 @@ import {ConnectionSecurityDropdownSettingLdap} from './connection_security_dropd
 import SettingsGroup from './settings_group.jsx';
 import TextSetting from './text_setting.jsx';
 
-import SyncNowButton from './sync_now_button.jsx';
-import LdapTestButton from './ldap_test_button.jsx';
+import {ldapSyncNow, ldapTest} from 'actions/admin_actions.jsx';
 
 import * as Utils from 'utils/utils.jsx';
 
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
+import RequestButton from './request_button/request_button.jsx';
 
 export default class LdapSettings extends AdminSettings {
     constructor(props) {
@@ -450,13 +450,53 @@ export default class LdapSettings extends AdminSettings {
                     onChange={this.handleChange}
                     disabled={!this.state.enable}
                 />
-                <SyncNowButton
+                <RequestButton
+                    requestAction={ldapSyncNow}
+                    helpText={
+                        <FormattedMessage
+                            id='admin.ldap.syncNowHelpText'
+                            defaultMessage='Initiates an AD/LDAP synchronization immediately.'
+                        />
+                    }
+                    buttonText={
+                        <FormattedMessage
+                            id='admin.ldap.sync_button'
+                            defaultMessage='AD/LDAP Synchronize Now'
+                        />
+                    }
                     disabled={!this.state.enable}
+                    showSuccessMessage={false}
+                    errorMessage={{
+                        id: 'admin.ldap.syncFailure',
+                        defaultMessage: 'Sync Failure: {error}'
+                    }}
+                    includeDetailedError={true}
                 />
-                <LdapTestButton
+                <RequestButton
+                    requestAction={ldapTest}
+                    helpText={
+                        <FormattedMessage
+                            id='admin.ldap.testHelpText'
+                            defaultMessage='Tests if the Mattermost server can connect to the AD/LDAP server specified. See log file for more detailed error messages.'
+                        />
+                    }
+                    buttonText={
+                        <FormattedMessage
+                            id='admin.ldap.ldap_test_button'
+                            defaultMessage='AD/LDAP Test'
+                        />
+                    }
                     disabled={!this.state.enable}
-                    submitFunction={this.doSubmit}
                     saveNeeded={this.state.saveNeeded}
+                    saveConfigAction={this.doSubmit}
+                    errorMessage={{
+                        id: 'admin.ldap.testFailure',
+                        defaultMessage: 'AD/LDAP Test Failure: {error}'
+                    }}
+                    successMessage={{
+                        id: 'admin.ldap.testSuccess',
+                        defaultMessage: 'AD/LDAP Test Successful'
+                    }}
                 />
             </SettingsGroup>
         );