Update gr-rule-editor to support a view-only mode

Change-Id: I9bd831abe6019b98fb6319b889a0906f82b3b9ed

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

@@ -31,10 +31,17 @@ limitations under the License.
         display: block;
       }
       .buttons {
+        display: none;
+      }
+      .editing .buttons {
         display: flex;
       }
-      .buttons gr-button {
-        margin-left: .3em;
+      #options {
+        align-items: baseline;
+        display: flex;
+      }
+      #options > * {
+        margin-right: .5em;
       }
       #mainContainer {
         align-items: baseline;
@@ -60,12 +67,12 @@ limitations under the License.
     </style>
     <style include="gr-form-styles"></style>
     <div id="mainContainer"
-        class$="gr-form-styles [[_computeDeletedClass(_deleted)]]">
+        class$="gr-form-styles [[_computeSectionClass(editing, _deleted)]]">
       <div id="options">
         <gr-select id="action"
             bind-value="{{rule.value.action}}"
             on-change="_handleValueChange">
-          <select>
+          <select disabled$="[[!editing]]">
             <template is="dom-repeat" items="[[_computeOptions(permission)]]">
               <option value="[[item]]">[[item]]</option>
             </template>
@@ -76,7 +83,7 @@ limitations under the License.
               id="labelMin"
               bind-value="{{rule.value.min}}"
               on-change="_handleValueChange">
-            <select>
+            <select disabled$="[[!editing]]">
               <template is="dom-repeat" items="[[label.values]]">
                 <option value="[[item.value]]">[[item.value]]</option>
               </template>
@@ -86,20 +93,20 @@ limitations under the License.
               id="labelMax"
               bind-value="{{rule.value.max}}"
               on-change="_handleValueChange">
-            <select>
+            <select disabled$="[[!editing]]">
               <template is="dom-repeat" items="[[label.values]]">
                 <option value="[[item.value]]">[[item.value]]</option>
               </template>
             </select>
           </gr-select>
         </template>
-        [[group]]
+        <span>[[group]]</span>
         <gr-select
             id="force"
             class$="[[_computeForceClass(permission)]]"
             bind-value="{{rule.value.force}}"
             on-change="_handleValueChange">
-          <select>
+          <select disabled$="[[!editing]]">
             <template
                 is="dom-repeat"
                 items="[[_computeForceOptions(permission)]]">
@@ -118,7 +125,7 @@ limitations under the License.
     </div>
     <div
         id="deletedContainer"
-        class$="gr-form-styles [[_computeDeletedClass(_deleted)]]">
+        class$="gr-form-styles [[_computeSectionClass(editing, _deleted)]]">
       [[group]] was deleted
       <gr-button id="undoRemoveBtn" on-tap="_handleUndoRemove">Undo</gr-button>
     </div>

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

@@ -53,6 +53,10 @@
     properties: {
       /** @type {?} */
       label: Object,
+      editing: {
+        type: Boolean,
+        value: false,
+      },
       group: String,
       permission: String,
       /** @type {?} */
@@ -103,8 +107,15 @@
       return this._computeForce(permission) ? 'force' : '';
     },
 
-    _computeDeletedClass(deleted) {
-      return deleted ? 'deleted' : '';
+    _computeSectionClass(editing, deleted) {
+      const classList = [];
+      if (editing) {
+        classList.push('editing');
+      }
+      if (deleted) {
+        classList.push('deleted');
+      }
+      return classList.join(' ');
     },
 
     _computeForceOptions(permission) {

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

@@ -86,9 +86,20 @@ limitations under the License.
             assert.deepEqual(element._computeForceOptions(permission), []);
           });
 
-      test('_computeDeletedClass', () => {
-        assert.equal(element._computeDeletedClass(true), 'deleted');
-        assert.equal(element._computeDeletedClass(false), '');
+      test('_computeSectionClass', () => {
+        let deleted = true;
+        let editing = false;
+        assert.equal(element._computeSectionClass(editing, deleted), 'deleted');
+
+        deleted = false;
+        assert.equal(element._computeSectionClass(editing, deleted), '');
+
+        editing = true;
+        assert.equal(element._computeSectionClass(editing, deleted), 'editing');
+
+        deleted = true;
+        assert.equal(element._computeSectionClass(editing, deleted),
+            'editing deleted');
       });
 
       test('_getDefaultRuleValues', () => {
@@ -206,7 +217,19 @@ limitations under the License.
         assert.isFalse(element._modified);
       });
 
+      test('all selects are disabled when not in edit mode', () => {
+        const selects = Polymer.dom(element.root).querySelectorAll('select');
+        for (select of selects) {
+          assert.isTrue(select.disabled);
+        }
+        element.editing = true;
+        for (select of selects) {
+          assert.isFalse(select.disabled);
+        }
+      });
+
       test('remove rule and undo remove', () => {
+        element.editing = true;
         element.rule = {id: 123, value: {action: 'ALLOW'}};
         assert.isFalse(
             element.$.deletedContainer.classList.contains('deleted'));