From e6802f0a5653986a223fd52ed02feddc8ecdbbef Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Wed, 31 Aug 2022 07:44:20 -0700
Subject: [PATCH] refactor: use WidgetsIcon for null resources (#3754)

* refactor: replace HelpIcon w/WidgetsIcon

Based on user feedback, we believe the `WidgetsIcon` will cause less
confusion.

* fixup

* refactor: clean up types in ResourceAvatar.tsx

Before, we were using `string` for `type` in `ResourceAvatar`. This
meant it wasn't tied to the types generated from the backend.

Now it imports `WorkspaceResource` so that there is a single source of
truth and they always stay in sync.
---
 site/src/components/Resources/ResourceAvatar.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/site/src/components/Resources/ResourceAvatar.tsx b/site/src/components/Resources/ResourceAvatar.tsx
index 66ff0e25b7..3c7f41c5fa 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 <MemoryIcon style={{ ...style, fontSize: 24 }} {...props} />
 }
 
-const iconByResource: Record<string, typeof MemoryIcon> = {
+const iconByResource: Record<WorkspaceResource["type"], typeof MemoryIcon | undefined> = {
   docker_volume: FolderIcon,
   docker_container: AdjustedMemoryIcon,
   docker_image: ImageIcon,
@@ -22,15 +23,13 @@ const iconByResource: Record<string, typeof MemoryIcon> = {
   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<ResourceAvatarProps> = ({ 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 (