Update cluster link text

- Also refactors the environment text function into smaller functions

app/assets/javascripts/jobs/components/environments_block.vue

@@ -19,69 +19,18 @@ export default {
   },
   computed: {
     environment() {
-      let environmentText;
       switch (this.deploymentStatus.status) {
         case 'last':
-          environmentText = sprintf(
-            __('This job is the most recent deployment to %{link}.'),
-            { link: this.environmentLink },
-            false,
-          );
-          break;
+          return this.lastEnvironmentMessage();
         case 'out_of_date':
-          if (this.hasLastDeployment) {
-            environmentText = sprintf(
-              __(
-                'This job is an out-of-date deployment to %{environmentLink}. View the most recent deployment %{deploymentLink}.',
-              ),
-              {
-                environmentLink: this.environmentLink,
-                deploymentLink: this.deploymentLink(`#${this.lastDeployment.iid}`),
-              },
-              false,
-            );
-          } else {
-            environmentText = sprintf(
-              __('This job is an out-of-date deployment to %{environmentLink}.'),
-              { environmentLink: this.environmentLink },
-              false,
-            );
-          }
-
-          break;
+          return this.outOfDateEnvironmentMessage();
         case 'failed':
-          environmentText = sprintf(
-            __('The deployment of this job to %{environmentLink} did not succeed.'),
-            { environmentLink: this.environmentLink },
-            false,
-          );
-          break;
+          return this.failedEnvironmentMessage();
         case 'creating':
-          if (this.hasLastDeployment) {
-            environmentText = sprintf(
-              __(
-                'This job is creating a deployment to %{environmentLink} and will overwrite the %{deploymentLink}.',
-              ),
-              {
-                environmentLink: this.environmentLink,
-                deploymentLink: this.deploymentLink(__('latest deployment')),
-              },
-              false,
-            );
-          } else {
-            environmentText = sprintf(
-              __('This job is creating a deployment to %{environmentLink}.'),
-              { environmentLink: this.environmentLink },
-              false,
-            );
-          }
-          break;
+          return this.creatingEnvironmentMessage();
         default:
-          break;
+          return '';
       }
-      return environmentText && this.hasCluster
-        ? `${environmentText} ${this.clusterText}`
-        : environmentText;
     },
     environmentLink() {
       if (this.hasEnvironment) {
@@ -137,11 +86,6 @@ export default {
         false,
       );
     },
-    clusterText() {
-      return this.hasCluster
-        ? sprintf(__('Cluster %{cluster} was used.'), { cluster: this.clusterNameOrLink }, false)
-        : '';
-    },
   },
   methods: {
     deploymentLink(name) {
@@ -155,6 +99,91 @@ export default {
         false,
       );
     },
+    failedEnvironmentMessage() {
+      const { environmentLink } = this;
+
+      return sprintf(
+        __('The deployment of this job to %{environmentLink} did not succeed.'),
+        { environmentLink },
+        false,
+      );
+    },
+    lastEnvironmentMessage() {
+      const { environmentLink, clusterNameOrLink, hasCluster } = this;
+
+      const message = hasCluster
+        ? __('This job is deployed to %{environmentLink} using cluster %{clusterNameOrLink}.')
+        : __('This job is deployed to %{environmentLink}.');
+
+      return sprintf(message, { environmentLink, clusterNameOrLink }, false);
+    },
+    outOfDateEnvironmentMessage() {
+      const { hasLastDeployment, hasCluster, environmentLink, clusterNameOrLink } = this;
+
+      if (hasLastDeployment) {
+        const message = hasCluster
+          ? __(
+              'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink}. View the %{deploymentLink}.',
+            )
+          : __(
+              'This job is an out-of-date deployment to %{environmentLink}. View the %{deploymentLink}.',
+            );
+
+        return sprintf(
+          message,
+          {
+            environmentLink,
+            clusterNameOrLink,
+            deploymentLink: this.deploymentLink(__('most recent deployment')),
+          },
+          false,
+        );
+      }
+
+      const message = hasCluster
+        ? __(
+            'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink}.',
+          )
+        : __('This job is an out-of-date deployment to %{environmentLink}.');
+
+      return sprintf(
+        message,
+        {
+          environmentLink,
+          clusterNameOrLink,
+        },
+        false,
+      );
+    },
+    creatingEnvironmentMessage() {
+      const { hasLastDeployment, hasCluster, environmentLink, clusterNameOrLink } = this;
+
+      if (hasLastDeployment) {
+        const message = hasCluster
+          ? __(
+              'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink}. This will overwrite the %{deploymentLink}.',
+            )
+          : __(
+              'This job is creating a deployment to %{environmentLink}. This will overwrite the %{deploymentLink}.',
+            );
+
+        return sprintf(
+          message,
+          {
+            environmentLink,
+            clusterNameOrLink,
+            deploymentLink: this.deploymentLink(__('latest deployment')),
+          },
+          false,
+        );
+      }
+
+      return sprintf(
+        __('This job is creating a deployment to %{environmentLink}.'),
+        { environmentLink },
+        false,
+      );
+    },
   },
 };
 </script>

changelogs/unreleased/31678-update-cluster-link-text.yml

+---
+title: Update cluster link text
+merge_request: 18322
+author:
+type: changed

locale/gitlab.pot

@@ -3348,9 +3348,6 @@ msgstr ""
 msgid "Closes this %{quick_action_target}."
 msgstr ""
 
-msgid "Cluster %{cluster} was used."
-msgstr ""
-
 msgid "Cluster Health"
 msgstr ""
 
@@ -16662,21 +16659,36 @@ msgstr ""
 msgid "This job has not started yet"
 msgstr ""
 
+msgid "This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink}."
+msgstr ""
+
+msgid "This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink}. View the %{deploymentLink}."
+msgstr ""
+
 msgid "This job is an out-of-date deployment to %{environmentLink}."
 msgstr ""
 
-msgid "This job is an out-of-date deployment to %{environmentLink}. View the most recent deployment %{deploymentLink}."
+msgid "This job is an out-of-date deployment to %{environmentLink}. View the %{deploymentLink}."
 msgstr ""
 
 msgid "This job is archived. Only the complete pipeline can be retried."
 msgstr ""
 
-msgid "This job is creating a deployment to %{environmentLink} and will overwrite the %{deploymentLink}."
+msgid "This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink}. This will overwrite the %{deploymentLink}."
 msgstr ""
 
 msgid "This job is creating a deployment to %{environmentLink}."
 msgstr ""
 
+msgid "This job is creating a deployment to %{environmentLink}. This will overwrite the %{deploymentLink}."
+msgstr ""
+
+msgid "This job is deployed to %{environmentLink} using cluster %{clusterNameOrLink}."
+msgstr ""
+
+msgid "This job is deployed to %{environmentLink}."
+msgstr ""
+
 msgid "This job is in pending state and is waiting to be picked by a runner"
 msgstr ""
 
@@ -16692,9 +16704,6 @@ msgstr ""
 msgid "This job is stuck because you don't have any active runners that can run this job."
 msgstr ""
 
-msgid "This job is the most recent deployment to %{link}."
-msgstr ""
-
 msgid "This job requires a manual action"
 msgstr ""
 
@@ -19713,6 +19722,9 @@ msgstr ""
 msgid "missing"
 msgstr ""
 
+msgid "most recent deployment"
+msgstr ""
+
 msgid "mrWidgetCommitsAdded|%{commitCount} and %{mergeCommitCount} will be added to %{targetBranch}."
 msgstr ""
 

spec/features/projects/jobs_spec.rb

@@ -534,7 +534,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
         end
 
         it 'shows deployment message' do
-          expect(page).to have_content 'This job is the most recent deployment to production'
+          expect(page).to have_content 'This job is deployed to production'
           expect(find('.js-environment-link')['href']).to match("environments/#{environment.id}")
         end
 
@@ -548,14 +548,14 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
           end
 
           it 'shows the name of the cluster' do
-            expect(page).to have_content 'Cluster the-cluster was used'
+            expect(page).to have_content 'using cluster the-cluster'
           end
 
           context 'when the user is not able to view the cluster' do
             let(:user_access_level) { :developer }
 
             it 'includes only the name of the cluster without a link' do
-              expect(page).to have_content 'Cluster the-cluster was used'
+              expect(page).to have_content 'using cluster the-cluster'
               expect(page).not_to have_link 'the-cluster'
             end
           end
@@ -623,8 +623,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
         let!(:second_deployment) { create(:deployment, :success, environment: environment, deployable: second_build) }
 
         it 'shows deployment message' do
-          expected_text = 'This job is an out-of-date deployment ' \
-            "to staging. View the most recent deployment ##{second_deployment.iid}."
+          expected_text = 'This job is an out-of-date deployment to staging. View the most recent deployment.'
 
           expect(page).to have_css('.environment-information', text: expected_text)
         end

spec/javascripts/jobs/components/environments_block_spec.js

@@ -2,6 +2,9 @@ import Vue from 'vue';
 import component from '~/jobs/components/environments_block.vue';
 import mountComponent from '../../helpers/vue_mount_component_helper';
 
+const TEST_CLUSTER_NAME = 'test_cluster';
+const TEST_CLUSTER_PATH = 'path/to/test_cluster';
+
 describe('Environments block', () => {
   const Component = Vue.extend(component);
   let vm;
@@ -20,22 +23,53 @@ describe('Environments block', () => {
 
   const lastDeployment = { iid: 'deployment', deployable: { build_path: 'bar' } };
 
+  const createEnvironmentWithLastDeployment = () => ({
+    ...environment,
+    last_deployment: { ...lastDeployment },
+  });
+
+  const createEnvironmentWithCluster = () => ({
+    ...environment,
+    last_deployment: {
+      ...lastDeployment,
+      cluster: { name: TEST_CLUSTER_NAME, path: TEST_CLUSTER_PATH },
+    },
+  });
+
+  const createComponent = (deploymentStatus = {}) => {
+    vm = mountComponent(Component, {
+      deploymentStatus,
+      iconStatus: status,
+    });
+  };
+
+  const findText = () => vm.$el.textContent.trim();
+  const findJobDeploymentLink = () => vm.$el.querySelector('.js-job-deployment-link');
+  const findEnvironmentLink = () => vm.$el.querySelector('.js-environment-link');
+  const findClusterLink = () => vm.$el.querySelector('.js-job-cluster-link');
+
   afterEach(() => {
     vm.$destroy();
   });
 
   describe('with last deployment', () => {
     it('renders info for most recent deployment', () => {
-      vm = mountComponent(Component, {
-        deploymentStatus: {
-          status: 'last',
-          environment,
-        },
-        iconStatus: status,
+      createComponent({
+        status: 'last',
+        environment,
       });
 
-      expect(vm.$el.textContent.trim()).toEqual(
-        'This job is the most recent deployment to environment.',
+      expect(findText()).toEqual('This job is deployed to environment.');
+    });
+
+    it('renders info with cluster', () => {
+      createComponent({
+        status: 'last',
+        environment: createEnvironmentWithCluster(),
+      });
+
+      expect(findText()).toEqual(
+        `This job is deployed to environment using cluster ${TEST_CLUSTER_NAME}.`,
       );
     });
   });
@@ -43,133 +77,106 @@ describe('Environments block', () => {
   describe('with out of date deployment', () => {
     describe('with last deployment', () => {
       it('renders info for out date and most recent', () => {
-        vm = mountComponent(Component, {
-          deploymentStatus: {
-            status: 'out_of_date',
-            environment: Object.assign({}, environment, {
-              last_deployment: lastDeployment,
-            }),
-          },
-          iconStatus: status,
+        createComponent({
+          status: 'out_of_date',
+          environment: createEnvironmentWithLastDeployment(),
         });
 
-        expect(vm.$el.textContent.trim()).toEqual(
-          'This job is an out-of-date deployment to environment. View the most recent deployment #deployment.',
+        expect(findText()).toEqual(
+          'This job is an out-of-date deployment to environment. View the most recent deployment.',
         );
 
-        expect(vm.$el.querySelector('.js-job-deployment-link').getAttribute('href')).toEqual('bar');
+        expect(findJobDeploymentLink().getAttribute('href')).toEqual('bar');
+      });
+
+      it('renders info with cluster', () => {
+        createComponent({
+          status: 'out_of_date',
+          environment: createEnvironmentWithCluster(),
+        });
+
+        expect(findText()).toEqual(
+          `This job is an out-of-date deployment to environment using cluster ${TEST_CLUSTER_NAME}. View the most recent deployment.`,
+        );
       });
     });
 
     describe('without last deployment', () => {
       it('renders info about out of date deployment', () => {
-        vm = mountComponent(Component, {
-          deploymentStatus: {
-            status: 'out_of_date',
-            environment,
-          },
-          iconStatus: status,
+        createComponent({
+          status: 'out_of_date',
+          environment,
         });
 
-        expect(vm.$el.textContent.trim()).toEqual(
-          'This job is an out-of-date deployment to environment.',
-        );
+        expect(findText()).toEqual('This job is an out-of-date deployment to environment.');
       });
     });
   });
 
   describe('with failed deployment', () => {
     it('renders info about failed deployment', () => {
-      vm = mountComponent(Component, {
-        deploymentStatus: {
-          status: 'failed',
-          environment,
-        },
-        iconStatus: status,
+      createComponent({
+        status: 'failed',
+        environment,
       });
 
-      expect(vm.$el.textContent.trim()).toEqual(
-        'The deployment of this job to environment did not succeed.',
-      );
+      expect(findText()).toEqual('The deployment of this job to environment did not succeed.');
     });
   });
 
   describe('creating deployment', () => {
     describe('with last deployment', () => {
       it('renders info about creating deployment and overriding latest deployment', () => {
-        vm = mountComponent(Component, {
-          deploymentStatus: {
-            status: 'creating',
-            environment: Object.assign({}, environment, {
-              last_deployment: lastDeployment,
-            }),
-          },
-          iconStatus: status,
+        createComponent({
+          status: 'creating',
+          environment: createEnvironmentWithLastDeployment(),
         });
 
-        expect(vm.$el.textContent.trim()).toEqual(
-          'This job is creating a deployment to environment and will overwrite the latest deployment.',
+        expect(findText()).toEqual(
+          'This job is creating a deployment to environment. This will overwrite the latest deployment.',
         );
 
-        expect(vm.$el.querySelector('.js-job-deployment-link').getAttribute('href')).toEqual('bar');
+        expect(findJobDeploymentLink().getAttribute('href')).toEqual('bar');
+        expect(findEnvironmentLink().getAttribute('href')).toEqual(environment.environment_path);
+        expect(findClusterLink()).toBeNull();
       });
     });
 
     describe('without last deployment', () => {
       it('renders info about failed deployment', () => {
-        vm = mountComponent(Component, {
-          deploymentStatus: {
-            status: 'creating',
-            environment,
-          },
-          iconStatus: status,
+        createComponent({
+          status: 'creating',
+          environment,
         });
 
-        expect(vm.$el.textContent.trim()).toEqual(
-          'This job is creating a deployment to environment.',
-        );
+        expect(findText()).toEqual('This job is creating a deployment to environment.');
       });
     });
 
     describe('without environment', () => {
       it('does not render environment link', () => {
-        vm = mountComponent(Component, {
-          deploymentStatus: {
-            status: 'creating',
-            environment: null,
-          },
-          iconStatus: status,
+        createComponent({
+          status: 'creating',
+          environment: null,
         });
 
-        expect(vm.$el.querySelector('.js-environment-link')).toBeNull();
+        expect(findEnvironmentLink()).toBeNull();
       });
     });
   });
 
   describe('with a cluster', () => {
     it('renders the cluster link', () => {
-      const cluster = {
-        name: 'the-cluster',
-        path: '/the-cluster-path',
-      };
-      vm = mountComponent(Component, {
-        deploymentStatus: {
-          status: 'last',
-          environment: Object.assign({}, environment, {
-            last_deployment: {
-              ...lastDeployment,
-              cluster,
-            },
-          }),
-        },
-        iconStatus: status,
+      createComponent({
+        status: 'last',
+        environment: createEnvironmentWithCluster(),
       });
 
-      expect(vm.$el.textContent.trim()).toContain('Cluster the-cluster was used.');
-
-      expect(vm.$el.querySelector('.js-job-cluster-link').getAttribute('href')).toEqual(
-        '/the-cluster-path',
+      expect(findText()).toEqual(
+        `This job is deployed to environment using cluster ${TEST_CLUSTER_NAME}.`,
       );
+
+      expect(findClusterLink().getAttribute('href')).toEqual(TEST_CLUSTER_PATH);
     });
 
     describe('when the cluster is missing the path', () => {
@@ -177,39 +184,20 @@ describe('Environments block', () => {
         const cluster = {
           name: 'the-cluster',
         };
-        vm = mountComponent(Component, {
-          deploymentStatus: {
-            status: 'last',
-            environment: Object.assign({}, environment, {
-              last_deployment: {
-                ...lastDeployment,
-                cluster,
-              },
-            }),
-          },
-          iconStatus: status,
-        });
-
-        expect(vm.$el.textContent.trim()).toContain('Cluster the-cluster was used.');
-
-        expect(vm.$el.querySelector('.js-job-cluster-link')).toBeNull();
-      });
-    });
-  });
-
-  describe('without a cluster', () => {
-    it('does not render a cluster link', () => {
-      vm = mountComponent(Component, {
-        deploymentStatus: {
+        createComponent({
           status: 'last',
           environment: Object.assign({}, environment, {
-            last_deployment: lastDeployment,
+            last_deployment: {
+              ...lastDeployment,
+              cluster,
+            },
           }),
-        },
-        iconStatus: status,
-      });
+        });
+
+        expect(findText()).toContain('using cluster the-cluster.');
 
-      expect(vm.$el.querySelector('.js-job-cluster-link')).toBeNull();
+        expect(findClusterLink()).toBeNull();
+      });
     });
   });
 });