Add latest changes from gitlab-org/gitlab@master

1 files changed, 6 insertions, 1 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/empty_chart.vue b/app/assets/javascripts/monitoring/components/charts/empty_chart.vue
index 4b54cffe231..ae079da0b0b 100644
--- a/app/assets/javascripts/monitoring/components/charts/empty_chart.vue
+++ b/app/assets/javascripts/monitoring/components/charts/empty_chart.vue
@@ -1,8 +1,12 @@
 <script>
 import chartEmptyStateIllustration from '@gitlab/svgs/dist/illustrations/chart-empty-state.svg';
+import { GlSafeHtmlDirective } from '@gitlab/ui';
 import { chartHeight } from '../../constants';
 
 export default {
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   data() {
     return {
       height: chartHeight,
@@ -18,14 +22,15 @@ export default {
   created() {
     this.chartEmptyStateIllustration = chartEmptyStateIllustration;
   },
+  safeHtmlConfig: { ADD_TAGS: ['use'] },
 };
 </script>
 <template>
   <div class="d-flex flex-column justify-content-center">
     <div
+      v-safe-html:[$options.safeHtmlConfig]="chartEmptyStateIllustration"
       class="gl-mt-3 svg-w-100 d-flex align-items-center"
       :style="svgContainerStyle"
-      v-html="chartEmptyStateIllustration /* eslint-disable-line vue/no-v-html */"
     ></div>
     <h5 class="text-center gl-mt-3">{{ __('No data to display') }}</h5>
   </div>