Make section headings on dashboard/self query links

Feature: Issue 5555
Change-Id: I82681b641858db8f8fe9da651f95d4b98ebee828
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html
index bcfd79e..8277aa2 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html
@@ -14,7 +14,9 @@
 limitations under the License.
 -->
 
+<link rel="import" href="../../../behaviors/base-url-behavior/base-url-behavior.html">
 <link rel="import" href="../../../behaviors/gr-change-table-behavior/gr-change-table-behavior.html">
+<link rel="import" href="../../../behaviors/gr-url-encoding-behavior.html">
 <link rel="import" href="../../../behaviors/keyboard-shortcut-behavior/keyboard-shortcut-behavior.html">
 <link rel="import" href="../../../behaviors/rest-client-behavior/rest-client-behavior.html">
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
@@ -39,6 +41,13 @@
         background-color: #eee;
         border-top: 1em solid #fff;
       }
+      .groupHeader a {
+        color: #000;
+        text-decoration: none;
+      }
+      .groupHeader a:hover {
+        text-decoration: underline;
+      }
       .headerRow + tr {
         border: none;
       }
@@ -67,7 +76,10 @@
           <tr class="groupHeader">
             <td class="cell"
                 colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
-              [[_sectionTitle(sectionIndex)]]
+              <a
+                  href$="[[_sectionHref(sectionIndex)]]">
+                [[_sectionTitle(sectionIndex)]]
+              </a>
             </td>
           </tr>
         </template>
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.js b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.js
index cf4d343..e7b15af 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.js
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.js
@@ -89,9 +89,11 @@
     },
 
     behaviors: [
+      Gerrit.BaseUrlBehavior,
       Gerrit.ChangeTableBehavior,
       Gerrit.KeyboardShortcutBehavior,
       Gerrit.RESTClientBehavior,
+      Gerrit.URLEncodingBehavior,
     ],
 
     keyBindings: {
@@ -173,6 +175,12 @@
       return this.sectionMetadata[sectionIndex].name;
     },
 
+    _sectionHref(sectionIndex) {
+      if (sectionIndex > this.sectionMetadata.length - 1) { return null; }
+      const query = this.sectionMetadata[sectionIndex].query;
+      return `${this.getBaseUrl()}/q/${this.encodeURL(query, true)}`;
+    },
+
     _computeItemSelected(index, sectionIndex, selectedIndex) {
       let idx = 0;
       for (let i = 0; i < sectionIndex; i++) {
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_test.html b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_test.html
index 4b1189f..62b09d6 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_test.html
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_test.html
@@ -458,5 +458,17 @@
             items[i]._account_id === element.account._account_id);
       }
     });
+
+    test('_sectionHref', () => {
+      element.sectionMetadata = [
+        {query: 'is:open owner:self'},
+        {query: 'is:open ((reviewer:self -is:ignored) OR assignee:self)'},
+      ];
+
+      assert.equal(element._sectionHref(10), null);
+      assert.equal(element._sectionHref(0), '/q/is:open+owner:self');
+      assert.equal(element._sectionHref(1),
+          '/q/is:open+((reviewer:self+-is:ignored)+OR+assignee:self)');
+    });
   });
 </script>