Skip to content

Commit 6ab1c5f

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Add loader state and template version
1 parent 15597a0 commit 6ab1c5f

File tree

2 files changed

+93
-49
lines changed

2 files changed

+93
-49
lines changed

‎site/src/components/Sidebar/Sidebar.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,11 @@ export const Sidebar = styled((props: BoxProps) => (
1212
overflowY: "auto",
1313
}))
1414

15-
export const SidebarItem = styled((props: BoxProps & { active?: boolean }) => (
16-
<Box component="button" {...props} />
17-
))(({ theme, active }) => ({
15+
export const SidebarItem = styled(
16+
({ active, ...props }: BoxProps & { active?: boolean }) => (
17+
<Box component="button" {...props} />
18+
),
19+
)(({ theme, active }) => ({
1820
background: active ? colors.gray[13] : "none",
1921
border: "none",
2022
fontSize: 14,

‎site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx

Lines changed: 88 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
SidebarItem,
2626
} from "components/Sidebar/Sidebar"
2727
import { BuildIcon } from "components/BuildIcon/BuildIcon"
28+
import Skeleton from "@mui/material/Skeleton"
2829

2930
const sortLogsByCreatedAt = (logs: ProvisionerJobLog[]) => {
3031
return [...logs].sort(
@@ -47,7 +48,6 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
4748
activeBuildNumber,
4849
}) => {
4950
const styles = useStyles()
50-
const theme = useTheme()
5151

5252
if (!build) {
5353
return <Loader />
@@ -85,6 +85,11 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
8585
</Link>
8686
}
8787
/>
88+
<StatsItem
89+
className={styles.statsItem}
90+
label="Template version"
91+
value={build.template_version_name}
92+
/>
8893
<StatsItem
8994
className={styles.statsItem}
9095
label="Duration"
@@ -98,7 +103,11 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
98103
<StatsItem
99104
className={styles.statsItem}
100105
label="Action"
101-
value={build.transition}
106+
value={
107+
<Box component="span" sx={{ textTransform: "capitalize" }}>
108+
{build.transition}
109+
</Box>
110+
}
102111
/>
103112
</Stats>
104113
</FullWidthPageHeader>
@@ -113,50 +122,16 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
113122
>
114123
<Sidebar>
115124
<SidebarCaption>Builds</SidebarCaption>
116-
{builds?.map((b) => (
117-
<Link
118-
key={b.id}
119-
to={`/@${b.workspace_owner_name}/${b.workspace_name}/builds/${b.build_number}`}
120-
>
121-
<SidebarItem
122-
active={b.build_number === activeBuildNumber}
123-
sx={{ color: "red" }}
124-
>
125-
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
126-
<BuildIcon
127-
transition={b.transition}
128-
sx={{
129-
width: 16,
130-
height: 16,
131-
color: getDisplayWorkspaceBuildStatus(theme, b).color,
132-
}}
133-
/>
134-
<Box sx={{ overflow: "hidden" }}>
135-
<Box
136-
sx={{
137-
textTransform: "capitalize",
138-
color: (theme) => theme.palette.text.primary,
139-
textOverflow: "ellipsis",
140-
overflow: "hidden",
141-
whiteSpace: "nowrap",
142-
}}
143-
>
144-
{b.transition} by{" "}
145-
<strong>{getDisplayWorkspaceBuildInitiatedBy(b)}</strong>
146-
</Box>
147-
<Box
148-
sx={{
149-
fontSize: 12,
150-
color: (theme) => theme.palette.text.secondary,
151-
mt: 0.25,
152-
}}
153-
>
154-
{displayWorkspaceBuildDuration(b)}
155-
</Box>
156-
</Box>
157-
</Box>
158-
</SidebarItem>
159-
</Link>
125+
{!builds &&
126+
[...Array(15).keys()].map((i) => (
127+
<BuildSidebarItemSkeleton key={i} />
128+
))}
129+
{builds?.map((build) => (
130+
<BuildSidebarItem
131+
key={build.id}
132+
build={build}
133+
active={build.build_number === activeBuildNumber}
134+
/>
160135
))}
161136
</Sidebar>
162137

@@ -177,6 +152,73 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
177152
)
178153
}
179154

155+
const BuildSidebarItem = ({
156+
build,
157+
active,
158+
}: {
159+
build: WorkspaceBuild
160+
active: boolean
161+
}) => {
162+
const theme = useTheme()
163+
164+
return (
165+
<Link
166+
key={build.id}
167+
to={`/@${build.workspace_owner_name}/${build.workspace_name}/builds/${build.build_number}`}
168+
>
169+
<SidebarItem active={active}>
170+
<Box sx={{ display: "flex", alignItems: "start", gap: 1 }}>
171+
<BuildIcon
172+
transition={build.transition}
173+
sx={{
174+
width: 16,
175+
height: 16,
176+
color: getDisplayWorkspaceBuildStatus(theme, build).color,
177+
}}
178+
/>
179+
<Box sx={{ overflow: "hidden" }}>
180+
<Box
181+
sx={{
182+
textTransform: "capitalize",
183+
color: (theme) => theme.palette.text.primary,
184+
textOverflow: "ellipsis",
185+
overflow: "hidden",
186+
whiteSpace: "nowrap",
187+
}}
188+
>
189+
{build.transition} by{" "}
190+
<strong>{getDisplayWorkspaceBuildInitiatedBy(build)}</strong>
191+
</Box>
192+
<Box
193+
sx={{
194+
fontSize: 12,
195+
color: (theme) => theme.palette.text.secondary,
196+
mt: 0.25,
197+
}}
198+
>
199+
{displayWorkspaceBuildDuration(build)}
200+
</Box>
201+
</Box>
202+
</Box>
203+
</SidebarItem>
204+
</Link>
205+
)
206+
}
207+
208+
const BuildSidebarItemSkeleton = () => {
209+
return (
210+
<SidebarItem>
211+
<Box sx={{ display: "flex", alignItems: "start", gap: 1 }}>
212+
<Skeleton variant="circular" width={16} height={16} />
213+
<Box>
214+
<Skeleton variant="text" width={94} height={16} />
215+
<Skeleton variant="text" width={60} height={14} sx={{ mt: 0.25 }} />
216+
</Box>
217+
</Box>
218+
</SidebarItem>
219+
)
220+
}
221+
180222
const useStyles = makeStyles((theme) => ({
181223
stats: {
182224
padding: 0,

0 commit comments

Comments
 (0)