Add Group names and links to gr-rule-editor

Instead of just printing the group Id, display the name as a link to
the group page.

Change-Id: Id7abe3b82aed0962fdd1ac137ebd962a2e722ced

polygerrit-ui/app/elements/admin/gr-access-section/gr-access-section.html

@@ -109,7 +109,8 @@ limitations under the License.
                 permission="{{permission}}"
                 labels="[[labels]]"
                 section="[[section.id]]"
-                editing="[[editing]]">
+                editing="[[editing]]"
+                groups="[[groups]]">
             </gr-permission>
           </template>
           <div id="addPermission">

polygerrit-ui/app/elements/admin/gr-access-section/gr-access-section.js

@@ -33,6 +33,7 @@
         notify: true,
         observer: '_sectionChanged',
       },
+      groups: Object,
       labels: Object,
       editing: {
         type: Boolean,

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

@@ -92,7 +92,8 @@ limitations under the License.
             <gr-rule-editor
                 label="[[_label]]"
                 editing="[[editing]]"
-                group="[[rule.id]]"
+                group-id="[[rule.id]]"
+                group-name="[[_computeGroupName(groups, rule.id)]]"
                 permission="[[permission.id]]"
                 rule="{{rule}}"
                 section="[[section]]"></gr-rule-editor>

polygerrit-ui/app/elements/admin/gr-permission/gr-permission.js

@@ -28,6 +28,7 @@
         observer: '_sortPermission',
         notify: true,
       },
+      groups: Object,
       section: String,
       editing: {
         type: Boolean,
@@ -129,6 +130,11 @@
       return groups;
     },
 
+    _computeGroupName(groups, groupId) {
+      return groups && groups[groupId] && groups[groupId].name ?
+          groups[groupId].name : groupId;
+    },
+
     _getGroupSuggestions() {
       return this.$.restAPI.getSuggestedGroups(
           this._groupFilter,

polygerrit-ui/app/elements/admin/gr-permission/gr-permission_test.html

@@ -158,6 +158,14 @@ limitations under the License.
             'editing deleted');
       });
 
+      test('_computeGroupName', () => {
+        const groups = {
+          abc123: {name: 'test group'},
+          bcd234: {},
+        };
+        assert.equal(element._computeGroupName(groups, 'abc123'), 'test group');
+        assert.equal(element._computeGroupName(groups, 'bcd234'), 'bcd234');
+      });
 
       test('_computeGroupsWithRules', () => {
         const rules = [

polygerrit-ui/app/elements/admin/gr-project-access/gr-project-access.html

@@ -40,7 +40,8 @@ limitations under the License.
             capabilities="[[_capabilities]]"
             section="{{section}}"
             labels="[[_labels]]"
-            editing="[[_editing]]"></gr-access-section>
+            editing="[[_editing]]"
+            groups="[[_groups]]"></gr-access-section>
       </template>
       <template is="dom-if" if="[[_inheritsFrom]]">
         <h3 id="inheritsFrom">Rights Inherit From

polygerrit-ui/app/elements/admin/gr-project-access/gr-project-access.js

@@ -24,6 +24,7 @@
       },
 
       _capabilities: Object,
+      _groups: Object,
       /** @type {?} */
       _inheritsFrom: Object,
       _labels: Object,
@@ -54,6 +55,7 @@
       promises.push(this.$.restAPI.getProjectAccessRights(project).then(res => {
         this._inheritsFrom = res.inherits_from;
         this._local = res.local;
+        this._groups = res.groups;
         return this.toSortedArray(this._local);
       }));
 

polygerrit-ui/app/elements/admin/gr-rule-editor/gr-rule-editor.html

@@ -16,7 +16,9 @@ limitations under the License.
 
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
 
+<link rel="import" href="../../../behaviors/base-url-behavior/base-url-behavior.html">
 <link rel="import" href="../../../behaviors/gr-access-behavior/gr-access-behavior.html">
+<link rel="import" href="../../../behaviors/gr-url-encoding-behavior.html">
 <link rel="import" href="../../../styles/gr-form-styles.html">
 <link rel="import" href="../../../styles/shared-styles.html">
 <link rel="import" href="../../shared/gr-button/gr-button.html">
@@ -64,6 +66,9 @@ limitations under the License.
       #deletedContainer.deleted {
         display: block;
       }
+      .groupPath {
+        color: #666;
+      }
     </style>
     <style include="gr-form-styles"></style>
     <div id="mainContainer"
@@ -100,7 +105,9 @@ limitations under the License.
             </select>
           </gr-select>
         </template>
-        <span>[[group]]</span>
+        <a class="groupPath" href$="[[_computeGroupPath(groupId)]]">
+          [[groupName]]
+        </a>
         <gr-select
             id="force"
             class$="[[_computeForceClass(permission)]]"
@@ -126,7 +133,7 @@ limitations under the License.
     <div
         id="deletedContainer"
         class$="gr-form-styles [[_computeSectionClass(editing, _deleted)]]">
-      [[group]] was deleted
+      [[groupName]] was deleted
       <gr-button id="undoRemoveBtn" on-tap="_handleUndoRemove">Undo</gr-button>
     </div>
     <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>

polygerrit-ui/app/elements/admin/gr-rule-editor/gr-rule-editor.js

@@ -57,7 +57,8 @@
         type: Boolean,
         value: false,
       },
-      group: String,
+      groupId: String,
+      groupName: String,
       permission: String,
       /** @type {?} */
       rule: {
@@ -78,6 +79,8 @@
 
     behaviors: [
       Gerrit.AccessBehavior,
+      Gerrit.BaseUrlBehavior,
+      Gerrit.URLEncodingBehavior,
     ],
 
     observers: [
@@ -107,6 +110,10 @@
       return this._computeForce(permission) ? 'force' : '';
     },
 
+    _computeGroupPath(group) {
+      return `${this.getBaseUrl()}/admin/groups/${this.encodeURL(group, true)}`;
+    },
+
     _computeSectionClass(editing, deleted) {
       const classList = [];
       if (editing) {

polygerrit-ui/app/elements/admin/gr-rule-editor/gr-rule-editor_test.html

@@ -240,6 +240,12 @@ limitations under the License.
         MockInteractions.tap(element.$.undoRemoveBtn);
         assert.isNotOk(element.rule.value.deleted);
       });
+
+      test('_computeGroupPath', () => {
+        const group = '123';
+        assert.equal(element._computeGroupPath(group),
+            `/admin/groups/123`);
+      });
     });
 
     suite('new edit rule', () => {