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} + )}