From 431ecaf1d527bb1c113aa3a968a42f346c263f3a Mon Sep 17 00:00:00 2001
From: Morgan <mbentell@spotify.com>
Date: Tue, 25 Oct 2022 14:50:18 +0200
Subject: [PATCH] this seems to solve the issue. actually get the nested
 element instead of the parent of that element

Signed-off-by: Morgan <mbentell@spotify.com>
---
 .../TechDocsReaderPage/TechDocsReaderPage.tsx | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx
index 1c276b87a1..4cf2955f25 100644
--- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { ReactNode, Children, ReactElement } from 'react';
+import React, { ReactNode, Children, ReactElement, ReactChild } from 'react';
 import { useOutlet } from 'react-router-dom';
 
 import { Page } from '@backstage/core-components';
@@ -35,6 +35,14 @@ import {
   useRouteRefParams,
 } from '@backstage/core-plugin-api';
 
+type Extension = ReactChild & {
+  type: {
+    __backstage_data: {
+      map: Map<string, boolean>;
+    };
+  };
+};
+
 /**
  * Props for {@link TechDocsReaderLayout}
  * @public
@@ -88,19 +96,27 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => {
   if (!children) {
     const childrenList = outlet ? Children.toArray(outlet.props.children) : [];
 
-    const page = childrenList.find(child => {
+    let page: React.ReactNode;
+    childrenList.forEach(child => {
+      // console.log({child: JSON.stringify(child)})
+      // const { type } = child as Extension;
+      // console.log(!type?.__backstage_data?.map?.get(TECHDOCS_ADDONS_WRAPPER_KEY));
+
       if (getComponentData(child, TECHDOCS_ADDONS_WRAPPER_KEY)) {
-        return false;
+        return;
       }
 
       // react-router 6 stable wraps children in a routing context provider, so check one level deeper
       const nestedChildren = (child as ReactElement)?.props?.children;
       if (nestedChildren) {
-        return !Children.toArray(nestedChildren).some(nested =>
-          getComponentData(nested, TECHDOCS_ADDONS_WRAPPER_KEY),
-        );
+        Children.toArray(nestedChildren).forEach(nested => {
+          if (!getComponentData(nested, TECHDOCS_ADDONS_WRAPPER_KEY)) {
+            page = nested;
+          }
+        });
+        return;
       }
-      return true;
+      page = child;
     });
 
     return (