Skip to content

Commit 41f10e7

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor: Show template version in the workspace page (coder#5194)
1 parent 5817d2a commit 41f10e7

File tree

8 files changed

+158
-175
lines changed

8 files changed

+158
-175
lines changed

‎site/src/components/BuildsTable/BuildRow.tsx

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,18 @@ export const BuildRow: React.FC<BuildRowProps> = ({ build }) => {
3434
alignItems="center"
3535
className={styles.buildWrapper}
3636
>
37-
<Stack direction="row" alignItems="center">
37+
<Stack
38+
direction="row"
39+
alignItems="center"
40+
className={styles.fullWidth}
41+
>
3842
<BuildAvatar build={build} />
39-
<div>
43+
<Stack
44+
direction="row"
45+
justifyContent="space-between"
46+
alignItems="center"
47+
className={styles.fullWidth}
48+
>
4049
<Stack
4150
className={styles.buildSummary}
4251
direction="row"
@@ -66,8 +75,13 @@ export const BuildRow: React.FC<BuildRowProps> = ({ build }) => {
6675
{t("buildData.duration")}:{" "}
6776
<strong>{displayWorkspaceBuildDuration(build)}</strong>
6877
</span>
78+
79+
<span className={styles.buildInfo}>
80+
{t("buildData.version")}:{" "}
81+
<strong>{build.template_version_name}</strong>
82+
</span>
6983
</Stack>
70-
</div>
84+
</Stack>
7185
</Stack>
7286
</Stack>
7387
</TableCell>
@@ -114,4 +128,8 @@ const useStyles = makeStyles((theme) => ({
114128
color: theme.palette.text.secondary,
115129
whiteSpace: "nowrap",
116130
},
131+
132+
fullWidth: {
133+
width: "100%",
134+
},
117135
}))

‎site/src/components/Stats/Stats.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,24 @@ const useStyles = makeStyles((theme) => ({
3030
alignItems: "center",
3131
color: theme.palette.text.secondary,
3232
margin: "0px",
33+
3334
[theme.breakpoints.down("sm")]: {
3435
display: "block",
36+
padding: theme.spacing(2),
3537
},
3638
},
3739

3840
statItem: {
39-
padding: theme.spacing(2),
40-
paddingTop: theme.spacing(1.75),
41+
padding: theme.spacing(1.75),
42+
paddingLeft: theme.spacing(2),
43+
paddingRight: theme.spacing(2),
4144
display: "flex",
4245
alignItems: "baseline",
4346
gap: theme.spacing(1),
47+
48+
[theme.breakpoints.down("sm")]: {
49+
padding: theme.spacing(1),
50+
},
4451
},
4552

4653
statsLabel: {
@@ -50,9 +57,10 @@ const useStyles = makeStyles((theme) => ({
5057

5158
statsValue: {
5259
marginTop: theme.spacing(0.25),
53-
display: "block",
60+
display: "flex",
5461
wordWrap: "break-word",
5562
color: theme.palette.text.primary,
63+
alignItems: "center",
5664

5765
"& a": {
5866
color: theme.palette.text.primary,

‎site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { makeStyles } from "@material-ui/core/styles"
44
import HelpIcon from "@material-ui/icons/HelpOutline"
55
import OpenInNewIcon from "@material-ui/icons/OpenInNew"
66
import React, { createContext, useContext, useRef, useState } from "react"
7+
import { combineClasses } from "util/combineClasses"
78
import { Stack } from "../../Stack/Stack"
89

910
type Icon = typeof HelpIcon
@@ -13,6 +14,9 @@ export interface HelpTooltipProps {
1314
// Useful to test on storybook
1415
open?: boolean
1516
size?: Size
17+
icon?: Icon
18+
iconClassName?: string
19+
buttonClassName?: string
1620
}
1721

1822
export const Language = {
@@ -66,7 +70,14 @@ export const HelpPopover: React.FC<
6670

6771
export const HelpTooltip: React.FC<
6872
React.PropsWithChildren<HelpTooltipProps>
69-
> = ({ children, open, size = "medium" }) => {
73+
> = ({
74+
children,
75+
open,
76+
size = "medium",
77+
icon: Icon = HelpIcon,
78+
iconClassName,
79+
buttonClassName,
80+
}) => {
7081
const styles = useStyles({ size })
7182
const anchorRef = useRef<HTMLButtonElement>(null)
7283
const [isOpen, setIsOpen] = useState(Boolean(open))
@@ -81,7 +92,7 @@ export const HelpTooltip: React.FC<
8192
<button
8293
ref={anchorRef}
8394
aria-describedby={id}
84-
className={styles.button}
95+
className={combineClasses([styles.button, buttonClassName])}
8596
onClick={(event) => {
8697
event.stopPropagation()
8798
setIsOpen(true)
@@ -94,7 +105,7 @@ export const HelpTooltip: React.FC<
94105
}}
95106
aria-label={Language.ariaLabel}
96107
>
97-
<HelpIcon className={styles.icon} />
108+
<Icon className={combineClasses([styles.icon, iconClassName])} />
98109
</button>
99110
<HelpPopover
100111
id={id}

‎site/src/components/Tooltips/OutdatedHelpTooltip.tsx

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import {
77
HelpTooltipText,
88
HelpTooltipTitle,
99
} from "./HelpTooltip"
10+
import InfoIcon from "@material-ui/icons/InfoOutlined"
11+
import { makeStyles } from "@material-ui/core/styles"
12+
import { colors } from "theme/colors"
1013

1114
export const Language = {
1215
outdatedLabel: "Outdated",
@@ -24,8 +27,15 @@ export const OutdatedHelpTooltip: FC<React.PropsWithChildren<TooltipProps>> = ({
2427
onUpdateVersion,
2528
ariaLabel,
2629
}) => {
30+
const styles = useStyles()
31+
2732
return (
28-
<HelpTooltip size="small">
33+
<HelpTooltip
34+
size="small"
35+
icon={InfoIcon}
36+
iconClassName={styles.icon}
37+
buttonClassName={styles.button}
38+
>
2939
<HelpTooltipTitle>{Language.outdatedLabel}</HelpTooltipTitle>
3040
<HelpTooltipText>{Language.versionTooltipText}</HelpTooltipText>
3141
<HelpTooltipLinksGroup>
@@ -40,3 +50,17 @@ export const OutdatedHelpTooltip: FC<React.PropsWithChildren<TooltipProps>> = ({
4050
</HelpTooltip>
4151
)
4252
}
53+
54+
const useStyles = makeStyles(() => ({
55+
icon: {
56+
color: colors.yellow[5],
57+
},
58+
59+
button: {
60+
opacity: 1,
61+
62+
"&:hover": {
63+
opacity: 1,
64+
},
65+
},
66+
}))

‎site/src/components/WorkspaceStats/WorkspaceStats.tsx

Lines changed: 41 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import Link from "@material-ui/core/Link"
2-
import { makeStyles } from "@material-ui/core/styles"
32
import { OutdatedHelpTooltip } from "components/Tooltips"
43
import { FC } from "react"
54
import { Link as RouterLink } from "react-router-dom"
6-
import { combineClasses } from "util/combineClasses"
75
import { createDayString } from "util/createDayString"
86
import {
97
getDisplayWorkspaceBuildInitiatedBy,
108
getDisplayWorkspaceTemplateName,
119
} from "util/workspace"
1210
import { Workspace } from "../../api/typesGenerated"
11+
import { Stats, StatsItem } from "components/Stats/Stats"
1312

1413
const Language = {
1514
workspaceDetails: "Workspace Details",
@@ -34,110 +33,57 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
3433
quota_budget,
3534
handleUpdate,
3635
}) => {
37-
const styles = useStyles()
3836
const initiatedBy = getDisplayWorkspaceBuildInitiatedBy(
3937
workspace.latest_build,
4038
)
4139
const displayTemplateName = getDisplayWorkspaceTemplateName(workspace)
4240

4341
return (
44-
<div className={styles.stats} aria-label={Language.workspaceDetails}>
45-
<div className={styles.statItem}>
46-
<span className={styles.statsLabel}>{Language.templateLabel}:</span>
47-
<Link
48-
component={RouterLink}
49-
to={`/templates/${workspace.template_name}`}
50-
className={combineClasses([styles.statsValue, styles.link])}
51-
>
52-
{displayTemplateName}
53-
</Link>
54-
</div>
55-
<div className={styles.statItem}>
56-
<span className={styles.statsLabel}>{Language.versionLabel}:</span>
57-
<span className={styles.statsValue}>
58-
{workspace.outdated ? (
59-
<span className={styles.outdatedLabel}>
60-
{Language.outdated}
42+
<Stats aria-label={Language.workspaceDetails}>
43+
<StatsItem
44+
label={Language.templateLabel}
45+
value={
46+
<Link
47+
component={RouterLink}
48+
to={`/templates/${workspace.template_name}`}
49+
>
50+
{displayTemplateName}
51+
</Link>
52+
}
53+
/>
54+
<StatsItem
55+
label={Language.versionLabel}
56+
value={
57+
<>
58+
<Link
59+
component={RouterLink}
60+
to={`/templates/${workspace.template_name}/versions/${workspace.latest_build.template_version_name}`}
61+
>
62+
{workspace.latest_build.template_version_name}
63+
</Link>
64+
65+
{workspace.outdated && (
6166
<OutdatedHelpTooltip
6267
onUpdateVersion={handleUpdate}
6368
ariaLabel="update version"
6469
/>
65-
</span>
66-
) : (
67-
Language.upToDate
68-
)}
69-
</span>
70-
</div>
71-
<div className={styles.statItem}>
72-
<span className={styles.statsLabel}>{Language.lastBuiltLabel}:</span>
73-
<span className={styles.statsValue} data-chromatic="ignore">
74-
{createDayString(workspace.latest_build.created_at)}
75-
</span>
76-
</div>
77-
<div className={styles.statItem}>
78-
<span className={styles.statsLabel}>{Language.byLabel}:</span>
79-
<span className={styles.statsValue}>{initiatedBy}</span>
80-
</div>
70+
)}
71+
</>
72+
}
73+
/>
74+
<StatsItem
75+
label={Language.lastBuiltLabel}
76+
value={createDayString(workspace.latest_build.created_at)}
77+
/>
78+
<StatsItem label={Language.byLabel} value={initiatedBy} />
8179
{workspace.latest_build.daily_cost > 0 && (
82-
<div className={styles.statItem}>
83-
<span className={styles.statsLabel}>{Language.costLabel}:</span>
84-
<span className={styles.statsValue}>
85-
{workspace.latest_build.daily_cost} / {quota_budget}
86-
</span>
87-
</div>
80+
<StatsItem
81+
label={Language.costLabel}
82+
value={`${workspace.latest_build.daily_cost} ${
83+
quota_budget ? `/ ${quota_budget}` : ""
84+
}`}
85+
/>
8886
)}
89-
</div>
87+
</Stats>
9088
)
9189
}
92-
93-
const useStyles = makeStyles((theme) => ({
94-
stats: {
95-
paddingLeft: theme.spacing(2),
96-
paddingRight: theme.spacing(2),
97-
borderRadius: theme.shape.borderRadius,
98-
border: `1px solid ${theme.palette.divider}`,
99-
display: "flex",
100-
alignItems: "center",
101-
color: theme.palette.text.secondary,
102-
margin: "0px",
103-
[theme.breakpoints.down("sm")]: {
104-
display: "block",
105-
},
106-
},
107-
108-
statItem: {
109-
padding: theme.spacing(2),
110-
paddingTop: theme.spacing(1.75),
111-
display: "flex",
112-
alignItems: "baseline",
113-
gap: theme.spacing(1),
114-
},
115-
116-
statsLabel: {
117-
display: "block",
118-
wordWrap: "break-word",
119-
},
120-
121-
statsValue: {
122-
marginTop: theme.spacing(0.25),
123-
display: "block",
124-
wordWrap: "break-word",
125-
color: theme.palette.text.primary,
126-
},
127-
128-
capitalize: {
129-
textTransform: "capitalize",
130-
},
131-
132-
link: {
133-
color: theme.palette.text.primary,
134-
fontWeight: 600,
135-
},
136-
137-
outdatedLabel: {
138-
color: theme.palette.error.main,
139-
display: "flex",
140-
alignItems: "center",
141-
gap: theme.spacing(0.5),
142-
},
143-
}))

0 commit comments

Comments
 (0)