Merge "PolyGerrit: Use gr-list-view on gr-plugin-list"

polygerrit-ui/app/elements/admin/gr-admin-view/gr-admin-view.html

@@ -87,7 +87,7 @@ limitations under the License.
     </template>
     <template is="dom-if" if="[[_showPluginList]]" restamp="true">
       <main class="table">
-        <gr-plugin-list class="table"></gr-plugin-list>
+        <gr-plugin-list class="table" params="[[params]]"></gr-plugin-list>
       </main>
     </template>
     <template is="dom-if" if="[[_showProjectDetailList]]" restamp="true">

polygerrit-ui/app/elements/admin/gr-plugin-list/gr-plugin-list.html

@@ -18,33 +18,42 @@ limitations under the License.
 <link rel="import" href="../../../behaviors/gr-list-view-behavior/gr-list-view-behavior.html">
 <link rel="import" href="../../../styles/gr-table-styles.html">
 <link rel="import" href="../../../styles/shared-styles.html">
+<link rel="import" href="../../shared/gr-list-view/gr-list-view.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
 
 <dom-module id="gr-plugin-list">
   <template>
     <style include="shared-styles"></style>
     <style include="gr-table-styles"></style>
-    <table id="list" class="genericList">
+    <gr-list-view
-      <tr class="headerRow">
+        filter="[[_filter]]"
-        <th class="name topHeader">Plugin Name</th>
+        items-per-page="[[_pluginsPerPage]]"
-        <th class="version topHeader">Version</th>
+        items="[[_plugins]]"
-        <th class="status topHeader">Status</th>
+        loading="[[_loading]]"
-      </tr>
+        offset="[[_offset]]"
-      <tr id="loading" class$="loadingMsg [[computeLoadingClass(_loading)]]">
+        path="[[_path]]">
-        <td>Loading...</td>
+      <table id="list" class="genericList">
-      </tr>
+        <tr class="headerRow">
-      <tbody class$="[[computeLoadingClass(_loading)]]">
+          <th class="name topHeader">Plugin Name</th>
-        <template is="dom-repeat" items="[[_plugins]]">
+          <th class="version topHeader">Version</th>
-          <tr class="table">
+          <th class="status topHeader">Status</th>
-            <td class="name">
+        </tr>
-              <a href$="[[_computePluginUrl(item.index_url)]]">[[item.id]]</a>
+        <tr id="loading" class$="loadingMsg [[computeLoadingClass(_loading)]]">
-            </td>
+          <td>Loading...</td>
-            <td class="version">[[item.version]]</td>
+        </tr>
-            <td class="status">[[_status(item)]]</td>
+        <tbody class$="[[computeLoadingClass(_loading)]]">
-          </tr>
+          <template is="dom-repeat" items="[[_shownPlugins]]">
-        </template>
+            <tr class="table">
-      </tbody>
+              <td class="name">
-    </table>
+                <a href$="[[_computePluginUrl(item.index_url)]]">[[item.id]]</a>
+              </td>
+              <td class="version">[[item.version]]</td>
+              <td class="status">[[_status(item)]]</td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </gr-list-view>
     <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
   </template>
   <script src="gr-plugin-list.js"></script>

polygerrit-ui/app/elements/admin/gr-plugin-list/gr-plugin-list.js

@@ -18,23 +18,61 @@
     is: 'gr-plugin-list',
 
     properties: {
+      /**
+       * URL params passed from the router.
+       */
+      params: {
+        type: Object,
+        observer: '_paramsChanged',
+      },
+      /**
+       * Offset of currently visible query results.
+       */
+      _offset: Number,
+      _path: {
+        type: String,
+        readOnly: true,
+        value: '/admin/plugins',
+      },
       _plugins: Array,
+      /**
+       * Because  we request one more than the pluginsPerPage, _shownPlugins
+       * maybe one less than _plugins.
+       * */
+      _shownPlugins: {
+        type: Array,
+        computed: 'computeShownItems(_plugins)',
+      },
+      _pluginsPerPage: {
+        type: Number,
+        value: 25,
+      },
       _loading: {
         type: Boolean,
         value: true,
       },
+      _filter: String,
     },
 
     behaviors: [
       Gerrit.ListViewBehavior,
     ],
 
-    ready() {
+    attached() {
-      this._getPlugins();
+      this.fire('title-change', {title: 'Plugin List'});
     },
 
-    _getPlugins() {
+    _paramsChanged(params) {
-      return this.$.restAPI.getPlugins()
+      this._loading = true;
+      this._filter = this.getFilterValue(params);
+      this._offset = this.getOffsetValue(params);
+
+      return this._getPlugins(this._filter, this._pluginsPerPage,
+          this._offset);
+    },
+
+    _getPlugins(filter, pluginsPerPage, offset) {
+      return this.$.restAPI.getPlugins(filter, pluginsPerPage, offset)
           .then(plugins => {
             if (!plugins) {
               this._plugins = [];

polygerrit-ui/app/elements/admin/gr-plugin-list/gr-plugin-list_test.html

@@ -33,7 +33,7 @@ limitations under the License.
 </test-fixture>
 
 <script>
-  let counter = 0;
+  let counter;
   const pluginGenerator = () => {
     return {
       id: `test${++counter}`,
@@ -47,26 +47,93 @@ limitations under the License.
     let element;
     let plugins;
     let sandbox;
+    let value;
 
     setup(() => {
       sandbox = sinon.sandbox.create();
-      plugins = _.times(26, pluginGenerator);
-      stub('gr-rest-api-interface', {
-        getPlugins() { return Promise.resolve(plugins); },
-      });
       element = fixture('basic');
+      counter = 0;
     });
 
     teardown(() => {
       sandbox.restore();
     });
 
-    test('_plugins item is formatted correctly', () => {
+    suite('list with plugins', () => {
-      return element._getPlugins().then(() => {
+      setup(done => {
-        assert.equal(element._plugins[2].id, 'test3');
+        plugins = _.times(26, pluginGenerator);
-        assert.equal(element._plugins[2].index_url, 'plugins/test3/');
+
-        assert.equal(element._plugins[2].version, '3.0-SNAPSHOT');
+        stub('gr-rest-api-interface', {
-        assert.equal(element._plugins[2].disabled, false);
+          getPlugins(num, offset) {
+            return Promise.resolve(plugins);
+          },
+        });
+
+        element._paramsChanged(value).then(() => { flush(done); });
+      });
+
+      test('plugin in the list is formatted correctly', done => {
+        flush(() => {
+          assert.equal(element._plugins[2].id, 'test3');
+          assert.equal(element._plugins[2].index_url, 'plugins/test3/');
+          assert.equal(element._plugins[2].version, '3.0-SNAPSHOT');
+          assert.equal(element._plugins[2].disabled, false);
+          done();
+        });
+      });
+
+      test('_shownPlugins', () => {
+        assert.equal(element._shownPlugins.length, 25);
+      });
+    });
+
+    suite('list with less then 26 plugins', () => {
+      setup(done => {
+        plugins = _.times(25, pluginGenerator);
+
+        stub('gr-rest-api-interface', {
+          getPlugins(num, offset) {
+            return Promise.resolve(plugins);
+          },
+        });
+
+        element._paramsChanged(value).then(() => { flush(done); });
+      });
+
+      test('_shownPlugins', () => {
+        assert.equal(element._shownPlugins.length, 25);
+      });
+    });
+
+    suite('filter', () => {
+      test('_paramsChanged', done => {
+        sandbox.stub(element.$.restAPI, 'getPlugins', () => {
+          return Promise.resolve(plugins);
+        });
+        const value = {
+          filter: 'test',
+          offset: 25,
+        };
+        element._paramsChanged(value).then(() => {
+          assert.isTrue(element.$.restAPI.getPlugins.lastCall
+              .calledWithExactly('test', 25, 25));
+          done();
+        });
+      });
+    });
+
+    suite('loading', () => {
+      test('correct contents are displayed', () => {
+        assert.isTrue(element._loading);
+        assert.equal(element.computeLoadingClass(element._loading), 'loading');
+        assert.equal(getComputedStyle(element.$.loading).display, 'block');
+
+        element._loading = false;
+        element._plugins = _.times(25, pluginGenerator);
+
+        flushAsynchronousOperations();
+        assert.equal(element.computeLoadingClass(element._loading), '');
+        assert.equal(getComputedStyle(element.$.loading).display, 'none');
       });
     });
   });

polygerrit-ui/app/elements/core/gr-router/gr-router.js

@@ -290,6 +290,51 @@
       };
     });
 
+    // Matches /admin/plugins[,<offset>][/].
+    page(/^\/admin\/plugins(,(\d+))?(\/)?$/, loadUser, data => {
+      restAPI.getLoggedIn().then(loggedIn => {
+        if (loggedIn) {
+          app.params = {
+            view: Gerrit.Nav.View.ADMIN,
+            adminView: 'gr-plugin-list',
+            offset: data.params[1] || 0,
+            filter: null,
+          };
+        } else {
+          redirectToLogin(data.canonicalPath);
+        }
+      });
+    });
+
+    page('/admin/plugins/q/filter::filter,:offset', loadUser, data => {
+      restAPI.getLoggedIn().then(loggedIn => {
+        if (loggedIn) {
+          app.params = {
+            view: Gerrit.Nav.View.ADMIN,
+            adminView: 'gr-plugin-list',
+            offset: data.params.offset,
+            filter: data.params.filter,
+          };
+        } else {
+          redirectToLogin(data.canonicalPath);
+        }
+      });
+    });
+
+    page('/admin/plugins/q/filter::filter', loadUser, data => {
+      restAPI.getLoggedIn().then(loggedIn => {
+        if (loggedIn) {
+          app.params = {
+            view: Gerrit.Nav.View.ADMIN,
+            adminView: 'gr-plugin-list',
+            filter: data.params.filter || null,
+          };
+        } else {
+          redirectToLogin(data.canonicalPath);
+        }
+      });
+    });
+
     page(/^\/admin\/plugins(\/)?$/, loadUser, data => {
       restAPI.getLoggedIn().then(loggedIn => {
         if (loggedIn) {

polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.js

@@ -675,8 +675,13 @@
       );
     },
 
-    getPlugins() {
+    getPlugins(filter, pluginsPerPage, opt_offset) {
-      return this._fetchSharedCacheURL('/plugins/?all');
+      const offset = opt_offset || 0;
+
+      return this.fetchJSON(
+          `/plugins/?all&n=${pluginsPerPage + 1}&S=${offset}` +
+          this._computeFilter(filter)
+      );
     },
 
     getSuggestedGroups(inputVal, opt_n, opt_errFn, opt_ctx) {