From ba19ca25588065952bac3632b9f1e21c64a55685 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Tue, 4 Feb 2020 11:00:30 +0100
Subject: [PATCH] frontend/app: move sidebar and header into separate
 components

---
 frontend/packages/app/src/App.tsx             | 68 ++-----------------
 .../src/components/PageHeader/PageHeader.tsx  | 28 ++++++++
 .../app/src/components/PageHeader/index.ts    |  1 +
 .../app/src/components/SideBar/SideBar.tsx    | 62 +++++++++++++++++
 .../app/src/components/SideBar/index.ts       |  1 +
 5 files changed, 96 insertions(+), 64 deletions(-)
 create mode 100644 frontend/packages/app/src/components/PageHeader/PageHeader.tsx
 create mode 100644 frontend/packages/app/src/components/PageHeader/index.ts
 create mode 100644 frontend/packages/app/src/components/SideBar/SideBar.tsx
 create mode 100644 frontend/packages/app/src/components/SideBar/index.ts

diff --git a/frontend/packages/app/src/App.tsx b/frontend/packages/app/src/App.tsx
index 028ea42185..aeb42ba263 100644
--- a/frontend/packages/app/src/App.tsx
+++ b/frontend/packages/app/src/App.tsx
@@ -1,13 +1,9 @@
 import React, { FC } from 'react';
 import helloWorld, { MyComponent } from '@backstage/plugin-hello-world';
 import { makeStyles } from '@material-ui/core/styles';
-import Avatar from '@material-ui/core/Avatar';
-import Grid from '@material-ui/core/Grid';
-import Link from '@material-ui/core/Link';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
 import Typography from '@material-ui/core/Typography';
+import SideBar from './components/SideBar';
+import PageHeader from './components/PageHeader';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -22,21 +18,6 @@ const useStyles = makeStyles(theme => ({
     overflowX: 'hidden',
     overflowY: 'auto',
   },
-  sideBar: {
-    background: '#181818',
-    color: 'white',
-    height: '100vh',
-    paddingLeft: theme.spacing(2),
-    paddingTop: theme.spacing(2),
-  },
-  pageHeader: {
-    // FIXME: Make part of PageHeader component
-    background: 'linear-gradient(262.63deg, #19D15A 4.2%, #1CAB5B 72.01%)',
-    height: '120px',
-    paddingTop: theme.spacing(2),
-    paddingLeft: theme.spacing(2),
-    color: 'white',
-  },
   pageBody: {
     paddingLeft: theme.spacing(2),
     paddingTop: theme.spacing(2),
@@ -51,50 +32,9 @@ const App: FC<{}> = () => {
 
   return (
     <div className={classes.root}>
-      {/* TODO: SideBar component */}
-      {/* Based on NewSideBar from Backstage */}
-      <div className={classes.sideBar}>
-        <Link href="#" variant="body1">
-          [Co-brand Logo]
-        </Link>
-        <List component="nav">
-          <ListItem button>
-            <ListItemText primary="Home" />
-          </ListItem>
-          <ListItem button>
-            <ListItemText primary="Services" />
-          </ListItem>
-          <ListItem button>
-            <ListItemText primary="Libraries" />
-          </ListItem>
-          <ListItem button>
-            <ListItemText primary="Websites" />
-          </ListItem>
-          <ListItem button>
-            <ListItemText primary="+ Create..." />
-          </ListItem>
-        </List>
-        <Grid
-          container
-          direction="row"
-          justify="flex-start"
-          alignItems="center"
-          spacing={2}
-        >
-          <Grid item>
-            <Avatar>A</Avatar>
-          </Grid>
-          <Typography variant="caption">$userName</Typography>
-        </Grid>
-      </div>
+      <SideBar />
       <div className={classes.mainContentArea}>
-        {/* TODO: PageHeader component */}
-        <header className={classes.pageHeader}>
-          <Typography variant="h2">This is Backstage!</Typography>
-          <Typography variant="caption">
-            Backstage is an open platform for building developer portals
-          </Typography>
-        </header>
+        <PageHeader />
         <div className={classes.pageBody}>
           <Typography variant="body1">
             {' '}
diff --git a/frontend/packages/app/src/components/PageHeader/PageHeader.tsx b/frontend/packages/app/src/components/PageHeader/PageHeader.tsx
new file mode 100644
index 0000000000..38f77ddbc5
--- /dev/null
+++ b/frontend/packages/app/src/components/PageHeader/PageHeader.tsx
@@ -0,0 +1,28 @@
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import React, { FC } from 'react';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    background: 'linear-gradient(262.63deg, #19D15A 4.2%, #1CAB5B 72.01%)',
+    height: '120px',
+    paddingTop: theme.spacing(2),
+    paddingLeft: theme.spacing(2),
+    color: 'white',
+  },
+}));
+
+const SideBar: FC<{}> = () => {
+  const classes = useStyles();
+
+  return (
+    <header className={classes.root}>
+      <Typography variant="h2">This is Backstage!</Typography>
+      <Typography variant="caption">
+        Backstage is an open platform for building developer portals
+      </Typography>
+    </header>
+  );
+};
+
+export default SideBar;
diff --git a/frontend/packages/app/src/components/PageHeader/index.ts b/frontend/packages/app/src/components/PageHeader/index.ts
new file mode 100644
index 0000000000..e1b036be68
--- /dev/null
+++ b/frontend/packages/app/src/components/PageHeader/index.ts
@@ -0,0 +1 @@
+export { default } from './PageHeader';
diff --git a/frontend/packages/app/src/components/SideBar/SideBar.tsx b/frontend/packages/app/src/components/SideBar/SideBar.tsx
new file mode 100644
index 0000000000..4bf19afcf1
--- /dev/null
+++ b/frontend/packages/app/src/components/SideBar/SideBar.tsx
@@ -0,0 +1,62 @@
+import Avatar from '@material-ui/core/Avatar';
+import Grid from '@material-ui/core/Grid';
+import Link from '@material-ui/core/Link';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import React, { FC } from 'react';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    background: '#181818',
+    color: 'white',
+    height: '100vh',
+    paddingLeft: theme.spacing(2),
+    paddingTop: theme.spacing(2),
+  },
+}));
+
+const SideBar: FC<{}> = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Link href="#" variant="body1">
+        [Co-brand Logo]
+      </Link>
+      <List component="nav">
+        <ListItem button>
+          <ListItemText primary="Home" />
+        </ListItem>
+        <ListItem button>
+          <ListItemText primary="Services" />
+        </ListItem>
+        <ListItem button>
+          <ListItemText primary="Libraries" />
+        </ListItem>
+        <ListItem button>
+          <ListItemText primary="Websites" />
+        </ListItem>
+        <ListItem button>
+          <ListItemText primary="+ Create..." />
+        </ListItem>
+      </List>
+      <Grid
+        container
+        direction="row"
+        justify="flex-start"
+        alignItems="center"
+        spacing={2}
+      >
+        <Grid item>
+          <Avatar>A</Avatar>
+        </Grid>
+        <Typography variant="caption">$userName</Typography>
+      </Grid>
+    </div>
+  );
+};
+
+export default SideBar;
diff --git a/frontend/packages/app/src/components/SideBar/index.ts b/frontend/packages/app/src/components/SideBar/index.ts
new file mode 100644
index 0000000000..c90236635b
--- /dev/null
+++ b/frontend/packages/app/src/components/SideBar/index.ts
@@ -0,0 +1 @@
+export { default } from './SideBar';