Merge branch 'lashmanov/241938-replace-v-html-with-sprintf' into 'master'

Replace v-html with gl-sprintf component in pipeline_stop_modal.vue (#241938)

See merge request gitlab-org/gitlab!71034

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

 <script>
-import { GlLink, GlModal } from '@gitlab/ui';
+import { GlLink, GlModal, GlSprintf } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import { __, s__, sprintf } from '~/locale';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
@@ -13,6 +13,7 @@ export default {
   components: {
     GlModal,
     GlLink,
+    GlSprintf,
     CiIcon,
   },
   props: {
@@ -33,13 +34,7 @@ export default {
       );
     },
     modalText() {
-      return sprintf(
-        s__(`Pipeline|You’re about to stop pipeline %{pipelineId}.`),
-        {
-          pipelineId: `<strong>#${this.pipeline.id}</strong>`,
-        },
-        false,
-      );
+      return s__(`Pipeline|You’re about to stop pipeline #%{pipelineId}.`);
     },
     hasRef() {
       return !isEmpty(this.pipeline.ref);
@@ -71,7 +66,13 @@ export default {
     :action-cancel="cancelProps"
     @primary="emitSubmit($event)"
   >
-    <p v-html="modalText /* eslint-disable-line vue/no-v-html */"></p>
+    <p>
+      <gl-sprintf :message="modalText">
+        <template #pipelineId>
+          <strong>{{ pipeline.id }}</strong>
+        </template>
+      </gl-sprintf>
+    </p>
 
     <p v-if="pipeline">
       <ci-icon

locale/gitlab.pot

@@ -25258,7 +25258,7 @@ msgstr ""
 msgid "Pipeline|We are currently unable to fetch pipeline data"
 msgstr ""
 
-msgid "Pipeline|You’re about to stop pipeline %{pipelineId}."
+msgid "Pipeline|You’re about to stop pipeline #%{pipelineId}."
 msgstr ""
 
 msgid "Pipeline|for"

spec/frontend/pipelines/components/pipelines_list/pipieline_stop_modal_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlSprintf } from '@gitlab/ui';
+import PipelineStopModal from '~/pipelines/components/pipelines_list/pipeline_stop_modal.vue';
+import { mockPipelineHeader } from '../../mock_data';
+
+describe('PipelineStopModal', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(PipelineStopModal, {
+      propsData: {
+        pipeline: mockPipelineHeader,
+      },
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('should render "stop pipeline" warning', () => {
+    expect(wrapper.text()).toMatch(`You’re about to stop pipeline #${mockPipelineHeader.id}.`);
+  });
+});