Merge branch '328691-admin-usage-trends-replace-metric-card-with-single-stat' into 'master'

Replace metric card with GlSingleStat on admin usage trends

See merge request gitlab-org/gitlab!65051

app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue

 <script>
-import MetricCard from '~/analytics/shared/components/metric_card.vue';
+import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
+import { GlSingleStat } from '@gitlab/ui/dist/charts';
 import createFlash from '~/flash';
 import { number } from '~/lib/utils/unit_format';
 import { s__ } from '~/locale';
@@ -10,7 +11,8 @@ const defaultPrecision = 0;
 export default {
   name: 'UsageCounts',
   components: {
-    MetricCard,
+    GlSkeletonLoading,
+    GlSingleStat,
   },
   data() {
     return {
@@ -56,10 +58,24 @@ export default {
 </script>
 
 <template>
-  <metric-card
-    :title="__('Usage Trends')"
-    :metrics="counts"
-    :is-loading="$apollo.queries.counts.loading"
-    class="gl-mt-4"
+  <div>
+    <h2>
+      {{ __('Usage Trends') }}
+    </h2>
+    <div
+      class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-my-6 gl-align-items-flex-start"
+    >
+      <gl-skeleton-loading v-if="$apollo.queries.counts.loading" />
+      <template v-else>
+        <gl-single-stat
+          v-for="count in counts"
+          :key="count.key"
+          class="gl-pr-9 gl-my-4 gl-md-mt-0 gl-md-mb-0"
+          :value="`${count.value}`"
+          :title="count.label"
+          :should-animate="true"
         />
+      </template>
+    </div>
+  </div>
 </template>

spec/frontend/analytics/usage_trends/components/instance_counts_spec.js → spec/frontend/analytics/usage_trends/components/usage_counts_spec.js

+import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
+import { GlSingleStat } from '@gitlab/ui/dist/charts';
 import { shallowMount } from '@vue/test-utils';
-import MetricCard from '~/analytics/shared/components/metric_card.vue';
 import UsageCounts from '~/analytics/usage_trends/components/usage_counts.vue';
 import { mockUsageCounts } from '../mock_data';
 
@@ -27,18 +28,18 @@ describe('UsageCounts', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
-  const findMetricCard = () => wrapper.find(MetricCard);
+  const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoading);
+  const findAllSingleStats = () => wrapper.findAllComponents(GlSingleStat);
 
   describe('while loading', () => {
     beforeEach(() => {
       createComponent({ loading: true });
     });
 
-    it('displays the metric card with isLoading=true', () => {
-      expect(findMetricCard().props('isLoading')).toBe(true);
+    it('displays a loading indicator', () => {
+      expect(findSkeletonLoader().exists()).toBe(true);
     });
   });
 
@@ -47,8 +48,15 @@ describe('UsageCounts', () => {
       createComponent({ data: { counts: mockUsageCounts } });
     });
 
-    it('passes the counts data to the metric card', () => {
-      expect(findMetricCard().props('metrics')).toEqual(mockUsageCounts);
+    it.each`
+      index | value                       | title
+      ${0}  | ${mockUsageCounts[0].value} | ${mockUsageCounts[0].label}
+      ${1}  | ${mockUsageCounts[1].value} | ${mockUsageCounts[1].label}
+    `('renders a GlSingleStat for "$title"', ({ index, value, title }) => {
+      const singleStat = findAllSingleStats().at(index);
+
+      expect(singleStat.props('value')).toBe(`${value}`);
+      expect(singleStat.props('title')).toBe(title);
     });
   });
 });