Skip to content

Commit 58d2926

Browse files
kylecarbskylecarbs
authored
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.
1 parent 369a9fb commit 58d2926

File tree

7 files changed

+30
-13
lines changed

7 files changed

+30
-13
lines changed

‎coderd/workspaces.go

+1
Original file line numberDiff line numberDiff line change
@@ -891,6 +891,7 @@ func convertWorkspace(
891891
TemplateID: workspace.TemplateID,
892892
LatestBuild: convertWorkspaceBuild(owner, initiator, workspace, workspaceBuild, job),
893893
TemplateName: template.Name,
894+
TemplateIcon: template.Icon,
894895
Outdated: workspaceBuild.TemplateVersionID.String() != template.ActiveVersionID.String(),
895896
Name: workspace.Name,
896897
AutostartSchedule: autostartSchedule,

‎codersdk/workspaces.go

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ type Workspace struct {
2424
OwnerName string `json:"owner_name"`
2525
TemplateID uuid.UUID `json:"template_id"`
2626
TemplateName string `json:"template_name"`
27+
TemplateIcon string `json:"template_icon"`
2728
LatestBuild WorkspaceBuild `json:"latest_build"`
2829
Outdated bool `json:"outdated"`
2930
Name string `json:"name"`

‎site/src/api/typesGenerated.ts

+1
Original file line numberDiff line numberDiff line change
@@ -426,6 +426,7 @@ export interface Workspace {
426426
readonly owner_name: string
427427
readonly template_id: string
428428
readonly template_name: string
429+
readonly template_icon: string
429430
readonly latest_build: WorkspaceBuild
430431
readonly outdated: boolean
431432
readonly name: string

‎site/src/components/AvatarData/AvatarData.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212

1313
export interface AvatarDataProps {
1414
title: string
15-
subtitle: string
15+
subtitle?: string
1616
highlightTitle?: boolean
1717
link?: string
1818
avatar?: React.ReactNode
@@ -39,13 +39,13 @@ export const AvatarData: FC<AvatarDataProps> = ({
3939
<Link to={link} underline="none" component={RouterLink}>
4040
<TableCellData>
4141
<TableCellDataPrimary highlight={highlightTitle}>{title}</TableCellDataPrimary>
42-
<TableCellDataSecondary>{subtitle}</TableCellDataSecondary>
42+
{subtitle && <TableCellDataSecondary>{subtitle}</TableCellDataSecondary>}
4343
</TableCellData>
4444
</Link>
4545
) : (
4646
<TableCellData>
4747
<TableCellDataPrimary highlight={highlightTitle}>{title}</TableCellDataPrimary>
48-
<TableCellDataSecondary>{subtitle}</TableCellDataSecondary>
48+
{subtitle && <TableCellDataSecondary>{subtitle}</TableCellDataSecondary>}
4949
</TableCellData>
5050
)}
5151
</div>

‎site/src/components/WorkspacesTable/WorkspacesRow.tsx

+20-6
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ import { useActor } from "@xstate/react"
66
import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
77
import { FC } from "react"
88
import { useNavigate } from "react-router-dom"
9-
import { createDayString } from "util/createDayString"
10-
import { getDisplayWorkspaceBuildInitiatedBy } from "util/workspace"
119
import { WorkspaceItemMachineRef } from "../../xServices/workspaces/workspacesXService"
1210
import { AvatarData } from "../AvatarData/AvatarData"
1311
import {
@@ -29,8 +27,8 @@ export const WorkspacesRow: FC<{ workspaceRef: WorkspaceItemMachineRef }> = ({ w
2927
const theme: Theme = useTheme()
3028
const [workspaceState, send] = useActor(workspaceRef)
3129
const { data: workspace } = workspaceState.context
32-
const initiatedBy = getDisplayWorkspaceBuildInitiatedBy(workspace.latest_build)
3330
const workspacePageLink = `/@${workspace.owner_name}/${workspace.name}`
31+
const hasTemplateIcon = workspace.template_icon && workspace.template_icon !== ""
3432

3533
return (
3634
<TableRow
@@ -51,11 +49,17 @@ export const WorkspacesRow: FC<{ workspaceRef: WorkspaceItemMachineRef }> = ({ w
5149
</TableCellData>
5250
</TableCellLink>
5351

54-
<TableCellLink to={workspacePageLink}>{workspace.template_name}</TableCellLink>
5552
<TableCellLink to={workspacePageLink}>
5653
<AvatarData
57-
title={initiatedBy}
58-
subtitle={createDayString(workspace.latest_build.created_at)}
54+
title={workspace.template_name}
55+
highlightTitle={false}
56+
avatar={
57+
hasTemplateIcon ? (
58+
<div className={styles.templateIconWrapper}>
59+
<img alt="" src={workspace.template_icon} />
60+
</div>
61+
) : undefined
62+
}
5963
/>
6064
</TableCellLink>
6165
<TableCellLink to={workspacePageLink}>
@@ -117,4 +121,14 @@ const useStyles = makeStyles((theme) => ({
117121
color: theme.palette.text.secondary,
118122
fontSize: 12,
119123
},
124+
templateIconWrapper: {
125+
// Same size then the avatar component
126+
width: 36,
127+
height: 36,
128+
padding: 2,
129+
130+
"& img": {
131+
width: "100%",
132+
},
133+
},
120134
}))

‎site/src/components/WorkspacesTable/WorkspacesTable.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,9 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({ isLoading, workspace
2929
<TableHead>
3030
<TableRow>
3131
<TableCell width="25%">{Language.name}</TableCell>
32-
<TableCell width="20%">{Language.template}</TableCell>
33-
<TableCell width="25%">{Language.lastBuiltBy}</TableCell>
34-
<TableCell width="15%">{Language.version}</TableCell>
35-
<TableCell width="15%">{Language.status}</TableCell>
32+
<TableCell width="35%">{Language.template}</TableCell>
33+
<TableCell width="20%">{Language.version}</TableCell>
34+
<TableCell width="20%">{Language.status}</TableCell>
3635
<TableCell width="1%"></TableCell>
3736
</TableRow>
3837
</TableHead>

‎site/src/testHelpers/entities.ts

+1
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,7 @@ export const MockWorkspace: TypesGen.Workspace = {
208208
updated_at: "",
209209
template_id: MockTemplate.id,
210210
template_name: MockTemplate.name,
211+
template_icon: MockTemplate.icon,
211212
outdated: false,
212213
owner_id: MockUser.id,
213214
owner_name: MockUser.username,

0 commit comments

Comments
 (0)