Merge pull request #28577 from backstage/techdocs-scroll-fix

fix(techdocs): scroll bar retains position after changing page

.changeset/bright-pets-agree.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Fixed double scrollbar issue that would appear on the Entity TechDocs view page that would stop the page from full scrolling to the top when navigating to a new page

.changeset/chatty-turkeys-brake.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Added `classNames` prop to the `Page` component

packages/core-components/src/layout/Page/Page.tsx

@@ -16,6 +16,7 @@
 
 import React from 'react';
 import { makeStyles, Theme, ThemeProvider } from '@material-ui/core/styles';
+import classNames from 'classnames';
 
 export type PageClassKey = 'root';
 
@@ -44,11 +45,12 @@ const useStyles = makeStyles(
 
 type Props = {
   themeId: string;
+  className?: string;
   children?: React.ReactNode;
 };
 
 export function Page(props: Props) {
-  const { themeId, children } = props;
+  const { themeId, className, children } = props;
   const classes = useStyles();
   return (
     <ThemeProvider
@@ -57,7 +59,7 @@ export function Page(props: Props) {
         page: baseTheme.getPageTheme({ themeId }),
       })}
     >
-      <main className={classes.root}>{children}</main>
+      <main className={classNames(classes.root, className)}>{children}</main>
     </ThemeProvider>
   );
 }

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

@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import React, { ReactNode, Children, ReactElement } from 'react';
+import React, { Children, ReactElement, ReactNode } from 'react';
 import { useOutlet } from 'react-router-dom';
 
 import { Page } from '@backstage/core-components';
 import { CompoundEntityRef } from '@backstage/catalog-model';
 import {
-  TECHDOCS_ADDONS_WRAPPER_KEY,
   TECHDOCS_ADDONS_KEY,
+  TECHDOCS_ADDONS_WRAPPER_KEY,
   TechDocsReaderPageProvider,
 } from '@backstage/plugin-techdocs-react';
 
@@ -37,8 +37,13 @@ import {
 } from '@backstage/core-plugin-api';
 
 import { CookieAuthRefreshProvider } from '@backstage/plugin-auth-react';
-import { ThemeOptions } from '@material-ui/core/styles';
-import { createTheme, ThemeProvider, useTheme } from '@material-ui/core/styles';
+import {
+  createTheme,
+  styled,
+  ThemeOptions,
+  ThemeProvider,
+  useTheme,
+} from '@material-ui/core/styles';
 
 /* An explanation for the multiple ways of customizing the TechDocs reader page
 
@@ -156,6 +161,14 @@ export type TechDocsReaderPageProps = {
   overrideThemeOptions?: Partial<ThemeOptions>;
 };
 
+/**
+ * Styled Backstage Page that fills available vertical space
+ */
+const StyledPage = styled(Page)({
+  height: 'inherit',
+  overflowY: 'visible',
+});
+
 /**
  * An addon-aware implementation of the TechDocsReaderPage.
  *
@@ -197,25 +210,25 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => {
       </ThemeProvider>
     );
   }
-
   // As explained above, a render function is configuration 3 and React element is 2
   return (
     <ThemeProvider theme={readerPageTheme}>
       <CookieAuthRefreshProvider pluginId="techdocs">
         <TechDocsReaderPageProvider entityRef={entityRef}>
           {({ metadata, entityMetadata, onReady }) => (
-            <div className="techdocs-reader-page">
-              <Page themeId="documentation">
-                {children instanceof Function
-                  ? children({
-                      entityRef,
-                      techdocsMetadataValue: metadata.value,
-                      entityMetadataValue: entityMetadata.value,
-                      onReady,
-                    })
-                  : children}
-              </Page>
-            </div>
+            <StyledPage
+              themeId="documentation"
+              className="techdocs-reader-page"
+            >
+              {children instanceof Function
+                ? children({
+                    entityRef,
+                    techdocsMetadataValue: metadata.value,
+                    entityMetadataValue: entityMetadata.value,
+                    onReady,
+                  })
+                : children}
+            </StyledPage>
           )}
         </TechDocsReaderPageProvider>
       </CookieAuthRefreshProvider>