From fdfc130d1b40406060192a93cd366b76bf8cceac Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Thu, 21 Jul 2022 13:09:29 +0000
Subject: [PATCH 1/2] Add icons and avatar to the resource

---
 site/src/components/AvatarData/AvatarData.tsx | 15 +++++++++++++--
 site/src/components/Resources/Resources.tsx   | 19 +++++++++++++------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx
index ad531b039ba61..b911b0affa5a0 100644
--- 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
index 119de5240167a..48c5ba949c645 100644
--- 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,6 +70,15 @@ 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 */
@@ -75,10 +86,7 @@ export const Resources: FC<ResourcesProps> = ({
                 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>
                     )}
 

From 8473b49696a2731ee399b692bf7244da0867543c Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Fri, 22 Jul 2022 14:26:28 +0000
Subject: [PATCH 2/2] feat: Add resource icons

---
 site/src/components/AvatarData/AvatarData.tsx |  7 ++-
 .../Resources/ResourceAvatar.stories.tsx      | 34 +++++++++++++
 .../components/Resources/ResourceAvatar.tsx   | 48 +++++++++++++++++++
 site/src/components/Resources/Resources.tsx   | 11 +++--
 site/src/theme/overrides.ts                   |  4 +-
 site/src/theme/palettes.ts                    |  3 ++
 6 files changed, 99 insertions(+), 8 deletions(-)
 create mode 100644 site/src/components/Resources/ResourceAvatar.stories.tsx
 create mode 100644 site/src/components/Resources/ResourceAvatar.tsx

diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx
index 93925c38344ca..81876befabed9 100644
--- a/site/src/components/AvatarData/AvatarData.tsx
+++ b/site/src/components/AvatarData/AvatarData.tsx
@@ -28,12 +28,12 @@ export const AvatarData: FC<AvatarDataProps> = ({
   const styles = useStyles()
 
   if (!avatar) {
-    avatar = firstLetter(title)
+    avatar = <Avatar>{firstLetter(title)}</Avatar>
   }
 
   return (
     <div className={styles.root}>
-      <Avatar className={styles.avatar}>{avatar}</Avatar>
+      <div className={styles.avatarWrapper}>{avatar}</div>
 
       {link ? (
         <Link to={link} underline="none" component={RouterLink}>
@@ -57,8 +57,7 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     alignItems: "center",
   },
-  avatar: {
+  avatarWrapper: {
     marginRight: theme.spacing(1.5),
-    background: "hsl(219, 8%, 52%)",
   },
 }))
diff --git a/site/src/components/Resources/ResourceAvatar.stories.tsx b/site/src/components/Resources/ResourceAvatar.stories.tsx
new file mode 100644
index 0000000000000..cf641cba0b6c8
--- /dev/null
+++ b/site/src/components/Resources/ResourceAvatar.stories.tsx
@@ -0,0 +1,34 @@
+import { Story } from "@storybook/react"
+import { ResourceAvatar, ResourceAvatarProps } from "./ResourceAvatar"
+
+export default {
+  title: "components/ResourceAvatar",
+  component: ResourceAvatar,
+}
+
+const Template: Story<ResourceAvatarProps> = (args) => <ResourceAvatar {...args} />
+
+export const VolumeResource = Template.bind({})
+VolumeResource.args = {
+  type: "docker_volume",
+}
+
+export const ComputeResource = Template.bind({})
+ComputeResource.args = {
+  type: "docker_container",
+}
+
+export const ImageResource = Template.bind({})
+ImageResource.args = {
+  type: "docker_image",
+}
+
+export const NullResource = Template.bind({})
+NullResource.args = {
+  type: "null_resource",
+}
+
+export const UnkownResource = Template.bind({})
+UnkownResource.args = {
+  type: "noexistentvalue",
+}
diff --git a/site/src/components/Resources/ResourceAvatar.tsx b/site/src/components/Resources/ResourceAvatar.tsx
new file mode 100644
index 0000000000000..66ff0e25b7462
--- /dev/null
+++ b/site/src/components/Resources/ResourceAvatar.tsx
@@ -0,0 +1,48 @@
+import Avatar from "@material-ui/core/Avatar"
+import { makeStyles } from "@material-ui/core/styles"
+import FolderIcon from "@material-ui/icons/FolderOutlined"
+import HelpIcon from "@material-ui/icons/HelpOutlined"
+import ImageIcon from "@material-ui/icons/ImageOutlined"
+import MemoryIcon from "@material-ui/icons/MemoryOutlined"
+import React from "react"
+
+// For this special case, we need to apply a different style because how this
+// particular icon has been designed
+const AdjustedMemoryIcon: typeof MemoryIcon = ({ style, ...props }) => {
+  return <MemoryIcon style={{ ...style, fontSize: 24 }} {...props} />
+}
+
+const iconByResource: Record<string, typeof MemoryIcon> = {
+  docker_volume: FolderIcon,
+  docker_container: AdjustedMemoryIcon,
+  docker_image: ImageIcon,
+  kubernetes_persistent_volume_claim: FolderIcon,
+  kubernetes_pod: AdjustedMemoryIcon,
+  google_compute_disk: FolderIcon,
+  google_compute_instance: AdjustedMemoryIcon,
+  aws_instance: AdjustedMemoryIcon,
+  kubernetes_deployment: AdjustedMemoryIcon,
+  null_resource: HelpIcon,
+}
+
+export type ResourceAvatarProps = { type: string }
+
+export const ResourceAvatar: React.FC<ResourceAvatarProps> = ({ type }) => {
+  // this resource can return undefined
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  const IconComponent = iconByResource[type] ?? HelpIcon
+  const styles = useStyles()
+
+  return (
+    <Avatar className={styles.resourceAvatar}>
+      <IconComponent style={{ fontSize: 20 }} />
+    </Avatar>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  resourceAvatar: {
+    color: theme.palette.info.contrastText,
+    backgroundColor: theme.palette.info.main,
+  },
+}))
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
index 48c5ba949c645..bb3ba6cf3c6db 100644
--- a/site/src/components/Resources/Resources.tsx
+++ b/site/src/components/Resources/Resources.tsx
@@ -4,11 +4,10 @@ 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 { AvatarData } from "../../components/AvatarData/AvatarData"
 import { getDisplayAgentStatus } from "../../util/workspace"
 import { AppLink } from "../AppLink/AppLink"
 import { SSHButton } from "../SSHButton/SSHButton"
@@ -17,6 +16,7 @@ import { TableHeaderRow } from "../TableHeaders/TableHeaders"
 import { TerminalLink } from "../TerminalLink/TerminalLink"
 import { AgentHelpTooltip } from "../Tooltips/AgentHelpTooltip"
 import { ResourcesHelpTooltip } from "../Tooltips/ResourcesHelpTooltip"
+import { ResourceAvatar } from "./ResourceAvatar"
 
 const Language = {
   resources: "Resources",
@@ -72,7 +72,7 @@ export const Resources: FC<ResourcesProps> = ({
               const agents = resource.agents ?? [null]
               const resourceName = (
                 <AvatarData
-                  avatar={<MemoryIcon />}
+                  avatar={<ResourceAvatar type={resource.type} />}
                   title={resource.name}
                   subtitle={resource.type}
                   highlightTitle
@@ -156,6 +156,11 @@ const useStyles = makeStyles((theme) => ({
     border: 0,
   },
 
+  resourceAvatar: {
+    color: "#FFF",
+    backgroundColor: "#3B73D8",
+  },
+
   resourceNameCell: {
     borderRight: `1px solid ${theme.palette.divider}`,
   },
diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
index 7310ad77e945a..9deac14e03fa0 100644
--- a/site/src/theme/overrides.ts
+++ b/site/src/theme/overrides.ts
@@ -17,11 +17,13 @@ export const getOverrides = (palette: PaletteOptions) => {
     },
     MuiAvatar: {
       root: {
-        borderColor: palette.divider,
         width: 36,
         height: 36,
         fontSize: 18,
       },
+      colorDefault: {
+        backgroundColor: "#a1adc9",
+      },
     },
     MuiButton: {
       root: {
diff --git a/site/src/theme/palettes.ts b/site/src/theme/palettes.ts
index 41702d0d73d27..399ee47662502 100644
--- a/site/src/theme/palettes.ts
+++ b/site/src/theme/palettes.ts
@@ -28,4 +28,7 @@ export const darkPalette: PaletteOptions = {
   success: {
     main: "hsl(142, 58%, 41%)",
   },
+  info: {
+    main: "hsl(219, 67%, 54%)",
+  },
 }