Merge branch 'djadmin-v-html-line-based' into 'master'

Switch to per-line eslint rule for v-html

See merge request gitlab-org/gitlab!63386

app/assets/javascripts/badges/components/badge_form.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlLoadingIcon, GlFormInput, GlFormGroup, GlButton } from '@gitlab/ui';
 import { escape, debounce } from 'lodash';
 import { mapActions, mapState } from 'vuex';
@@ -184,7 +183,7 @@ export default {
 
     <div class="form-group">
       <label for="badge-link-url" class="label-bold">{{ s__('Badges|Link') }}</label>
-      <p v-html="helpText"></p>
+      <p v-html="helpText /* eslint-disable-line vue/no-v-html */"></p>
       <input
         id="badge-link-url"
         v-model="linkUrl"
@@ -199,7 +198,7 @@ export default {
 
     <div class="form-group">
       <label for="badge-image-url" class="label-bold">{{ s__('Badges|Badge image URL') }}</label>
-      <p v-html="helpText"></p>
+      <p v-html="helpText /* eslint-disable-line vue/no-v-html */"></p>
       <input
         id="badge-image-url"
         v-model="imageUrl"

app/assets/javascripts/batch_comments/components/draft_note.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButton } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import NoteableNote from '~/notes/components/noteable_note.vue';
@@ -106,7 +105,7 @@ export default {
       <div
         v-if="draftCommands"
         class="referenced-commands draft-note-commands"
-        v-html="draftCommands"
+        v-html="draftCommands /* eslint-disable-line vue/no-v-html */"
       ></div>
 
       <p class="draft-note-actions d-flex">

app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlModal, GlButton, GlFormInput } from '@gitlab/ui';
 import { escape } from 'lodash';
 import csrf from '~/lib/utils/csrf';
@@ -141,7 +140,7 @@ export default {
           <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
         </ul>
       </div>
-      <strong v-html="confirmationTextLabel"></strong>
+      <strong v-html="confirmationTextLabel /* eslint-disable-line vue/no-v-html */"></strong>
       <form ref="form" :action="clusterPath" method="post" class="gl-mb-5">
         <input ref="method" type="hidden" name="_method" value="delete" />
         <input :value="csrfToken" type="hidden" name="authenticity_token" />

app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButton, GlFormGroup, GlFormInput, GlIcon, GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapState, mapActions } from 'vuex';
@@ -142,13 +141,19 @@ export default {
         </div>
       </div>
       <div class="col-12 mb-3 mt-n3">
-        <p class="form-text text-muted" v-html="accountAndExternalIdsHelpText"></p>
+        <p
+          class="form-text text-muted"
+          v-html="accountAndExternalIdsHelpText /* eslint-disable-line vue/no-v-html */"
+        ></p>
       </div>
     </div>
     <div class="form-group">
       <label for="eks-provision-role-arn">{{ s__('ClusterIntegration|Provision Role ARN') }}</label>
       <gl-form-input id="eks-provision-role-arn" v-model="roleArn" />
-      <p class="form-text text-muted" v-html="provisionRoleArnHelpText"></p>
+      <p
+        class="form-text text-muted"
+        v-html="provisionRoleArnHelpText /* eslint-disable-line vue/no-v-html */"
+      ></p>
     </div>
 
     <gl-form-group :label="$options.i18n.regionInputLabel">

app/assets/javascripts/cycle_analytics/components/banner.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlIcon } from '@gitlab/ui';
 import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg';
 
@@ -35,7 +34,10 @@ export default {
     >
       <gl-icon name="close" />
     </button>
-    <div class="svg-container" v-html="iconCycleAnalyticsSplash"></div>
+    <div
+      class="svg-container"
+      v-html="iconCycleAnalyticsSplash /* eslint-disable-line vue/no-v-html */"
+    ></div>
     <div class="inner-content">
       <h4>{{ __('Introducing Value Stream Analytics') }}</h4>
       <p>

app/assets/javascripts/diffs/components/commit_item.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButtonGroup, GlButton, GlTooltipDirective } from '@gitlab/ui';
 
 import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
@@ -100,7 +99,10 @@ export default {
       <div
         class="commit-actions flex-row d-none d-sm-flex align-items-start flex-wrap justify-content-end"
       >
-        <div v-if="commit.signature_html" v-html="commit.signature_html"></div>
+        <div
+          v-if="commit.signature_html"
+          v-html="commit.signature_html /* eslint-disable-line vue/no-v-html */"
+        ></div>
         <commit-pipeline-status
           v-if="commit.pipeline_status_path"
           :endpoint="commit.pipeline_status_path"
@@ -142,7 +144,7 @@ export default {
             <a
               :href="commit.commit_url"
               class="commit-row-message item-title"
-              v-html="commit.title_html"
+              v-html="commit.title_html /* eslint-disable-line vue/no-v-html */"
             ></a>
 
             <span class="commit-row-message d-block d-sm-none">&middot; {{ commit.short_id }}</span>
@@ -174,7 +176,7 @@ export default {
         v-if="commit.description_html"
         :class="{ 'js-toggle-content': collapsible, 'd-block': !collapsible }"
         class="commit-row-description gl-mb-3 gl-text-body"
-        v-html="commitDescription"
+        v-html="commitDescription /* eslint-disable-line vue/no-v-html */"
       ></pre>
     </div>
   </li>

app/assets/javascripts/diffs/components/diff_row.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { memoize } from 'lodash';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import {
@@ -268,7 +267,7 @@ export default {
           ]"
           class="diff-td line_content with-coverage left-side"
           data-testid="left-content"
-          v-html="$options.lineContent(props.line.left)"
+          v-html="$options.lineContent(props.line.left) /* eslint-disable-line vue/no-v-html */"
         ></div>
       </template>
       <template
@@ -390,7 +389,7 @@ export default {
             },
           ]"
           class="diff-td line_content with-coverage right-side parallel"
-          v-html="$options.lineContent(props.line.right)"
+          v-html="$options.lineContent(props.line.right) /* eslint-disable-line vue/no-v-html */"
         ></div>
       </template>
       <template v-else>

app/assets/javascripts/error_tracking/components/stacktrace_entry.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlTooltip, GlSprintf, GlIcon } from '@gitlab/ui';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
@@ -132,7 +131,7 @@ export default {
             <td
               class="line_content"
               :class="{ old: isHighlighted(lineNum(line)) }"
-              v-html="lineCode(line)"
+              v-html="lineCode(line) /* eslint-disable-line vue/no-v-html */"
             ></td>
           </tr>
         </template>

app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue

 <script>
-/* eslint-disable vue/require-default-prop, vue/no-v-html */
+/* eslint-disable vue/require-default-prop */
 import { GlButton } from '@gitlab/ui';
 import highlight from '~/lib/utils/highlight';
 import { truncateNamespace } from '~/lib/utils/text_utility';
@@ -75,7 +75,7 @@ export default {
           ref="frequentItemsItemTitle"
           :title="itemName"
           class="frequent-items-item-title"
-          v-html="highlightedItemName"
+          v-html="highlightedItemName /* eslint-disable-line vue/no-v-html */"
         ></div>
         <div
           v-if="namespace"

app/assets/javascripts/ide/components/commit_sidebar/success_message.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { mapState } from 'vuex';
 
 export default {
@@ -17,7 +16,7 @@ export default {
     <div class="gl-mr-3 gl-ml-3">
       <div class="text-content text-center">
         <h4>{{ __('All changes are committed') }}</h4>
-        <p v-html="lastCommitMsg"></p>
+        <p v-html="lastCommitMsg /* eslint-disable-line vue/no-v-html */"></p>
       </div>
     </div>
   </div>

app/assets/javascripts/ide/components/error_message.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import { mapActions } from 'vuex';
 
@@ -56,7 +55,7 @@ export default {
     @dismiss="dismiss"
     @primaryAction="doAction"
   >
-    <span v-html="message.text"></span>
+    <span v-html="message.text /* eslint-disable-line vue/no-v-html */"></span>
     <gl-loading-icon v-show="isLoading" size="sm" inline class="vertical-align-middle ml-1" />
   </gl-alert>
 </template>

app/assets/javascripts/ide/components/jobs/detail.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlTooltipDirective, GlButton, GlIcon } from '@gitlab/ui';
 import { throttle } from 'lodash';
 import { mapActions, mapState } from 'vuex';
@@ -102,7 +101,7 @@ export default {
       <code
         v-show="!detailJob.isLoading"
         class="bash"
-        v-html="jobOutput"
+        v-html="jobOutput /* eslint-disable-line vue/no-v-html */"
       >
       </code>
       <div

app/assets/javascripts/issue_show/components/locked_warning.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { __, sprintf } from '~/locale';
 
 export default {
@@ -24,5 +23,8 @@ export default {
 </script>
 
 <template>
-  <div class="alert alert-danger" v-html="alertMessage"></div>
+  <div
+    class="alert alert-danger"
+    v-html="alertMessage /* eslint-disable-line vue/no-v-html */"
+  ></div>
 </template>

app/assets/javascripts/monitoring/components/charts/empty_chart.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import chartEmptyStateIllustration from '@gitlab/svgs/dist/illustrations/chart-empty-state.svg';
 import { chartHeight } from '../../constants';
 
@@ -26,7 +25,7 @@ export default {
     <div
       class="gl-mt-3 svg-w-100 d-flex align-items-center"
       :style="svgContainerStyle"
-      v-html="chartEmptyStateIllustration"
+      v-html="chartEmptyStateIllustration /* eslint-disable-line vue/no-v-html */"
     ></div>
     <h5 class="text-center gl-mt-3">{{ __('No data to display') }}</h5>
   </div>

app/assets/javascripts/notebook/cells/markdown.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import katex from 'katex';
 import marked from 'marked';
 import { sanitize } from '~/lib/dompurify';
@@ -149,7 +148,7 @@ export default {
 <template>
   <div class="cell text-cell">
     <prompt />
-    <div class="markdown" v-html="markdown"></div>
+    <div class="markdown" v-html="markdown /* eslint-disable-line vue/no-v-html */"></div>
   </div>
 </template>
 

app/assets/javascripts/notes/components/diff_with_note.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
@@ -93,7 +92,11 @@ export default {
           >
             <td :class="line.type" class="diff-line-num old_line">{{ line.old_line }}</td>
             <td :class="line.type" class="diff-line-num new_line">{{ line.new_line }}</td>
-            <td :class="line.type" class="line_content" v-html="trimChar(line.rich_text)"></td>
+            <td
+              :class="line.type"
+              class="line_content"
+              v-html="trimChar(line.rich_text) /* eslint-disable-line vue/no-v-html */"
+            ></td>
           </tr>
         </template>
         <tr v-if="!hasTruncatedDiffLines" class="line_holder line-holder-placeholder">

app/assets/javascripts/notes/components/note_body.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import $ from 'jquery';
 import { escape } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
@@ -163,7 +162,11 @@ export default {
       @addToBatch="addSuggestionToBatch"
       @removeFromBatch="removeSuggestionFromBatch"
     />
-    <div v-else class="note-text md" v-html="note.note_html"></div>
+    <div
+      v-else
+      class="note-text md"
+      v-html="note.note_html /* eslint-disable-line vue/no-v-html */"
+    ></div>
     <note-form
       v-if="isEditing"
       ref="noteForm"

app/assets/javascripts/notes/components/note_form.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButton } from '@gitlab/ui';
 import { mapGetters, mapActions, mapState } from 'vuex';
 import { getDraft, updateDraft } from '~/lib/utils/autosave';
@@ -322,7 +321,7 @@ export default {
     <div
       v-if="conflictWhileEditing"
       class="js-conflict-edit-warning alert alert-danger"
-      v-html="changedCommentText"
+      v-html="changedCommentText /* eslint-disable-line vue/no-v-html */"
     ></div>
     <div class="flash-container timeline-content"></div>
     <form :data-line-code="lineCode" class="edit-note common-note-form js-quick-submit gfm-form">

app/assets/javascripts/notes/components/note_header.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import { mapActions } from 'vuex';
 import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -169,7 +168,7 @@ export default {
         v-on="
           authorStatusHasTooltip ? { mouseenter: removeEmojiTitle, mouseleave: addEmojiTitle } : {}
         "
-        v-html="authorStatus"
+        v-html="authorStatus /* eslint-disable-line vue/no-v-html */"
       ></span>
       <span class="text-nowrap author-username">
         <a

app/assets/javascripts/performance_bar/components/performance_bar_app.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { glEmojiTag } from '~/emoji';
 
 import { s__ } from '~/locale';
@@ -144,7 +143,7 @@ export default {
           class="current-host"
           :class="{ canary: currentRequest.details.host.canary }"
         >
-          <span v-html="birdEmoji"></span>
+          <span v-html="birdEmoji /* eslint-disable-line vue/no-v-html */"></span>
           {{ currentRequest.details.host.hostname }}
         </span>
       </div>

app/assets/javascripts/performance_bar/components/request_selector.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlPopover } from '@gitlab/ui';
 import { glEmojiTag } from '~/emoji';
 import { n__ } from '~/locale';
@@ -59,7 +58,10 @@ export default {
       </option>
     </select>
     <span v-if="requestsWithWarnings.length" class="gl-cursor-default">
-      <span id="performance-bar-request-selector-warning" v-html="glEmojiTag('warning')"></span>
+      <span
+        id="performance-bar-request-selector-warning"
+        v-html="glEmojiTag('warning') /* eslint-disable-line vue/no-v-html */"
+      ></span>
       <gl-popover
         placement="bottom"
         target="performance-bar-request-selector-warning"

app/assets/javascripts/performance_bar/components/request_warning.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlPopover } from '@gitlab/ui';
 import { glEmojiTag } from '~/emoji';
 
@@ -36,7 +35,10 @@ export default {
 </script>
 <template>
   <span v-if="hasWarnings" class="gl-cursor-default">
-    <span :id="htmlId" v-html="glEmojiTag('warning')"></span>
+    <span
+      :id="htmlId"
+      v-html="glEmojiTag('warning') /* eslint-disable-line vue/no-v-html */"
+    ></span>
     <gl-popover placement="bottom" :target="htmlId" :content="warningMessage" />
   </span>
 </template>

app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stop_modal.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlLink, GlModal } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import { __, s__, sprintf } from '~/locale';
@@ -72,7 +71,7 @@ export default {
     :action-cancel="cancelProps"
     @primary="emitSubmit($event)"
   >
-    <p v-html="modalText"></p>
+    <p v-html="modalText /* eslint-disable-line vue/no-v-html */"></p>
 
     <p v-if="pipeline">
       <ci-icon

app/assets/javascripts/prometheus_alerts/components/reset_key.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButton, GlFormGroup, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
@@ -85,7 +84,7 @@ export default {
       </p>
     </div>
     <div class="col-lg-9">
-      <p v-html="sectionDescription"></p>
+      <p v-html="sectionDescription /* eslint-disable-line vue/no-v-html */"></p>
       <gl-form-group :label="__('URL')" label-for="notify-url" label-class="label-bold">
         <div class="input-group">
           <gl-form-input id="notify-url" :readonly="true" :value="notifyUrl" />

app/assets/javascripts/releases/components/release_block.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import $ from 'jquery';
 import { isEmpty } from 'lodash';
 import { scrollToElement } from '~/lib/utils/common_utils';
@@ -103,7 +102,10 @@ export default {
       <evidence-block v-if="hasEvidence" :release="release" />
 
       <div ref="gfm-content" class="card-text gl-mt-3">
-        <div class="md" v-html="release.descriptionHtml"></div>
+        <div
+          class="md"
+          v-html="release.descriptionHtml /* eslint-disable-line vue/no-v-html */"
+        ></div>
       </div>
     </div>
 

app/assets/javascripts/repository/components/last_commit.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlTooltipDirective, GlLink, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui';
 import defaultAvatarUrl from 'images/no_avatar.png';
 import pathLastCommitQuery from 'shared_queries/repository/path_last_commit.query.graphql';
@@ -125,7 +124,7 @@ export default {
             :href="commit.webPath"
             :class="{ 'font-italic': !commit.message }"
             class="commit-row-message item-title"
-            v-html="commit.titleHtml"
+            v-html="commit.titleHtml /* eslint-disable-line vue/no-v-html */"
           />
           <gl-button
             v-if="commit.descriptionHtml"
@@ -153,11 +152,14 @@ export default {
             v-if="commitDescription"
             :class="{ 'd-block': showDescription }"
             class="commit-row-description gl-mb-3"
-            v-html="commitDescription"
+            v-html="commitDescription /* eslint-disable-line vue/no-v-html */"
           ></pre>
         </div>
         <div class="commit-actions flex-row">
-          <div v-if="commit.signatureHtml" v-html="commit.signatureHtml"></div>
+          <div
+            v-if="commit.signatureHtml"
+            v-html="commit.signatureHtml /* eslint-disable-line vue/no-v-html */"
+          ></div>
           <div v-if="commit.pipeline" class="ci-status-link">
             <gl-link
               v-gl-tooltip.left

app/assets/javascripts/repository/components/preview/index.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlIcon, GlLink, GlLoadingIcon } from '@gitlab/ui';
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
@@ -60,7 +59,11 @@ export default {
     </div>
     <div class="blob-viewer" data-qa-selector="blob_viewer_content" itemprop="about">
       <gl-loading-icon v-if="loading > 0" size="md" color="dark" class="my-4 mx-auto" />
-      <div v-else-if="readme" ref="readme" v-html="readme.html"></div>
+      <div
+        v-else-if="readme"
+        ref="readme"
+        v-html="readme.html /* eslint-disable-line vue/no-v-html */"
+      ></div>
     </div>
   </article>
 </template>

app/assets/javascripts/repository/components/table/row.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import {
   GlBadge,
   GlLink,
@@ -230,7 +229,7 @@ export default {
         :href="commit.commitPath"
         :title="commit.message"
         class="str-truncated-100 tree-commit-link"
-        v-html="commit.titleHtml"
+        v-html="commit.titleHtml /* eslint-disable-line vue/no-v-html */"
       />
       <gl-skeleton-loading v-else :lines="1" class="h-auto" />
     </td>

app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import {
   GlToast,
   GlModal,
@@ -267,7 +266,7 @@ export default {
               @click="setEmoji"
             >
               <template #button-content>
-                <span v-html="emojiTag"></span>
+                <span v-html="emojiTag /* eslint-disable-line vue/no-v-html */"></span>
                 <span
                   v-show="noEmoji"
                   class="js-no-emoji-placeholder no-emoji-placeholder position-relative"
@@ -289,7 +288,7 @@ export default {
               class="js-toggle-emoji-menu emoji-menu-toggle-button btn"
               @click="showEmojiMenu"
             >
-              <span v-html="emojiTag"></span>
+              <span v-html="emojiTag /* eslint-disable-line vue/no-v-html */"></span>
               <span
                 v-show="noEmoji"
                 class="js-no-emoji-placeholder no-emoji-placeholder position-relative"

app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { sprintf, s__ } from '~/locale';
 
 export default {
@@ -27,5 +26,5 @@ export default {
 </script>
 
 <template>
-  <div data-testid="spentOnlyPane" v-html="timeSpent"></div>
+  <div data-testid="spentOnlyPane" v-html="timeSpent /* eslint-disable-line vue/no-v-html */"></div>
 </template>

app/assets/javascripts/snippets/components/snippet_description_view.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import MarkdownFieldView from '~/vue_shared/components/markdown/field_view.vue';
 
 export default {
@@ -17,6 +16,9 @@ export default {
 </script>
 <template>
   <markdown-field-view class="snippet-description" data-qa-selector="snippet_description_content">
-    <div class="md js-snippet-description" v-html="description"></div>
+    <div
+      class="md js-snippet-description"
+      v-html="description /* eslint-disable-line vue/no-v-html */"
+    ></div>
   </markdown-field-view>
 </template>

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { s__, n__ } from '~/locale';
 
 export default {
@@ -32,11 +31,16 @@ export default {
 </script>
 <template>
   <section class="mr-info-list gl-ml-7 gl-pb-5">
-    <p v-if="relatedLinks.closing">{{ closesText }} <span v-html="relatedLinks.closing"></span></p>
+    <p v-if="relatedLinks.closing">
+      {{ closesText }}
+      <span v-html="relatedLinks.closing /* eslint-disable-line vue/no-v-html */"></span>
+    </p>
     <p v-if="relatedLinks.mentioned">
       {{ n__('mrWidget|Mentions issue', 'mrWidget|Mentions issues', relatedLinks.mentionedCount) }}
-      <span v-html="relatedLinks.mentioned"></span>
+      <span v-html="relatedLinks.mentioned /* eslint-disable-line vue/no-v-html */"></span>
+    </p>
+    <p v-if="relatedLinks.assignToMe">
+      <span v-html="relatedLinks.assignToMe /* eslint-disable-line vue/no-v-html */"></span>
     </p>
-    <p v-if="relatedLinks.assignToMe"><span v-html="relatedLinks.assignToMe"></span></p>
   </section>
 </template>

app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue

 <script>
-/* eslint-disable vue/no-v-html, @gitlab/require-string-literal-i18n-helpers */
+/* eslint-disable @gitlab/require-string-literal-i18n-helpers */
 import { GlButton } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { __, n__, sprintf, s__ } from '~/locale';
@@ -89,7 +89,10 @@ export default {
       />
       <span v-if="expanded">{{ __('Collapse') }}</span>
       <span v-else>
-        <span class="vertical-align-middle" v-html="message"></span>
+        <span
+          class="vertical-align-middle"
+          v-html="message /* eslint-disable-line vue/no-v-html */"
+        ></span>
         <gl-button variant="link" class="modify-message-button">
           {{ modifyLinkMessage }}
         </gl-button>

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButton, GlSkeletonLoader } from '@gitlab/ui';
 import { escape } from 'lodash';
 import createFlash from '~/flash';
@@ -171,7 +170,7 @@ export default {
           v-if="!rebaseInProgress && !canPushToSourceBranch"
           class="gl-font-weight-bold gl-ml-0!"
           data-testid="rebase-message"
-          v-html="fastForwardMergeText"
+          v-html="fastForwardMergeText /* eslint-disable-line vue/no-v-html */"
         ></span>
         <div
           v-if="!rebaseInProgress && canPushToSourceBranch && !isMakingRequest"

app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButton, GlSprintf, GlLink } from '@gitlab/ui';
 import emptyStateSVG from 'icons/_mr_widget_empty_state.svg';
 import { helpPagePath } from '~/helpers/help_page_helper';
@@ -30,7 +29,7 @@ export default {
       <div
         class="artwork col-md-5 order-md-last col-12 text-center d-flex justify-content-center align-items-center"
       >
-        <span v-html="emptyStateSVG"></span>
+        <span v-html="emptyStateSVG /* eslint-disable-line vue/no-v-html */"></span>
       </div>
       <div class="text col-md-7 order-md-first col-12">
         <p class="highlight">

app/assets/javascripts/vue_shared/alert_details/components/system_notes/system_note.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlIcon } from '@gitlab/ui';
 import NoteHeader from '~/notes/components/note_header.vue';
 
@@ -40,7 +39,7 @@ export default {
 
       <div class="note-header">
         <note-header :author="noteAuthor" :created-at="note.createdAt" :note-id="note.id">
-          <span v-html="note.bodyHtml"></span>
+          <span v-html="note.bodyHtml /* eslint-disable-line vue/no-v-html */"></span>
         </note-header>
       </div>
     </div>

app/assets/javascripts/vue_shared/components/awards_list.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlIcon, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { groupBy } from 'lodash';
 import EmojiPicker from '~/emoji/components/picker.vue';
@@ -180,7 +179,11 @@ export default {
       @click="handleAward(awardList.name)"
     >
       <template #emoji>
-        <span class="award-emoji-block" data-testid="award-html" v-html="awardList.html"></span>
+        <span
+          class="award-emoji-block"
+          data-testid="award-html"
+          v-html="awardList.html /* eslint-disable-line vue/no-v-html */"
+        ></span>
       </template>
       <span class="js-counter">{{ awardList.list.length }}</span>
     </gl-button>

app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlIcon } from '@gitlab/ui';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { HIGHLIGHT_CLASS_NAME } from './constants';
@@ -75,7 +74,9 @@ export default {
         </a>
       </div>
       <div class="blob-content">
-        <pre class="code highlight"><code :data-blob-hash="blobHash" v-html="content"></code></pre>
+        <pre
+          class="code highlight"
+        ><code :data-blob-hash="blobHash" v-html="content /* eslint-disable-line vue/no-v-html */"></code></pre>
       </div>
     </div>
   </div>

app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
@@ -110,6 +109,10 @@ export default {
 <template>
   <div ref="markdownPreview" class="md-previewer" data-testid="md-previewer">
     <gl-skeleton-loading v-if="isLoading" />
-    <div v-else class="md gl-ml-auto gl-mr-auto" v-html="previewContent"></div>
+    <div
+      v-else
+      class="md gl-ml-auto gl-mr-auto"
+      v-html="previewContent /* eslint-disable-line vue/no-v-html */"
+    ></div>
   </div>
 </template>

app/assets/javascripts/vue_shared/components/header_ci_component.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlTooltipDirective, GlLink, GlButton, GlTooltip } from '@gitlab/ui';
 import { glEmojiTag } from '../../emoji';
 import { __, sprintf } from '../../locale';
@@ -131,7 +130,7 @@ export default {
           v-if="statusTooltipHTML"
           :ref="$options.EMOJI_REF"
           :data-testid="message"
-          v-html="statusTooltipHTML"
+          v-html="statusTooltipHTML /* eslint-disable-line vue/no-v-html */"
         ></span>
       </template>
     </section>

app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import '~/commons/bootstrap';
 import { GlIcon, GlTooltip, GlTooltipDirective, GlButton } from '@gitlab/ui';
 import IssueDueDate from '~/boards/components/issue_due_date.vue';
@@ -85,7 +84,7 @@ export default {
           />
         </div>
         <gl-tooltip :target="() => $refs.iconElementXL">
-          <span v-html="stateTitle"></span>
+          <span v-html="stateTitle /* eslint-disable-line vue/no-v-html */"></span>
         </gl-tooltip>
         <gl-icon
           v-if="confidential"
@@ -111,7 +110,7 @@ export default {
             class="item-path-area item-path-id d-flex align-items-center mr-2 mt-2 mt-xl-0 ml-xl-2"
           >
             <gl-tooltip :target="() => this.$refs.iconElement">
-              <span v-html="stateTitle"></span>
+              <span v-html="stateTitle /* eslint-disable-line vue/no-v-html */"></span>
             </gl-tooltip>
             <span v-gl-tooltip :title="itemPath" class="path-id-text d-inline-block">{{
               itemPath

app/assets/javascripts/vue_shared/components/markdown/field.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlIcon } from '@gitlab/ui';
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
@@ -324,14 +323,20 @@ export default {
         v-show="previewMarkdown"
         ref="markdown-preview"
         class="js-vue-md-preview md md-preview-holder"
-        v-html="markdownPreview"
+        v-html="markdownPreview /* eslint-disable-line vue/no-v-html */"
       ></div>
     </template>
     <template v-if="previewMarkdown && !markdownPreviewLoading">
-      <div v-if="referencedCommands" class="referenced-commands" v-html="referencedCommands"></div>
+      <div
+        v-if="referencedCommands"
+        class="referenced-commands"
+        v-html="referencedCommands /* eslint-disable-line vue/no-v-html */"
+      ></div>
       <div v-if="shouldShowReferencedUsers" class="referenced-users">
         <gl-icon name="warning-solid" />
-        <span v-html="addMultipleToDiscussionWarning"></span>
+        <span
+          v-html="addMultipleToDiscussionWarning /* eslint-disable-line vue/no-v-html */"
+        ></span>
       </div>
     </template>
   </div>

app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlLink, GlIcon } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { __, sprintf } from '~/locale';
@@ -92,7 +91,9 @@ export default {
     <gl-icon v-if="!isLockedAndConfidential" :name="warningIcon" :size="16" class="icon inline" />
 
     <span v-if="isLockedAndConfidential" ref="lockedAndConfidential">
-      <span v-html="confidentialAndLockedDiscussionText"></span>
+      <span
+        v-html="confidentialAndLockedDiscussionText /* eslint-disable-line vue/no-v-html */"
+      ></span>
       {{
         __("People without permission will never get a notification and won't be able to comment.")
       }}

app/assets/javascripts/vue_shared/components/notes/system_note.vue

 <script>
-/* eslint-disable vue/no-v-html */
-
 /**
  * Common component to render a system note, icon and user information.
  *
@@ -106,7 +104,7 @@ export default {
     :class="{ target: isTargetNote, 'pr-0': shouldShowDescriptionVersion }"
     class="note system-note note-wrapper"
   >
-    <div class="timeline-icon" v-html="iconHtml"></div>
+    <div class="timeline-icon" v-html="iconHtml /* eslint-disable-line vue/no-v-html */"></div>
     <div class="timeline-content">
       <div class="note-header">
         <note-header :author="note.author" :created-at="note.created_at" :note-id="note.id">

app/assets/javascripts/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs.vue

@@ -265,8 +265,7 @@ export default {
 <template>
   <div class="incident-management-list">
     <gl-alert v-if="showErrorMsg" variant="danger" @dismiss="$emit('error-alert-dismissed')">
-      <!-- eslint-disable-next-line vue/no-v-html -->
-      <p v-html="serverErrorMessage || i18n.errorMsg"></p>
+      <p v-html="serverErrorMessage || i18n.errorMsg /* eslint-disable-line vue/no-v-html */"></p>
     </gl-alert>
 
     <div

app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButton, GlIcon } from '@gitlab/ui';
 import { isString } from 'lodash';
 import highlight from '~/lib/utils/highlight';
@@ -61,7 +60,7 @@ export default {
       <div
         :title="project.name"
         class="js-project-name text-truncate"
-        v-html="highlightedProjectName"
+        v-html="highlightedProjectName /* eslint-disable-line vue/no-v-html */"
       ></div>
     </div>
   </gl-button>

app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlPopover, GlLink, GlSkeletonLoader, GlIcon } from '@gitlab/ui';
 import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue';
 import { glEmojiTag } from '../../../emoji';
@@ -83,7 +82,11 @@ export default {
           <div class="gl-text-gray-500">
             <div v-if="user.bio" class="gl-display-flex gl-mb-2">
               <gl-icon name="profile" class="gl-text-gray-400 gl-flex-shrink-0" />
-              <span ref="bio" class="gl-ml-2 gl-overflow-hidden" v-html="user.bioHtml"></span>
+              <span
+                ref="bio"
+                class="gl-ml-2 gl-overflow-hidden"
+                v-html="user.bioHtml /* eslint-disable-line vue/no-v-html */"
+              ></span>
             </div>
             <div v-if="user.workInformation" class="gl-display-flex gl-mb-2">
               <gl-icon name="work" class="gl-text-gray-400 gl-flex-shrink-0" />
@@ -95,7 +98,7 @@ export default {
             <span class="gl-ml-2">{{ user.location }}</span>
           </div>
           <div v-if="statusHtml" class="js-user-status gl-mt-3">
-            <span v-html="statusHtml"></span>
+            <span v-html="statusHtml /* eslint-disable-line vue/no-v-html */"></span>
           </div>
           <div v-if="user.bot" class="gl-text-blue-500">
             <gl-icon name="question" />

ee/app/assets/javascripts/analytics/code_review_analytics/components/merge_request_table.vue

@@ -118,8 +118,7 @@ export default {
 
     <template #cell(review_time)="{ value }">
       <template v-if="showReviewTime(value)">
-        <!-- eslint-disable-next-line vue/no-v-html-->
-        <span v-html="formatReviewTime(value)"></span>
+        <span v-html="formatReviewTime(value) /* eslint-disable-line vue/no-v-html */"></span>
       </template>
       <template v-else> &ndash; </template>
     </template>

ee/app/assets/javascripts/dependencies/components/dependency_list_job_failed_alert.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlAlert } from '@gitlab/ui';
 import { __, sprintf, s__ } from '~/locale';
 
@@ -43,6 +42,6 @@ export default {
     @dismiss="$emit('close')"
     v-on="$listeners"
   >
-    <span v-html="$options.message"></span>
+    <span v-html="$options.message /* eslint-disable-line vue/no-v-html */"></span>
   </gl-alert>
 </template>

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

 <script>
-/* eslint-disable vue/no-v-html */
 import {
   GlAlert,
   GlDropdown,
@@ -129,7 +128,10 @@ export default {
         </gl-dropdown>
       </div>
       <h3 ref="title" class="page-title">{{ iteration.title }}</h3>
-      <div ref="description" v-html="iteration.descriptionHtml"></div>
+      <div
+        ref="description"
+        v-html="iteration.descriptionHtml /* eslint-disable-line vue/no-v-html */"
+      ></div>
       <burn-charts
         :start-date="iteration.startDate"
         :due-date="iteration.dueDate"

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

 <script>
-/* eslint-disable vue/no-v-html */
 import {
   GlAlert,
   GlBadge,
@@ -221,7 +220,10 @@ export default {
         </gl-dropdown>
       </div>
       <h3 ref="title" class="page-title">{{ iteration.title }}</h3>
-      <div ref="description" v-html="iteration.descriptionHtml"></div>
+      <div
+        ref="description"
+        v-html="iteration.descriptionHtml /* eslint-disable-line vue/no-v-html */"
+      ></div>
       <burn-charts
         :start-date="iteration.startDate"
         :due-date="iteration.dueDate"

ee/app/assets/javascripts/operations/components/dashboard/project.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { isEmpty } from 'lodash';
 import { mapActions } from 'vuex';
 import Alerts from 'ee/vue_shared/dashboards/components/alerts.vue';
@@ -128,7 +127,7 @@ export default {
     <div
       v-if="project.upgrade_required"
       class="dashboard-card-body card-body bg-secondary"
-      v-html="unlicensedMessage"
+      v-html="unlicensedMessage /* eslint-disable-line vue/no-v-html */"
     ></div>
 
     <div v-else :class="cardClasses" class="dashboard-card-body card-body">

ee/app/assets/javascripts/related_items_tree/components/tree_item_remove_modal.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlModal } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapState, mapActions } from 'vuex';
@@ -66,6 +65,6 @@ export default {
       })
     "
   >
-    <p v-html="modalBody"></p>
+    <p v-html="modalBody /* eslint-disable-line vue/no-v-html */"></p>
   </gl-modal>
 </template>

ee/app/assets/javascripts/sidebar/components/ancestors_tree/ancestors_tree.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlLoadingIcon, GlLink, GlTooltip, GlIcon } from '@gitlab/ui';
 import { escape } from 'lodash';
 
@@ -71,7 +70,7 @@ export default {
     </div>
 
     <gl-tooltip :target="() => $refs.sidebarIcon" placement="left" boundary="viewport">
-      <span v-html="tooltipText"></span>
+      <span v-html="tooltipText /* eslint-disable-line vue/no-v-html */"></span>
     </gl-tooltip>
     <div class="title hide-collapsed gl-mb-2">{{ __('Ancestors') }}</div>
 

ee/app/assets/javascripts/vue_merge_request_widget/components/merge_immediately_confirmation_dialog.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlModal, GlButton } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { __, sprintf } from '~/locale';
@@ -59,7 +58,7 @@ export default {
     :title="__('Merge immediately')"
     @shown="focusCancelButton"
   >
-    <p v-html="bodyText"></p>
+    <p v-html="bodyText /* eslint-disable-line vue/no-v-html */"></p>
     <p>{{ __('Are you sure you want to merge immediately?') }}</p>
     <template #modal-footer>
       <gl-button ref="cancelButton" @click="cancel">{{ __('Cancel') }}</gl-button>