From 7b3bb89e3c269172f4d6d68d91b90b83a8aaa7d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phane=20MORI?= <stephane.mori@gmail.com>
Date: Mon, 15 Nov 2021 16:47:05 +0100
Subject: [PATCH] Set doc reader parametable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Stéphane MORI <stephane.mori@gmail.com>
---
 .changeset/silver-plums-speak.md              |  5 +++++
 .../techdocs/src/reader/components/Reader.tsx | 20 +++++++++++--------
 2 files changed, 17 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/silver-plums-speak.md

diff --git a/.changeset/silver-plums-speak.md b/.changeset/silver-plums-speak.md
new file mode 100644
index 0000000000..2277b7bf12
--- /dev/null
+++ b/.changeset/silver-plums-speak.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': minor
+---
+
+Updates reader component used to display techdocs documentation. A previous change made this component not usable out of a page which don't have entityRef in url parameters. Reader component EntityRef parameter is now used instead of url parameters. Techdocs documentation component can now be used in our custom pages.
diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index 4e12ac18d1..8a39de45d4 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/plugins/techdocs/src/reader/components/Reader.tsx
@@ -76,8 +76,12 @@ const TechDocsReaderContext = createContext<TechDocsReaderValue>(
   {} as TechDocsReaderValue,
 );
 
-const TechDocsReaderProvider = ({ children }: PropsWithChildren<{}>) => {
-  const { namespace = '', kind = '', name = '', '*': path } = useParams();
+const TechDocsReaderProvider = ({
+  children,
+  entityRef,
+}: PropsWithChildren<{ entityRef: EntityName }>) => {
+  const { '*': path } = useParams();
+  const { kind, namespace, name } = entityRef;
   const value = useReaderState(kind, namespace, name, path);
   return (
     <TechDocsReaderContext.Provider value={value}>
@@ -96,10 +100,10 @@ const TechDocsReaderProvider = ({ children }: PropsWithChildren<{}>) => {
  * @internal
  */
 export const withTechDocsReaderProvider =
-  <T extends {}>(Component: ComponentType<T>) =>
+  <T extends {}>(Component: ComponentType<T>, entityRef: EntityName) =>
   (props: T) =>
     (
-      <TechDocsReaderProvider>
+      <TechDocsReaderProvider entityRef={entityRef}>
         <Component {...props} />
       </TechDocsReaderProvider>
     );
@@ -128,12 +132,12 @@ export const useTechDocsReader = () => useContext(TechDocsReaderContext);
  * todo: Make public or stop exporting (see others: "altReaderExperiments")
  * @internal
  */
-export const useTechDocsReaderDom = (): Element | null => {
+export const useTechDocsReaderDom = (entityRef: EntityName): Element | null => {
   const navigate = useNavigate();
   const theme = useTheme<BackstageTheme>();
   const techdocsStorageApi = useApi(techdocsStorageApiRef);
   const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
-  const { namespace = '', kind = '', name = '' } = useParams();
+  const { namespace = '', kind = '', name = '' } = entityRef;
   const { state, path, content: rawPage } = useTechDocsReader();
 
   const [sidebars, setSidebars] = useState<HTMLElement[]>();
@@ -400,7 +404,7 @@ const TheReader = ({
   withSearch = true,
 }: Props) => {
   const classes = useStyles();
-  const dom = useTechDocsReaderDom();
+  const dom = useTechDocsReaderDom(entityRef);
   const shadowDomRef = useRef<HTMLDivElement>(null);
 
   const onReadyRef = useRef<() => void>(onReady);
@@ -440,7 +444,7 @@ export const Reader = ({
   onReady = () => {},
   withSearch = true,
 }: Props) => (
-  <TechDocsReaderProvider>
+  <TechDocsReaderProvider entityRef={entityRef}>
     <TheReader
       entityRef={entityRef}
       onReady={onReady}