Add a Show All button for findings and limit to 10 initially

Change-Id: Iba5188fd4dbc74c284053792e01f912177026b0d

polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html

@@ -370,6 +370,9 @@ limitations under the License.
       .patch-set-dropdown {
         margin: var(--spacing-m) 0 0 var(--spacing-m);
       }
+      .show-robot-comments {
+        margin: var(--spacing-m);
+      }
     </style>
     <div class="container loading" hidden$="[[!_loading]]">Loading...</div>
     <div
@@ -623,6 +626,11 @@ limitations under the License.
               tab="[[_findings_tab_name]]"
               hide-toggle-buttons
               on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list>
+          <template is="dom-if" if="[[_showRobotCommentsButton]]">
+            <gr-button class="show-robot-comments" on-click="_toggleShowRobotComments">
+              [[_computeShowText(_showAllRobotComments)]]
+            </gr-button>
+          </template>
         </template>
 
         <template is="dom-if" if="[[_findIfTabMatches(_currentTabName, _selectedTabPluginHeader)]]">

polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js

@@ -71,6 +71,7 @@
   // Making the tab names more unique in case a plugin adds one with same name
   const FILES_TAB_NAME = '__gerrit_internal_files';
   const FINDINGS_TAB_NAME = '__gerrit_internal_findings';
+  const ROBOT_COMMENTS_LIMIT = 10;
 
   /**
    * @appliesMixin Gerrit.FireMixin
@@ -150,7 +151,7 @@
         _robotCommentThreads: {
           type: Array,
           computed: '_computeRobotCommentThreads(_commentThreads,'
-            + ' _currentRobotCommentsPatchSet)',
+            + ' _currentRobotCommentsPatchSet, _showAllRobotComments)',
         },
         /** @type {?} */
         _serverConfig: {
@@ -350,6 +351,14 @@
           type: String,
           value: FILES_TAB_NAME,
         },
+        _showAllRobotComments: {
+          type: Boolean,
+          value: false,
+        },
+        _showRobotCommentsButton: {
+          type: Boolean,
+          value: false,
+        },
       };
     }
 
@@ -677,13 +686,25 @@
       this._currentRobotCommentsPatchSet = patchSet;
     }
 
-    _computeRobotCommentThreads(commentThreads, currentRobotCommentsPatchSet) {
+    _computeShowText(showAllRobotComments) {
+      return showAllRobotComments ? 'Show Less' : 'Show more';
+    }
+
+    _toggleShowRobotComments() {
+      this._showAllRobotComments = !this._showAllRobotComments;
+    }
+
+    _computeRobotCommentThreads(commentThreads, currentRobotCommentsPatchSet,
+        showAllRobotComments) {
       if (!commentThreads || !currentRobotCommentsPatchSet) return [];
-      return commentThreads.filter(thread => {
+      const threads = commentThreads.filter(thread => {
         const comments = thread.comments || [];
         return comments.length && comments[0].robot_id && (comments[0].patch_set
           === currentRobotCommentsPatchSet);
       });
+      this._showRobotCommentsButton = threads.length > ROBOT_COMMENTS_LIMIT;
+      return threads.slice(0, showAllRobotComments ? undefined :
+        ROBOT_COMMENTS_LIMIT);
     }
 
     _handleReloadCommentThreads() {

polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html

@@ -69,6 +69,7 @@ limitations under the License.
       CHANGE_LOG: 0,
       COMMENT_THREADS: 1,
     };
+    const ROBOT_COMMENTS_LIMIT = 10;
 
     const THREADS = [
       {
@@ -761,6 +762,8 @@ limitations under the License.
           current_revision: 'rev4',
         };
         element._commentThreads = THREADS;
+        const paperTabs = element.shadowRoot.querySelector('#primaryTabs');
+        MockInteractions.tap(paperTabs.querySelectorAll('paper-tab')[2]);
         flush(() => {
           done();
         });
@@ -796,6 +799,38 @@ limitations under the License.
           done();
         });
       });
+
+      test('Show more button is hidden', () => {
+        assert.isNull(element.shadowRoot.querySelector('.show-robot-comments'));
+      });
+
+      suite('robot comments show more button', () => {
+        setup(done => {
+          const arr = [];
+          for (let i = 0; i <= 30; i++) {
+            arr.push(...THREADS);
+          }
+          element._commentThreads = arr;
+          flush(() => {
+            done();
+          });
+        });
+
+        test('Show more button is rendered', () => {
+          assert.isOk(element.shadowRoot.querySelector('.show-robot-comments'));
+          assert.equal(element._robotCommentThreads.length,
+              ROBOT_COMMENTS_LIMIT);
+        });
+
+        test('Clicking show more button renders all comments', done => {
+          MockInteractions.tap(element.shadowRoot.querySelector(
+              '.show-robot-comments'));
+          flush(() => {
+            assert.equal(element._robotCommentThreads.length, 62);
+            done();
+          });
+        });
+      });
     });
 
     test('reply button is not visible when logged out', () => {