Merge branch '215130-move-group-repo-analytics-to-vue' into 'master'

Move group repo analytics to vue

See merge request gitlab-org/gitlab!41811

ee/app/assets/javascripts/analytics/repository_analytics/components/group_repository_analytics.vue

+<script>
+import { GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { pikadayToString } from '~/lib/utils/datetime_utility';
+
+export default {
+  name: 'GroupRepositoryAnalytics',
+  components: {
+    GlButton,
+  },
+  inject: {
+    groupAnalyticsCoverageReportsPath: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    csvReportPath() {
+      const today = new Date();
+      const endDate = pikadayToString(today);
+      today.setFullYear(today.getFullYear() - 1);
+      const startDate = pikadayToString(today);
+      return `${this.groupAnalyticsCoverageReportsPath}&start_date=${startDate}&end_date=${endDate}`;
+    },
+  },
+  text: {
+    codeCoverageHeader: __('RepositoriesAnalytics|Test Code Coverage'),
+    downloadCSVButton: __('RepositoriesAnalytics|Download historic test coverage data (.csv)'),
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
+    <h4 class="sub-header">{{ $options.text.codeCoverageHeader }}</h4>
+    <gl-button
+      :href="csvReportPath"
+      rel="nofollow"
+      download
+      data-testid="group-code-coverage-csv-button"
+      >{{ $options.text.downloadCSVButton }}</gl-button
+    >
+  </div>
+</template>

ee/app/assets/javascripts/analytics/repository_analytics/index.js

+import Vue from 'vue';
+import GroupRepositoryAnalytics from './components/group_repository_analytics.vue';
+
+export default () => {
+  const el = document.querySelector('#js-group-repository-analytics');
+  const { groupAnalyticsCoverageReportsPath } = el?.dataset || {};
+
+  if (el) {
+    // eslint-disable-next-line no-new
+    new Vue({
+      el,
+      components: {
+        GroupRepositoryAnalytics,
+      },
+      provide: {
+        groupAnalyticsCoverageReportsPath,
+      },
+      render(createElement) {
+        return createElement('group-repository-analytics', {});
+      },
+    });
+  }
+};

ee/app/assets/javascripts/pages/analytics/repository_analytics/index.js

+import initRepositoryAnalyticsApp from 'ee/analytics/repository_analytics';
+
+document.addEventListener('DOMContentLoaded', () => {
+  initRepositoryAnalyticsApp();
+});

ee/app/views/groups/analytics/repository_analytics/show.html.haml

@@ -4,8 +4,4 @@
   %h3
     = _("Repositories Analytics")
 
-.gl-display-flex.gl-justify-content-space-between.gl-align-items-center
-  %h4.sub-header
-    = _("RepositoriesAnalytics|Test Code Coverage")
-  = link_to _("RepositoriesAnalytics|Download historic test coverage data (.csv)"), group_analytics_coverage_reports_path(@group, format: :csv, ref_path: "refs/heads/master", start_date: Date.today - 1.year, end_date: Date.today),
-      rel: 'nofollow', download: '', method: :get, class: 'gl-button btn-sm'
+#js-group-repository-analytics{ data: { group_analytics_coverage_reports_path: group_analytics_coverage_reports_path(@group, format: :csv, ref_path: "refs/heads/master") } }

ee/spec/frontend/analytics/repository_analytics/group_repository_analytics_spec.js

+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { useFakeDate } from 'helpers/fake_date';
+import GroupRepositoryAnalytics from 'ee/analytics/repository_analytics/components/group_repository_analytics.vue';
+
+const localVue = createLocalVue();
+
+describe('Group repository analytics app', () => {
+  useFakeDate();
+  let wrapper;
+
+  const injectedProperties = {
+    groupAnalyticsCoverageReportsPath: '/coverage.csv?ref_path=refs/heads/master',
+  };
+
+  const createComponent = () => {
+    wrapper = shallowMount(GroupRepositoryAnalytics, {
+      localVue,
+      provide: {
+        ...injectedProperties,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('renders button to download code coverage CSV report', () => {
+    const reportButton = wrapper.find('[data-testid="group-code-coverage-csv-button"]');
+    // Due to the fake_date helper, we can always expect today's date to be 2020-07-06
+    // and one year ago to be 2019-07-06
+    const expectedPath = `${injectedProperties.groupAnalyticsCoverageReportsPath}&start_date=2019-07-06&end_date=2020-07-06`;
+
+    expect(reportButton.exists()).toBe(true);
+    expect(reportButton.attributes('href')).toBe(expectedPath);
+  });
+});