Added refresh button for UI

Web UI is caching records. Currently only possible ways how to display updated record which was changed elsewhere - ie. in CLI are:
 * refresh page in browser (takes really long on slow vpns)
 * search facet: change filter, find, change filter back, find
 * entity details: go to search, select other entry, go back to search, select original entry
 * association facet: same as entity details

These are unconvenient methods.

This patch adds Refresh button to search, details and association facet. This button executes facets refresh method.

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

4 files changed, 50 insertions, 15 deletions

diff --git a/install/ui/association.js b/install/ui/association.js
index 2fbdb7dd..c72b6916 100644
--- a/install/ui/association.js
+++ b/install/ui/association.js
@@ -801,6 +801,17 @@ IPA.association_facet = function (spec) {
 
         that.facet_create_header(container);
 
+        that.refresh_button = IPA.action_button({
+            name: 'refresh',
+            href: 'refresh',
+            label: IPA.messages.buttons.refresh,
+            icon: 'reset-icon',
+            click: function() {
+                that.refresh();
+                return false;
+            }
+        }).appendTo(that.controls);
+
         if (!that.read_only) {
             that.remove_button = IPA.action_button({
                 name: 'remove',
@@ -829,12 +840,13 @@ IPA.association_facet = function (spec) {
         }
 
         if (that.indirect_attribute_member) {
-            var span = $('<span/>', {
+
+            var div = $('<div/>', {
                 'class': 'right-aligned-facet-controls'
             }).appendTo(that.controls);
 
-            span.append(IPA.messages.association.show_results);
-            span.append(' ');
+            div.append(IPA.messages.association.show_results);
+            div.append(' ');
 
             var name = that.entity.name+'-'+that.attribute_member+'-'+that.other_entity.name+'-type-radio';
             var direct_id = name + '-direct';
@@ -849,14 +861,14 @@ IPA.association_facet = function (spec) {
                     that.refresh();
                     return true;
                 }
-            }).appendTo(span);
+            }).appendTo(div);
 
             $('<label/>', {
                 text: IPA.messages.association.direct_membership,
                 'for': direct_id
-            }).appendTo(span);
+            }).appendTo(div);
 
-            span.append(' ');
+            div.append(' ');
 
             var indirect_id = name + '-indirect';
 
@@ -870,12 +882,12 @@ IPA.association_facet = function (spec) {
                     that.refresh();
                     return true;
                 }
-            }).appendTo(span);
+            }).appendTo(div);
 
             $('<label/>', {
                 text: IPA.messages.association.indirect_membership,
                 'for': indirect_id
-            }).appendTo(span);
+            }).appendTo(div);
         }
     };
 
@@ -1019,8 +1031,8 @@ IPA.association_facet = function (spec) {
 
         if (that.association_type == 'direct') {
             if (that.direct_radio) that.direct_radio.attr('checked', true);
-            if (that.add_button) that.add_button.css('display', 'inline');
-            if (that.remove_button) that.remove_button.css('display', 'inline');
+            if (that.add_button) that.add_button.css('display', 'inline-block');
+            if (that.remove_button) that.remove_button.css('display', 'inline-block');
         } else {
             if (that.indirect_radio) that.indirect_radio.attr('checked', true);
             if (that.add_button) that.add_button.css('display', 'none');
diff --git a/install/ui/details.js b/install/ui/details.js
index 4adc2770..acd498aa 100644
--- a/install/ui/details.js
+++ b/install/ui/details.js
@@ -299,6 +299,17 @@ IPA.details_facet = function(spec) {
 
     that.create_controls = function() {
 
+        that.refresh_button = IPA.action_button({
+            name: 'refresh',
+            href: 'refresh',
+            label: IPA.messages.buttons.refresh,
+            icon: 'reset-icon',
+            click: function() {
+                that.refresh();
+                return false;
+            }
+        }).appendTo(that.controls);
+
         that.reset_button = IPA.action_button({
             name: 'reset',
             label: IPA.messages.buttons.reset,
@@ -346,7 +357,7 @@ IPA.details_facet = function(spec) {
             style: 'display: none;',
             click: function() {
                 that.expand_button.css('display', 'none');
-                that.collapse_button.css('display', 'inline');
+                that.collapse_button.css('display', 'inline-block');
 
                 var widgets = that.widgets.get_widgets();
                 for (var i=0; i<widgets.length; i++) {
@@ -365,7 +376,7 @@ IPA.details_facet = function(spec) {
             label: IPA.messages.details.collapse_all,
             'class': 'right-aligned-facet-controls',
             click: function() {
-                that.expand_button.css('display', 'inline');
+                that.expand_button.css('display', 'inline-block');
                 that.collapse_button.css('display', 'none');
 
                 var widgets = that.widgets.get_widgets();
diff --git a/install/ui/search.js b/install/ui/search.js
index a7074e22..99990528 100644
--- a/install/ui/search.js
+++ b/install/ui/search.js
@@ -47,15 +47,15 @@ IPA.search_facet = function(spec) {
 
         that.facet_create_header(container);
 
-        var span = $('<div/>', {
+        var div = $('<div/>', {
             'class': 'right-aligned-facet-controls'
         }).appendTo(that.controls);
 
-        span.append(IPA.create_network_spinner());
+        div.append(IPA.create_network_spinner());
 
         var filter_container = $('<div/>', {
             'class': 'search-filter'
-        }).appendTo(span);
+        }).appendTo(div);
 
         that.filter = $('<input/>', {
             type: 'text',
@@ -78,6 +78,17 @@ IPA.search_facet = function(spec) {
             }
         }).appendTo(filter_container);
 
+        that.refresh_button = IPA.action_button({
+            name: 'refresh',
+            href: 'refresh',
+            label: IPA.messages.buttons.refresh,
+            icon: 'reset-icon',
+            click: function() {
+                that.refresh();
+                return false;
+            }
+        }).appendTo(that.controls);
+
         that.remove_button = IPA.action_button({
             name: 'remove',
             label: IPA.messages.buttons.remove,
diff --git a/install/ui/test/data/ipa_init.json b/install/ui/test/data/ipa_init.json
index b819c30b..399a931b 100644
--- a/install/ui/test/data/ipa_init.json
+++ b/install/ui/test/data/ipa_init.json
@@ -52,6 +52,7 @@
                         "get": "Get",
                         "issue": "Issue",
                         "ok": "OK",
+                        "refresh": "Refresh",
                         "remove": "Delete",
                         "reset": "Reset",
                         "restore": "Restore",