Require user confirmation to delete a cell

ui/src/shared/components/ContextMenu.js

@@ -3,10 +3,19 @@ import classnames from 'classnames'
 import OnClickOutside from 'react-onclickoutside'
 
 const ContextMenu = OnClickOutside(
-  ({isOpen, toggleMenu, onEdit, onRename, onDelete, cell}) =>
+  ({
+    isOpen,
+    isDeleting,
+    toggleMenu,
+    onEdit,
+    onRename,
+    onDelete,
+    onDeleteClick,
+    cell,
+  }) =>
     <div
       className={classnames('dash-graph--options', {
-        'dash-graph--options-show': isOpen,
+        'dash-graph--options-show': isOpen || isDeleting,
       })}
       onClick={toggleMenu}
     >
@@ -16,7 +25,11 @@ const ContextMenu = OnClickOutside(
       <ul className="dash-graph--options-menu">
         <li onClick={onEdit(cell)}>Edit</li>
         <li onClick={onRename(cell.x, cell.y, cell.isEditing)}>Rename</li>
-        <li onClick={onDelete(cell)}>Delete</li>
+        {isDeleting
+          ? <li className="dash-graph--confirm-delete" onClick={onDelete(cell)}>
+              Confirm Delete
+            </li>
+          : <li onClick={onDeleteClick}>Delete</li>}
       </ul>
     </div>
 )
@@ -33,10 +46,12 @@ const {bool, func, shape} = PropTypes
 
 ContextMenuContainer.propTypes = {
   isOpen: bool,
+  isDeleting: bool,
   toggleMenu: func,
   onEdit: func,
   onRename: func,
   onDelete: func,
+  onDeleteClick: func,
   cell: shape(),
   isEditable: bool,
 }

ui/src/shared/components/NameableGraph.js

@@ -10,6 +10,7 @@ class NameableGraph extends Component {
     this.state = {
       isMenuOpen: false,
       cellName: props.cell.name,
+      isDeleting: false,
     }
   }
 
@@ -33,9 +34,14 @@ class NameableGraph extends Component {
   closeMenu = () => {
     this.setState({
       isMenuOpen: false,
+      isDeleting: false,
     })
   }
 
+  handleDeleteClick = () => {
+    this.setState({isDeleting: true})
+  }
+
   handleDeleteCell = cell => () => {
     this.props.onDeleteCell(cell)
   }
@@ -47,7 +53,7 @@ class NameableGraph extends Component {
   render() {
     const {cell, children, isEditable, onEditCell, onUpdateCell} = this.props
 
-    const {cellName, isMenuOpen} = this.state
+    const {cellName, isMenuOpen, isDeleting} = this.state
     const queries = _.get(cell, ['queries'], [])
 
     return (
@@ -62,9 +68,11 @@ class NameableGraph extends Component {
         />
         <ContextMenu
           cell={cell}
+          onDeleteClick={this.handleDeleteClick}
           onDelete={this.handleDeleteCell}
           onRename={!cell.isEditing && isEditable ? onEditCell : () => {}}
           toggleMenu={this.toggleMenu}
+          isDeleting={isDeleting}
           isOpen={isMenuOpen}
           isEditable={isEditable}
           handleClickOutside={this.closeMenu}

ui/src/style/pages/dashboards.scss

@@ -215,7 +215,7 @@ input.form-control.dash-graph--name-edit {
   list-style: none;
   padding: 0;
   margin: 0;
-  width: 90px;
+  width: auto;
   visibility: hidden;
   transition-property: all;
 
@@ -230,6 +230,7 @@ input.form-control.dash-graph--name-edit {
     margin: 0;
     text-align: left;
     color: $g15-platinum;
+    white-space: nowrap;
     opacity: 0;
     transition:
       opacity 0.25s ease,
@@ -263,6 +264,11 @@ input.form-control.dash-graph--name-edit {
     }
   }
 }
+.dash-graph--options-menu > li.dash-graph--confirm-delete {
+  color: $c-curacao;
+
+  &:hover {color: $c-dreamsicle;}
+}
 
 /* Menu Open State */
 .dash-graph--options.dash-graph--options-show {