From 924960bbcc191b9d48ae4650e380d2169aa4aa1f Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Tue, 2 Jan 2018 16:35:26 -0800
Subject: [PATCH] Fix positioning of CustomTimeIndicator

---
 ui/src/shared/components/LayoutCell.js       |  7 +-
 ui/src/shared/components/LayoutCellHeader.js | 15 +---
 ui/src/shared/components/LayoutCellMenu.js   | 92 ++++++++++----------
 ui/src/shared/components/LayoutRenderer.js   |  2 +-
 ui/src/style/pages/dashboards.scss           |  9 +-
 5 files changed, 59 insertions(+), 66 deletions(-)

diff --git a/ui/src/shared/components/LayoutCell.js b/ui/src/shared/components/LayoutCell.js
index 556638e1c9..92417b80c4 100644
--- a/ui/src/shared/components/LayoutCell.js
+++ b/ui/src/shared/components/LayoutCell.js
@@ -57,6 +57,7 @@ class LayoutCell extends Component {
         <Authorized requiredRole={EDITOR_ROLE}>
           <LayoutCellMenu
             cell={cell}
+            queries={queries}
             dataExists={!!celldata.length}
             isDeleting={isDeleting}
             isEditable={isEditable}
@@ -67,11 +68,7 @@ class LayoutCell extends Component {
             onCSVDownload={this.handleCSVDownload}
           />
         </Authorized>
-        <LayoutCellHeader
-          queries={queries}
-          cellName={cell.name}
-          isEditable={isEditable}
-        />
+        <LayoutCellHeader cellName={cell.name} isEditable={isEditable} />
         <div className="dash-graph--container">
           {queries.length
             ? children
diff --git a/ui/src/shared/components/LayoutCellHeader.js b/ui/src/shared/components/LayoutCellHeader.js
index 01300cc77a..cf7aa147dc 100644
--- a/ui/src/shared/components/LayoutCellHeader.js
+++ b/ui/src/shared/components/LayoutCellHeader.js
@@ -1,14 +1,11 @@
 import React, {PropTypes} from 'react'
-
-import CustomTimeIndicator from 'shared/components/CustomTimeIndicator'
-
 import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants/index'
 
-const LayoutCellHeader = ({queries, isEditable, cellName}) => {
+const LayoutCellHeader = ({isEditable, cellName}) => {
   const cellNameIsDefault = cellName === NEW_DEFAULT_DASHBOARD_CELL.name
 
   const headingClass = `dash-graph--heading ${isEditable
-    ? 'dash-graph--heading-draggable'
+    ? 'dash-graph--draggable dash-graph--heading-draggable'
     : ''}`
 
   return (
@@ -21,20 +18,14 @@ const LayoutCellHeader = ({queries, isEditable, cellName}) => {
         }
       >
         {cellName}
-        <div className="dash-graph--custom-indicators">
-          {queries && queries.length
-            ? <CustomTimeIndicator queries={queries} />
-            : null}
-        </div>
       </span>
     </div>
   )
 }
 
-const {arrayOf, bool, shape, string} = PropTypes
+const {bool, string} = PropTypes
 
 LayoutCellHeader.propTypes = {
-  queries: arrayOf(shape()),
   isEditable: bool,
   cellName: string,
 }
diff --git a/ui/src/shared/components/LayoutCellMenu.js b/ui/src/shared/components/LayoutCellMenu.js
index fb44f98b6e..013a93a876 100644
--- a/ui/src/shared/components/LayoutCellMenu.js
+++ b/ui/src/shared/components/LayoutCellMenu.js
@@ -1,61 +1,62 @@
 import React, {PropTypes} from 'react'
 import OnClickOutside from 'react-onclickoutside'
+import CustomTimeIndicator from 'shared/components/CustomTimeIndicator'
 
 const LayoutCellMenu = OnClickOutside(
   ({
-    isDeleting,
-    onEdit,
-    onDeleteClick,
-    onDelete,
-    onCSVDownload,
-    dataExists,
     cell,
+    onEdit,
+    queries,
+    onDelete,
+    isEditable,
+    dataExists,
+    isDeleting,
+    onDeleteClick,
+    onCSVDownload,
   }) =>
-    <div
-      className={
-        isDeleting
-          ? 'dash-graph-context dash-graph-context__deleting'
-          : 'dash-graph-context'
-      }
-    >
-      <div className="dash-graph-context--button" onClick={onEdit(cell)}>
-        <span className="icon pencil" />
+    <div className="dash-graph-context">
+      <div
+        className={`${isEditable
+          ? 'dash-graph--custom-indicators dash-graph--draggable'
+          : 'dash-graph--custom-indicators'}`}
+      >
+        {queries && queries.length && <CustomTimeIndicator queries={queries} />}
       </div>
-      {dataExists
-        ? <div
-            className="dash-graph-context--button"
-            onClick={onCSVDownload(cell)}
-          >
-            <span className="icon download" />
+      {isEditable &&
+        <div clasnName="dash-graph--buttons">
+          <div className="dash-graph-context--button" onClick={onEdit(cell)}>
+            <span className="icon pencil" />
           </div>
-        : null}
-      {isDeleting
-        ? <div className="dash-graph-context--button active">
-            <span className="icon trash" />
+          {dataExists &&
             <div
-              className="dash-graph-context--confirm"
-              onClick={onDelete(cell)}
+              className="dash-graph-context--button"
+              onClick={onCSVDownload(cell)}
             >
-              Confirm
-            </div>
-          </div>
-        : <div className="dash-graph-context--button" onClick={onDeleteClick}>
-            <span className="icon trash" />
-          </div>}
+              <span className="icon download" />
+            </div>}
+          {isDeleting
+            ? <div className="dash-graph-context--button active">
+                <span className="icon trash" />
+                <div
+                  className="dash-graph-context--confirm"
+                  onClick={onDelete(cell)}
+                >
+                  Confirm
+                </div>
+              </div>
+            : <div
+                className="dash-graph-context--button"
+                onClick={onDeleteClick}
+              >
+                <span className="icon trash" />
+              </div>}
+        </div>}
     </div>
 )
 
-const LayoutCellMenuContainer = props => {
-  if (!props.isEditable) {
-    return null
-  }
+const {arrayOf, bool, func, shape} = PropTypes
 
-  return <LayoutCellMenu {...props} />
-}
-
-const {bool, func, shape} = PropTypes
-
-LayoutCellMenuContainer.propTypes = {
+LayoutCellMenu.propTypes = {
   isDeleting: bool,
   onEdit: func,
   onDelete: func,
@@ -63,8 +64,7 @@ LayoutCellMenuContainer.propTypes = {
   cell: shape(),
   isEditable: bool,
   dataExists: bool,
+  queries: arrayOf(shape()),
 }
 
-LayoutCellMenu.propTypes = LayoutCellMenuContainer.propTypes
-
-export default LayoutCellMenuContainer
+export default LayoutCellMenu
diff --git a/ui/src/shared/components/LayoutRenderer.js b/ui/src/shared/components/LayoutRenderer.js
index 1faf1cca6e..5f9b381f4e 100644
--- a/ui/src/shared/components/LayoutRenderer.js
+++ b/ui/src/shared/components/LayoutRenderer.js
@@ -106,7 +106,7 @@ class LayoutRenderer extends Component {
             useCSSTransforms={false}
             onResize={this.handleCellResize}
             onLayoutChange={this.handleLayoutChange}
-            draggableHandle={'.dash-graph--name'}
+            draggableHandle={'.dash-graph--draggable'}
             isDraggable={isDashboard}
             isResizable={isDashboard}
           >
diff --git a/ui/src/style/pages/dashboards.scss b/ui/src/style/pages/dashboards.scss
index ad92d00a8a..7cdf085a84 100644
--- a/ui/src/style/pages/dashboards.scss
+++ b/ui/src/style/pages/dashboards.scss
@@ -186,13 +186,15 @@ $dash-graph-options-arrow: 8px;
 .dash-graph--name.dash-graph--name__default {
   font-style: italic;
 }
+.dash-graph--draggable {
+  cursor: move !important;
+}
 .dash-graph--custom-indicators {
   height: 24px;
   border-radius: 3px;
-  position: absolute;
   top: 3px;
-  right: 0;
   display: flex;
+  cursor: default;
 
   > .custom-indicator,
   > .source-indicator {
@@ -225,6 +227,9 @@ $dash-graph-options-arrow: 8px;
   align-items: center;
   flex-wrap: nowrap;
 }
+.dash-graph-context--buttons {
+  display: flex;
+}
 .dash-graph-context--button {
   width: 24px;
   height: 24px;