Fix rendering raw html content (#11764)

* fix rendering string instead of html

* fix rendering raw html on tooltips by global configuration

* lint

---------

Co-authored-by: Mo Mesgin <[email protected]>

Author: momesgin

jest.setup.js

@@ -3,6 +3,7 @@ import { createApp } from 'vue';
 import { config } from '@vue/test-utils';
 import i18n from '@shell/plugins/i18n';
 import FloatingVue from 'floating-vue';
+import { floatingVueOptions } from '@shell/plugins/floating-vue';
 import vSelect from 'vue-select';
 import cleanTooltipDirective from '@shell/directives/clean-tooltip';
 import cleanHtmlDirective from '@shell/directives/clean-html';
@@ -16,7 +17,7 @@ global.TextDecoder = TextDecoder;
 
 // vueApp.config.productionTip = false;
 vueApp.use(i18n, { store: { dispatch() {} } });
-vueApp.use(FloatingVue);
+vueApp.use(FloatingVue, floatingVueOptions);
 vueApp.directive('clean-html', cleanHtmlDirective);
 vueApp.directive('clean-tooltip', cleanTooltipDirective);
 vueApp.component('v-select', vSelect);

shell/initialize/install-plugins.js

@@ -30,12 +30,13 @@ import emberCookie from '@shell/plugins/ember-cookie';
 import ShortKey from '@shell/plugins/shortkey';
 
 import 'floating-vue/dist/style.css';
+import { floatingVueOptions } from '@shell/plugins/floating-vue';
 
 export async function installPlugins(vueApp) {
   vueApp.use(globalFormatters);
   vueApp.use(PortalVue);
   vueApp.use(VueResize);
-  vueApp.use(FloatingVue);
+  vueApp.use(FloatingVue, floatingVueOptions);
   vueApp.use(ShortKey, { prevent: ['input', 'textarea', 'select'] });
   vueApp.use(InstallCodemirro);
   vueApp.component('v-select', vSelect);

shell/plugins/floating-vue.js

@@ -0,0 +1 @@
+export const floatingVueOptions = { themes: { tooltip: { html: true } } };

storybook/.storybook/preview.js

@@ -1,6 +1,7 @@
 import  { setup }  from '@storybook/vue3';
 import vSelect from 'vue-select';
 import FloatingVue from 'floating-vue';
+import { floatingVueOptions } from '@shell/plugins/floating-vue';
 import { themes } from '@storybook/theming';
 import installShortcut from './theme-shortcut';
 import withEvents from 'storybook-auto-events';
@@ -14,7 +15,7 @@ import i18n from '../../shell/plugins/i18n';
 
 setup((vueApp) => {
   vueApp.use(i18n, { store: { dispatch() {} } });
-  vueApp.use(FloatingVue);
+  vueApp.use(FloatingVue, floatingVueOptions);
   vueApp.directive('clean-html', cleanHtmlDirective);
   vueApp.directive('clean-tooltip', cleanTooltipDirective);
   vueApp.component('v-select', vSelect);