core-components: BUI migration utils

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/proud-bars-add.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Added `noHeader` prop to `PageWithHeader` that prevents rendering of the header. This is intended to simplify migration to the new `@backstage/ui` page layout and recommended when rendering a page in the new frontend system.

.changeset/silent-lizards-behave.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+The `Page` component now limits the height of the content to `100%` of the available space. This ensures that adding additional vertical elements doesn't cause scrollbars due to the default `100vh` height.

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

@@ -30,12 +30,14 @@ const useStyles = makeStyles(
       gridTemplateColumns: 'auto 1fr auto',
       overflowY: 'auto',
       height: '100vh',
+      maxHeight: '100%',
       [theme.breakpoints.down('xs')]: {
         height: '100%',
       },
       '@media print': {
         display: 'block',
         height: 'auto',
+        maxHeight: 'none',
         overflowY: 'inherit',
       },
     },

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

@@ -21,13 +21,14 @@ import { Page } from './Page';
 
 type PageWithHeaderProps = ComponentProps<typeof Header> & {
   themeId: string;
+  noHeader?: boolean;
 };
 
 export function PageWithHeader(props: PropsWithChildren<PageWithHeaderProps>) {
-  const { themeId, children, ...restProps } = props;
+  const { themeId, children, noHeader, ...restProps } = props;
   return (
     <Page themeId={themeId}>
-      <Header {...restProps} />
+      {noHeader ? <div /> : <Header {...restProps} />}
       {children}
     </Page>
   );