Group Overview Analytics: Replace metric card with GlSingleStat

ee/app/assets/javascripts/analytics/group_analytics/components/group_activity_card.vue

 <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>

ee/spec/frontend/analytics/group_analytics/components/__snapshots__/group_activity_card_spec.js.snap

-// 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>
-`;

ee/spec/frontend/analytics/group_analytics/components/group_activity_card_spec.js

+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);
+        });
+    });
+  });
 });

locale/gitlab.pot

@@ -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."