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

Add approved meta to MR Analytics Throughput table

See merge request gitlab-org/gitlab!42216

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

@@ -12,7 +12,7 @@ import {
   GlAlert,
   GlIcon,
 } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { s__, n__ } from '~/locale';
 import { approximateDuration, differenceInSeconds } from '~/lib/utils/datetime_utility';
 import { filterToQueryObject } from '~/vue_shared/components/filtered_search_bar/filtered_search_utils';
 import { dateFormats } from '../../shared/constants';
@@ -187,6 +187,9 @@ export default {
         ? PIPELINE_STATUS_ICON_CLASSES.default
         : PIPELINE_STATUS_ICON_CLASSES[value];
     },
+    formatApprovalText(approvals) {
+      return n__('%d Approval', '%d Approvals', approvals);
+    },
   },
   assigneesVisible: ASSIGNEES_VISIBLE,
   avatarSize: AVATAR_SIZE,
@@ -236,6 +239,15 @@ export default {
             >
               <gl-icon name="comments" class="gl-mr-2" /><span>{{ item.userNotesCount }}</span>
             </li>
+            <li
+              v-if="item.approvedBy.nodes.length"
+              class="gl-text-green-500"
+              :data-testid="$options.testIds.APPROVED"
+            >
+              <gl-icon name="approval" class="gl-mr-2" /><span>{{
+                formatApprovalText(item.approvedBy.nodes.length)
+              }}</span>
+            </li>
           </ul>
         </div>
       </div>

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

@@ -42,6 +42,7 @@ export const THROUGHPUT_TABLE_TEST_IDS = {
   ASSIGNEES: 'assigneesCol',
   COMMITS: 'commitsCol',
   COMMENT_COUNT: 'commentCount',
+  APPROVED: 'approvedStatus',
 };
 
 export const PIPELINE_STATUS_ICON_CLASSES = {

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

@@ -57,6 +57,11 @@ query(
         }
         commitCount
         userNotesCount
+        approvedBy {
+          nodes {
+            id
+          }
+        }
       }
     }
   }

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

@@ -228,7 +228,7 @@ describe('ThroughputTable', () => {
           expect(icon.props('name')).toBe('comments');
         });
 
-        it('includes a pipeline icon and when available', async () => {
+        it('includes a pipeline icon when available', async () => {
           const iconName = 'status_canceled';
 
           additionalData({
@@ -248,6 +248,61 @@ describe('ThroughputTable', () => {
           expect(icon.find(GlIcon).exists()).toBe(true);
           expect(icon.props('name')).toBe(iconName);
         });
+
+        describe('approval details', () => {
+          const iconName = 'approval';
+
+          it('does not display by default', async () => {
+            const approved = findColSubItem(TEST_IDS.MERGE_REQUEST_DETAILS, TEST_IDS.APPROVED);
+
+            expect(approved.exists()).toBe(false);
+          });
+
+          it('displays the singular when there is a single approval', async () => {
+            additionalData({
+              approvedBy: {
+                nodes: [
+                  {
+                    id: 1,
+                  },
+                ],
+              },
+            });
+
+            await wrapper.vm.$nextTick();
+
+            const approved = findColSubItem(TEST_IDS.MERGE_REQUEST_DETAILS, TEST_IDS.APPROVED);
+            const icon = approved.find(GlIcon);
+
+            expect(approved.text()).toBe('1 Approval');
+            expect(icon.exists()).toBe(true);
+            expect(icon.props('name')).toBe(iconName);
+          });
+
+          it('displays the plural when there are multiple approvals', async () => {
+            additionalData({
+              approvedBy: {
+                nodes: [
+                  {
+                    id: 1,
+                  },
+                  {
+                    id: 2,
+                  },
+                ],
+              },
+            });
+
+            await wrapper.vm.$nextTick();
+
+            const approved = findColSubItem(TEST_IDS.MERGE_REQUEST_DETAILS, TEST_IDS.APPROVED);
+            const icon = approved.find(GlIcon);
+
+            expect(approved.text()).toBe('2 Approvals');
+            expect(icon.exists()).toBe(true);
+            expect(icon.props('name')).toBe(iconName);
+          });
+        });
       });
 
       it('displays the correct date merged', () => {

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

@@ -84,5 +84,8 @@ export const throughputTableData = [
     },
     commitCount: 1,
     userNotesCount: 0,
+    approvedBy: {
+      nodes: [],
+    },
   },
 ];

locale/gitlab.pot

@@ -77,6 +77,11 @@ msgstr ""
 msgid "\"el\" parameter is required for createInstance()"
 msgstr ""
 
+msgid "%d Approval"
+msgid_plural "%d Approvals"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "%d Scanned URL"
 msgid_plural "%d Scanned URLs"
 msgstr[0] ""