Skip to content

Commit c7d86ba

Browse files
BrunoQuaresmaBrunoQuaresma
committed
refactor: Move schedule to the header
1 parent e149534 commit c7d86ba

File tree

4 files changed

+283
-110
lines changed

4 files changed

+283
-110
lines changed

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

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import { Resources } from "../Resources/Resources"
99
import { Stack } from "../Stack/Stack"
1010
import { WorkspaceActions } from "../WorkspaceActions/WorkspaceActions"
1111
import { WorkspaceDeletedBanner } from "../WorkspaceDeletedBanner/WorkspaceDeletedBanner"
12-
import { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
1312
import { WorkspaceScheduleBanner } from "../WorkspaceScheduleBanner/WorkspaceScheduleBanner"
13+
import { WorkspaceScheduleButton } from "../WorkspaceScheduleButton/WorkspaceScheduleButton"
1414
import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
1515
import { WorkspaceStats } from "../WorkspaceStats/WorkspaceStats"
1616

@@ -58,16 +58,22 @@ export const Workspace: FC<WorkspaceProps> = ({
5858
return (
5959
<Margins>
6060
<PageHeader
61-
className={styles.header}
6261
actions={
63-
<WorkspaceActions
64-
workspace={workspace}
65-
handleStart={handleStart}
66-
handleStop={handleStop}
67-
handleDelete={handleDelete}
68-
handleUpdate={handleUpdate}
69-
handleCancel={handleCancel}
70-
/>
62+
<Stack direction="row" spacing={1}>
63+
<WorkspaceScheduleButton
64+
workspace={workspace}
65+
onDeadlineMinus={scheduleProps.onDeadlineMinus}
66+
onDeadlinePlus={scheduleProps.onDeadlinePlus}
67+
/>
68+
<WorkspaceActions
69+
workspace={workspace}
70+
handleStart={handleStart}
71+
handleStop={handleStop}
72+
handleDelete={handleDelete}
73+
handleUpdate={handleUpdate}
74+
handleCancel={handleCancel}
75+
/>
76+
</Stack>
7177
}
7278
>
7379
<PageHeaderTitle>{workspace.name}</PageHeaderTitle>
@@ -102,14 +108,6 @@ export const Workspace: FC<WorkspaceProps> = ({
102108
<BuildsTable builds={builds} className={styles.timelineTable} />
103109
</WorkspaceSection>
104110
</Stack>
105-
106-
<Stack direction="column" className={styles.secondColumnSpacer} spacing={3}>
107-
<WorkspaceSchedule
108-
workspace={workspace}
109-
onDeadlineMinus={scheduleProps.onDeadlineMinus}
110-
onDeadlinePlus={scheduleProps.onDeadlinePlus}
111-
/>
112-
</Stack>
113111
</Stack>
114112
</Margins>
115113
)
@@ -125,10 +123,6 @@ export const useStyles = makeStyles((theme) => {
125123
secondColumnSpacer: {
126124
flex: `0 0 ${spacerWidth}px`,
127125
},
128-
header: {
129-
// 100% - (the size of sidebar + the space between both )
130-
maxWidth: `calc(100% - (${spacerWidth}px + ${theme.spacing(3)}px))`,
131-
},
132126
layout: {
133127
alignItems: "flex-start",
134128
},

‎site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx

Lines changed: 12 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
1-
import IconButton from "@material-ui/core/IconButton"
21
import Link from "@material-ui/core/Link"
32
import { makeStyles } from "@material-ui/core/styles"
4-
import Tooltip from "@material-ui/core/Tooltip"
5-
import Typography from "@material-ui/core/Typography"
6-
import AddBoxIcon from "@material-ui/icons/AddBox"
7-
import IndeterminateCheckBoxIcon from "@material-ui/icons/IndeterminateCheckBox"
8-
import ScheduleIcon from "@material-ui/icons/Schedule"
93
import cronstrue from "cronstrue"
104
import dayjs from "dayjs"
115
import advancedFormat from "dayjs/plugin/advancedFormat"
@@ -37,8 +31,8 @@ export const Language = {
3731
return "Manual"
3832
}
3933
},
40-
autoStartLabel: "START",
41-
autoStopLabel: "SHUTDOWN",
34+
autoStartLabel: "Starts at",
35+
autoStopLabel: "Stops at",
4236
autoStopDisplay: (workspace: Workspace): string => {
4337
const deadline = dayjs(workspace.latest_build.deadline).utc()
4438
// a manual shutdown has a deadline of '"0001-01-01T00:00:00Z"'
@@ -70,80 +64,26 @@ export const Language = {
7064
}
7165
},
7266
editScheduleLink: "Edit schedule",
73-
editDeadlineMinus: "Subtract one hour",
74-
editDeadlinePlus: "Add one hour",
75-
scheduleHeader: (workspace: Workspace): string => {
76-
const tz = workspace.autostart_schedule
77-
? extractTimezone(workspace.autostart_schedule)
78-
: dayjs.tz.guess()
79-
return `Schedule (${tz})`
80-
},
67+
timezoneLabel: "Timezone",
8168
}
8269

8370
export interface WorkspaceScheduleProps {
84-
now?: dayjs.Dayjs
8571
workspace: Workspace
86-
onDeadlinePlus: () => void
87-
onDeadlineMinus: () => void
88-
}
89-
90-
export const shouldDisplayPlusMinus = (workspace: Workspace): boolean => {
91-
if (!isWorkspaceOn(workspace)) {
92-
return false
93-
}
94-
const deadline = dayjs(workspace.latest_build.deadline).utc()
95-
return deadline.year() > 1
96-
}
97-
98-
export const deadlineMinusDisabled = (workspace: Workspace, now: dayjs.Dayjs): boolean => {
99-
const delta = dayjs(workspace.latest_build.deadline).diff(now)
100-
return delta <= 30 * 60 * 1000 // 30 minutes
101-
}
102-
103-
export const deadlinePlusDisabled = (workspace: Workspace, now: dayjs.Dayjs): boolean => {
104-
const delta = dayjs(workspace.latest_build.deadline).diff(now)
105-
return delta >= 24 * 60 * 60 * 1000 // 24 hours
10672
}
10773

108-
export const WorkspaceSchedule: FC<WorkspaceScheduleProps> = ({
109-
now,
110-
workspace,
111-
onDeadlineMinus,
112-
onDeadlinePlus,
113-
}) => {
74+
export const WorkspaceSchedule: FC<WorkspaceScheduleProps> = ({ workspace }) => {
11475
const styles = useStyles()
115-
const editDeadlineButtons = shouldDisplayPlusMinus(workspace) ? (
116-
<Stack direction="row" spacing={0}>
117-
<IconButton
118-
size="small"
119-
disabled={deadlineMinusDisabled(workspace, now ?? dayjs())}
120-
className={styles.editDeadline}
121-
onClick={onDeadlineMinus}
122-
>
123-
<Tooltip title={Language.editDeadlineMinus}>
124-
<IndeterminateCheckBoxIcon />
125-
</Tooltip>
126-
</IconButton>
127-
<IconButton
128-
size="small"
129-
disabled={deadlinePlusDisabled(workspace, now ?? dayjs())}
130-
className={styles.editDeadline}
131-
onClick={onDeadlinePlus}
132-
>
133-
<Tooltip title={Language.editDeadlinePlus}>
134-
<AddBoxIcon />
135-
</Tooltip>
136-
</IconButton>
137-
</Stack>
138-
) : null
76+
const timezone = workspace.autostart_schedule
77+
? extractTimezone(workspace.autostart_schedule)
78+
: dayjs.tz.guess()
13979

14080
return (
14181
<div className={styles.schedule}>
14282
<Stack spacing={2}>
143-
<Typography variant="body1" className={styles.title}>
144-
<ScheduleIcon className={styles.scheduleIcon} />
145-
{Language.scheduleHeader(workspace)}
146-
</Typography>
83+
<div>
84+
<span className={styles.scheduleLabel}>{Language.timezoneLabel}</span>
85+
<span className={styles.scheduleValue}>{timezone}</span>
86+
</div>
14787
<div>
14888
<span className={styles.scheduleLabel}>{Language.autoStartLabel}</span>
14989
<span className={[styles.scheduleValue, "chromatic-ignore"].join(" ")}>
@@ -156,7 +96,6 @@ export const WorkspaceSchedule: FC<WorkspaceScheduleProps> = ({
15696
<span className={[styles.scheduleValue, "chromatic-ignore"].join(" ")}>
15797
{Language.autoStopDisplay(workspace)}
15898
</span>
159-
{editDeadlineButtons}
16099
</Stack>
161100
</div>
162101
<div>
@@ -177,18 +116,6 @@ const useStyles = makeStyles((theme) => ({
177116
schedule: {
178117
fontFamily: MONOSPACE_FONT_FAMILY,
179118
},
180-
title: {
181-
fontWeight: 600,
182-
183-
fontFamily: "inherit",
184-
display: "flex",
185-
alignItems: "center",
186-
},
187-
scheduleIcon: {
188-
width: 16,
189-
height: 16,
190-
marginRight: theme.spacing(1),
191-
},
192119
scheduleLabel: {
193120
fontSize: 12,
194121
textTransform: "uppercase",
@@ -198,14 +125,11 @@ const useStyles = makeStyles((theme) => ({
198125
},
199126
scheduleValue: {
200127
fontSize: 14,
201-
marginTop: theme.spacing(0.75),
128+
marginTop: theme.spacing(0.5),
202129
display: "inline-block",
203130
color: theme.palette.text.secondary,
204131
},
205132
scheduleAction: {
206133
cursor: "pointer",
207134
},
208-
editDeadline: {
209-
color: theme.palette.text.secondary,
210-
},
211135
}))

0 commit comments

Comments
 (0)