From 3810c5e7c4e5e60721601878a039a90b10fd202c Mon Sep 17 00:00:00 2001
From: Paladox <thomasmulhall410@yahoo.com>
Date: Sat, 17 Mar 2018 16:24:21 +0000
Subject: [PATCH 1/2] PolyGerrit: Add support for "Included In"

Bug: Issue 6112
Change-Id: I033e3f248a404813b5bc46eeef6bf25b7153bc1a
---
 .../change/gr-change-view/gr-change-view.html | 12 +++
 .../change/gr-change-view/gr-change-view.js   | 13 +++
 .../gr-file-list-header.html                  |  9 ++
 .../gr-file-list-header.js                    |  9 ++
 .../gr-included-in-dialog.html                | 84 +++++++++++++++++++
 .../gr-included-in-dialog.js                  | 82 ++++++++++++++++++
 .../gr-included-in-dialog_test.html           | 74 ++++++++++++++++
 .../gr-rest-api-interface.js                  |  7 ++
 polygerrit-ui/app/test/index.html             |  1 +
 9 files changed, 291 insertions(+)
 create mode 100644 polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
 create mode 100644 polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.js
 create mode 100644 polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog_test.html

diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
index 3ac3a578ae..172795ccd2 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
@@ -36,6 +36,7 @@ limitations under the License.
 <link rel="import" href="../gr-download-dialog/gr-download-dialog.html">
 <link rel="import" href="../gr-file-list/gr-file-list.html">
 <link rel="import" href="../gr-file-list-header/gr-file-list-header.html">
+<link rel="import" href="../gr-included-in-dialog/gr-included-in-dialog.html">
 <link rel="import" href="../gr-messages-list/gr-messages-list.html">
 <link rel="import" href="../gr-related-changes-list/gr-related-changes-list.html">
 <link rel="import" href="../gr-reply-dialog/gr-reply-dialog.html">
@@ -203,6 +204,10 @@ limitations under the License.
       .scrollable {
         overflow: auto;
       }
+      #includedInOverlay {
+        padding: 2em;
+        width: 65em;
+      }
       @media screen and (min-width: 80em) {
         .commitMessage {
           max-width: var(--commit-message-max-width, 100ch);
@@ -439,6 +444,7 @@ limitations under the License.
             revisions="[[_sortedRevisions]]"
             on-open-diff-prefs="_handleOpenDiffPrefs"
             on-open-download-dialog="_handleOpenDownloadDialog"
+            on-open-included-in-dialog="_handleOpenIncludedInDialog"
             on-expand-diffs="_expandAllDiffs"
             on-collapse-diffs="_collapseAllDiffs">
         </gr-file-list-header>
@@ -476,6 +482,12 @@ limitations under the License.
           config="[[_serverConfig.download]]"
           on-close="_handleDownloadDialogClose"></gr-download-dialog>
     </gr-overlay>
+    <gr-overlay id="includedInOverlay" with-backdrop>
+      <gr-included-in-dialog
+          id="includedInDialog"
+          change-num="[[_changeNum]]"
+          on-close="_handleIncludedInDialogClose"></gr-included-in-dialog>
+    </gr-overlay>
     <gr-overlay id="replyOverlay"
         class="scrollable"
         no-cancel-on-outside-click
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
index 676e3def0d..97f0fe99c1 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
@@ -410,6 +410,19 @@
       this.$.fileList.openDiffPrefs();
     },
 
+
+    _handleOpenIncludedInDialog() {
+      this.$.includedInDialog.loadData().then(() => {
+        Polymer.dom.flush();
+        this.$.includedInOverlay.refit();
+      });
+      this.$.includedInOverlay.open();
+    },
+
+    _handleIncludedInDialogClose(e) {
+      this.$.includedInOverlay.close();
+    },
+
     _handleOpenDownloadDialog() {
       this.$.downloadOverlay.open().then(() => {
         this.$.downloadOverlay
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
index fd07d4ecf2..fb862603e3 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
@@ -131,6 +131,9 @@ limitations under the License.
         font-family: var(--font-family-bold);
         margin-right: 1em;
       }
+      .container.includedInContainer.hide {
+        display: none;
+      }
       @media screen and (max-width: 50em) {
         .patchInfo-header .desktop {
           display: none;
@@ -166,6 +169,12 @@ limitations under the License.
                 class="download"
                 on-tap="_handleDownloadTap">Download</gr-button>
           </span>
+        <span class$="container includedInContainer [[_hideIncludedIn(change)]] desktop">
+          <span class="separator"></span>
+          <gr-button link
+              class="includedIn"
+              on-tap="_handleIncludedInTap">Included In</gr-button>
+        </span>
           <span class="container descriptionContainer hideOnEdit">
             <span class="separator"></span>
             <gr-editable-label
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.js b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.js
index ace880adab..4f416d625d 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.js
+++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.js
@@ -148,6 +148,11 @@
       this.fire('open-diff-prefs');
     },
 
+    _handleIncludedInTap(e) {
+      e.preventDefault();
+      this.fire('open-included-in-dialog');
+    },
+
     _handleDownloadTap(e) {
       e.preventDefault();
       this.fire('open-download-dialog');
@@ -168,5 +173,9 @@
       }
       return 'patchInfoOldPatchSet';
     },
+
+    _hideIncludedIn(change) {
+      return change && change.status === 'MERGED' ? '' : 'hide';
+    },
   });
 })();
diff --git a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
new file mode 100644
index 0000000000..a017635252
--- /dev/null
+++ b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
@@ -0,0 +1,84 @@
+<!--
+Copyright (C) 2018 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../styles/shared-styles.html">
+<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
+
+<dom-module id="gr-included-in-dialog">
+  <template>
+    <style include="shared-styles">
+      :host {
+        display: block;
+        padding: 1em;
+      }
+      h1 {
+        font-size: 1.2rem;
+      }
+      h2 {
+        font-size: 1rem;
+      }
+      .closeButtonContainer {
+        position: absolute;
+        right: 2em;
+        top: 2em;
+      }
+      .container {
+        max-height: 80vh;
+        overflow-y: scroll;
+      }
+      ul {
+        margin-bottom: 1em;
+      }
+      ul li {
+        border-radius: .2em;
+        background: #eee;
+        display: inline-block;
+        margin: 0 .2em .4em .2em;
+        padding: .2em .4em;
+      }
+      .loading.loaded {
+        display: none;
+      }
+    </style>
+    <header>
+      <h1>Included In:</h1>
+      <span class="closeButtonContainer">
+        <gr-button id="closeButton"
+            link
+            on-tap="_handleCloseTap">Close</gr-button>
+      </span>
+    </header>
+    <div class$="[[_computeLoadingClass(_loaded)]]">Loading...</div>
+    <div class="container">
+      <template
+          is="dom-repeat"
+          items="[[_computeGroups(_includedIn)]]"
+          as="group">
+        <div>
+          <h2>[[group.title]]:</h2>
+          <ul>
+            <template is="dom-repeat" items="[[group.items]]">
+              <li>[[item]]</li>
+            </template>
+          </ul>
+        </div>
+      </template>
+    </div>
+    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
+  </template>
+  <script src="gr-included-in-dialog.js"></script>
+</dom-module>
diff --git a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.js b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.js
new file mode 100644
index 0000000000..1079eeca08
--- /dev/null
+++ b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.js
@@ -0,0 +1,82 @@
+// Copyright (C) 2018 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+(function() {
+  'use strict';
+
+  Polymer({
+    is: 'gr-included-in-dialog',
+
+    /**
+     * Fired when the user presses the close button.
+     *
+     * @event close
+     */
+
+    properties: {
+      /** @type {?} */
+      changeNum: {
+        type: Object,
+        observer: '_resetData',
+      },
+      /** @type {?} */
+      _includedIn: Object,
+      _loaded: {
+        type: Boolean,
+        value: false,
+      },
+    },
+
+    loadData() {
+      if (!this.changeNum) { return; }
+      return this.$.restAPI.getChangeIncludedIn(this.changeNum).then(
+          configs => {
+            if (!configs) { return; }
+            this._includedIn = configs;
+            this._loaded = true;
+          });
+    },
+
+    _resetData() {
+      this._includedIn = null;
+      this._loaded = false;
+    },
+
+    _computeGroups(includedIn) {
+      if (!includedIn) { return []; }
+
+      const groups = [
+        {title: 'Branches', items: includedIn.branches},
+        {title: 'Tags', items: includedIn.tags},
+      ];
+      if (includedIn.external) {
+        for (const externalKey of Object.keys(includedIn.external)) {
+          groups.push({
+            title: externalKey,
+            items: includedIn.external[externalKey],
+          });
+        }
+      }
+      return groups;
+    },
+
+    _handleCloseTap(e) {
+      e.preventDefault();
+      this.fire('close', null, {bubbles: false});
+    },
+
+    _computeLoadingClass(loaded) {
+      return loaded ? 'loading loaded' : 'loading';
+    },
+  });
+})();
diff --git a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog_test.html b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog_test.html
new file mode 100644
index 0000000000..16aa7b21af
--- /dev/null
+++ b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog_test.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<!--
+Copyright (C) 2018 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+<title>gr-included-in-dialog</title>
+
+<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+<script src="../../../bower_components/web-component-tester/browser.js"></script>
+<link rel="import" href="../../../test/common-test-setup.html"/>
+<link rel="import" href="gr-included-in-dialog.html">
+
+<script>void(0);</script>
+
+<test-fixture id="basic">
+  <template>
+    <gr-included-in-dialog></gr-included-in-dialog>
+  </template>
+</test-fixture>
+
+<script>
+  suite('gr-included-in-dialog', () => {
+    let element;
+    let sandbox;
+
+    setup(() => {
+      sandbox = sinon.sandbox.create();
+      element = fixture('basic');
+    });
+
+    teardown(() => { sandbox.restore(); });
+
+    test('_computeGroups', () => {
+      const includedIn = {branches: [], tags: []};
+      assert.deepEqual(element._computeGroups(includedIn), [
+        {title: 'Branches', items: []},
+        {title: 'Tags', items: []},
+      ]);
+
+      includedIn.branches.push('master', 'development', 'stable-2.0');
+      includedIn.tags.push('v1.9', 'v2.0', 'v2.1');
+      assert.deepEqual(element._computeGroups(includedIn), [
+        {title: 'Branches', items: ['master', 'development', 'stable-2.0']},
+        {title: 'Tags', items: ['v1.9', 'v2.0', 'v2.1']},
+      ]);
+
+      includedIn.external = {};
+      assert.deepEqual(element._computeGroups(includedIn), [
+        {title: 'Branches', items: ['master', 'development', 'stable-2.0']},
+        {title: 'Tags', items: ['v1.9', 'v2.0', 'v2.1']},
+      ]);
+
+      includedIn.external.foo = ['abc', 'def', 'ghi'];
+      assert.deepEqual(element._computeGroups(includedIn), [
+        {title: 'Branches', items: ['master', 'development', 'stable-2.0']},
+        {title: 'Tags', items: ['v1.9', 'v2.0', 'v2.1']},
+        {title: 'foo', items: ['abc', 'def', 'ghi']},
+      ]);
+    });
+  });
+</script>
diff --git a/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.js b/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.js
index 763e622754..5e9d913ae3 100644
--- a/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.js
+++ b/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.js
@@ -986,6 +986,13 @@
           opt_errFn, null, params);
     },
 
+    /**
+     * @param {number|string} changeNum
+     */
+    getChangeIncludedIn(changeNum) {
+      return this._getChangeURLAndFetch(changeNum, '/in', null);
+    },
+
     _computeFilter(filter) {
       if (filter && filter.startsWith('^')) {
         filter = '&r=' + encodeURIComponent(filter);
diff --git a/polygerrit-ui/app/test/index.html b/polygerrit-ui/app/test/index.html
index a06b470922..cbc5cb0846 100644
--- a/polygerrit-ui/app/test/index.html
+++ b/polygerrit-ui/app/test/index.html
@@ -68,6 +68,7 @@ limitations under the License.
     'change/gr-download-dialog/gr-download-dialog_test.html',
     'change/gr-file-list-header/gr-file-list-header_test.html',
     'change/gr-file-list/gr-file-list_test.html',
+    'change/gr-included-in-dialog/gr-included-in-dialog_test.html',
     'change/gr-label-score-row/gr-label-score-row_test.html',
     'change/gr-label-scores/gr-label-scores_test.html',
     'change/gr-message/gr-message_test.html',

From 8e32422334e742960e5a987ff1ac5deea8434e3a Mon Sep 17 00:00:00 2001
From: Wyatt Allen <wyatta@google.com>
Date: Fri, 16 Mar 2018 12:55:58 -0700
Subject: [PATCH 2/2] Included-In dialog polish

Add a filter textbox and behavior to the Included-In dialog and align
the padding with other dialogs. To accommodate filtering, empty groups
are hidden.

Change-Id: I481f266ce8cc67de07f1dc8dfb9129b7d36e081b
---
 .../change/gr-change-view/gr-change-view.html |  1 -
 .../gr-included-in-dialog.html                | 66 ++++++++++++-------
 .../gr-included-in-dialog.js                  | 24 +++++--
 .../gr-included-in-dialog_test.html           | 23 +++++--
 4 files changed, 76 insertions(+), 38 deletions(-)

diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
index 172795ccd2..40db0915b1 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
@@ -205,7 +205,6 @@ limitations under the License.
         overflow: auto;
       }
       #includedInOverlay {
-        padding: 2em;
         width: 65em;
       }
       @media screen and (min-width: 80em) {
diff --git a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
index a017635252..c3d5808cbf 100644
--- a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
+++ b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
@@ -23,22 +23,35 @@ limitations under the License.
     <style include="shared-styles">
       :host {
         display: block;
-        padding: 1em;
+        max-height: 80vh;
+        overflow-y: auto;
+        padding: 4.5em 1em 1em 1em;
       }
-      h1 {
+      header {
+        background: #fff;
+        border-bottom: 1px solid #cdcdcd;
+        left: 0;
+        padding: 1em;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+      #title {
+        display: inline-block;
         font-size: 1.2rem;
+        margin-top: .2em;
       }
       h2 {
         font-size: 1rem;
       }
-      .closeButtonContainer {
-        position: absolute;
-        right: 2em;
-        top: 2em;
+      #filterInput {
+        display: inline-block;
+        float: right;
+        margin: 0 1em;
+        padding: .2em;
       }
-      .container {
-        max-height: 80vh;
-        overflow-y: scroll;
+      .closeButtonContainer {
+        float: right;
       }
       ul {
         margin-bottom: 1em;
@@ -55,29 +68,32 @@ limitations under the License.
       }
     </style>
     <header>
-      <h1>Included In:</h1>
+      <h1 id="title">Included In:</h1>
       <span class="closeButtonContainer">
         <gr-button id="closeButton"
             link
             on-tap="_handleCloseTap">Close</gr-button>
       </span>
+      <input
+          id="filterInput"
+          is="iron-input"
+          placeholder="Filter"
+          on-bind-value-changed="_onFilterChanged">
     </header>
     <div class$="[[_computeLoadingClass(_loaded)]]">Loading...</div>
-    <div class="container">
-      <template
-          is="dom-repeat"
-          items="[[_computeGroups(_includedIn)]]"
-          as="group">
-        <div>
-          <h2>[[group.title]]:</h2>
-          <ul>
-            <template is="dom-repeat" items="[[group.items]]">
-              <li>[[item]]</li>
-            </template>
-          </ul>
-        </div>
-      </template>
-    </div>
+    <template
+        is="dom-repeat"
+        items="[[_computeGroups(_includedIn, _filterText)]]"
+        as="group">
+      <div>
+        <h2>[[group.title]]:</h2>
+        <ul>
+          <template is="dom-repeat" items="[[group.items]]">
+            <li>[[item]]</li>
+          </template>
+        </ul>
+      </div>
+    </template>
     <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
   </template>
   <script src="gr-included-in-dialog.js"></script>
diff --git a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.js b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.js
index 1079eeca08..93e644e053 100644
--- a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.js
+++ b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.js
@@ -35,10 +35,15 @@
         type: Boolean,
         value: false,
       },
+      _filterText: {
+        type: String,
+        value: '',
+      },
     },
 
     loadData() {
       if (!this.changeNum) { return; }
+      this._filterText = '';
       return this.$.restAPI.getChangeIncludedIn(this.changeNum).then(
           configs => {
             if (!configs) { return; }
@@ -52,22 +57,25 @@
       this._loaded = false;
     },
 
-    _computeGroups(includedIn) {
+    _computeGroups(includedIn, filterText) {
       if (!includedIn) { return []; }
 
+      const filter = item => !filterText.length ||
+          item.toLowerCase().indexOf(filterText.toLowerCase()) !== -1;
+
       const groups = [
-        {title: 'Branches', items: includedIn.branches},
-        {title: 'Tags', items: includedIn.tags},
+        {title: 'Branches', items: includedIn.branches.filter(filter)},
+        {title: 'Tags', items: includedIn.tags.filter(filter)},
       ];
       if (includedIn.external) {
         for (const externalKey of Object.keys(includedIn.external)) {
           groups.push({
             title: externalKey,
-            items: includedIn.external[externalKey],
+            items: includedIn.external[externalKey].filter(filter),
           });
         }
       }
-      return groups;
+      return groups.filter(g => g.items.length);
     },
 
     _handleCloseTap(e) {
@@ -78,5 +86,11 @@
     _computeLoadingClass(loaded) {
       return loaded ? 'loading loaded' : 'loading';
     },
+
+    _onFilterChanged() {
+      this.debounce('filter-change', () => {
+        this._filterText = this.$.filterInput.bindValue;
+      }, 100);
+    },
   });
 })();
diff --git a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog_test.html b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog_test.html
index 16aa7b21af..1f7af38e8c 100644
--- a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog_test.html
+++ b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog_test.html
@@ -45,30 +45,39 @@ limitations under the License.
 
     test('_computeGroups', () => {
       const includedIn = {branches: [], tags: []};
-      assert.deepEqual(element._computeGroups(includedIn), [
-        {title: 'Branches', items: []},
-        {title: 'Tags', items: []},
-      ]);
+      let filterText = '';
+      assert.deepEqual(element._computeGroups(includedIn, filterText), []);
 
       includedIn.branches.push('master', 'development', 'stable-2.0');
       includedIn.tags.push('v1.9', 'v2.0', 'v2.1');
-      assert.deepEqual(element._computeGroups(includedIn), [
+      assert.deepEqual(element._computeGroups(includedIn, filterText), [
         {title: 'Branches', items: ['master', 'development', 'stable-2.0']},
         {title: 'Tags', items: ['v1.9', 'v2.0', 'v2.1']},
       ]);
 
       includedIn.external = {};
-      assert.deepEqual(element._computeGroups(includedIn), [
+      assert.deepEqual(element._computeGroups(includedIn, filterText), [
         {title: 'Branches', items: ['master', 'development', 'stable-2.0']},
         {title: 'Tags', items: ['v1.9', 'v2.0', 'v2.1']},
       ]);
 
       includedIn.external.foo = ['abc', 'def', 'ghi'];
-      assert.deepEqual(element._computeGroups(includedIn), [
+      assert.deepEqual(element._computeGroups(includedIn, filterText), [
         {title: 'Branches', items: ['master', 'development', 'stable-2.0']},
         {title: 'Tags', items: ['v1.9', 'v2.0', 'v2.1']},
         {title: 'foo', items: ['abc', 'def', 'ghi']},
       ]);
+
+      filterText = 'v2';
+      assert.deepEqual(element._computeGroups(includedIn, filterText), [
+        {title: 'Tags', items: ['v2.0', 'v2.1']},
+      ]);
+
+      // Filtering is case-insensitive.
+      filterText = 'V2';
+      assert.deepEqual(element._computeGroups(includedIn, filterText), [
+        {title: 'Tags', items: ['v2.0', 'v2.1']},
+      ]);
     });
   });
 </script>