From b9e1c209ac7f74c6ef93b3bdc323c5856fe6a880 Mon Sep 17 00:00:00 2001
From: Aravind SV <arvind.sv@gmail.com>
Date: Tue, 18 Apr 2017 16:37:10 -0400
Subject: [PATCH] Add border-bottom to job details header

Helps define where it ends and the rest of the page starts.
---
 .../app/assets/javascripts/json_to_css.js     |  1 +
 .../assets/stylesheets/css/build_detail.scss  | 18 +++++++++++++
 .../spec/javascripts/json_to_css_spec.js      | 26 +++++++++++++++++--
 .../vm/shared/_job_details_breadcrumbs.vm     |  2 +-
 4 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/server/webapp/WEB-INF/rails.new/app/assets/javascripts/json_to_css.js b/server/webapp/WEB-INF/rails.new/app/assets/javascripts/json_to_css.js
index db27b3c2dc8..eec81c62f25 100644
--- a/server/webapp/WEB-INF/rails.new/app/assets/javascripts/json_to_css.js
+++ b/server/webapp/WEB-INF/rails.new/app/assets/javascripts/json_to_css.js
@@ -56,6 +56,7 @@ JsonToCss.prototype = {
     update_build_detail_header : function(json) {
         var css_class_name = json.building_info.current_status.toLowerCase();
         this._renew_class_name('build_status', [css_class_name]);
+        this._renew_class_name('job_details_header', [css_class_name]);
     },
 
 	update_build_list : function(json, id, imgSrc) {
diff --git a/server/webapp/WEB-INF/rails.new/app/assets/stylesheets/css/build_detail.scss b/server/webapp/WEB-INF/rails.new/app/assets/stylesheets/css/build_detail.scss
index d34af86407b..842aca07d8a 100644
--- a/server/webapp/WEB-INF/rails.new/app/assets/stylesheets/css/build_detail.scss
+++ b/server/webapp/WEB-INF/rails.new/app/assets/stylesheets/css/build_detail.scss
@@ -624,6 +624,24 @@ a.collapse-all {
   }
 }
 
+.job_details.page_header {
+  border-bottom: 1px solid #000;
+}
+.job_details.page_header.building {
+  border-bottom: 3px solid #ffc11b;
+}
+.job_details.page_header.passed {
+  border-bottom: 3px solid #78C42D;
+}
+.job_details.page_header.cancelled {
+  border-bottom: 3px dotted #ffc11b;
+}
+.job_details.page_header.failed,
+.job_details.page_header.failing
+{
+  border-bottom: 3px solid #fa2d2d;
+}
+
 .build-status.cancelled {
   background-color: #ffc11b;
   color: #000;
diff --git a/server/webapp/WEB-INF/rails.new/spec/javascripts/json_to_css_spec.js b/server/webapp/WEB-INF/rails.new/spec/javascripts/json_to_css_spec.js
index 20873ee5732..3dd0aa2f7b3 100644
--- a/server/webapp/WEB-INF/rails.new/spec/javascripts/json_to_css_spec.js
+++ b/server/webapp/WEB-INF/rails.new/spec/javascripts/json_to_css_spec.js
@@ -18,8 +18,12 @@ describe("json_to_css", function () {
     var json_to_css;
 
     beforeEach(function () {
-        setFixtures("<a id=\"project1_forcebuild\"></a>\n" +
-            "<a id=\"project1_config_panel\"></a>");
+        setFixtures(
+          "<a id=\"project1_forcebuild\"></a>\n" +
+          "<a id=\"project1_config_panel\"></a>\n" +
+          "<div id=\"build_status\"></div>\n" +
+          "<div id=\"job_details_header\"></div>\n"
+        );
     });
 
     beforeEach(function () {
@@ -42,4 +46,22 @@ describe("json_to_css", function () {
         json_to_css.update_force_build(paused_json("project1"));
         assertTrue($("project1_forcebuild").className, $("project1_forcebuild").hasClassName("force_build_disabled"));
     });
+
+    it("should add current status as a class to build status and job details header", function () {
+        json_to_css.update_build_detail_header(construct_new_json('job1', 'Failed', 'Failed'));
+        assertTrue($("build_status").hasClassName('failed'));
+        assertTrue($("job_details_header").hasClassName('failed'));
+    });
+
+    it("should replace old status with current status as a class to build status and job details header", function () {
+        $("build_status").className = "failed";
+        $("job_details_header").className = "failed";
+
+        json_to_css.update_build_detail_header(construct_new_json('job1', 'passed', 'Passed'));
+
+        assertTrue($("build_status").hasClassName('passed'));
+        assertFalse($("build_status").hasClassName('failed'));
+        assertTrue($("job_details_header").hasClassName('passed'));
+        assertFalse($("job_details_header").hasClassName('failed'));
+    });
 });
diff --git a/server/webapp/WEB-INF/vm/shared/_job_details_breadcrumbs.vm b/server/webapp/WEB-INF/vm/shared/_job_details_breadcrumbs.vm
index 4667f192543..3640b9ae5b3 100644
--- a/server/webapp/WEB-INF/vm/shared/_job_details_breadcrumbs.vm
+++ b/server/webapp/WEB-INF/vm/shared/_job_details_breadcrumbs.vm
@@ -15,7 +15,7 @@
  *************************GO-LICENSE-END***********************************#
 
 #if($_page_title)
-<div class="job_details entity_title page_header">
+<div id="job_details_header" class="job_details entity_title page_header">
   <div class="row">
     <ul class="entity_title">
       <li class="name"><a href="$req.getContextPath()/tab/pipeline/history/$presenter.pipelineName"