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 (