1 files changed, 44 insertions, 24 deletions
diff --git a/app/assets/javascripts/jobs/components/environments_block.vue b/app/assets/javascripts/jobs/components/environments_block.vue
index ca6386595c7..e6e1d418194 100644
--- a/app/assets/javascripts/jobs/components/environments_block.vue
+++ b/app/assets/javascripts/jobs/components/environments_block.vue
@@ -12,12 +12,16 @@
         type: Object,
         required: true,
       },
+      iconStatus: {
+        type: Object,
+        required: true,
+      },
     },
     computed: {
       environment() {
         let environmentText;
         switch (this.deploymentStatus.status) {
-          case 'latest':
+          case 'last':
             environmentText = sprintf(
               __('This job is the most recent deployment to %{link}.'),
               { link: this.environmentLink },
@@ -32,7 +36,7 @@
                 ),
                 {
                   environmentLink: this.environmentLink,
-                  deploymentLink: this.deploymentLink,
+                  deploymentLink: this.deploymentLink(`#${this.lastDeployment.iid}`),
                 },
                 false,
               );
@@ -56,11 +60,11 @@
             if (this.hasLastDeployment) {
               environmentText = sprintf(
                 __(
-                  'This job is creating a deployment to %{environmentLink} and will overwrite the last %{deploymentLink}.',
+                  'This job is creating a deployment to %{environmentLink} and will overwrite the %{deploymentLink}.',
                 ),
                 {
                   environmentLink: this.environmentLink,
-                  deploymentLink: this.deploymentLink,
+                  deploymentLink: this.deploymentLink(__('latest deployment')),
                 },
                 false,
               );
@@ -78,41 +82,57 @@
         return environmentText;
       },
       environmentLink() {
-        return sprintf(
-          '%{startLink}%{name}%{endLink}',
-          {
-            startLink: `<a href="${this.deploymentStatus.environment.path}">`,
-            name: _.escape(this.deploymentStatus.environment.name),
-            endLink: '</a>',
-          },
-          false,
-        );
+        if (this.hasEnvironment) {
+          return sprintf(
+            '%{startLink}%{name}%{endLink}',
+            {
+              startLink: `<a href="${
+                this.deploymentStatus.environment.environment_path
+              }" class="js-environment-link">`,
+              name: _.escape(this.deploymentStatus.environment.name),
+              endLink: '</a>',
+            },
+            false,
+          );
+        }
+        return '';
       },
-      deploymentLink() {
+      hasLastDeployment() {
+        return this.hasEnvironment && this.deploymentStatus.environment.last_deployment;
+      },
+      lastDeployment() {
+        return this.hasLastDeployment ? this.deploymentStatus.environment.last_deployment : {};
+      },
+      hasEnvironment() {
+        return !_.isEmpty(this.deploymentStatus.environment);
+      },
+      lastDeploymentPath() {
+        return !_.isEmpty(this.lastDeployment.deployable) ? this.lastDeployment.deployable.build_path : '';
+      },
+    },
+    methods: {
+      deploymentLink(name) {
         return sprintf(
           '%{startLink}%{name}%{endLink}',
           {
-            startLink: `<a href="${this.lastDeployment.path}">`,
-            name: _.escape(this.lastDeployment.name),
+            startLink: `<a href="${this.lastDeploymentPath}" class="js-job-deployment-link">`,
+            name,
             endLink: '</a>',
           },
           false,
         );
       },
-      hasLastDeployment() {
-        return this.deploymentStatus.environment.last_deployment;
-      },
-      lastDeployment() {
-        return this.deploymentStatus.environment.last_deployment;
-      },
     },
   };
 </script>
 <template>
   <div class="prepend-top-default js-environment-container">
     <div class="environment-information">
-      <ci-icon :status="deploymentStatus.icon" />
-      <p v-html="environment"></p>
+      <ci-icon :status="iconStatus"/>
+      <p
+        class="inline append-bottom-0"
+        v-html="environment"
+      ></p>
     </div>
   </div>
 </template>