From 8a4c24e036daf76220b27c28f55178b8c1ea8814 Mon Sep 17 00:00:00 2001 From: Alex Lorenzi Date: Wed, 26 Jun 2024 17:21:37 -0400 Subject: [PATCH 1/4] Rollback the changes in #25332 Add MutationObserver in useShadowRootElements to we can trigger update when the elements under the shadow root change Signed-off-by: Alex Lorenzi Signed-off-by: Jackson Chen --- plugins/techdocs-react/src/context.tsx | 9 +------ plugins/techdocs-react/src/hooks.ts | 25 ++++++++++++++++--- .../TechDocsReaderPageContent.tsx | 4 +-- 3 files changed, 24 insertions(+), 14 deletions(-) diff --git a/plugins/techdocs-react/src/context.tsx b/plugins/techdocs-react/src/context.tsx index 2e7cd9586d..43fdada98e 100644 --- a/plugins/techdocs-react/src/context.tsx +++ b/plugins/techdocs-react/src/context.tsx @@ -25,7 +25,6 @@ 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, @@ -65,8 +64,6 @@ export type TechDocsReaderPageValue = { entityMetadata: AsyncState; shadowRoot?: ShadowRoot; setShadowRoot: Dispatch>; - shadowRootVersion: number; - incShadowRootVersion: () => void; title: string; setTitle: Dispatch>; subtitle: string; @@ -83,8 +80,6 @@ const defaultTechDocsReaderPageValue: TechDocsReaderPageValue = { setTitle: () => {}, setSubtitle: () => {}, setShadowRoot: () => {}, - shadowRootVersion: 0, - incShadowRootVersion: () => {}, metadata: { loading: true }, entityMetadata: { loading: true }, entityRef: { kind: '', name: '', namespace: '' }, @@ -139,7 +134,6 @@ export const TechDocsReaderPageProvider = memo( const [shadowRoot, setShadowRoot] = useState( defaultTechDocsReaderPageValue.shadowRoot, ); - const [shadowRootVersion, { inc: incShadowRootVersion }] = useCounter(0); useEffect(() => { if (shadowRoot && !metadata.value && !metadata.loading) { @@ -159,8 +153,6 @@ export const TechDocsReaderPageProvider = memo( entityMetadata, shadowRoot, setShadowRoot, - shadowRootVersion, - incShadowRootVersion, title, setTitle, subtitle, @@ -198,5 +190,6 @@ export const useTechDocsReaderPage = () => { if (context === undefined) { throw new Error('No context found for version 1.'); } + return context; }; diff --git a/plugins/techdocs-react/src/hooks.ts b/plugins/techdocs-react/src/hooks.ts index 2984a4b588..bbff875f3a 100644 --- a/plugins/techdocs-react/src/hooks.ts +++ b/plugins/techdocs-react/src/hooks.ts @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { useState, useEffect, useMemo } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import debounce from 'lodash/debounce'; import { useTechDocsReaderPage } from './context'; @@ -39,9 +39,28 @@ export const useShadowRootElements = < selectors: string[], ): TReturnedElement[] => { const shadowRoot = useShadowRoot(); - if (!shadowRoot) return []; + const [root, setRootNode] = useState(shadowRoot?.querySelector('html')); + + useEffect(() => { + let observer: MutationObserver; + if (shadowRoot) { + observer = new MutationObserver(() => { + setRootNode(shadowRoot.querySelector('html')); + }); + observer.observe(shadowRoot, { + attributes: true, + characterData: true, + childList: true, + subtree: true, + }); + } + return () => observer?.disconnect(); + }, [shadowRoot]); + + if (!root) return []; + return selectors - .map(selector => shadowRoot?.querySelectorAll(selector)) + .map(selector => root.querySelectorAll(selector)) .filter(nodeList => nodeList.length) .map(nodeList => Array.from(nodeList)) .flat(); diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx index 00df73cab3..3692ed22d3 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx @@ -80,7 +80,6 @@ export const TechDocsReaderPageContent = withTechDocsReaderProvider( entityMetadata: { value: entityMetadata, loading: entityMetadataLoading }, entityRef, setShadowRoot, - incShadowRootVersion, } = useTechDocsReaderPage(); const dom = useTechDocsReaderDom(entityRef); const path = window.location.pathname; @@ -103,12 +102,11 @@ export const TechDocsReaderPageContent = withTechDocsReaderProvider( const handleAppend = useCallback( (newShadowRoot: ShadowRoot) => { setShadowRoot(newShadowRoot); - incShadowRootVersion(); if (onReady instanceof Function) { onReady(); } }, - [setShadowRoot, incShadowRootVersion, onReady], + [setShadowRoot, onReady], ); // No entity metadata = 404. Don't render content at all. From ed67c8a16d53215c3a3176e13f8569c566a5c9f1 Mon Sep 17 00:00:00 2001 From: Alex Lorenzi Date: Wed, 26 Jun 2024 17:31:16 -0400 Subject: [PATCH 2/4] Updated changelog message Signed-off-by: Alex Lorenzi Signed-off-by: Jackson Chen --- .changeset/clever-waves-judge.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.changeset/clever-waves-judge.md b/.changeset/clever-waves-judge.md index 585ad01bbe..100ab66f90 100644 --- a/.changeset/clever-waves-judge.md +++ b/.changeset/clever-waves-judge.md @@ -1,6 +1,5 @@ --- '@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. +Resolved the issue where changes in TechDoc add-ons, including the TextSize add-on, were not reapplying during navigation From 3c60a1095a644fb3fa406650eca2e8b843d35833 Mon Sep 17 00:00:00 2001 From: Alex Lorenzi Date: Wed, 26 Jun 2024 17:51:00 -0400 Subject: [PATCH 3/4] Reset API report Signed-off-by: Alex Lorenzi Signed-off-by: Jackson Chen --- plugins/techdocs-react/api-report.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/plugins/techdocs-react/api-report.md b/plugins/techdocs-react/api-report.md index 7d787c4da6..c158bbd81e 100644 --- a/plugins/techdocs-react/api-report.md +++ b/plugins/techdocs-react/api-report.md @@ -116,8 +116,6 @@ export type TechDocsReaderPageValue = { entityMetadata: AsyncState; shadowRoot?: ShadowRoot; setShadowRoot: Dispatch>; - shadowRootVersion: number; - incShadowRootVersion: () => void; title: string; setTitle: Dispatch>; subtitle: string; From df4d3ca4939802045f2a0dd7157fee44077c4ee6 Mon Sep 17 00:00:00 2001 From: Jackson Chen Date: Thu, 27 Jun 2024 15:33:39 -0400 Subject: [PATCH 4/4] Fix tests Signed-off-by: Jackson Chen --- plugins/techdocs-react/src/hooks.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/plugins/techdocs-react/src/hooks.ts b/plugins/techdocs-react/src/hooks.ts index bbff875f3a..2d922ab7f4 100644 --- a/plugins/techdocs-react/src/hooks.ts +++ b/plugins/techdocs-react/src/hooks.ts @@ -39,13 +39,13 @@ export const useShadowRootElements = < selectors: string[], ): TReturnedElement[] => { const shadowRoot = useShadowRoot(); - const [root, setRootNode] = useState(shadowRoot?.querySelector('html')); + const [render, rerender] = useState(false); useEffect(() => { let observer: MutationObserver; if (shadowRoot) { observer = new MutationObserver(() => { - setRootNode(shadowRoot.querySelector('html')); + rerender(!render); }); observer.observe(shadowRoot, { attributes: true, @@ -55,12 +55,12 @@ export const useShadowRootElements = < }); } return () => observer?.disconnect(); - }, [shadowRoot]); + }, [shadowRoot, render, rerender]); - if (!root) return []; + if (!shadowRoot) return []; return selectors - .map(selector => root.querySelectorAll(selector)) + .map(selector => shadowRoot.querySelectorAll(selector)) .filter(nodeList => nodeList.length) .map(nodeList => Array.from(nodeList)) .flat();