feat: Add resource icons

coder · BrunoQuaresma · Jul 22, 2022 · Jul 21, 2022 · Jul 22, 2022 · Jul 22, 2022
commit 8473b49696a2731ee399b692bf7244da0867543c
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -28,4 +28,7 @@ export const darkPalette: PaletteOptions = {
   success: {
     main: "hsl(142, 58%, 41%)",
   },
+  info: {
+    main: "hsl(219, 67%, 54%)",
+  },
 }