Add ConfirmButton

Signed-off-by: Deniz Kusefoglu <denizk@gmail.com>

ui/src/shared/components/ConfirmButton.js

@@ -0,0 +1,87 @@
+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,
+      customClass,
+    } = this.props
+    const {expanded} = this.state
+
+    const customClassString = customClass ? ` ${customClass}` : ''
+    const squareString = square ? ' btn-square' : ''
+    const expandedString = expanded ? ' expanded' : ''
+    const disabledString = disabled ? ' disabled' : ''
+
+    const classname = `confirm-button btn ${type} ${size}${customClassString}${squareString}${expandedString}${disabledString}`
+
+    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: false,
+}
+ConfirmButton.propTypes = {
+  text: string,
+  confirmText: string,
+  confirmAction: func.isRequired,
+  type: string,
+  size: string,
+  square: bool,
+  icon: string,
+  disabled: bool,
+  customClass: string,
+}
+
+export default OnClickOutside(ConfirmButton)

ui/src/style/chronograf.scss

@@ -28,6 +28,7 @@
 
 // Components
 @import 'components/ceo-display-options';
+@import 'components/confirm-button';
 @import 'components/confirm-buttons';
 @import 'components/code-mirror-theme';
 @import 'components/color-dropdown';

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

@@ -0,0 +1,55 @@
+/*
+    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;
+  }
+}