webui: replace action_buttons with action_widget

Simplify code base by reuse of 'disable' feature of button_widget. All
occurrences of action-button which were disabled/enabled were replaced
by button-widget.

https://fedorahosted.org/freeipa/ticket/4258

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

install/ui/src/freeipa/association.js

@@ -493,30 +493,24 @@ IPA.association_table_widget = function (spec) {
 
         that.table_create(container);
 
-        that.remove_button = IPA.action_button({
+        that.remove_button = IPA.button_widget({
             name: 'remove',
             label: '@i18n:buttons.remove',
             icon: 'fa-trash-o',
-            'class': 'action-button-disabled',
-            click: function() {
-                if (!that.remove_button.hasClass('action-button-disabled')) {
-                    that.remove_handler();
-                }
-                return false;
-            }
-        }).appendTo(that.buttons);
+            enabled: false,
+            button_class: 'btn btn-link',
+            click: that.remove_handler
+        });
+        that.remove_button.create(that.buttons);
 
-        that.add_button = IPA.action_button({
+        that.add_button = IPA.button_widget({
             name: 'add',
             label: '@i18n:buttons.add',
             icon: 'fa-plus',
-            click: function() {
-                if (!that.add_button.hasClass('action-button-disabled')) {
-                    that.add_handler();
-                }
-                return false;
-            }
-        }).appendTo(that.buttons);
+            button_class: 'btn btn-link',
+            click: that.add_handler
+        });
+        that.add_button.create(that.buttons);
     };
 
     that.add_handler = function() {
@@ -561,14 +555,13 @@ IPA.association_table_widget = function (spec) {
 
     that.set_enabled = function(enabled) {
         that.table_set_enabled(enabled);
-        if (enabled) {
-            if(that.add_button) {
-                that.add_button.removeClass('action-button-disabled');
-            }
-        } else {
-            $('.action-button', that.table).addClass('action-button-disabled');
+        if (!enabled) {
             that.unselect_all();
         }
+        if (that.add_button) {
+            that.add_button.set_enabled(enabled);
+            that.remove_button.set_enabled(false);
+        }
     };
 
     that.select_changed = function() {
@@ -576,11 +569,7 @@ IPA.association_table_widget = function (spec) {
         var values = that.get_selected_values();
 
         if (that.remove_button) {
-            if (values.length === 0) {
-                that.remove_button.addClass('action-button-disabled');
-            } else {
-                that.remove_button.removeClass('action-button-disabled');
-            }
+            that.remove_button.set_enabled(values.length > 0);
         }
     };
 

install/ui/src/freeipa/dns.js

@@ -1739,42 +1739,35 @@ IPA.dns.record_type_table_widget = function(spec) {
 
         container.addClass('dnstype-table');
 
-        that.remove_button = IPA.action_button({
+        that.remove_button = IPA.button_widget({
             name: 'remove',
             label: '@i18n:buttons.remove',
             icon: 'fa-trash-o',
-            'class': 'action-button-disabled',
-            click: function() {
-                if (!that.remove_button.hasClass('action-button-disabled')) {
-                    that.remove_handler();
-                }
-                return false;
-            }
-        }).appendTo(that.buttons);
+            enabled: false,
+            button_class: 'btn btn-link',
+            click: that.remove_handler
+        });
+        that.remove_button.create(that.buttons);
 
-        that.add_button = IPA.action_button({
+        that.add_button = IPA.button_widget({
             name: 'add',
             label: '@i18n:buttons.add',
             icon: 'fa-plus',
-            click: function() {
-                if (!that.add_button.hasClass('action-button-disabled')) {
-                    that.add_handler();
-                }
-                return false;
-            }
-        }).appendTo(that.buttons);
+            button_class: 'btn btn-link',
+            click: that.add_handler
+        });
+        that.add_button.create(that.buttons);
     };
 
     that.set_enabled = function(enabled) {
         that.table_set_enabled(enabled);
-        if (enabled) {
-            if(that.add_button) {
-                that.add_button.removeClass('action-button-disabled');
-            }
-        } else {
-            $('.action-button', that.table).addClass('action-button-disabled');
+        if (!enabled) {
             that.unselect_all();
         }
+        if (that.add_button) {
+            that.add_button.set_enabled(enabled);
+            that.remove_button.set_enabled(false);
+        }
     };
 
     that.select_changed = function() {
@@ -1782,11 +1775,7 @@ IPA.dns.record_type_table_widget = function(spec) {
         var values = that.get_selected_values();
 
         if (that.remove_button) {
-            if (values.length === 0) {
-                that.remove_button.addClass('action-button-disabled');
-            } else {
-                that.remove_button.removeClass('action-button-disabled');
-            }
+            that.remove_button.set_enabled(values.length > 0);
         }
     };
 

install/ui/src/freeipa/sudo.js

@@ -710,30 +710,24 @@ IPA.sudo.options_section = function(spec) {
 
             that.table.table_create(container);
 
-            that.remove_button = IPA.action_button({
+            that.remove_button = IPA.button_widget({
                 name: 'remove',
                 label: '@i18n:buttons.remove',
                 icon: 'fa-trash-o',
-                'class': 'action-button-disabled',
-                click: function() {
-                    if (!that.remove_button.hasClass('action-button-disabled')) {
-                        that.remove_handler();
-                    }
-                    return false;
-                }
-            }).appendTo(that.table.buttons);
+                enabled: false,
+                button_class: 'btn btn-link',
+                click: that.remove_handler
+            });
+            that.remove_button.create(that.table.buttons);
 
-            that.add_button = IPA.action_button({
+            that.add_button = IPA.button_widget({
                 name: 'add',
                 label: '@i18n:buttons.add',
                 icon: 'fa-plus',
-                click: function() {
-                    if (!that.add_button.hasClass('action-button-disabled')) {
-                        that.add_handler();
-                    }
-                    return false;
-                }
-            }).appendTo(that.table.buttons);
+                button_class: 'btn btn-link',
+                click: that.add_handler
+            });
+            that.add_button.create(that.table.buttons);
         };
 
         that.table.select_changed = function() {
@@ -741,11 +735,7 @@ IPA.sudo.options_section = function(spec) {
             var values = that.table.get_selected_values();
 
             if (that.remove_button) {
-                if (values.length === 0) {
-                    that.remove_button.addClass('action-button-disabled');
-                } else {
-                    that.remove_button.removeClass('action-button-disabled');
-                }
+                that.remove_button.set_enabled(values.length > 0);
             }
         };
 

install/ui/src/freeipa/widget.js

@@ -3152,30 +3152,24 @@ IPA.attribute_table_widget = function(spec) {
 
     that.create_buttons = function(container) {
 
-        that.remove_button = IPA.action_button({
+        that.remove_button = IPA.button_widget({
             name: 'remove',
             label: '@i18n:buttons.remove',
             icon: 'fa-trash-o',
-            'class': 'action-button-disabled',
-            click: function() {
-                if (!that.remove_button.hasClass('action-button-disabled')) {
-                    that.remove_handler();
-                }
-                return false;
-            }
-        }).appendTo(container);
+            enabled: false,
+            button_class: 'btn btn-link',
+            click: that.remove_handler
+        });
+        that.remove_button.create(container);
 
-        that.add_button = IPA.action_button({
+        that.add_button = IPA.button_widget({
             name: 'add',
             label: '@i18n:buttons.add',
             icon: 'fa-plus',
-            click: function() {
-                if (!that.add_button.hasClass('action-button-disabled')) {
-                    that.add_handler();
-                }
-                return false;
-            }
-        }).appendTo(container);
+            button_class: 'btn btn-link',
+            click: that.add_handler
+        });
+        that.add_button.create(container);
     };
 
     that.create = function(container) {
@@ -3189,14 +3183,13 @@ IPA.attribute_table_widget = function(spec) {
 
     that.set_enabled = function(enabled) {
         that.table_set_enabled(enabled);
-        if (enabled) {
-            if(that.add_button) {
-                that.add_button.removeClass('action-button-disabled');
-            }
-        } else {
-            $('.action-button', that.table).addClass('action-button-disabled');
+        if (!enabled) {
             that.unselect_all();
         }
+        if (that.add_button) {
+            that.add_button.set_enabled(enabled);
+            that.remove_button.set_enabled(false);
+        }
     };
 
     that.select_changed = function() {
@@ -3204,11 +3197,7 @@ IPA.attribute_table_widget = function(spec) {
         var values = that.get_selected_values();
 
         if (that.remove_button) {
-            if (values.length === 0) {
-                that.remove_button.addClass('action-button-disabled');
-            } else {
-                that.remove_button.removeClass('action-button-disabled');
-            }
+            that.remove_button.set_enabled(values.length > 0);
         }
     };
 
@@ -4232,6 +4221,12 @@ IPA.button_widget = function(spec) {
      */
     that['class'] = spec['class'];
 
+    /**
+     * Override for button classes
+     * @property {string}
+     */
+    that.button_class = spec.button_class;
+
     /**
      * Icon name
      * @property {string}
@@ -4245,7 +4240,7 @@ IPA.button_widget = function(spec) {
      */
     that.on_click = function() {
 
-        if (that.click) {
+        if (that.click && that.enabled) {
             that.click();
         }
         return false;
@@ -4259,6 +4254,7 @@ IPA.button_widget = function(spec) {
             title: that.tooltip,
             label: that.label,
             'class': that['class'],
+            button_class: that.button_class,
             style: that.style,
             icon: that.icon,
             click: that.on_click
@@ -4266,6 +4262,7 @@ IPA.button_widget = function(spec) {
         that.container = that.button;
 
         that.set_enabled(that.enabled);
+        return that.button;
     };
 
     /** @inheritDoc */

ipatests/test_webui/ui_driver.py

@@ -609,7 +609,7 @@ class UI_driver(object):
         if not dialog:
             dialog = self.get_dialog(strict=True)
 
-        s = ".rcue-dialog-buttons button[name=%s]" % name
+        s = ".rcue-dialog-buttons button[name='%s']" % name
         self._button_click(s, dialog, name)
 
     def action_button_click(self, name, parent):
@@ -634,10 +634,8 @@ class UI_driver(object):
 
     def _button_click(self, selector, parent, name=''):
         btn = self.find(selector, By.CSS_SELECTOR, parent, strict=True)
-
-        disabled = 'ui-state-disabled' in btn.get_attribute("class").split() or \
-                   btn.get_attribute("disabled")
-
+        ActionChains(self.driver).move_to_element(btn).perform()
+        disabled = btn.get_attribute("disabled")
         assert btn.is_displayed(), 'Button is not displayed: %s' % name
         assert not disabled, 'Invalid button state: disabled. Button: %s' % name
         btn.click()
@@ -940,13 +938,18 @@ class UI_driver(object):
             parent = self.get_form()
 
         s = self.get_table_selector(table_name)
-        s += " tbody td input[value='%s']+label" % pkey
-        label = self.find(s, By.CSS_SELECTOR, parent, strict=True)
+        input_s = s + " tbody td input[value='%s']" % pkey
+        checkbox = self.find(input_s, By.CSS_SELECTOR, parent, strict=True)
+        checkbox_id = checkbox.get_attribute('id')
+        label_s = s + " tbody td label[for='%s']" % checkbox_id
+        print label_s
+        label = self.find(label_s, By.CSS_SELECTOR, parent, strict=True)
         try:
             ActionChains(self.driver).move_to_element(label).click().perform()
         except WebDriverException as e:
             assert False, 'Can\'t click on checkbox label: %s \n%s' % (s, e)
-
+        self.wait()
+        assert checkbox.is_selected(), 'Record was not checked: %s' % input_s
         self.wait()
 
     def get_record_value(self, pkey, column, parent=None, table_name=None):
@@ -1011,7 +1014,7 @@ class UI_driver(object):
             if table_name and parent:
                 s = self.get_table_selector(table_name)
                 table = self.find(s, By.CSS_SELECTOR, parent, strict=True)
-                self.action_button_click('remove', table)
+                self.button_click('remove', table)
             else:
                 self.facet_button_click('remove')
             if fields:
@@ -1339,6 +1342,7 @@ class UI_driver(object):
             self.switch_to_facet(facet)
 
         self.facet_button_click('add')
+        self.wait()
         self.wait_for_request()
 
         for key in pkeys:
@@ -1364,7 +1368,7 @@ class UI_driver(object):
         s = self.get_table_selector(table_name)
         table = self.find(s, By.CSS_SELECTOR, parent, strict=True)
 
-        s = "a[name=%s].button" % 'add'
+        s = "button[name='%s']" % 'add'
         btn = self.find(s, By.CSS_SELECTOR, table, strict=True)
         btn.click()
         self.wait_for_request(0.4)
@@ -1372,6 +1376,7 @@ class UI_driver(object):
         for key in pkeys:
             self.select_record(key, table_name='available')
             self.button_click('add')
+            self.wait()
 
         self.dialog_button_click('add')
         self.wait_for_request(n=2)
@@ -1550,21 +1555,6 @@ class UI_driver(object):
         """
         assert expected == current, "Rows don't match. Expected: %d, Got: %d" % (expected, current)
 
-    def assert_action_button_enabled(self, name, context_selector=None, enabled=True):
-        """
-        Assert that action-button is enabled or disabled
-        """
-        s = ""
-        if context_selector:
-            s = context_selector
-        s += "a[name=%s]" % name
-        facet = self.get_facet()
-        btn = self.find(s, By.CSS_SELECTOR, facet, strict=True)
-        cls = 'action-button-disabled'
-        valid = enabled ^ self.has_class(btn, cls)
-        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
@@ -1591,7 +1581,7 @@ class UI_driver(object):
         Assert that button in table is enabled/disabled
         """
         s = "table[name='%s'] " % table_name
-        self.assert_action_button_enabled(name, s, enabled)
+        self.assert_button_enabled(name, s, enabled)
 
     def assert_facet(self, entity, facet=None):
         """