paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 18 Packages Projects Releases Wiki Activity

TechDocs: Fix reload when clicking internal docs pages (#2784)

Browse Source 
* Check to see if links start with window.location.origin to see if we should handle it as a internal docs link

* Fixed failing test

* Fix lint issues
This commit is contained in:
Sebastian Qvarfordt
2020-10-08 11:26:46 +02:00
committed by GitHub
parent 78e7202b19
commit 29ec8c2f09
3 changed files with 52 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/techdocs/src/reader/components/Reader.tsx
+1
View File
@@ -116,6 +116,7 @@ export const Reader = ({ entityId, onReady }: Props) => {
return dom;
},
addLinkClickListener({
baseUrl: window.location.origin,
onClick: (_: MouseEvent, url: string) => {
const parsedUrl = new URL(url);
navigate(`${parsedUrl.pathname}${parsedUrl.hash}`);
plugins/techdocs/src/reader/transformers/addLinkClickListener.test.ts
+47 -9
View File
@@ -14,23 +14,61 @@
* limitations under the License.
*/
import { createTestShadowDom, FIXTURES } from '../../test-utils';
import { createTestShadowDom } from '../../test-utils';
import { addLinkClickListener } from '.';
describe('addLinkClickListener', () => {
it('calls onClick when a link has been clicked', () => {
const fn = jest.fn();
const shadowDom = createTestShadowDom(FIXTURES.FIXTURE_STANDARD_PAGE, {
preTransformers: [],
postTransformers: [
addLinkClickListener({
onClick: fn,
}),
],
});
const shadowDom = createTestShadowDom(
`
<!DOCTYPE html>
<html>
<body>
<a href="http://localhost:3000/docs/test">Link</a>
</body>
</html>
`,
{
preTransformers: [],
postTransformers: [
addLinkClickListener({
baseUrl: 'http://localhost:3000',
onClick: fn,
}),
],
},
);
shadowDom.querySelector('a')?.click();
expect(fn).toHaveBeenCalledTimes(1);
});
it('does not call onClick when a link links to another baseUrl', () => {
const fn = jest.fn();
const shadowDom = createTestShadowDom(
`
<!DOCTYPE html>
<html>
<body>
<a href="http://example.com/docs/test">Link</a>
</body>
</html>
`,
{
preTransformers: [],
postTransformers: [
addLinkClickListener({
baseUrl: 'http://localhost:3000',
onClick: fn,
}),
],
},
);
shadowDom.querySelector('a')?.click();
expect(fn).toHaveBeenCalledTimes(0);
});
});
plugins/techdocs/src/reader/transformers/addLinkClickListener.ts
+4 -1
View File
@@ -17,10 +17,12 @@
import type { Transformer } from './index';
type AddLinkClickListenerOptions = {
baseUrl: string;
onClick: (e: MouseEvent, newUrl: string) => void;
};
export const addLinkClickListener = ({
baseUrl,
onClick,
}: AddLinkClickListenerOptions): Transformer => {
return dom => {
@@ -28,8 +30,9 @@ export const addLinkClickListener = ({
elem.addEventListener('click', (e: MouseEvent) => {
const target = e.target as HTMLAnchorElement;
const href = target?.getAttribute('href');
if (!href) return;
if (!href.match(/^https?:\/\//i)) {
if (href.startsWith(baseUrl)) {
e.preventDefault();
onClick(e, target.getAttribute('href')!);
}