From 59df33ffbffd951c53500d13d775c7d425cff048 Mon Sep 17 00:00:00 2001
From: Martin Povolny <mpovolny@redhat.com>
Date: Wed, 18 Sep 2019 21:11:24 +0200
Subject: [PATCH] Toolbars: final touches in Dashboard and Topology toolbars.

---
 .../components/dashboard_toolbar.jsx          | 68 ++++++++++---------
 .../components/topology_toolbar.jsx           | 16 ++---
 app/views/dashboard/_widgets_menu.html.haml   | 32 ---------
 .../shared/_topology_header_toolbar.html.haml | 39 -----------
 4 files changed, 41 insertions(+), 114 deletions(-)
 delete mode 100644 app/views/dashboard/_widgets_menu.html.haml
 delete mode 100644 app/views/shared/_topology_header_toolbar.html.haml

diff --git a/app/javascript/components/dashboard_toolbar.jsx b/app/javascript/components/dashboard_toolbar.jsx
index f9a09b272eb..31327036c1d 100644
--- a/app/javascript/components/dashboard_toolbar.jsx
+++ b/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>
diff --git a/app/javascript/components/topology_toolbar.jsx b/app/javascript/components/topology_toolbar.jsx
index 30b3dc1875c..68897de0398 100644
--- a/app/javascript/components/topology_toolbar.jsx
+++ b/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>
diff --git a/app/views/dashboard/_widgets_menu.html.haml b/app/views/dashboard/_widgets_menu.html.haml
deleted file mode 100644
index 22b88f85948..00000000000
--- a/app/views/dashboard/_widgets_menu.html.haml
+++ /dev/null
@@ -1,32 +0,0 @@
-.form-group
-  .btn-group.dropdown
-    - if @widgets_menu[:blank]
-      %button.disabled.btn.btn-default.dropdown-toggle{'data-toggle' => 'dropdown', :title => _('No Widgets available to add'), 'data-click' => 'add_widget'}
-        %i.fa.fa-reply.fa-lg
-        %span.caret
-    - else
-      - if @widgets_menu[:allow_add]
-        - if @widgets_menu[:locked]
-          - title   = _("Cannot add a Widget, this Dashboard has been locked by the Administrator")
-          - enabled = false
-        - else
-          - title   = _("Add a widget")
-          - enabled = true
-        - cls = enabled ? '' : 'disabled '
-        %button{'data-toggle' => 'dropdown', :class => "#{cls}btn btn-default dropdown-toggle", :title => title}
-          %i.fa.fa-plus.fa-lg
-          %span.caret
-
-        %ul.dropdown-menu.scrollable-menu
-          - @widgets_menu[:items].each do |item|
-            %li
-              - if item[:type] == :separator
-                .divider{:role => 'presentation'}
-              - else
-                %a{:href => '#', :title => item[:title], 'data-click' => item[:id]}
-                  %i{:class => item[:image]}
-                  = item[:text]
-
-  - if @widgets_menu[:allow_reset]
-    %button.btn.btn-default{:title => _('Reset Dashboard Widgets to the defaults'), 'data-click' => 'reset'}
-      %i.fa.fa-reply.fa-lg
diff --git a/app/views/shared/_topology_header_toolbar.html.haml b/app/views/shared/_topology_header_toolbar.html.haml
deleted file mode 100644
index 459af802ae1..00000000000
--- a/app/views/shared/_topology_header_toolbar.html.haml
+++ /dev/null
@@ -1,39 +0,0 @@
-.form-group.text
-  %label.topology-checkbox.checkbox-inline
-    %input#box_display_names{:type => 'checkbox'}
-    = _("Display Names")
-
-.form-group
-  %button.btn.btn-default{:title               => _('Refresh this page'),
-                          'data-function'      => 'sendDataWithRx',
-                          'data-function-data' => {:name => 'refreshTopology'}.to_json}
-    %i.fa.fa-refresh.fa-lg
-    = _("Refresh")
-%form.search-pf.topology-search{:role     => 'form',
-                                :onsubmit => 'sendDataWithRx({service: "topologyService", name: "searchNode", args: [] }); return false'}
-  .form-group.has-clear
-    .search-pf-input-group
-      %label.sr-only{:for => 'search'}
-        = _("Search")
-
-      %input#search_topology.form-control{:type         => 'search',
-                                          'placeholder' => _("Search")}
-
-      -# 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 :)
-      %button.hidden{'data-function'      => 'sendDataWithRx',
-                     'data-function-data' => {:service => 'topologyService',
-                                              :name => 'searchNode'}.to_json}
-
-      %button.clear{'aria-hidden'        => 'true',
-                    'data-function'      => 'sendDataWithRx',
-                    'data-function-data' => {:service => 'topologyService',
-                                             :name => 'resetSearch'}.to_json}
-        %span.pficon.pficon-close
-
-  .form-group.search-button
-    %button.btn.btn-default.search-topology-button{'data-function'      => 'sendDataWithRx',
-                                                   'data-function-data' => {:service => 'topologyService',
-                                                                            :name => 'searchNode'}.to_json}
-      %span.fa.fa-search