webui: change control buttons to normal buttons

Now buttons have normal button appearance instead of link button.

Partially fixes: https://fedorahosted.org/freeipa/ticket/4258 since the disabling is done through button's disabled attribute.

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>

install/ui/ipa.css

@@ -178,9 +178,8 @@ div[name=settings].facet-group li a {
     display: inline-block;
 }
 
-.control-buttons a {
+.control-buttons button {
-    margin-right: 16px;
+    margin-right: 5px;
-    text-decoration: none;
 }
 
 .facet-actions {

install/ui/src/freeipa/facet.js

@@ -2873,60 +2873,13 @@ exp.action_button_widget = IPA.action_button_widget = function(spec) {
 
     spec = spec || {};
 
-    var that = IPA.widget(spec);
+    var that = IPA.button_widget(spec);
-
-    /**
-     * Name
-     * @property {string}
-     */
-    that.name = spec.name;
-
-    /**
-     * Label
-     * @property {string}
-     */
-    that.label = text.get(spec.label);
-
-    /**
-     * Tooltip
-     * @property {string}
-     */
-    that.tooltip = text.get(spec.tooltip);
-
-    /**
-     * Button href
-     *
-     * - purely visual thing, the click itself is handled internally.
-     * @property {string}
-     */
-    that.href = spec.href || that.name;
-
-    /**
-     * Icon name
-     * @property {string}
-     */
-    that.icon = spec.icon;
-
     /**
      * Name of action this button should execute
      * @property {string}
      */
     that.action_name = spec.action || that.name;
 
-    /**
-     * Enabled
-     * @property {boolean}
-     * @readonly
-     */
-    that.enabled = spec.enabled !== undefined ? spec.enabled : true;
-
-    /**
-     * Visible
-     * @property {boolean}
-     * @readonly
-     */
-    that.visible = spec.visible !== undefined ? spec.visible : true;
-
     /**
      * Subject to removal
      * @deprecated
@@ -2959,19 +2912,7 @@ exp.action_button_widget = IPA.action_button_widget = function(spec) {
      */
     that.create = function(container) {
 
-        that.widget_create(container);
+        that.button_widget_create(container);
-
-        that.button_element = IPA.action_button({
-            name: that.name,
-            href: that.href,
-            label: that.label,
-            icon: that.icon,
-            click: function() {
-                that.on_click();
-                return false;
-            }
-        }).appendTo(container);
-
         that.set_enabled(that.action.enabled);
         that.set_visible(that.action.visible);
     };
@@ -2988,39 +2929,6 @@ exp.action_button_widget = IPA.action_button_widget = function(spec) {
         that.action.execute(that.facet);
     };
 
-    /**
-     * Enabled setter
-     * @param {boolean} enabled
-     */
-    that.set_enabled = function(enabled) {
-        that.widget_set_enabled(enabled);
-
-        if (that.button_element) {
-            if (enabled) {
-                that.button_element.removeClass('action-button-disabled');
-            } else {
-                that.button_element.addClass('action-button-disabled');
-            }
-        }
-    };
-
-    /**
-     * Visible setter
-     * @param {boolean} visible
-     */
-    that.set_visible = function(visible) {
-
-        that.visible = visible;
-
-        if (that.button_element) {
-            if (visible) {
-                that.button_element.show();
-            } else {
-                that.button_element.hide();
-            }
-        }
-    };
-
     return that;
 };
 

install/ui/src/freeipa/widget.js

@@ -4096,6 +4096,12 @@ IPA.button_widget = function(spec) {
      */
     that['class'] = spec['class'];
 
+    /**
+     * Icon name
+     * @property {string}
+     */
+    that.icon = spec.icon;
+
     /**
      * Widget click handler.
      *
@@ -4118,8 +4124,10 @@ IPA.button_widget = function(spec) {
             label: that.label,
             'class': that['class'],
             style: that.style,
+            icon: that.icon,
             click: that.on_click
         }).appendTo(container);
+        that.container = that.button;
 
         that.set_enabled(that.enabled);
     };
@@ -4133,6 +4141,8 @@ IPA.button_widget = function(spec) {
         }
     };
 
+    that.button_widget_create = that.create;
+
     return that;
 };
 

ipatests/test_webui/ui_driver.py

@@ -596,7 +596,7 @@ class UI_driver(object):
         Click on facet button with given name
         """
         facet = self.get_facet()
-        s = ".facet-controls a[name=%s]" % name
+        s = ".facet-controls button[name=%s]" % name
         self._button_click(s, facet, name)
 
     def dialog_button_click(self, name, dialog=None):
@@ -1549,9 +1549,9 @@ class UI_driver(object):
         """
         assert expected == current, "Rows don't match. Expected: %d, Got: %d" % (expected, current)
 
-    def assert_button_enabled(self, name, context_selector=None, enabled=True):
+    def assert_action_button_enabled(self, name, context_selector=None, enabled=True):
         """
-        Assert that button is enabled or disabled
+        Assert that action-button is enabled or disabled
         """
         s = ""
         if context_selector:
@@ -1564,6 +1564,21 @@ class UI_driver(object):
         assert btn.is_displayed(), 'Button is not displayed'
         assert valid, 'Button has incorrect enabled state.'
 
+    def assert_button_enabled(self, name, context_selector=None, enabled=True):
+        """
+        Assert that button is enabled or disabled (expects that element will be
+        <button>)
+        """
+        s = ""
+        if context_selector:
+            s = context_selector
+        s += "button[name=%s]" % name
+        facet = self.get_facet()
+        btn = self.find(s, By.CSS_SELECTOR, facet, strict=True)
+        valid = enabled == btn.is_enabled()
+        assert btn.is_displayed(), 'Button is not displayed'
+        assert valid, 'Button (%s) has incorrect enabled state (enabled==%s).' % (s, enabled)
+
     def assert_facet_button_enabled(self, name, enabled=True):
         """
         Assert that facet button is enabled or disabled
@@ -1575,7 +1590,7 @@ class UI_driver(object):
         Assert that button in table is enabled/disabled
         """
         s = "table[name='%s'] " % table_name
-        self.assert_button_enabled(name, s, enabled)
+        self.assert_action_button_enabled(name, s, enabled)
 
     def assert_facet(self, entity, facet=None):
         """