SONAR-10869 add custom syntax for warning/info messages (#519)

diff --git a/server/sonar-docs/gatsby-config.js b/server/sonar-docs/gatsby-config.js
index f21cbebdaedb303474ef7acc3b744cb401cfa68a..19d540c5c43a3ab5c5973da60fef5b80bdd9d6aa 100644 (file)
--- a/server/sonar-docs/gatsby-config.js
+++ b/server/sonar-docs/gatsby-config.js
@@ -31,7 +31,24 @@ module.exports = {
       resolve: 'gatsby-plugin-typography',
       options: { pathToConfigModule: `src/utils/typography` }
     },
-    'gatsby-transformer-remark',
+    {
+      resolve: 'gatsby-transformer-remark',
+      options: {
+        plugins: [
+          {
+            resolve: 'gatsby-remark-custom-blocks',
+            options: {
+              blocks: {
+                danger: 'alert alert-danger',
+                warning: 'alert alert-warning',
+                info: 'alert alert-info',
+                success: 'alert alert-success'
+              }
+            }
+          }
+        ]
+      }
+    },
     'gatsby-plugin-glamor'
   ]
 };

diff --git a/server/sonar-docs/package.json b/server/sonar-docs/package.json
index b091d4a47fff4dc2ec22101cc9ba44b031599587..0ff424557d06b896247ab2b8c84f7a917fd7aa90 100644 (file)
--- a/server/sonar-docs/package.json
+++ b/server/sonar-docs/package.json
@@ -10,6 +10,7 @@
     "gatsby-plugin-glamor": "^1.6.13",
     "gatsby-plugin-react-helmet": "^2.0.10",
     "gatsby-plugin-typography": "^1.7.18",
+    "gatsby-remark-custom-blocks": "^1.0.5",
     "gatsby-source-filesystem": "^1.5.34",
     "gatsby-transformer-remark": "^1.7.40",
     "react-helmet": "^5.2.0",

diff --git a/server/sonar-docs/src/pages/analyze-a-project.md b/server/sonar-docs/src/pages/analyze-a-project.md
index d0c4ddc7a588fd38e902e38efe60b79147b96435..07f425a9740c74cc8450bf3ee501c7e3551fdb43 100644 (file)
--- a/server/sonar-docs/src/pages/analyze-a-project.md
+++ b/server/sonar-docs/src/pages/analyze-a-project.md
@@ -7,7 +7,8 @@ scope: sonarcloud
 
 A project must belong to an [organization](/organizations/index). Create one if you intend to collaborate with your team mates, or use your personal organization for test purposes.
 
-** /!\ Important note for private code:** Newly created organizations and personal organizations are under a free plan by default. This means projects analyzed on these organizations are public by default: the code will be browsable by anyone. If you want private projects, you should [upgrade your organization to a paid plan](/sonarcloud-pricing) in the "Administration > Billing" page of your organization.
+[[info]]
+| ** Important note for private code:** Newly created organizations and personal organizations are under a free plan by default. This means projects analyzed on these organizations are public by default: the code will be browsable by anyone. If you want private projects, you should [upgrade your organization to a paid plan](/sonarcloud-pricing) in the "Administration > Billing" page of your organization.
 
 Find the key of your organization, you will need it at later stages. It can be found on the top right corner of your organization's header.
 

diff --git a/server/sonar-docs/src/pages/integrations/vsts.md b/server/sonar-docs/src/pages/integrations/vsts.md
index 4166445e89f5b2709be861821b285791f7ece829..de94cd73ad16260294aaef026feefa8477f59e9d 100644 (file)
--- a/server/sonar-docs/src/pages/integrations/vsts.md
+++ b/server/sonar-docs/src/pages/integrations/vsts.md
@@ -8,7 +8,8 @@ scope: sonarcloud
 
 You can connect to SonarCloud using your VSTS account. On the [login page](/#sonarcloud#/sessions/new), just click on the "Log in with VSTS" button.
 
-** /!\ Warning:** Only work and school VSTS accounts are authorized to login on SonarCloud.
+[[warning]]
+| Only work and school VSTS accounts are authorized to login on SonarCloud.
 
 ## Install the SonarCloud VSTS extension
 
@@ -34,4 +35,4 @@ You can monitor the Quality Gate status of your projects directly in your VSTS d
 
     * **For public projects:** you can simply select your project from the dropdown. A searchbar inside the dropdown will help you find it easily. Just select it and click on the "Save" button.
 
-    * **For private projects:** you'll have to log in using the links provided under the dropdown. Once logged in, your private projects will appear in the dropdown. Select the one you are interested in, and click on "Save".
\ No newline at end of file
+    * **For private projects:** you'll have to log in using the links provided under the dropdown. Once logged in, your private projects will appear in the dropdown. Select the one you are interested in, and click on "Save".

diff --git a/server/sonar-docs/src/templates/page.css b/server/sonar-docs/src/templates/page.css
new file mode 100644 (file)
index 0000000..cf8ff3d
--- /dev/null
+++ b/server/sonar-docs/src/templates/page.css
@@ -0,0 +1,34 @@
+.alert {
+  display: block;
+  margin: 0 -1em 1.5rem;
+  padding: 1em;
+  border: 1px solid #777;
+}
+
+.alert > p {
+  margin: 0;
+}
+
+.alert-danger {
+  border-color: #ebccd1;
+  background-color: #f2dede;
+  color: #a94442;
+}
+
+.alert-warning {
+  border-color: #faebcc;
+  background-color: #fcf8e3;
+  color: #8a6d3b;
+}
+
+.alert-info {
+  border-color: #bce8f1;
+  background-color: #d9edf7;
+  color: #31708f;
+}
+
+.alert-success {
+  border-color: #d6e9c6;
+  background-color: #dff0d8;
+  color: #3c763d;
+}

diff --git a/server/sonar-docs/src/templates/page.js b/server/sonar-docs/src/templates/page.js
index 2b673ee2181f03f5fda97e993826017001e0ea7b..052985a3d21eec7165436b4ad6a56660d39650ad 100644 (file)
--- a/server/sonar-docs/src/templates/page.js
+++ b/server/sonar-docs/src/templates/page.js
@@ -19,6 +19,7 @@
  */
 import React from 'react';
 import Helmet from 'react-helmet';
+import './page.css';
 
 export default ({ data }) => {
   const page = data.markdownRemark;

diff --git a/server/sonar-docs/yarn.lock b/server/sonar-docs/yarn.lock
index b12a5eb34591710241ed27ec5409e3daf0bb1059..3b0f59df929b5185921a7e3f43fd1b6990d4926c 100644 (file)
--- a/server/sonar-docs/yarn.lock
+++ b/server/sonar-docs/yarn.lock
@@ -3283,6 +3283,13 @@ gatsby-react-router-scroll@^1.0.14:
     scroll-behavior "^0.9.9"
     warning "^3.0.0"
 
+gatsby-remark-custom-blocks@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-custom-blocks/-/gatsby-remark-custom-blocks-1.0.5.tgz#c5601c4be4d4e325bd41d656cf7b18670070435b"
+  dependencies:
+    babel-runtime "^6.26.0"
+    remark-custom-blocks "^1.0.6"
+
 gatsby-source-filesystem@^1.5.34:
   version "1.5.34"
   resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-1.5.34.tgz#cfac995cd8f2d5f406ad073a213ca7566de17f44"
@@ -7087,6 +7094,12 @@ relay-runtime@1.4.1:
     fbjs "^0.8.14"
     relay-debugger-react-native-runtime "0.0.10"
 
+remark-custom-blocks@^1.0.6:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/remark-custom-blocks/-/remark-custom-blocks-1.0.9.tgz#40f9511097104d074e814f3487e24411425a03e6"
+  dependencies:
+    space-separated-tokens "^1.1.1"
+
 remark-include@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/remark-include/-/remark-include-2.0.0.tgz#f5934f0093316482cdb8dae7a72d0a1ae07bf9db"
@@ -7860,7 +7873,7 @@ sourcemapped-stacktrace@^1.1.6:
   dependencies:
     source-map "0.5.6"
 
-space-separated-tokens@^1.0.0:
+space-separated-tokens@^1.0.0, space-separated-tokens@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.2.tgz#e95ab9d19ae841e200808cd96bc7bd0adbbb3412"
   dependencies:

diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json
index 8335254c05c6d661c3ccae100bab9d42c60d6a7a..43106601f5996154299a0ad753b130e84a8f529f 100644 (file)
--- a/server/sonar-web/package.json
+++ b/server/sonar-web/package.json
@@ -38,6 +38,7 @@
     "redux": "3.7.2",
     "redux-logger": "3.0.6",
     "redux-thunk": "2.2.0",
+    "remark-custom-blocks": "2.2.0",
     "remark-toc": "5.0.0",
     "whatwg-fetch": "2.0.4"
   },

diff --git a/server/sonar-web/src/main/js/@types/remark-custom-blocks.d.ts b/server/sonar-web/src/main/js/@types/remark-custom-blocks.d.ts
new file mode 100644 (file)
index 0000000..2a8a530
--- /dev/null
+++ b/server/sonar-web/src/main/js/@types/remark-custom-blocks.d.ts
@@ -0,0 +1,22 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2018 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.
+ */
+declare module 'remark-custom-blocks' {
+  export default function customBlock(): any;
+}

diff --git a/server/sonar-web/src/main/js/apps/documentation/styles.css b/server/sonar-web/src/main/js/apps/documentation/styles.css
index 9bc318b209b522a574badebe6898d06e6e4c7c18..04941089c06b21270b43b29f4d53e74c2f2b899c 100644 (file)
--- a/server/sonar-web/src/main/js/apps/documentation/styles.css
+++ b/server/sonar-web/src/main/js/apps/documentation/styles.css
@@ -52,6 +52,7 @@
   background-color: rgba(0, 0, 0, 0.06);
 }
 
+.documentation-content.markdown .alert,
 .documentation-content.markdown p,
 .documentation-content.markdown pre,
 .documentation-content.markdown table {
@@ -76,3 +77,7 @@
 .documentation-content.markdown img[src$='.svg'] {
   vertical-align: text-bottom;
 }
+
+.documentation-content.markdown .alert p {
+  margin: 0;
+}

diff --git a/server/sonar-web/src/main/js/components/docs/DocMarkdownBlock.tsx b/server/sonar-web/src/main/js/components/docs/DocMarkdownBlock.tsx
index c61a7212c528f4d949c61fb4ebe38ce3c9a6fdf1..72978acb947f40fe22daf9c15437ba68669804fd 100644 (file)
--- a/server/sonar-web/src/main/js/components/docs/DocMarkdownBlock.tsx
+++ b/server/sonar-web/src/main/js/components/docs/DocMarkdownBlock.tsx
@@ -22,6 +22,7 @@ import * as classNames from 'classnames';
 import remark from 'remark';
 import reactRenderer from 'remark-react';
 import remarkToc from 'remark-toc';
+import remarkCustomBlocks from 'remark-custom-blocks';
 import DocLink from './DocLink';
 import DocImg from './DocImg';
 import DocTooltipLink from './DocTooltipLink';
@@ -58,10 +59,15 @@ export default class DocMarkdownBlock extends React.PureComponent<Props> {
         {
           remark()
             .use(remarkToc, { maxDepth: 3 })
+            .use(remarkCustomBlocks, {
+              danger: { classes: 'alert alert-danger' },
+              warning: { classes: 'alert alert-warning' },
+              info: { classes: 'alert alert-info' },
+              success: { classes: 'alert alert-success' }
+            })
             .use(reactRenderer, {
               remarkReactComponents: {
-                // do not render outer <div />
-                div: React.Fragment,
+                div: Block,
                 // use custom link to render documentation anchors
                 a: isTooltip
                   ? withChildProps(DocTooltipLink, childProps)
@@ -69,7 +75,8 @@ export default class DocMarkdownBlock extends React.PureComponent<Props> {
                 // use custom img tag to render documentation images
                 img: DocImg
               },
-              toHast: {}
+              toHast: {},
+              sanitize: false
             })
             .processSync(filterContent(parsed.content)).contents
         }
@@ -86,3 +93,11 @@ function withChildProps<P>(
     return <WrappedComponent customProps={childProps} {...props} />;
   };
 }
+
+function Block(props: React.HtmlHTMLAttributes<HTMLDivElement>) {
+  if (props.className) {
+    return <div className={classNames('cut-margins', props.className)}>{props.children}</div>;
+  } else {
+    return props.children;
+  }
+}

diff --git a/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocMarkdownBlock-test.tsx.snap b/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocMarkdownBlock-test.tsx.snap
index c84fe63dedf77eeb45a3760382002483bfbef57a..8c2ba79743ae53d98ec575a694fa39fa41525887 100644 (file)
--- a/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocMarkdownBlock-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocMarkdownBlock-test.tsx.snap
@@ -4,7 +4,7 @@ exports[`should cut sonarqube/sonarcloud content 1`] = `
 <div
   className="markdown"
 >
-  <React.Fragment
+  <Block
     key="h-1"
   >
     <p
@@ -40,7 +40,7 @@ exports[`should cut sonarqube/sonarcloud content 1`] = `
     >
       text
     </p>
-  </React.Fragment>
+  </Block>
 </div>
 `;
 
@@ -48,7 +48,7 @@ exports[`should cut sonarqube/sonarcloud content 2`] = `
 <div
   className="markdown"
 >
-  <React.Fragment
+  <Block
     key="h-1"
   >
     <p
@@ -70,7 +70,7 @@ exports[`should cut sonarqube/sonarcloud content 2`] = `
     >
       text
     </p>
-  </React.Fragment>
+  </Block>
 </div>
 `;
 
@@ -78,7 +78,7 @@ exports[`should render simple markdown 1`] = `
 <div
   className="markdown"
 >
-  <React.Fragment
+  <Block
     key="h-1"
   >
     <p
@@ -92,22 +92,22 @@ exports[`should render simple markdown 1`] = `
       </em>
        text
     </p>
-  </React.Fragment>
+  </Block>
 </div>
 `;
 
-exports[`should use custom component for links 1`] = `
+exports[`should render with custom props for links 1`] = `
 <withChildProps
-  href="/quality-profiles"
+  href="#quality-profiles"
   key="h-3"
 >
   link
 </withChildProps>
 `;
 
-exports[`should render with custom props for links 1`] = `
+exports[`should use custom component for links 1`] = `
 <withChildProps
-  href="#quality-profiles"
+  href="/quality-profiles"
   key="h-3"
 >
   link

diff --git a/server/sonar-web/yarn.lock b/server/sonar-web/yarn.lock
index 1dc261f22da93c6a6853cb9842a95d319b6ab89e..27b31b63ff4d1aaa50cf817f7ca717b659925b67 100644 (file)
--- a/server/sonar-web/yarn.lock
+++ b/server/sonar-web/yarn.lock
@@ -7361,6 +7361,12 @@ relateurl@0.2.x:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
 
+remark-custom-blocks@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/remark-custom-blocks/-/remark-custom-blocks-2.2.0.tgz#44a809818537482d3a89a4bcb41c978867653836"
+  dependencies:
+    space-separated-tokens "^1.1.1"
+
 remark-parse@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-5.0.0.tgz#4c077f9e499044d1d5c13f80d7a98cf7b9285d95"
@@ -7980,7 +7986,7 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
-space-separated-tokens@^1.0.0:
+space-separated-tokens@^1.0.0, space-separated-tokens@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.2.tgz#e95ab9d19ae841e200808cd96bc7bd0adbbb3412"
   dependencies: