Suggest label score plugin sample

Change-Id: I746ebd99c97d10e921b196ba8d219e50a4f84a2d

polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html

@@ -116,7 +116,9 @@ limitations under the License.
               as="value">
             <gr-button
                 class$="[[_computeButtonClass(value, index, _items.length)]]"
-                has-tooltip value$="[[value]]"
+                has-tooltip
+                name="[[label.name]]"
+                value$="[[value]]"
                 title$="[[_computeLabelValueTitle(labels, label.name, value)]]">
               [[value]]</gr-button>
           </template>

polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.js

@@ -125,7 +125,10 @@
       this._selectedValueText = e.target.selectedItem.getAttribute('title');
       // Needed to update the style of the selected button.
       this.updateStyles();
-      this.fire('labels-changed');
+      const name = e.target.selectedItem.name;
+      const value = e.target.selectedItem.getAttribute('value');
+      this.dispatchEvent(new CustomEvent(
+        'labels-changed', {detail: {name, value}, bubbles: true}));
     },
 
     _computeAnyPermittedLabelValues(permittedLabels, label) {

polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row_test.html

@@ -114,7 +114,9 @@ limitations under the License.
           .textContent.trim(), '-1');
       assert.strictEqual(
           element.$.selectedValueLabel.textContent.trim(), 'bad');
-      assert.isTrue(labelsChangedHandler.called);
+      const detail = labelsChangedHandler.args[0][0].detail;
+      assert.equal(detail.name, 'Verified');
+      assert.equal(detail.value, '-1');
     });
 
     test('_computeButtonClass', () => {

polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html

@@ -113,6 +113,9 @@ limitations under the License.
         display: flex;
         width: 100%;
       }
+      gr-endpoint-decorator[name="reply-label-scores"] {
+        display: block;
+      }
       .previewContainer gr-formatted-text {
         background: #f6f6f6;
         padding: 1em;
@@ -138,6 +141,14 @@ limitations under the License.
       #savingLabel.saving {
         display: inline;
       }
+      #pluginMessage {
+        color: #444;
+        margin-left: 1em;
+        margin-bottom: .5em;
+      }
+      #pluginMessage:empty {
+        display: none;
+      }
     </style>
     <div class="container" tabindex="-1">
       <section class="peopleContainer">
@@ -219,12 +230,15 @@ limitations under the License.
             config="[[projectConfig.commentlinks]]"></gr-formatted-text>
       </section>
       <section class="labelsContainer">
-        <gr-label-scores
+        <gr-endpoint-decorator name="reply-label-scores">
-            id="labelScores"
+          <gr-label-scores
-            account="[[_account]]"
+              id="labelScores"
-            change="[[change]]"
+              account="[[_account]]"
-            on-labels-changed="_handleLabelsChanged"
+              change="[[change]]"
-            permitted-labels=[[permittedLabels]]></gr-label-scores>
+              on-labels-changed="_handleLabelsChanged"
+              permitted-labels=[[permittedLabels]]></gr-label-scores>
+        </gr-endpoint-decorator>
+        <div id="pluginMessage">[[_pluginMessage]]</div>
       </section>
       <section class="draftsContainer" hidden$="[[_computeHideDraftList(diffDrafts)]]">
         <div class="includeComments">

polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.js

@@ -199,6 +199,10 @@
         value: ButtonTooltips.SAVE,
         readOnly: true,
       },
+      _pluginMessage: {
+        type: String,
+        value: '',
+      },
     },
 
     FocusTarget,
@@ -845,5 +849,9 @@
       }
       return str;
     },
+
+    setPluginMessage(message) {
+      this._pluginMessage = message;
+    },
   });
 })();

polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_test.html

@@ -1098,5 +1098,10 @@ limitations under the License.
       // Mock labels changed.
       assert.isFalse(fn('Send', {}, '', false, true, false));
     });
+
+    test('setPluginMessage', () => {
+      element.setPluginMessage('foo');
+      assert.equal(element.$.pluginMessage.textContent, 'foo');
+    });
   });
 </script>

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

@@ -73,5 +73,20 @@
       });
     };
 
+  GrChangeReplyInterface.prototype.addLabelValuesChangedCallback =
+    function(handler) {
+      this.plugin.hook('reply-label-scores').onAttached(el => {
+        if (!el.content) { return; }
+
+        el.content.addEventListener('labels-changed', e => {
+          handler(e.detail);
+        });
+      });
+    };
+
+  GrChangeReplyInterface.prototype.showMessage = function(message) {
+    return this._el.setPluginMessage(message);
+  };
+
   window.GrChangeReplyInterface = GrChangeReplyInterface;
 })(window);

polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-change-reply-js-api_test.html

@@ -78,6 +78,10 @@ breaking changes to gr-reply-dialog won’t be noticed.
         sandbox.stub(element, 'send');
         changeReply.send(false);
         assert.isTrue(element.send.calledWithExactly(false));
+
+        sandbox.stub(element, 'setPluginMessage');
+        changeReply.showMessage('foobar');
+        assert.isTrue(element.setPluginMessage.calledWithExactly('foobar'));
       });
     });
 
@@ -105,6 +109,10 @@ breaking changes to gr-reply-dialog won’t be noticed.
         sandbox.stub(element, 'send');
         changeReply.send(false);
         assert.isTrue(element.send.calledWithExactly(false));
+
+        sandbox.stub(element, 'setPluginMessage');
+        changeReply.showMessage('foobar');
+        assert.isTrue(element.setPluginMessage.calledWithExactly('foobar'));
       });
     });
   });

polygerrit-ui/app/samples/suggest-vote.html

@@ -0,0 +1,23 @@
+<dom-module id="suggested-vote">
+  <script>
+    Gerrit.install(plugin => {
+      const replyApi = plugin.changeReply();
+      let wasSuggested = false;
+      plugin.on('showchange', () => {
+        wasSuggested = false;
+      });
+      const CODE_REVIEW = 'Code-Review';
+      replyApi.addLabelValuesChangedCallback(({name, value}) => {
+        if (wasSuggested && name === CODE_REVIEW) {
+          replyApi.showMessage('');
+          wasSuggested = false;
+        } else if (replyApi.getLabelValue(CODE_REVIEW) === '+1' &&
+            !wasSuggested) {
+          replyApi.setLabelValue(CODE_REVIEW, '+2');
+          replyApi.showMessage(`Suggested ${CODE_REVIEW} upgrade: +2`);
+          wasSuggested = true;
+        }
+      });
+    });
+  </script>
+</dom-module>