feat(scaffolder): load data from catalog api

plugins/scaffolder/package.json

@@ -22,7 +22,9 @@
     "clean": "backstage-cli clean"
   },
   "dependencies": {
+    "@backstage/catalog-model": "^0.1.1-alpha.9",
     "@backstage/core": "^0.1.1-alpha.9",
+    "@backstage/plugin-catalog": "^0.1.1-alpha.9",
     "@backstage/theme": "^0.1.1-alpha.9",
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",

plugins/scaffolder/src/components/ScaffolderPage/index.tsx

@@ -22,24 +22,38 @@ import {
   Header,
   Page,
   pageTheme,
+  useApi,
 } from '@backstage/core';
-import { Typography, Link, Button } from '@material-ui/core';
+import { catalogApiRef } from '@backstage/plugin-catalog';
+import {
+  Typography,
+  Link,
+  Button,
+  Grid,
+  LinearProgress,
+} from '@material-ui/core';
 import { Link as RouterLink } from 'react-router-dom';
 import TemplateCard from '../TemplateCard';
+import { useAsync } from 'react-use';
+import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
 
-// TODO(blam): Connect to backend
-const STATIC_DATA = [
-  {
-    id: 'react-ssr-template',
-    type: 'web-infra',
-    name: 'SSR React Website',
-    tags: ['Experimental'],
-    description:
-      'Next.js application skeleton for creating isomorphic web applications.',
-    ownerId: 'something',
-  },
-];
 const ScaffolderPage: React.FC<{}> = () => {
+  const catalogApi = useApi(catalogApiRef);
+
+  const { value, loading } = useAsync(async () => {
+    const entities = await catalogApi.getEntities({ kind: 'Template' });
+    return (entities as TemplateEntityV1alpha1[]).map(template => ({
+      id: template.metadata.uid,
+      type: template.spec.type,
+      name: template.metadata.name,
+      // TODO(shmidt-i): decide on tags
+      tags: ['not-implemented'],
+      description: template.metadata.description ?? '-',
+      // TODO(shmidt-i): decide on owner
+      ownerId: '-',
+    }));
+  });
+
   return (
     <Page theme={pageTheme.home}>
       <Header
@@ -69,19 +83,23 @@ const ScaffolderPage: React.FC<{}> = () => {
           </Link>
           .
         </Typography>
-        <div style={{ display: 'flex' }}>
-          {STATIC_DATA.map(item => {
-            return (
-              <TemplateCard
-                key={item.id}
-                title={item.name}
-                type={item.type}
-                description={item.description}
-                tags={item.tags}
-              />
-            );
-          })}
-        </div>
+        {loading ? (
+          <LinearProgress />
+        ) : (
+          <Grid container>
+            {value!.map(item => {
+              return (
+                <TemplateCard
+                  key={item.id}
+                  title={item.name}
+                  type={item.type}
+                  description={item.description}
+                  tags={item.tags}
+                />
+              );
+            })}
+          </Grid>
+        )}
       </Content>
     </Page>
   );

plugins/scaffolder/src/components/TemplateCard.tsx

@@ -67,7 +67,7 @@ const TemplateCard: FC<TemplateCardProps> = ({
         </div>
         <div className={classes.content}>
           {tags?.map(tag => (
-            <Chip label={tag} />
+            <Chip label={tag} key={tag} />
           ))}
           <Typography variant="body2" paragraph className={classes.description}>
             {description}