From 91827b1000bd595a3aeb24180b8eaf5ead0e4632 Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Tue, 30 Aug 2022 23:10:03 +0000 Subject: [PATCH 1/3] refactor: replace HelpIcon w/WidgetsIcon Based on user feedback, we believe the `WidgetsIcon` will cause less confusion. --- site/src/components/Resources/ResourceAvatar.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/site/src/components/Resources/ResourceAvatar.tsx b/site/src/components/Resources/ResourceAvatar.tsx index 66ff0e25b7462..24352ae0a3626 100644 --- a/site/src/components/Resources/ResourceAvatar.tsx +++ b/site/src/components/Resources/ResourceAvatar.tsx @@ -1,7 +1,7 @@ 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 WidgetsIcon from "@material-ui/icons/WidgetsOutlined" import ImageIcon from "@material-ui/icons/ImageOutlined" import MemoryIcon from "@material-ui/icons/MemoryOutlined" import React from "react" @@ -22,15 +22,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 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 ( From e9566fc5e11703f3b3c1b1bbdee7c9aed8242064 Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Tue, 30 Aug 2022 23:13:06 +0000 Subject: [PATCH 2/3] fixup --- site/src/components/Resources/ResourceAvatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/Resources/ResourceAvatar.tsx b/site/src/components/Resources/ResourceAvatar.tsx index 24352ae0a3626..f22dd0182dcb1 100644 --- a/site/src/components/Resources/ResourceAvatar.tsx +++ b/site/src/components/Resources/ResourceAvatar.tsx @@ -1,9 +1,9 @@ import Avatar from "@material-ui/core/Avatar" import { makeStyles } from "@material-ui/core/styles" import FolderIcon from "@material-ui/icons/FolderOutlined" -import WidgetsIcon from "@material-ui/icons/WidgetsOutlined" 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" // For this special case, we need to apply a different style because how this From 6716accab8938498f8eb8c5b539181e601d6a412 Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Tue, 30 Aug 2022 23:20:37 +0000 Subject: [PATCH 3/3] 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 | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/site/src/components/Resources/ResourceAvatar.tsx b/site/src/components/Resources/ResourceAvatar.tsx index f22dd0182dcb1..3c7f41c5fa548 100644 --- a/site/src/components/Resources/ResourceAvatar.tsx +++ b/site/src/components/Resources/ResourceAvatar.tsx @@ -5,6 +5,7 @@ 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, @@ -25,7 +26,7 @@ const iconByResource: Record = { null_resource: WidgetsIcon, } -export type ResourceAvatarProps = { type: string } +export type ResourceAvatarProps = { type: WorkspaceResource["type"] } export const ResourceAvatar: React.FC = ({ type }) => { const IconComponent = iconByResource[type] ?? WidgetsIcon