Update pipeline and commit URL and text on CI status change25811-pipeline-number-and-url-do-not-update-when-new-pipeline-is-triggered

6 files changed, 56 insertions, 5 deletions

diff --git a/app/assets/javascripts/merge_request_widget.js.es6 b/app/assets/javascripts/merge_request_widget.js.es6
index 7cc319e2f4e..fa782ebbedf 100644
--- a/app/assets/javascripts/merge_request_widget.js.es6
+++ b/app/assets/javascripts/merge_request_widget.js.es6
@@ -154,12 +154,22 @@
             return;
           }
           if (data.environments && data.environments.length) _this.renderEnvironments(data.environments);
-          if (data.status !== _this.opts.ci_status && (data.status != null)) {
+          if (data.status !== _this.opts.ci_status ||
+              data.sha !== _this.opts.ci_sha ||
+              data.pipeline !== _this.opts.ci_pipeline) {
             _this.opts.ci_status = data.status;
             _this.showCIStatus(data.status);
             if (data.coverage) {
               _this.showCICoverage(data.coverage);
             }
+            if (data.pipeline) {
+              _this.opts.ci_pipeline = data.pipeline;
+              _this.updatePipelineUrls(data.pipeline);
+            }
+            if (data.sha) {
+              _this.opts.ci_sha = data.sha;
+              _this.updateCommitUrls(data.sha);
+            }
             if (showNotification) {
               status = _this.ciLabelForStatus(data.status);
               if (status === "preparing") {
@@ -248,6 +258,16 @@
       return $('.js-merge-button,.accept-action .dropdown-toggle').removeClass('btn-danger btn-info btn-create').addClass(css_class);
     };
 
+    MergeRequestWidget.prototype.updatePipelineUrls = function(id) {
+      const pipelineUrl = this.opts.pipeline_path;
+      $('.pipeline').text(`#${id}`).attr('href', [pipelineUrl, id].join('/'));
+    };
+
+    MergeRequestWidget.prototype.updateCommitUrls = function(id) {
+      const commitsUrl = this.opts.commits_path;
+      $('.js-commit-link').text(`#${id}`).attr('href', [commitsUrl, id].join('/'));
+    };
+
     return MergeRequestWidget;
   })();
 })(window.gl || (window.gl = {}));
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index 3492502e296..6eb542e4bd8 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -434,7 +434,8 @@ class Projects::MergeRequestsController < Projects::ApplicationController
       title: merge_request.title,
       sha: (merge_request.diff_head_commit.short_id if merge_request.diff_head_sha),
       status: status,
-      coverage: coverage
+      coverage: coverage,
+      pipeline: pipeline.try(:id)
     }
 
     render json: response
diff --git a/app/views/projects/merge_requests/widget/_heading.html.haml b/app/views/projects/merge_requests/widget/_heading.html.haml
index 804a4a2473b..0e3af62ebc2 100644
--- a/app/views/projects/merge_requests/widget/_heading.html.haml
+++ b/app/views/projects/merge_requests/widget/_heading.html.haml
@@ -10,7 +10,7 @@
           = ci_label_for_status(status)
         for
         = succeed "." do
-          = link_to @pipeline.short_sha, namespace_project_commit_path(@merge_request.source_project.namespace, @merge_request.source_project, @pipeline.sha), class: "monospace"
+          = link_to @pipeline.short_sha, namespace_project_commit_path(@merge_request.source_project.namespace, @merge_request.source_project, @pipeline.sha), class: "monospace js-commit-link"
         %span.ci-coverage
 
 - elsif @merge_request.has_ci?
diff --git a/app/views/projects/merge_requests/widget/_show.html.haml b/app/views/projects/merge_requests/widget/_show.html.haml
index 38328501ffd..f07e6b3ad54 100644
--- a/app/views/projects/merge_requests/widget/_show.html.haml
+++ b/app/views/projects/merge_requests/widget/_show.html.haml
@@ -24,6 +24,10 @@
       preparing: "{{status}} build",
       normal: "Build {{status}}"
     },
+    ci_sha: "#{@merge_request.head_pipeline ? @merge_request.head_pipeline.short_sha : ''}",
+    ci_pipeline: #{@merge_request.head_pipeline.try(:id).to_json},
+    commits_path: "#{project_commits_path(@project)}",
+    pipeline_path: "#{project_pipelines_path(@project)}",
     pipelines_path: "#{pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}"
   };
 
diff --git a/changelogs/unreleased/25811-pipeline-number-and-url-do-not-update-when-new-pipeline-is-triggered.yml b/changelogs/unreleased/25811-pipeline-number-and-url-do-not-update-when-new-pipeline-is-triggered.yml
new file mode 100644
index 00000000000..f74e9fa8b6d
--- /dev/null
+++ b/changelogs/unreleased/25811-pipeline-number-and-url-do-not-update-when-new-pipeline-is-triggered.yml
@@ -0,0 +1,4 @@
+---
+title: Update pipeline and commit links when CI status is updated
+merge_request: 8351
+author:
diff --git a/spec/javascripts/merge_request_widget_spec.js b/spec/javascripts/merge_request_widget_spec.js
index bf45100af03..6f1d6406897 100644
--- a/spec/javascripts/merge_request_widget_spec.js
+++ b/spec/javascripts/merge_request_widget_spec.js
@@ -1,6 +1,7 @@
 /* eslint-disable space-before-function-paren, quotes, comma-dangle, dot-notation, quote-props, no-var, max-len */
 
 /*= require merge_request_widget */
+/*= require smart_interval */
 /*= require lib/utils/datetime_utility */
 
 (function() {
@@ -21,7 +22,11 @@
           normal: "Build {{status}}"
         },
         gitlab_icon: "gitlab_logo.png",
-        builds_path: "http://sampledomain.local/sampleBuildsPath"
+        ci_pipeline: 80,
+        ci_sha: "12a34bc5",
+        builds_path: "http://sampledomain.local/sampleBuildsPath",
+        commits_path: "http://sampledomain.local/commits",
+        pipeline_path: "http://sampledomain.local/pipelines"
       };
       this["class"] = new window.gl.MergeRequestWidget(this.opts);
     });
@@ -118,10 +123,11 @@
       });
     });
 
-    return describe('getCIStatus', function() {
+    describe('getCIStatus', function() {
       beforeEach(function() {
         this.ciStatusData = {
           "title": "Sample MR title",
+          "pipeline": 80,
           "sha": "12a34bc5",
           "status": "success",
           "coverage": 98
@@ -165,6 +171,22 @@
         this["class"].getCIStatus(true);
         return expect(spy).not.toHaveBeenCalled();
       });
+      it('should update the pipeline URL when the pipeline changes', function() {
+        var spy;
+        spy = spyOn(this["class"], 'updatePipelineUrls').and.stub();
+        this["class"].getCIStatus(false);
+        this.ciStatusData.pipeline += 1;
+        this["class"].getCIStatus(false);
+        return expect(spy).toHaveBeenCalled();
+      });
+      it('should update the commit URL when the sha changes', function() {
+        var spy;
+        spy = spyOn(this["class"], 'updateCommitUrls').and.stub();
+        this["class"].getCIStatus(false);
+        this.ciStatusData.sha = "9b50b99a";
+        this["class"].getCIStatus(false);
+        return expect(spy).toHaveBeenCalled();
+      });
     });
   });
 }).call(this);