From d381f3ec6a713ca2c1a67c411f541d33aa3fc2f1 Mon Sep 17 00:00:00 2001 From: Alex Lorenzi Date: Tue, 21 Jan 2025 12:54:01 -0500 Subject: [PATCH 1/5] Override the BackstagePage default styles to avoid a "double scrollbar" situation that was stop the page from fully scrolling to the top of the page when we navigated to a new page Signed-off-by: Alex Lorenzi --- .../TechDocsReaderPage/TechDocsReaderPage.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx index 0f48df7f39..256ae0ec79 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx @@ -166,6 +166,16 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => { const readerPageTheme = createTheme({ ...currentTheme, + overrides: { + // This fixes issues with double scrolls in the TechDocs reader page on EntityPage + // @ts-ignore BackstagePage is not in the theme type + BackstagePage: { + root: { + height: 'inherit', + overflowY: 'visible', + }, + }, + }, ...(props.overrideThemeOptions || {}), }); const { kind, name, namespace } = useRouteRefParams(rootDocsRouteRef); From bbaa722f80c011a91411aabc3bd769cd36d9232a Mon Sep 17 00:00:00 2001 From: Alex Lorenzi Date: Wed, 22 Jan 2025 12:13:55 -0500 Subject: [PATCH 2/5] Added className prop to Page component and override styles in the TechDocsReaderPage.tsx Signed-off-by: Alex Lorenzi --- .../core-components/src/layout/Page/Page.tsx | 8 +++-- .../TechDocsReaderPage/TechDocsReaderPage.tsx | 34 ++++++++++--------- 2 files changed, 23 insertions(+), 19 deletions(-) diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx index 28194b2889..a1ff34ab29 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,12 +45,13 @@ const useStyles = makeStyles( type Props = { themeId: string; + className?: string; children?: React.ReactNode; }; export function Page(props: Props) { - const { themeId, children } = props; - const classes = useStyles(); + const { themeId, className, children } = props; + const styles = useStyles(); return ( ({ @@ -57,7 +59,7 @@ export function Page(props: Props) { page: baseTheme.getPageTheme({ themeId }), })} > -
{children}
+
{children}
 ); } diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx index 256ae0ec79..1adcea44d7 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, + makeStyles, + ThemeOptions, + ThemeProvider, + useTheme, +} from '@material-ui/core/styles'; /* An explanation for the multiple ways of customizing the TechDocs reader page @@ -117,6 +122,13 @@ are retrieved using the useOutlet hook from React Router. NOTE: Render functions are no longer supported in this approach. */ +const useStyles = makeStyles({ + readerPage: { + height: 'inherit', + overflowY: 'visible', + }, +}); + /** * Props for {@link TechDocsReaderLayout} * @public @@ -163,19 +175,10 @@ export type TechDocsReaderPageProps = { */ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => { const currentTheme = useTheme(); + const classes = useStyles(); const readerPageTheme = createTheme({ ...currentTheme, - overrides: { - // This fixes issues with double scrolls in the TechDocs reader page on EntityPage - // @ts-ignore BackstagePage is not in the theme type - BackstagePage: { - root: { - height: 'inherit', - overflowY: 'visible', - }, - }, - }, ...(props.overrideThemeOptions || {}), }); const { kind, name, namespace } = useRouteRefParams(rootDocsRouteRef); @@ -207,7 +210,6 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => { ); } - // As explained above, a render function is configuration 3 and React element is 2 return ( @@ -215,7 +217,7 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => { {({ metadata, entityMetadata, onReady }) => (
- + {children instanceof Function ? children({ entityRef, From 4ab66815a80871d570fc9505e437b16877886e3e Mon Sep 17 00:00:00 2001 From: Alex Lorenzi Date: Wed, 22 Jan 2025 12:16:32 -0500 Subject: [PATCH 3/5] Reverted classes variable name Signed-off-by: Alex Lorenzi --- packages/core-components/src/layout/Page/Page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx index a1ff34ab29..541172ab7f 100644 --- a/packages/core-components/src/layout/Page/Page.tsx +++ b/packages/core-components/src/layout/Page/Page.tsx @@ -51,7 +51,7 @@ type Props = { export function Page(props: Props) { const { themeId, className, children } = props; - const styles = useStyles(); + const classes = useStyles(); return ( ({ @@ -59,7 +59,7 @@ export function Page(props: Props) { page: baseTheme.getPageTheme({ themeId }), })} > -
{children}
+
{children}
 ); } From 3ca7dd0b75b4f7ad815c0a845fb06d62d9dba636 Mon Sep 17 00:00:00 2001 From: Alex Lorenzi Date: Sat, 25 Jan 2025 14:19:02 -0500 Subject: [PATCH 4/5] Switched to using styled components API which seems to solve issue of CSS being removed when switching pages in Docs Signed-off-by: Alex Lorenzi --- .../TechDocsReaderPage/TechDocsReaderPage.tsx | 43 ++++++++++--------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx index 1adcea44d7..d5f9005a01 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx @@ -39,7 +39,7 @@ import { import { CookieAuthRefreshProvider } from '@backstage/plugin-auth-react'; import { createTheme, - makeStyles, + styled, ThemeOptions, ThemeProvider, useTheme, @@ -122,13 +122,6 @@ are retrieved using the useOutlet hook from React Router. NOTE: Render functions are no longer supported in this approach. */ -const useStyles = makeStyles({ - readerPage: { - height: 'inherit', - overflowY: 'visible', - }, -}); - /** * Props for {@link TechDocsReaderLayout} * @public @@ -168,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. * @@ -175,7 +176,6 @@ export type TechDocsReaderPageProps = { */ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => { const currentTheme = useTheme(); - const classes = useStyles(); const readerPageTheme = createTheme({ ...currentTheme, @@ -216,18 +216,19 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => { {({ 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} + )} From fffe3c00d6ecd3473b6b231cb276234d2c0942d8 Mon Sep 17 00:00:00 2001 From: Alex Lorenzi Date: Sun, 2 Mar 2025 09:49:13 -0500 Subject: [PATCH 5/5] changeset Signed-off-by: Alex Lorenzi --- .changeset/bright-pets-agree.md | 5 +++++ .changeset/chatty-turkeys-brake.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/bright-pets-agree.md create mode 100644 .changeset/chatty-turkeys-brake.md 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