Merge branch '23785-with-builds-tab-gone-give-additional-context-in-system-information-element-in-mr-commit-views-by-adding-mini-pipeline-graph' into 'master'

added inline pipeline graph

Closes #23785

See merge request !8576

3 files changed, 21 insertions, 6 deletions

diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6
index 1e764a950ca..f8efca76b13 100644
--- a/app/assets/javascripts/dispatcher.js.es6
+++ b/app/assets/javascripts/dispatcher.js.es6
@@ -160,6 +160,11 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new ZenMode();
           shortcut_handler = new ShortcutsNavigation();
           break;
+        case 'projects:commit:pipelines':
+          new gl.MiniPipelineGraph({
+            container: '.js-pipeline-table',
+          }).bindEvents();
+          break;
         case 'projects:commits:show':
         case 'projects:activity':
           shortcut_handler = new ShortcutsNavigation();
diff --git a/app/assets/javascripts/merge_request_widget.js.es6 b/app/assets/javascripts/merge_request_widget.js.es6
index 05b9a63765f..e5d2d706fc7 100644
--- a/app/assets/javascripts/merge_request_widget.js.es6
+++ b/app/assets/javascripts/merge_request_widget.js.es6
@@ -51,6 +51,8 @@ require('./smart_interval');
       this.getCIStatus(false);
       this.retrieveSuccessIcon();
 
+      this.initMiniPipelineGraph();
+
       this.ciStatusInterval = new global.SmartInterval({
         callback: this.getCIStatus.bind(this, true),
         startingInterval: 10000,
@@ -66,6 +68,7 @@ require('./smart_interval');
         incrementByFactorOf: 15000,
         immediateExecution: true,
       });
+
       notifyPermissions();
     }
 
@@ -236,17 +239,20 @@ require('./smart_interval');
           case "failed":
           case "canceled":
           case "not_found":
-            return this.setMergeButtonClass('btn-danger');
+            this.setMergeButtonClass('btn-danger');
+            break;
           case "running":
-            return this.setMergeButtonClass('btn-info');
+            this.setMergeButtonClass('btn-info');
+            break;
           case "success":
           case "success_with_warnings":
-            return this.setMergeButtonClass('btn-create');
+            this.setMergeButtonClass('btn-create');
         }
       } else {
         $('.ci_widget.ci-error').show();
-        return this.setMergeButtonClass('btn-danger');
+        this.setMergeButtonClass('btn-danger');
       }
+      this.initMiniPipelineGraph();
     };
 
     MergeRequestWidget.prototype.showCICoverage = function(coverage) {
@@ -269,6 +275,12 @@ require('./smart_interval');
       $('.js-commit-link').text(`#${id}`).attr('href', [commitsUrl, id].join('/'));
     };
 
+    MergeRequestWidget.prototype.initMiniPipelineGraph = function() {
+      new gl.MiniPipelineGraph({
+        container: '.js-pipeline-inline-mr-widget-graph:visible',
+      }).bindEvents();
+    };
+
     return MergeRequestWidget;
   })();
 })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6 b/app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6
index 80549532ea9..4becbc32681 100644
--- a/app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6
+++ b/app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6
@@ -21,8 +21,6 @@
       this.container = opts.container || '';
       this.dropdownListSelector = '.js-builds-dropdown-container';
       this.getBuildsList = this.getBuildsList.bind(this);
-
-      this.bindEvents();
     }
 
     /**