diff --git a/.changeset/bright-pets-agree.md b/.changeset/bright-pets-agree.md
new file mode 100644
index 0000000000..375e583b59
--- /dev/null
+++ b/.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
diff --git a/.changeset/chatty-turkeys-brake.md b/.changeset/chatty-turkeys-brake.md
new file mode 100644
index 0000000000..1c90fc7cfe
--- /dev/null
+++ b/.changeset/chatty-turkeys-brake.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Added `classNames` prop to the `Page` component
diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx
index 28194b2889..541172ab7f 100644
--- a/packages/core-components/src/layout/Page/Page.tsx
+++ b/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 (
- {children}
+ {children}
);
}
diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx
index 0f48df7f39..d5f9005a01 100644
--- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx
+++ b/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;
};
+/**
+ * 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) => {
);
}
-
// As explained above, a render function is configuration 3 and React element is 2
return (
{({ metadata, entityMetadata, onReady }) => (
-
-
- {children instanceof Function
- ? children({
- entityRef,
- techdocsMetadataValue: metadata.value,
- entityMetadataValue: entityMetadata.value,
- onReady,
- })
- : children}
-
-
+
+ {children instanceof Function
+ ? children({
+ entityRef,
+ techdocsMetadataValue: metadata.value,
+ entityMetadataValue: entityMetadata.value,
+ onReady,
+ })
+ : children}
+
)}