From 97bd290f2c973066dbe7070b6eb3d615c6e4e2e0 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Fri, 23 Feb 2018 16:27:45 +0100
Subject: [PATCH] Add explicit tour-step-anchor classNames to Explore tour
 elements.

---
 .../scripts/charts/nodes-chart-elements.js    |  2 +-
 client/app/scripts/charts/nodes-grid.js       |  2 +-
 .../scripts/components/embedded-terminal.js   |  2 +-
 client/app/scripts/components/node-details.js | 14 +++-------
 .../node-details-control-button.js            |  2 +-
 .../node-details/node-details-table-row.js    |  2 +-
 client/app/scripts/components/sidebar.js      |  2 +-
 .../scripts/components/time-travel-wrapper.js | 28 ++++++++++---------
 client/app/scripts/components/topologies.js   | 11 ++------
 .../scripts/components/view-mode-button.js    |  2 +-
 .../scripts/components/view-mode-selector.js  |  2 +-
 client/app/styles/_base.scss                  |  2 +-
 12 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/client/app/scripts/charts/nodes-chart-elements.js b/client/app/scripts/charts/nodes-chart-elements.js
index dfcf6c071..e62fd1ab3 100644
--- a/client/app/scripts/charts/nodes-chart-elements.js
+++ b/client/app/scripts/charts/nodes-chart-elements.js
@@ -251,7 +251,7 @@ class NodesChartElements extends React.Component {
     ]).flatten(true);
 
     return (
-      <g className="nodes-chart-elements">
+      <g className="tour-step-anchor nodes-chart-elements">
         {orderedElements.map(this.renderElement)}
       </g>
     );
diff --git a/client/app/scripts/charts/nodes-grid.js b/client/app/scripts/charts/nodes-grid.js
index 2ba14e61c..6bff51b29 100644
--- a/client/app/scripts/charts/nodes-grid.js
+++ b/client/app/scripts/charts/nodes-grid.js
@@ -119,7 +119,7 @@ class NodesGrid extends React.Component {
     };
     // TODO: What are 24 and 18? Use a comment or extract into constants.
     const tbodyHeight = height - 24 - 18;
-    const className = 'scroll-body';
+    const className = 'tour-step-anchor scroll-body';
     const tbodyStyle = {
       height: `${tbodyHeight}px`,
     };
diff --git a/client/app/scripts/components/embedded-terminal.js b/client/app/scripts/components/embedded-terminal.js
index deed71308..45477725c 100644
--- a/client/app/scripts/components/embedded-terminal.js
+++ b/client/app/scripts/components/embedded-terminal.js
@@ -52,7 +52,7 @@ class EmeddedTerminal extends React.Component {
     // React unmount/remounts when key changes, this is important for cleaning up
     // the term.js and creating a new one for the new pipe.
     return (
-      <div className="terminal-embedded">
+      <div className="tour-step-anchor terminal-embedded">
         <div
           onTransitionEnd={this.handleTransitionEnd}
           className="terminal-animation-wrapper"
diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js
index 2ceaae025..d1e0d043b 100644
--- a/client/app/scripts/components/node-details.js
+++ b/client/app/scripts/components/node-details.js
@@ -31,18 +31,12 @@ function getTruncationText(count) {
 }
 
 class NodeDetails extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-    this.handleClickClose = this.handleClickClose.bind(this);
-    this.handleShowTopologyForNode = this.handleShowTopologyForNode.bind(this);
-  }
-
-  handleClickClose(ev) {
+  handleClickClose = (ev) => {
     ev.preventDefault();
     this.props.clickCloseDetails(this.props.nodeId);
   }
 
-  handleShowTopologyForNode(ev) {
+  handleShowTopologyForNode = (ev) => {
     ev.preventDefault();
     this.props.clickShowTopologyForNode(this.props.topologyId, this.props.nodeId);
   }
@@ -176,7 +170,7 @@ class NodeDetails extends React.Component {
     };
 
     return (
-      <div className="node-details">
+      <div className="tour-step-anchor node-details">
         {tools}
         <div className="node-details-header" style={styles.header}>
           <div className="node-details-header-wrapper">
@@ -192,7 +186,7 @@ class NodeDetails extends React.Component {
         </div>
 
         {showControls &&
-          <div className="node-details-controls-wrapper" style={styles.controls}>
+          <div className="tour-step-anchor node-details-controls-wrapper" style={styles.controls}>
             <NodeDetailsControls
               nodeId={this.props.nodeId}
               controls={details.controls}
diff --git a/client/app/scripts/components/node-details/node-details-control-button.js b/client/app/scripts/components/node-details/node-details-control-button.js
index 5e73ae69c..7ecd5fdfe 100644
--- a/client/app/scripts/components/node-details/node-details-control-button.js
+++ b/client/app/scripts/components/node-details/node-details-control-button.js
@@ -11,7 +11,7 @@ class NodeDetailsControlButton extends React.Component {
   }
 
   render() {
-    let className = `node-control-button fa ${this.props.control.icon}`;
+    let className = `tour-step-anchor node-control-button fa ${this.props.control.icon}`;
     if (this.props.pending) {
       className += ' node-control-button-pending';
     }
diff --git a/client/app/scripts/components/node-details/node-details-table-row.js b/client/app/scripts/components/node-details/node-details-table-row.js
index 428681465..b289f1650 100644
--- a/client/app/scripts/components/node-details/node-details-table-row.js
+++ b/client/app/scripts/components/node-details/node-details-table-row.js
@@ -162,7 +162,7 @@ export default class NodeDetailsTableRow extends React.Component {
     const values = renderValues(node, columns, columnStyles, timestamp, topologyId);
     const nodeId = node[nodeIdKey];
 
-    const className = classNames('node-details-table-node', {
+    const className = classNames('tour-step-anchor node-details-table-node', {
       selected: this.props.selected,
       focused: this.state.focused,
     });
diff --git a/client/app/scripts/components/sidebar.js b/client/app/scripts/components/sidebar.js
index 4e3f0c641..2274a0f0e 100644
--- a/client/app/scripts/components/sidebar.js
+++ b/client/app/scripts/components/sidebar.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export default function Sidebar({children, classNames}) {
-  const className = `sidebar ${classNames}`;
+  const className = `tour-step-anchor sidebar ${classNames}`;
   return (
     <div className={className}>
       {children}
diff --git a/client/app/scripts/components/time-travel-wrapper.js b/client/app/scripts/components/time-travel-wrapper.js
index f8c5e687d..6572203d0 100644
--- a/client/app/scripts/components/time-travel-wrapper.js
+++ b/client/app/scripts/components/time-travel-wrapper.js
@@ -71,19 +71,21 @@ class TimeTravelWrapper extends React.Component {
 
   render() {
     return (
-      <TimeTravel
-        hasLiveMode
-        showingLive={this.props.showingLive}
-        onChangeLiveMode={this.handleLiveModeChange}
-        timestamp={this.props.timestamp}
-        earliestTimestamp={this.props.earliestTimestamp}
-        onChangeTimestamp={this.props.jumpToTime}
-        onTimestampInputEdit={this.trackTimestampEdit}
-        onTimelinePanButtonClick={this.trackTimelinePanButtonClick}
-        onTimelineLabelClick={this.trackTimelineLabelClick}
-        onTimelineZoom={this.trackTimelineZoom}
-        onTimelinePan={this.trackTimelinePan}
-      />
+      <div className="tour-step-anchor time-travel-wrapper">
+        <TimeTravel
+          hasLiveMode
+          showingLive={this.props.showingLive}
+          onChangeLiveMode={this.handleLiveModeChange}
+          timestamp={this.props.timestamp}
+          earliestTimestamp={this.props.earliestTimestamp}
+          onChangeTimestamp={this.props.jumpToTime}
+          onTimestampInputEdit={this.trackTimestampEdit}
+          onTimelinePanButtonClick={this.trackTimelinePanButtonClick}
+          onTimelineLabelClick={this.trackTimelineLabelClick}
+          onTimelineZoom={this.trackTimelineZoom}
+          onTimelinePan={this.trackTimelinePan}
+        />
+      </div>
     );
   }
 }
diff --git a/client/app/scripts/components/topologies.js b/client/app/scripts/components/topologies.js
index 7fa49eb13..4bc65ef89 100644
--- a/client/app/scripts/components/topologies.js
+++ b/client/app/scripts/components/topologies.js
@@ -20,12 +20,7 @@ function basicTopologyInfo(topology, searchMatchCount) {
 }
 
 class Topologies extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-    this.onTopologyClick = this.onTopologyClick.bind(this);
-  }
-
-  onTopologyClick(ev, topology) {
+  onTopologyClick = (ev, topology) => {
     ev.preventDefault();
     trackAnalyticsEvent('scope.topology.selector.click', {
       topologyId: topology.get('id'),
@@ -63,7 +58,7 @@ class Topologies extends React.Component {
     const topologyId = topology.get('id');
     const isActive = topology === this.props.currentTopology;
     const searchMatchCount = this.props.searchMatchCountByTopology.get(topology.get('id')) || 0;
-    const className = classnames(`topologies-item-main topologies-item-${topologyId}`, {
+    const className = classnames(`tour-step-anchor topologies-item-main topologies-item-${topologyId}`, {
       // Don't show matches in the resource view as searching is not supported there yet.
       'topologies-item-main-matched': !this.props.isResourceViewMode && searchMatchCount,
       'topologies-item-main-active': isActive,
@@ -91,7 +86,7 @@ class Topologies extends React.Component {
 
   render() {
     return (
-      <div className="topologies">
+      <div className="tour-step-anchor topologies-selector">
         {this.props.currentTopology && this.props.topologies.map(t => this.renderTopology(t))}
       </div>
     );
diff --git a/client/app/scripts/components/view-mode-button.js b/client/app/scripts/components/view-mode-button.js
index ce18bedfa..18daadc96 100644
--- a/client/app/scripts/components/view-mode-button.js
+++ b/client/app/scripts/components/view-mode-button.js
@@ -25,7 +25,7 @@ class ViewModeButton extends React.Component {
     const { label, viewMode, disabled } = this.props;
 
     const isSelected = (this.props.topologyViewMode === viewMode);
-    const className = classNames(`view-mode-selector-action view-${label}-action`, {
+    const className = classNames(`tour-step-anchor view-mode-selector-action view-${label}-action`, {
       'view-mode-selector-action-selected': isSelected,
     });
 
diff --git a/client/app/scripts/components/view-mode-selector.js b/client/app/scripts/components/view-mode-selector.js
index 8c5cf9173..b915bae3a 100644
--- a/client/app/scripts/components/view-mode-selector.js
+++ b/client/app/scripts/components/view-mode-selector.js
@@ -26,7 +26,7 @@ class ViewModeSelector extends React.Component {
   render() {
     return (
       <div className="view-mode-selector">
-        <div className="view-mode-selector-wrapper">
+        <div className="tour-step-anchor view-mode-selector-wrapper">
           <ViewModeButton
             label="Graph"
             icons="fa fa-share-alt"
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index d00c82dab..ec427bf0e 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -310,7 +310,7 @@ a {
   @extend .fully-pannable;
 }
 
-.topologies {
+.topologies-selector {
   margin: 0 4px;
   display: flex;