From fd842a09482439e3db3e33bc92fbecc73b77e8da Mon Sep 17 00:00:00 2001
From: Marvin9 <marvinduff97@gmail.com>
Date: Sun, 4 Oct 2020 22:00:05 +0530
Subject: [PATCH] chore: use home as default pageTheme to reduce complexity

---
 .../core/src/layout/Header/Header.stories.tsx |  8 +-
 .../core/src/layout/Header/Header.test.tsx    | 76 +++++--------------
 packages/core/src/layout/Header/Header.tsx    | 10 ++-
 3 files changed, 30 insertions(+), 64 deletions(-)

diff --git a/packages/core/src/layout/Header/Header.stories.tsx b/packages/core/src/layout/Header/Header.stories.tsx
index b902a709cf..cc0276224a 100644
--- a/packages/core/src/layout/Header/Header.stories.tsx
+++ b/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 = () => (
diff --git a/packages/core/src/layout/Header/Header.test.tsx b/packages/core/src/layout/Header/Header.test.tsx
index 00c5bfa2bd..e5dc7fec4d 100644
--- a/packages/core/src/layout/Header/Header.test.tsx
+++ b/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');
   });
 });
diff --git a/packages/core/src/layout/Header/Header.tsx b/packages/core/src/layout/Header/Header.tsx
index dc71fe333b..41840b6ff0 100644
--- a/packages/core/src/layout/Header/Header.tsx
+++ b/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;