Merge branch 'djadmin-vhtml-2' into 'master'

Remove v-html from delete cluster modal

See merge request gitlab-org/gitlab!72682

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

 <script>
-import { GlModal, GlButton, GlFormInput } from '@gitlab/ui';
-import { escape } from 'lodash';
+import { GlModal, GlButton, GlFormInput, GlSprintf } from '@gitlab/ui';
 import csrf from '~/lib/utils/csrf';
-import { s__, sprintf } from '~/locale';
+import { s__ } from '~/locale';
 import SplitButton from '~/vue_shared/components/split_button.vue';
 
 const splitButtonActionItems = [
@@ -29,6 +28,7 @@ export default {
     GlModal,
     GlButton,
     GlFormInput,
+    GlSprintf,
   },
   props: {
     clusterPath: {
@@ -67,17 +67,11 @@ export default {
         : s__('ClusterIntegration|You are about to remove your cluster integration.');
     },
     confirmationTextLabel() {
-      return sprintf(
-        this.confirmCleanup
-          ? s__(
-              'ClusterIntegration|To remove your integration and resources, type %{clusterName} to confirm:',
-            )
-          : s__('ClusterIntegration|To remove your integration, type %{clusterName} to confirm:'),
-        {
-          clusterName: `<code>${escape(this.clusterName)}</code>`,
-        },
-        false,
-      );
+      return this.confirmCleanup
+        ? s__(
+            'ClusterIntegration|To remove your integration and resources, type %{clusterName} to confirm:',
+          )
+        : s__('ClusterIntegration|To remove your integration, type %{clusterName} to confirm:');
     },
     canSubmit() {
       return this.enteredClusterName === this.clusterName;
@@ -140,7 +134,13 @@ export default {
           <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
         </ul>
       </div>
-      <strong v-html="confirmationTextLabel /* eslint-disable-line vue/no-v-html */"></strong>
+      <strong>
+        <gl-sprintf :message="confirmationTextLabel">
+          <template #clusterName>
+            <code>{{ clusterName }}</code>
+          </template>
+        </gl-sprintf>
+      </strong>
       <form ref="form" :action="clusterPath" method="post" class="gl-mb-5">
         <input ref="method" type="hidden" name="_method" value="delete" />
         <input :value="csrfToken" type="hidden" name="authenticity_token" />

spec/frontend/clusters/components/remove_cluster_confirmation_spec.js

-import { GlModal } from '@gitlab/ui';
+import { GlModal, GlSprintf } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { stubComponent } from 'helpers/stub_component';
 import RemoveClusterConfirmation from '~/clusters/components/remove_cluster_confirmation.vue';
 import SplitButton from '~/vue_shared/components/split_button.vue';
 
 describe('Remove cluster confirmation modal', () => {
   let wrapper;
 
-  const createComponent = (props = {}) => {
+  const createComponent = ({ props = {}, stubs = {} } = {}) => {
     wrapper = mount(RemoveClusterConfirmation, {
       propsData: {
         clusterPath: 'clusterPath',
         clusterName: 'clusterName',
         ...props,
       },
+      stubs,
     });
   };
 
@@ -27,35 +29,44 @@ describe('Remove cluster confirmation modal', () => {
   });
 
   describe('split button dropdown', () => {
-    const findModal = () => wrapper.find(GlModal).vm;
-    const findSplitButton = () => wrapper.find(SplitButton);
+    const findModal = () => wrapper.findComponent(GlModal);
+    const findSplitButton = () => wrapper.findComponent(SplitButton);
 
     beforeEach(() => {
-      createComponent({ clusterName: 'my-test-cluster' });
-      jest.spyOn(findModal(), 'show').mockReturnValue();
+      createComponent({
+        props: { clusterName: 'my-test-cluster' },
+        stubs: { GlSprintf, GlModal: stubComponent(GlModal) },
+      });
+      jest.spyOn(findModal().vm, 'show').mockReturnValue();
     });
 
-    it('opens modal with "cleanup" option', () => {
+    it('opens modal with "cleanup" option', async () => {
       findSplitButton().vm.$emit('remove-cluster-and-cleanup');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findModal().show).toHaveBeenCalled();
-        expect(wrapper.vm.confirmCleanup).toEqual(true);
-      });
+      await wrapper.vm.$nextTick();
+
+      expect(findModal().vm.show).toHaveBeenCalled();
+      expect(wrapper.vm.confirmCleanup).toEqual(true);
+      expect(findModal().html()).toContain(
+        '<strong>To remove your integration and resources, type <code>my-test-cluster</code> to confirm:</strong>',
+      );
     });
 
-    it('opens modal without "cleanup" option', () => {
+    it('opens modal without "cleanup" option', async () => {
       findSplitButton().vm.$emit('remove-cluster');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findModal().show).toHaveBeenCalled();
-        expect(wrapper.vm.confirmCleanup).toEqual(false);
-      });
+      await wrapper.vm.$nextTick();
+
+      expect(findModal().vm.show).toHaveBeenCalled();
+      expect(wrapper.vm.confirmCleanup).toEqual(false);
+      expect(findModal().html()).toContain(
+        '<strong>To remove your integration, type <code>my-test-cluster</code> to confirm:</strong>',
+      );
     });
 
     describe('with cluster management project', () => {
       beforeEach(() => {
-        createComponent({ hasManagementProject: true });
+        createComponent({ props: { hasManagementProject: true } });
       });
 
       it('renders regular button instead', () => {