Show group memberships in the PolyGerrit settings screen

Introduces gr-group-list for the user-group display, which is added to the gr-settings-view. Also refactors some table styles. Bug: Issue 3911 Change-Id: I41748e16a98f437c6931caa1e43b69f01d801ea5
2016-06-16 14:53:01 -07:00
parent 767b76015b
commit 6405650742
12 changed files with 365 additions and 172 deletions
--- a/polygerrit-ui/app/elements/settings/gr-email-editor/gr-email-editor.html
+++ b/polygerrit-ui/app/elements/settings/gr-email-editor/gr-email-editor.html
@@ -44,6 +44,8 @@ limitations under the License.
        border: 1px solid #ddd;
      }
    </style>
+    <style include="gr-settings-styles"></style>
+    <div class="gr-settings-styles">
      <table>
        <thead>
          <tr>
@@ -76,6 +78,7 @@ limitations under the License.
          </template>
        </tbody>
      </table>
+    </div>
    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
  </template>
  <script src="gr-email-editor.js"></script>
--- a/polygerrit-ui/app/elements/settings/gr-group-list/gr-group-list.html
+++ b/polygerrit-ui/app/elements/settings/gr-group-list/gr-group-list.html
@@ -0,0 +1,59 @@
+<!--
+Copyright (C) 2016 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="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
+
+<link rel="import" href="../../../styles/gr-settings-styles.html">
+
+<dom-module id="gr-group-list">
+  <template>
+    <style>
+      .nameHeader {
+        width: 15em;
+      }
+      .descriptionHeader {
+        width: 21.5em;
+      }
+      .visibleCell {
+        text-align: center;
+      }
+    </style>
+    <style include="gr-settings-styles"></style>
+    <div class="gr-settings-styles">
+      <table>
+        <thead>
+          <tr>
+            <th class="nameHeader">Name</th>
+            <th class="descriptionHeader">Description</th>
+            <th>Visible to All</th>
+          </tr>
+        </thead>
+        <tbody>
+          <template is="dom-repeat" items="[[_groups]]">
+            <tr>
+              <td>[[item.name]]</td>
+              <td>[[item.description]]</td>
+              <td class="visibleCell">[[_computeVisibleToAll(item)]]</td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
+  </template>
+  <script src="gr-group-list.js"></script>
+</dom-module>
--- a/polygerrit-ui/app/elements/settings/gr-group-list/gr-group-list.js
+++ b/polygerrit-ui/app/elements/settings/gr-group-list/gr-group-list.js
@@ -0,0 +1,36 @@
+// Copyright (C) 2016 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-group-list',
+
+    properties: {
+      _groups: Array,
+    },
+
+    loadData: function() {
+      return this.$.restAPI.getAccountGroups().then(function(groups) {
+        this._groups = groups.sort(function(a, b) {
+          return a.name.localeCompare(b.name);
+        });
+      }.bind(this));
+    },
+
+    _computeVisibleToAll: function(group) {
+      return group.options.visible_to_all ? 'Yes' : 'No';
+    },
+  });
+})();
--- a/polygerrit-ui/app/elements/settings/gr-group-list/gr-group-list_test.html
+++ b/polygerrit-ui/app/elements/settings/gr-group-list/gr-group-list_test.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!--
+Copyright (C) 2016 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-settings-view</title>
+
+<script src="../../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
+<script src="../../../bower_components/web-component-tester/browser.js"></script>
+
+<link rel="import" href="gr-group-list.html">
+
+<test-fixture id="basic">
+  <template>
+    <gr-group-list></gr-group-list>
+  </template>
+</test-fixture>
+
+<script>
+  suite('gr-group-list tests', function() {
+    var element;
+    var groups;
+
+    setup(function(done) {
+      groups = [{
+        url: 'some url',
+        options: {},
+        description: 'Group 1 description',
+        group_id: 1,
+        owner: 'Administrators',
+        owner_id: '123',
+        id: 'abc',
+        name: 'Group 1',
+      },{
+        options: {visible_to_all: true},
+        id: '456',
+        name: 'Group 2',
+      },{
+        options: {},
+        id: '789',
+        name: 'Group 3',
+      }];
+
+      stub('gr-rest-api-interface', {
+        getAccountGroups: function() { return Promise.resolve(groups); },
+      });
+
+      element = fixture('basic');
+
+      element.loadData().then(function() { flush(done); });
+    });
+
+    test('renders', function() {
+      var rows = Polymer.dom(element.root).querySelectorAll('tbody tr');
+
+      assert.equal(rows.length, 3);
+
+      var nameCells = rows.map(
+          function(row) { return row.querySelectorAll('td')[0].textContent; });
+
+      assert.equal(nameCells[0], 'Group 1');
+      assert.equal(nameCells[1], 'Group 2');
+      assert.equal(nameCells[2], 'Group 3');
+    });
+
+    test('_computeVisibleToAll', function() {
+      assert.equal(element._computeVisibleToAll(groups[0]), 'No');
+      assert.equal(element._computeVisibleToAll(groups[1]), 'Yes');
+    });
+  });
+</script>
--- a/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.html
+++ b/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.html
@@ -19,28 +19,19 @@ limitations under the License.
 <link rel="import" href="../../shared/gr-button/gr-button.html">
 <link rel="import" href="../../shared/gr-date-formatter/gr-date-formatter.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
-<link rel="import" href="../../shared/gr-select/gr-select.html">
+
+<link rel="import" href="../../../styles/gr-settings-styles.html">

 <dom-module id="gr-menu-editor">
  <template>
    <style>
-      th {
-        color: #666;
-        text-align: left;
-      }
      th.nameHeader {
        width: 11em;
      }
-      tbody tr:nth-child(even) {
-        background-color: #f4f4f4;
-      }
      tbody tr:first-of-type td .move-up-button,
      tbody tr:last-of-type td .move-down-button {
        display: none;
      }
-      input {
-        font-size: 1em;
-      }
      .newTitleInput {
        width: 10em;
      }
@@ -48,6 +39,8 @@ limitations under the License.
        width: 23em;
      }
    </style>
+    <style include="gr-settings-styles"></style>
+    <div class="gr-settings-styles">
      <table>
        <thead>
          <tr>
@@ -109,6 +102,7 @@ limitations under the License.
          </tr>
        </tfoot>
      </table>
+    </div>
  </template>
  <script src="gr-menu-editor.js"></script>
 </dom-module>
--- a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html
+++ b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html
@@ -18,6 +18,7 @@ limitations under the License.

 <link rel="import" href="../gr-account-info/gr-account-info.html">
 <link rel="import" href="../gr-email-editor/gr-email-editor.html">
+<link rel="import" href="../gr-group-list/gr-group-list.html">
 <link rel="import" href="../gr-menu-editor/gr-menu-editor.html">
 <link rel="import" href="../gr-watched-projects-editor/gr-watched-projects-editor.html">
 <link rel="import" href="../../shared/gr-button/gr-button.html">
@@ -255,6 +256,10 @@ limitations under the License.
              disabled="[[!_computeAddEmailButtonEnabled(_newEmail, _addingEmail)]]"
              on-tap="_handleAddEmailButton">Send Verification</gr-button>
        </fieldset>
+        <h2>Groups</h2>
+        <fieldset>
+          <gr-group-list id="groupList"></gr-group-list>
+        </fieldset>
      </main>
    </div>
    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
--- a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.js
+++ b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.js
@@ -105,6 +105,8 @@

      promises.push(this.$.emailEditor.loadData());

+      promises.push(this.$.groupList.loadData());
+
      Promise.all(promises).then(function() {
        this._loading = false;
      }.bind(this));
--- a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view_test.html
+++ b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view_test.html
@@ -118,6 +118,7 @@ limitations under the License.
        },
        getAccountEmails: function() { return Promise.resolve(); },
        getConfig: function() { return Promise.resolve(config); },
+        getAccountGroups: function() { return Promise.resolve([]); },
      });
      element = fixture('basic');

--- a/polygerrit-ui/app/elements/settings/gr-watched-projects-editor/gr-watched-projects-editor.html
+++ b/polygerrit-ui/app/elements/settings/gr-watched-projects-editor/gr-watched-projects-editor.html
@@ -17,14 +17,11 @@ limitations under the License.
 <link rel="import" href="../../shared/gr-autocomplete/gr-autocomplete.html">
 <link rel="import" href="../../shared/gr-button/gr-button.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
+<link rel="import" href="../../../styles/gr-settings-styles.html">

 <dom-module id="gr-watched-projects-editor">
  <template>
    <style>
-      th {
-        color: #666;
-        text-align: left;
-      }
      th.projectHeader {
        width: 11em;
      }
@@ -35,9 +32,6 @@ limitations under the License.
        text-align: center;
        padding: 0 0.4em;
      }
-      tbody tr:nth-child(even) {
-        background-color: #f4f4f4;
-      }
      td.notifControl {
        cursor: pointer;
        text-align: center;
@@ -60,6 +54,8 @@ limitations under the License.
        width: 26em;
      }
    </style>
+    <style include="gr-settings-styles"></style>
+    <div class="gr-settings-styles">
      <table>
        <thead>
          <tr>
@@ -128,6 +124,7 @@ limitations under the License.
          </tr>
        </tfoot>
      </table>
+    </div>
    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
  </template>
  <script src="gr-watched-projects-editor.js"></script>
--- 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
@@ -240,6 +240,10 @@
          opt_ctx);
    },

+    getAccountGroups: function() {
+      return this._fetchSharedCacheURL('/accounts/self/groups');
+    },
+
    getLoggedIn: function() {
      return this.getAccount().then(function(account) {
        return account != null;
--- a/polygerrit-ui/app/styles/gr-settings-styles.html
+++ b/polygerrit-ui/app/styles/gr-settings-styles.html
@@ -37,6 +37,13 @@ limitations under the License.
      .gr-settings-styles input {
        font-size: 1em;
      }
+      .gr-settings-styles th {
+        color: #666;
+        text-align: left;
+      }
+      .gr-settings-styles tbody tr:nth-child(even) {
+        background-color: #f4f4f4;
+      }
      @media only screen and (max-width: 40em) {
        .gr-settings-styles section {
          margin-bottom: 1em;
--- a/polygerrit-ui/app/test/index.html
+++ b/polygerrit-ui/app/test/index.html
@@ -56,6 +56,7 @@ limitations under the License.
    'diff/gr-selection-action-box/gr-selection-action-box_test.html',
    'settings/gr-account-info/gr-account-info_test.html',
    'settings/gr-email-editor/gr-email-editor_test.html',
+    'settings/gr-group-list/gr-group-list_test.html',
    'settings/gr-menu-editor/gr-menu-editor_test.html',
    'settings/gr-settings-view/gr-settings-view_test.html',
    'settings/gr-watched-projects-editor/gr-watched-projects-editor_test.html',