refactor: use WidgetsIcon for null resources (#3754)

jsjoeio · web-flow · commit e6802f0a5653 · 2022-08-31T07:44:20.000-07:00
* 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.
diff --git a/site/src/components/Resources/ResourceAvatar.tsx b/site/src/components/Resources/ResourceAvatar.tsx
@@ -1,18 +1,19 @@
 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
 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 (
