Switch to v-safe-html in iteration reports

ee/app/assets/javascripts/iterations/components/iteration_report.vue

@@ -7,6 +7,7 @@ import {
   GlIcon,
   GlLoadingIcon,
   GlModal,
+  GlSafeHtmlDirective,
 } from '@gitlab/ui';
 import BurnCharts from 'ee/burndown_chart/components/burn_charts.vue';
 import { TYPE_ITERATION } from '~/graphql_shared/constants';
@@ -33,6 +34,9 @@ export default {
     IterationReportTabs,
     TimeboxStatusBadge,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   apollo: {
     iteration: {
       query,
@@ -176,10 +180,7 @@ export default {
         </gl-modal>
       </div>
       <h3 ref="title" class="page-title">{{ iteration.title }}</h3>
-      <div
-        ref="description"
-        v-html="iteration.descriptionHtml /* eslint-disable-line vue/no-v-html */"
-      ></div>
+      <div ref="description" v-safe-html="iteration.descriptionHtml"></div>
       <burn-charts
         :start-date="iteration.startDate"
         :due-date="iteration.dueDate"

ee/app/assets/javascripts/iterations/components/iteration_report_without_vue_router.vue

@@ -8,6 +8,7 @@ import {
   GlIcon,
   GlLoadingIcon,
   GlModal,
+  GlSafeHtmlDirective,
 } from '@gitlab/ui';
 import BurnCharts from 'ee/burndown_chart/components/burn_charts.vue';
 import { TYPE_ITERATION } from '~/graphql_shared/constants';
@@ -47,6 +48,9 @@ export default {
     IterationReportTabs,
     GlModal,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   apollo: {
     iteration: {
       query,
@@ -274,10 +278,7 @@ export default {
         </gl-modal>
       </div>
       <h3 ref="title" class="page-title">{{ iteration.title }}</h3>
-      <div
-        ref="description"
-        v-html="iteration.descriptionHtml /* eslint-disable-line vue/no-v-html */"
-      ></div>
+      <div ref="description" v-safe-html="iteration.descriptionHtml"></div>
       <burn-charts
         :start-date="iteration.startDate"
         :due-date="iteration.dueDate"