From 898f03a19abf10045da3d08e74bdcaa41dda6085 Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Nov 17 2017 10:06:42 +0000
Subject: Remove config option in edit mode for widgets without options


In the edit mode, if a widget does not have config options, the
cog icon is not displayed anymore. As the ability to delete a widget
was previously in the config dialog, this is now moved to the widget
titlebar itself.

Signed-off-by: Ryan Lerch <rlerch@redhat.com>

---

diff --git a/hubs/static/client/app/components/WidgetChrome.js b/hubs/static/client/app/components/WidgetChrome.js
index 78a65db..1061fb1 100644
--- a/hubs/static/client/app/components/WidgetChrome.js
+++ b/hubs/static/client/app/components/WidgetChrome.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { SortableHandle } from 'react-sortable-hoc';
-import { openConfigDialog } from "../core/actions/widget";
+import { openConfigDialog, deleteWidget } from "../core/actions/widget";
 import "./WidgetChrome.css";
 
 
@@ -24,6 +24,7 @@ class WidgetChrome extends React.PureComponent {
   constructor(props) {
     super(props);
     this.handleEditButtonClicked = this.handleEditButtonClicked.bind(this)
+    this.handleWidgetDeleted = this.handleWidgetDeleted.bind(this);    
   }
 
   handleEditButtonClicked(e) {
@@ -31,6 +32,11 @@ class WidgetChrome extends React.PureComponent {
     this.props.onEdit(this.props.widget.idx);
   }
 
+  handleWidgetDeleted(e) {
+    e.preventDefault();
+    this.props.onDelete(this.props.widget.idx);
+  }
+
   render() {
     // Make sure there's always a title in edit mode
     const title = (this.props.editMode && !this.props.widget.title) ? this.props.widget.label : this.props.widget.title;
@@ -45,11 +51,19 @@ class WidgetChrome extends React.PureComponent {
           <DragHandle />
           {title}
           <a href="#"
+            className="float-right text-danger pl-2"
+            onClick={this.handleWidgetDeleted}
+            >
+            <i className="fa fa-trash" aria-hidden="true" title="Delete this widget"></i>
+          </a> 
+          { this.props.widget.params.length > 0 &&
+          <a href="#"
             className="float-right text-dark"
             onClick={this.handleEditButtonClicked}
             >
             <i className="fa fa-cog" aria-hidden="true"></i>
           </a>
+          }
         </div>
       );
     } else if (title) {
@@ -86,7 +100,9 @@ const mapStateToProps = (state) => {
 };
 const mapDispatchToProps = dispatch => {
   return {
-    onEdit: (widgetId) => { dispatch(openConfigDialog(widgetId)); }
+    onEdit: (widgetId) => { dispatch(openConfigDialog(widgetId)); },
+    onDelete: (widgetId) => { dispatch(deleteWidget(widgetId)); }
+    
   }
 }
 
diff --git a/hubs/static/client/app/components/WidgetConfigDialog.js b/hubs/static/client/app/components/WidgetConfigDialog.js
index b0b648c..c433860 100644
--- a/hubs/static/client/app/components/WidgetConfigDialog.js
+++ b/hubs/static/client/app/components/WidgetConfigDialog.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import {
   saveConfig,
-  deleteWidget,
   closeConfigDialog,
   } from "../core/actions/widget";
 import { makeLoadable } from '../core/utils';
@@ -35,7 +34,6 @@ class WidgetConfigDialog extends React.Component {
     };
     this.handleClose = this.handleClose.bind(this);
     this.handleWidgetEdited = this.handleWidgetEdited.bind(this);
-    this.handleWidgetDeleted = this.handleWidgetDeleted.bind(this);
     this.setWidgetConfig = this.setWidgetConfig.bind(this);
   }
 
@@ -61,11 +59,6 @@ class WidgetConfigDialog extends React.Component {
     this.props.dispatch(saveConfig(this.props.widget.idx, this.state.widgetConfig));
   }
 
-  handleWidgetDeleted(e) {
-    e.preventDefault();
-    this.props.dispatch(deleteWidget(this.props.widget.idx));
-  }
-
   handleClose(e) {
     this.props.dispatch(closeConfigDialog());
   }
@@ -96,13 +89,6 @@ class WidgetConfigDialog extends React.Component {
       <div className="d-flex justify-content-end w-100">
         <button
           type="button"
-          className="btn btn-danger mr-auto"
-          onClick={this.handleWidgetDeleted}
-          >
-          Remove this widget
-        </button>
-        <button
-          type="button"
           className="btn btn-secondary ml-3"
           onClick={this.handleClose}
           >