Add explicit tour-step-anchor classNames to Explore tour elements.

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>
     );

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`,
     };

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"

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}

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';
     }

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,
     });

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}

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>
     );
   }
 }

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>
     );

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,
     });
 

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"

client/app/styles/_base.scss

@@ -310,7 +310,7 @@ a {
   @extend .fully-pannable;
 }
 
-.topologies {
+.topologies-selector {
   margin: 0 4px;
   display: flex;