New Issues Page: Show details, rule, changelog

5 files changed, 117 insertions, 32 deletions

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue_detail.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue_detail.hbs.erb
index c0fdd58f5da..db76ab17fbf 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue_detail.hbs.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue_detail.hbs.erb
@@ -1,38 +1,111 @@
 <script id="issue-detail-template" type="text/x-handlebars-template">
+  <div class="source_title">
+    <div class="subtitle">{{project.longName}}</div>
+    <span class="h1">
+      {{#if component.longName}}
+        {{component.longName}}
+      {{else}}
+        {{component}} [<del><%= message('issue.component_deleted') %></del>]
+      {{/if}}
+    </span>
+  </div>
+
   <div class="code-issue" data-issue-key="{{key}}" data-issue-component="{{component.key}}" data-issue-rule="{{rule.key}}">
     <div class="code-issue-name">
-      <div style="float: right">
-        <a href="#" onclick="return openIssuePopup(this)" class="issue-permalink">
-          <img src="<%= ApplicationController.root_context -%>/images/new-window-16.gif">
-        </a>
-      </div>
-
-      {{severityIcon severity}}&nbsp;
-      <span class="rulename">{{rule.name}}</span>
-      &nbsp;<img src="<%= ApplicationController.root_context -%>/images/sep12.png">&nbsp;
-      {{statusIcon status}}{{capitalize status}}
-      &nbsp;<img src="<%= ApplicationController.root_context -%>/images/sep12.png">&nbsp;
-      <%= message('issue.updated') -%>&nbsp;<a href="#" onclick="return toggleIssueChangelog(this)" class="gray issue-changelog-link" id="toggle-issue-changelog">{{fromNow updateDate}}</a>
-      {{# if author}}
-        &nbsp;<img src="<%= ApplicationController.root_context -%>/images/sep12.png">&nbsp;
-        <span><%= message('issue.authorLogin') -%>&nbsp;{{author}}</span>
-      {{/if}}
-      {{# if technicalDebt}}
-        &nbsp;<img src="<%= ApplicationController.root_context -%>/images/sep12.png">&nbsp;
-        <%= message('issue.technical_debt') -%>&nbsp;<a href="#" onclick="return toggleTechnicalDebt(this)" class="gray issue-technicaldebt-link" id="toggle-issue-technicaldebt">
-          {{#if technicalDebt.days}}{{technicalDebt.days}} days{{/if}}
-          {{#if technicalDebt.hours}}{{technicalDebt.hours}} hours{{/if}}
-          {{#if technicalDebt.minutes}}{{technicalDebt.minutes}} minutes{{/if}}
-        </a>
-      {{/if}}
+      {{severityIcon severity}}&nbsp;<span class="rulename">{{rule.name}}</span>
     </div>
 
-    <div class="issue-rule rule-desc" style="display: none"></div>
     <div class="issue-changelog" id="issue-changelog" style="display: none"></div>
     <div class="issue-technicaldebt" id="issue-technicaldebt" style="display: none"></div>
 
     <div class="code-issue-msg">{{{message}}}</div>
 
+    <div class="code-issue-details">
+      <ul class="tabs">
+        <li>
+          <a href="#tab-issue-details"><%= message('issue.details') -%></a>
+        </li>
+        <li>
+          <a href="#tab-issue-rule"><%= message('rule') -%></a>
+        </li>
+        <li>
+          <a href="/dev/issue/changelog/{{key}}"><%= message('changelog') -%></a>
+        </li>
+      </ul>
+
+      <div id="tab-issue-details">
+        <ul class="code-issue-details-list">
+          <li>
+            <div class="code-issue-details-term"><%= message('severity') -%></div>
+            <div class="code-issue-details-value">
+              {{severityIcon severity}}{{capitalize severity}}
+            </div>
+          </li>
+          <li>
+            <div class="code-issue-details-term"><%= message('status') -%></div>
+            <div class="code-issue-details-value">
+              {{statusIcon status}}{{capitalize status}}
+            </div>
+          </li>
+          <li>
+            <div class="code-issue-details-term"><%= message('resolution') -%></div>
+            <div class="code-issue-details-value">
+              {{#if resolution}}
+                {{resolutionIcon resolution}}{{capitalize resolution}}
+              {{else}}
+                <%= message('unresolved') -%>
+              {{/if}}
+            </div>
+          </li>
+          <li>
+            <div class="code-issue-details-term"><%= message('issue_filter.header.action_plan') -%></div>
+            <div class="code-issue-details-value"></div>
+          </li>
+          {{#if technicalDebt}}
+            <li>
+              <div class="code-issue-details-term"><%= message('issue.technical_debt_clear') -%></div>
+              <div class="code-issue-details-value">
+                {{#if technicalDebt.days}}{{technicalDebt.days}} days{{/if}}
+                {{#if technicalDebt.hours}}{{technicalDebt.hours}} hours{{/if}}
+                {{#if technicalDebt.minutes}}{{technicalDebt.minutes}} minutes{{/if}}
+              </div>
+            </li>
+          {{/if}}
+          {{# if reporter}}
+            <li>
+              <div class="code-issue-details-term"><%= message('reporter') -%></div>
+              <div class="code-issue-details-value">{{reporter}}</div>
+            </li>
+          {{/if}}
+          {{#if author}}
+            <li>
+              <div class="code-issue-details-term"><%= message('author') -%></div>
+              <div class="code-issue-details-value">{{author}}</div>
+            </li>
+          {{/if}}
+          {{# if assignee}}
+            <li>
+              <div class="code-issue-details-term"><%= message('assignee') -%></div>
+              <div class="code-issue-details-value">{{assignee}}</div>
+            </li>
+          {{/if}}
+          <li>
+            <div class="code-issue-details-term"><%= message('created') -%></div>
+            <div class="code-issue-details-value">{{creationDate}}</div>
+          </li>
+          <li>
+            <div class="code-issue-details-term"><%= message('updated') -%></div>
+            <div class="code-issue-details-value">{{updateDate}}</div>
+          </li>
+        </ul>
+      </div>
+
+      <div id="tab-issue-rule">
+        <div class="marginbottom10">{{{rule.desc}}}</div>
+        <p class="note">{{rule.key}}</p>
+      </div>
+    </div>
+
     <div class="code-issue-actions">
       <a href="#" onclick="return issueForm('comment', this)" class="link-action spacer-right" autofocus="">Comment</a>
 
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
index c3c75844362..b5871e7f4db 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
@@ -41,6 +41,7 @@
     <%= javascript_include_tag 'third-party/tablekit' %>
     <%= javascript_include_tag 'third-party/jquery.min' %>
     <%= javascript_include_tag 'third-party/jquery-ui.min' %>
+    <%= javascript_include_tag 'third-party/jquery-ui.tabs' %>
     <%= javascript_include_tag 'third-party/d3.v3.min' %>
     <%= javascript_include_tag 'third-party/underscore-min' %>
     <%= javascript_include_tag 'third-party/backbone-min' %>
diff --git a/sonar-server/src/main/webapp/javascripts/navigator/issues.js b/sonar-server/src/main/webapp/javascripts/navigator/issues.js
index ff92f282b5b..206456a438b 100644
--- a/sonar-server/src/main/webapp/javascripts/navigator/issues.js
+++ b/sonar-server/src/main/webapp/javascripts/navigator/issues.js
@@ -17,7 +17,7 @@ jQuery(function() {
     parse: function(r) {
 
       function find(source, key) {
-        return _.findWhere(source, { key: key });
+        return _.findWhere(source, { key: key }) || key;
       }
 
       this.paging = r.paging;
@@ -303,7 +303,12 @@ jQuery(function() {
 
 
   var IssueDetailView = Backbone.Marionette.ItemView.extend({
-    template: Handlebars.compile(jQuery('#issue-detail-template').html() || '')
+    template: Handlebars.compile(jQuery('#issue-detail-template').html() || ''),
+
+
+    onRender: function() {
+      this.$('.code-issue-details').tabs();
+    }
   });
 
 
diff --git a/sonar-server/src/main/webapp/stylesheets/style.css b/sonar-server/src/main/webapp/stylesheets/style.css
index da669b45623..4154fabc2a1 100644
--- a/sonar-server/src/main/webapp/stylesheets/style.css
+++ b/sonar-server/src/main/webapp/stylesheets/style.css
@@ -849,7 +849,7 @@ th.operations, td.operations {
 }
 
 .code-issue-details {
-  padding: 5px 0;
+  padding: 0 0 5px;
   border-left: 1px solid #DDD;
   border-right: 1px solid #DDD;
   border-bottom: 1px solid #DDD;
@@ -863,15 +863,20 @@ th.operations, td.operations {
 
 .code-issue-details .tabs {
   height: auto;
-  padding: 0 5px;
-  border-top: 1px solid #DDD;
-  border-bottom: none;
+  padding: 5px 10px;
+  border-bottom: 1px solid #DDD;
   background: #E4ECF3;
 }
 
+.code-issue-details .tabs li + li {
+  margin-left: 10px;
+}
+
 .code-issue-details .tabs li a:link,
 .code-issue-details .tabs li a:visited {
-  padding: 5px;
+  float: none;
+  margin: 0;
+  padding: 0;
 }
 
 .code-issue-details-list {
diff --git a/sonar-server/wro.xml b/sonar-server/wro.xml
index 82a69cfe0aa..9cb1055e69d 100644
--- a/sonar-server/wro.xml
+++ b/sonar-server/wro.xml
@@ -21,6 +21,7 @@
     <js>/javascripts/third-party/tablekit.js</js>
     <js>/javascripts/third-party/jquery.min.js</js>
     <js>/javascripts/third-party/jquery-ui.min.js</js>
+    <js>/javascripts/third-party/jquery-ui.tabs.js</js>
     <js>/javascripts/third-party/d3.v3.min.js</js>
     <js>/javascripts/third-party/underscore-min.js</js>
     <js>/javascripts/third-party/backbone-min.js</js>