Suport switching multiple suggested fixes in apply fix dialog

screenshot: https://imgur.com/a/jbYjGs2

Change-Id: Iadfd615cdb6972c23e6b4069b59354ce71e756f8

polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog.html

@@ -15,6 +15,7 @@ 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="/bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="../../../behaviors/fire-behavior/fire-behavior.html">
 <link rel="import" href="../../../styles/shared-styles.html">
 <link rel="import" href="../../shared/gr-dialog/gr-dialog.html">
@@ -42,6 +43,14 @@ limitations under the License.
         display: flex;
         justify-content: flex-end;
       }
+      gr-button {
+        margin-left: var(--spacing-m);
+      }
+      .fix-picker {
+        display: flex;
+        align-items: center;
+        margin-right: var(--spacing-l);
+      }
     </style>
     <gr-overlay id="applyFixOverlay" with-backdrop>
       <gr-dialog
@@ -65,6 +74,15 @@ limitations under the License.
             </div>
           </template>
         </div>
+        <div slot="footer" class="fix-picker" hidden$="[[hasSingleFix(_fixSuggestions)]]">
+          <span>Suggested fix [[addOneTo(_selectedFixIdx)]] of [[_fixSuggestions.length]]</span>
+          <gr-button on-click="_onPrevFixClick" disabled$="[[_noPrevFix(_selectedFixIdx)]]">
+            <iron-icon icon="gr-icons:chevron-left"></iron-icon>
+          </gr-button>
+          <gr-button on-click="_onNextFixClick" disabled$="[[_noNextFix(_selectedFixIdx)]]">
+            <iron-icon icon="gr-icons:chevron-right"></iron-icon>
+          </gr-button>
+        </div>
       </gr-dialog>
     </gr-overlay>
     <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>

polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog.js

@@ -38,6 +38,8 @@
         type: Boolean,
         value: false,
       },
+      // Index of currently showing suggested fix.
+      _selectedFixIdx: Number,
     },
 
     behaviors: [
@@ -60,6 +62,7 @@
       if (this._fixSuggestions == null || this._fixSuggestions.length == 0) {
         return Promise.resolve();
       }
+      this._selectedFixIdx = 0;
       const promises = [];
       promises.push(
           this._showSelectedFixSuggestion(this._fixSuggestions[0]),
@@ -96,6 +99,10 @@
           });
     },
 
+    hasSingleFix(_fixSuggestions) {
+      return (_fixSuggestions || {}).length === 1;
+    },
+
     overridePartialPrefs(prefs) {
       // generate a smaller gr-diff than fullscreen for dialog
       return Object.assign({}, prefs, {line_length: 50});
@@ -108,6 +115,38 @@
       this._close();
     },
 
+    addOneTo(_selectedFixIdx) {
+      return _selectedFixIdx + 1;
+    },
+
+    _onPrevFixClick(e) {
+      if (e) e.stopPropagation();
+      if (this._selectedFixIdx >= 1 && this._fixSuggestions != null) {
+        this._selectedFixIdx -= 1;
+        return this._showSelectedFixSuggestion(
+            this._fixSuggestions[this._selectedFixIdx]);
+      }
+    },
+
+    _onNextFixClick(e) {
+      if (e) e.stopPropagation();
+      if (this._selectedFixIdx < this._fixSuggestions.length &&
+        this._fixSuggestions != null) {
+        this._selectedFixIdx += 1;
+        return this._showSelectedFixSuggestion(
+            this._fixSuggestions[this._selectedFixIdx]);
+      }
+    },
+
+    _noPrevFix(_selectedFixIdx) {
+      return _selectedFixIdx === 0;
+    },
+
+    _noNextFix(_selectedFixIdx) {
+      if (this._fixSuggestions == null) return true;
+      return _selectedFixIdx === this._fixSuggestions.length - 1;
+    },
+
     _close() {
       this._currentFix = {};
       this._currentPreviews = [];

polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog_test.html

@@ -40,7 +40,7 @@ limitations under the License.
     let sandbox;
     const ROBOT_COMMENT = {
       robot_id: 'robot_1',
-      fix_suggestions: [{fix_id: 'fix_1'}],
+      fix_suggestions: [{fix_id: 'fix_1'}, {fix_id: 'fix_2'}],
     };
 
     setup(() => {
@@ -59,9 +59,11 @@ limitations under the License.
       };
     });
 
-    teardown(() => { sandbox.restore(); });
+    teardown(() => {
+      sandbox.restore();
+    });
 
-    test('dialog opens fetch and set previews', done => {
+    test('dialog opens fetch and sets previews', done => {
       sandbox.stub(element.$.restAPI, 'getRobotCommentFixPreview')
           .returns(Promise.resolve({
             f1: {
@@ -139,5 +141,51 @@ limitations under the License.
         done();
       });
     });
+
+    test('select fix forward and back of multiple suggested fixes', done => {
+      sandbox.stub(element.$.restAPI, 'getRobotCommentFixPreview')
+          .returns(Promise.resolve({
+            f1: {
+              meta_a: {},
+              meta_b: {},
+              content: [
+                {
+                  ab: ['loqlwkqll'],
+                },
+                {
+                  b: ['qwqqsqw'],
+                },
+                {
+                  ab: ['qwqqsqw', 'qweqeqweqeq', 'qweqweq'],
+                },
+              ],
+            },
+            f2: {
+              meta_a: {},
+              meta_b: {},
+              content: [
+                {
+                  ab: ['eqweqweqwex'],
+                },
+                {
+                  b: ['zassdasd'],
+                },
+                {
+                  ab: ['zassdasd', 'dasdasda', 'asdasdad'],
+                },
+              ],
+            },
+          }));
+      sandbox.stub(element.$.applyFixOverlay, 'open').returns(Promise.resolve());
+
+      element.open({detail: {patchNum: 2, comment: ROBOT_COMMENT}})
+          .then(() => {
+            element._onNextFixClick();
+            assert.equal(element._currentFix.fix_id, 'fix_2');
+            element._onPrevFixClick();
+            assert.equal(element._currentFix.fix_id, 'fix_1');
+            done();
+          });
+    });
   });
 </script>

polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog.html

@@ -60,6 +60,7 @@ limitations under the License.
       <header class="font-h3"><slot name="header"></slot></header>
       <main><slot name="main"></slot></main>
       <footer>
+        <slot name="footer"></slot>
         <gr-button id="cancel" class$="[[_computeCancelClass(cancelLabel)]]" link on-click="_handleCancelTap">
           [[cancelLabel]]
         </gr-button>