From ca3269cbb334dd33916802af217c5a0a88fe67ba Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Fri, 9 Dec 2016 15:30:21 +0100
Subject: display markdown help

---
 it/it-tests/src/test/java/it/ui/UiTest.java        |  10 ++
 .../src/main/js/app/components/MarkdownHelp.js     | 131 +++++++++++++++++++++
 .../src/main/js/app/utils/startReactApp.js         |   3 +
 3 files changed, 144 insertions(+)
 create mode 100644 server/sonar-web/src/main/js/app/components/MarkdownHelp.js

diff --git a/it/it-tests/src/test/java/it/ui/UiTest.java b/it/it-tests/src/test/java/it/ui/UiTest.java
index a2e71ebc4ef..497770eb7e1 100644
--- a/it/it-tests/src/test/java/it/ui/UiTest.java
+++ b/it/it-tests/src/test/java/it/ui/UiTest.java
@@ -113,6 +113,16 @@ public class UiTest {
       .shouldHave(text("1 active rules"));
   }
 
+  @Test
+  public void markdown_help() {
+    String tags[] = {"strong", "a", "ul", "ol", "h1", "code", "pre", "blockquote"};
+
+    nav.open("/markdown/help");
+    for (String tag : tags) {
+      $(tag).shouldBe(visible);
+    }
+  }
+
   private static void analyzeSampleProject() {
     ORCHESTRATOR.executeBuild(SonarScanner.create(projectDir("shared/xoo-sample")));
   }
diff --git a/server/sonar-web/src/main/js/app/components/MarkdownHelp.js b/server/sonar-web/src/main/js/app/components/MarkdownHelp.js
new file mode 100644
index 00000000000..835b8e0cd72
--- /dev/null
+++ b/server/sonar-web/src/main/js/app/components/MarkdownHelp.js
@@ -0,0 +1,131 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program 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.
+ *
+ * This program 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.
+ */
+// @flow
+import React from 'react';
+
+export default class MarkdownHelp extends React.Component {
+  render () {
+    return (
+        <div className="page page-limited">
+          <h2 className="spacer-bottom">Markdown Syntax</h2>
+          <table className="width-100 data zebra">
+            <thead>
+              <tr>
+                <th>Write:</th>
+                <th>To display:</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>*this text is bold*</td>
+                <td className="markdown"><strong>this text is bold</strong></td>
+              </tr>
+              <tr>
+                <td>{'http://sonarqube.org'}</td>
+                <td className="markdown"><a href="http://sonarqube.org">{'http://sonarqube.org'}</a></td>
+              </tr>
+              <tr>
+                <td className="text-top">
+                  [SonarQube™ Home Page](http://www.sonarqube.org)
+                </td>
+                <td className="markdown text-top">
+                  <a href="http://www.sonarqube.org" target="_blank">SonarQube™ Home Page</a>
+                </td>
+              </tr>
+              <tr>
+                <td className="text-top">* first item<br/>
+                  * second item
+                </td>
+                <td className="markdown">
+                  <ul>
+                    <li>first item</li>
+                    <li>second item</li>
+                  </ul>
+                </td>
+              </tr>
+              <tr>
+                <td className="text-top">1. first item<br/>
+                  1. second item
+                </td>
+                <td className="markdown text-top">
+                  <ol>
+                    <li>first item</li>
+                    <li>second item</li>
+                  </ol>
+                </td>
+              </tr>
+              <tr>
+                <td className="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>
+                <td className="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 className="text-top">``Lists#newArrayList()``</td>
+                <td className="markdown text-top"><code>Lists#newArrayList()</code></td>
+              </tr>
+              <tr>
+                <td className="text-top">
+                  ``<br/>
+                  // code on multiple lines<br/>
+                  {'public void foo() {'}<br/>
+                  &nbsp;&nbsp;{'// do some logic here'}<br/>
+                  {'}'}<br/>
+                  ``
+                </td>
+                <td className="markdown text-top">
+<pre>
+  // code on multiple lines
+  public void foo() {
+  // do some logic here
+}
+</pre>
+                </td>
+              </tr>
+              <tr>
+                <td className="text-top">
+                  Standard text<br/>
+                  > Blockquoted text<br/>
+                  > that spans multiple lines<br/>
+                </td>
+                <td className="markdown text-top">
+                  <p>Standard text</p>
+                  <blockquote>Blockquoted text<br/>
+                    that spans multiple lines<br/></blockquote>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/app/utils/startReactApp.js b/server/sonar-web/src/main/js/app/utils/startReactApp.js
index 0d22ea04de8..3e1bba4f6ff 100644
--- a/server/sonar-web/src/main/js/app/utils/startReactApp.js
+++ b/server/sonar-web/src/main/js/app/utils/startReactApp.js
@@ -29,6 +29,7 @@ import SimpleContainer from '../components/SimpleContainer';
 import Landing from '../components/Landing';
 import ProjectContainer from '../components/ProjectContainer';
 import AdminContainer from '../components/AdminContainer';
+import MarkdownHelp from '../components/MarkdownHelp';
 import NotFound from '../components/NotFound';
 import aboutRoutes from '../../apps/about/routes';
 import accountRoutes from '../../apps/account/routes';
@@ -69,6 +70,8 @@ const startReactApp = () => {
   render((
       <Provider store={store}>
         <Router history={history}>
+          <Route path="markdown/help" component={MarkdownHelp}/>
+
           <Route component={LocalizationContainer}>
             <Route component={SimpleContainer}>
               <Route path="maintenance">{maintenanceRoutes}</Route>
-- 
cgit v1.2.3