Add Component to Confirm Environment Rollback

Ensure a vue.js component to confirm the re-deployment/rollback of an
environment pops up when rollback/re-deploy has been clicked so the user
must confirm their actions before accidentally rolling back or
re-deploying an environment.

Only on the `environment-table` view.

5 files changed, 163 insertions, 13 deletions

diff --git a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue
new file mode 100644
index 00000000000..a8ee3f4ac10
--- /dev/null
+++ b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue
@@ -0,0 +1,108 @@
+<script>
+/**
+ * Render modal to confirm rollback/redeploy.
+ */
+
+import _ from 'underscore';
+import { GlModal } from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
+
+import eventHub from '../event_hub';
+
+export default {
+  name: 'ConfirmRollbackModal',
+
+  components: {
+    GlModal,
+  },
+
+  props: {
+    environment: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    modalTitle() {
+      const title = this.environment.isLastDeployment
+        ? s__('Environments|Re-deploy environment %{name}?')
+        : s__('Environments|Rollback environment %{name}?');
+
+      return sprintf(title, {
+        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');
+    },
+
+    commitTitle() {
+      const { last_deployment } = this.environment;
+      return this.commitData(last_deployment, 'title');
+    },
+
+    modalText() {
+      const linkStart = `<a class="commit-sha" 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,
+      );
+    },
+
+    modalActionText() {
+      return this.environment.isLastDeployment
+        ? s__('Environments|Re-deploy')
+        : s__('Environments|Rollback');
+    },
+  },
+
+  methods: {
+    onOk() {
+      eventHub.$emit('rollbackEnvironment', this.environment);
+    },
+
+    commitData(lastDeployment, key) {
+      if (lastDeployment && lastDeployment.commit) {
+        return lastDeployment.commit[key];
+      }
+
+      return '';
+    },
+  },
+};
+</script>
+<template>
+  <gl-modal
+    :title="modalTitle"
+    modal-id="confirm-rollback-modal"
+    :ok-title="modalActionText"
+    ok-variant="danger"
+    @ok="onOk"
+  >
+    <p v-html="modalText"></p>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 503c1b38f71..eb817beab9d 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -556,6 +556,7 @@ export default {
 
         <rollback-component
           v-if="canRetry"
+          :environment="model"
           :is-last-deployment="isLastDeployment"
           :retry-url="retryUrl"
         />
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index 50c86af057c..266cdc42518 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -5,29 +5,38 @@
  *
  * Makes a post request when the button is clicked.
  */
+import { GlTooltipDirective, GlLoadingIcon, GlModalDirective, GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import { GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
+import ConfirmRollbackModal from './confirm_rollback_modal.vue';
 import eventHub from '../event_hub';
 
 export default {
   components: {
     Icon,
     GlLoadingIcon,
+    GlButton,
+    ConfirmRollbackModal,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    GlModal: GlModalDirective,
   },
   props: {
-    retryUrl: {
-      type: String,
-      default: '',
-    },
-
     isLastDeployment: {
       type: Boolean,
       default: true,
     },
+
+    environment: {
+      type: Object,
+      required: true,
+    },
+
+    retryUrl: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -45,23 +54,31 @@ export default {
 
   methods: {
     onClick() {
-      this.isLoading = true;
-
-      eventHub.$emit('postAction', { endpoint: this.retryUrl });
+      eventHub.$emit('requestRollbackEnvironment', {
+        ...this.environment,
+        retryUrl: this.retryUrl,
+        isLastDeployment: this.isLastDeployment,
+      });
+      eventHub.$on('rollbackEnvironment', environment => {
+        if (environment.id === this.environment.id) {
+          this.isLoading = true;
+        }
+      });
     },
   },
 };
 </script>
 <template>
-  <button
+  <gl-button
     v-gl-tooltip
+    v-gl-modal.confirm-rollback-modal
+    variant="secondary"
     :disabled="isLoading"
     :title="title"
-    type="button"
-    class="btn d-none d-sm-none d-md-block"
+    class="d-none d-md-block"
     @click="onClick"
   >
     <icon v-if="isLastDeployment" name="repeat" /> <icon v-else name="redo" />
     <gl-loading-icon v-if="isLoading" />
-  </button>
+  </gl-button>
 </template>
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index aa2417d3194..6e55c3f901a 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -6,11 +6,13 @@ import eventHub from '../event_hub';
 import environmentsMixin from '../mixins/environments_mixin';
 import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
 import StopEnvironmentModal from './stop_environment_modal.vue';
+import ConfirmRollbackModal from './confirm_rollback_modal.vue';
 
 export default {
   components: {
     emptyState,
     StopEnvironmentModal,
+    ConfirmRollbackModal,
   },
 
   mixins: [CIPaginationMixin, environmentsMixin],
@@ -87,6 +89,7 @@ export default {
 <template>
   <div :class="cssContainerClass">
     <stop-environment-modal :environment="environmentInStopModal" />
+    <confirm-rollback-modal :environment="environmentInRollbackModal" />
 
     <div class="top-area">
       <tabs :tabs="tabs" scope="environments" @onChangeTab="onChangeTab" />
diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js
index 9d83840c87c..71b6b578196 100644
--- a/app/assets/javascripts/environments/mixins/environments_mixin.js
+++ b/app/assets/javascripts/environments/mixins/environments_mixin.js
@@ -36,6 +36,7 @@ export default {
       page: getParameterByName('page') || '1',
       requestData: {},
       environmentInStopModal: {},
+      environmentInRollbackModal: {},
     };
   },
 
@@ -116,6 +117,10 @@ export default {
       this.environmentInStopModal = environment;
     },
 
+    updateRollbackModal(environment) {
+      this.environmentInRollbackModal = environment;
+    },
+
     stopEnvironment(environment) {
       const endpoint = environment.stop_path;
       const errorMessage = s__(
@@ -123,6 +128,16 @@ export default {
       );
       this.postAction({ endpoint, errorMessage });
     },
+
+    rollbackEnvironment(environment) {
+      const { retryUrl, isLastDeployment } = environment;
+      const errorMessage = isLastDeployment
+        ? s__('Environments|An error occurred while re-deploying the environment, please try again')
+        : s__(
+            'Environments|An error occurred while rolling back the environment, please try again',
+          );
+      this.postAction({ endpoint: retryUrl, errorMessage });
+    },
   },
 
   computed: {
@@ -181,11 +196,17 @@ export default {
     eventHub.$on('postAction', this.postAction);
     eventHub.$on('requestStopEnvironment', this.updateStopModal);
     eventHub.$on('stopEnvironment', this.stopEnvironment);
+
+    eventHub.$on('requestRollbackEnvironment', this.updateRollbackModal);
+    eventHub.$on('rollbackEnvironment', this.rollbackEnvironment);
   },
 
   beforeDestroy() {
     eventHub.$off('postAction', this.postAction);
     eventHub.$off('requestStopEnvironment', this.updateStopModal);
     eventHub.$off('stopEnvironment', this.stopEnvironment);
+
+    eventHub.$off('requestRollbackEnvironment', this.updateRollbackModal);
+    eventHub.$off('rollbackEnvironment', this.rollbackEnvironment);
   },
 };