1 files changed, 56 insertions, 38 deletions
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index 310835c5ea9..4deeef4beb9 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -1,56 +1,74 @@
 <script>
-  /**
-  * Renders Rollback or Re deploy button in environments table depending
-  * of the provided property `isLastDeployment`.
-  *
-  * Makes a post request when the button is clicked.
-  */
-  import eventHub from '../event_hub';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-
-  export default {
-    components: {
-      loadingIcon,
+/**
+ * Renders Rollback or Re deploy button in environments table depending
+ * of the provided property `isLastDeployment`.
+ *
+ * Makes a post request when the button is clicked.
+ */
+import { s__ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import eventHub from '../event_hub';
+import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
+
+export default {
+  components: {
+    Icon,
+    LoadingIcon,
+  },
+
+  directives: {
+    tooltip,
+  },
+
+  props: {
+    retryUrl: {
+      type: String,
+      default: '',
     },
-    props: {
-      retryUrl: {
-        type: String,
-        default: '',
-      },
-
-      isLastDeployment: {
-        type: Boolean,
-        default: true,
-      },
+
+    isLastDeployment: {
+      type: Boolean,
+      default: true,
     },
-    data() {
-      return {
-        isLoading: false,
-      };
+  },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+
+  computed: {
+    title() {
+      return this.isLastDeployment ? s__('Environments|Re-deploy to environment') : s__('Environments|Rollback environment');
     },
-    methods: {
-      onClick() {
-        this.isLoading = true;
+  },
+
+  methods: {
+    onClick() {
+      this.isLoading = true;
 
-        eventHub.$emit('postAction', this.retryUrl);
-      },
+      eventHub.$emit('postAction', { endpoint: this.retryUrl });
     },
-  };
+  },
+};
 </script>
 <template>
   <button
+    v-tooltip
     :disabled="isLoading"
+    :title="title"
     type="button"
     class="btn d-none d-sm-none d-md-block"
     @click="onClick"
   >
 
-    <span v-if="isLastDeployment">
-      {{ s__("Environments|Re-deploy") }}
-    </span>
-    <span v-else>
-      {{ s__("Environments|Rollback") }}
-    </span>
+    <icon
+      v-if="isLastDeployment"
+      name="repeat" />
+    <icon
+      v-else
+      name="redo"/>
 
     <loading-icon v-if="isLoading" />
   </button>