SONAR-5368 Use bubble popup for debt model information

6 files changed, 72 insertions, 4 deletions

diff --git a/server/sonar-web/src/main/coffee/coding-rules/app.coffee b/server/sonar-web/src/main/coffee/coding-rules/app.coffee
index 022146843e0..1add838f708 100644
--- a/server/sonar-web/src/main/coffee/coding-rules/app.coffee
+++ b/server/sonar-web/src/main/coffee/coding-rules/app.coffee
@@ -246,6 +246,11 @@ requirejs [
   App.getQualityProfileByKey = (profile_key) ->
     _.findWhere App.qualityProfiles, key: profile_key
 
+
+  App.getSubcharacteristicName = (name) ->
+    (App.characteristics[name] || '').replace ': ', ' > '
+
+
   App.showRule = (ruleKey) ->
     App.layout.showSpinner 'detailsRegion'
     jQuery.ajax
diff --git a/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-debt-popup-view.coffee b/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-debt-popup-view.coffee
new file mode 100644
index 00000000000..c8882d87fb4
--- /dev/null
+++ b/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-debt-popup-view.coffee
@@ -0,0 +1,16 @@
+define [
+  'backbone.marionette'
+  'templates/coding-rules'
+  'common/popup'
+], (
+  Marionette
+  Templates
+  Popup
+) ->
+
+  class CodingRulesDebtPopupView extends Popup
+    template: Templates['coding-rules-debt-popup']
+
+    serializeData: ->
+      _.extend super,
+        subcharacteristic: @options.app.getSubcharacteristicName(@model.get 'debtSubChar')
diff --git a/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-detail-view.coffee b/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-detail-view.coffee
index 8d925a004d1..636c6a2cf17 100644
--- a/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-detail-view.coffee
+++ b/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-detail-view.coffee
@@ -6,6 +6,7 @@ define [
   'coding-rules/views/coding-rules-detail-custom-rules-view'
   'coding-rules/views/coding-rules-detail-custom-rule-view'
   'coding-rules/views/coding-rules-parameter-popup-view'
+  'coding-rules/views/coding-rules-debt-popup-view'
   'templates/coding-rules'
 ], (
   Backbone
@@ -15,6 +16,7 @@ define [
   CodingRulesDetailCustomRulesView
   CodingRulesDetailCustomRuleView
   CodingRulesParameterPopupView
+  CodingRulesDebtPopupView
   Templates
 ) ->
 
@@ -70,6 +72,7 @@ define [
       'click @ui.deleteCustomRule': 'deleteCustomRule'
 
       'click .coding-rules-detail-parameter-details': 'showParamPopup'
+      'click .coding-rules-subcharacteristic': 'showDebtPopup'
 
     initialize: (options) ->
       super options
@@ -180,6 +183,17 @@ define [
       false
 
 
+    showDebtPopup: (e) ->
+      e.stopPropagation()
+      jQuery('body').click()
+      popup = new CodingRulesDebtPopupView
+        model: @model
+        app: @options.app
+        triggerEl: jQuery(e.currentTarget)
+      popup.render()
+      false
+
+
     hideContext: ->
       @contextRegion.reset()
       @$(@contextRegion.el).hide()
@@ -317,6 +331,6 @@ define [
         isManual: isManual
         canWrite: @options.app.canWrite
         qualityProfilesVisible: qualityProfilesVisible
-        subcharacteristic: (@options.app.characteristics[@model.get 'debtSubChar'] || '').replace ': ', ' > '
+        subcharacteristic: @options.app.getSubcharacteristicName(@model.get 'debtSubChar')
         createdAt: new Date(@model.get 'createdAt')
         allTags: _.union @model.get('sysTags'), @model.get('tags')
diff --git a/server/sonar-web/src/main/hbs/coding-rules/coding-rules-debt-popup.hbs b/server/sonar-web/src/main/hbs/coding-rules/coding-rules-debt-popup.hbs
new file mode 100644
index 00000000000..845cc10d77b
--- /dev/null
+++ b/server/sonar-web/src/main/hbs/coding-rules/coding-rules-debt-popup.hbs
@@ -0,0 +1,32 @@
+<div class="coding-rules-parameter-full-description bubble-popup-container">
+  <div class="bubble-popup-title">{{t 'widget.rules.technical_debt'}}</div>
+
+  <ul class="bubble-popup-list">
+    {{#if debtChar}}
+    <li>
+      <h3>{{t 'coding_rules.filters.characteristic'}}</h3>
+      {{subcharacteristic}}
+    </li>
+    {{/if}}
+
+    {{#if debtRemFnType}}
+    <li>
+      <h3>{{t 'coding_rules.remediation_function'}}</h3>
+      {{t 'coding_rules.remediation_function' debtRemFnType}}
+    </li>
+    {{/if}}
+    {{#if debtRemFnCoeff}}
+    <li>
+      <h3>{{t 'coding_rules.remediation_function.coeff'}}</h3>
+      {{debtRemFnCoeff}}
+    </li>
+    {{/if}}
+    {{#if debtRemFnOffset}}
+    <li>
+      <h3>{{t 'coding_rules.remediation_function.offset'}}</h3>
+      {{debtRemFnOffset}}
+    </li>
+    {{/if}}
+</div>
+
+<div class="bubble-popup-arrow"></div>
diff --git a/server/sonar-web/src/main/hbs/coding-rules/coding-rules-detail.hbs b/server/sonar-web/src/main/hbs/coding-rules/coding-rules-detail.hbs
index ba657a31a09..2d4cb44417f 100644
--- a/server/sonar-web/src/main/hbs/coding-rules/coding-rules-detail.hbs
+++ b/server/sonar-web/src/main/hbs/coding-rules/coding-rules-detail.hbs
@@ -33,8 +33,9 @@
     </div>
   </li>{{/if}}
 
-
-  <li class="coding-rules-detail-property" title="{{t 'coding_rules.remediation_function'}} {{t 'coding_rules.remediation_function' debtRemFnType}}{{#if debtRemFnCoeff}}, {{t 'coding_rules.remediation_function.coeff'}} {{debtRemFnCoeff}}{{/if}}{{#if debtRemFnOffset}}, {{t 'coding_rules.remediation_function.offset'}} {{debtRemFnOffset}}{{/if}}">{{subcharacteristic}}</li>
+  {{#if subcharacteristic}}
+    <li class="coding-rules-detail-property">{{subcharacteristic}} <a href="#" class="coding-rules-subcharacteristic">{{t 'more'}}</a></li>
+  {{/if}}
   <li class="coding-rules-detail-property">{{t 'coding_rules.available_since'}} {{d createdAt}}</li>
   <li class="coding-rules-detail-property">{{repository}}{{#unless isManual}} ({{language}}){{/unless}}</li>
 
diff --git a/server/sonar-web/src/main/less/style.less b/server/sonar-web/src/main/less/style.less
index adfb0457975..9bee50ab283 100644
--- a/server/sonar-web/src/main/less/style.less
+++ b/server/sonar-web/src/main/less/style.less
@@ -1950,7 +1950,7 @@ ul.bullet li {
   margin-top: 10px;
 }
 
-.rule-desc pre, .property pre {
+.rule-desc pre, .property pre, .bubble-popup pre {
   margin: 10px 0 !important;
   padding: 10px !important;
   border: 1px dashed #aaa;