Handle errors in change list

Errors are quite common there since user can enter invalid queries.
Display error message when an error occurs and hide change list.

Change-Id: I6efbfce42258b71cd0dba9d7c79adb1b5c2858d5

polygerrit-ui/app/elements/gr-ajax.html

@@ -24,6 +24,7 @@ limitations under the License.
         url="[[url]]"
         params="[[params]]"
         json-prefix=")]}'"
+        last-error="{{lastError}}"
         last-response="{{lastResponse}}"
         loading="{{loading}}"
         on-response="_handleResponse"
@@ -65,6 +66,10 @@ limitations under the License.
             return {};
           },
         },
+        lastError: {
+          type: Object,
+          notify: true,
+        },
         lastResponse: {
           type: Object,
           notify: true,

polygerrit-ui/app/elements/gr-change-list-view.html

@@ -27,11 +27,17 @@ limitations under the License.
         display: block;
         margin: 0 1.25rem;
       }
-      .loading {
+      .loading,
+      .error {
         margin-top: 1em;
-        color: #666;
         background-color: #f1f2f3;
       }
+      .loading {
+        color: #666;
+      }
+      .error {
+        color: #D32F2F;
+      }
       gr-change-list {
         margin-top: 1em;
         width: 100%;
@@ -51,7 +57,8 @@ limitations under the License.
         :host {
           margin: 0;
         }
-        .loading {
+        .loading,
+        .error {
           padding: 0 1.25rem;
         }
       }
@@ -61,9 +68,13 @@ limitations under the License.
         url="/changes/"
         params="[[_computeQueryParams(_query, _offset)]]"
         last-response="{{_changes}}"
+        last-error="{{_lastError}}"
         loading="{{_loading}}"></gr-ajax>
-    <div class="loading" hidden$="[[!_loading]]">Loading...</div>
-    <div hidden$="[[_loading]]" hidden>
+    <div class="loading" hidden$="[[!_loading]]" hidden>Loading...</div>
+    <div class="error" hidden$="[[_computeErrorHidden(_loading, _lastError)]]" hidden>
+      [[_lastError.request.xhr.responseText]]
+    </div>
+    <div hidden$="[[_computeListHidden(_loading, _lastError)]]" hidden>
       <gr-change-list
           changes="{{_changes}}"
           selected-index="{{viewState.selectedChangeIndex}}"
@@ -132,6 +143,11 @@ limitations under the License.
          */
         _changes: Array,
 
+        /**
+         * Contains error of last request (in case of change loading error).
+         */
+        _lastError: Object,
+
         /**
          * For showing a "loading..." string during ajax requests.
          */
@@ -191,6 +207,14 @@ limitations under the License.
         return href;
       },
 
+      _computeErrorHidden: function(loading, lastError) {
+        return loading || lastError == null;
+      },
+
+      _computeListHidden: function(loading, lastError) {
+        return loading || lastError != null;
+      },
+
       _hidePrevArrow: function(offset) {
         return offset == 0;
       },

polygerrit-ui/app/elements/gr-change-list.html

@@ -113,6 +113,7 @@ limitations under the License.
       ],
 
       _computeLabelNames: function(groups) {
+        if (!groups) { return []; }
         var labels = [];
         var nonExistingLabel = function(item) {
           return labels.indexOf(item) < 0;
@@ -134,7 +135,7 @@ limitations under the License.
       },
 
       _changesChanged: function(changes) {
-        this.groups = [changes];
+        this.groups = changes ? [changes] : [];
       },
 
       _groupTitle: function(groupIndex) {