Add BootstrapModalConfirm component (Graylog2#4686)

This provides the basis for a modal that acts in a similar way as a
window.confirm dialog box, but having more room to add information and
  not blocking any background execution.

graylog2-web-interface/src/components/bootstrap/BootstrapModalConfirm.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal } from 'react-bootstrap';
+
+import BootstrapModalWrapper from 'components/bootstrap/BootstrapModalWrapper';
+
+/**
+ * Component that displays a confirmation dialog box that the user can
+ * cancel or confirm.
+ */
+class BootstrapModalConfirm extends React.Component {
+  static propTypes = {
+    /** Indicates whether the modal should be shown by default or not. */
+    showModal: PropTypes.bool,
+    /** Title to use in the modal. */
+    title: PropTypes.string.isRequired,
+    /** Text to use in the cancel button. */
+    cancelButtonText: PropTypes.string,
+    /** Text to use in the confirmation button. */
+    confirmButtonText: PropTypes.string,
+    /** Function to call when the modal is opened. The function does not receive any arguments. */
+    onModalOpen: PropTypes.func,
+    /** Function to call when the modal is closed. The function does not receive any arguments. */
+    onModalClose: PropTypes.func,
+    /** Function to call when the action is not confirmed. The function does not receive any arguments. */
+    onCancel: PropTypes.func.isRequired,
+    /**
+     * Function to call when the action is confirmed. The function receives a callback function to close the modal
+     * dialog box as first argument.
+     */
+    onConfirm: PropTypes.func.isRequired,
+    /**
+     * React elements to display in the modal body. This should be the information the user has
+     * to confirm in order to proceed with the operation.
+     */
+    children: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element,
+    ]).isRequired,
+  };
+
+  static defaultProps = {
+    showModal: false,
+    cancelButtonText: 'Cancel',
+    confirmButtonText: 'Confirm',
+    onModalOpen: () => {},
+    onModalClose: () => {},
+    onCancel: () => {},
+    onConfirm: () => {},
+  };
+
+  onCancel = () => {
+    this.props.onCancel();
+    this.close();
+  };
+
+  onConfirm = () => {
+    this.props.onConfirm(this.close);
+  };
+
+  open = () => {
+    this.modal.open();
+  };
+
+  close = () => {
+    this.modal.close();
+  };
+
+  render() {
+    return (
+      <BootstrapModalWrapper ref={(c) => { this.modal = c; }}
+                             showModal={this.props.showModal}
+                             onOpen={this.props.onModalOpen}
+                             onClose={this.props.onModalClose}
+                             onHide={this.onCancel}>
+        <Modal.Header closeButton>
+          <Modal.Title>{this.props.title}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {this.props.children}
+        </Modal.Body>
+        <Modal.Footer>
+          <Button type="button" onClick={this.onCancel}>{this.props.cancelButtonText}</Button>
+          <Button type="button" onClick={this.onConfirm} bsStyle="primary">{this.props.confirmButtonText}</Button>
+        </Modal.Footer>
+      </BootstrapModalWrapper>
+    );
+  }
+}
+
+export default BootstrapModalConfirm;

graylog2-web-interface/src/components/bootstrap/BootstrapModalConfirm.md

@@ -0,0 +1,46 @@
+```js
+const React = require('react');
+const createReactClass = require('create-react-class');
+const { Button } = require('react-bootstrap');
+
+const BootstrapModalConfirmExample = createReactClass({
+  getInitialState() {
+    return {
+      confirmed: undefined,
+    };
+  },
+
+  openConfirmation() {
+    this.modal.open();
+  },
+
+  onCancel() {
+    this.setState({ confirmed: false });
+  },
+
+  onConfirm(callback) {
+    this.setState({ confirmed: true });
+    callback();
+  },
+
+  render() {
+    const { confirmed } = this.state;
+    return (
+      <div>
+        <p className={confirmed ? 'bg-success' : 'bg-danger'}>
+          {confirmed === undefined ? 'You did not open the confirmation yet' : confirmed ? 'You confirmed the action' : 'You did not confirm the action' }
+        </p>
+        <Button onClick={this.openConfirmation}>Open confirmation</Button>
+        <BootstrapModalConfirm ref={(c) => { this.modal = c; }}
+                               title="Confirm this"
+                               onConfirm={this.onConfirm}
+                               onCancel={this.onCancel}>
+           Are you sure you want to do this?
+        </BootstrapModalConfirm>
+      </div>
+    );
+  }
+});
+
+<BootstrapModalConfirmExample />
+```

graylog2-web-interface/src/components/bootstrap/index.js

@@ -1,5 +1,6 @@
 export { default as BootstrapAccordion } from './BootstrapAccordion';
 export { default as BootstrapAccordionGroup } from './BootstrapAccordionGroup';
+export { default as BootstrapModalConfirm } from './BootstrapModalConfirm';
 export { default as BootstrapModalForm } from './BootstrapModalForm';
 export { default as BootstrapModalWrapper } from './BootstrapModalWrapper';
 export { default as Input } from './Input';