chore: use home as default pageTheme to reduce complexity

packages/core/src/layout/Header/Header.stories.tsx

@@ -41,11 +41,9 @@ export const Home = () => (
 );
 
 export const HomeWithSubtitle = () => (
-  <Page pageTheme={customPageTheme.pageTheme.home}>
-    <Header title="Start/Home Page" subtitle="This is a subtitle">
-      {labels}
-    </Header>
-  </Page>
+  <Header title="Start/Home Page" subtitle="This is a subtitle">
+    {labels}
+  </Header>
 );
 
 export const Tool = () => (

packages/core/src/layout/Header/Header.test.tsx

@@ -15,10 +15,8 @@
  */
 
 import React from 'react';
-import { act, render, RenderResult } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
-import { ThemeProvider } from '@material-ui/core';
-import { customPageTheme } from '@backstage/theme';
 import { Header } from './Header';
 
 jest.mock('react-helmet', () => {
@@ -27,73 +25,37 @@ jest.mock('react-helmet', () => {
   };
 });
 
-const ThemeProviderWrapper: React.FC = ({ children }) => (
-  <ThemeProvider
-    theme={{
-      pageTheme: customPageTheme.pageTheme.home,
-      ...customPageTheme.baseTheme,
-    }}
-  >
-    {children}
-  </ThemeProvider>
-);
-
 describe('<Header/>', () => {
   it('should render with title', async () => {
-    let rendered: RenderResult | undefined;
-    await act(async () => {
-      rendered = render(wrapInTestApp(<Header title="Title" />), {
-        wrapper: ThemeProviderWrapper,
-      });
-    });
-    rendered?.getByText('Title');
+    const rendered = render(wrapInTestApp(<Header title="Title" />));
+    rendered.getByText('Title');
   });
 
   it('should set document title', async () => {
-    let rendered: RenderResult | undefined;
-    await act(async () => {
-      rendered = render(wrapInTestApp(<Header title="Title1" />), {
-        wrapper: ThemeProviderWrapper,
-      });
-    });
-    rendered?.getByText('Title1');
-    rendered?.getByText('defaultTitle: Title1 | Backstage');
+    const rendered = render(wrapInTestApp(<Header title="Title1" />));
+    rendered.getByText('Title1');
+    rendered.getByText('defaultTitle: Title1 | Backstage');
   });
 
   it('should override document title', async () => {
-    let rendered: RenderResult | undefined;
-    await act(async () => {
-      rendered = render(
-        wrapInTestApp(<Header title="Title1" pageTitleOverride="Title2" />),
-        {
-          wrapper: ThemeProviderWrapper,
-        },
-      );
-    });
-    rendered?.getByText('Title1');
-    rendered?.getByText('defaultTitle: Title2 | Backstage');
+    const rendered = render(
+      wrapInTestApp(<Header title="Title1" pageTitleOverride="Title2" />),
+    );
+    rendered.getByText('Title1');
+    rendered.getByText('defaultTitle: Title2 | Backstage');
   });
 
   it('should have subtitle', async () => {
-    let rendered: RenderResult | undefined;
-    await act(async () => {
-      rendered = render(
-        wrapInTestApp(<Header title="Title" subtitle="Subtitle" />),
-        {
-          wrapper: ThemeProviderWrapper,
-        },
-      );
-    });
-    rendered?.getByText('Subtitle');
+    const rendered = render(
+      wrapInTestApp(<Header title="Title" subtitle="Subtitle" />),
+    );
+    rendered.getByText('Subtitle');
   });
 
   it('should have type rendered', async () => {
-    let rendered: RenderResult | undefined;
-    await act(async () => {
-      rendered = render(wrapInTestApp(<Header title="Title" type="tool" />), {
-        wrapper: ThemeProviderWrapper,
-      });
-    });
-    rendered?.getByText('tool');
+    const rendered = render(
+      wrapInTestApp(<Header title="Title" type="tool" />),
+    );
+    rendered.getByText('tool');
   });
 });

packages/core/src/layout/Header/Header.tsx

@@ -17,7 +17,11 @@
 import React, { ReactNode, CSSProperties, FC } from 'react';
 import { Helmet } from 'react-helmet';
 import { Typography, Tooltip, makeStyles, useTheme } from '@material-ui/core';
-import { BackstageTheme, BackstagePageThemeConsumer } from '@backstage/theme';
+import {
+  BackstageTheme,
+  BackstagePageThemeConsumer,
+  customPageTheme,
+} from '@backstage/theme';
 
 const useStyles = makeStyles<BackstageTheme, { backgroundImage: string }>(
   theme => ({
@@ -163,7 +167,9 @@ export const Header: FC<Props> = ({
 }) => {
   const theme = useTheme<BackstagePageThemeConsumer>();
   const classes = useStyles({
-    backgroundImage: theme.pageTheme.backgroundImage,
+    backgroundImage:
+      theme.pageTheme?.backgroundImage ??
+      customPageTheme.pageTheme.home.backgroundImage,
   });
   const documentTitle = pageTitleOverride || title;
   const pageTitle = title || pageTitleOverride;