Add toggle button to hide graph; set max-height

3 files changed, 71 insertions, 28 deletions

diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6
new file mode 100644
index 00000000000..7054199ac89
--- /dev/null
+++ b/app/assets/javascripts/pipeline.js.es6
@@ -0,0 +1,10 @@
+function toggleGraph() {
+  $('.pipeline-graph, .toggle-pipeline-btn').toggleClass('graph-collapsed');
+
+  const $btnText = $('.toggle-pipeline-btn .btn-text');
+  const graphCollapsed = $('.pipeline-graph').hasClass('graph-collapsed');
+
+  graphCollapsed ? $btnText.text('Expand') : $btnText.text('Hide')
+}
+
+$(document).on('click', '.toggle-pipeline-btn', toggleGraph);
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index ad256e2a728..f35aca193e9 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -232,10 +232,35 @@
 
 // Pipeline visualization
 
+.toggle-pipeline-btn {
+  background-color: $gray-dark;
+
+  .caret {
+    border-top: none;
+    border-bottom: 4px solid;
+  }
+
+  &.graph-collapsed {
+    background-color: $white-light;
+
+    .caret {
+      border-bottom: none;
+      border-top: 4px solid;
+    }
+  }
+}
+
 .pipeline-graph {
   width: 100%;
   overflow: auto;
   white-space: nowrap;
+  max-height: 500px;
+  transition: max-height 0.3s, padding 0.3s;
+
+  &.graph-collapsed {
+    max-height: 0;
+    padding: 0 16px;
+  }
 }
 
 .pipeline-visualization {
@@ -315,7 +340,6 @@
         right: -20px;
         border-right: 2px solid $border-color;
         border-radius: 0 0 50px;
-        -webkit-border-radius: 0 0 50px;
       }
 
       // Left connecting curves
@@ -323,7 +347,6 @@
         left: -20px;
         border-left: 2px solid $border-color;
         border-radius: 0 0 0 50px;
-        -webkit-border-radius: 0 0 0 50px;
       }
     }
 
@@ -333,11 +356,6 @@
         height: 45px;
         top: -26px;
       }
-      &::after {
-        // border-left: 2px solid $border-color;
-        border-top-right-radius: -50px;
-        -webkit-border-top-right-radius: -50px;
-      }
     }
   }
 
@@ -369,3 +387,14 @@
     }
   }
 }
+
+.pipeline-actions {
+  border-bottom: none;
+}
+
+.toggle-pipeline-btn {
+
+  .fa {
+    color: $dropdown-header-color;
+  }
+}
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index e2187673da7..eb80aadd524 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -1,25 +1,9 @@
-.row-content-block.build-content.middle-block.pipeline-graph
-  .pipeline-visualization
-    %ul.stage-column-list
-      - pipeline.statuses.stages.each do |stage|
-        - statuses = pipeline.statuses.where(stage: stage)
-        - status = statuses.latest.status
-        %li.stage-column
-          .stage-name
-            %a{name: stage}
-            - if stage
-              = stage.titleize
-          .builds-container
-            %ul
-              - statuses.each do |build|
-                %li.build
-                  .build-content
-                    %span{class: "ci-status-link ci-status-icon-#{status}"}
-                      = ci_icon_for_status(status)
-                    = build.name
-
-.row-content-block.build-content.middle-block.pipeline-graph
+.row-content-block.build-content.middle-block.pipeline-actions
   .pull-right
+    .btn.btn-grouped.btn-white.toggle-pipeline-btn
+      %span.btn-text Hide
+      %span pipeline graph
+      %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
@@ -43,6 +27,26 @@
         in
         = time_interval_in_words pipeline.duration
 
+.row-content-block.build-content.middle-block.pipeline-graph
+  .pipeline-visualization
+    %ul.stage-column-list
+      - pipeline.statuses.stages.each do |stage|
+        - statuses = pipeline.statuses.where(stage: stage)
+        - status = statuses.latest.status
+        %li.stage-column
+          .stage-name
+            %a{name: stage}
+            - if stage
+              = stage.titleize
+          .builds-container
+            %ul
+              - statuses.each do |build|
+                %li.build
+                  .build-content
+                    %span{class: "ci-status-link ci-status-icon-#{status}"}
+                      = ci_icon_for_status(status)
+                    = build.name
+
 - if pipeline.yaml_errors.present?
   .bs-callout.bs-callout-danger
     %h4 Found errors in your .gitlab-ci.yml: