diff --git a/site/src/components/Resources/ResourceAvatar.tsx b/site/src/components/Resources/ResourceAvatar.tsx
index 66ff0e25b7462..3c7f41c5fa548 100644
--- a/site/src/components/Resources/ResourceAvatar.tsx
+++ b/site/src/components/Resources/ResourceAvatar.tsx
@@ -1,10 +1,11 @@
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 WidgetsIcon from "@material-ui/icons/WidgetsOutlined"
import React from "react"
+import { WorkspaceResource } from "../../api/typesGenerated"
// For this special case, we need to apply a different style because how this
// particular icon has been designed
@@ -12,7 +13,7 @@ const AdjustedMemoryIcon: typeof MemoryIcon = ({ style, ...props }) => {
return
}
-const iconByResource: Record = {
+const iconByResource: Record = {
docker_volume: FolderIcon,
docker_container: AdjustedMemoryIcon,
docker_image: ImageIcon,
@@ -22,15 +23,13 @@ const iconByResource: Record = {
google_compute_instance: AdjustedMemoryIcon,
aws_instance: AdjustedMemoryIcon,
kubernetes_deployment: AdjustedMemoryIcon,
- null_resource: HelpIcon,
+ null_resource: WidgetsIcon,
}
-export type ResourceAvatarProps = { type: string }
+export type ResourceAvatarProps = { type: WorkspaceResource["type"] }
export const ResourceAvatar: React.FC = ({ type }) => {
- // this resource can return undefined
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
- const IconComponent = iconByResource[type] ?? HelpIcon
+ const IconComponent = iconByResource[type] ?? WidgetsIcon
const styles = useStyles()
return (