Finished up margin JS logic

app/assets/javascripts/dispatcher.js

@@ -126,6 +126,9 @@
             new TreeView();
           }
           break;
+        case 'projects:pipelines:show':
+          new window.gl.Pipelines();
+          break;
         case 'groups:activity':
           new Activities();
           break;

app/assets/javascripts/pipeline.js.es6

-(function() {
+((global) => {
 
-  function addMarginToBuild () {
-    const $secondChildBuildNode = $('.build:nth-child(2)');
-    const $firstChildBuildNode = $secondChildBuildNode.prev('.build');
-    // const $previousBuildColumn = $secondChildBuildNode.closest('.stage-column').prev('.stage-column');
-    if ($secondChildBuildNode.length) {
-      $secondChildBuildNode.closest('.stage-column').addClass('left-margin');
-      $firstChildBuildNode.addClass('left-connector');
-    }
+  class Pipelines {
+    constructor() {
+      $(document).off('click', '.toggle-pipeline-btn').on('click', '.toggle-pipeline-btn', this.toggleGraph);
+      $(document).off('ready.addMarginToBuildColumns').on('ready.addMarginToBuildColumns', this.addMarginToBuildColumns);
     }
 
-  function toggleGraph() {
+    toggleGraph() {
       const $pipelineBtn = $(this).closest('.toggle-pipeline-btn');
       const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph');
       const $btnText = $(this).find('.toggle-btn-text');
-    const $icon = $(this).find('.fa');
 
       $($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed');
 
       const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed');
-    const expandIcon = 'fa-caret-down';
-    const hideIcon = 'fa-caret-up';
-
-    if(graphCollapsed) {
-      $btnText.text('Expand');
-      $icon.removeClass(hideIcon).addClass(expandIcon);
-    } else {
-      $btnText.text('Hide');
-      $icon.removeClass(expandIcon).addClass(hideIcon);
+
+      graphCollapsed ? $btnText.text('Expand') : $btnText.text('Hide')
+    }
+
+    addMarginToBuildColumns() {
+      const $secondChildBuildNode = $('.build:nth-child(2)');
+      if ($secondChildBuildNode.length) {
+        const $firstChildBuildNode = $secondChildBuildNode.prev('.build');
+        const $multiBuildColumn = $secondChildBuildNode.closest('.stage-column');
+        const $previousColumn = $multiBuildColumn.prev('.stage-column');
+        $multiBuildColumn.addClass('left-margin');
+        $firstChildBuildNode.addClass('left-connector');
+        $previousColumn.each(function() {
+          $this = $(this);
+          if ($('.build', $this).length === 1) $this.addClass('no-margin');
+        });
+      }
+      $('.pipeline-graph-container').removeClass('hidden');
     }
   }
 
-  $(document).on('click', '.toggle-pipeline-btn', toggleGraph);
-  $(document).on('ready', addMarginToBuild);
-})();
+  global.Pipelines = Pipelines;
+
+})(window.gl || (window.gl = {}));

app/assets/stylesheets/pages/pipelines.scss

@@ -326,6 +326,10 @@
     }
   }
 
+  &.no-margin {
+    margin: 0;
+  }
+
   li {
     list-style: none;
   }

app/views/projects/commit/_pipeline.html.haml

-.row-content-block.build-content.middle-block.pipeline-actions
+.pipeline-graph-container.hidden
+  .row-content-block.build-content.middle-block.pipeline-actions
     .pull-right
       .btn.btn-grouped.btn-white.toggle-pipeline-btn
         %span.toggle-btn-text Hide
         %span pipeline graph
-      = icon('caret-up')
+        %span.caret
       - if can?(current_user, :update_pipeline, pipeline.project)
         - if pipeline.builds.latest.failed.any?(&:retryable?)
           = link_to "Retry failed", retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-grouped btn-primary', method: :post
@@ -27,7 +28,7 @@
           in
           = time_interval_in_words pipeline.duration
 
-.row-content-block.build-content.middle-block.pipeline-graph
+  .row-content-block.build-content.middle-block.pipeline-graph
     .pipeline-visualization
       %ul.stage-column-list
         - stages = pipeline.stages_with_latest_statuses