Merge pull request #10860 from backstage/techdocs/addon-bug-fixes

.changeset/techdocs-back-once-again.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Fixed a bug preventing custom TechDocs reader page implementations from rendering without being double-wrapped in the `<TechDocsReaderPage />` component.

.changeset/techdocs-renegade-master.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Fixed a bug that caused addons in the `Subheader` location to break the default TechDocs reader page layout.

docs/features/techdocs/how-to-guides.md

@@ -162,11 +162,11 @@ The `techDocsPage` is a default techdocs reader page which lives in
 having to set anything up.
 
 ```tsx
-<TechDocsReaderPage>
+<Page themeId="documentation">
   <TechDocsReaderPageHeader />
   <TechDocsReaderPageSubheader />
   <TechDocsReaderPageContent />
-</TechDocsReaderPage>
+</Page>
 ```
 
 If you would like to compose your own `techDocsPage`, you can do so by replacing
@@ -174,30 +174,30 @@ the children of TechDocsPage with something else. Maybe you are _just_
 interested in replacing the Header:
 
 ```tsx
-<TechDocsReaderPage>
+<Page themeId="documentation">
   <Header type="documentation" title="Custom Header" />
   <TechDocsReaderPageContent />
-</TechDocsReaderPage>
+</Page>
 ```
 
 Or maybe you want to disable the in-context search
 
 ```tsx
-<TechDocsReaderPage>
+<Page themeId="documentation">
   <Header type="documentation" title="Custom Header" />
   <TechDocsReaderPageContent withSearch={false} />
-</TechDocsReaderPage>
+</Page>
 ```
 
 Or maybe you want to replace the entire TechDocs Page.
 
 ```tsx
-<TechDocsReaderPage>
+<Page themeId="documentation">
   <Header type="documentation" title="Custom Header" />
   <Content data-testid="techdocs-content">
     <p>my own content</p>
   </Content>
-</TechDocsReaderPage>
+</Page>
 ```
 
 ## How to migrate from TechDocs Alpha to Beta

packages/app/src/components/techdocs/TechDocsPage.tsx

@@ -14,21 +14,21 @@
  * limitations under the License.
  */
 
+import React from 'react';
+import { Page } from '@backstage/core-components';
 import {
-  TechDocsReaderPage,
   TechDocsReaderPageHeader,
   TechDocsReaderPageSubheader,
   TechDocsReaderPageContent,
 } from '@backstage/plugin-techdocs';
-import React from 'react';
 
 const DefaultTechDocsPage = () => {
   return (
-    <TechDocsReaderPage>
+    <Page themeId="documentation">
       <TechDocsReaderPageHeader />
       <TechDocsReaderPageSubheader />
       <TechDocsReaderPageContent />
-    </TechDocsReaderPage>
+    </Page>
   );
 };
 

plugins/techdocs/api-report.md

@@ -18,7 +18,6 @@ import { PropsWithChildren } from 'react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
-import { StyledComponentProps } from '@material-ui/core';
 import { TableColumn } from '@backstage/core-components';
 import { TableProps } from '@backstage/core-components';
 import { TechDocsEntityMetadata as TechDocsEntityMetadata_2 } from '@backstage/plugin-techdocs-react';
@@ -351,15 +350,11 @@ export type TechDocsReaderPageRenderFunction = ({
 }) => JSX.Element;
 
 // @public
-export const TechDocsReaderPageSubheader: React_2.ComponentType<
-  Pick<
-    {
-      toolbarProps?: ToolbarProps<'div', {}> | undefined;
-    },
-    'toolbarProps'
-  > &
-    StyledComponentProps<'root'>
->;
+export const TechDocsReaderPageSubheader: ({
+  toolbarProps,
+}: {
+  toolbarProps?: ToolbarProps<'div', {}> | undefined;
+}) => JSX.Element | null;
 
 // @public
 export const TechDocsReaderProvider: ({

plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx

@@ -97,11 +97,9 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => {
     });
 
     return (
-      (page as JSX.Element) || (
-        <TechDocsReaderPageProvider entityRef={entityRef}>
-          <TechDocsReaderLayout />
-        </TechDocsReaderPageProvider>
-      )
+      <TechDocsReaderPageProvider entityRef={entityRef}>
+        {(page as JSX.Element) || <TechDocsReaderLayout />}
+      </TechDocsReaderPageProvider>
     );
   }
 

plugins/techdocs/src/reader/components/TechDocsReaderPageSubheader/TechDocsReaderPageSubheader.tsx

@@ -16,26 +16,33 @@
 
 import React from 'react';
 
-import { Box, Toolbar, ToolbarProps, withStyles } from '@material-ui/core';
+import { Box, makeStyles, Toolbar, ToolbarProps } from '@material-ui/core';
 
 import {
   TechDocsAddonLocations as locations,
   useTechDocsAddons,
 } from '@backstage/plugin-techdocs-react';
 
-/**
- * Renders the reader page subheader.
- * Please use the Tech Docs add-ons to customize it
- * @public
- */
-export const TechDocsReaderPageSubheader = withStyles(theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     gridArea: 'pageSubheader',
     flexDirection: 'column',
     minHeight: 'auto',
     padding: theme.spacing(3, 3, 0),
   },
-}))(({ toolbarProps }: { toolbarProps?: ToolbarProps }) => {
+}));
+
+/**
+ * Renders the reader page subheader.
+ * Please use the Tech Docs add-ons to customize it
+ * @public
+ */
+export const TechDocsReaderPageSubheader = ({
+  toolbarProps,
+}: {
+  toolbarProps?: ToolbarProps;
+}) => {
+  const classes = useStyles();
   const addons = useTechDocsAddons();
   const subheaderAddons = addons.renderComponentsByLocation(
     locations.Subheader,
@@ -44,7 +51,7 @@ export const TechDocsReaderPageSubheader = withStyles(theme => ({
   if (!subheaderAddons) return null;
 
   return (
-    <Toolbar {...toolbarProps}>
+    <Toolbar classes={classes} {...toolbarProps}>
       {subheaderAddons && (
         <Box
           display="flex"
@@ -57,4 +64,4 @@ export const TechDocsReaderPageSubheader = withStyles(theme => ({
       )}
     </Toolbar>
   );
-});
+};