Commit bdd73a76 authored by Brandon Labuschagne's avatar Brandon Labuschagne

Merge branch '328689-group-overview-analytics-replace-metric-card-with-single-stat' into 'master'

Group Overview Analytics: Replace metric card with GlSingleStat

See merge request gitlab-org/gitlab!62796
parents 40312f01 b72c8dbc
<script>
import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
import { GlSingleStat } from '@gitlab/ui/dist/charts';
import Api from 'ee/api';
import MetricCard from '~/analytics/shared/components/metric_card.vue';
import createFlash from '~/flash';
import { __, s__ } from '~/locale';
export default {
name: 'GroupActivityCard',
components: {
MetricCard,
GlSkeletonLoading,
GlSingleStat,
},
inject: ['groupFullPath', 'groupName'],
data() {
......@@ -65,9 +67,25 @@ export default {
</script>
<template>
<metric-card
:title="s__('GroupActivityMetrics|Recent activity (last 90 days)')"
:metrics="metricsArray"
:is-loading="isLoading"
/>
<div
class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-mt-6 gl-mb-4 gl-align-items-flex-start"
>
<div class="gl-display-flex gl-flex-direction-column gl-pr-9 gl-flex-shrink-0">
<span class="gl-font-weight-bold">{{ s__('GroupActivityMetrics|Recent activity') }}</span>
<span>{{ s__('GroupActivityMetrics|Last 90 days') }}</span>
</div>
<div
v-for="metric in metricsArray"
:key="metric.key"
class="gl-pr-9 gl-my-4 gl-md-mt-0 gl-md-mb-0"
>
<gl-skeleton-loading v-if="isLoading" />
<gl-single-stat
v-else
:value="`${metric.value}`"
:title="metric.label"
:should-animate="true"
/>
</div>
</div>
</template>
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`GroupActivity component matches the snapshot 1`] = `
<div
class="gl-card gl-mb-5"
>
<div
class="gl-card-header"
>
<strong>
Recent activity (last 90 days)
</strong>
</div>
<div
class="gl-card-body"
>
<div
class="gl-display-flex"
>
<div
class="js-metric-card-item gl-flex-grow-1 gl-text-center"
>
<h3
class="gl-my-2"
>
10
</h3>
<p
class="text-secondary gl-font-sm gl-mb-2"
>
Merge Requests opened
<!---->
</p>
</div>
<div
class="js-metric-card-item gl-flex-grow-1 gl-text-center"
>
<h3
class="gl-my-2"
>
20
</h3>
<p
class="text-secondary gl-font-sm gl-mb-2"
>
Issues opened
<!---->
</p>
</div>
<div
class="js-metric-card-item gl-flex-grow-1 gl-text-center"
>
<h3
class="gl-my-2"
>
30
</h3>
<p
class="text-secondary gl-font-sm gl-mb-2"
>
Members added
<!---->
</p>
</div>
</div>
</div>
<!---->
</div>
`;
import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
import { GlSingleStat } from '@gitlab/ui/dist/charts';
import { mount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import GroupActivityCard from 'ee/analytics/group_analytics/components/group_activity_card.vue';
import Api from 'ee/api';
import waitForPromises from 'helpers/wait_for_promises';
import MetricCard from '~/analytics/shared/components/metric_card.vue';
import axios from '~/lib/utils/axios_utils';
const TEST_GROUP_ID = 'gitlab-org';
......@@ -44,20 +45,10 @@ describe('GroupActivity component', () => {
mock.restore();
});
const findMetricCard = () => wrapper.find(MetricCard);
const findAllSkeletonLoaders = () => wrapper.findAllComponents(GlSkeletonLoading);
const findAllSingleStats = () => wrapper.findAllComponents(GlSingleStat);
it('matches the snapshot', () => {
createComponent();
return wrapper.vm
.$nextTick()
.then(waitForPromises)
.then(() => {
expect(wrapper.element).toMatchSnapshot();
});
});
it('fetches MR and issue count and updates isLoading properly', () => {
it('fetches the metrics and updates isLoading properly', () => {
createComponent();
expect(wrapper.vm.isLoading).toBe(true);
......@@ -79,18 +70,39 @@ describe('GroupActivity component', () => {
});
});
it('passes the metrics array to the metric card', () => {
it('updates the loading state properly', () => {
createComponent();
expect(findAllSkeletonLoaders()).toHaveLength(3);
return wrapper.vm
.$nextTick()
.then(waitForPromises)
.then(() => {
expect(findMetricCard().props('metrics')).toEqual([
{ key: 'mergeRequests', value: 10, label: 'Merge Requests opened' },
{ key: 'issues', value: 20, label: 'Issues opened' },
{ key: 'newMembers', value: 30, label: 'Members added' },
]);
expect(findAllSkeletonLoaders()).toHaveLength(0);
});
});
describe('metrics', () => {
beforeEach(() => {
createComponent();
});
it.each`
index | value | title
${0} | ${10} | ${'Merge Requests opened'}
${1} | ${20} | ${'Issues opened'}
${2} | ${30} | ${'Members added'}
`('renders a GlSingleStat for "$title"', ({ index, value, title }) => {
const singleStat = findAllSingleStats().at(index);
return wrapper.vm
.$nextTick()
.then(waitForPromises)
.then(() => {
expect(singleStat.props('value')).toBe(`${value}`);
expect(singleStat.props('title')).toBe(title);
});
});
});
});
......@@ -15745,13 +15745,16 @@ msgstr ""
msgid "GroupActivityMetrics|Issues opened"
msgstr ""
msgid "GroupActivityMetrics|Last 90 days"
msgstr ""
msgid "GroupActivityMetrics|Members added"
msgstr ""
msgid "GroupActivityMetrics|Merge Requests opened"
msgstr ""
msgid "GroupActivityMetrics|Recent activity (last 90 days)"
msgid "GroupActivityMetrics|Recent activity"
msgstr ""
msgid "GroupImport|Failed to import group."
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment