SONAR-12330 Don't filter content multiple times

server/sonar-web/src/main/js/apps/documentation/components/App.tsx

@@ -112,8 +112,8 @@ export default class App extends React.PureComponent<Props> {
               <DocMarkdownBlock
                 className="documentation-content cut-margins boxed-group-inner"
                 content={page.content}
-                displayH1={true}
                 stickyToc={true}
+                title={page.title}
               />
             </div>
           </div>

server/sonar-web/src/main/js/apps/documentation/components/__tests__/__snapshots__/App-test.tsx.snap

@@ -29,8 +29,8 @@ exports[`should render correctly for SonarCloud 1`] = `
         <DocMarkdownBlock
           className="documentation-content cut-margins boxed-group-inner"
           content="Lorem ipsum dolor sit amet fredum"
-          displayH1={true}
           stickyToc={true}
+          title="Lorem"
         />
       </div>
     </div>
@@ -72,8 +72,8 @@ exports[`should render correctly for SonarQube 1`] = `
         <DocMarkdownBlock
           className="documentation-content cut-margins boxed-group-inner"
           content="Lorem ipsum dolor sit amet fredum"
-          displayH1={true}
           stickyToc={true}
+          title="Lorem"
         />
       </div>
     </div>

server/sonar-web/src/main/js/apps/documentation/pages.ts

@@ -39,7 +39,7 @@ export default function getPages(): DocumentationEntry[] {
         ? (parsed.frontmatter.scope.toLowerCase() as DocumentationEntryScope)
         : undefined,
       text,
-      content: file.content
+      content
     };
   });
 }

server/sonar-web/src/main/js/components/docs/DocMarkdownBlock.tsx

@@ -25,7 +25,6 @@ import reactRenderer from 'remark-react';
 import slug from 'remark-slug';
 import 'sonar-ui-common/components/ui/Alert.css'; // eslint-disable-line import/extension
 import { scrollToElement } from 'sonar-ui-common/helpers/scrolling';
-import { filterContent, separateFrontMatter } from '../../helpers/markdown';
 import DocCollapsibleBlock from './DocCollapsibleBlock';
 import DocImg from './DocImg';
 import DocLink from './DocLink';
@@ -35,10 +34,10 @@ import DocTooltipLink from './DocTooltipLink';
 interface Props {
   childProps?: T.Dict<string>;
   className?: string;
-  content: string | undefined;
-  displayH1?: boolean;
+  content: string;
   isTooltip?: boolean;
   stickyToc?: boolean;
+  title?: string;
 }
 
 export default class DocMarkdownBlock extends React.PureComponent<Props> {
@@ -58,9 +57,7 @@ export default class DocMarkdownBlock extends React.PureComponent<Props> {
   };
 
   render() {
-    const { childProps, content, className, displayH1, stickyToc, isTooltip } = this.props;
-    const parsed = separateFrontMatter(content || '');
-    const filteredContent = filterContent(parsed.content);
+    const { childProps, content, className, title, stickyToc, isTooltip } = this.props;
 
     const md = remark();
 
@@ -92,10 +89,10 @@ export default class DocMarkdownBlock extends React.PureComponent<Props> {
         className={classNames('markdown', className, { 'has-toc': stickyToc })}
         ref={ref => (this.node = ref)}>
         <div className="markdown-content">
-          {displayH1 && <h1 className="documentation-title">{parsed.frontmatter.title}</h1>}
-          {md.processSync(filteredContent).contents}
+          {title !== undefined && <h1 className="documentation-title">{title}</h1>}
+          {md.processSync(content).contents}
         </div>
-        {stickyToc && <DocToc content={filteredContent} onAnchorClick={this.handleAnchorClick} />}
+        {stickyToc && <DocToc content={content} onAnchorClick={this.handleAnchorClick} />}
       </div>
     );
   }

server/sonar-web/src/main/js/components/docs/DocTooltip.tsx

@@ -20,6 +20,7 @@
 import * as React from 'react';
 import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip';
 import { lazyLoad } from 'sonar-ui-common/components/lazyLoad';
+import { filterContent } from '../../helpers/markdown';
 
 const DocMarkdownBlock = lazyLoad(() => import('./DocMarkdownBlock'));
 
@@ -73,7 +74,7 @@ export default class DocTooltip extends React.PureComponent<Props, State> {
             <DocMarkdownBlock
               childProps={this.props.overlayProps}
               className="cut-margins"
-              content={this.state.content}
+              content={filterContent(this.state.content)}
               isTooltip={true}
             />
           </div>