From 61fe290457749aa35d4afcd3d2149386b38aff0a Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Wed, 14 Feb 2024 20:10:32 +0100
Subject: [PATCH] Update repositories analytics empty states

There will be a proper empty state with
an illustration when no data on charts
on the Repositories Analytics page.

Changelog: changed
EE: true
---
 .../components/test_coverage_summary.vue      | 20 ++++++++-----------
 .../components/test_coverage_table.vue        |  3 +++
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.vue b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.vue
index c175ee4d96f3b7..5439b40099a61f 100644
--- a/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.vue
+++ b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.vue
@@ -1,6 +1,6 @@
 <script>
-import chartEmptyStateIllustration from '@gitlab/svgs/dist/illustrations/chart-empty-state.svg?raw';
-import { GlCard, GlSprintf, GlSkeletonLoader, GlPopover } from '@gitlab/ui';
+import emptyStateIllustrationUrl from '@gitlab/svgs/dist/illustrations/empty-state/empty-radar-md.svg?url';
+import { GlCard, GlSprintf, GlSkeletonLoader, GlPopover, GlEmptyState } from '@gitlab/ui';
 import { GlSingleStat, GlAreaChart } from '@gitlab/ui/dist/charts';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import {
@@ -28,6 +28,7 @@ export default {
     GlSkeletonLoader,
     GlSingleStat,
     GlPopover,
+    GlEmptyState,
   },
   directives: {
     SafeHtml,
@@ -175,7 +176,7 @@ export default {
     },
   },
   i18n,
-  chartEmptyStateIllustration,
+  emptyStateIllustrationUrl,
 };
 </script>
 <template>
@@ -225,17 +226,12 @@ export default {
 
       <chart-skeleton-loader v-if="isLoading" data-testid="group-coverage-chart-loading" />
 
-      <div
+      <gl-empty-state
         v-else-if="isChartEmpty"
-        class="d-flex flex-column justify-content-center gl-my-7"
+        :svg-path="$options.emptyStateIllustrationUrl"
+        :title="$options.i18n.emptyChart"
         data-testid="group-coverage-chart-empty"
-      >
-        <div
-          v-safe-html="$options.chartEmptyStateIllustration"
-          class="gl-my-5 svg-w-100 d-flex gl-align-items-center"
-        ></div>
-        <h5 class="text-center">{{ $options.i18n.emptyChart }}</h5>
-      </div>
+      />
 
       <gl-area-chart
         v-else
diff --git a/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.vue b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.vue
index cf28f40c027c91..0122fad229744f 100644
--- a/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.vue
+++ b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.vue
@@ -1,4 +1,5 @@
 <script>
+import emptyStateIllustrationUrl from '@gitlab/svgs/dist/illustrations/empty-state/empty-search-md.svg?url';
 import {
   GlCard,
   GlEmptyState,
@@ -180,6 +181,7 @@ export default {
     },
   ],
   i18n,
+  emptyStateIllustrationUrl,
   LOADING_STATE: {
     rows: 4,
     height: 10,
@@ -290,6 +292,7 @@ export default {
       class="gl-mt-3"
       :title="$options.i18n.emptyStateTitle"
       :description="$options.i18n.emptyStateDescription"
+      :svg-path="$options.emptyStateIllustrationUrl"
       data-testid="test-coverage-table-empty-state"
     />
   </gl-card>
-- 
GitLab