Toolbars: TopologyToolbar converted to a React component.

app/assets/stylesheets/main.scss

@@ -42,6 +42,7 @@ $login-container-details-border-color-rgba: rgba(0, 0, 0, 0.5);
 @import "codemirror_editor";
 @import "dynamic_prefix_form_input";
 @import "report-data-table";
+@import "topology-toolbar";
 
 .login-pf #brand img { // sets size of brand.svg on login screen (upstream only)
   height: 38px;

app/assets/stylesheets/topology-toolbar.scss

@@ -0,0 +1,11 @@
+.topology-tb .has-clear .clear {
+  background: rgba(255, 255, 255, 0);
+  border-width: 0;
+  height: 25px;
+  line-height: 1;
+  padding: 0;
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  width: 28px;
+}

app/javascript/components/dashboard_toolbar.jsx

@@ -1,8 +1,6 @@
-import React, { useEffect, useReducer } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown, DropdownButton, MenuItem } from 'patternfly-react';
-
-// app/views/dashboard/_widgets_menu.html.haml
+import { Dropdown, MenuItem } from 'patternfly-react';
 
 const resetButton = () => (
   <button
@@ -24,7 +22,7 @@ const resetClick = () => {
 }
 
 const addMenu = (items, locked) => {
-  const [ title, cls ] = locked 
+  const [ title, cls ] = locked
     ? [__("Cannot add a Widget, this Dashboard has been locked by the Administrator"), 'disabled']
     : [__("Add a widget"), ''];
 
@@ -48,13 +46,13 @@ const addMenu = (items, locked) => {
 };
 
 const renderDisabled = () => (
-  <div className='btn-group.dropdown'>
+  <div className="btn-group.dropdown">
     <button
-      className='disabled btn btn-default dropdown-toggle'
-      title={__('No Widgets available to add')}
+      className="disabled btn btn-default dropdown-toggle"
+      title={__("No Widgets available to add")}
     >
-      <i className='fa fa-reply fa-lg' />
-      <span className='caret' />
+      <i className="fa fa-reply fa-lg" />
+      <span className="caret" />
     </button>
   </div>
 );

app/javascript/components/topology_toolbar.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { FormControl } from 'patternfly-react';
+
+const searchClick = (e) => {
+  console.log('searchClick');
+  e.preventDefault();
+  sendDataWithRx({ service: 'topologyService', name: 'searchNode' });
+};
+
+const refreshClick = () => {
+  sendDataWithRx({ name: 'refreshTopology' });
+};
+
+const resetSearchClick = () => {
+  console.log('resetSearchClick');
+  sendDataWithRx({ service: 'topologyService', name: 'resetSearch' });
+};
+// # this hidden button is a workaround
+// # pressing enter in ^input triggers a *click* event on the next button
+// # without this, that button is resetSearch, which ..is undesirable :)
+
+// app/views/shared/_topology_header_toolbar.html.haml
+const TopologyToolbar = () => (
+  <div className="toolbar-pf-actions miq-toolbar-actions">
+    <div className="miq-toolbar-group form-group">
+      <div className="form-group text">
+        <label className="topology-checkbox checkbox-inline">
+          <input id="box_display_names" type="checkbox" />
+          {__('Display Names')}
+        </label>
+      </div>
+      <div className="form-group">
+        <button type="button" className="btn btn-default" title={__('Refresh this page')} onClick={refreshClick} >
+          <i className="fa fa-refresh fa-lg" />
+          {__('Refresh')}
+        </button>
+      </div>
+      <form
+        style={{ display: 'inline' }}
+        className="topology-tb topology-search"
+        onSubmit={e => searchClick(e)}
+      >
+        <div className="form-group has-clear">
+          <div className="search-pf-input-group" style={{ position: 'relative' }}>
+            <label className="sr-only" htmlFor="search">
+              {__('Search')}
+            </label>
+            <input id="search_topology" className="form-control" type="search" placeholder={__('Search')} />
+            <button type="button" className="hidden" onClick={searchClick} />
+            <button type="button" className="clear" aria-hidden="true" onClick={resetSearchClick}>
+              <span className="pficon pficon-close" />
+            </button>
+          </div>
+        </div>
+        <div className="form-group search-button">
+          <button type="button" className="btn btn-default search-topology-button" onClick={searchClick}>
+            <span className="fa fa-search" />
+           </button>
+        </div>
+      </form>
+    </div>
+  </div>
+);
+
+TopologyToolbar.propTypes = {
+};
+
+export default TopologyToolbar;