1 files changed, 29 insertions, 27 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
index 6c87287a4c4..57c52a2016a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -2,6 +2,7 @@
 import Icon from '~/vue_shared/components/icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import FilteredSearchDropdown from '~/vue_shared/components/filtered_search_dropdown.vue';
+import { __ } from '~/locale';
 import timeagoMixin from '../../vue_shared/mixins/timeago';
 import tooltip from '../../vue_shared/directives/tooltip';
 import LoadingButton from '../../vue_shared/components/loading_button.vue';
@@ -9,6 +10,7 @@ import { visitUrl } from '../../lib/utils/url_utility';
 import createFlash from '../../flash';
 import MemoryUsage from './memory_usage.vue';
 import StatusIcon from './mr_widget_status_icon.vue';
+import ReviewAppLink from './review_app_link.vue';
 import MRWidgetService from '../services/mr_widget_service';
 
 export default {
@@ -20,6 +22,7 @@ export default {
     Icon,
     TooltipOnTruncate,
     FilteredSearchDropdown,
+    ReviewAppLink,
   },
   directives: {
     tooltip,
@@ -31,6 +34,11 @@ export default {
       required: true,
     },
   },
+  deployedTextMap: {
+    running: __('Deploying to'),
+    success: __('Deployed to'),
+    failed: __('Failed to deploy to'),
+  },
   data() {
     const features = window.gon.features || {};
     return {
@@ -54,10 +62,19 @@ export default {
     hasMetrics() {
       return !!this.deployment.metrics_url;
     },
+    deployedText() {
+      return this.$options.deployedTextMap[this.deployment.status];
+    },
+    shouldRenderDropdown() {
+      return (
+        this.enableCiEnvironmentsStatusChanges &&
+        (this.deployment.changes && this.deployment.changes.length > 0)
+      );
+    },
   },
   methods: {
     stopEnvironment() {
-      const msg = 'Are you sure you want to stop this environment?';
+      const msg = __('Are you sure you want to stop this environment?');
       const isConfirmed = confirm(msg); // eslint-disable-line
 
       if (isConfirmed) {
@@ -87,10 +104,10 @@ export default {
     <div class="ci-widget media">
       <div class="media-body">
         <div class="deploy-body">
-          <div class="deployment-info">
+          <div class="js-deployment-info deployment-info">
             <template v-if="hasDeploymentMeta">
               <span>
-                Deployed to
+                {{ deployedText }}
               </span>
               <tooltip-on-truncate
                 :title="deployment.name"
@@ -124,7 +141,7 @@ export default {
           <div>
             <template v-if="hasExternalUrls">
               <filtered-search-dropdown
-                v-if="enableCiEnvironmentsStatusChanges"
+                v-if="shouldRenderDropdown"
                 class="js-mr-wigdet-deployment-dropdown inline"
                 :items="deployment.changes"
                 :main-action-link="deployment.external_url"
@@ -134,18 +151,10 @@ export default {
                   slot="mainAction"
                   slot-scope="slotProps"
                 >
-                  <a
-                    :href="deployment.external_url"
-                    target="_blank"
-                    rel="noopener noreferrer nofollow"
-                    class="deploy-link js-deploy-url inline"
-                    :class="slotProps.className"
-                  >
-                    <span>
-                      {{ __('View app') }}
-                      <icon name="external-link" />
-                    </span>
-                  </a>
+                  <review-app-link
+                    :link="deployment.external_url"
+                    :css-class="`deploy-link js-deploy-url inline ${slotProps.className}`"
+                  />
                 </template>
 
                 <template
@@ -168,18 +177,11 @@ export default {
                   </a>
                 </template>
               </filtered-search-dropdown>
-              <a
+              <review-app-link
                 v-else
-                :href="deployment.external_url"
-                target="_blank"
-                rel="noopener noreferrer nofollow"
-                class="js-deploy-url js-deploy-url-feature-flag deploy-link btn btn-default btn-sm inline"
-              >
-                <span>
-                  {{ __('View app') }}
-                  <icon name="external-link" />
-                </span>
-              </a>
+                :link="deployment.external_url"
+                css-class="js-deploy-url js-deploy-url-feature-flag deploy-link btn btn-default btn-sm inlin"
+              />
             </template>
             <loading-button
               v-if="deployment.stop_url"