front/app: move AppShell things into home-page plugin

frontend/packages/app/src/App.tsx

@@ -1,18 +1,10 @@
-import {
-  BackstageTheme,
-  createApp,
-  Header,
-  InfoCard,
-  Page,
-  theme,
-} from '@backstage/core';
+import { BackstageTheme, createApp, InfoCard } from '@backstage/core';
 import HomePagePlugin from '@backstage/plugin-home-page';
 //import PageHeader from './components/PageHeader';
 import { LoginComponent } from '@backstage/plugin-login';
 import { CssBaseline, makeStyles, ThemeProvider } from '@material-ui/core';
 import React, { FC } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-import HomePageTimer from './components/HomepageTimer';
 import SideBar from './components/SideBar';
 import entities from './entities';
 import { LoginBarrier } from './login/LoginBarrier';
@@ -37,20 +29,10 @@ const useStyles = makeStyles(theme => ({
     display: 'grid',
     // FIXME: Don't used a fixed width here
     gridTemplateColumns: '64px auto',
-    gridTemplateRows: 'auto 1fr',
-    width: '100%',
+    gridTemplateRows: '1fr',
+    width: '100vw',
     height: '100vh',
   },
-  mainContentArea: {
-    overflowX: 'hidden',
-    overflowY: 'auto',
-  },
-  pageBody: {
-    padding: theme.spacing(2),
-  },
-  avatarButton: {
-    padding: theme.spacing(2),
-  },
 }));
 
 const currentUser = new MockCurrentUser();
@@ -69,14 +51,7 @@ const AppShell: FC<{}> = ({ children }) => {
   return (
     <div className={classes.root}>
       <SideBar />
-      <Page theme={theme.home}>
-        <div className={classes.mainContentArea}>
-          <Header title="This is Backstage!">
-            <HomePageTimer />
-          </Header>
-          <div className={classes.pageBody}>{children}</div>
-        </div>
-      </Page>
+      {children}
     </div>
   );
 };

frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx

@@ -1,20 +1,45 @@
-import { EntityLink, InfoCard } from '@backstage/core';
-import { Typography } from '@material-ui/core';
+import { EntityLink, InfoCard, Header, Page, theme } from '@backstage/core';
+import { Typography, makeStyles, Theme } from '@material-ui/core';
 import React, { FC } from 'react';
+import HomePageTimer from '../HomepageTimer';
+
+const useStyles = makeStyles<Theme>(theme => ({
+  mainContentArea: {
+    overflowX: 'hidden',
+    overflowY: 'auto',
+  },
+  pageBody: {
+    padding: theme.spacing(2),
+  },
+  avatarButton: {
+    padding: theme.spacing(2),
+  },
+}));
 
 const HomePage: FC<{}> = () => {
+  const classes = useStyles();
+
   return (
-    <InfoCard title="Home Page">
-      <Typography variant="body1">Welcome to Backstage!</Typography>
-      <div>
-        <EntityLink kind="service" id="backstage-backend">
-          Backstage Backend
-        </EntityLink>
-        <EntityLink uri="entity:service:backstage-lb" subPath="ci-cd">
-          Backstage LB CI/CD
-        </EntityLink>
+    <Page theme={theme.home}>
+      <div className={classes.mainContentArea}>
+        <Header title="This is Backstage!">
+          <HomePageTimer />
+        </Header>
+        <div className={classes.pageBody}>
+          <InfoCard title="Home Page">
+            <Typography variant="body1">Welcome to Backstage!</Typography>
+            <div>
+              <EntityLink kind="service" id="backstage-backend">
+                Backstage Backend
+              </EntityLink>
+              <EntityLink uri="entity:service:backstage-lb" subPath="ci-cd">
+                Backstage LB CI/CD
+              </EntityLink>
+            </div>
+          </InfoCard>
+        </div>
       </div>
-    </InfoCard>
+    </Page>
   );
 };