From 34d289f1bc44a9773b1f026e56f05a32ed9b9121 Mon Sep 17 00:00:00 2001
From: Alex Paxton <thealexpaxton@gmail.com>
Date: Wed, 31 Jan 2018 16:02:39 -0800
Subject: [PATCH] Add ConfirmButton

Signed-off-by: Deniz Kusefoglu <denizk@gmail.com>
---
 ui/src/shared/components/ConfirmButton.js   | 87 +++++++++++++++++++++
 ui/src/style/chronograf.scss                |  1 +
 ui/src/style/components/confirm-button.scss | 55 +++++++++++++
 3 files changed, 143 insertions(+)
 create mode 100644 ui/src/shared/components/ConfirmButton.js
 create mode 100644 ui/src/style/components/confirm-button.scss

diff --git a/ui/src/shared/components/ConfirmButton.js b/ui/src/shared/components/ConfirmButton.js
new file mode 100644
index 000000000..6a8360432
--- /dev/null
+++ b/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)
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
index 5a377d739..bcdce9130 100644
--- a/ui/src/style/chronograf.scss
+++ b/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';
diff --git a/ui/src/style/components/confirm-button.scss b/ui/src/style/components/confirm-button.scss
new file mode 100644
index 000000000..9c7598109
--- /dev/null
+++ b/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;
+  }
+}