Refactor NameableGraph into LayoutCell

Chose a more semantic name for NameableGraph and its sub-components,
removed unused functions

ui/src/shared/components/LayoutCell.js

@@ -1,13 +1,10 @@
 import React, {Component, PropTypes} from 'react'
 import _ from 'lodash'
-import classnames from 'classnames'
 
-import ContextMenu from 'shared/components/ContextMenu'
-import CustomTimeIndicator from 'shared/components/CustomTimeIndicator'
+import LayoutCellMenu from 'shared/components/LayoutCellMenu'
+import LayoutCellHeader from 'shared/components/LayoutCellHeader'
 
-import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants/index'
-
-class NameableGraph extends Component {
+class LayoutCell extends Component {
   constructor(props) {
     super(props)
     this.state = {
@@ -50,11 +47,10 @@ class NameableGraph extends Component {
 
     const {cellName, isDeleting} = this.state
     const queries = _.get(cell, ['queries'], [])
-    const cellNameIsDefault = cellName === NEW_DEFAULT_DASHBOARD_CELL.name
 
     return (
       <div className="dash-graph">
-        <ContextMenu
+        <LayoutCellMenu
           cell={cell}
           onDeleteClick={this.handleDeleteClick}
           onDelete={this.handleDeleteCell}
@@ -63,24 +59,11 @@ class NameableGraph extends Component {
           handleClickOutside={this.closeMenu}
           onEdit={this.handleSummonOverlay}
         />
-        <div
-          className={classnames('dash-graph--heading', {
-            'dash-graph--heading-draggable': isEditable,
-          })}
-        >
-          <span
-            className={
-              cellNameIsDefault
-                ? 'dash-graph--name dash-graph--name__default'
-                : 'dash-graph--name'
-            }
-          >
-            {cellName}
-            {queries && queries.length
-              ? <CustomTimeIndicator queries={queries} />
-              : null}
-          </span>
-        </div>
+        <LayoutCellHeader
+          cellName={cellName}
+          queries={queries}
+          isEditable={isEditable}
+        />
         <div className="dash-graph--container">
           {queries.length
             ? children
@@ -100,7 +83,7 @@ class NameableGraph extends Component {
 
 const {array, bool, func, node, number, shape, string} = PropTypes
 
-NameableGraph.propTypes = {
+LayoutCell.propTypes = {
   cell: shape({
     name: string.isRequired,
     isEditing: bool,
@@ -115,4 +98,4 @@ NameableGraph.propTypes = {
   onCancelEditCell: func,
 }
 
-export default NameableGraph
+export default LayoutCell

ui/src/shared/components/LayoutCellHeader.js

@@ -0,0 +1,41 @@
+import React, {PropTypes} from 'react'
+import classnames from 'classnames'
+
+import CustomTimeIndicator from 'shared/components/CustomTimeIndicator'
+
+import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants/index'
+
+const LayoutCellHeader = ({queries, isEditable, cellName}) => {
+  const cellNameIsDefault = cellName === NEW_DEFAULT_DASHBOARD_CELL.name
+
+  return (
+    <div
+      className={classnames('dash-graph--heading', {
+        'dash-graph--heading-draggable': isEditable,
+      })}
+    >
+      <span
+        className={
+          cellNameIsDefault
+            ? 'dash-graph--name dash-graph--name__default'
+            : 'dash-graph--name'
+        }
+      >
+        {cellName}
+        {queries && queries.length
+          ? <CustomTimeIndicator queries={queries} />
+          : null}
+      </span>
+    </div>
+  )
+}
+
+const {array, bool, string} = PropTypes
+
+LayoutCellHeader.propTypes = {
+  queries: array,
+  isEditable: bool,
+  cellName: string,
+}
+
+export default LayoutCellHeader

ui/src/shared/components/LayoutCellMenu.js

@@ -1,7 +1,7 @@
 import React, {PropTypes} from 'react'
 import OnClickOutside from 'react-onclickoutside'
 
-const ContextMenu = OnClickOutside(
+const LayoutCellMenu = OnClickOutside(
   ({isDeleting, onEdit, onDeleteClick, onDelete, cell}) =>
     <div
       className={
@@ -29,17 +29,17 @@ const ContextMenu = OnClickOutside(
     </div>
 )
 
-const ContextMenuContainer = props => {
+const LayoutCellMenuContainer = props => {
   if (!props.isEditable) {
     return null
   }
 
-  return <ContextMenu {...props} />
+  return <LayoutCellMenu {...props} />
 }
 
 const {bool, func, shape} = PropTypes
 
-ContextMenuContainer.propTypes = {
+LayoutCellMenuContainer.propTypes = {
   isDeleting: bool,
   onEdit: func,
   onDelete: func,
@@ -48,6 +48,6 @@ ContextMenuContainer.propTypes = {
   isEditable: bool,
 }
 
-ContextMenu.propTypes = ContextMenuContainer.propTypes
+LayoutCellMenu.propTypes = LayoutCellMenuContainer.propTypes
 
-export default ContextMenuContainer
+export default LayoutCellMenuContainer

ui/src/shared/components/LayoutRenderer.js

@@ -2,7 +2,7 @@ import React, {Component, PropTypes} from 'react'
 
 import ReactGridLayout, {WidthProvider} from 'react-grid-layout'
 
-import NameableGraph from 'shared/components/NameableGraph'
+import LayoutCell from 'shared/components/LayoutCell'
 import RefreshingGraph from 'shared/components/RefreshingGraph'
 import AlertsApp from 'src/alerts/containers/AlertsApp'
 import NewsFeed from 'src/status/components/NewsFeed'
@@ -154,7 +154,7 @@ class LayoutRenderer extends Component {
 
       return (
         <div key={cell.i}>
-          <NameableGraph
+          <LayoutCell
             onCancelEditCell={onCancelEditCell}
             isEditable={isEditable}
             onEditCell={onEditCell}
@@ -175,7 +175,7 @@ class LayoutRenderer extends Component {
                   axes={axes}
                   onZoom={onZoom}
                 />}
-          </NameableGraph>
+          </LayoutCell>
         </div>
       )
     })

ui/src/shared/components/NameableGraphHeader.js

@@ -1,85 +0,0 @@
-import React, {PropTypes} from 'react'
-import classnames from 'classnames'
-
-import CustomTimeIndicator from 'shared/components/CustomTimeIndicator'
-
-const NameableGraphHeader = ({
-  onCancelEditCell,
-  isEditable,
-  onRenameCell,
-  onUpdateCell,
-  cell,
-  cellName,
-  cell: {i, name, queries},
-}) => {
-  const isInputVisible = isEditable && cell.isEditing
-  const className = classnames('dash-graph--heading', {
-    'dash-graph--heading-draggable': isEditable,
-  })
-  const onKeyUp = evt => {
-    if (evt.key === 'Enter') {
-      onUpdateCell({...cell, name: cellName})()
-    }
-
-    if (evt.key === 'Escape') {
-      onCancelEditCell(i)
-    }
-  }
-
-  return (
-    <div className={className}>
-      {isInputVisible
-        ? <GraphNameInput
-            value={cellName}
-            onChange={onRenameCell}
-            onBlur={onUpdateCell({...cell, name: cellName})}
-            onKeyUp={onKeyUp}
-          />
-        : <GraphName name={name} queries={queries} />}
-    </div>
-  )
-}
-
-const {arrayOf, bool, func, string, shape} = PropTypes
-
-NameableGraphHeader.propTypes = {
-  cell: shape(),
-  cellName: string,
-  onRenameCell: func,
-  onUpdateCell: func,
-  isEditable: bool,
-  onCancelEditCell: func,
-}
-
-const GraphName = ({name, queries}) =>
-  <span className="dash-graph--name">
-    {name}
-    {queries && queries.length
-      ? <CustomTimeIndicator queries={queries} />
-      : null}
-  </span>
-
-GraphName.propTypes = {
-  name: string,
-  queries: arrayOf(shape()),
-}
-
-const GraphNameInput = ({value, onKeyUp, onChange, onBlur}) =>
-  <input
-    className="form-control input-sm dash-graph--name-edit"
-    type="text"
-    value={value}
-    autoFocus={true}
-    onChange={onChange}
-    onBlur={onBlur}
-    onKeyUp={onKeyUp}
-  />
-
-GraphNameInput.propTypes = {
-  value: string,
-  onKeyUp: func,
-  onChange: func,
-  onBlur: func,
-}
-
-export default NameableGraphHeader