SONAR-6228 show dependencies details inside a modal window

6 files changed, 53 insertions, 55 deletions

diff --git a/server/sonar-web/src/main/hbs/design/dsm-info.hbs b/server/sonar-web/src/main/hbs/design/dsm-info.hbs
index 32bc514f9f9..49a6cf9a6dc 100644
--- a/server/sonar-web/src/main/hbs/design/dsm-info.hbs
+++ b/server/sonar-web/src/main/hbs/design/dsm-info.hbs
@@ -1,30 +1,34 @@
-<table>
-  <thead>
-  <tr>
-    <th>{{qualifierIcon first.q}} {{first.n}}</th>
-    <th>&nbsp;</th>
-    <th>{{qualifierIcon second.q}} {{second.n}}</th>
-  </tr>
-  </thead>
-  <tbody>
-  {{#eachChanged items 'fk'}}
+<div class="modal-body modal-container">
+  <table class="dsm-info">
+    <thead>
     <tr>
-      <td {{#if changed}}class="changed"{{/if}}>
-        {{#if changed}}
-          {{qualifierIcon fq}}
-          <a href="{{dashboardUrl fk}}">{{fn}}</a>
-        {{/if}}
-      </td>
-      <td {{#if changed}}class="changed"{{/if}}>
-        {{#if changed}}
-          {{u}}
-        {{/if}}
-      </td>
-      <td {{#if changed}}class="changed"{{/if}}>
-        {{qualifierIcon tq}}
-        <a href="{{dashboardUrl tk}}"> {{tn}} </a>
-      </td>
+      <th>{{qualifierIcon first.q}} {{first.n}}</th>
+      <th>&nbsp;</th>
+      <th>{{qualifierIcon second.q}} {{second.n}}</th>
     </tr>
-  {{/eachChanged}}
-  </tbody>
-</table>
+    </thead>
+    <tbody>
+    {{#eachChanged items 'fk'}}
+      <tr>
+        <td {{#if changed}}class="changed"{{/if}}>
+          {{#if changed}}
+            {{qualifierIcon fq}}&nbsp;<a href="{{dashboardUrl fk}}">{{fn}}</a>
+          {{/if}}
+        </td>
+        <td {{#if changed}}class="changed"{{/if}}>
+          {{#if changed}}
+            {{u}}
+          {{/if}}
+        </td>
+        <td {{#if changed}}class="changed"{{/if}}>
+          {{qualifierIcon tq}}&nbsp;<a href="{{dashboardUrl tk}}">{{tn}}</a>
+        </td>
+      </tr>
+    {{/eachChanged}}
+    </tbody>
+  </table>
+</div>
+
+<div class="modal-foot">
+  <a class="js-modal-close" href="#">{{t 'close'}}</a>
+</div>
diff --git a/server/sonar-web/src/main/js/design/info-view.js b/server/sonar-web/src/main/js/design/info-view.js
index 0c39aaf02f8..c942cf60fed 100644
--- a/server/sonar-web/src/main/js/design/info-view.js
+++ b/server/sonar-web/src/main/js/design/info-view.js
@@ -17,9 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-define(['templates/design'], function () {
+define([
+  'common/modals',
+  'templates/design'
+], function (ModalView) {
 
-  return Marionette.ItemView.extend({
+  return ModalView.extend({
+    className: 'modal modal-large',
     template: Templates['dsm-info'],
 
     serializeData: function () {
diff --git a/server/sonar-web/src/main/js/design/view.js b/server/sonar-web/src/main/js/design/view.js
index 66db089f1c3..cc4db709600 100644
--- a/server/sonar-web/src/main/js/design/view.js
+++ b/server/sonar-web/src/main/js/design/view.js
@@ -17,7 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-define(['design/info-view', 'templates/design'], function (InfoView) {
+define([
+  'design/info-view',
+  'templates/design'
+], function (InfoView) {
   var $ = jQuery,
       API_DEPENDENCIES = baseUrl + '/api/dependencies';
 
@@ -130,28 +133,15 @@ define(['design/info-view', 'templates/design'], function (InfoView) {
       if (!id) {
         return;
       }
-      this.showInfoViewSpinner();
-      this.scrollToInfoView();
       return $.get(API_DEPENDENCIES, { parent: id }).done(function (data) {
-        that.infoRegion.show(new InfoView({
+        new InfoView({
           collection: new Backbone.Collection(data),
           first: that.collection.at(column).toJSON(),
           second: that.collection.at(row).toJSON()
-        }));
-        that.scrollToInfoView();
+        }).render();
       });
     },
 
-    showInfoViewSpinner: function () {
-      this.infoRegion.reset();
-      this.$(this.infoRegion.el).html('<i class="spinner"></i>');
-    },
-
-    scrollToInfoView: function () {
-      var delta = this.$(this.infoRegion.el).offset().top - 40;
-      $('html, body').animate({ scrollTop: delta }, 500);
-    },
-
     toggleDirDisplay: function () {
       var rows = this.$('tr');
       rows.each(function (index) {
diff --git a/server/sonar-web/src/main/less/components/modals.less b/server/sonar-web/src/main/less/components/modals.less
index 0efc5a22dfd..98fd4a4af1e 100644
--- a/server/sonar-web/src/main/less/components/modals.less
+++ b/server/sonar-web/src/main/less/components/modals.less
@@ -63,7 +63,7 @@
   max-height: 70vh;
   padding: 10px;
   .box-sizing(border-box);
-  overflow-x: hidden;
+  overflow-x: auto;
   overflow-y: scroll;
 }
 
diff --git a/server/sonar-web/src/main/less/pages/dsm.less b/server/sonar-web/src/main/less/pages/dsm.less
index f7ffa373b35..f7a1bd93267 100644
--- a/server/sonar-web/src/main/less/pages/dsm.less
+++ b/server/sonar-web/src/main/less/pages/dsm.less
@@ -118,7 +118,6 @@
 
 
 .dsm-info {
-  margin-top: 25px;
 
   th {
     padding: 2px 5px 7px;
diff --git a/server/sonar-web/src/test/js/design-spec.js b/server/sonar-web/src/test/js/design-spec.js
index 08bb92138e1..7a86882d28c 100644
--- a/server/sonar-web/src/test/js/design-spec.js
+++ b/server/sonar-web/src/test/js/design-spec.js
@@ -49,16 +49,17 @@ casper.test.begin(testName('Base'), 9, function (test) {
 
       .then(function () {
         casper.mouse.doubleclick('.dsm-body-cell-cycle');
-        casper.waitForSelector('.spinner', function () {
-          casper.waitWhileSelector('.spinner');
-        });
+        casper.waitForSelector('.modal');
       })
 
       .then(function () {
-        test.assertElementCount('.dsm-info tr', 7);
-        test.assertSelectorContains('.dsm-info', 'src/main/java/com/maif/sonar/cobol/api/MaifCobolMeasureProvider.java');
-        test.assertSelectorContains('.dsm-info', 'src/main/java/com/maif/sonar/cobol/metrics/BusinessRuleCounter.java ');
-        test.assertSelectorContains('.dsm-info', 'src/main/java/com/maif/sonar/cobol/metrics/TableMetricsVisitor.java ');
+        test.assertElementCount('.modal .dsm-info tr', 7);
+        test.assertSelectorContains('.modal .dsm-info',
+            'src/main/java/com/maif/sonar/cobol/api/MaifCobolMeasureProvider.java');
+        test.assertSelectorContains('.modal .dsm-info',
+            'src/main/java/com/maif/sonar/cobol/metrics/BusinessRuleCounter.java');
+        test.assertSelectorContains('.modal .dsm-info',
+            'src/main/java/com/maif/sonar/cobol/metrics/TableMetricsVisitor.java');
       })
 
       .then(function () {