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.

2 files changed, 711 insertions, 0 deletions

diff --git a/webapp/tests/components/admin_console/request_button/__snapshots__/request_button.test.jsx.snap b/webapp/tests/components/admin_console/request_button/__snapshots__/request_button.test.jsx.snap
new file mode 100644
index 000000000..108384950
--- /dev/null
+++ b/webapp/tests/components/admin_console/request_button/__snapshots__/request_button.test.jsx.snap
@@ -0,0 +1,496 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/admin_console/request_button/request_button.jsx should match snapshot 1`] = `
+<div
+  className="form-group reload-config"
+>
+  <div
+    className="col-sm-offset-4 col-sm-8"
+  >
+    <div>
+      <button
+        className="btn btn-default"
+        disabled={false}
+        onClick={[Function]}
+      >
+        <FormattedMessage
+          defaultMessage="Button Text"
+          id="test"
+          values={Object {}}
+        />
+      </button>
+    </div>
+    <div
+      className="help-text"
+    >
+      <FormattedMessage
+        defaultMessage="Help Text"
+        id="test"
+        values={Object {}}
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`components/admin_console/request_button/request_button.jsx should match snapshot with request error 1`] = `
+<RequestButton
+  buttonText={
+    <FormattedMessage
+      defaultMessage="Button Text"
+      id="test"
+      values={Object {}}
+    />
+  }
+  disabled={false}
+  errorMessage={
+    Object {
+      "defaultMessage": "Error Message: {error}",
+      "id": "error.message",
+    }
+  }
+  helpText={
+    <FormattedMessage
+      defaultMessage="Help Text"
+      id="test"
+      values={Object {}}
+    />
+  }
+  includeDetailedError={true}
+  intl={
+    Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "now": [Function],
+      "textComponent": "span",
+    }
+  }
+  requestAction={[Function]}
+  saveNeeded={false}
+  showSuccessMessage={true}
+  successMessage={
+    Object {
+      "defaultMessage": "Test Successful",
+      "id": "admin.requestButton.requestSuccess",
+    }
+  }
+>
+  <div
+    className="form-group reload-config"
+  >
+    <div
+      className="col-sm-offset-4 col-sm-8"
+    >
+      <div>
+        <button
+          className="btn btn-default"
+          disabled={false}
+          onClick={[Function]}
+        >
+          <FormattedMessage
+            defaultMessage="Button Text"
+            id="test"
+            values={Object {}}
+          >
+            <span>
+              Button Text
+            </span>
+          </FormattedMessage>
+        </button>
+        <div>
+          <div
+            className="alert alert-warning"
+          >
+            <i
+              className="fa fa-warning"
+            />
+            <FormattedMessage
+              defaultMessage="Error Message: {error}"
+              id="error.message"
+              values={
+                Object {
+                  "error": "__message__ - __detailed_error__",
+                }
+              }
+            >
+              <span>
+                Error Message: __message__ - __detailed_error__
+              </span>
+            </FormattedMessage>
+          </div>
+        </div>
+      </div>
+      <div
+        className="help-text"
+      >
+        <FormattedMessage
+          defaultMessage="Help Text"
+          id="test"
+          values={Object {}}
+        >
+          <span>
+            Help Text
+          </span>
+        </FormattedMessage>
+      </div>
+    </div>
+  </div>
+</RequestButton>
+`;
+
+exports[`components/admin_console/request_button/request_button.jsx should match snapshot with request error 2`] = `
+<RequestButton
+  buttonText={
+    <FormattedMessage
+      defaultMessage="Button Text"
+      id="test"
+      values={Object {}}
+    />
+  }
+  disabled={false}
+  errorMessage={
+    Object {
+      "defaultMessage": "Error Message: {error}",
+      "id": "error.message",
+    }
+  }
+  helpText={
+    <FormattedMessage
+      defaultMessage="Help Text"
+      id="test"
+      values={Object {}}
+    />
+  }
+  includeDetailedError={false}
+  intl={
+    Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "now": [Function],
+      "textComponent": "span",
+    }
+  }
+  requestAction={[Function]}
+  saveNeeded={false}
+  showSuccessMessage={true}
+  successMessage={
+    Object {
+      "defaultMessage": "Test Successful",
+      "id": "admin.requestButton.requestSuccess",
+    }
+  }
+>
+  <div
+    className="form-group reload-config"
+  >
+    <div
+      className="col-sm-offset-4 col-sm-8"
+    >
+      <div>
+        <button
+          className="btn btn-default"
+          disabled={false}
+          onClick={[Function]}
+        >
+          <FormattedMessage
+            defaultMessage="Button Text"
+            id="test"
+            values={Object {}}
+          >
+            <span>
+              Button Text
+            </span>
+          </FormattedMessage>
+        </button>
+        <div>
+          <div
+            className="alert alert-warning"
+          >
+            <i
+              className="fa fa-warning"
+            />
+            <FormattedMessage
+              defaultMessage="Error Message: {error}"
+              id="error.message"
+              values={
+                Object {
+                  "error": "__message__",
+                }
+              }
+            >
+              <span>
+                Error Message: __message__
+              </span>
+            </FormattedMessage>
+          </div>
+        </div>
+      </div>
+      <div
+        className="help-text"
+      >
+        <FormattedMessage
+          defaultMessage="Help Text"
+          id="test"
+          values={Object {}}
+        >
+          <span>
+            Help Text
+          </span>
+        </FormattedMessage>
+      </div>
+    </div>
+  </div>
+</RequestButton>
+`;
+
+exports[`components/admin_console/request_button/request_button.jsx should match snapshot with successMessage 1`] = `
+<RequestButton
+  buttonText={
+    <FormattedMessage
+      defaultMessage="Button Text"
+      id="test"
+      values={Object {}}
+    />
+  }
+  disabled={false}
+  errorMessage={
+    Object {
+      "defaultMessage": "Test Failure: {error}",
+      "id": "admin.requestButton.requestFailure",
+    }
+  }
+  helpText={
+    <FormattedMessage
+      defaultMessage="Help Text"
+      id="test"
+      values={Object {}}
+    />
+  }
+  includeDetailedError={false}
+  intl={
+    Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "now": [Function],
+      "textComponent": "span",
+    }
+  }
+  requestAction={[Function]}
+  saveNeeded={false}
+  showSuccessMessage={true}
+  successMessage={
+    Object {
+      "defaultMessage": "Success Message",
+      "id": "success.message",
+    }
+  }
+>
+  <div
+    className="form-group reload-config"
+  >
+    <div
+      className="col-sm-offset-4 col-sm-8"
+    >
+      <div>
+        <button
+          className="btn btn-default"
+          disabled={false}
+          onClick={[Function]}
+        >
+          <FormattedMessage
+            defaultMessage="Button Text"
+            id="test"
+            values={Object {}}
+          >
+            <span>
+              Button Text
+            </span>
+          </FormattedMessage>
+        </button>
+        <div>
+          <div
+            className="alert alert-success"
+          >
+            <i
+              className="fa fa-success"
+            />
+            <FormattedMessage
+              defaultMessage="Success Message"
+              id="success.message"
+              values={Object {}}
+            >
+              <span>
+                Success Message
+              </span>
+            </FormattedMessage>
+          </div>
+        </div>
+      </div>
+      <div
+        className="help-text"
+      >
+        <FormattedMessage
+          defaultMessage="Help Text"
+          id="test"
+          values={Object {}}
+        >
+          <span>
+            Help Text
+          </span>
+        </FormattedMessage>
+      </div>
+    </div>
+  </div>
+</RequestButton>
+`;
+
+exports[`components/admin_console/request_button/request_button.jsx should match snapshot with successMessage 2`] = `
+<RequestButton
+  buttonText={
+    <FormattedMessage
+      defaultMessage="Button Text"
+      id="test"
+      values={Object {}}
+    />
+  }
+  disabled={false}
+  errorMessage={
+    Object {
+      "defaultMessage": "Test Failure: {error}",
+      "id": "admin.requestButton.requestFailure",
+    }
+  }
+  helpText={
+    <FormattedMessage
+      defaultMessage="Help Text"
+      id="test"
+      values={Object {}}
+    />
+  }
+  includeDetailedError={false}
+  intl={
+    Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "now": [Function],
+      "textComponent": "span",
+    }
+  }
+  requestAction={[Function]}
+  saveNeeded={false}
+  showSuccessMessage={false}
+  successMessage={
+    Object {
+      "defaultMessage": "Success Message",
+      "id": "success.message",
+    }
+  }
+>
+  <div
+    className="form-group reload-config"
+  >
+    <div
+      className="col-sm-offset-4 col-sm-8"
+    >
+      <div>
+        <button
+          className="btn btn-default"
+          disabled={false}
+          onClick={[Function]}
+        >
+          <FormattedMessage
+            defaultMessage="Button Text"
+            id="test"
+            values={Object {}}
+          >
+            <span>
+              Button Text
+            </span>
+          </FormattedMessage>
+        </button>
+      </div>
+      <div
+        className="help-text"
+      >
+        <FormattedMessage
+          defaultMessage="Help Text"
+          id="test"
+          values={Object {}}
+        >
+          <span>
+            Help Text
+          </span>
+        </FormattedMessage>
+      </div>
+    </div>
+  </div>
+</RequestButton>
+`;
diff --git a/webapp/tests/components/admin_console/request_button/request_button.test.jsx b/webapp/tests/components/admin_console/request_button/request_button.test.jsx
new file mode 100644
index 000000000..3b3f4b40b
--- /dev/null
+++ b/webapp/tests/components/admin_console/request_button/request_button.test.jsx
@@ -0,0 +1,215 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import {shallow} from 'enzyme';
+import {mountWithIntl} from 'tests/helpers/intl-test-helper.jsx';
+
+import RequestButton from 'components/admin_console/request_button/request_button.jsx';
+
+describe('components/admin_console/request_button/request_button.jsx', () => {
+    test('should match snapshot', () => {
+        const emptyFunction = jest.fn();
+
+        const wrapper = shallow(
+            <RequestButton
+                requestAction={emptyFunction}
+                helpText={
+                    <FormattedMessage
+                        id='test'
+                        defaultMessage='Help Text'
+                    />
+                }
+                buttonText={
+                    <FormattedMessage
+                        id='test'
+                        defaultMessage='Button Text'
+                    />
+                }
+            />
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should call saveConfig and request actions when saveNeeded is true', () => {
+        const requestActionSuccess = jest.fn((success) => success());
+        const saveConfigActionSuccess = jest.fn((success) => success());
+
+        const wrapper = mountWithIntl(
+            <RequestButton
+                requestAction={requestActionSuccess}
+                helpText={
+                    <FormattedMessage
+                        id='test'
+                        defaultMessage='Help Text'
+                    />
+                }
+                buttonText={
+                    <FormattedMessage
+                        id='test'
+                        defaultMessage='Button Text'
+                    />
+                }
+                saveNeeded={false}
+                saveConfigAction={saveConfigActionSuccess}
+            />
+        );
+
+        wrapper.find('button').first().simulate('click');
+
+        expect(requestActionSuccess.mock.calls.length).toBe(1);
+        expect(saveConfigActionSuccess.mock.calls.length).toBe(0);
+    });
+
+    test('should call only request action when saveNeeded is false', () => {
+        const requestActionSuccess = jest.fn((success) => success());
+        const saveConfigActionSuccess = jest.fn((success) => success());
+
+        const wrapper = mountWithIntl(
+            <RequestButton
+                requestAction={requestActionSuccess}
+                helpText={
+                    <FormattedMessage
+                        id='test'
+                        defaultMessage='Help Text'
+                    />
+                }
+                buttonText={
+                    <FormattedMessage
+                        id='test'
+                        defaultMessage='Button Text'
+                    />
+                }
+                saveNeeded={true}
+                saveConfigAction={saveConfigActionSuccess}
+            />
+        );
+
+        wrapper.find('button').first().simulate('click');
+
+        expect(requestActionSuccess.mock.calls.length).toBe(1);
+        expect(saveConfigActionSuccess.mock.calls.length).toBe(1);
+    });
+
+    test('should match snapshot with successMessage', () => {
+        const requestActionSuccess = jest.fn((success) => success());
+
+        // Success & showSuccessMessage=true
+        const wrapper1 = mountWithIntl(
+            <RequestButton
+                requestAction={requestActionSuccess}
+                helpText={
+                    <FormattedMessage
+                        id='test'
+                        defaultMessage='Help Text'
+                    />
+                }
+                buttonText={
+                    <FormattedMessage
+                        id='test'
+                        defaultMessage='Button Text'
+                    />
+                }
+                showSuccessMessage={true}
+                successMessage={{
+                    id: 'success.message',
+                    defaultMessage: 'Success Message'
+                }}
+            />
+        );
+
+        wrapper1.find('button').first().simulate('click');
+        expect(wrapper1).toMatchSnapshot();
+
+        // Success & showSuccessMessage=false
+        const wrapper2 = mountWithIntl(
+            <RequestButton
+                requestAction={requestActionSuccess}
+                helpText={
+                    <FormattedMessage
+                        id='test'
+                        defaultMessage='Help Text'
+                    />
+                }
+                buttonText={
+                    <FormattedMessage
+                        id='test'
+                        defaultMessage='Button Text'
+                    />
+                }
+                showSuccessMessage={false}
+                successMessage={{
+                    id: 'success.message',
+                    defaultMessage: 'Success Message'
+                }}
+            />
+        );
+
+        wrapper2.find('button').first().simulate('click');
+
+        expect(wrapper2).toMatchSnapshot();
+    });
+
+    test('should match snapshot with request error', () => {
+        const requestActionFailure = jest.fn((success, error) => error({
+            message: '__message__',
+            detailed_error: '__detailed_error__'
+        }));
+
+        // Error & includeDetailedError=true
+        const wrapper1 = mountWithIntl(
+            <RequestButton
+                requestAction={requestActionFailure}
+                helpText={
+                    <FormattedMessage
+                        id='test'
+                        defaultMessage='Help Text'
+                    />
+                }
+                buttonText={
+                    <FormattedMessage
+                        id='test'
+                        defaultMessage='Button Text'
+                    />
+                }
+                includeDetailedError={true}
+                errorMessage={{
+                    id: 'error.message',
+                    defaultMessage: 'Error Message: {error}'
+                }}
+            />
+        );
+
+        wrapper1.find('button').first().simulate('click');
+        expect(wrapper1).toMatchSnapshot();
+
+        // Error & includeDetailedError=false
+        const wrapper2 = mountWithIntl(
+            <RequestButton
+                requestAction={requestActionFailure}
+                helpText={
+                    <FormattedMessage
+                        id='test'
+                        defaultMessage='Help Text'
+                    />
+                }
+                buttonText={
+                    <FormattedMessage
+                        id='test'
+                        defaultMessage='Button Text'
+                    />
+                }
+                errorMessage={{
+                    id: 'error.message',
+                    defaultMessage: 'Error Message: {error}'
+                }}
+            />
+        );
+
+        wrapper2.find('button').first().simulate('click');
+
+        expect(wrapper2).toMatchSnapshot();
+    });
+});