Content is no more overwritten by error message

When an error which caused calling of report_error occurt, the content of a facet got replaced by error message. There was no way how to force the facet to recreate its content and the facet became unusable.

This patch creates a containter for an error message. On error,  report_error writes its content to error container, content container is hidden and error container is shown. Older comment in a code suggested to move the error message to facet's footer. A message in a footer could be missed by the user and on top of that a footer is sometimes used by various facet and we would have to solve the same problem again.

From experience the cause of an error is usually a missing pkey in a path. Therefore error information suggests user to navigate to top level. It causes to load default facets with default values so errors in navigation state shouldn't happen.

Facet content is displayed back on facet_show. If user tries to display same object as before facet's need_update() would return false, therefore need_update was modified to always return true if error is displayed.

Reproduction:
 1) display any nested entity - ie DNS record
 2) delete its parent pkey from path - &dnszone-pkey=example.com
 3) reload the page with this path

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

install/ui/association.js

@@ -1063,6 +1063,8 @@ IPA.association_facet = function (spec) {
         var page = parseInt(IPA.nav.get_state(that.entity.name+'-page'), 10) || 1;
         if (that.table.current_page !== page) return true;
 
+        if (that.error_displayed()) return true;
+
         return false;
     };
 

install/ui/details.js

@@ -419,7 +419,9 @@ IPA.details_facet = function(spec) {
     that.needs_update = function() {
         if (that._needs_update !== undefined) return that._needs_update;
         var pkey = IPA.nav.get_state(that.entity.name+'-pkey');
-        return pkey !== that.pkey;
+        var needs_update = that.error_displayed();
+        needs_update = needs_update || pkey !== that.pkey;
+        return needs_update;
     };
 
     that.field_dirty_changed = function(dirty) {

install/ui/facet.js

@@ -79,6 +79,11 @@ IPA.facet = function(spec) {
         that.content = $('<div/>', {
             'class': 'facet-content'
         }).appendTo(container);
+
+        that.error_container = $('<div/>', {
+            'class': 'facet-content facet-error'
+        }).appendTo(container);
+
         that.create_content(that.content);
     };
 
@@ -101,6 +106,22 @@ IPA.facet = function(spec) {
 
     that.show = function() {
         that.container.css('display', 'block');
+        that.show_content();
+    };
+
+    that.show_content = function() {
+        that.content.css('display', 'block');
+        that.error_container.css('display', 'none');
+    };
+
+    that.show_error = function() {
+        that.content.css('display', 'none');
+        that.error_container.css('display', 'block');
+    };
+
+    that.error_displayed = function() {
+        return that.error_container &&
+                    that.error_container.css('display') === 'block';
     };
 
     that.hide = function() {
@@ -128,11 +149,64 @@ IPA.facet = function(spec) {
     };
 
     that.report_error = function(error_thrown) {
-        // TODO: The error message should be displayed in the facet footer.
+
-        // There should be a standard footer section for all facets.
+        var add_option = function(ul, text, handler) {
-        that.content.empty();
+
-        that.content.append('<p>'+IPA.get_message('errors.error', 'Error')+': '+error_thrown.name+'</p>');
+            var li = $('<li/>').appendTo(ul);
-        that.content.append('<p>'+error_thrown.message+'</p>');
+            $('<a />', {
+                href: '#',
+                text: text,
+                click: function() {
+                    handler();
+                    return false;
+                }
+            }).appendTo(li);
+        };
+
+        var title = IPA.messages.error_report.title;
+        title = title.replace('${error}', error_thrown.name);
+
+        that.error_container.empty();
+        that.error_container.append('<h1>'+title+'</h1>');
+
+        var details = $('<div/>', {
+            'class': 'error-details'
+        }).appendTo(that.error_container);
+        details.append('<p>'+error_thrown.message+'</p>');
+
+        $('<div/>', {
+            text: IPA.messages.error_report.options
+        }).appendTo(that.error_container);
+
+        var options_list = $('<ul/>').appendTo(that.error_container);
+
+        add_option(
+            options_list,
+            IPA.messages.error_report.refresh,
+            function() {
+                that.refresh();
+            }
+        );
+
+        add_option(
+            options_list,
+            IPA.messages.error_report.main_page,
+            function() {
+                IPA.nav.show_top_level_page();
+            }
+        );
+
+        add_option(
+            options_list,
+            IPA.messages.error_report.reload,
+            function() {
+                window.location.reload(false);
+            }
+        );
+
+        that.error_container.append('<p>'+IPA.messages.error_report.problem_persists+'</p>');
+
+        that.show_error();
     };
 
     that.get_redirect_facet = function() {

install/ui/ipa.css

@@ -648,6 +648,21 @@ div[name=settings].facet-group li a {
     top: 70px;
 }
 
+/* --- Facet error --- */
+
+.facet-error {
+    padding: 2em 15em;
+}
+
+.facet-error h1 {
+    text-align: center;
+}
+
+.facet-error .error-details {
+    margin-top: 2em;
+    font-family: monospace;
+}
+
 /* ---- Search Facet ---- */
 
 .content-table {

install/ui/navigation.js

@@ -263,6 +263,10 @@ IPA.navigation = function(spec) {
         return that.push_state(state);
     };
 
+    that.show_top_level_page = function() {
+        jQuery.bbq.pushState({}, 2);
+    };
+
     that.get_tab_facet = function(tab_name) {
 
         var facet = null;

install/ui/test/data/ipa_init.json

@@ -91,6 +91,14 @@
                         "validation_message": "Input form contains invalid or missing values.",
                         "validation_title": "Validation error"
                     },
+                    "error_report": {
+                        "options": "Please try the following options:",
+                        "problem_persists": "If the problem persists please contact the system administrator.",
+                        "refresh": "Refresh the page.",
+                        "reload": "Reload the browser.",
+                        "main_page": "Return to the main page and retry the operation",
+                        "title": "An error has occured (${error})"
+                    },
                     "errors": {
                         "error": "Error",
                         "http_error": "HTTP Error",

ipalib/plugins/internal.py

@@ -226,6 +226,14 @@ class i18n_messages(Command):
             "validation_title": _("Validation error"),
             "validation_message": _("Input form contains invalid or missing values."),
         },
+        "error_report": {
+            "options": _("Please try the following options:"),
+            "problem_persists": _("If the problem persists please contact the system administrator."),
+            "refresh": _("Refresh the page."),
+            "reload": _("Reload the browser."),
+            "main_page": _("Return to the main page and retry the operation"),
+            "title": _("An error has occured (${error})"),
+        },
         "errors": {
             "error": _("Error"),
             "http_error": _("HTTP Error"),