Link to Changed Page if Only One Change Present55925-if-there-is-only-one-changed-page-in-review-app-go-directly-there

Given a static page mapping, and a review app with a single static page
change, the review app link will now go directly to that change instead
of to the home page of the review app.

3 files changed, 72 insertions, 29 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 2f2a37347af..9d88198b72f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -54,6 +54,12 @@ export default {
     deployTimeago() {
       return this.timeFormated(this.deployment.deployed_at);
     },
+    deploymentExternalUrl() {
+      if (this.deployment.changes && this.deployment.changes.length === 1) {
+        return this.deployment.changes[0].external_url;
+      }
+      return this.deployment.external_url;
+    },
     hasExternalUrls() {
       return !!(this.deployment.external_url && this.deployment.external_url_formatted);
     },
@@ -78,7 +84,7 @@ export default {
         : '';
     },
     shouldRenderDropdown() {
-      return this.deployment.changes && this.deployment.changes.length > 0;
+      return this.deployment.changes && this.deployment.changes.length > 1;
     },
     showMemoryUsage() {
       return this.hasMetrics && this.showMetrics;
@@ -159,7 +165,7 @@ export default {
               >
                 <template slot="mainAction" slot-scope="slotProps">
                   <review-app-link
-                    :link="deployment.external_url"
+                    :link="deploymentExternalUrl"
                     :css-class="`deploy-link js-deploy-url inline ${slotProps.className}`"
                   />
                 </template>
@@ -183,7 +189,7 @@ export default {
               </filtered-search-dropdown>
               <review-app-link
                 v-else
-                :link="deployment.external_url"
+                :link="deploymentExternalUrl"
                 css-class="js-deploy-url js-deploy-url-feature-flag deploy-link btn btn-default btn-sm inlin"
               />
             </template>
diff --git a/changelogs/unreleased/55925-if-there-is-only-one-changed-page-in-review-app-go-directly-there.yml b/changelogs/unreleased/55925-if-there-is-only-one-changed-page-in-review-app-go-directly-there.yml
new file mode 100644
index 00000000000..ef3d9844acb
--- /dev/null
+++ b/changelogs/unreleased/55925-if-there-is-only-one-changed-page-in-review-app-go-directly-there.yml
@@ -0,0 +1,5 @@
+---
+title: Review App Link to Changed Page if Only One Change Present
+merge_request: 25048
+author:
+type: changed
diff --git a/spec/javascripts/vue_mr_widget/components/deployment_spec.js b/spec/javascripts/vue_mr_widget/components/deployment_spec.js
index e355416bd27..62fa63fce1f 100644
--- a/spec/javascripts/vue_mr_widget/components/deployment_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/deployment_spec.js
@@ -6,32 +6,36 @@ import mountComponent from '../../helpers/vue_mount_component_helper';
 
 describe('Deployment component', () => {
   const Component = Vue.extend(deploymentComponent);
-  const deploymentMockData = {
-    id: 15,
-    name: 'review/diplo',
-    url: '/root/review-apps/environments/15',
-    stop_url: '/root/review-apps/environments/15/stop',
-    metrics_url: '/root/review-apps/environments/15/deployments/1/metrics',
-    metrics_monitoring_url: '/root/review-apps/environments/15/metrics',
-    external_url: 'http://gitlab.com.',
-    external_url_formatted: 'gitlab',
-    deployed_at: '2017-03-22T22:44:42.258Z',
-    deployed_at_formatted: 'Mar 22, 2017 10:44pm',
-    changes: [
-      {
-        path: 'index.html',
-        external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/index.html',
-      },
-      {
-        path: 'imgs/gallery.html',
-        external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/imgs/gallery.html',
-      },
-      {
-        path: 'about/',
-        external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/about/',
-      },
-    ],
-  };
+  let deploymentMockData;
+
+  beforeEach(() => {
+    deploymentMockData = {
+      id: 15,
+      name: 'review/diplo',
+      url: '/root/review-apps/environments/15',
+      stop_url: '/root/review-apps/environments/15/stop',
+      metrics_url: '/root/review-apps/environments/15/deployments/1/metrics',
+      metrics_monitoring_url: '/root/review-apps/environments/15/metrics',
+      external_url: 'http://gitlab.com.',
+      external_url_formatted: 'gitlab',
+      deployed_at: '2017-03-22T22:44:42.258Z',
+      deployed_at_formatted: 'Mar 22, 2017 10:44pm',
+      changes: [
+        {
+          path: 'index.html',
+          external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/index.html',
+        },
+        {
+          path: 'imgs/gallery.html',
+          external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/imgs/gallery.html',
+        },
+        {
+          path: 'about/',
+          external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/about/',
+        },
+      ],
+    };
+  });
 
   let vm;
 
@@ -207,6 +211,34 @@ describe('Deployment component', () => {
     });
   });
 
+  describe('with a single change', () => {
+    beforeEach(() => {
+      const max = deploymentMockData.changes.length;
+      const min = 0;
+      const change = Math.floor(Math.random() * (max - min)) + min;
+      deploymentMockData.changes = [deploymentMockData.changes[change]];
+
+      vm = mountComponent(Component, {
+        deployment: { ...deploymentMockData },
+        showMetrics: true,
+      });
+    });
+
+    it('renders the link to the review app without dropdown', () => {
+      expect(vm.$el.querySelector('.js-mr-wigdet-deployment-dropdown')).toBeNull();
+      expect(vm.$el.querySelector('.js-deploy-url-feature-flag')).not.toBeNull();
+    });
+
+    it('renders the link to the review app linked to to the first change', () => {
+      const expectedUrl = deploymentMockData.changes[0].external_url;
+      const deployUrl = vm.$el.querySelector('.js-deploy-url-feature-flag');
+
+      expect(vm.$el.querySelector('.js-mr-wigdet-deployment-dropdown')).toBeNull();
+      expect(deployUrl).not.toBeNull();
+      expect(deployUrl.href).toEqual(expectedUrl);
+    });
+  });
+
   describe('deployment status', () => {
     describe('running', () => {
       beforeEach(() => {