Merge branch 'fix-project-list-item-v-html' into 'master'

Use v-safe-html in project_list_item.vue

See merge request gitlab-org/gitlab!70730

app/assets/javascripts/vue_shared/components/project_selector/project_list_item.stories.js

+import ProjectListItem from './project_list_item.vue';
+
+export default {
+  component: ProjectListItem,
+  title: 'vue_shared/components/project_selector/project_list_item',
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { ProjectListItem },
+  props: Object.keys(argTypes),
+  template: '<project-list-item v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  project: {
+    id: '1',
+    name: 'MyProject',
+    name_with_namespace: 'path / to / MyProject',
+  },
+  selected: false,
+};
+
+export const SelectedProject = Template.bind({});
+SelectedProject.args = {
+  ...Default.args,
+  selected: true,
+};
+
+export const MatchedProject = Template.bind({});
+MatchedProject.args = {
+  ...Default.args,
+  matcher: 'proj',
+};

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

 <script>
-import { GlButton, GlIcon } from '@gitlab/ui';
+import { GlButton, GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { isString } from 'lodash';
 import highlight from '~/lib/utils/highlight';
 import { truncateNamespace } from '~/lib/utils/text_utility';
@@ -8,6 +8,7 @@ import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/def
 export default {
   name: 'ProjectListItem',
   components: { GlIcon, ProjectAvatar, GlButton },
+  directives: { SafeHtml },
   props: {
     project: {
       type: Object,
@@ -58,9 +59,9 @@ export default {
         <span v-if="truncatedNamespace" class="text-secondary">/&nbsp;</span>
       </div>
       <div
+        v-safe-html="highlightedProjectName"
         :title="project.name"
         class="js-project-name text-truncate"
-        v-html="highlightedProjectName /* eslint-disable-line vue/no-v-html */"
       ></div>
     </div>
   </gl-button>