Merge branch '235856-display-more-columns-in-merge-request-analytics-data-table-fe' into 'master'

Add comment count to MR Analytics Throughput table

See merge request gitlab-org/gitlab!40589

ee/app/assets/javascripts/analytics/merge_request_analytics/components/throughput_table.vue

@@ -203,15 +203,18 @@ export default {
               />
             </li>
             <li
-              v-if="item.labels.nodes.length"
-              class="gl-mr-3"
+              class="gl-mr-3 gl-display-flex gl-align-items-center"
+              :class="{ 'gl-opacity-5': !item.labels.nodes.length }"
               :data-testid="$options.testIds.LABEL_DETAILS"
             >
-              <span class="gl-display-flex gl-align-items-center"
-                ><gl-icon name="label" class="gl-mr-1" /><span>{{
-                  item.labels.nodes.length
-                }}</span></span
+              <gl-icon name="label" class="gl-mr-1" /><span>{{ item.labels.nodes.length }}</span>
+            </li>
+            <li
+              class="gl-mr-3 gl-display-flex gl-align-items-center"
+              :class="{ 'gl-opacity-5': !item.userNotesCount }"
+              :data-testid="$options.testIds.COMMENT_COUNT"
             >
+              <gl-icon name="comments" class="gl-mr-2" /><span>{{ item.userNotesCount }}</span>
             </li>
           </ul>
         </div>

ee/app/assets/javascripts/analytics/merge_request_analytics/constants.js

@@ -41,6 +41,7 @@ export const THROUGHPUT_TABLE_TEST_IDS = {
   LINE_CHANGES: 'lineChangesCol',
   ASSIGNEES: 'assigneesCol',
   COMMITS: 'commitsCol',
+  COMMENT_COUNT: 'commentCount',
 };
 
 export const PIPELINE_STATUS_ICON_CLASSES = {

ee/app/assets/javascripts/analytics/merge_request_analytics/graphql/queries/throughput_table.query.graphql

@@ -34,6 +34,7 @@ query($fullPath: ID!, $startDate: Time!, $endDate: Time!, $limit: Int!) {
           }
         }
         commitCount
+        userNotesCount
       }
     }
   }

ee/spec/frontend/analytics/merge_request_analytics/components/throughput_table_spec.js

@@ -140,16 +140,33 @@ describe('ThroughputTable', () => {
         it('includes the correct title and IID', () => {
           const { title, iid } = throughputTableData[0];
 
-          expect(findCol(TEST_IDS.MERGE_REQUEST_DETAILS).text()).toBe(`${title} !${iid}`);
+          expect(findCol(TEST_IDS.MERGE_REQUEST_DETAILS).text()).toContain(`${title} !${iid}`);
         });
 
-        it('does not include any icons by default', () => {
-          const icon = findColSubComponent(TEST_IDS.MERGE_REQUEST_DETAILS, GlIcon);
+        it('includes an inactive label icon by default', () => {
+          const labels = findColSubItem(TEST_IDS.MERGE_REQUEST_DETAILS, TEST_IDS.LABEL_DETAILS);
+          const icon = labels.find(GlIcon);
+
+          expect(labels.text()).toBe('0');
+          expect(labels.classes()).toContain('gl-opacity-5');
+          expect(icon.exists()).toBe(true);
+          expect(icon.props('name')).toBe('label');
+        });
 
-          expect(icon.exists()).toBe(false);
+        it('includes an inactive comment icon by default', () => {
+          const commentCount = findColSubItem(
+            TEST_IDS.MERGE_REQUEST_DETAILS,
+            TEST_IDS.COMMENT_COUNT,
+          );
+          const icon = commentCount.find(GlIcon);
+
+          expect(commentCount.text()).toBe('0');
+          expect(commentCount.classes()).toContain('gl-opacity-5');
+          expect(icon.exists()).toBe(true);
+          expect(icon.props('name')).toBe('comments');
         });
 
-        it('includes a label icon and count when available', async () => {
+        it('includes an active label icon and count when available', async () => {
           additionalData({
             labels: {
               nodes: [{ title: 'Brinix' }],
@@ -165,10 +182,30 @@ describe('ThroughputTable', () => {
           const icon = labelDetails.find(GlIcon);
 
           expect(labelDetails.text()).toBe('1');
+          expect(labelDetails.classes()).not.toContain('gl-opacity-5');
           expect(icon.exists()).toBe(true);
           expect(icon.props('name')).toBe('label');
         });
 
+        it('includes an active comment icon and count when available', async () => {
+          additionalData({
+            userNotesCount: 2,
+          });
+
+          await wrapper.vm.$nextTick();
+
+          const commentCount = findColSubItem(
+            TEST_IDS.MERGE_REQUEST_DETAILS,
+            TEST_IDS.COMMENT_COUNT,
+          );
+          const icon = commentCount.find(GlIcon);
+
+          expect(commentCount.text()).toBe('2');
+          expect(commentCount.classes()).not.toContain('gl-opacity-5');
+          expect(icon.exists()).toBe(true);
+          expect(icon.props('name')).toBe('comments');
+        });
+
         it('includes a pipeline icon and when available', async () => {
           const iconName = 'status_canceled';
 

ee/spec/frontend/analytics/merge_request_analytics/mock_data.js

@@ -83,5 +83,6 @@ export const throughputTableData = [
       nodes: [],
     },
     commitCount: 1,
+    userNotesCount: 0,
   },
 ];