diff --git a/dashboard/package.json b/dashboard/package.json index ba9be2b5bfd..c71b71057b8 100644 --- a/dashboard/package.json +++ b/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", diff --git a/dashboard/src/components/ChartView/ChartReadme.test.tsx b/dashboard/src/components/ChartView/ChartReadme.test.tsx index abbdc49d545..10de8de2d3c 100644 --- a/dashboard/src/components/ChartView/ChartReadme.test.tsx +++ b/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( + + 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( + + + , + ); + expect(wrapper.find(Link)).toExist(); +}); diff --git a/dashboard/src/components/ChartView/ChartReadme.tsx b/dashboard/src/components/ChartView/ChartReadme.tsx index 79effd357f6..311340e057a 100644 --- a/dashboard/src/components/ChartView/ChartReadme.tsx +++ b/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 { {readme && (
- +
)}
diff --git a/dashboard/src/components/ChartView/LinkRenderer.tsx b/dashboard/src/components/ChartView/LinkRenderer.tsx new file mode 100644 index 00000000000..4f3f7e71e84 --- /dev/null +++ b/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 {props.children}; + } + // 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 {props.children}; +}; + +export default LinkRenderer; diff --git a/dashboard/yarn.lock b/dashboard/yarn.lock index aed77fcd057..175db81f156 100644 --- a/dashboard/yarn.lock +++ b/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"