Add latest changes from gitlab-org/gitlab@master

.eslintrc.yml

@@ -113,6 +113,8 @@ rules:
     - error
     - selector: ImportSpecifier[imported.name='GlSkeletonLoading']
       message: 'Migrate to GlSkeletonLoader, or import GlDeprecatedSkeletonLoading.'
+    - selector: ImportSpecifier[imported.name='GlSafeHtmlDirective']
+      message: 'Use directive at ~/vue_shared/directives/safe_html.js instead.'
   # See https://gitlab.com/gitlab-org/gitlab/-/issues/360551
   vue/multi-word-component-names: off
   unicorn/prefer-dom-node-dataset:

app/assets/javascripts/admin/broadcast_messages/components/messages_table.vue

@@ -1,5 +1,6 @@
 <script>
-import { GlButton, GlTableLite, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlButton, GlTableLite } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
@@ -12,7 +13,7 @@ export default {
     GlTableLite,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   mixins: [glFeatureFlagsMixin()],
   i18n: {

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

@@ -1,7 +1,8 @@
 <script>
-import { GlLoadingIcon, GlFormInput, GlFormGroup, GlButton, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlLoadingIcon, GlFormInput, GlFormGroup, GlButton } from '@gitlab/ui';
 import { escape, debounce } from 'lodash';
 import { mapActions, mapState } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { createAlert, VARIANT_INFO } from '~/flash';
 import { s__, sprintf } from '~/locale';
 import createEmptyBadge from '../empty_badge';
@@ -19,7 +20,7 @@ export default {
     GlFormGroup,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   props: {
     isEditing: {

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

@@ -1,6 +1,7 @@
 <script>
-import { GlButton, GlSafeHtmlDirective, GlBadge } from '@gitlab/ui';
+import { GlButton, GlBadge } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import NoteableNote from '~/notes/components/noteable_note.vue';
 import PublishButton from './publish_button.vue';
@@ -13,7 +14,7 @@ export default {
     GlBadge,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   mixins: [glFeatureFlagMixin()],
   props: {

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

@@ -1,5 +1,6 @@
 <script>
-import { GlPath, GlPopover, GlSkeletonLoader, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlPath, GlPopover, GlSkeletonLoader } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import Tracking from '~/tracking';
 import { OVERVIEW_STAGE_ID } from '../constants';
 import FormattedStageCount from './formatted_stage_count.vue';

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

@@ -1,13 +1,7 @@
 <script>
-import {
-  GlAvatar,
-  GlAvatarLink,
-  GlButton,
-  GlLink,
-  GlSafeHtmlDirective,
-  GlTooltipDirective,
-} from '@gitlab/ui';
+import { GlAvatar, GlAvatarLink, GlButton, GlLink, GlTooltipDirective } from '@gitlab/ui';
 import { ApolloMutation } from 'vue-apollo';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __ } from '~/locale';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
@@ -33,7 +27,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   props: {
     note: {

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

@@ -1,5 +1,6 @@
 <script>
-import { GlButtonGroup, GlButton, GlTooltipDirective, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlButtonGroup, GlButton, GlTooltipDirective } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
@@ -32,7 +33,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {

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

@@ -1,6 +1,7 @@
 <script>
-import { GlTooltipDirective, GlSafeHtmlDirective, GlIcon, GlLoadingIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { mapActions } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { createAlert } from '~/flash';
 import { s__, sprintf } from '~/locale';
 import { UNFOLD_COUNT, INLINE_DIFF_LINES_KEY } from '../constants';
@@ -21,7 +22,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   props: {
     file: {

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

@@ -1,13 +1,8 @@
 <script>
-import {
-  GlButton,
-  GlLoadingIcon,
-  GlSafeHtmlDirective as SafeHtml,
-  GlSprintf,
-  GlAlert,
-} from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlSprintf, GlAlert } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { IdState } from 'vendor/vue-virtual-scroller';
 import DiffContent from 'jh_else_ce/diffs/components/diff_content.vue';
 import { createAlert } from '~/flash';

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

@@ -1,7 +1,6 @@
 <script>
 import {
   GlTooltipDirective,
-  GlSafeHtmlDirective,
   GlIcon,
   GlBadge,
   GlButton,
@@ -14,6 +13,7 @@ import {
 } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { IdState } from 'vendor/vue-virtual-scroller';
 import { scrollToElement } from '~/lib/utils/common_utils';
 import { truncateSha } from '~/lib/utils/text_utility';
@@ -44,7 +44,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   mixins: [IdState({ idProp: (vm) => vm.diffFile.file_hash }), glFeatureFlagsMixin()],
   i18n: {

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

@@ -1,5 +1,4 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { mapGetters, mapState, mapActions } from 'vuex';
 import { IdState } from 'vendor/vue-virtual-scroller';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -22,9 +21,6 @@ export default {
     DiffCommentCell,
     DraftNote,
   },
-  directives: {
-    SafeHtml,
-  },
   mixins: [
     draftCommentsMixin,
     IdState({ idProp: (vm) => vm.diffFile.file_hash }),

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

@@ -15,10 +15,10 @@ import {
   GlLink,
   GlTooltip,
   GlTooltipDirective,
-  GlSafeHtmlDirective as SafeHtml,
   GlSprintf,
 } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { s__, n__ } from '~/locale';
 import InstanceComponent from '~/vue_shared/components/deployment_instance.vue';
 import { STATUS_MAP, CANARY_STATUS } from '../constants';

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

@@ -1,5 +1,6 @@
 <script>
-import { GlTooltip, GlSprintf, GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlTooltip, GlSprintf, GlIcon } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 

app/assets/javascripts/feature_highlight/feature_highlight_popover.vue

@@ -1,12 +1,7 @@
 <script>
 import clusterPopover from '@gitlab/svgs/dist/illustrations/cluster_popover.svg';
-import {
-  GlPopover,
-  GlSprintf,
-  GlLink,
-  GlButton,
-  GlSafeHtmlDirective as SafeHtml,
-} from '@gitlab/ui';
+import { GlPopover, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { __ } from '~/locale';
 import { POPOVER_TARGET_ID } from './constants';
 import { dismiss } from './feature_highlight_helper';

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

@@ -1,6 +1,7 @@
 <script>
-import { GlButton, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { snakeCase } from 'lodash';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import highlight from '~/lib/utils/highlight';
 import { truncateNamespace } from '~/lib/utils/text_utility';
 import { mapVuexModuleState } from '~/lib/utils/vuex_module_mappers';
@@ -15,7 +16,7 @@ export default {
     ProjectAvatar,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   mixins: [trackingMixin],
   inject: ['vuexModule'],

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

@@ -9,8 +9,8 @@ import {
   GlPopover,
   GlLink,
   GlTooltipDirective,
-  GlSafeHtmlDirective,
 } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { visitUrl } from '~/lib/utils/url_utility';
 import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge.vue';
 import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
@@ -29,7 +29,7 @@ import ItemTypeIcon from './item_type_icon.vue';
 export default {
   directives: {
     GlTooltip: GlTooltipDirective,
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   components: {
     GlAvatar,

app/assets/javascripts/header_search/components/app.vue

@@ -4,7 +4,6 @@ import {
   GlOutsideDirective as Outside,
   GlIcon,
   GlToken,
-  GlSafeHtmlDirective as SafeHtml,
   GlTooltipDirective,
   GlResizeObserverDirective,
 } from '@gitlab/ui';
@@ -56,7 +55,7 @@ export default {
       false,
     ),
   },
-  directives: { SafeHtml, Outside, GlTooltip: GlTooltipDirective, GlResizeObserverDirective },
+  directives: { Outside, GlTooltip: GlTooltipDirective, GlResizeObserverDirective },
   components: {
     GlSearchBoxByType,
     HeaderSearchDefaultItems,

app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue

@@ -6,9 +6,9 @@ import {
   GlAvatar,
   GlAlert,
   GlLoadingIcon,
-  GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { s__ } from '~/locale';
 import highlight from '~/lib/utils/highlight';
 import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';

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

@@ -1,6 +1,7 @@
 <script>
-import { GlModal, GlSafeHtmlDirective, GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlModal, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { mapState, mapActions, mapGetters } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { n__ } from '~/locale';
 import { leftSidebarViews, MAX_WINDOW_HEIGHT_COMPACT } from '../../constants';
 import { createUnexpectedCommitError } from '../../lib/errors';
@@ -17,7 +18,7 @@ export default {
     GlButton,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
     GlTooltip: GlTooltipDirective,
   },
   data() {

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

@@ -1,6 +1,6 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { mapState } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 export default {
   directives: {

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

@@ -1,6 +1,7 @@
 <script>
-import { GlAlert, GlLoadingIcon, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import { mapActions } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 export default {
   components: {
@@ -8,7 +9,7 @@ export default {
     GlLoadingIcon,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   props: {
     message: {

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

@@ -1,7 +1,8 @@
 <script>
-import { GlTooltipDirective, GlButton, GlIcon, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton, GlIcon } from '@gitlab/ui';
 import { throttle } from 'lodash';
 import { mapActions, mapState } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { __ } from '~/locale';
 import JobDescription from './detail/description.vue';
 import ScrollButton from './detail/scroll_button.vue';
@@ -14,7 +15,7 @@ const scrollPositions = {
 export default {
   directives: {
     GlTooltip: GlTooltipDirective,
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   components: {
     GlButton,

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

@@ -1,15 +1,8 @@
 <script>
-import {
-  GlLoadingIcon,
-  GlIcon,
-  GlSafeHtmlDirective as SafeHtml,
-  GlTabs,
-  GlTab,
-  GlBadge,
-  GlAlert,
-} from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon, GlTabs, GlTab, GlBadge, GlAlert } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import IDEServices from '~/ide/services';
 import { sprintf, __ } from '~/locale';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';

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

@@ -1,5 +1,6 @@
 <script>
-import { GlLoadingIcon, GlButton, GlAlert, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton, GlAlert } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 export default {
   components: {
@@ -8,7 +9,7 @@ export default {
     GlAlert,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   props: {
     isLoading: {

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

@@ -1,14 +1,8 @@
 <script>
-import {
-  GlFormGroup,
-  GlFormCheckbox,
-  GlFormInput,
-  GlFormSelect,
-  GlFormTextarea,
-  GlSafeHtmlDirective as SafeHtml,
-} from '@gitlab/ui';
+import { GlFormGroup, GlFormCheckbox, GlFormInput, GlFormSelect, GlFormTextarea } from '@gitlab/ui';
 import { capitalize, lowerCase, isEmpty } from 'lodash';
 import { mapGetters } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 export default {
   name: 'DynamicField',

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

@@ -1,16 +1,10 @@
 <script>
-import {
-  GlAlert,
-  GlBadge,
-  GlButton,
-  GlModalDirective,
-  GlSafeHtmlDirective as SafeHtml,
-  GlForm,
-} from '@gitlab/ui';
+import { GlAlert, GlBadge, GlButton, GlModalDirective, GlForm } from '@gitlab/ui';
 import axios from 'axios';
 import * as Sentry from '@sentry/browser';
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { s__ } from '~/locale';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import {
   I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE,
   I18N_DEFAULT_ERROR_MESSAGE,

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

@@ -1,13 +1,7 @@
 <script>
 import '~/commons/bootstrap';
-import {
-  GlIcon,
-  GlLink,
-  GlTooltip,
-  GlTooltipDirective,
-  GlButton,
-  GlSafeHtmlDirective as SafeHtml,
-} from '@gitlab/ui';
+import { GlIcon, GlLink, GlTooltip, GlTooltipDirective, GlButton } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import IssueDueDate from '~/boards/components/issue_due_date.vue';
 import { TYPE_WORK_ITEM } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';

app/assets/javascripts/issues/show/components/description.vue

@@ -1,8 +1,9 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml, GlToast, GlTooltip, GlModalDirective } from '@gitlab/ui';
+import { GlToast, GlTooltip, GlModalDirective } from '@gitlab/ui';
 import $ from 'jquery';
 import Sortable from 'sortablejs';
 import Vue from 'vue';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { getIdFromGraphQLId, convertToGraphQLId } from '~/graphql_shared/utils';
 import { TYPE_WORK_ITEM } from '~/graphql_shared/constants';
 import createFlash from '~/flash';

app/assets/javascripts/issues/show/components/form.vue

@@ -164,7 +164,7 @@ export default {
 
 <template>
   <form data-testid="issuable-form">
-    <locked-warning v-if="showLockedWarning" />
+    <locked-warning v-if="showLockedWarning" :issuable-type="issuableType" />
     <gl-alert
       v-if="showOutdatedDescriptionWarning"
       class="gl-mb-5"

app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue

@@ -1,5 +1,6 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlIcon, GlSafeHtmlDirective, GlSprintf } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlIcon, GlSprintf } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { timelineItemI18n } from './constants';
 import { getEventIcon } from './utils';
@@ -14,7 +15,7 @@ export default {
     GlSprintf,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   inject: ['canUpdateTimelineEvent'],
   props: {

app/assets/javascripts/issues/show/components/locked_warning.vue

@@ -1,29 +1,44 @@
 <script>
 import { GlSprintf, GlLink, GlAlert } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
+import { IssuableType } from '~/issues/constants';
 
-const alertMessage = __(
-  'Someone edited the issue at the same time you did. Please check out %{linkStart}the issue%{linkEnd} and make sure your changes will not unintentionally remove theirs.',
-);
+export const i18n = Object.freeze({
+  alertMessage: __(
+    "Someone edited the %{issuableType} at the same time you did. Review %{linkStart}the %{issuableType}%{linkEnd} and make sure you don't unintentionally overwrite their changes.",
+  ),
+});
 
 export default {
-  alertMessage,
   components: {
     GlSprintf,
     GlLink,
     GlAlert,
   },
+  props: {
+    issuableType: {
+      type: String,
+      required: true,
+      validator(value) {
+        return Object.values(IssuableType).includes(value);
+      },
+    },
+  },
   computed: {
     currentPath() {
       return window.location.pathname;
     },
+    alertMessage() {
+      return sprintf(this.$options.i18n.alertMessage, { issuableType: this.issuableType });
+    },
   },
+  i18n,
 };
 </script>
 
 <template>
   <gl-alert variant="danger" class="gl-mb-5" :dismissible="false">
-    <gl-sprintf :message="$options.alertMessage">
+    <gl-sprintf :message="alertMessage">
       <template #link="{ content }">
         <gl-link :href="currentPath" target="_blank" rel="nofollow">
           {{ content }}

app/assets/javascripts/issues/show/components/title.vue

@@ -1,5 +1,6 @@
 <script>
-import { GlButton, GlTooltipDirective, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { __ } from '~/locale';
 import eventHub from '../event_hub';
 import animateMixin from '../mixins/animate';

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

@@ -1,8 +1,9 @@
 <script>
-import { GlLoadingIcon, GlIcon, GlSafeHtmlDirective as SafeHtml, GlAlert } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon, GlAlert } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { throttle, isEmpty } from 'lodash';
 import { mapGetters, mapState, mapActions } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
 import { __, sprintf } from '~/locale';
 import CiHeader from '~/vue_shared/components/header_ci_component.vue';

app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue

@@ -1,10 +1,11 @@
 <script>
-import { GlModal, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlModal } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { __ } from '~/locale';
 
 export default {
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   components: {
     GlModal,

app/assets/javascripts/members/components/avatars/user_avatar.vue

@@ -1,10 +1,6 @@
 <script>
-import {
-  GlAvatarLink,
-  GlAvatarLabeled,
-  GlBadge,
-  GlSafeHtmlDirective as SafeHtml,
-} from '@gitlab/ui';
+import { GlAvatarLink, GlAvatarLabeled, GlBadge } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { generateBadges } from 'ee_else_ce/members/utils';
 import { glEmojiTag } from '~/emoji';
 import { __ } from '~/locale';

app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.vue

@@ -1,6 +1,6 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { mapActions } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import syntaxHighlight from '~/syntax_highlight';
 import { SYNTAX_HIGHLIGHT_CLASS } from '../constants';
 import utilsMixin from '../mixins/line_conflict_utils';

app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.vue

@@ -1,6 +1,6 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { mapActions } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import syntaxHighlight from '~/syntax_highlight';
 import { SYNTAX_HIGHLIGHT_CLASS } from '../constants';
 import utilsMixin from '../mixins/line_conflict_utils';

app/assets/javascripts/merge_requests/components/sticky_header.vue

@@ -1,12 +1,7 @@
 <script>
-import {
-  GlIntersectionObserver,
-  GlLink,
-  GlSprintf,
-  GlBadge,
-  GlSafeHtmlDirective,
-} from '@gitlab/ui';
+import { GlIntersectionObserver, GlLink, GlSprintf, GlBadge } from '@gitlab/ui';
 import { mapGetters, mapState } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { TYPE_MERGE_REQUEST } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -28,7 +23,7 @@ export default {
     ClipboardButton,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   mixins: [glFeatureFlagsMixin()],
   inject: {

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

@@ -1,11 +1,11 @@
 <script>
 import chartEmptyStateIllustration from '@gitlab/svgs/dist/illustrations/chart-empty-state.svg';
-import { GlSafeHtmlDirective } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { chartHeight } from '../../constants';
 
 export default {
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   data() {
     return {

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

@@ -1,5 +1,6 @@
 <script>
-import { GlEmptyState, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlEmptyState } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { __, sprintf } from '~/locale';
 import { metricStates } from '../constants';
 

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

@@ -1,7 +1,7 @@
 <script>
 import katex from 'katex';
 import { marked } from 'marked';
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { sanitize } from '~/lib/dompurify';
 import { hasContent, markdownConfig } from '~/lib/utils/text_utility';
 import Prompt from './prompt.vue';

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

@@ -1,14 +1,10 @@
 <script>
-import { GlSafeHtmlDirective } from '@gitlab/ui';
 import Prompt from '../prompt.vue';
 
 export default {
   components: {
     Prompt,
   },
-  directives: {
-    SafeHtml: GlSafeHtmlDirective,
-  },
   props: {
     count: {
       type: Number,
@@ -28,12 +24,6 @@ export default {
       return this.index === 0;
     },
   },
-  safeHtmlConfig: {
-    ADD_TAGS: ['use'], // to support icon SVGs
-    FORBID_TAGS: ['style'],
-    FORBID_ATTR: ['style'],
-    ALLOW_DATA_ATTR: false,
-  },
 };
 </script>
 

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

@@ -1,5 +1,5 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import 'mathjax/es5/tex-svg';
 import Prompt from '../prompt.vue';
 

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

@@ -1,5 +1,4 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import Prompt from '../prompt.vue';
 import Markdown from '../markdown.vue';
 
@@ -9,9 +8,6 @@ export default {
     Prompt,
     Markdown,
   },
-  directives: {
-    SafeHtml,
-  },
   props: {
     count: {
       type: Number,

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

@@ -1,7 +1,8 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml, GlAvatar, GlAvatarLink } from '@gitlab/ui';
+import { GlAvatar, GlAvatarLink } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapActions } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { s__, __, sprintf } from '~/locale';
 import NoteEditedText from './note_edited_text.vue';

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

@@ -1,6 +1,7 @@
 <script>
-import { GlSkeletonLoader, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlSkeletonLoader } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
 import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue';
 import { getDiffMode } from '~/diffs/store/utils';

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

@@ -1,9 +1,8 @@
 <script>
 import $ from 'jquery';
-import { GlSafeHtmlDirective } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
-
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { __ } from '~/locale';
 import '~/behaviors/markdown/render_gfm';
 import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
@@ -22,7 +21,7 @@ export default {
     Suggestions,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   mixins: [autosave],
   props: {

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

@@ -1,17 +1,10 @@
 <script>
-import {
-  GlIcon,
-  GlBadge,
-  GlLoadingIcon,
-  GlTooltipDirective,
-  GlSafeHtmlDirective as SafeHtml,
-} from '@gitlab/ui';
+import { GlIcon, GlBadge, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import { mapActions } from 'vuex';
 import { __, s__ } from '~/locale';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
-  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
   components: {
     TimeAgoTooltip,
     GitlabTeamMemberBadge: () =>
@@ -21,7 +14,6 @@ export default {
     GlLoadingIcon,
   },
   directives: {
-    SafeHtml,
     GlTooltip: GlTooltipDirective,
   },
   props: {

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

@@ -1,6 +1,6 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { __, sprintf } from '~/locale';
 
 export default {

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

@@ -1,8 +1,9 @@
 <script>
-import { GlSprintf, GlSafeHtmlDirective as SafeHtml, GlAvatarLink, GlAvatar } from '@gitlab/ui';
+import { GlSprintf, GlAvatarLink, GlAvatar } from '@gitlab/ui';
 import $ from 'jquery';
 import { escape, isEmpty } from 'lodash';
 import { mapGetters, mapActions } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import { INLINE_DIFF_LINES_KEY } from '~/diffs/constants';
 import { createAlert } from '~/flash';

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

@@ -1,6 +1,7 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml, GlModal } from '@gitlab/ui';
+import { GlModal } from '@gitlab/ui';
 import { escape } from 'lodash';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { __, s__, sprintf } from '~/locale';
 
 export default {

app/assets/javascripts/pages/shared/wikis/components/wiki_content.vue

@@ -1,5 +1,5 @@
 <script>
-import { GlSkeletonLoader, GlSafeHtmlDirective, GlAlert } from '@gitlab/ui';
+import { GlSkeletonLoader, GlAlert } from '@gitlab/ui';
 import { createAlert } from '~/flash';
 import { __ } from '~/locale';
 import axios from '~/lib/utils/axios_utils';
@@ -11,9 +11,6 @@ export default {
     GlSkeletonLoader,
     GlAlert,
   },
-  directives: {
-    SafeHtml: GlSafeHtmlDirective,
-  },
   props: {
     getWikiContentUrl: {
       type: String,

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

@@ -1,5 +1,5 @@
 <script>
-import { GlSafeHtmlDirective } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { glEmojiTag } from '~/emoji';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 
@@ -15,7 +15,7 @@ export default {
     RequestSelector,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   props: {
     store: {

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

@@ -1,5 +1,6 @@
 <script>
-import { GlPopover, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlPopover } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { glEmojiTag } from '~/emoji';
 
 export default {
@@ -7,7 +8,7 @@ export default {
     GlPopover,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   props: {
     htmlId: {

app/assets/javascripts/pipeline_new/components/legacy_pipeline_new_form.vue

@@ -12,11 +12,11 @@ import {
   GlLink,
   GlSprintf,
   GlLoadingIcon,
-  GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { uniqueId } from 'lodash';
 import Vue from 'vue';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import axios from '~/lib/utils/axios_utils';
 import { backOff } from '~/lib/utils/common_utils';
 import httpStatusCodes from '~/lib/utils/http_status';

app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue

@@ -12,11 +12,11 @@ import {
   GlLink,
   GlSprintf,
   GlLoadingIcon,
-  GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { uniqueId } from 'lodash';
 import Vue from 'vue';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { s__, __, n__ } from '~/locale';
 import { VARIABLE_TYPE, FILE_TYPE, CC_VALIDATION_REQUIRED_ERROR } from '../constants';

app/assets/javascripts/pipelines/components/jobs/failed_jobs_table.vue

@@ -1,5 +1,6 @@
 <script>
-import { GlButton, GlLink, GlSafeHtmlDirective, GlTableLite } from '@gitlab/ui';
+import { GlButton, GlLink, GlTableLite } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { __, s__ } from '~/locale';
 import { createAlert } from '~/flash';
 import { redirectTo } from '~/lib/utils/url_utility';
@@ -17,7 +18,7 @@ export default {
     GlTableLite,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   props: {
     failedJobs: {

app/assets/javascripts/popovers/components/popovers.vue

@@ -1,5 +1,6 @@
 <script>
-import { GlPopover, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlPopover } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 const newPopover = (element) => {
   const { content, html, placement, title, triggers = 'focus' } = element.dataset;
@@ -19,7 +20,7 @@ export default {
     GlPopover,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   data() {
     return {

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

@@ -1,6 +1,7 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml, GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
+import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
 import { escape } from 'lodash';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { createAlert, VARIANT_INFO } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __, s__, sprintf } from '~/locale';

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

@@ -3,7 +3,7 @@ import createFromTemplateIllustration from '@gitlab/svgs/dist/illustrations/proj
 import blankProjectIllustration from '@gitlab/svgs/dist/illustrations/project-create-new-sm.svg';
 import importProjectIllustration from '@gitlab/svgs/dist/illustrations/project-import-sm.svg';
 import ciCdProjectIllustration from '@gitlab/svgs/dist/illustrations/project-run-CICD-pipelines-sm.svg';
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { s__ } from '~/locale';
 import NewNamespacePage from '~/vue_shared/new_namespace/new_namespace_page.vue';
 import NewProjectPushTipPopover from './new_project_push_tip_popover.vue';

app/assets/javascripts/projects/settings_service_desk/components/service_desk_root.vue

@@ -1,5 +1,6 @@
 <script>
-import { GlAlert, GlSprintf, GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import axios from '~/lib/utils/axios_utils';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { __, sprintf } from '~/locale';
@@ -16,7 +17,7 @@ export default {
     ServiceDeskSetting,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   inject: {
     initialIsEnabled: {

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

@@ -1,7 +1,7 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import $ from 'jquery';
 import { isEmpty } from 'lodash';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { scrollToElement } from '~/lib/utils/common_utils';
 import { slugify } from '~/lib/utils/text_utility';
 import { getLocationHash } from '~/lib/utils/url_utility';

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

@@ -1,12 +1,6 @@
 <script>
-import {
-  GlTooltipDirective,
-  GlLink,
-  GlButton,
-  GlButtonGroup,
-  GlLoadingIcon,
-  GlSafeHtmlDirective,
-} from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import defaultAvatarUrl from 'images/no_avatar.png';
 import pathLastCommitQuery from 'shared_queries/repository/path_last_commit.query.graphql';
 import { sprintf, s__ } from '~/locale';
@@ -32,7 +26,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   mixins: [getRefMixin],
   apollo: {

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

@@ -1,6 +1,7 @@
 <script>
-import { GlIcon, GlLink, GlLoadingIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlIcon, GlLink, GlLoadingIcon } from '@gitlab/ui';
 import $ from 'jquery';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import '~/behaviors/markdown/render_gfm';
 import { handleLocationHash } from '~/lib/utils/common_utils';
 import readmeQuery from '../../queries/readme.query.graphql';

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

@@ -7,10 +7,10 @@ import {
   GlLoadingIcon,
   GlIcon,
   GlHoverLoadDirective,
-  GlSafeHtmlDirective,
   GlIntersectionObserver,
 } from '@gitlab/ui';
 import { escapeRegExp } from 'lodash';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
 import { TREE_PAGE_SIZE, ROW_APPEAR_DELAY } from '~/repository/constants';
@@ -35,7 +35,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
     GlHoverLoad: GlHoverLoadDirective,
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   apollo: {
     commit: {

app/assets/javascripts/search/topbar/components/searchable_dropdown_item.vue

@@ -1,5 +1,6 @@
 <script>
-import { GlDropdownItem, GlAvatar, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlDropdownItem, GlAvatar } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import highlight from '~/lib/utils/highlight';
 import { truncateNamespace } from '~/lib/utils/text_utility';
 import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';

app/assets/javascripts/security_configuration/components/training_provider_list.vue

@@ -8,9 +8,9 @@ import {
   GlLink,
   GlSkeletonLoader,
   GlIcon,
-  GlSafeHtmlDirective,
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import Tracking from '~/tracking';
 import { __, s__ } from '~/locale';
 import {
@@ -54,7 +54,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   mixins: [Tracking.mixin()],
   inject: ['projectFullPath'],

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

@@ -1,15 +1,8 @@
 <script>
-import {
-  GlFormGroup,
-  GlButton,
-  GlModal,
-  GlToast,
-  GlToggle,
-  GlLink,
-  GlSafeHtmlDirective,
-} from '@gitlab/ui';
+import { GlFormGroup, GlButton, GlModal, GlToast, GlToggle, GlLink } from '@gitlab/ui';
 import Vue from 'vue';
 import { mapState, mapActions } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants';
 import { visitUrl, getBaseURL } from '~/lib/utils/url_utility';
@@ -26,7 +19,7 @@ export default {
     GlLink,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   formLabels: {
     createProject: __('Self-monitoring'),

app/assets/javascripts/set_status_modal/set_status_form.vue

@@ -10,9 +10,9 @@ import {
   GlDropdownItem,
   GlSprintf,
   GlFormGroup,
-  GlSafeHtmlDirective,
 } from '@gitlab/ui';
 import $ from 'jquery';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
 import * as Emoji from '~/emoji';
 import { s__ } from '~/locale';
@@ -33,7 +33,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   props: {
     defaultEmoji: {

app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue

@@ -1,5 +1,5 @@
 <script>
-import { GlToast, GlTooltipDirective, GlSafeHtmlDirective, GlModal } from '@gitlab/ui';
+import { GlToast, GlTooltipDirective, GlModal } from '@gitlab/ui';
 import Vue from 'vue';
 import { createAlert } from '~/flash';
 import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants';
@@ -19,7 +19,6 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
-    SafeHtml: GlSafeHtmlDirective,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -110,7 +109,6 @@ export default {
       this.availability = value;
     },
   },
-  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
   actionPrimary: { text: s__('SetStatusModal|Set status') },
   actionSecondary: { text: s__('SetStatusModal|Remove status') },
 };

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

@@ -1,5 +1,6 @@
 <script>
-import { GlButton, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { joinPaths } from '~/lib/utils/url_utility';
 import { sprintf, s__ } from '~/locale';
 
@@ -9,7 +10,7 @@ export default {
     GlButton,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   computed: {
     href() {

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

@@ -1,5 +1,5 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import MarkdownFieldView from '~/vue_shared/components/markdown/field_view.vue';
 
 export default {

app/assets/javascripts/surveys/merge_request_experience/app.vue

@@ -1,6 +1,7 @@
 <script>
-import { GlButton, GlSprintf, GlSafeHtmlDirective, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
 import gitlabLogo from '@gitlab/svgs/dist/illustrations/gitlab_logo.svg';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { s__, __ } from '~/locale';
 import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
 import SatisfactionRate from '~/surveys/components/satisfaction_rate.vue';
@@ -30,7 +31,7 @@ export default {
     SatisfactionRate,
   },
   directives: {
-    safeHtml: GlSafeHtmlDirective,
+    SafeHtml,
     tooltip: GlTooltipDirective,
   },
   mixins: [Tracking.mixin()],

app/assets/javascripts/terms/components/app.vue

@@ -1,6 +1,7 @@
 <script>
 import $ from 'jquery';
-import { GlButton, GlIntersectionObserver, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlButton, GlIntersectionObserver } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 import { FLASH_TYPES, FLASH_CLOSED_EVENT } from '~/flash';
 import { isLoggedIn } from '~/lib/utils/common_utils';

app/assets/javascripts/tooltips/components/tooltips.vue

@@ -1,6 +1,7 @@
 <script>
-import { GlTooltip, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlTooltip } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 const getTooltipTitle = (element) => {
   return element.getAttribute('title') || element.dataset.title;

app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue

@@ -1,12 +1,7 @@
 <script>
-import {
-  GlButton,
-  GlLoadingIcon,
-  GlSafeHtmlDirective,
-  GlTooltipDirective,
-  GlIntersectionObserver,
-} from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlTooltipDirective, GlIntersectionObserver } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { DynamicScroller, DynamicScrollerItem } from 'vendor/vue-virtual-scroller';
 import { sprintf, s__, __ } from '~/locale';
 import Poll from '~/lib/utils/poll';
@@ -40,7 +35,7 @@ export default {
     StateContainer,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
     GlTooltip: GlTooltipDirective,
   },
   data() {

app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue

@@ -1,6 +1,7 @@
 <script>
-import { GlBadge, GlLink, GlSafeHtmlDirective, GlModalDirective } from '@gitlab/ui';
+import { GlBadge, GlLink, GlModalDirective } from '@gitlab/ui';
 import { isArray } from 'lodash';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import Actions from '../action_buttons.vue';
 import StatusIcon from './status_icon.vue';
 import { generateText } from './utils';
@@ -14,7 +15,7 @@ export default {
     Actions,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
     GlModal: GlModalDirective,
   },
   props: {

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

@@ -7,8 +7,8 @@ import {
   GlSprintf,
   GlTooltip,
   GlTooltipDirective,
-  GlSafeHtmlDirective,
 } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { s__, n__ } from '~/locale';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import PipelineArtifacts from '~/pipelines/components/pipelines_list/pipelines_artifacts.vue';
@@ -33,7 +33,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   props: {
     pipeline: {

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

@@ -1,5 +1,6 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml, GlLink } from '@gitlab/ui';
+import { GlLink } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { s__, n__ } from '~/locale';
 
 export default {

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

@@ -1,5 +1,6 @@
 <script>
-import { GlButton, GlSprintf, GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlButton, GlSprintf, GlLink } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import emptyStateSVG from 'icons/_mr_widget_empty_state.svg';
 import api from '~/api';
 import { helpPagePath } from '~/helpers/help_page_helper';
@@ -12,7 +13,7 @@ export default {
     GlLink,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   props: {
     mr: {

app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue

@@ -1,5 +1,6 @@
 <script>
-import { GlBadge, GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlBadge, GlLink } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import Actions from '../action_buttons.vue';
 import { generateText } from '../extensions/utils';
 import ContentRow from './widget_content_row.vue';
@@ -13,7 +14,7 @@ export default {
     ContentRow,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   props: {
     data: {

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

@@ -1,13 +1,8 @@
 <script>
-import {
-  GlButton,
-  GlLink,
-  GlTooltipDirective,
-  GlLoadingIcon,
-  GlSafeHtmlDirective,
-} from '@gitlab/ui';
+import { GlButton, GlLink, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { normalizeHeaders } from '~/lib/utils/common_utils';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { sprintf, __ } from '~/locale';
 import Poll from '~/lib/utils/poll';
 import HelpPopover from '~/vue_shared/components/help_popover.vue';
@@ -35,7 +30,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   props: {
     /**

app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue

@@ -1,7 +1,8 @@
 <script>
-import { GlSafeHtmlDirective, GlLink } from '@gitlab/ui';
+import { GlLink } from '@gitlab/ui';
 import { __ } from '~/locale';
 import HelpPopover from '~/vue_shared/components/help_popover.vue';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import ActionButtons from '../action_buttons.vue';
 import { EXTENSION_ICONS } from '../../constants';
 import { generateText } from '../extensions/utils';
@@ -15,7 +16,7 @@ export default {
     ActionButtons,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   props: {
     level: {

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -1,10 +1,10 @@
 <script>
-import { GlSafeHtmlDirective } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import {
   registerExtension,
   registeredExtensions,
 } from '~/vue_merge_request_widget/components/extensions';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import MrWidgetApprovals from 'ee_else_ce/vue_merge_request_widget/components/approvals/approvals.vue';
 import MRWidgetService from 'ee_else_ce/vue_merge_request_widget/services/mr_widget_service';
 import MRWidgetStore from 'ee_else_ce/vue_merge_request_widget/stores/mr_widget_store';
@@ -57,7 +57,7 @@ export default {
   // eslint-disable-next-line @gitlab/require-i18n-strings
   name: 'MRWidget',
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   components: {
     Loading,

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

@@ -9,9 +9,9 @@ import {
   GlTabs,
   GlTab,
   GlButton,
-  GlSafeHtmlDirective,
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user';
 import { fetchPolicies } from '~/lib/graphql';
 import { toggleContainerClasses } from '~/lib/utils/dom_utils';
@@ -41,7 +41,7 @@ export default {
     reportedAtWithTool: s__('AlertManagement|Reported %{when} by %{tool}'),
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   severityLabels: SEVERITY_LEVELS,
   tabsConfig: [

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

@@ -1,5 +1,6 @@
 <script>
-import { GlIcon, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlIcon } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import NoteHeader from '~/notes/components/note_header.vue';
 
 export default {
@@ -8,7 +9,7 @@ export default {
     GlIcon,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   props: {
     note: {

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

@@ -1,6 +1,7 @@
 <script>
-import { GlIcon, GlButton, GlTooltipDirective, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlIcon, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { groupBy } from 'lodash';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import EmojiPicker from '~/emoji/components/picker.vue';
 import { __, sprintf } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -17,7 +18,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {

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

@@ -1,5 +1,5 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { handleBlobRichViewer } from '~/blob/viewer';
 import MarkdownFieldView from '~/vue_shared/components/markdown/field_view.vue';
 import ViewerMixin from './mixins';

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

@@ -1,5 +1,6 @@
 <script>
-import { GlIcon, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlIcon } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { HIGHLIGHT_CLASS_NAME } from './constants';
 import ViewerMixin from './mixins';
 
@@ -9,7 +10,7 @@ export default {
     GlIcon,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   mixins: [ViewerMixin],
   inject: ['blobHash'],

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

@@ -1,5 +1,5 @@
 <script>
-import { GlSafeHtmlDirective } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 import languageLoader from '~/content_editor/services/highlight_js_language_loader';
 import CodeBlock from './code_block.vue';
@@ -7,7 +7,7 @@ import CodeBlock from './code_block.vue';
 export default {
   name: 'CodeBlockHighlighted',
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   components: {
     CodeBlock,

app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue

@@ -1,12 +1,6 @@
 <script>
-import {
-  GlAlert,
-  GlModal,
-  GlFormGroup,
-  GlFormInput,
-  GlSafeHtmlDirective as SafeHtml,
-  GlSprintf,
-} from '@gitlab/ui';
+import { GlAlert, GlModal, GlFormGroup, GlFormInput, GlSprintf } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import {
   CONFIRM_DANGER_MODAL_BUTTON,
   CONFIRM_DANGER_MODAL_TITLE,

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

@@ -1,6 +1,7 @@
 <script>
-import { GlModal, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlModal } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import csrf from '~/lib/utils/csrf';
 import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from './confirm_modal_eventhub';
 import DomElementListener from './dom_element_listener.vue';

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

@@ -1,8 +1,9 @@
 <script>
-import { GlSkeletonLoader, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlSkeletonLoader } from '@gitlab/ui';
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
 import { forEach, escape } from 'lodash';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 

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

@@ -1,5 +1,6 @@
 <script>
-import { GlAlert, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlAlert } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 export default {
   name: 'DismissibleAlert',

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

@@ -1,12 +1,6 @@
 <script>
-import {
-  GlTooltipDirective,
-  GlButton,
-  GlSafeHtmlDirective,
-  GlAvatarLink,
-  GlAvatarLabeled,
-  GlTooltip,
-} from '@gitlab/ui';
+import { GlTooltipDirective, GlButton, GlAvatarLink, GlAvatarLabeled, GlTooltip } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { isGid, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { glEmojiTag } from '~/emoji';
 import { __, sprintf } from '~/locale';
@@ -31,7 +25,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   EMOJI_REF: 'EMOJI_REF',
   props: {

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

@@ -1,5 +1,6 @@
 <script>
-import { GlButton, GlPopover, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlButton, GlPopover } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 /**
  * Render a button with a question mark icon
@@ -12,7 +13,7 @@ export default {
     GlPopover,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   props: {
     options: {

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

@@ -1,10 +1,11 @@
 <script>
-import { GlIcon, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlIcon } from '@gitlab/ui';
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
 import { debounce, unescape } from 'lodash';
 import { createAlert } from '~/flash';
 import GLForm from '~/gl_form';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import axios from '~/lib/utils/axios_utils';
 import { stripHtml } from '~/lib/utils/text_utility';
 import { __, sprintf } from '~/locale';
@@ -25,7 +26,7 @@ export default {
     Suggestions,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {

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

@@ -1,5 +1,5 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 export default {
   name: 'SuggestionDiffRow',

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

@@ -1,6 +1,6 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import Vue from 'vue';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { createAlert } from '~/flash';
 import { __ } from '~/locale';
 import SuggestionDiff from './suggestion_diff.vue';

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

@@ -1,6 +1,7 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml, GlDrawer, GlAlert, GlSkeletonLoader } from '@gitlab/ui';
+import { GlDrawer, GlAlert, GlSkeletonLoader } from '@gitlab/ui';
 import $ from 'jquery';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import '~/behaviors/markdown/render_gfm';
 import { s__ } from '~/locale';
 import { contentTop } from '~/lib/utils/common_utils';