Add icons and avatar to the resource

BrunoQuaresma · BrunoQuaresma · commit fdfc130d1b40 · 2022-07-21T13:09:29.000Z
diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx
@@ -15,14 +15,25 @@ export interface AvatarDataProps {
   subtitle: string
   highlightTitle?: boolean
   link?: string
+  avatar?: React.ReactNode
 }
 
-export const AvatarData: FC<AvatarDataProps> = ({ title, subtitle, link, highlightTitle }) => {
+export const AvatarData: FC<AvatarDataProps> = ({
+  title,
+  subtitle,
+  link,
+  highlightTitle,
+  avatar,
+}) => {
   const styles = useStyles()
 
+  if (!avatar) {
+    avatar = firstLetter(title)
+  }
+
   return (
     <div className={styles.root}>
-      <Avatar className={styles.avatar}>{firstLetter(title)}</Avatar>
+      <Avatar className={styles.avatar}>{avatar}</Avatar>
 
       {link ? (
         <Link to={link} underline="none" component={RouterLink}>
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
@@ -4,7 +4,9 @@ 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 MemoryIcon from "@material-ui/icons/MemoryOutlined"
 import useTheme from "@material-ui/styles/useTheme"
+import { AvatarData } from "components/AvatarData/AvatarData"
 import { FC } from "react"
 import { Workspace, WorkspaceResource } from "../../api/typesGenerated"
 import { getDisplayAgentStatus } from "../../util/workspace"
@@ -68,17 +70,23 @@ export const Resources: FC<ResourcesProps> = ({
                 /* We need to initialize the agents to display the resource */
               }
               const agents = resource.agents ?? [null]
+              const resourceName = (
+                <AvatarData
+                  avatar={<MemoryIcon />}
+                  title={resource.name}
+                  subtitle={resource.type}
+                  highlightTitle
+                />
+              )
+
               return agents.map((agent, agentIndex) => {
                 {
                   /* If there is no agent, just display the resource name */
                 }
                 if (!agent) {
                   return (
                     <TableRow key={`${resource.id}-${agentIndex}`}>
-                      <TableCell>
-                        {resource.name}
-                        <span className={styles.resourceType}>{resource.type}</span>
-                      </TableCell>
+                      <TableCell>{resourceName}</TableCell>
                       <TableCell colSpan={3}></TableCell>
                     </TableRow>
                   )
@@ -91,8 +99,7 @@ export const Resources: FC<ResourcesProps> = ({
                     {/* 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>
+                        {resourceName}
                       </TableCell>
                     )}
 
