From d373f5428b3aa68a97dfdb6a5445d5934195930a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Sat, 7 Mar 2020 19:49:45 +0100
Subject: [PATCH 1/5] Use Content and ContentHeader in scaffold

---
 .../ExampleComponent/ExampleComponent.tsx.hbs | 47 +++++++++----------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
index fd2a360adf..acf7998a57 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
+++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
@@ -5,6 +5,8 @@ import {
   Header,
   Page,
   theme as pageTheme,
+  Content,
+  ContentHeader,
 } from '@spotify-backstage/core';
 import ExampleFetchComponent from '../ExampleFetchComponent';
 
@@ -13,9 +15,6 @@ const useStyles = makeStyles<Theme>(theme => ({
     overflowX: 'hidden',
     overflowY: 'auto',
   },
-  pageBody: {
-    padding: theme.spacing(3),
-  },
   title: {
     padding: theme.spacing(1, 0, 2, 0),
   },
@@ -28,28 +27,28 @@ const ExampleComponent: FC<{}> = () => {
     <Page theme={pageTheme.tool}>
       <div className={classes.mainContentArea}>
         <Header title="Welcome to {{ id }}!" subtitle="Optional subtitle" />
-        <Grid
-          container
-          spacing={3}
-          direction="column"
-          className={classes.pageBody}
-        >
-          <Grid item>
-            <Typography variant="h3">Plugin page title</Typography>
+        <Content>
+          <ContentHeader title="Plugin title" />
+          <Grid
+            container
+            spacing={3}
+            direction="column"
+            className={classes.pageBody}
+          >
+            <Grid item>
+              <InfoCard title="Information card" maxWidth>
+                <Typography variant="body1">
+                  All content should be wrapped in a card like this.
+                </Typography>
+              </InfoCard>
+            </Grid>
+            <Grid item>
+              <InfoCard title="Example User List (fetching data from randomuser.me)">
+                <ExampleFetchComponent />
+              </InfoCard>
+            </Grid>
           </Grid>
-          <Grid item>
-            <InfoCard title="Information card" maxWidth>
-              <Typography variant="body1">
-                All content should be wrapped in a card like this.
-              </Typography>
-            </InfoCard>
-          </Grid>
-          <Grid item>
-            <InfoCard title="Example User List (fetching data from randomuser.me)">
-              <ExampleFetchComponent />
-            </InfoCard>
-          </Grid>
-        </Grid>
+        </Content>
       </div>
     </Page>
   );

From 7b81a8c3815d23e4f2d3b0133c51c370c0d985ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Sat, 7 Mar 2020 19:57:54 +0100
Subject: [PATCH 2/5] Add HeaderLabels

---
 .../components/ExampleComponent/ExampleComponent.tsx.hbs    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
index acf7998a57..70c2a67ec7 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
+++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
@@ -7,6 +7,7 @@ import {
   theme as pageTheme,
   Content,
   ContentHeader,
+  HeaderLabel,
 } from '@spotify-backstage/core';
 import ExampleFetchComponent from '../ExampleFetchComponent';
 
@@ -26,7 +27,10 @@ const ExampleComponent: FC<{}> = () => {
   return (
     <Page theme={pageTheme.tool}>
       <div className={classes.mainContentArea}>
-        <Header title="Welcome to {{ id }}!" subtitle="Optional subtitle" />
+        <Header title="Welcome to {{ id }}!" subtitle="Optional subtitle">
+          <HeaderLabel label="Owner" value="Team X" />
+          <HeaderLabel label="Lifecycle" value="Alpha" />
+        </Header>
         <Content>
           <ContentHeader title="Plugin title" />
           <Grid

From 02085e67da70f277580e2531eed00d48289dfc91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Sat, 7 Mar 2020 20:27:55 +0100
Subject: [PATCH 3/5] Add user picture in example fetcher

---
 .../ExampleFetchComponent.tsx.hbs                 | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs
index 1282a08e94..d32ac3be94 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs
+++ b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs
@@ -14,6 +14,11 @@ const useStyles = makeStyles({
   table: {
     minWidth: 650,
   },
+  avatar: {
+    height: 32,
+    width: 32,
+    borderRadius: '50%',
+  },
 });
 
 type User = {
@@ -34,7 +39,7 @@ type User = {
     name: string; // "TFN",
     value: string; // "796260432"
   };
-  picture: object; // {large: "https://randomuser.me/api/portraits/men/95.jpg",…}
+  picture: { medium: string }; // {medium: "https://randomuser.me/api/portraits/men/95.jpg",…}
   nat: string; // "AU"
 };
 
@@ -50,6 +55,7 @@ export const DenseTable: FC<DenseTableProps> = ({ users }) => {
       <Table className={classes.table} size="small" aria-label="a dense table">
         <TableHead>
           <TableRow>
+            <TableCell>Avatar</TableCell>
             <TableCell>Name</TableCell>
             <TableCell>Email</TableCell>
             <TableCell>Nationality</TableCell>
@@ -58,6 +64,13 @@ export const DenseTable: FC<DenseTableProps> = ({ users }) => {
         <TableBody>
           {users.map(user => (
             <TableRow key={user.email}>
+              <TableCell>
+                <img
+                  src={user.picture.medium}
+                  className={classes.avatar}
+                  alt={user.name.first}
+                />
+              </TableCell>
               <TableCell>
                 {user.name.first} {user.name.last}
               </TableCell>

From ea7aa1b920ad0155f2da9eeeb4eaecd062ee9c74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Sat, 7 Mar 2020 20:46:55 +0100
Subject: [PATCH 4/5] Use Backstage progress indicator

---
 .../ExampleFetchComponent/ExampleFetchComponent.tsx.hbs       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs
index d32ac3be94..df7829f3c0 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs
+++ b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs
@@ -6,9 +6,9 @@ import TableCell from '@material-ui/core/TableCell';
 import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
-import LinearProgress from '@material-ui/core/LinearProgress';
 import Alert from '@material-ui/lab/Alert';
 import { useAsync } from 'react-use';
+import { Progress } from '@spotify-backstage/core';
 
 const useStyles = makeStyles({
   table: {
@@ -92,7 +92,7 @@ const ExampleFetchComponent: FC<{}> = () => {
   }, []);
 
   if (loading) {
-    return <LinearProgress data-testid="progress" />;
+    return <Progress />;
   } else if (error) {
     return <Alert severity="error">{error.message}</Alert>;
   }

From b32a2fe55f3f9eb348389b8c0e83a5ed7fe4cd01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Sat, 7 Mar 2020 22:43:36 +0100
Subject: [PATCH 5/5] rm extra div

---
 .../ExampleComponent/ExampleComponent.tsx.hbs | 51 +++++++++----------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
index 71d3d96cf3..ac101c6583 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
+++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
@@ -13,34 +13,31 @@ import ExampleFetchComponent from '../ExampleFetchComponent';
 
 const ExampleComponent: FC<{}> = () => (
   <Page theme={pageTheme.tool}>
-    <div className={classes.mainContentArea}>
-      <Header title="Welcome to {{ id }}!" subtitle="Optional subtitle">
-        <HeaderLabel label="Owner" value="Team X" />
-        <HeaderLabel label="Lifecycle" value="Alpha" />
-      </Header>
-      <Content>
-        <ContentHeader title="Plugin title" />
-        <Grid
-          container
-          spacing={3}
-          direction="column"
-          className={classes.pageBody}
-        >
-          <Grid item>
-            <InfoCard title="Information card" maxWidth>
-              <Typography variant="body1">
-                All content should be wrapped in a card like this.
-              </Typography>
-            </InfoCard>
-          </Grid>
-          <Grid item>
-            <InfoCard title="Example User List (fetching data from randomuser.me)">
-              <ExampleFetchComponent />
-            </InfoCard>
-          </Grid>
+    <Header title="Welcome to {{ id }}!" subtitle="Optional subtitle">
+      <HeaderLabel label="Owner" value="Team X" />
+      <HeaderLabel label="Lifecycle" value="Alpha" />
+    </Header>
+    <Content>
+      <ContentHeader title="Plugin title" />
+      <Grid
+        container
+        spacing={3}
+        direction="column"
+      >
+        <Grid item>
+          <InfoCard title="Information card" maxWidth>
+            <Typography variant="body1">
+              All content should be wrapped in a card like this.
+            </Typography>
+          </InfoCard>
         </Grid>
-      </Content>
-    </div>
+        <Grid item>
+          <InfoCard title="Example User List (fetching data from randomuser.me)">
+            <ExampleFetchComponent />
+          </InfoCard>
+        </Grid>
+      </Grid>
+    </Content>
   </Page>
 );