From f6c92d54e7e7ade4d2a7a932846eae0212c447c9 Mon Sep 17 00:00:00 2001 From: Morgan Bentell Date: Thu, 16 Feb 2023 10:00:09 +0100 Subject: [PATCH 1/5] wait with fetching techdocs metadata until the shadow root exists Signed-off-by: Morgan Bentell --- plugins/techdocs-react/src/context.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/plugins/techdocs-react/src/context.tsx b/plugins/techdocs-react/src/context.tsx index 4f427e0031..04a46bffb3 100644 --- a/plugins/techdocs-react/src/context.tsx +++ b/plugins/techdocs-react/src/context.tsx @@ -117,10 +117,6 @@ export const TechDocsReaderPageProvider = memo( const techdocsApi = useApi(techdocsApiRef); const config = useApi(configApiRef); - const metadata = useAsync(async () => { - return techdocsApi.getTechDocsMetadata(entityRef); - }, [entityRef]); - const entityMetadata = useAsync(async () => { return techdocsApi.getEntityMetadata(entityRef); }, [entityRef]); @@ -133,6 +129,14 @@ export const TechDocsReaderPageProvider = memo( defaultTechDocsReaderPageValue.shadowRoot, ); + const metadata = useAsync( + () => + shadowRoot + ? techdocsApi.getTechDocsMetadata(entityRef) + : new Promise(() => {}), + [entityRef, shadowRoot], + ); + const value = { metadata, entityRef: toLowercaseEntityRefMaybe(entityRef, config), From 7e0c7b09a47cefe0839b61c11af8e899fa1335a9 Mon Sep 17 00:00:00 2001 From: Morgan Bentell Date: Thu, 16 Feb 2023 10:04:43 +0100 Subject: [PATCH 2/5] add changeset Signed-off-by: Morgan Bentell --- .changeset/rare-seals-decide.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/rare-seals-decide.md diff --git a/.changeset/rare-seals-decide.md b/.changeset/rare-seals-decide.md new file mode 100644 index 0000000000..e3cbadee69 --- /dev/null +++ b/.changeset/rare-seals-decide.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs-react': patch +--- + +Fix a bug that caused the header to not render when generating a document for the first time From 68c7082188ab4a505f2d93128036ee5431719204 Mon Sep 17 00:00:00 2001 From: Morgan Bentell Date: Wed, 22 Feb 2023 11:00:21 +0100 Subject: [PATCH 3/5] assume metadata is available and only refetch it if we don't have it when the shadowroot is mounted Signed-off-by: Morgan Bentell --- plugins/techdocs-react/src/context.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/plugins/techdocs-react/src/context.tsx b/plugins/techdocs-react/src/context.tsx index 04a46bffb3..f373acca73 100644 --- a/plugins/techdocs-react/src/context.tsx +++ b/plugins/techdocs-react/src/context.tsx @@ -21,8 +21,10 @@ import React, { useState, memo, ReactNode, + useEffect, } from 'react'; import useAsync, { AsyncState } from 'react-use/lib/useAsync'; +import { useAsyncRetry } from 'react-use'; import { CompoundEntityRef, @@ -121,6 +123,10 @@ export const TechDocsReaderPageProvider = memo( return techdocsApi.getEntityMetadata(entityRef); }, [entityRef]); + const metadata = useAsyncRetry(() => { + return techdocsApi.getTechDocsMetadata(entityRef); + }, [entityRef]); + const [title, setTitle] = useState(defaultTechDocsReaderPageValue.title); const [subtitle, setSubtitle] = useState( defaultTechDocsReaderPageValue.subtitle, @@ -129,13 +135,11 @@ export const TechDocsReaderPageProvider = memo( defaultTechDocsReaderPageValue.shadowRoot, ); - const metadata = useAsync( - () => - shadowRoot - ? techdocsApi.getTechDocsMetadata(entityRef) - : new Promise(() => {}), - [entityRef, shadowRoot], - ); + useEffect(() => { + if (shadowRoot && !metadata.loading && !metadata.value) { + metadata.retry(); + } + }, [metadata, shadowRoot]); const value = { metadata, From fc1665944be6b5c3930ad70813b29b6bae85dc63 Mon Sep 17 00:00:00 2001 From: Morgan Bentell Date: Thu, 16 Mar 2023 18:46:39 +0100 Subject: [PATCH 4/5] could it be? Signed-off-by: Morgan Bentell --- plugins/techdocs-react/src/context.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/plugins/techdocs-react/src/context.tsx b/plugins/techdocs-react/src/context.tsx index f373acca73..3874a648c8 100644 --- a/plugins/techdocs-react/src/context.tsx +++ b/plugins/techdocs-react/src/context.tsx @@ -123,7 +123,7 @@ export const TechDocsReaderPageProvider = memo( return techdocsApi.getEntityMetadata(entityRef); }, [entityRef]); - const metadata = useAsyncRetry(() => { + const metadata = useAsyncRetry(async () => { return techdocsApi.getTechDocsMetadata(entityRef); }, [entityRef]); @@ -136,12 +136,18 @@ export const TechDocsReaderPageProvider = memo( ); useEffect(() => { - if (shadowRoot && !metadata.loading && !metadata.value) { + if (shadowRoot && !metadata.value && !metadata.loading) { metadata.retry(); } - }, [metadata, shadowRoot]); + }, [ + metadata.value, + metadata.loading, + shadowRoot, + metadata.retry, + metadata, + ]); - const value = { + const value: TechDocsReaderPageValue = { metadata, entityRef: toLowercaseEntityRefMaybe(entityRef, config), entityMetadata, From 6eaa03d9deab0a3a5c6fee1ee260e614e199b5b9 Mon Sep 17 00:00:00 2001 From: Morgan Bentell Date: Thu, 16 Mar 2023 18:57:43 +0100 Subject: [PATCH 5/5] workaround useAsync typescript error Signed-off-by: Morgan Bentell --- plugins/techdocs-react/src/context.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/techdocs-react/src/context.tsx b/plugins/techdocs-react/src/context.tsx index 3874a648c8..608dbc59b3 100644 --- a/plugins/techdocs-react/src/context.tsx +++ b/plugins/techdocs-react/src/context.tsx @@ -24,7 +24,7 @@ import React, { useEffect, } from 'react'; import useAsync, { AsyncState } from 'react-use/lib/useAsync'; -import { useAsyncRetry } from 'react-use'; +import useAsyncRetry from 'react-use/lib/useAsyncRetry'; import { CompoundEntityRef,