ChartView: Skip comments and render hash links (#1476)

dashboard/package.json

@@ -15,6 +15,7 @@
     "@types/react": "^16.9.11",
     "@types/react-jsonschema-form": "^1.0.4",
     "@types/react-router-dom": "^5.1.2",
+    "@types/react-router-hash-link": "^1.2.1",
     "@types/react-select": "^1.2.6",
     "@types/react-tabs": "^2.3.1",
     "@types/react-tooltip": "^3.9.3",
@@ -51,6 +52,7 @@
     "react-redux": "^5.0.6",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
+    "react-router-hash-link": "^1.2.2",
     "react-select": "^1.2.1",
     "react-switch": "^5.0.1",
     "react-tabs": "^3.0.0",

dashboard/src/components/ChartView/ChartReadme.test.tsx

@@ -2,6 +2,8 @@ import { mount, shallow } from "enzyme";
 import context from "jest-plugin-context";
 import * as React from "react";
 import * as ReactMarkdown from "react-markdown";
+import { BrowserRouter } from "react-router-dom";
+import { HashLink as Link } from "react-router-hash-link";
 
 import itBehavesLike from "../../shared/specs";
 
@@ -70,3 +72,33 @@ it("renders the ReactMarkdown content adding IDs for the titles", () => {
   const component = wrapper.find("#markdown-readme_or_not");
   expect(component).toExist();
 });
+
+it("renders the ReactMarkdown ignoring comments", () => {
+  const wrapper = mount(
+    <ChartReadme
+      getChartReadme={jest.fn()}
+      hasError={false}
+      version="1.2.3"
+      readme={`<!-- This is a comment -->
+      This is text`}
+    />,
+  );
+  const html = wrapper.html();
+  expect(html).toContain("This is text");
+  expect(html).not.toContain("This is a comment");
+});
+
+it("renders the ReactMarkdown content with hash links", () => {
+  const wrapper = mount(
+    <BrowserRouter>
+      <ChartReadme
+        getChartReadme={jest.fn()}
+        hasError={false}
+        version="1.2.3"
+        readme={`[section 1](#section-1)
+      # Section 1`}
+      />
+    </BrowserRouter>,
+  );
+  expect(wrapper.find(Link)).toExist();
+});

dashboard/src/components/ChartView/ChartReadme.tsx

@@ -6,6 +6,7 @@ import LoadingWrapper from "../LoadingWrapper";
 import HeadingRenderer from "./HeadingRenderer";
 
 import "./ChartReadme.css";
+import LinkRenderer from "./LinkRenderer";
 
 interface IChartReadmeProps {
   getChartReadme: (version: string) => void;
@@ -36,7 +37,14 @@ class ChartReadme extends React.Component<IChartReadmeProps> {
       <LoadingWrapper loaded={!!readme}>
         {readme && (
           <div className="ChartReadme">
-            <ReactMarkdown source={readme} renderers={{ heading: HeadingRenderer }} />
+            <ReactMarkdown
+              source={readme}
+              renderers={{
+                heading: HeadingRenderer,
+                link: LinkRenderer,
+              }}
+              skipHtml={true}
+            />
           </div>
         )}
       </LoadingWrapper>

dashboard/src/components/ChartView/LinkRenderer.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { HashLink as Link } from "react-router-hash-link";
+
+const LinkRenderer: React.SFC<{}> = (props: any) => {
+  if (props.href.startsWith("#")) {
+    return <Link to={props.href}>{props.children}</Link>;
+  }
+  // If it's not a hash link it's an external link since it's rendering
+  // the chart README. Because of that, render it as a normal anchor
+  return <a href={props.href}>{props.children}</a>;
+};
+
+export default LinkRenderer;

dashboard/yarn.lock

@@ -349,6 +349,15 @@
     "@types/react" "*"
     redux "^4.0.0"
 
+"@types/react-router-dom@*":
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.3.tgz#b5d28e7850bd274d944c0fbbe5d57e6b30d71196"
+  integrity sha512-pCq7AkOvjE65jkGS5fQwQhvUp4+4PVD9g39gXLZViP2UqFiFzsEpB3PKf0O6mdbKsewSK8N14/eegisa/0CwnA==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
 "@types/react-router-dom@^5.1.2":
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.2.tgz#853f229f1f297513c0be84f7c914a08b778cfdf5"
@@ -358,6 +367,14 @@
     "@types/react" "*"
     "@types/react-router" "*"
 
+"@types/react-router-hash-link@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@types/react-router-hash-link/-/react-router-hash-link-1.2.1.tgz#fba7dc351cef2985791023018b7a5dbd0653c843"
+  integrity sha512-jdzPGE8jFGq7fHUpPaKrJvLW1Yhoe5MQCrmgeesC+eSLseMj3cGCTYMDA4BNWG8JQmwO8NTYt/oT3uBZ77pmBA==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-router-dom" "*"
+
 "@types/react-router@*":
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.3.tgz#7c7ca717399af64d8733d8cb338dd43641b96f2d"
@@ -9034,6 +9051,13 @@ react-router-dom@^5.1.2:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-router-hash-link@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/react-router-hash-link/-/react-router-hash-link-1.2.2.tgz#7a0ad5e925d49596d19554de8bc6c554ce4f8099"
+  integrity sha512-LBthLVHdqPeKDVt3+cFRhy15Z7veikOvdKRZRfyBR2vjqIE7rxn+tKLjb6DOmLm6JpoQVemVDnxQ35RVnEHdQA==
+  dependencies:
+    prop-types "^15.6.0"
+
 react-router-redux@^4.0.0:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-4.0.8.tgz#227403596b5151e182377dab835b5d45f0f8054e"