From 3d56cfb69f0049e17de3fd5aca23544971d95099 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Fri, 22 Jul 2022 15:56:55 +0000
Subject: [PATCH] fix: Add resource icons into template page

---
 .../TemplateResourcesTable.tsx                 | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx b/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx
index 005c473ccdbbb..3c7c50eb9c8d5 100644
--- a/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx
+++ b/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx
@@ -4,6 +4,8 @@ import TableBody from "@material-ui/core/TableBody"
 import TableCell from "@material-ui/core/TableCell"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
+import { AvatarData } from "components/AvatarData/AvatarData"
+import { ResourceAvatar } from "components/Resources/ResourceAvatar"
 import { FC } from "react"
 import { WorkspaceResource } from "../../api/typesGenerated"
 import { Stack } from "../Stack/Stack"
@@ -51,8 +53,12 @@ export const TemplateResourcesTable: FC<TemplateResourcesProps> = ({ resources }
               return (
                 <TableRow>
                   <TableCell className={styles.resourceNameCell}>
-                    {resource.name}
-                    <span className={styles.resourceType}>{resource.type}</span>
+                    <AvatarData
+                      title={resource.name}
+                      subtitle={resource.type}
+                      highlightTitle
+                      avatar={<ResourceAvatar type={resource.type} />}
+                    />
                   </TableCell>
                   <TableCell colSpan={3}></TableCell>
                 </TableRow>
@@ -65,8 +71,12 @@ export const TemplateResourcesTable: FC<TemplateResourcesProps> = ({ resources }
                 {/* The rowspan should be the same than the number of agents */}
                 {agentIndex === 0 && (
                   <TableCell className={styles.resourceNameCell} rowSpan={agents.length}>
-                    {resource.name}
-                    <span className={styles.resourceType}>{resource.type}</span>
+                    <AvatarData
+                      title={resource.name}
+                      subtitle={resource.type}
+                      highlightTitle
+                      avatar={<ResourceAvatar type={resource.type} />}
+                    />
                   </TableCell>
                 )}