From 94778dd4ee8db376c6da0306b46f0f3b6f1e302e Mon Sep 17 00:00:00 2001 From: Sydney Achinger Date: Wed, 19 Jun 2024 15:08:27 -0400 Subject: [PATCH 1/5] Add setShadowRootVersionHash to force shadowRoot to update in provider when version changes. Signed-off-by: Sydney Achinger --- plugins/techdocs-react/src/context.tsx | 7 ++++++- .../TechDocsReaderPageContent.tsx | 9 ++++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/plugins/techdocs-react/src/context.tsx b/plugins/techdocs-react/src/context.tsx index 43fdada98e..7492d4b2a2 100644 --- a/plugins/techdocs-react/src/context.tsx +++ b/plugins/techdocs-react/src/context.tsx @@ -64,6 +64,7 @@ export type TechDocsReaderPageValue = { entityMetadata: AsyncState; shadowRoot?: ShadowRoot; setShadowRoot: Dispatch>; + setShadowRootVersionHash: Dispatch>; title: string; setTitle: Dispatch>; subtitle: string; @@ -80,6 +81,7 @@ const defaultTechDocsReaderPageValue: TechDocsReaderPageValue = { setTitle: () => {}, setSubtitle: () => {}, setShadowRoot: () => {}, + setShadowRootVersionHash: () => {}, metadata: { loading: true }, entityMetadata: { loading: true }, entityRef: { kind: '', name: '', namespace: '' }, @@ -134,6 +136,9 @@ export const TechDocsReaderPageProvider = memo( const [shadowRoot, setShadowRoot] = useState( defaultTechDocsReaderPageValue.shadowRoot, ); + const [, setShadowRootVersionHash] = useState( + undefined, + ); useEffect(() => { if (shadowRoot && !metadata.value && !metadata.loading) { @@ -153,6 +158,7 @@ export const TechDocsReaderPageProvider = memo( entityMetadata, shadowRoot, setShadowRoot, + setShadowRootVersionHash, title, setTitle, subtitle, @@ -190,6 +196,5 @@ export const useTechDocsReaderPage = () => { if (context === undefined) { throw new Error('No context found for version 1.'); } - return context; }; diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx index 3692ed22d3..4a93b98a83 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx @@ -34,6 +34,8 @@ import { TechDocsStateIndicator } from '../TechDocsStateIndicator'; import { useTechDocsReaderDom } from './dom'; import { withTechDocsReaderProvider } from '../TechDocsReaderProvider'; import { TechDocsReaderPageContentAddons } from './TechDocsReaderPageContentAddons'; +// eslint-disable-next-line no-restricted-imports +import { createHash } from 'crypto'; const useStyles = makeStyles({ search: { @@ -80,6 +82,7 @@ export const TechDocsReaderPageContent = withTechDocsReaderProvider( entityMetadata: { value: entityMetadata, loading: entityMetadataLoading }, entityRef, setShadowRoot, + setShadowRootVersionHash, } = useTechDocsReaderPage(); const dom = useTechDocsReaderDom(entityRef); const path = window.location.pathname; @@ -101,12 +104,16 @@ export const TechDocsReaderPageContent = withTechDocsReaderProvider( const handleAppend = useCallback( (newShadowRoot: ShadowRoot) => { + const newShadowRootVersionHash = createHash('sha256') + .update(newShadowRoot.innerHTML) + .digest('hex'); setShadowRoot(newShadowRoot); + setShadowRootVersionHash(newShadowRootVersionHash); if (onReady instanceof Function) { onReady(); } }, - [setShadowRoot, onReady], + [setShadowRoot, setShadowRootVersionHash, onReady], ); // No entity metadata = 404. Don't render content at all. From dd780ece4f2d1d1a73df0bfde620952bd744068c Mon Sep 17 00:00:00 2001 From: Alex Lorenzi Date: Thu, 20 Jun 2024 13:32:34 -0400 Subject: [PATCH 2/5] Switch to using a version number instead of hashing the content Signed-off-by: Alex Lorenzi Signed-off-by: Sydney Achinger --- plugins/techdocs-react/src/context.tsx | 14 ++++++++------ .../TechDocsReaderPageContent.tsx | 11 +++-------- 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/plugins/techdocs-react/src/context.tsx b/plugins/techdocs-react/src/context.tsx index 7492d4b2a2..29b91bcc09 100644 --- a/plugins/techdocs-react/src/context.tsx +++ b/plugins/techdocs-react/src/context.tsx @@ -25,6 +25,7 @@ import React, { } from 'react'; import useAsync, { AsyncState } from 'react-use/esm/useAsync'; import useAsyncRetry from 'react-use/esm/useAsyncRetry'; +import useCounter from 'react-use/esm/useCounter'; import { CompoundEntityRef, @@ -64,7 +65,8 @@ export type TechDocsReaderPageValue = { entityMetadata: AsyncState; shadowRoot?: ShadowRoot; setShadowRoot: Dispatch>; - setShadowRootVersionHash: Dispatch>; + shadowRootVersion: number; + incShadowRootVersion: () => void; title: string; setTitle: Dispatch>; subtitle: string; @@ -81,7 +83,8 @@ const defaultTechDocsReaderPageValue: TechDocsReaderPageValue = { setTitle: () => {}, setSubtitle: () => {}, setShadowRoot: () => {}, - setShadowRootVersionHash: () => {}, + shadowRootVersion: 0, + incShadowRootVersion: () => {}, metadata: { loading: true }, entityMetadata: { loading: true }, entityRef: { kind: '', name: '', namespace: '' }, @@ -136,9 +139,7 @@ export const TechDocsReaderPageProvider = memo( const [shadowRoot, setShadowRoot] = useState( defaultTechDocsReaderPageValue.shadowRoot, ); - const [, setShadowRootVersionHash] = useState( - undefined, - ); + const [shadowRootVersion, { inc }] = useCounter(0); useEffect(() => { if (shadowRoot && !metadata.value && !metadata.loading) { @@ -158,7 +159,8 @@ export const TechDocsReaderPageProvider = memo( entityMetadata, shadowRoot, setShadowRoot, - setShadowRootVersionHash, + shadowRootVersion, + incShadowRootVersion: inc, title, setTitle, subtitle, diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx index 4a93b98a83..00df73cab3 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx @@ -34,8 +34,6 @@ import { TechDocsStateIndicator } from '../TechDocsStateIndicator'; import { useTechDocsReaderDom } from './dom'; import { withTechDocsReaderProvider } from '../TechDocsReaderProvider'; import { TechDocsReaderPageContentAddons } from './TechDocsReaderPageContentAddons'; -// eslint-disable-next-line no-restricted-imports -import { createHash } from 'crypto'; const useStyles = makeStyles({ search: { @@ -82,7 +80,7 @@ export const TechDocsReaderPageContent = withTechDocsReaderProvider( entityMetadata: { value: entityMetadata, loading: entityMetadataLoading }, entityRef, setShadowRoot, - setShadowRootVersionHash, + incShadowRootVersion, } = useTechDocsReaderPage(); const dom = useTechDocsReaderDom(entityRef); const path = window.location.pathname; @@ -104,16 +102,13 @@ export const TechDocsReaderPageContent = withTechDocsReaderProvider( const handleAppend = useCallback( (newShadowRoot: ShadowRoot) => { - const newShadowRootVersionHash = createHash('sha256') - .update(newShadowRoot.innerHTML) - .digest('hex'); setShadowRoot(newShadowRoot); - setShadowRootVersionHash(newShadowRootVersionHash); + incShadowRootVersion(); if (onReady instanceof Function) { onReady(); } }, - [setShadowRoot, setShadowRootVersionHash, onReady], + [setShadowRoot, incShadowRootVersion, onReady], ); // No entity metadata = 404. Don't render content at all. From 6919db3a3e3fa64c6578c9a17cdd63b2f99bbf9c Mon Sep 17 00:00:00 2001 From: Alex Lorenzi Date: Thu, 20 Jun 2024 13:40:54 -0400 Subject: [PATCH 3/5] Slight better variable naming Signed-off-by: Alex Lorenzi Signed-off-by: Sydney Achinger --- plugins/techdocs-react/src/context.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/techdocs-react/src/context.tsx b/plugins/techdocs-react/src/context.tsx index 29b91bcc09..2e7cd9586d 100644 --- a/plugins/techdocs-react/src/context.tsx +++ b/plugins/techdocs-react/src/context.tsx @@ -139,7 +139,7 @@ export const TechDocsReaderPageProvider = memo( const [shadowRoot, setShadowRoot] = useState( defaultTechDocsReaderPageValue.shadowRoot, ); - const [shadowRootVersion, { inc }] = useCounter(0); + const [shadowRootVersion, { inc: incShadowRootVersion }] = useCounter(0); useEffect(() => { if (shadowRoot && !metadata.value && !metadata.loading) { @@ -160,7 +160,7 @@ export const TechDocsReaderPageProvider = memo( shadowRoot, setShadowRoot, shadowRootVersion, - incShadowRootVersion: inc, + incShadowRootVersion, title, setTitle, subtitle, From abdf7445ab76154a3dd76d59b3889e3604825517 Mon Sep 17 00:00:00 2001 From: Sydney Achinger Date: Thu, 20 Jun 2024 14:53:52 -0400 Subject: [PATCH 4/5] api report Signed-off-by: Sydney Achinger --- plugins/techdocs-react/api-report.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/plugins/techdocs-react/api-report.md b/plugins/techdocs-react/api-report.md index c158bbd81e..7d787c4da6 100644 --- a/plugins/techdocs-react/api-report.md +++ b/plugins/techdocs-react/api-report.md @@ -116,6 +116,8 @@ export type TechDocsReaderPageValue = { entityMetadata: AsyncState; shadowRoot?: ShadowRoot; setShadowRoot: Dispatch>; + shadowRootVersion: number; + incShadowRootVersion: () => void; title: string; setTitle: Dispatch>; subtitle: string; From 8ac9ce5183bba1fe046f729931919c13d1a4c676 Mon Sep 17 00:00:00 2001 From: Sydney Achinger Date: Thu, 20 Jun 2024 15:25:19 -0400 Subject: [PATCH 5/5] Add changeset Signed-off-by: Sydney Achinger --- .changeset/clever-waves-judge.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/clever-waves-judge.md diff --git a/.changeset/clever-waves-judge.md b/.changeset/clever-waves-judge.md new file mode 100644 index 0000000000..585ad01bbe --- /dev/null +++ b/.changeset/clever-waves-judge.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-techdocs-react': patch +'@backstage/plugin-techdocs': patch +--- + +Fixed a bug with the TechDocsReaderPageProvider not re-rendering when setShadowDom is called, meaning that the useShadowDom hooks were inconsistent. This issue caused the TextSize addon changes not to reapply during navigation.