From 297949d3c926d870926111b85ef24c5d8420a819 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Fri, 7 Feb 2020 11:29:46 +0100
Subject: [PATCH] front/plugins/home-page: nicer box of things

---
 .../src/components/HomePage/HomePage.tsx      | 47 ++++++++-----------
 1 file changed, 20 insertions(+), 27 deletions(-)

diff --git a/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx b/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx
index 0b7c68296b..db3d9fba5f 100644
--- a/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx
+++ b/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx
@@ -26,22 +26,24 @@ const useStyles = makeStyles<Theme>(theme => ({
 
 const HomePage: FC<{}> = () => {
   const classes = useStyles();
+  const columns = [
+    { id: 'id', label: 'ID' },
+    { id: 'kind', label: 'Kind' },
+  ];
+
   const data = [
-    { id: 'service-1', system: 'system' },
-    { id: 'service-2', system: 'system' },
-  ];
-
-  /*
-  const columns = [
-    { id: 'idLink', label: 'ID', sortValue: row => row.id },
-    { id: 'systemLink', label: 'SYSTEM', sortValue: row => row.system },
-  ];
-
-  */
-  const columns = [
-    { id: 'idLink', label: 'ID' },
-    { id: 'systemLink', label: 'SYSTEM' },
-  ];
+    { id: 'backstage', kind: 'service' },
+    { id: 'backstage-microsite', kind: 'website' },
+  ].map(({ id, kind }) => {
+    return {
+      id: (
+        <EntityLink kind={kind} id={id}>
+          <Typography color="primary">{id}</Typography>
+        </EntityLink>
+      ),
+      kind: <Typography>{kind}</Typography>,
+    };
+  });
 
   return (
     <Page theme={theme.home}>
@@ -51,21 +53,12 @@ const HomePage: FC<{}> = () => {
         </Header>
         <div className={classes.pageBody}>
           <Grid container direction="column" spacing={6}>
-            <Grid item>
+            <Grid item xs={12}>
               <SquadTechHealth />
             </Grid>
-            <Grid item>
-              <InfoCard title="Stuff you own">
+            <Grid item xs={4}>
+              <InfoCard title="Stuff you own" maxWidth>
                 <SortableTable data={data} columns={columns} orderBy="id" />
-                <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>
             </Grid>
           </Grid>