Merge branch 'drosse/refactor-contribution-components' into 'master'

Refactor out headers from Contribution components charts

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/179337



Merged-by: Alex Pennells <apennells@gitlab.com>
Approved-by: Alex Pennells <apennells@gitlab.com>
Reviewed-by: Alex Pennells <apennells@gitlab.com>
Co-authored-by: Daniele Rossetti <drossetti@gitlab.com>

ee/app/assets/javascripts/analytics/contribution_analytics/components/app.vue

 <script>
 import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
-import { s__ } from '~/locale';
+import { s__, __ } from '~/locale';
 import {
   filterIssues,
   filterMergeRequests,
@@ -46,6 +46,10 @@ export default {
   i18n: {
     loading: s__('ContributionAnalytics|Loading contribution stats for group members'),
     error: s__('ContributionAnalytics|Failed to load the contribution stats'),
+    pushesHeader: __('Pushes'),
+    mergeRequestsHeader: s__('ContributionAnalytics|Merge requests'),
+    issuesHeader: s__('ContributionAnalytics|Issues'),
+    contributionsPerMemberHeader: s__('ContributionAnalytics|Contributions per group member'),
   },
   data() {
     return {
@@ -121,10 +125,22 @@ export default {
     </gl-alert>
 
     <template v-else>
-      <pushes-chart :pushes="pushes" />
-      <merge-requests-chart :merge-requests="mergeRequests" />
-      <issues-chart :issues="issues" />
-      <group-members-table :contributions="contributions" />
+      <div>
+        <h3>{{ $options.i18n.pushesHeader }}</h3>
+        <pushes-chart :pushes="pushes" />
+      </div>
+      <div>
+        <h3>{{ $options.i18n.mergeRequestsHeader }}</h3>
+        <merge-requests-chart :merge-requests="mergeRequests" />
+      </div>
+      <div>
+        <h3>{{ $options.i18n.issuesHeader }}</h3>
+        <issues-chart :issues="issues" />
+      </div>
+      <div>
+        <h3>{{ $options.i18n.contributionsPerMemberHeader }}</h3>
+        <group-members-table :contributions="contributions" />
+      </div>
     </template>
   </div>
 </template>

ee/app/assets/javascripts/analytics/contribution_analytics/components/group_members_table.vue

 <script>
 import { GlTable, GlLink } from '@gitlab/ui';
-import { s__ } from '~/locale';
 import { TABLE_COLUMNS } from '../constants';
 
 export default {
@@ -21,15 +20,11 @@ export default {
       sortDesc: false,
     };
   },
-  i18n: {
-    header: s__('ContributionAnalytics|Contributions per group member'),
-  },
 };
 </script>
 
 <template>
   <div>
-    <h3>{{ $options.i18n.header }}</h3>
     <gl-table
       :items="contributions"
       :fields="$options.columns"

ee/app/assets/javascripts/analytics/contribution_analytics/components/issues_chart.vue

@@ -11,7 +11,6 @@ export default {
     GlSprintf,
   },
   i18n: {
-    header: s__('ContributionAnalytics|Issues'),
     xAxisTitle: __('User'),
     yAxisTitle: __('Issues closed'),
     emptyDescription: s__('ContributionAnalytics|No issues for the selected time period.'),
@@ -51,19 +50,16 @@ export default {
 };
 </script>
 <template>
-  <div>
-    <div data-testid="issue-content">
-      <h3>{{ $options.i18n.header }}</h3>
-      <div data-testid="description">
-        <gl-sprintf :message="description">
-          <template #createdCount>
-            <strong>{{ formatNumber(createdCount) }}</strong>
-          </template>
-          <template #closedCount>
-            <strong>{{ formatNumber(closedCount) }}</strong>
-          </template>
-        </gl-sprintf>
-      </div>
+  <div data-testid="issue-content">
+    <div data-testid="description">
+      <gl-sprintf :message="description">
+        <template #createdCount>
+          <strong>{{ formatNumber(createdCount) }}</strong>
+        </template>
+        <template #closedCount>
+          <strong>{{ formatNumber(closedCount) }}</strong>
+        </template>
+      </gl-sprintf>
     </div>
 
     <column-chart

ee/app/assets/javascripts/analytics/contribution_analytics/components/merge_requests_chart.vue

@@ -11,7 +11,6 @@ export default {
     GlSprintf,
   },
   i18n: {
-    header: s__('ContributionAnalytics|Merge requests'),
     xAxisTitle: __('User'),
     yAxisTitle: __('Merge Requests created'),
     emptyDescription: s__('ContributionAnalytics|No merge requests for the selected time period.'),
@@ -56,22 +55,19 @@ export default {
 };
 </script>
 <template>
-  <div>
-    <div data-testid="merge-request-content">
-      <h3>{{ $options.i18n.header }}</h3>
-      <div data-testid="description">
-        <gl-sprintf :message="description">
-          <template #createdCount>
-            <strong>{{ formatNumber(createdCount) }}</strong>
-          </template>
-          <template #mergedCount>
-            <strong>{{ formatNumber(mergedCount) }}</strong>
-          </template>
-          <template #closedCount>
-            <strong>{{ formatNumber(closedCount) }}</strong>
-          </template>
-        </gl-sprintf>
-      </div>
+  <div data-testid="merge-request-content">
+    <div data-testid="description">
+      <gl-sprintf :message="description">
+        <template #createdCount>
+          <strong>{{ formatNumber(createdCount) }}</strong>
+        </template>
+        <template #mergedCount>
+          <strong>{{ formatNumber(mergedCount) }}</strong>
+        </template>
+        <template #closedCount>
+          <strong>{{ formatNumber(closedCount) }}</strong>
+        </template>
+      </gl-sprintf>
     </div>
 
     <column-chart

ee/app/assets/javascripts/analytics/contribution_analytics/components/pushes_chart.vue

@@ -11,7 +11,6 @@ export default {
     GlSprintf,
   },
   i18n: {
-    header: __('Pushes'),
     xAxisTitle: __('User'),
     yAxisTitle: __('Pushes'),
     emptyDescription: s__('ContributionAnalytics|No pushes for the selected time period.'),
@@ -51,21 +50,16 @@ export default {
 };
 </script>
 <template>
-  <div>
-    <div data-testid="push-content">
-      <h3>{{ $options.i18n.header }}</h3>
-      <div data-testid="description">
-        <gl-sprintf :message="description">
-          <template #pushCount>
-            <strong>{{ n__('%d push', '%d pushes', formatNumber(pushCount)) }}</strong>
-          </template>
-          <template #authorCount>
-            <strong>{{
-              n__('%d contributor', '%d contributors', formatNumber(authorCount))
-            }}</strong>
-          </template>
-        </gl-sprintf>
-      </div>
+  <div data-testid="push-content">
+    <div data-testid="description">
+      <gl-sprintf :message="description">
+        <template #pushCount>
+          <strong>{{ n__('%d push', '%d pushes', formatNumber(pushCount)) }}</strong>
+        </template>
+        <template #authorCount>
+          <strong>{{ n__('%d contributor', '%d contributors', formatNumber(authorCount)) }}</strong>
+        </template>
+      </gl-sprintf>
     </div>
 
     <column-chart

ee/spec/frontend/analytics/contribution_analytics/components/issues_chart_spec.js

@@ -23,7 +23,7 @@ describe('Contribution Analytics Issues Chart', () => {
 
   it('renders the empty description when there is no table data', () => {
     createWrapper([]);
-    expect(findDescription()).toBe(wrapper.vm.$options.i18n.emptyDescription);
+    expect(findDescription()).toBe('No issues for the selected time period.');
   });
 
   it('renders the description based on the table data', () => {

ee/spec/frontend/analytics/contribution_analytics/components/merge_requests_chart_spec.js

@@ -23,7 +23,7 @@ describe('Contribution Analytics Merge Requests Chart', () => {
 
   it('renders the empty description when there is no table data', () => {
     createWrapper([]);
-    expect(findDescription()).toBe(wrapper.vm.$options.i18n.emptyDescription);
+    expect(findDescription()).toBe('No merge requests for the selected time period.');
   });
 
   it('renders the description based on the table data', () => {

ee/spec/frontend/analytics/contribution_analytics/components/pushes_chart_spec.js

@@ -23,7 +23,7 @@ describe('Contribution Analytics Pushes Chart', () => {
 
   it('renders the empty description when there is no table data', () => {
     createWrapper([]);
-    expect(findDescription()).toBe(wrapper.vm.$options.i18n.emptyDescription);
+    expect(findDescription()).toBe('No pushes for the selected time period.');
   });
 
   it('renders the description based on the table data', () => {