Merge pull request #192 from spotify/alund/example-header

Richer UI in newly created plugin

packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs

@@ -6,17 +6,24 @@ import {
   Page,
   pageTheme,
   Content,
+  ContentHeader,
+  HeaderLabel,
 } from '@spotify-backstage/core';
 import ExampleFetchComponent from '../ExampleFetchComponent';
 
 const ExampleComponent: FC<{}> = () => (
   <Page theme={pageTheme.tool}>
-    <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>
-      <Grid container spacing={3} direction="column">
-        <Grid item>
-          <Typography variant="h3">Plugin page title</Typography>
-        </Grid>
+      <ContentHeader title="Plugin title" />
+      <Grid
+        container
+        spacing={3}
+        direction="column"
+      >
         <Grid item>
           <InfoCard title="Information card" maxWidth>
             <Typography variant="body1">

packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs

@@ -6,14 +6,19 @@ 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: {
     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>
@@ -79,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>;
   }