1 files changed, 88 insertions, 47 deletions

diff --git a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue
index 76ad74e04d0..4783b92942c 100644
--- a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue
+++ b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue
@@ -1,29 +1,46 @@
 <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 { s__, sprintf } from '~/locale';
+import csrf from '~/lib/utils/csrf';
+import { __, s__, sprintf } from '~/locale';
 
 import eventHub from '../event_hub';
 
 export default {
   name: 'ConfirmRollbackModal',
-
   components: {
     GlModal,
+    GlSprintf,
+    GlLink,
+  },
+  model: {
+    prop: 'visible',
+    event: 'change',
   },
-
   props: {
     environment: {
       type: Object,
       required: true,
     },
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    hasMultipleCommits: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    retryUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
-
   computed: {
     modalTitle() {
       const title = this.environment.isLastDeployment
@@ -34,58 +51,47 @@ export default {
         name: escape(this.environment.name),
       });
     },
-
     commitShortSha() {
-      const { last_deployment } = this.environment;
-      return this.commitData(last_deployment, 'short_id');
-    },
-
-    commitUrl() {
-      const { last_deployment } = this.environment;
-      return this.commitData(last_deployment, 'commit_path');
-    },
+      if (this.hasMultipleCommits) {
+        const { last_deployment } = this.environment;
+        return this.commitData(last_deployment, 'short_id');
+      }
 
-    commitTitle() {
-      const { last_deployment } = this.environment;
-      return this.commitData(last_deployment, 'title');
+      return this.environment.commitShortSha;
     },
+    commitUrl() {
+      if (this.hasMultipleCommits) {
+        const { last_deployment } = this.environment;
+        return this.commitData(last_deployment, 'commit_path');
+      }
 
-    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.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,
-      );
+      return this.environment.commitUrl;
     },
-
     modalActionText() {
       return this.environment.isLastDeployment
         ? s__('Environments|Re-deploy')
         : s__('Environments|Rollback');
     },
-  },
+    primaryProps() {
+      let attributes = [{ variant: 'danger' }];
+
+      if (this.retryUrl) {
+        attributes = [...attributes, { 'data-method': 'post' }, { href: this.retryUrl }];
+      }
 
+      return {
+        text: this.modalActionText,
+        attributes,
+      };
+    },
+  },
   methods: {
+    handleChange(event) {
+      this.$emit('change', event);
+    },
     onOk() {
       eventHub.$emit('rollbackEnvironment', this.environment);
     },
-
     commitData(lastDeployment, key) {
       if (lastDeployment && lastDeployment.commit) {
         return lastDeployment.commit[key];
@@ -94,16 +100,51 @@ export default {
       return '';
     },
   },
+  csrf,
+  cancelProps: {
+    text: __('Cancel'),
+    attributes: [{ variant: 'danger' }],
+  },
 };
 </script>
 <template>
   <gl-modal
     :title="modalTitle"
+    :visible="visible"
+    :action-cancel="$options.cancelProps"
+    :action-primary="primaryProps"
     modal-id="confirm-rollback-modal"
-    :ok-title="modalActionText"
-    ok-variant="danger"
     @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>