From: Stas Vilchik Date: Wed, 18 Jul 2018 12:38:26 +0000 (+0200) Subject: SONAR-10869 add custom syntax for warning/info messages (#519) X-Git-Tag: 7.5~732 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=94459a7435354e2453e24753c7ab54d126be2187;p=sonarqube.git 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 f21cbebdaed..19d540c5c43 100644 --- 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 b091d4a47ff..0ff424557d0 100644 --- 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 d0c4ddc7a58..07f425a9740 100644 --- 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 4166445e89f..de94cd73ad1 100644 --- 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 index 00000000000..cf8ff3dd405 --- /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 2b673ee2181..052985a3d21 100644 --- 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 b12a5eb3459..3b0f59df929 100644 --- 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 8335254c05c..43106601f59 100644 --- 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 index 00000000000..2a8a530461d --- /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 9bc318b209b..04941089c06 100644 --- 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 c61a7212c52..72978acb947 100644 --- 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 { { 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: 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 { // 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

( return ; }; } + +function Block(props: React.HtmlHTMLAttributes) { + if (props.className) { + return

{props.children}
; + } 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 c84fe63dedf..8c2ba79743a 100644 --- 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`] = `
-

text

- +
`; @@ -48,7 +48,7 @@ exports[`should cut sonarqube/sonarcloud content 2`] = `
-

text

- +
`; @@ -78,7 +78,7 @@ exports[`should render simple markdown 1`] = `
-

text

- +
`; -exports[`should use custom component for links 1`] = ` +exports[`should render with custom props for links 1`] = ` link `; -exports[`should render with custom props for links 1`] = ` +exports[`should use custom component for links 1`] = ` link diff --git a/server/sonar-web/yarn.lock b/server/sonar-web/yarn.lock index 1dc261f22da..27b31b63ff4 100644 --- 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: