SONAR-6005 Migrate markdown help window from ruby

5 files changed, 164 insertions, 102 deletions

diff --git a/server/sonar-web/src/main/hbs/markdown/markdown-help.hbs b/server/sonar-web/src/main/hbs/markdown/markdown-help.hbs
new file mode 100644
index 00000000000..9524f7bb12a
--- /dev/null
+++ b/server/sonar-web/src/main/hbs/markdown/markdown-help.hbs
@@ -0,0 +1,100 @@
+<h2 class="spacer-bottom">Markdown Syntax</h2>
+<table class="width-100 data zebra table-bordered">
+  <thead>
+  <tr>
+    <th>Write:</th>
+    <th>To display:</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>*this text is bold*</td>
+    <td class="markdown"><strong>this text is bold</strong></td>
+  </tr>
+  <tr>
+    <td>http://sonarqube.org</td>
+    <td><a href="http://sonarqube.org">http://sonarqube.org</a></td>
+  </tr>
+  <tr>
+    <td class="text-top">
+      [SonarQube™ Home Page](http://www.sonarqube.org)
+    </td>
+    <td class="markdown text-top">
+      <a href="http://www.sonarqube.org" target="_blank">SonarQube™ Home Page</a>
+    </td>
+  </tr>
+  <tr>
+    <td class="text-top">* first item<br>
+      * second item
+    </td>
+    <td class="markdown">
+      <ul>
+        <li>first item</li>
+        <li>second item</li>
+      </ul>
+    </td>
+  </tr>
+  <tr>
+    <td class="text-top">1. first item<br>
+      1. second item
+    </td>
+    <td class="markdown text-top">
+      <ol>
+        <li>first item</li>
+        <li>second item</li>
+      </ol>
+    </td>
+  </tr>
+  <tr>
+    <td class="text-top">
+      = Heading Level 1<br>
+      == Heading Level 2<br>
+      === Heading Level 3<br>
+      ==== Heading Level 4<br>
+      ===== Heading Level 5<br>
+      ====== Heading Level 6<br>
+    <td class="markdown text-top">
+      <h1>Heading Level 1</h1>
+      <h2>Heading Level 2</h2>
+      <h3>Heading Level 3</h3>
+      <h4>Heading Level 4</h4>
+      <h5>Heading Level 5</h5>
+      <h6>Heading Level 6</h6>
+    </td>
+  </tr>
+  <tr>
+    <td class="text-top">``Lists#newArrayList()``</td>
+    <td class="markdown text-top"><code>Lists#newArrayList()</code></td>
+  </tr>
+  <tr>
+    <td class="text-top">
+      ``<br>
+      // code on multiple lines<br>
+      public void foo() {<br>
+      &nbsp;&nbsp;// do some logic here<br>
+      }<br>
+      ``
+    </td>
+    <td class="markdown text-top">
+<pre>
+  // code on multiple lines
+  public void foo() {
+  // do some logic here
+  }
+</pre>
+    </td>
+  </tr>
+  <tr>
+    <td class="text-top">
+      Standard text<br>
+      > Blockquoted text<br>
+      > that spans multiple lines<br>
+    </td>
+    <td class="markdown text-top">
+      <p>Standard text</p>
+      <blockquote>Blockquoted text<br>
+        that spans multiple lines<br></blockquote>
+    </td>
+  </tr>
+  </tbody>
+</table>
diff --git a/server/sonar-web/src/main/js/markdown/app.js b/server/sonar-web/src/main/js/markdown/app.js
new file mode 100644
index 00000000000..8446405c15c
--- /dev/null
+++ b/server/sonar-web/src/main/js/markdown/app.js
@@ -0,0 +1,30 @@
+/*
+ * SonarQube, open source software quality management tool.
+ * Copyright (C) 2008-2014 SonarSource
+ * mailto:contact AT sonarsource DOT com
+ *
+ * SonarQube is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * SonarQube is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+define(['markdown/markdown-help-view'], function (MarkdownView) {
+
+  var App = new Marionette.Application();
+
+  App.on('start', function (options) {
+    new MarkdownView({ el: options.el }).render();
+  });
+
+  return App;
+
+});
diff --git a/server/sonar-web/src/main/js/markdown/markdown-help-view.js b/server/sonar-web/src/main/js/markdown/markdown-help-view.js
new file mode 100644
index 00000000000..8c2c10dee66
--- /dev/null
+++ b/server/sonar-web/src/main/js/markdown/markdown-help-view.js
@@ -0,0 +1,26 @@
+/*
+ * SonarQube, open source software quality management tool.
+ * Copyright (C) 2008-2014 SonarSource
+ * mailto:contact AT sonarsource DOT com
+ *
+ * SonarQube is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * SonarQube is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * 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/markdown'], function () {
+
+  return Marionette.ItemView.extend({
+    template: Templates['markdown-help']
+  });
+
+});
diff --git a/server/sonar-web/src/main/less/style.less b/server/sonar-web/src/main/less/style.less
index 46c7ee988e7..7114b2e2314 100644
--- a/server/sonar-web/src/main/less/style.less
+++ b/server/sonar-web/src/main/less/style.less
@@ -462,7 +462,8 @@ ul.bullet li {
 
 
 /* API for Rule and Property Descriptions  */
-.rule-desc {
+.rule-desc,
+.markdown {
   .formatted;
 }
 
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/markdown/help.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/markdown/help.html.erb
index fe0b4702f53..7c85dbec572 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/markdown/help.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/markdown/help.html.erb
@@ -1,101 +1,6 @@
-<div id="markdown-full-help">
-  <h2 class="spacer-bottom">Markdown Syntax</h2>
-  <table class="width100 table table-bordered spacer-bottom">
-    <thead>
-    <tr>
-      <th>Write :</th>
-      <th>To display :</th>
-    </tr>
-    </thead>
-    <tbody>
-    <tr class="even">
-      <td>*this text is bold*</td>
-      <td><b>this text is bold</b></td>
-    </tr>
-    <tr class="odd">
-      <td>http://sonarqube.org</td>
-      <td><a href="http://sonarqube.org">http://sonarqube.org</a></td>
-    </tr>
-    <tr class="even">
-      <td valign="top">* first item<br>
-      * second item</td>
-      <td class="discussionComment" style="background-color: inherit">
-        <ul>
-          <li>first item</li>
-          <li>second item</li>
-        </ul>
-      </td>
-    </tr>
-    <tr class="odd">
-      <td valign="top">1. first item<br>
-      1. second item</td>
-      <td class="discussionComment" style="background-color: inherit">
-        <ol>
-          <li>first item</li>
-          <li>second item</li>
-        </ol>
-      </td>
-    </tr>
-    <tr class="even">
-      <td valign="top">
-        = Heading Level 1<br>
-        == Heading Level 2<br>
-        === Heading Level 3<br>
-        ==== Heading Level 4<br>
-        ===== Heading Level 5<br>
-        ====== Heading Level 6<br>
-      <td valign="top">
-      <h1>Heading Level 1</h1>
-      <h2>Heading Level 2</h2>
-      <h3>Heading Level 3</h3>
-      <h4>Heading Level 4</h4>
-      <h5>Heading Level 5</h5>
-      <h6>Heading Level 6</h6>
-      </td>
-    </tr>
-    <tr class="odd">
-      <td valign="top">``Lists#newArrayList()``</td>
-      <td><code>Lists#newArrayList()</code></td>
-    </tr>
-    <tr class="even">
-      <td valign="top">
-        ``<br>
-        // code on multiple lines<br>
-        public void foo() {<br>
-        &nbsp;&nbsp;// do some logic here<br>
-        }<br>
-        ``
-      </td>
-      <td valign="top"><pre style="border: 1px dashed #DDD;padding: 5px;color: #444;font-size: 12px;">
-<code>
-  // code on multiple lines
-  public void foo() {
-    // do some logic here
-  }
-</code>
-      </pre>
-      </td>
-    </tr>
-    <tr class="odd">
-      <td valign="top">
-        Standard text<br>
-        > Blockquoted text<br>
-        > that spans multiple lines<br>
-      </td>
-      <td valign="top">
-      <p>Standard text</p>
-      <blockquote>Blockquoted text<br>
-      that spans multiple lines<br></blockquote>
-      </td>
-    </tr>
-    <tr class="even">
-      <td valign="top">
-        [SonarQube™ Home Page](http://www.sonarqube.org)
-      </td>
-      <td valign="top">
-      <a href="http://www.sonarqube.org" target="_blank">SonarQube™ Home Page</a>
-      </td>
-    </tr>
-    </tbody>
-  </table>
-</div>
+<div id="markdown-full-help"></div>
+<script>
+  require(['markdown/app'], function (App) {
+    App.start({ el: '#markdown-full-help' });
+  });
+</script>