Skip to content

Commit 419dc6b

Browse files
Kira-PilotKira-Pilot
authored
feat: flexbox updates on workspace page (#1963)
* feat: flexbox work on workspace page resolves 1910 * fixing cancel text * chromatic fixes * resolves #1953 no overflox text on smaller screens
1 parent 3fd4dcd commit 419dc6b

File tree

4 files changed

+60
-53
lines changed

4 files changed

+60
-53
lines changed

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
4141
<TableHeaderRow>
4242
<TableCell>{Language.resourceLabel}</TableCell>
4343
<TableCell className={styles.agentColumn}>{Language.agentLabel}</TableCell>
44-
<TableCell>{Language.statusLabel}</TableCell>
4544
<TableCell>{Language.accessLabel}</TableCell>
45+
<TableCell>{Language.statusLabel}</TableCell>
4646
</TableHeaderRow>
4747
</TableHead>
4848
<TableBody>
@@ -82,11 +82,6 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
8282
{agent.name}
8383
<span className={styles.operatingSystem}>{agent.operating_system}</span>
8484
</TableCell>
85-
<TableCell>
86-
<span style={{ color: getDisplayAgentStatus(theme, agent).color }}>
87-
{getDisplayAgentStatus(theme, agent).status}
88-
</span>
89-
</TableCell>
9085
<TableCell>
9186
{agent.status === "connected" && (
9287
<TerminalLink
@@ -97,6 +92,11 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
9792
/>
9893
)}
9994
</TableCell>
95+
<TableCell>
96+
<span style={{ color: getDisplayAgentStatus(theme, agent).color }}>
97+
{getDisplayAgentStatus(theme, agent).status}
98+
</span>
99+
</TableCell>
100100
</TableRow>
101101
)
102102
})

‎site/src/components/Workspace/Workspace.tsx

+33-29
Original file line numberDiff line numberDiff line change
@@ -42,43 +42,43 @@ export const Workspace: FC<WorkspaceProps> = ({
4242

4343
return (
4444
<div className={styles.root}>
45-
<div className={styles.header}>
46-
<div>
47-
<Typography variant="h4" className={styles.title}>
48-
{workspace.name}
49-
</Typography>
45+
<Stack direction="row" spacing={3}>
46+
<Stack direction="column" className={styles.firstColumnSpacer} spacing={3}>
47+
<div className={styles.header}>
48+
<div>
49+
<Typography variant="h4" className={styles.title}>
50+
{workspace.name}
51+
</Typography>
5052

51-
<Typography color="textSecondary" className={styles.subtitle}>
52-
{workspace.owner_name}
53-
</Typography>
54-
</div>
53+
<Typography color="textSecondary" className={styles.subtitle}>
54+
{workspace.owner_name}
55+
</Typography>
56+
</div>
57+
<WorkspaceActions
58+
workspace={workspace}
59+
handleStart={handleStart}
60+
handleStop={handleStop}
61+
handleDelete={handleDelete}
62+
handleUpdate={handleUpdate}
63+
handleCancel={handleCancel}
64+
/>
65+
</div>
66+
</Stack>
5567

56-
<div className={styles.headerActions}>
57-
<WorkspaceActions
58-
workspace={workspace}
59-
handleStart={handleStart}
60-
handleStop={handleStop}
61-
handleDelete={handleDelete}
62-
handleUpdate={handleUpdate}
63-
handleCancel={handleCancel}
64-
/>
65-
</div>
66-
</div>
68+
<Stack direction="column" className={styles.secondColumnSpacer} spacing={3}></Stack>
69+
</Stack>
6770

68-
<Stack direction="row" spacing={3} className={styles.layout}>
69-
<Stack spacing={3} className={styles.main}>
71+
<Stack direction="row" spacing={3}>
72+
<Stack direction="column" className={styles.firstColumnSpacer} spacing={3}>
7073
<WorkspaceScheduleBanner workspace={workspace} />
71-
7274
<WorkspaceStats workspace={workspace} />
73-
7475
<Resources resources={resources} getResourcesError={getResourcesError} workspace={workspace} />
75-
7676
<WorkspaceSection title="Timeline" contentsProps={{ className: styles.timelineContents }}>
7777
<BuildsTable builds={builds} className={styles.timelineTable} />
7878
</WorkspaceSection>
7979
</Stack>
8080

81-
<Stack spacing={3} className={styles.sidebar}>
81+
<Stack direction="column" className={styles.secondColumnSpacer} spacing={3}>
8282
<WorkspaceSchedule workspace={workspace} />
8383
</Stack>
8484
</Stack>
@@ -92,15 +92,19 @@ export const useStyles = makeStyles((theme) => {
9292
display: "flex",
9393
flexDirection: "column",
9494
},
95+
firstColumnSpacer: {
96+
flex: 2,
97+
},
98+
secondColumnSpacer: {
99+
flex: "0 0 300px",
100+
},
95101
header: {
96102
paddingTop: theme.spacing(5),
97103
paddingBottom: theme.spacing(5),
98104
fontFamily: MONOSPACE_FONT_FAMILY,
99105
display: "flex",
100106
alignItems: "center",
101-
},
102-
headerActions: {
103-
marginLeft: "auto",
107+
justifyContent: "space-between",
104108
},
105109
title: {
106110
fontWeight: 600,

‎site/src/components/WorkspaceActions/WorkspaceActions.tsx

+11-8
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ import { Stack } from "../Stack/Stack"
1212
import { WorkspaceActionButton } from "../WorkspaceActionButton/WorkspaceActionButton"
1313

1414
export const Language = {
15-
stop: "Stop workspace",
16-
stopping: "Stopping workspace",
17-
start: "Start workspace",
18-
starting: "Starting workspace",
19-
delete: "Delete workspace",
20-
deleting: "Deleting workspace",
15+
stop: "Stop",
16+
stopping: "Stopping",
17+
start: "Start",
18+
starting: "Starting",
19+
delete: "Delete",
20+
deleting: "Deleting",
2121
cancel: "Cancel action",
22-
update: "Update workspace",
22+
update: "Update",
2323
}
2424

2525
/**
@@ -92,7 +92,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
9292
)}
9393
{canCancelJobs(workspaceStatus) && (
9494
<WorkspaceActionButton
95-
className={styles.actionButton}
95+
className={styles.cancelActionButton}
9696
icon={<CancelIcon />}
9797
onClick={handleCancel}
9898
label={Language.cancel}
@@ -111,6 +111,9 @@ const useStyles = makeStyles((theme) => ({
111111
actionButton: {
112112
// Set fixed width for the action buttons so they will not change the size
113113
// during the transitions
114+
width: theme.spacing(16),
115+
},
116+
cancelActionButton: {
114117
width: theme.spacing(27),
115118
},
116119
}))

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

+10-10
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,6 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({ workspace }) => {
3939
</Link>
4040
</div>
4141
<div className={styles.statsDivider} />
42-
<div className={styles.statItem}>
43-
<span className={styles.statsLabel}>{Language.statusLabel}</span>
44-
<span className={styles.statsValue}>
45-
<span style={{ color: status.color }} role="status">
46-
{status.status}
47-
</span>
48-
</span>
49-
</div>
50-
<div className={styles.statsDivider} />
5142
<div className={styles.statItem}>
5243
<span className={styles.statsLabel}>{Language.versionLabel}</span>
5344
<span className={styles.statsValue}>
@@ -65,6 +56,15 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({ workspace }) => {
6556
{dayjs().to(dayjs(workspace.latest_build.created_at))}
6657
</span>
6758
</div>
59+
<div className={styles.statsDivider} />
60+
<div className={styles.statItem}>
61+
<span className={styles.statsLabel}>{Language.statusLabel}</span>
62+
<span className={styles.statsValue}>
63+
<span style={{ color: status.color }} role="status">
64+
{status.status}
65+
</span>
66+
</span>
67+
</div>
6868
</div>
6969
)
7070
}
@@ -83,7 +83,7 @@ const useStyles = makeStyles((theme) => ({
8383
},
8484

8585
statItem: {
86-
minWidth: theme.spacing(20),
86+
minWidth: "20%",
8787
padding: theme.spacing(2),
8888
paddingTop: theme.spacing(1.75),
8989
},

0 commit comments

Comments
 (0)