From 58d29264aa11521e2afdf0ed8fcd7ba6093d6fe0 Mon Sep 17 00:00:00 2001 From: Kyle Carberry Date: Mon, 22 Aug 2022 09:42:11 -0500 Subject: [PATCH] feat: Add template icon to the workspaces page (#3612) This removes the last built by column from the page. It seemed cluttered to have both on the page, and is simple enough to click on the workspace to see additional info. --- coderd/workspaces.go | 1 + codersdk/workspaces.go | 1 + site/src/api/typesGenerated.ts | 1 + site/src/components/AvatarData/AvatarData.tsx | 6 ++--- .../WorkspacesTable/WorkspacesRow.tsx | 26 ++++++++++++++----- .../WorkspacesTable/WorkspacesTable.tsx | 7 +++-- site/src/testHelpers/entities.ts | 1 + 7 files changed, 30 insertions(+), 13 deletions(-) diff --git a/coderd/workspaces.go b/coderd/workspaces.go index 07fbb27641..9181fdc4a8 100644 --- a/coderd/workspaces.go +++ b/coderd/workspaces.go @@ -891,6 +891,7 @@ func convertWorkspace( TemplateID: workspace.TemplateID, LatestBuild: convertWorkspaceBuild(owner, initiator, workspace, workspaceBuild, job), TemplateName: template.Name, + TemplateIcon: template.Icon, Outdated: workspaceBuild.TemplateVersionID.String() != template.ActiveVersionID.String(), Name: workspace.Name, AutostartSchedule: autostartSchedule, diff --git a/codersdk/workspaces.go b/codersdk/workspaces.go index bedfcf124b..fb2b56e4df 100644 --- a/codersdk/workspaces.go +++ b/codersdk/workspaces.go @@ -24,6 +24,7 @@ type Workspace struct { OwnerName string `json:"owner_name"` TemplateID uuid.UUID `json:"template_id"` TemplateName string `json:"template_name"` + TemplateIcon string `json:"template_icon"` LatestBuild WorkspaceBuild `json:"latest_build"` Outdated bool `json:"outdated"` Name string `json:"name"` diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts index ccd4cc2a08..d4a7a79dcb 100644 --- a/site/src/api/typesGenerated.ts +++ b/site/src/api/typesGenerated.ts @@ -426,6 +426,7 @@ export interface Workspace { readonly owner_name: string readonly template_id: string readonly template_name: string + readonly template_icon: string readonly latest_build: WorkspaceBuild readonly outdated: boolean readonly name: string diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx index 81876befab..88fd2a8847 100644 --- a/site/src/components/AvatarData/AvatarData.tsx +++ b/site/src/components/AvatarData/AvatarData.tsx @@ -12,7 +12,7 @@ import { export interface AvatarDataProps { title: string - subtitle: string + subtitle?: string highlightTitle?: boolean link?: string avatar?: React.ReactNode @@ -39,13 +39,13 @@ export const AvatarData: FC = ({ {title} - {subtitle} + {subtitle && {subtitle}} ) : ( {title} - {subtitle} + {subtitle && {subtitle}} )} diff --git a/site/src/components/WorkspacesTable/WorkspacesRow.tsx b/site/src/components/WorkspacesTable/WorkspacesRow.tsx index 4467b9a965..0485601456 100644 --- a/site/src/components/WorkspacesTable/WorkspacesRow.tsx +++ b/site/src/components/WorkspacesTable/WorkspacesRow.tsx @@ -6,8 +6,6 @@ import { useActor } from "@xstate/react" import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge" import { FC } from "react" import { useNavigate } from "react-router-dom" -import { createDayString } from "util/createDayString" -import { getDisplayWorkspaceBuildInitiatedBy } from "util/workspace" import { WorkspaceItemMachineRef } from "../../xServices/workspaces/workspacesXService" import { AvatarData } from "../AvatarData/AvatarData" import { @@ -29,8 +27,8 @@ export const WorkspacesRow: FC<{ workspaceRef: WorkspaceItemMachineRef }> = ({ w const theme: Theme = useTheme() const [workspaceState, send] = useActor(workspaceRef) const { data: workspace } = workspaceState.context - const initiatedBy = getDisplayWorkspaceBuildInitiatedBy(workspace.latest_build) const workspacePageLink = `/@${workspace.owner_name}/${workspace.name}` + const hasTemplateIcon = workspace.template_icon && workspace.template_icon !== "" return ( = ({ w - {workspace.template_name} + + + ) : undefined + } /> @@ -117,4 +121,14 @@ const useStyles = makeStyles((theme) => ({ color: theme.palette.text.secondary, fontSize: 12, }, + templateIconWrapper: { + // Same size then the avatar component + width: 36, + height: 36, + padding: 2, + + "& img": { + width: "100%", + }, + }, })) diff --git a/site/src/components/WorkspacesTable/WorkspacesTable.tsx b/site/src/components/WorkspacesTable/WorkspacesTable.tsx index 43fd869982..a10819624b 100644 --- a/site/src/components/WorkspacesTable/WorkspacesTable.tsx +++ b/site/src/components/WorkspacesTable/WorkspacesTable.tsx @@ -29,10 +29,9 @@ export const WorkspacesTable: FC = ({ isLoading, workspace {Language.name} - {Language.template} - {Language.lastBuiltBy} - {Language.version} - {Language.status} + {Language.template} + {Language.version} + {Language.status} diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts index 9f10dc7c96..8b600828e2 100644 --- a/site/src/testHelpers/entities.ts +++ b/site/src/testHelpers/entities.ts @@ -208,6 +208,7 @@ export const MockWorkspace: TypesGen.Workspace = { updated_at: "", template_id: MockTemplate.id, template_name: MockTemplate.name, + template_icon: MockTemplate.icon, outdated: false, owner_id: MockUser.id, owner_name: MockUser.username,