From 818c2fdae55e2761bc1269de3bf3d07f91b3ce6f Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Tue, 15 Sep 2015 10:09:05 +0200
Subject: [PATCH] SONAR-6697 update UI of the custom measures page

---
 .../src/main/js/apps/custom-measures/app.js   | 53 -------------------
 .../src/main/js/apps/custom-measures/app.jsx  | 50 +++++++++++++++++
 .../js/apps/custom-measures/list-item-view.js |  3 +-
 .../main/js/apps/custom-measures/list-view.js |  7 +--
 .../templates/custom-measures-list-item.hbs   | 37 ++++++-------
 .../templates/custom-measures-list.hbs        | 12 +++++
 .../test/medium/custom-measures.spec.js       | 10 ++--
 7 files changed, 88 insertions(+), 84 deletions(-)
 delete mode 100644 server/sonar-web/src/main/js/apps/custom-measures/app.js
 create mode 100644 server/sonar-web/src/main/js/apps/custom-measures/app.jsx
 create mode 100644 server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list.hbs

diff --git a/server/sonar-web/src/main/js/apps/custom-measures/app.js b/server/sonar-web/src/main/js/apps/custom-measures/app.js
deleted file mode 100644
index de6316fb658..00000000000
--- a/server/sonar-web/src/main/js/apps/custom-measures/app.js
+++ /dev/null
@@ -1,53 +0,0 @@
-define([
-  './layout',
-  './custom-measures',
-  './header-view',
-  './list-view',
-  './list-footer-view'
-], function (Layout, CustomMeasures, HeaderView, ListView, ListFooterView) {
-
-  var App = new Marionette.Application(),
-      init = function (options) {
-        // Layout
-        this.layout = new Layout({
-          el: options.el
-        });
-        this.layout.render();
-
-        // Collection
-        this.customMeasures = new CustomMeasures({
-          projectId: options.projectId
-        });
-
-        // Header View
-        this.headerView = new HeaderView({
-          collection: this.customMeasures,
-          projectId: options.projectId
-        });
-        this.layout.headerRegion.show(this.headerView);
-
-        // List View
-        this.listView = new ListView({
-          collection: this.customMeasures
-        });
-        this.layout.listRegion.show(this.listView);
-
-        // List Footer View
-        this.listFooterView = new ListFooterView({
-          collection: this.customMeasures
-        });
-        this.layout.listFooterRegion.show(this.listFooterView);
-
-        // Go!
-        this.customMeasures.fetch();
-      };
-
-  App.on('start', function (options) {
-    window.requestMessages().done(function () {
-      init.call(App, options);
-    });
-  });
-
-  return App;
-
-});
diff --git a/server/sonar-web/src/main/js/apps/custom-measures/app.jsx b/server/sonar-web/src/main/js/apps/custom-measures/app.jsx
new file mode 100644
index 00000000000..1a0d965348e
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/custom-measures/app.jsx
@@ -0,0 +1,50 @@
+import Layout from './layout';
+import CustomMeasures from './custom-measures';
+import HeaderView from './header-view';
+import ListView from './list-view';
+import ListFooterView from './list-footer-view';
+
+var App = new Marionette.Application(),
+    init = function (options) {
+      // Layout
+      this.layout = new Layout({
+        el: options.el
+      });
+      this.layout.render();
+
+      // Collection
+      this.customMeasures = new CustomMeasures({
+        projectId: options.projectId
+      });
+
+      // Header View
+      this.headerView = new HeaderView({
+        collection: this.customMeasures,
+        projectId: options.projectId
+      });
+      this.layout.headerRegion.show(this.headerView);
+
+      // List View
+      this.listView = new ListView({
+        collection: this.customMeasures
+      });
+      this.layout.listRegion.show(this.listView);
+
+      // List Footer View
+      this.listFooterView = new ListFooterView({
+        collection: this.customMeasures
+      });
+      this.layout.listFooterRegion.show(this.listFooterView);
+
+      // Go!
+      this.customMeasures.fetch();
+    };
+
+App.on('start', function (options) {
+  window.requestMessages().done(function () {
+    init.call(App, options);
+  });
+});
+
+export default App;
+
diff --git a/server/sonar-web/src/main/js/apps/custom-measures/list-item-view.js b/server/sonar-web/src/main/js/apps/custom-measures/list-item-view.js
index 97d9671eb17..32ba7e691d8 100644
--- a/server/sonar-web/src/main/js/apps/custom-measures/list-item-view.js
+++ b/server/sonar-web/src/main/js/apps/custom-measures/list-item-view.js
@@ -5,8 +5,7 @@ define([
 ], function (UpdateView, DeleteView) {
 
   return Marionette.ItemView.extend({
-    tagName: 'li',
-    className: 'panel panel-vertical',
+    tagName: 'tr',
     template: Templates['custom-measures-list-item'],
 
     events: {
diff --git a/server/sonar-web/src/main/js/apps/custom-measures/list-view.js b/server/sonar-web/src/main/js/apps/custom-measures/list-view.js
index 24878864d30..986ad559e98 100644
--- a/server/sonar-web/src/main/js/apps/custom-measures/list-view.js
+++ b/server/sonar-web/src/main/js/apps/custom-measures/list-view.js
@@ -3,9 +3,10 @@ define([
   './templates'
 ], function (ListItemView) {
 
-  return Marionette.CollectionView.extend({
-    tagName: 'ul',
-    childView: ListItemView
+  return Marionette.CompositeView.extend({
+    template: Templates['custom-measures-list'],
+    childView: ListItemView,
+    childViewContainer: 'tbody'
   });
 
 });
diff --git a/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list-item.hbs b/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list-item.hbs
index a6497d08fa0..9567fcfdfcf 100644
--- a/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list-item.hbs
+++ b/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list-item.hbs
@@ -1,20 +1,6 @@
-<div class="pull-right big-spacer-left nowrap">
-  <a class="js-custom-measure-update icon-edit" title="Update" data-toggle="tooltip" href="#"></a>
-  <a class="js-custom-measure-delete icon-delete" title="Delete" data-toggle="tooltip" href="#"></a>
-</div>
-
-<div class="display-inline-block text-middle text-right width-10 big-spacer-right text-ellipsis"
-     title="{{formatMeasure value metric.type}}">
-  <span class="js-custom-measure-value emphasised-measure">
-    {{formatMeasure value metric.type}}
-  </span>
-</div>
-
-<div class="display-inline-block text-middle width-20">
+<td class="nowrap">
   <div>
-    <strong class="js-custom-measure-metric-name">
-      {{metric.name}}
-    </strong>
+    <span class="js-custom-measure-metric-name">{{metric.name}}</span>
     {{#if pending}}
       <span class="js-custom-measure-pending badge badge-warning spacer-left"
             title="{{t 'custom_measures.pending_tooltip'}}"
@@ -22,17 +8,26 @@
     {{/if}}
   </div>
   <span class="js-custom-measure-domain note">{{metric.domain}}</span>
-</div>
+</td>
 
-<div class="display-inline-block text-top width-20">
+<td class="nowrap">
+  <strong class="js-custom-measure-value">{{formatMeasure value metric.type}}</strong>
+</td>
+
+<td class="">
   <span class="js-custom-measure-description">{{description}}</span>
-</div>
+</td>
 
-<div class="display-inline-block text-top width-30">
+<td class="">
   {{#if updatedAt}}
     Updated on <span class="js-custom-measure-created-at">{{d updatedAt}}</span>
   {{else}}
     Created on <span class="js-custom-measure-created-at">{{d createdAt}}</span>
   {{/if}}
   by <span class="js-custom-measure-user">{{user.name}}</span>
-</div>
+</td>
+
+<td class="thin nowrap">
+  <a class="js-custom-measure-update icon-edit" title="Update" data-toggle="tooltip" href="#"></a>
+  <a class="js-custom-measure-delete icon-delete" title="Delete" data-toggle="tooltip" href="#"></a>
+</td>
diff --git a/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list.hbs b/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list.hbs
new file mode 100644
index 00000000000..c01d062cd6c
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list.hbs
@@ -0,0 +1,12 @@
+<table class="data zebra">
+  <thead>
+  <tr>
+    <th>Metric</th>
+    <th>Value</th>
+    <th>Description</th>
+    <th>Date</th>
+    <th>&nbsp;</th>
+  </tr>
+  </thead>
+  <tbody></tbody>
+</table>
diff --git a/server/sonar-web/test/medium/custom-measures.spec.js b/server/sonar-web/test/medium/custom-measures.spec.js
index 26186842e26..87c97ad6dcd 100644
--- a/server/sonar-web/test/medium/custom-measures.spec.js
+++ b/server/sonar-web/test/medium/custom-measures.spec.js
@@ -11,7 +11,7 @@ define(function (require) {
           .mockFromFile('/api/custom_measures/search', 'custom-measures-spec/search.json',
           { data: { projectId: projectId } })
           .startApp('custom-measures', { projectId: projectId })
-          .checkElementCount('#custom-measures-list li[data-id]', 4)
+          .checkElementCount('#custom-measures-list tr[data-id]', 4)
           .checkElementInclude('#custom-measures-list .js-custom-measure-value', '35')
           .checkElementInclude('#custom-measures-list .js-custom-measure-metric-name', 'Distribution')
           .checkElementInclude('#custom-measures-list .js-custom-measure-domain', 'Management')
@@ -30,14 +30,14 @@ define(function (require) {
           .mockFromFile('/api/custom_measures/search', 'custom-measures-spec/search-big-1.json',
           { data: { projectId: projectId } })
           .startApp('custom-measures', { projectId: projectId })
-          .checkElementCount('#custom-measures-list li[data-id]', 2)
+          .checkElementCount('#custom-measures-list tr[data-id]', 2)
           .checkElementNotExist('[data-id="3"]')
           .clearMocks()
           .mockFromFile('/api/custom_measures/search', 'custom-measures-spec/search-big-2.json',
           { data: { projectId: projectId, p: 2 } })
           .clickElement('#custom-measures-fetch-more')
           .checkElementExist('[data-id="3"]')
-          .checkElementCount('#custom-measures-list li[data-id]', 4);
+          .checkElementCount('#custom-measures-list tr[data-id]', 4);
     });
 
     bdd.it('should create a new custom measure', function () {
@@ -47,7 +47,7 @@ define(function (require) {
           { data: { projectId: projectId } })
           .mockFromFile('/api/metrics/search', 'custom-measures-spec/metrics.json', { data: { isCustom: true } })
           .startApp('custom-measures', { projectId: projectId })
-          .checkElementCount('#custom-measures-list li[data-id]', 4)
+          .checkElementCount('#custom-measures-list tr[data-id]', 4)
           .clickElement('#custom-measures-create')
           .checkElementExist('#create-custom-measure-form')
           .clearMocks()
@@ -64,7 +64,7 @@ define(function (require) {
           .fillElement('#create-custom-measure-description', 'example')
           .clickElement('#create-custom-measure-submit')
           .checkElementExist('[data-id="6"]')
-          .checkElementCount('#custom-measures-list li[data-id]', 5)
+          .checkElementCount('#custom-measures-list tr[data-id]', 5)
           .checkElementInclude('[data-id="6"] .js-custom-measure-value', '17');
     });
 
-- 
2.39.5