Merge branch...

Merge branch '338222-follow-up-from-deployment-rollback-modal-change-form-submit-to-post' into 'master'

Use GlSprintf in deployment rollback modal

See merge request gitlab-org/gitlab!67970

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

 <script>
-/* eslint-disable vue/no-v-html */
 /**
  * Render modal to confirm rollback/redeploy.
  */
-
-import { GlModal } from '@gitlab/ui';
+import { GlModal, GlSprintf, GlLink } from '@gitlab/ui';
 import { escape } from 'lodash';
 import csrf from '~/lib/utils/csrf';
 import { __, s__, sprintf } from '~/locale';
@@ -13,9 +11,10 @@ import eventHub from '../event_hub';
 
 export default {
   name: 'ConfirmRollbackModal',
-
   components: {
     GlModal,
+    GlSprintf,
+    GlLink,
   },
   model: {
     prop: 'visible',
@@ -42,7 +41,6 @@ export default {
       default: null,
     },
   },
-
   computed: {
     modalTitle() {
       const title = this.environment.isLastDeployment
@@ -53,7 +51,6 @@ export default {
         name: escape(this.environment.name),
       });
     },
-
     commitShortSha() {
       if (this.hasMultipleCommits) {
         const { last_deployment } = this.environment;
@@ -62,7 +59,6 @@ export default {
 
       return this.environment.commitShortSha;
     },
-
     commitUrl() {
       if (this.hasMultipleCommits) {
         const { last_deployment } = this.environment;
@@ -71,37 +67,11 @@ export default {
 
       return this.environment.commitUrl;
     },
-
     modalActionText() {
       return this.environment.isLastDeployment
         ? s__('Environments|Re-deploy')
         : s__('Environments|Rollback');
     },
-
-    modalText() {
-      const linkStart = `<a class="commit-sha mr-0" href="${escape(this.commitUrl)}">`;
-      const commitId = escape(this.commitShortSha);
-      const linkEnd = '</a>';
-      const name = escape(this.environment.name);
-      const body = this.environment.isLastDeployment
-        ? s__(
-            'Environments|This action will relaunch the job for commit %{linkStart}%{commitId}%{linkEnd}, putting the environment in a previous version. Are you sure you want to continue?',
-          )
-        : s__(
-            'Environments|This action will run the job defined by %{name} for commit %{linkStart}%{commitId}%{linkEnd} putting the environment in a previous version. You can revert it by re-deploying the latest version of your application. Are you sure you want to continue?',
-          );
-      return sprintf(
-        body,
-        {
-          commitId,
-          linkStart,
-          linkEnd,
-          name,
-        },
-        false,
-      );
-    },
-
     primaryProps() {
       let attributes = [{ variant: 'danger' }];
 
@@ -115,16 +85,13 @@ export default {
       };
     },
   },
-
   methods: {
     handleChange(event) {
       this.$emit('change', event);
     },
-
     onOk() {
       eventHub.$emit('rollbackEnvironment', this.environment);
     },
-
     commitData(lastDeployment, key) {
       if (lastDeployment && lastDeployment.commit) {
         return lastDeployment.commit[key];
@@ -150,6 +117,34 @@ export default {
     @ok="onOk"
     @change="handleChange"
   >
-    <p v-html="modalText"></p>
+    <gl-sprintf
+      v-if="environment.isLastDeployment"
+      :message="
+        s__(
+          'Environments|This action will relaunch the job for commit %{linkStart}%{commitId}%{linkEnd}, putting the environment in a previous version. Are you sure you want to continue?',
+        )
+      "
+    >
+      <template #link>
+        <gl-link :href="commitUrl" target="_blank" class="commit-sha mr-0">{{
+          commitShortSha
+        }}</gl-link>
+      </template>
+    </gl-sprintf>
+    <gl-sprintf
+      v-else
+      :message="
+        s__(
+          'Environments|This action will run the job defined by %{name} for commit %{linkStart}%{commitId}%{linkEnd} putting the environment in a previous version. You can revert it by re-deploying the latest version of your application. Are you sure you want to continue?',
+        )
+      "
+    >
+      <template #name>{{ environment.name }}</template>
+      <template #link>
+        <gl-link :href="commitUrl" target="_blank" class="commit-sha mr-0">{{
+          commitShortSha
+        }}</gl-link>
+      </template>
+    </gl-sprintf>
   </gl-modal>
 </template>

spec/frontend/environments/confirm_rollback_modal_spec.js

-import { GlModal } from '@gitlab/ui';
+import { GlModal, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import ConfirmRollbackModal from '~/environments/components/confirm_rollback_modal.vue';
 import eventHub from '~/environments/event_hub';
 
 describe('Confirm Rollback Modal Component', () => {
   let environment;
+  let component;
 
   const envWithLastDeployment = {
     name: 'test',
@@ -25,6 +26,17 @@ describe('Confirm Rollback Modal Component', () => {
 
   const retryPath = 'test/-/jobs/123/retry';
 
+  const createComponent = (props = {}) => {
+    component = shallowMount(ConfirmRollbackModal, {
+      propsData: {
+        ...props,
+      },
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
   describe.each`
     hasMultipleCommits | environmentData             | retryUrl     | primaryPropsAttrs
     ${true}            | ${envWithLastDeployment}    | ${null}      | ${[{ variant: 'danger' }]}
@@ -37,15 +49,13 @@ describe('Confirm Rollback Modal Component', () => {
       });
 
       it('should show "Rollback" when isLastDeployment is false', () => {
-        const component = shallowMount(ConfirmRollbackModal, {
-          propsData: {
-            environment: {
-              ...environment,
-              isLastDeployment: false,
-            },
-            hasMultipleCommits,
-            retryUrl,
+        createComponent({
+          environment: {
+            ...environment,
+            isLastDeployment: false,
           },
+          hasMultipleCommits,
+          retryUrl,
         });
         const modal = component.find(GlModal);
 
@@ -58,15 +68,14 @@ describe('Confirm Rollback Modal Component', () => {
       });
 
       it('should show "Re-deploy" when isLastDeployment is true', () => {
-        const component = shallowMount(ConfirmRollbackModal, {
-          propsData: {
-            environment: {
-              ...environment,
-              isLastDeployment: true,
-            },
-            hasMultipleCommits,
+        createComponent({
+          environment: {
+            ...environment,
+            isLastDeployment: true,
           },
+          hasMultipleCommits,
         });
+
         const modal = component.find(GlModal);
 
         expect(modal.attributes('title')).toContain('Re-deploy');
@@ -78,12 +87,12 @@ describe('Confirm Rollback Modal Component', () => {
 
       it('should emit the "rollback" event when "ok" is clicked', () => {
         const env = { ...environmentData, isLastDeployment: true };
-        const component = shallowMount(ConfirmRollbackModal, {
-          propsData: {
-            environment: env,
-            hasMultipleCommits,
-          },
+
+        createComponent({
+          environment: env,
+          hasMultipleCommits,
         });
+
         const eventHubSpy = jest.spyOn(eventHub, '$emit');
         const modal = component.find(GlModal);
         modal.vm.$emit('ok');