fix(techdocs): avoid rerender current page when navigating to another (#26944)

Signed-off-by: Thomas Cardonne <thomas.cardonne@adevinta.com>
This commit is contained in:
Thomas Cardonne
2024-10-17 14:04:39 +02:00
committed by GitHub
parent f92f09c36e
commit 4a2f73a302
6 changed files with 60 additions and 33 deletions
@@ -64,24 +64,6 @@ describe('TechDocsShadowDom', () => {
expect(onAppend).toHaveBeenCalledTimes(2);
});
it('Should show progress bar while styles are being loaded', async () => {
const dom = createDom(
'<head><link rel="stylesheet" src="styles.css"/></head><body><h1>Title</h1></body>',
);
const onAppend = jest.fn();
dom.querySelector('link[rel="stylesheet"]')!.addEventListener = () => {};
render(
<TechDocsShadowDom element={dom} onAppend={onAppend}>
Children
</TechDocsShadowDom>,
);
await await waitFor(() => {
expect(screen.getByRole('progressbar')).toBeInTheDocument();
});
});
it('Should dispatch an event after all styles are loaded', async () => {
const dom = createDom(
'<head><link rel="stylesheet" src="styles.css"/></head><body><h1>Title</h1></body>',
@@ -98,16 +80,8 @@ describe('TechDocsShadowDom', () => {
render(<TechDocsShadowDom element={dom}>Children</TechDocsShadowDom>);
await await waitFor(() => {
expect(screen.getByRole('progressbar')).toBeInTheDocument();
});
listener({} as Event);
await waitFor(() => {
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
});
expect(handleStylesLoad).toHaveBeenCalledTimes(1);
});
});
-4
View File
@@ -25,8 +25,6 @@ import { create } from 'jss';
import StylesProvider from '@material-ui/styles/StylesProvider';
import jssPreset from '@material-ui/styles/jssPreset';
import { Progress } from '@backstage/core-components';
/**
* Name for the event dispatched when ShadowRoot styles are loaded.
* @public
@@ -216,7 +214,6 @@ export const TechDocsShadowDom = (props: TechDocsShadowDomProps) => {
);
useShadowDomStylesEvents(element);
const loading = useShadowDomStylesLoading(element);
const ref = useCallback(
(shadowHost: HTMLDivElement) => {
@@ -246,7 +243,6 @@ export const TechDocsShadowDom = (props: TechDocsShadowDomProps) => {
return (
<>
{loading && <Progress />}
{/* The sheetsManager={new Map()} is needed in order to deduplicate the injection of CSS in the page. */}
<StylesProvider jss={jss} sheetsManager={new Map()}>
<div ref={ref} data-testid="techdocs-native-shadowroot" />