Introduce ConfirmButton component

In essence the same as ConfirmDeleteButtons just adheres to the latest
patterns and is more compact

ui/src/shared/components/ConfirmButton.js

@@ -0,0 +1,74 @@
+import React, {Component, PropTypes} from 'react'
+
+import OnClickOutside from 'shared/components/OnClickOutside'
+
+class ConfirmButton extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      expanded: false,
+    }
+  }
+
+  handleButtonClick = () => {
+    if (this.props.disabled) {
+      return
+    }
+    this.setState({expanded: !this.state.expanded})
+  }
+
+  handleConfirmClick = () => {
+    this.setState({expanded: false})
+    this.props.confirmAction()
+  }
+
+  handleClickOutside() {
+    this.setState({expanded: false})
+  }
+
+  render() {
+    const {text, confirmText, type, size, square, icon, disabled} = this.props
+    const {expanded} = this.state
+
+    const classname = `confirm-button btn ${type} ${size}${square
+      ? ' btn-square'
+      : ''}${disabled ? ' disabled' : ''}${expanded ? ' expanded' : ''}`
+
+    return (
+      <div className={classname} onClick={this.handleButtonClick}>
+        {icon && <span className={`icon ${icon}`} />}
+        {text && text}
+        <div className="confirm-button--tooltip">
+          <div
+            className="confirm-button--confirmation"
+            onClick={this.handleConfirmClick}
+          >
+            {confirmText}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const {bool, func, string} = PropTypes
+
+ConfirmButton.defaultProps = {
+  confirmText: 'Confirm',
+  type: 'btn-default',
+  size: 'btn-sm',
+  square: true,
+}
+ConfirmButton.propTypes = {
+  text: string,
+  confirmText: string,
+  confirmAction: func.isRequired,
+  type: string,
+  size: string,
+  square: bool,
+  icon: string,
+  disabled: bool,
+}
+
+export default OnClickOutside(ConfirmButton)

ui/src/style/chronograf.scss

@@ -28,9 +28,10 @@
 
 // Components
 @import 'components/ceo-display-options';
-@import 'components/confirm-buttons';
 @import 'components/code-mirror-theme';
 @import 'components/color-dropdown';
+@import 'components/confirm-button';
+@import 'components/confirm-buttons';
 @import 'components/custom-time-range';
 @import 'components/dygraphs';
 @import 'components/fancy-scrollbars';

ui/src/style/components/confirm-button.scss

@@ -0,0 +1,57 @@
+/*
+    Confirm Button
+    ----------------------------------------------------------------------------
+    This button requires a second click to confirm the action
+*/
+
+.confirm-button {
+  .confirm-button--tooltip {
+    visibility: hidden;
+    transition: all;
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+.confirm-button--confirmation {
+  border-radius: 3px;
+  background-color: $c-curacao;
+  opacity: 0;
+  padding: 0 7px;
+  color: $g20-white;
+  font-size: 13px;
+  font-weight: 600;
+  text-align: center;
+  transition:
+    opacity 0.25s ease,
+    background-color 0.25s ease;
+
+  &:after {
+    content: '';
+    border: 8px solid transparent;
+    border-bottom-color: $c-curacao;
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: border-color 0.25s ease;
+    z-index: 100;
+  }
+
+  &:hover {
+    background-color: $c-dreamsicle;
+    cursor: pointer;
+  }
+  &:hover:after {
+    border-bottom-color: $c-dreamsicle;
+  }
+}
+.confirm-button.expanded {
+  .confirm-button--tooltip {
+    visibility: visible;
+  }
+  .confirm-button--confirmation {
+    opacity: 1;
+  }
+}