Add latest changes from gitlab-org/gitlab@master

.eslintrc.yml

@@ -36,7 +36,7 @@ rules:
   # Disabled for now, to make the plugin-vue 4.5 -> 5.0 update smoother
   vue/no-confusing-v-for-v-if: error
   vue/no-use-v-if-with-v-for: off
-  vue/no-v-html: off
+  vue/no-v-html: error
   vue/use-v-on-exact: off
   # all offenses of no-jquery/no-animate-toggle are false positives ( $toast.show() )
   no-jquery/no-animate-toggle: off

.scss-lint.yml

@@ -7,7 +7,7 @@ scss_files:
 
 exclude:
   - 'app/assets/stylesheets/pages/emojis.scss'
-  - 'app/assets/stylesheets/startup/startup-general.scss'
+  - 'app/assets/stylesheets/startup/startup-*.scss'
 
 linters:
   # Reports when you use improper spacing around ! (the "bang") in !default,

app/assets/javascripts/alert_management/components/alert_details.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import * as Sentry from '@sentry/browser';
 import {
   GlAlert,

app/assets/javascripts/alert_management/components/alert_management_table.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import {
   GlLoadingIcon,
   GlTable,

app/assets/javascripts/alert_management/components/system_notes/system_note.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import NoteHeader from '~/notes/components/note_header.vue';
 import { spriteIcon } from '~/lib/utils/common_utils';
 

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { escape, debounce } from 'lodash';
 import { mapActions, mapState } from 'vuex';
 import { GlLoadingIcon, GlFormInput, GlFormGroup } from '@gitlab/ui';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlButton } from '@gitlab/ui';
 import NoteableNote from '~/notes/components/noteable_note.vue';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { GlModal, GlModalDirective, GlButton } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';

app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { GlPopover, GlSprintf, GlButton } from '@gitlab/ui';
 import { parseBoolean, scrollToElement, setCookie, getCookie } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';

app/assets/javascripts/blob/utils.js

 import Editor from '~/editor/editor_lite';
 
 export function initEditorLite({ el, ...args }) {
-  if (!el) {
-    throw new Error(`"el" parameter is required to initialize Editor`);
-  }
   const editor = new Editor({
     scrollbar: {
       alwaysConsumeMouseWheel: false,

app/assets/javascripts/boards/components/modal/empty_state.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { __, sprintf } from '~/locale';
 import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { escape } from 'lodash';
 import { GlModal, GlButton, GlDeprecatedButton, GlFormInput, GlSprintf } from '@gitlab/ui';
 import SplitButton from '~/vue_shared/components/split_button.vue';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { GlModal } from '@gitlab/ui';
 import trackUninstallButtonClickMixin from 'ee_else_ce/clusters/mixins/track_uninstall_button_click';
 import { sprintf, s__ } from '~/locale';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { GlModal } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import { ELASTIC_STACK } from '../constants';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { createNamespacedHelpers, mapState, mapActions, mapGetters } from 'vuex';
 import { escape } from 'lodash';
 import { GlFormInput, GlFormCheckbox } from '@gitlab/ui';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { GlFormInput, GlButton } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapState, mapActions } from 'vuex';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg';
 import { GlIcon } from '@gitlab/ui';
 

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { GlIcon } from '@gitlab/ui';
 import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 import iconBranch from '../svg/icon_branch.svg';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { GlIcon } from '@gitlab/ui';
 import iconBuildStatus from '../svg/icon_build_status.svg';
 import iconBranch from '../svg/icon_branch.svg';

app/assets/javascripts/design_management/components/design_notes/design_note.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { ApolloMutation } from 'vue-apollo';
 import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import updateNoteMutation from '../../graphql/mutations/update_note.mutation.graphql';

app/assets/javascripts/design_management_legacy/components/design_notes/design_note.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { ApolloMutation } from 'vue-apollo';
 import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import updateNoteMutation from '../../graphql/mutations/update_note.mutation.graphql';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapActions } from 'vuex';
 import { GlButtonGroup, GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { escape } from 'lodash';
 import { GlLoadingIcon } from '@gitlab/ui';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { escape } from 'lodash';
 import { mapActions, mapGetters } from 'vuex';
 import { GlDeprecatedButton, GlTooltipDirective, GlLoadingIcon, GlIcon } from '@gitlab/ui';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlTooltipDirective } from '@gitlab/ui';
 import DiffTableCell from './diff_table_cell.vue';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapGetters } from 'vuex';
 import { escape } from 'lodash';
 import { GlButton } from '@gitlab/ui';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapActions, mapGetters, mapState } from 'vuex';
 import $ from 'jquery';
 import { GlTooltipDirective } from '@gitlab/ui';

app/assets/javascripts/editor/constants.js

+import { __ } from '~/locale';
+
+export const EDITOR_LITE_INSTANCE_ERROR_NO_EL = __(
+  '"el" parameter is required for createInstance()',
+);
+
+export const URI_PREFIX = 'gitlab';

app/assets/javascripts/editor/editor_lite.js

@@ -5,13 +5,14 @@ import { defaultEditorOptions } from '~/ide/lib/editor_options';
 import { registerLanguages } from '~/ide/utils';
 import { joinPaths } from '~/lib/utils/url_utility';
 import { clearDomElement } from './utils';
+import { EDITOR_LITE_INSTANCE_ERROR_NO_EL, URI_PREFIX } from './constants';
 
 export default class Editor {
   constructor(options = {}) {
     this.editorEl = null;
     this.blobContent = '';
     this.blobPath = '';
-    this.instance = null;
+    this.instances = [];
     this.model = null;
     this.options = {
       extraEditorClassName: 'gl-editor-lite',
@@ -40,31 +41,51 @@ export default class Editor {
    * @param {string} options.blobContent The content to initialize the monacoEditor.
    * @param {string} options.blobGlobalId This is used to help globally identify monaco instances that are created with the same blobPath.
    */
-  createInstance({ el = undefined, blobPath = '', blobContent = '', blobGlobalId = '' } = {}) {
-    if (!el) return;
+  createInstance({
+    el = undefined,
+    blobPath = '',
+    blobContent = '',
+    blobGlobalId = '',
+    ...instanceOptions
+  } = {}) {
+    if (!el) {
+      throw new Error(EDITOR_LITE_INSTANCE_ERROR_NO_EL);
+    }
     this.editorEl = el;
     this.blobContent = blobContent;
     this.blobPath = blobPath;
 
     clearDomElement(this.editorEl);
 
-    const uriFilePath = joinPaths('gitlab', blobGlobalId, blobPath);
+    const uriFilePath = joinPaths(URI_PREFIX, blobGlobalId, blobPath);
 
-    this.model = monacoEditor.createModel(this.blobContent, undefined, Uri.file(uriFilePath));
+    const model = monacoEditor.createModel(this.blobContent, undefined, Uri.file(uriFilePath));
 
     monacoEditor.onDidCreateEditor(this.renderEditor.bind(this));
 
-    this.instance = monacoEditor.create(this.editorEl, this.options);
-    this.instance.setModel(this.model);
+    const instance = monacoEditor.create(this.editorEl, {
+      ...this.options,
+      ...instanceOptions,
+    });
+    instance.setModel(model);
+    instance.onDidDispose(() => {
+      const index = this.instances.findIndex(inst => inst === instance);
+      this.instances.splice(index, 1);
+      model.dispose();
+    });
+
+    // Reference to the model on the editor level will go away in
+    // https://gitlab.com/gitlab-org/gitlab/-/issues/241023
+    // After that, the references to the model will be routed through
+    // instance exclusively
+    this.model = model;
+
+    this.instances.push(instance);
+    return instance;
   }
 
   dispose() {
-    if (this.model) {
-      this.model.dispose();
-      this.model = null;
-    }
-
-    return this.instance && this.instance.dispose();
+    this.instances.forEach(instance => instance.dispose());
   }
 
   renderEditor() {
@@ -86,28 +107,52 @@ export default class Editor {
     monacoEditor.setModelLanguage(this.model, id);
   }
 
+  /**
+   * @deprecated do not use .getValue() directly on the editor.
+   * This proxy-method will be removed in https://gitlab.com/gitlab-org/gitlab/-/issues/241025
+   * Rather use it on the exact instance
+   */
   getValue() {
-    return this.instance.getValue();
+    return this.instances[0].getValue();
   }
 
+  /**
+   * @deprecated do not use .setValue() directly on the editor.
+   * This proxy-method will be removed in https://gitlab.com/gitlab-org/gitlab/-/issues/241025
+   * Rather use it on the exact instance
+   */
   setValue(val) {
-    this.instance.setValue(val);
+    this.instances[0].setValue(val);
   }
 
+  /**
+   * @deprecated do not use .focus() directly on the editor.
+   * This proxy-method will be removed in https://gitlab.com/gitlab-org/gitlab/-/issues/241025
+   * Rather use it on the exact instance
+   */
   focus() {
-    this.instance.focus();
+    this.instances[0].focus();
   }
 
-  navigateFileStart() {
-    this.instance.setPosition(new Position(1, 1));
+  /**
+   * @deprecated do not use .updateOptions() directly on the editor.
+   * This proxy-method will be removed in https://gitlab.com/gitlab-org/gitlab/-/issues/241025
+   * Rather use it on the exact instance
+   */
+  updateOptions(options = {}) {
+    this.instances[0].updateOptions(options);
   }
 
-  updateOptions(options = {}) {
-    this.instance.updateOptions(options);
+  navigateFileStart() {
+    this.instances[0].setPosition(new Position(1, 1));
   }
 
-  use(exts = []) {
+  use(exts = [], instance = null) {
     const extensions = Array.isArray(exts) ? exts : [exts];
-    Object.assign(this, ...extensions);
+    if (instance) {
+      Object.assign(instance, ...extensions);
+    } else {
+      this.instances.forEach(inst => Object.assign(inst, ...extensions));
+    }
   }
 }

app/assets/javascripts/editor/editor_markdown_ext.js

 export default {
   getSelectedText(selection = this.getSelection()) {
     const { startLineNumber, endLineNumber, startColumn, endColumn } = selection;
-    const valArray = this.instance.getValue().split('\n');
+    const valArray = this.getValue().split('\n');
     let text = '';
     if (startLineNumber === endLineNumber) {
       text = valArray[startLineNumber - 1].slice(startColumn - 1, endColumn - 1);
@@ -20,20 +20,16 @@ export default {
     return text;
   },
 
-  getSelection() {
-    return this.instance.getSelection();
-  },
-
   replaceSelectedText(text, select = undefined) {
     const forceMoveMarkers = !select;
-    this.instance.executeEdits('', [{ range: this.getSelection(), text, forceMoveMarkers }]);
+    this.executeEdits('', [{ range: this.getSelection(), text, forceMoveMarkers }]);
   },
 
   moveCursor(dx = 0, dy = 0) {
-    const pos = this.instance.getPosition();
+    const pos = this.getPosition();
     pos.column += dx;
     pos.lineNumber += dy;
-    this.instance.setPosition(pos);
+    this.setPosition(pos);
   },
 
   /**
@@ -94,6 +90,6 @@ export default {
       .setStartPosition(newStartLineNumber, newStartColumn)
       .setEndPosition(newEndLineNumber, newEndColumn);
 
-    this.instance.setSelection(newSelection);
+    this.setSelection(newSelection);
   },
 };

app/assets/javascripts/environments/components/confirm_rollback_modal.vue

 <script>
+/* eslint-disable vue/no-v-html */
 /**
  * Render modal to confirm rollback/redeploy.
  */

app/assets/javascripts/environments/components/stop_environment_modal.vue

 <script>
-/* eslint-disable @gitlab/vue-require-i18n-strings */
+/* eslint-disable @gitlab/vue-require-i18n-strings, vue/no-v-html */
 import { GlTooltipDirective } from '@gitlab/ui';
 import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import { s__, sprintf } from '~/locale';

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';

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

 <script>
-/* eslint-disable vue/require-default-prop */
+/* eslint-disable vue/require-default-prop, vue/no-v-html */
 import Identicon from '~/vue_shared/components/identicon.vue';
 import highlight from '~/lib/utils/highlight';
 import { truncateNamespace } from '~/lib/utils/text_utility';

app/assets/javascripts/groups/components/group_item.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { GlLoadingIcon, GlBadge } from '@gitlab/ui';
 import { visitUrl } from '../../lib/utils/url_utility';
 import tooltip from '../../vue_shared/directives/tooltip';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { escape } from 'lodash';
 import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
 import { sprintf, s__ } from '~/locale';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapState } from 'vuex';
 
 export default {

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapActions } from 'vuex';
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapActions, mapState } from 'vuex';
 import { throttle } from 'lodash';
 import { GlIcon } from '@gitlab/ui';

app/assets/javascripts/ide/components/pipelines/list.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { escape } from 'lodash';
 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';

app/assets/javascripts/ide/components/terminal/empty_state.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { GlLoadingIcon } from '@gitlab/ui';
 
 export default {

app/assets/javascripts/integrations/edit/components/dynamic_field.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapGetters } from 'vuex';
 import { capitalize, lowerCase, isEmpty } from 'lodash';
 import { GlFormGroup, GlFormCheckbox, GlFormInput, GlFormSelect, GlFormTextarea } from '@gitlab/ui';

app/assets/javascripts/issuables_list/components/issuable.vue

 <script>
+/* eslint-disable vue/no-v-html */
 /*
  * This is tightly coupled to projects/issues/_issue.html.haml,
  * any changes done to the haml need to be reflected here.

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

 <script>
+/* eslint-disable vue/no-v-html */
 import $ from 'jquery';
 import { s__, sprintf } from '~/locale';
 import { deprecatedCreateFlash as createFlash } from '~/flash';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { __, sprintf } from '~/locale';
 
 export default {

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

 <script>
+/* eslint-disable vue/no-v-html */
 import animateMixin from '../mixins/animate';
 import eventHub from '../event_hub';
 import tooltip from '../../vue_shared/directives/tooltip';

app/assets/javascripts/jobs/components/job_app.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { throttle, isEmpty } from 'lodash';
 import { mapGetters, mapState, mapActions } from 'vuex';
 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';

app/assets/javascripts/jobs/components/job_log_controllers.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import { polyfillSticky } from '~/lib/utils/sticky';
 import { numberToHumanSize } from '~/lib/utils/number_utils';

app/assets/javascripts/jobs/components/manual_variables_form.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { uniqueId } from 'lodash';
 import { mapActions } from 'vuex';
 import { GlButton } from '@gitlab/ui';

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';
 

app/assets/javascripts/monitoring/components/group_empty_state.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { GlEmptyState } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import { metricStates } from '../constants';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import marked from 'marked';
 import { sanitize } from 'dompurify';
 import katex from 'katex';

app/assets/javascripts/notebook/cells/output/html.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { sanitize } from 'dompurify';
 import Prompt from '../prompt.vue';
 

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapActions } from 'vuex';
 import { escape } from 'lodash';
 

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapState, mapActions } from 'vuex';
 import { GlSkeletonLoading } from '@gitlab/ui';
 import DiffFileHeader from '~/diffs/components/diff_file_header.vue';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { GlButton, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapActions, mapGetters, mapState } from 'vuex';
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapGetters, mapActions, mapState } from 'vuex';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import eventHub from '../event_hub';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapActions } from 'vuex';
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapGetters } from 'vuex';
 import { __, sprintf } from '~/locale';
 

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

 <script>
+/* eslint-disable vue/no-v-html */
 import $ from 'jquery';
 import { mapGetters, mapActions } from 'vuex';
 import { escape } from 'lodash';

app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { escape } from 'lodash';
 import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import { s__, sprintf } from '~/locale';

app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { escape } from 'lodash';
 import { GlModal, GlButton, GlFormInput } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';

app/assets/javascripts/pages/admin/users/components/user_operation_confirmation_modal.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { GlModal } from '@gitlab/ui';
 import { sprintf } from '~/locale';
 

app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import axios from '~/lib/utils/axios_utils';
 
 import { deprecatedCreateFlash as Flash } from '~/flash';

app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list_item.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import {
   GlLink,
   GlButton,

app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import Vue from 'vue';
 import Cookies from 'js-cookie';
 import Translate from '../../../../../vue_shared/translate';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { glEmojiTag } from '~/emoji';
 
 import AddRequest from './add_request.vue';

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';

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';
 

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { isEmpty } from 'lodash';
 import { GlLink } from '@gitlab/ui';
 import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import iconTimerSvg from 'icons/_icon_timer.svg';
 import '~/lib/utils/datetime_utility';
 import tooltip from '~/vue_shared/directives/tooltip';

app/assets/javascripts/profile/account/components/delete_account_modal.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import { __, s__, sprintf } from '~/locale';
 import csrf from '~/lib/utils/csrf';

app/assets/javascripts/profile/account/components/update_username.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { escape } from 'lodash';
 import axios from '~/lib/utils/axios_utils';
 import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';

app/assets/javascripts/projects/experiment_new_project_creation/components/app.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { GlBreadcrumb, GlIcon } from '@gitlab/ui';
 import WelcomePage from './welcome.vue';
 import LegacyContainer from './legacy_container.vue';

app/assets/javascripts/projects/experiment_new_project_creation/components/welcome.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { GlPopover } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import LegacyContainer from './legacy_container.vue';

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 ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import axios from '~/lib/utils/axios_utils';

app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { initial, first, last } from 'lodash';
 
 export default {

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { GlButton, GlFormInput, GlFormGroup } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { isEmpty } from 'lodash';
 import $ from 'jquery';
 import { slugify } from '~/lib/utils/text_utility';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import defaultAvatarUrl from 'images/no_avatar.png';
 import { sprintf, s__ } from '~/locale';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
 import { GlLink, GlLoadingIcon } from '@gitlab/ui';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { escapeRegExp } from 'lodash';
 import {
   GlBadge,

app/assets/javascripts/self_monitor/components/self_monitor_form.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import Vue from 'vue';
 import { GlFormGroup, GlDeprecatedButton, GlModal, GlToast, GlToggle } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';

app/assets/javascripts/serverless/components/functions.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { GlLink, GlLoadingIcon } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';

app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import $ from 'jquery';
 import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
 import { GlModal, GlTooltipDirective, GlIcon } from '@gitlab/ui';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { sprintf, s__ } from '../../../locale';
 import { joinPaths } from '~/lib/utils/url_utility';
 

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 {

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 {

app/assets/javascripts/static_site_editor/services/parse_source_file.js

@@ -30,7 +30,7 @@ const parseSourceFile = raw => {
     editable = parse(editable.raw);
   };
 
-  const syncBodyToRaw = () => {
+  const refreshEditableRaw = () => {
     editable.raw = `${editable.header}${editable.spacing}${editable.body}`;
   };
 
@@ -39,12 +39,19 @@ const parseSourceFile = raw => {
     editable[editableKey] = newVal;
 
     if (isBodyToRaw) {
-      syncBodyToRaw();
+      refreshEditableRaw();
     }
 
     syncEditable();
   };
 
+  const frontMatter = () => editable.header;
+
+  const setFrontMatter = val => {
+    editable.header = val;
+    refreshEditableRaw();
+  };
+
   const content = (isBody = false) => {
     const editableKey = isBody ? 'body' : 'raw';
     return editable[editableKey];
@@ -56,6 +63,8 @@ const parseSourceFile = raw => {
   editable = parse(raw);
 
   return {
+    frontMatter,
+    setFrontMatter,
     content,
     isModified,
     sync,

app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue

 <script>
+/* eslint-disable vue/no-v-html */
 import { sprintf, s__ } from '~/locale';
 import statusCodes from '~/lib/utils/http_status';
 import { bytesToMiB } from '~/lib/utils/number_utils';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import Mousetrap from 'mousetrap';
 import { escape } from 'lodash';
 import { GlIcon } from '@gitlab/ui';

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

 <script>
-/* eslint-disable vue/require-default-prop */
+/* eslint-disable vue/require-default-prop, vue/no-v-html */
 import { GlIcon, GlLink, GlLoadingIcon, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
 import mrWidgetPipelineMixin from 'ee_else_ce/vue_merge_request_widget/mixins/mr_widget_pipeline';
 import { s__ } from '~/locale';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { s__ } from '~/locale';
 
 export default {

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { __, n__, sprintf, s__ } from '~/locale';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { GlLoadingIcon } from '@gitlab/ui';
 import { escape } from 'lodash';
 import simplePoll from '../../../lib/utils/simple_poll';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import emptyStateSVG from 'icons/_mr_widget_empty_state.svg';
 
 export default {

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { isEmpty } from 'lodash';
 import { GlIcon, GlButton, GlSprintf, GlLink } from '@gitlab/ui';
 import successSvg from 'icons/_icon_status_success.svg';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import { groupBy } from 'lodash';
 import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';

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

 <script>
+/* eslint-disable vue/no-v-html */
 import MarkdownFieldView from '~/vue_shared/components/markdown/field_view.vue';
 import ViewerMixin from './mixins';
 import { handleBlobRichViewer } from '~/blob/viewer';