Got rid of findDOMNode helper

client/.eslintrc

@@ -31,6 +31,5 @@
 
     "import/no-extraneous-dependencies": 0,
     "jsx-a11y/no-static-element-interactions": 0,
-    "react/no-find-dom-node": 0,
   }
 }

client/app/scripts/charts/node.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { Map as makeMap, List as makeList } from 'immutable';
@@ -167,8 +166,7 @@ class Node extends React.Component {
 
   handleMouseClick(ev) {
     ev.stopPropagation();
-    this.props.clickNode(this.props.id, this.props.label,
-      ReactDOM.findDOMNode(this.shapeRef).getBoundingClientRect());
+    this.props.clickNode(this.props.id, this.props.label, this.shapeRef.getBoundingClientRect());
   }
 
   handleMouseEnter() {

client/app/scripts/components/node-details/node-details-relatives-link.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 
 import { clickRelative } from '../../actions/app-actions';
@@ -10,18 +9,29 @@ class NodeDetailsRelativesLink extends React.Component {
   constructor(props, context) {
     super(props, context);
     this.handleClick = this.handleClick.bind(this);
+    this.saveNodeRef = this.saveNodeRef.bind(this);
   }
 
   handleClick(ev) {
     ev.preventDefault();
-    this.props.dispatch(clickRelative(this.props.id, this.props.topologyId,
-      this.props.label, ReactDOM.findDOMNode(this).getBoundingClientRect()));
+    this.props.dispatch(clickRelative(
+      this.props.id,
+      this.props.topologyId,
+      this.props.label,
+      this.node.getBoundingClientRect()
+    ));
+  }
+
+  saveNodeRef(ref) {
+    this.node = ref;
   }
 
   render() {
     const title = `View in ${this.props.topologyId}: ${this.props.label}`;
     return (
-      <span className="node-details-relatives-link" title={title} onClick={this.handleClick}>
+      <span
+        className="node-details-relatives-link" title={title}
+        onClick={this.handleClick} ref={this.saveNodeRef}>
         <MatchedText text={this.props.label} match={this.props.match} />
       </span>
     );

client/app/scripts/components/node-details/node-details-table-node-link.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 
 import { clickRelative } from '../../actions/app-actions';
@@ -9,12 +8,21 @@ class NodeDetailsTableNodeLink extends React.Component {
   constructor(props, context) {
     super(props, context);
     this.handleClick = this.handleClick.bind(this);
+    this.saveNodeRef = this.saveNodeRef.bind(this);
   }
 
   handleClick(ev) {
     ev.preventDefault();
-    this.props.dispatch(clickRelative(this.props.nodeId, this.props.topologyId,
-      this.props.label, ReactDOM.findDOMNode(this).getBoundingClientRect()));
+    this.props.dispatch(clickRelative(
+      this.props.nodeId,
+      this.props.topologyId,
+      this.props.label,
+      this.node.getBoundingClientRect()
+    ));
+  }
+
+  saveNodeRef(ref) {
+    this.node = ref;
   }
 
   render() {
@@ -24,8 +32,8 @@ class NodeDetailsTableNodeLink extends React.Component {
     if (linkable) {
       return (
         <span
-          className="node-details-table-node-link"
-          title={title} onClick={this.handleClick}>
+          className="node-details-table-node-link" title={title}
+          ref={this.saveNodeRef} onClick={this.handleClick}>
           {label}
         </span>
       );

client/app/scripts/components/node-details/node-details-table-row.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 
 import NodeDetailsTableNodeLink from './node-details-table-node-link';
@@ -79,15 +78,15 @@ export default class NodeDetailsTableRow extends React.Component {
     //
     this.mouseDragOrigin = [0, 0];
 
-    this.storeLabelRef = this.storeLabelRef.bind(this);
+    this.saveLabelElementRef = this.saveLabelElementRef.bind(this);
     this.onMouseDown = this.onMouseDown.bind(this);
     this.onMouseUp = this.onMouseUp.bind(this);
     this.onMouseEnter = this.onMouseEnter.bind(this);
     this.onMouseLeave = this.onMouseLeave.bind(this);
   }
 
-  storeLabelRef(ref) {
-    this.labelEl = ref;
+  saveLabelElementRef(ref) {
+    this.labelElement = ref;
   }
 
   onMouseEnter() {
@@ -118,7 +117,7 @@ export default class NodeDetailsTableRow extends React.Component {
     }
 
     const { node, onClick } = this.props;
-    onClick(ev, node, ReactDOM.findDOMNode(this.labelEl));
+    onClick(ev, node, this.labelElement);
   }
 
   render() {
@@ -138,7 +137,7 @@ export default class NodeDetailsTableRow extends React.Component {
         className={className}>
         <td
           className="node-details-table-node-label truncate"
-          ref={this.storeLabelRef} style={firstColumnStyle}>
+          ref={this.saveLabelElementRef} style={firstColumnStyle}>
           {this.props.renderIdCell(Object.assign(node, {topologyId, nodeId}))}
         </td>
         {values}

client/app/scripts/components/search.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { debounce } from 'lodash';
@@ -48,6 +47,7 @@ class Search extends React.Component {
     this.handleBlur = this.handleBlur.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
+    this.saveQueryInputRef = this.saveQueryInputRef.bind(this);
     this.doSearch = debounce(this.doSearch.bind(this), 200);
     this.state = {
       value: ''
@@ -81,6 +81,10 @@ class Search extends React.Component {
     this.props.doSearch(value);
   }
 
+  saveQueryInputRef(ref) {
+    this.queryInput = ref;
+  }
+
   componentWillReceiveProps(nextProps) {
     // when cleared from the outside, reset internal state
     if (this.props.searchQuery !== nextProps.searchQuery && nextProps.searchQuery === '') {
@@ -90,9 +94,9 @@ class Search extends React.Component {
 
   componentDidUpdate() {
     if (this.props.searchFocused) {
-      ReactDOM.findDOMNode(this.queryInput).focus();
+      this.queryInput.focus();
     } else if (!this.state.value) {
-      ReactDOM.findDOMNode(this.queryInput).blur();
+      this.queryInput.blur();
     }
   }
 
@@ -125,7 +129,7 @@ class Search extends React.Component {
               className="search-input-field" type="text" id={inputId}
               value={value} onChange={this.handleChange}
               onFocus={this.handleFocus} onBlur={this.handleBlur}
-              disabled={disabled} ref={(c) => { this.queryInput = c; }} />
+              disabled={disabled} ref={this.saveQueryInputRef} />
           </div>
           <div className="search-label">
             <i className="fa fa-search search-label-icon" />

client/app/scripts/components/terminal.js

@@ -1,7 +1,6 @@
 /* eslint no-return-assign: "off", react/jsx-no-bind: "off" */
 import debug from 'debug';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
 import { debounce } from 'lodash';
@@ -97,6 +96,8 @@ class Terminal extends React.Component {
 
     this.handleCloseClick = this.handleCloseClick.bind(this);
     this.handlePopoutTerminal = this.handlePopoutTerminal.bind(this);
+    this.saveInnerFlexRef = this.saveInnerFlexRef.bind(this);
+    this.saveNodeRef = this.saveNodeRef.bind(this);
     this.handleResize = this.handleResize.bind(this);
     this.handleResizeDebounced = debounce(this.handleResize, 500);
   }
@@ -183,7 +184,6 @@ class Terminal extends React.Component {
   }
 
   mountTerminal() {
-    const component = this;
     this.term = new Term({
       cols: this.state.cols,
       rows: this.state.rows,
@@ -192,8 +192,7 @@ class Terminal extends React.Component {
       scrollback: 10000,
     });
 
-    const innerNode = ReactDOM.findDOMNode(component.innerFlex);
-    this.term.open(innerNode);
+    this.term.open(this.innerFlex);
     this.term.on('data', (data) => {
       this.scrollToBottom();
       if (this.socket) {
@@ -263,16 +262,15 @@ class Terminal extends React.Component {
     const paramString = JSON.stringify(this.props);
     this.props.dispatch(clickCloseTerminal(this.getPipeId()));
 
-    const bcr = ReactDOM.findDOMNode(this).getBoundingClientRect();
+    const bcr = this.node.getBoundingClientRect();
     const minWidth = (this.state.characterWidth * 80) + (8 * 2);
     openNewWindow(`terminal.html#!/state/${paramString}`, bcr, minWidth);
   }
 
   handleResize() {
-    const innerNode = ReactDOM.findDOMNode(this.innerFlex);
     // scrollbar === 16px
-    const width = innerNode.clientWidth - (2 * 8) - 16;
-    const height = innerNode.clientHeight - (2 * 8);
+    const width = this.innerFlex.clientWidth - (2 * 8) - 16;
+    const height = this.innerFlex.clientHeight - (2 * 8);
     const cols = Math.floor(width / this.state.characterWidth);
     const rows = Math.floor(height / this.state.characterHeight);
 
@@ -358,6 +356,14 @@ class Terminal extends React.Component {
     );
   }
 
+  saveNodeRef(ref) {
+    this.node = ref;
+  }
+
+  saveInnerFlexRef(ref) {
+    this.innerFlex = ref;
+  }
+
   render() {
     const innerFlexStyle = {
       opacity: this.state.connected ? 1 : 0.8,
@@ -371,13 +377,10 @@ class Terminal extends React.Component {
     });
 
     return (
-      <div className="terminal-wrapper">
+      <div className="terminal-wrapper" ref={this.saveNodeRef}>
         {this.isEmbedded() && this.getTerminalHeader()}
-        <div
-          ref={ref => this.innerFlex = ref}
-          className={innerClassName}
-          style={innerFlexStyle} >
-          <div style={innerStyle} ref={ref => this.inner = ref} />
+        <div className={innerClassName} style={innerFlexStyle} ref={this.saveInnerFlexRef}>
+          <div style={innerStyle} />
         </div>
         {this.getTerminalStatusBar()}
       </div>