Toolbars: final touches in Dashboard and Topology toolbars.

app/javascript/components/dashboard_toolbar.jsx

@@ -2,44 +2,47 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown, MenuItem } from 'patternfly-react';
 
+const addClick = item =>
+  window.miqJqueryRequest(`widget_add?widget=${item.id}`, { beforeSend: true, complete: true });
+
+const resetClick = () => {
+  /* eslint no-alert: off */
+  if (window.confirm(__("Are you sure you want to reset this Dashboard's Widgets to the defaults?"))) {
+    window.miqJqueryRequest('reset_widgets', { beforeSend: true });
+  }
+};
+
 const resetButton = () => (
   <button
-    className='btn btn-default'
+    type="button"
+    className="btn btn-default"
     title={__('Reset Dashboard Widgets to the defaults')}
     onClick={resetClick}
   >
-    <i className='fa fa-reply fa-lg' />
+    <i className="fa fa-reply fa-lg" />
   </button>
-)
-
-const addClick = (item) =>
-  miqJqueryRequest(`widget_add?widget=${item.id}`, { beforeSend: true, complete: true });
-
-const resetClick = () => {
-  if (confirm(__("Are you sure you want to reset this Dashboard's Widgets to the defaults?"))) {
-    miqJqueryRequest('reset_widgets', { beforeSend: true });
-  }
-}
+);
 
 const addMenu = (items, locked) => {
-  const [ title, cls ] = locked
-    ? [__("Cannot add a Widget, this Dashboard has been locked by the Administrator"), 'disabled']
-    : [__("Add a widget"), ''];
+  const title = locked
+    ? __('Cannot add a Widget, this Dashboard has been locked by the Administrator')
+    : __('Add a widget');
 
   return (
-    <Dropdown id="dropdown-custom-2">
-      <Dropdown.Toggle componentClass={props => <button {...props} title={title} />} title={<span className="fa fa-plus fa-lg" />}/>
-      <Dropdown.Menu className='scrollable-menu'>
-        { items.map(item =>
-            item.type === 'separator'
-              ? <MenuItem key={item.id} eventKey={item.id} divider />
-              : <MenuItem key={item.id} onClick={() => addClick(item)} >
-                  <i className={item.image} />
-                  &nbsp;
-                  {item.text}
-                </MenuItem>
-          )
-        }
+    <Dropdown id="dropdown-custom-2" disabled={locked}>
+      <Dropdown.Toggle componentClass={props => <button type="button" {...props} title={title} />} title={<span className="fa fa-plus fa-lg" />} />
+      <Dropdown.Menu className="scrollable-menu">
+        { items.map(item => (
+          item.type === 'separator'
+            ? <MenuItem key={item.id} eventKey={item.id} divider />
+            : (
+              <MenuItem key={item.id} onClick={() => addClick(item)}>
+                <i className={item.image} />
+                &nbsp;
+                {item.text}
+              </MenuItem>
+            )
+        ))}
       </Dropdown.Menu>
     </Dropdown>
   );
@@ -48,8 +51,9 @@ const addMenu = (items, locked) => {
 const renderDisabled = () => (
   <div className="btn-group.dropdown">
     <button
+      type="button"
       className="disabled btn btn-default dropdown-toggle"
-      title={__("No Widgets available to add")}
+      title={__('No Widgets available to add')}
     >
       <i className="fa fa-plus fa-lg" />
       <span className="caret" />
@@ -58,7 +62,9 @@ const renderDisabled = () => (
 );
 
 const DashboardToolbar = (props) => {
-  const { items, allowAdd, allowReset, locked } = props;
+  const {
+    items, allowAdd, allowReset, locked,
+  } = props;
 
   const renderContent = () => (
     <React.Fragment>
@@ -69,7 +75,7 @@ const DashboardToolbar = (props) => {
 
   return (
     <div className="toolbar-pf-actions miq-toolbar-actions">
-      <div className='miq-toolbar-group form-group'>
+      <div className="miq-toolbar-group form-group">
         { items.length === 0 ? renderDisabled() : renderContent() }
       </div>
     </div>

app/javascript/components/topology_toolbar.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import { FormControl } from 'patternfly-react';
 
 const searchClick = (e) => {
-  console.log('searchClick');
   e.preventDefault();
   sendDataWithRx({ service: 'topologyService', name: 'searchNode' });
 };
@@ -12,25 +10,20 @@ const refreshClick = () => {
 };
 
 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">
+        <label htmlFor="box_display_names" 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} >
+        <button type="button" className="btn btn-default" title={__('Refresh this page')} onClick={refreshClick}>
           <i className="fa fa-refresh fa-lg" />
           {__('Refresh')}
         </button>
@@ -42,11 +35,10 @@ const TopologyToolbar = () => (
       >
         <div className="form-group has-clear">
           <div className="search-pf-input-group" style={{ position: 'relative' }}>
-            <label className="sr-only" htmlFor="search">
+            <label className="sr-only" htmlFor="search_topology">
               {__('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>
@@ -55,7 +47,7 @@ const TopologyToolbar = () => (
         <div className="form-group search-button">
           <button type="button" className="btn btn-default search-topology-button" onClick={searchClick}>
             <span className="fa fa-search" />
-           </button>
+          </button>
         </div>
       </form>
     </div>