From 2dc3bbb06c074ab56c90cf7d5ce2ac1079808455 Mon Sep 17 00:00:00 2001 From: Kyle Carberry Date: Sat, 20 Aug 2022 16:31:44 +0000 Subject: [PATCH] feat: Add template icon to the workspaces page 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 07fbb27641031..9181fdc4a8c24 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 bedfcf124b55e..fb2b56e4dfbf1 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 ccd4cc2a08c47..d4a7a79dcb287 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 81876befabed9..88fd2a8847d4b 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 4467b9a965f9a..04856014567d3 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 43fd8699821e9..a10819624be6c 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 9f10dc7c9623b..8b600828e2dac 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,