SONAR-12872 Rename Markdown Syntax to Formatting Syntax

21 files changed, 323 insertions, 44 deletions

diff --git a/server/sonar-web/src/main/js/app/components/MarkdownHelp.tsx b/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx
index 278d742295c..a6e29c00405 100644
--- a/server/sonar-web/src/main/js/app/components/MarkdownHelp.tsx
+++ b/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx
@@ -19,10 +19,10 @@
  */
 import * as React from 'react';
 
-export default function MarkdownHelp() {
+export default function FormattingHelp() {
   return (
     <div className="page page-limited">
-      <h2 className="spacer-bottom">Markdown Syntax</h2>
+      <h2 className="spacer-bottom">Formatting Syntax</h2>
       <table className="width-100 data zebra">
         <thead>
           <tr>
@@ -38,17 +38,15 @@ export default function MarkdownHelp() {
             </td>
           </tr>
           <tr>
-            <td>http://sonarqube.org</td>
+            <td>https://sonarqube.org</td>
             <td className="markdown">
-              <a href="http://sonarqube.org">http://sonarqube.org</a>
+              <a href="https://sonarqube.org">https://sonarqube.org</a>
             </td>
           </tr>
           <tr>
-            <td className="text-top">[SonarQube™ Home Page](http://www.sonarqube.org)</td>
+            <td className="text-top">[SonarQube™ Home Page](https://www.sonarqube.org)</td>
             <td className="markdown text-top">
-              <a href="http://www.sonarqube.org" rel="noopener noreferrer" target="_blank">
-                SonarQube™ Home Page
-              </a>
+              <a href="https://www.sonarqube.org">SonarQube™ Home Page</a>
             </td>
           </tr>
           <tr>
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/MarkdownTips-test.tsx b/server/sonar-web/src/main/js/app/components/__tests__/FormattingHelp-test.tsx
index a54a1f52454..e5cd6729a2c 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/MarkdownTips-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/__tests__/FormattingHelp-test.tsx
@@ -17,10 +17,11 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import MarkdownTips from '../MarkdownTips';
+import FormattingHelp from '../FormattingHelp';
 
-it('should render the tips', () => {
-  expect(shallow(<MarkdownTips />)).toMatchSnapshot();
+it('should render correctly', () => {
+  expect(shallow(<FormattingHelp />)).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/FormattingHelp-test.tsx.snap b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/FormattingHelp-test.tsx.snap
new file mode 100644
index 00000000000..031748e845e
--- /dev/null
+++ b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/FormattingHelp-test.tsx.snap
@@ -0,0 +1,220 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<div
+  className="page page-limited"
+>
+  <h2
+    className="spacer-bottom"
+  >
+    Formatting 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>
+          https://sonarqube.org
+        </td>
+        <td
+          className="markdown"
+        >
+          <a
+            href="https://sonarqube.org"
+          >
+            https://sonarqube.org
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <td
+          className="text-top"
+        >
+          [SonarQube™ Home Page](https://www.sonarqube.org)
+        </td>
+        <td
+          className="markdown text-top"
+        >
+          <a
+            href="https://www.sonarqube.org"
+          >
+            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 />
+            
+          // 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 />
+          &gt; Blockquoted text
+          <br />
+          &gt; 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/index.ts b/server/sonar-web/src/main/js/app/index.ts
index 715df897aa9..f58c8112b97 100644
--- a/server/sonar-web/src/main/js/app/index.ts
+++ b/server/sonar-web/src/main/js/app/index.ts
@@ -112,6 +112,6 @@ function isMainApp() {
     !pathname.startsWith(`${getBaseUrl()}/sessions`) &&
     !pathname.startsWith(`${getBaseUrl()}/maintenance`) &&
     !pathname.startsWith(`${getBaseUrl()}/setup`) &&
-    !pathname.startsWith(`${getBaseUrl()}/markdown/help`)
+    !pathname.startsWith(`${getBaseUrl()}/formatting/help`)
   );
 }
diff --git a/server/sonar-web/src/main/js/app/utils/startReactApp.tsx b/server/sonar-web/src/main/js/app/utils/startReactApp.tsx
index d48e43e2a9f..b667bf0d37e 100644
--- a/server/sonar-web/src/main/js/app/utils/startReactApp.tsx
+++ b/server/sonar-web/src/main/js/app/utils/startReactApp.tsx
@@ -142,6 +142,7 @@ function renderRedirects() {
       <Redirect from="/view" to="/portfolio" />
       <Redirect from="/users" to="/admin/users" />
       <Redirect from="/onboarding" to="/projects/create" />
+      <Redirect from="markdown/help" to="formatting/help" />
     </>
   );
 }
@@ -263,8 +264,8 @@ export default function startReactApp(
               {renderRedirects()}
 
               <Route
-                path="markdown/help"
-                component={lazyLoadComponent(() => import('../components/MarkdownHelp'))}
+                path="formatting/help"
+                component={lazyLoadComponent(() => import('../components/FormattingHelp'))}
               />
 
               <Route component={lazyLoadComponent(() => import('../components/SimpleContainer'))}>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx
index d0d03f69fca..d66c9ba70cc 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx
@@ -27,7 +27,7 @@ import { csvEscape } from 'sonar-ui-common/helpers/csv';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { latinize } from 'sonar-ui-common/helpers/strings';
 import { createRule, updateRule } from '../../../api/rules';
-import MarkdownTips from '../../../components/common/MarkdownTips';
+import FormattingTips from '../../../components/common/FormattingTips';
 import SeverityHelper from '../../../components/shared/SeverityHelper';
 import TypeHelper from '../../../components/shared/TypeHelper';
 import { RULE_STATUSES, RULE_TYPES, SEVERITIES } from '../../../helpers/constants';
@@ -204,7 +204,7 @@ export default class CustomRuleFormModal extends React.PureComponent<Props, Stat
         rows={5}
         value={this.state.description}
       />
-      <MarkdownTips className="modal-field-descriptor text-right" />
+      <FormattingTips className="modal-field-descriptor text-right" />
     </div>
   );
 
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx
index be9fdf20515..54195c680a5 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx
@@ -22,7 +22,7 @@ import * as React from 'react';
 import { Button, ResetButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { updateRule } from '../../../api/rules';
-import MarkdownTips from '../../../components/common/MarkdownTips';
+import FormattingTips from '../../../components/common/FormattingTips';
 import RemoveExtendedDescriptionModal from './RemoveExtendedDescriptionModal';
 
 interface Props {
@@ -176,7 +176,7 @@ export default class RuleDetailsDescription extends React.PureComponent<Props, S
               {this.state.submitting && <i className="spinner spacer-left" />}
             </td>
             <td className="text-right">
-              <MarkdownTips />
+              <FormattingTips />
             </td>
           </tr>
         </tbody>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap
index f244d57d3dd..e51c719d869 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap
@@ -211,7 +211,7 @@ exports[`should handle re-activation 1`] = `
           rows={5}
           value=""
         />
-        <MarkdownTips
+        <FormattingTips
           className="modal-field-descriptor text-right"
         />
       </div>
@@ -442,7 +442,7 @@ exports[`should render correctly 1`] = `
           rows={5}
           value=""
         />
-        <MarkdownTips
+        <FormattingTips
           className="modal-field-descriptor text-right"
         />
       </div>
diff --git a/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
index cf8413ca5a9..a5c94c651a6 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
@@ -32,7 +32,7 @@ import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { bulkChangeIssues, searchIssueTags } from '../../../api/issues';
 import throwGlobalError from '../../../app/utils/throwGlobalError';
-import MarkdownTips from '../../../components/common/MarkdownTips';
+import FormattingTips from '../../../components/common/FormattingTips';
 import SeverityHelper from '../../../components/shared/SeverityHelper';
 import Avatar from '../../../components/ui/Avatar';
 import { isLoggedIn, isUserActive } from '../../../helpers/users';
@@ -476,7 +476,7 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
           rows={4}
           value={this.state.comment || ''}
         />
-        <MarkdownTips className="modal-field-descriptor text-right" />
+        <FormattingTips className="modal-field-descriptor text-right" />
       </div>
     );
   };
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotCommentPopup.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotCommentPopup.tsx
index bcde5657fb5..18c2e74f0fc 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotCommentPopup.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotCommentPopup.tsx
@@ -20,7 +20,7 @@
 import * as React from 'react';
 import { Button, ResetButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import MarkdownTips from '../../../components/common/MarkdownTips';
+import FormattingTips from '../../../components/common/FormattingTips';
 
 export interface HotspotCommentPopupProps {
   markdownComment: string;
@@ -43,7 +43,7 @@ export default function HotspotCommentPopup(props: HotspotCommentPopupProps) {
       </div>
       <div className="spacer-top display-flex-space-between">
         <div className="issue-comment-form-tips">
-          <MarkdownTips />
+          <FormattingTips />
         </div>
         <div className="">
           <Button
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistoryAndComments.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistoryAndComments.tsx
index 20533365dd9..a3bd862abd7 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistoryAndComments.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistoryAndComments.tsx
@@ -26,7 +26,7 @@ import {
   deleteSecurityHotspotComment,
   editSecurityHotspotComment
 } from '../../../api/security-hotspots';
-import MarkdownTips from '../../../components/common/MarkdownTips';
+import FormattingTips from '../../../components/common/FormattingTips';
 import { isLoggedIn } from '../../../helpers/users';
 import { Hotspot } from '../../../types/security-hotspots';
 import HotspotReviewHistory from './HotspotReviewHistory';
@@ -124,7 +124,7 @@ export default class HotspotReviewHistoryAndComments extends React.PureComponent
                     value={comment}
                   />
                   <div className="display-flex-space-between display-flex-center ">
-                    <MarkdownTips className="huge-spacer-bottom" />
+                    <FormattingTips className="huge-spacer-bottom" />
                     <div>
                       <Button
                         className="huge-spacer-bottom"
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotCommentPopup-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotCommentPopup-test.tsx.snap
index e932efe0719..208ccf2633e 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotCommentPopup-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotCommentPopup-test.tsx.snap
@@ -20,7 +20,7 @@ exports[`should render correclty 1`] = `
     <div
       className="issue-comment-form-tips"
     >
-      <MarkdownTips />
+      <FormattingTips />
     </div>
     <div
       className=""
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotReviewHistoryAndComments-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotReviewHistoryAndComments-test.tsx.snap
index a49b712b49c..80d924e02b8 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotReviewHistoryAndComments-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotReviewHistoryAndComments-test.tsx.snap
@@ -139,7 +139,7 @@ exports[`should render correctly 1`] = `
         <div
           className="display-flex-space-between display-flex-center "
         >
-          <MarkdownTips
+          <FormattingTips
             className="huge-spacer-bottom"
           />
           <div>
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusSelectionRenderer.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusSelectionRenderer.tsx
index 16487044701..fc07fe3a1e7 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusSelectionRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusSelectionRenderer.tsx
@@ -22,7 +22,7 @@ import * as React from 'react';
 import { SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import Radio from 'sonar-ui-common/components/controls/Radio';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import MarkdownTips from '../../../../components/common/MarkdownTips';
+import FormattingTips from '../../../../components/common/FormattingTips';
 import { HotspotStatusOption } from '../../../../types/security-hotspots';
 import StatusDescription from './StatusDescription';
 
@@ -76,7 +76,7 @@ export default function StatusSelectionRenderer(props: StatusSelectionRendererPr
           rows={4}
           value={comment}
         />
-        <MarkdownTips />
+        <FormattingTips />
 
         <div className="big-spacer-top display-flex-justify-end display-flex-center">
           <SubmitButton disabled={submitDisabled || loading} onClick={props.onSubmit}>
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/__tests__/__snapshots__/StatusSelectionRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/__tests__/__snapshots__/StatusSelectionRenderer-test.tsx.snap
index 482dd86bb54..c5a7d5aed2d 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/__tests__/__snapshots__/StatusSelectionRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/__tests__/__snapshots__/StatusSelectionRenderer-test.tsx.snap
@@ -53,7 +53,7 @@ exports[`should render correctly 1`] = `
       rows={4}
       value="TEST-COMMENT"
     />
-    <MarkdownTips />
+    <FormattingTips />
     <div
       className="big-spacer-top display-flex-justify-end display-flex-center"
     >
@@ -121,7 +121,7 @@ exports[`should render correctly: loading 1`] = `
       rows={4}
       value="TEST-COMMENT"
     />
-    <MarkdownTips />
+    <FormattingTips />
     <div
       className="big-spacer-top display-flex-justify-end display-flex-center"
     >
diff --git a/server/sonar-web/src/main/js/components/common/MarkdownTips.tsx b/server/sonar-web/src/main/js/components/common/FormattingTips.tsx
index 52b8e3110b0..f01ae64b0ad 100644
--- a/server/sonar-web/src/main/js/components/common/MarkdownTips.tsx
+++ b/server/sonar-web/src/main/js/components/common/FormattingTips.tsx
@@ -20,23 +20,27 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import { getMarkdownHelpUrl } from '../../helpers/urls';
+import { getFormattingHelpUrl } from '../../helpers/urls';
 
 interface Props {
   className?: string;
 }
 
-export default class MarkdownTips extends React.PureComponent<Props> {
+export default class FormattingTips extends React.PureComponent<Props> {
   handleClick(evt: React.SyntheticEvent<HTMLAnchorElement>) {
     evt.preventDefault();
-    window.open(getMarkdownHelpUrl(), 'Markdown', 'height=300,width=600,scrollbars=1,resizable=1');
+    window.open(
+      getFormattingHelpUrl(),
+      'Formatting',
+      'height=300,width=600,scrollbars=1,resizable=1'
+    );
   }
 
   render() {
     return (
       <div className={classNames('markdown-tips', this.props.className)}>
         <a className="little-spacer-right" href="#" onClick={this.handleClick}>
-          {translate('markdown.helplink')}
+          {translate('formatting.helplink')}
         </a>
         {':'}
         <span className="spacer-left">*{translate('bold')}*</span>
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/FormattingTips-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/FormattingTips-test.tsx
new file mode 100644
index 00000000000..3dcca255ef8
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/common/__tests__/FormattingTips-test.tsx
@@ -0,0 +1,55 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2020 SonarSource SA
+ * mailto:info 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.
+ */
+
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import { click } from 'sonar-ui-common/helpers/testUtils';
+import FormattingTips from '../FormattingTips';
+
+const originalOpen = window.open;
+
+beforeAll(() => {
+  Object.defineProperty(window, 'open', {
+    writable: true,
+    value: jest.fn()
+  });
+});
+
+afterAll(() => {
+  Object.defineProperty(window, 'open', {
+    writable: true,
+    value: originalOpen
+  });
+});
+
+it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot();
+});
+
+it('should correctly open a new window', () => {
+  const wrapper = shallowRender();
+  expect(window.open).not.toBeCalled();
+  click(wrapper.find('a'));
+  expect(window.open).toBeCalled();
+});
+
+function shallowRender(props: Partial<FormattingTips['props']> = {}) {
+  return shallow<FormattingTips>(<FormattingTips {...props} />);
+}
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/MarkdownTips-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/FormattingTips-test.tsx.snap
index baeceb6aa90..422fb77bc9b 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/MarkdownTips-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/FormattingTips-test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render the tips 1`] = `
+exports[`should render correctly 1`] = `
 <div
   className="markdown-tips"
 >
@@ -9,7 +9,7 @@ exports[`should render the tips 1`] = `
     href="#"
     onClick={[Function]}
   >
-    markdown.helplink
+    formatting.helplink
   </a>
   :
   <span
diff --git a/server/sonar-web/src/main/js/components/issue/popups/CommentPopup.tsx b/server/sonar-web/src/main/js/components/issue/popups/CommentPopup.tsx
index d81d8217e58..0a6a9ba2af2 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/CommentPopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/CommentPopup.tsx
@@ -22,7 +22,7 @@ import { Button, ResetButtonLink } from 'sonar-ui-common/components/controls/but
 import { DropdownOverlay } from 'sonar-ui-common/components/controls/Dropdown';
 import { PopupPlacement } from 'sonar-ui-common/components/ui/popups';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import MarkdownTips from '../../common/MarkdownTips';
+import FormattingTips from '../../common/FormattingTips';
 
 interface Props {
   comment?: Pick<T.IssueComment, 'markdown'>;
@@ -98,7 +98,7 @@ export default class CommentPopup extends React.PureComponent<Props, State> {
               </ResetButtonLink>
             </div>
             <div className="issue-comment-form-tips">
-              <MarkdownTips />
+              <FormattingTips />
             </div>
           </div>
         </div>
diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/CommentPopup-test.tsx.snap b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/CommentPopup-test.tsx.snap
index d6ad2e18439..9962424c1c3 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/CommentPopup-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/CommentPopup-test.tsx.snap
@@ -40,7 +40,7 @@ exports[`should render the comment popup correctly when changing a comment 1`] =
       <div
         className="issue-comment-form-tips"
       >
-        <MarkdownTips />
+        <FormattingTips />
       </div>
     </div>
   </div>
@@ -87,7 +87,7 @@ exports[`should render the comment popup correctly without existing comment 1`]
       <div
         className="issue-comment-form-tips"
       >
-        <MarkdownTips />
+        <FormattingTips />
       </div>
     </div>
   </div>
diff --git a/server/sonar-web/src/main/js/helpers/urls.ts b/server/sonar-web/src/main/js/helpers/urls.ts
index 1e45ca3cf47..05864ca8404 100644
--- a/server/sonar-web/src/main/js/helpers/urls.ts
+++ b/server/sonar-web/src/main/js/helpers/urls.ts
@@ -239,8 +239,8 @@ export function getRuleUrl(rule: string) {
   return getRulesUrl({ open: rule, rule_key: rule });
 }
 
-export function getMarkdownHelpUrl(): string {
-  return getBaseUrl() + '/markdown/help';
+export function getFormattingHelpUrl(): string {
+  return getBaseUrl() + '/formatting/help';
 }
 
 export function getCodeUrl(