Skip to content

Commit e371716

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor(site): add minor workspace improvements (#11822)
1 parent 73a6899 commit e371716

File tree

8 files changed

+101
-102
lines changed

8 files changed

+101
-102
lines changed

‎site/src/@types/mui.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import type { PaletteColor, PaletteColorOptions } from "@mui/material/styles";
33
declare module "@mui/material/styles" {
44
interface Palette {
55
neutral: PaletteColor;
6+
dots: string;
67
}
78

89
interface PaletteOptions {
910
neutral?: PaletteColorOptions;
11+
dots?: string;
1012
}
1113
}
1214

‎site/src/components/Resources/AgentMetadata.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ const styles = {
248248
},
249249

250250
metadataValueSuccess: (theme) => ({
251-
color: theme.experimental.roles.success.outline,
251+
color: theme.experimental.roles.success.fill,
252252
}),
253253

254254
metadataValueError: (theme) => ({

‎site/src/components/Resources/AgentRow.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -509,6 +509,7 @@ const styles = {
509509
border: `1px solid ${theme.palette.text.secondary}`,
510510
backgroundColor: theme.palette.background.default,
511511
borderRadius: 8,
512+
boxShadow: theme.shadows[3],
512513
}),
513514

514515
"agentRow-connected": (theme) => ({
@@ -562,14 +563,13 @@ const styles = {
562563
}),
563564

564565
header: (theme) => ({
565-
padding: "12px 24px",
566+
padding: "16px 16px 0 32px",
566567
display: "flex",
567568
gap: 24,
568569
alignItems: "center",
569570
justifyContent: "space-between",
570571
flexWrap: "wrap",
571572
lineHeight: "1.5",
572-
borderBottom: `1px solid ${theme.palette.divider}`,
573573

574574
[theme.breakpoints.down("md")]: {
575575
gap: 16,
@@ -581,7 +581,7 @@ const styles = {
581581
alignItems: "center",
582582
gap: 24,
583583
color: theme.palette.text.secondary,
584-
fontSize: 13,
584+
fontSize: 14,
585585
}),
586586

587587
agentNameAndInfo: (theme) => ({
@@ -596,7 +596,7 @@ const styles = {
596596
}),
597597

598598
content: {
599-
padding: "32px 24px",
599+
padding: 32,
600600
display: "flex",
601601
flexDirection: "column",
602602
gap: 32,
@@ -637,7 +637,7 @@ const styles = {
637637
agentNameAndStatus: (theme) => ({
638638
display: "flex",
639639
alignItems: "center",
640-
gap: 12,
640+
gap: 16,
641641

642642
[theme.breakpoints.down("md")]: {
643643
width: "100%",
@@ -652,7 +652,7 @@ const styles = {
652652
fontWeight: 600,
653653
flexShrink: 0,
654654
width: "fit-content",
655-
fontSize: 14,
655+
fontSize: 16,
656656
color: theme.palette.text.primary,
657657

658658
[theme.breakpoints.down("md")]: {
@@ -682,7 +682,7 @@ const styles = {
682682
background: "transparent",
683683
border: 0,
684684
fontFamily: "inherit",
685-
padding: "12px 24px",
685+
padding: "16px 32px",
686686
color: theme.palette.text.secondary,
687687
cursor: "pointer",
688688
display: "flex",

‎site/src/pages/WorkspacePage/ResourceMetadata.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const styles = {
6868
rowGap: 24,
6969
marginBottom: 24,
7070
fontSize: 14,
71-
background: `linear-gradient(180deg, ${theme.palette.background.default} 0%, rgba(0, 0, 0, 0) 100%)`,
71+
background: `linear-gradient(180deg, ${theme.palette.background.default} 25%, rgba(0, 0, 0, 0) 100%)`,
7272
}),
7373

7474
item: () => ({

‎site/src/pages/WorkspacePage/Workspace.tsx

+87-93
Original file line numberDiff line numberDiff line change
@@ -182,101 +182,97 @@ export const Workspace: FC<WorkspaceProps> = ({
182182
<HistorySidebar workspace={workspace} />
183183
)}
184184

185-
<div css={styles.content}>
186-
<div css={styles.dotBackground}>
187-
{selectedResource && (
188-
<ResourceMetadata
189-
resource={selectedResource}
190-
css={{ margin: "-48px 0 24px -48px" }}
185+
<div css={[styles.content, styles.dotsBackground]}>
186+
{selectedResource && (
187+
<ResourceMetadata
188+
resource={selectedResource}
189+
css={{ margin: "-32px -32px 0 -32px", marginBottom: 24 }}
190+
/>
191+
)}
192+
<div
193+
css={{
194+
display: "flex",
195+
flexDirection: "column",
196+
gap: 24,
197+
maxWidth: 24 * 50,
198+
margin: "auto",
199+
}}
200+
>
201+
{workspace.latest_build.status === "deleted" && (
202+
<WorkspaceDeletedBanner
203+
handleClick={() => navigate(`/templates`)}
191204
/>
192205
)}
193-
<div
194-
css={{
195-
display: "flex",
196-
flexDirection: "column",
197-
gap: 24,
198-
maxWidth: 24 * 50,
199-
margin: "auto",
200-
}}
201-
>
202-
{workspace.latest_build.status === "deleted" && (
203-
<WorkspaceDeletedBanner
204-
handleClick={() => navigate(`/templates`)}
205-
/>
206-
)}
207206

208-
{workspace.latest_build.job.error && (
209-
<Alert
210-
severity="error"
211-
actions={
212-
<Button
213-
onClick={
214-
canRetryDebugMode
215-
? handleBuildRetryDebug
216-
: handleBuildRetry
217-
}
218-
variant="text"
219-
size="small"
220-
>
221-
Retry{canRetryDebugMode && " in debug mode"}
222-
</Button>
223-
}
224-
>
225-
<AlertTitle>Workspace build failed</AlertTitle>
226-
<AlertDetail>{workspace.latest_build.job.error}</AlertDetail>
227-
</Alert>
228-
)}
207+
{workspace.latest_build.job.error && (
208+
<Alert
209+
severity="error"
210+
actions={
211+
<Button
212+
onClick={
213+
canRetryDebugMode ? handleBuildRetryDebug : handleBuildRetry
214+
}
215+
variant="text"
216+
size="small"
217+
>
218+
Retry{canRetryDebugMode && " in debug mode"}
219+
</Button>
220+
}
221+
>
222+
<AlertTitle>Workspace build failed</AlertTitle>
223+
<AlertDetail>{workspace.latest_build.job.error}</AlertDetail>
224+
</Alert>
225+
)}
229226

230-
{transitionStats !== undefined && (
231-
<WorkspaceBuildProgress
232-
workspace={workspace}
233-
transitionStats={transitionStats}
234-
/>
235-
)}
227+
{transitionStats !== undefined && (
228+
<WorkspaceBuildProgress
229+
workspace={workspace}
230+
transitionStats={transitionStats}
231+
/>
232+
)}
236233

237-
{buildLogs}
234+
{buildLogs}
238235

239-
{selectedResource && (
240-
<section
241-
css={{ display: "flex", flexDirection: "column", gap: 24 }}
242-
>
243-
{selectedResource.agents?.map((agent) => (
244-
<AgentRow
245-
key={agent.id}
246-
agent={agent}
247-
workspace={workspace}
248-
sshPrefix={sshPrefix}
249-
showApps={permissions.updateWorkspace}
250-
showBuiltinApps={permissions.updateWorkspace}
251-
hideSSHButton={hideSSHButton}
252-
hideVSCodeDesktopButton={hideVSCodeDesktopButton}
253-
serverVersion={buildInfo?.version || ""}
254-
serverAPIVersion={buildInfo?.agent_api_version || ""}
255-
onUpdateAgent={handleUpdate} // On updating the workspace the agent version is also updated
256-
/>
257-
))}
236+
{selectedResource && (
237+
<section
238+
css={{ display: "flex", flexDirection: "column", gap: 24 }}
239+
>
240+
{selectedResource.agents?.map((agent) => (
241+
<AgentRow
242+
key={agent.id}
243+
agent={agent}
244+
workspace={workspace}
245+
sshPrefix={sshPrefix}
246+
showApps={permissions.updateWorkspace}
247+
showBuiltinApps={permissions.updateWorkspace}
248+
hideSSHButton={hideSSHButton}
249+
hideVSCodeDesktopButton={hideVSCodeDesktopButton}
250+
serverVersion={buildInfo?.version || ""}
251+
serverAPIVersion={buildInfo?.agent_api_version || ""}
252+
onUpdateAgent={handleUpdate} // On updating the workspace the agent version is also updated
253+
/>
254+
))}
258255

259-
{(!selectedResource.agents ||
260-
selectedResource.agents?.length === 0) && (
261-
<div
262-
css={{
263-
display: "flex",
264-
justifyContent: "center",
265-
alignItems: "center",
266-
width: "100%",
267-
height: "100%",
268-
}}
269-
>
270-
<div>
271-
<h4 css={{ fontSize: 16, fontWeight: 500 }}>
272-
No agents are currently assigned to this resource.
273-
</h4>
274-
</div>
256+
{(!selectedResource.agents ||
257+
selectedResource.agents?.length === 0) && (
258+
<div
259+
css={{
260+
display: "flex",
261+
justifyContent: "center",
262+
alignItems: "center",
263+
width: "100%",
264+
height: "100%",
265+
}}
266+
>
267+
<div>
268+
<h4 css={{ fontSize: 16, fontWeight: 500 }}>
269+
No agents are currently assigned to this resource.
270+
</h4>
275271
</div>
276-
)}
277-
</section>
278-
)}
279-
</div>
272+
</div>
273+
)}
274+
</section>
275+
)}
280276
</div>
281277
</div>
282278
</div>
@@ -289,26 +285,24 @@ const countAgents = (resource: TypesGen.WorkspaceResource) => {
289285

290286
const styles = {
291287
content: {
292-
padding: 24,
288+
padding: 32,
293289
gridArea: "content",
294290
overflowY: "auto",
295291
position: "relative",
296292
},
297293

298-
dotBackground: (theme) => ({
299-
minHeight: "100%",
300-
padding: 23,
294+
dotsBackground: (theme) => ({
301295
"--d": "1px",
302296
background: `
303297
radial-gradient(
304298
circle at
305299
var(--d)
306300
var(--d),
307301
308-
${theme.palette.text.secondary} calc(var(--d) - 1px),
302+
${theme.palette.dots} calc(var(--d) - 1px),
309303
${theme.palette.background.default} var(--d)
310304
)
311-
0 0 / 24px 24px
305+
-2px -2px / 16px 16px
312306
`,
313307
}),
314308

‎site/src/theme/dark/mui.ts

+1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const muiTheme = createTheme({
5454
neutral: {
5555
main: tw.zinc[50],
5656
},
57+
dots: tw.zinc[500],
5758
},
5859
typography: {
5960
fontFamily: BODY_FONT_FAMILY,

‎site/src/theme/darkBlue/mui.ts

+1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const muiTheme = createTheme({
5454
neutral: {
5555
main: tw.gray[50],
5656
},
57+
dots: tw.gray[500],
5758
},
5859
typography: {
5960
fontFamily: BODY_FONT_FAMILY,

‎site/src/theme/light/mui.ts

+1
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ const muiTheme = createTheme({
5656
neutral: {
5757
main: tw.zinc[950],
5858
},
59+
dots: tw.zinc[400],
5960
},
6061
typography: {
6162
fontFamily: BODY_FONT_FAMILY,

0 commit comments

Comments
 (0)