synced/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2025-07-09 11:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Remove "Starts at Manual" label (#4179)

Browse Source 
Fixes #2798.
This commit is contained in:
Kyle Carberry
2022-10-03 12:03:11 -05:00
committed by GitHub
parent df2649ed2a
commit 4f6355506c
2 changed files with 71 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx
View File

@ -72,6 +72,22 @@ WorkspaceOffLong.args = {
}, },
} }
export const WorkspaceOn = Template.bind({})
WorkspaceOn.args = {
deadlineMinusEnabled: () => true,
deadlinePlusEnabled: () => true,
workspace: {
...Mocks.MockWorkspace,
latest_build: {
...Mocks.MockWorkspaceBuild,
transition: "start",
deadline: "2022-05-17T23:59:00.00Z",
},
ttl_ms: 2 * 365 * 24 * 60 * 60 * 1000, // 2 years
},
}
export const CannotEdit = Template.bind({}) export const CannotEdit = Template.bind({})
CannotEdit.args = { CannotEdit.args = {
workspace: { workspace: {

89
site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
View File

@ -31,6 +31,16 @@ export const shouldDisplayPlusMinus = (workspace: Workspace): boolean => {
return isWorkspaceOn(workspace) && Boolean(workspace.latest_build.deadline) return isWorkspaceOn(workspace) && Boolean(workspace.latest_build.deadline)
} }
export const shouldDisplayScheduleLabel = (workspace: Workspace): boolean => {
if (shouldDisplayPlusMinus(workspace)) {
return true
}
if (isWorkspaceOn(workspace)) {
return false
}
return Boolean(workspace.autostart_schedule)
}
export interface WorkspaceScheduleButtonProps { export interface WorkspaceScheduleButtonProps {
workspace: Workspace workspace: Workspace
onDeadlinePlus: () => void onDeadlinePlus: () => void
@ -60,33 +70,35 @@ export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = (
return ( return (
<span className={styles.wrapper}> <span className={styles.wrapper}>
<span className={styles.label}> {shouldDisplayScheduleLabel(workspace) && (
<WorkspaceScheduleLabel workspace={workspace} /> <span className={styles.label}>
{canUpdateWorkspace && shouldDisplayPlusMinus(workspace) && ( <WorkspaceScheduleLabel workspace={workspace} />
<span className={styles.actions}> {canUpdateWorkspace && shouldDisplayPlusMinus(workspace) && (
<IconButton <span className={styles.actions}>
className={styles.iconButton} <IconButton
size="small" className={styles.iconButton}
disabled={!deadlineMinusEnabled()} size="small"
onClick={onDeadlineMinus} disabled={!deadlineMinusEnabled()}
> onClick={onDeadlineMinus}
<Tooltip title={t("workspaceScheduleButton.editDeadlineMinus")}> >
<RemoveIcon /> <Tooltip title={t("workspaceScheduleButton.editDeadlineMinus")}>
</Tooltip> <RemoveIcon />
</IconButton> </Tooltip>
<IconButton </IconButton>
className={styles.iconButton} <IconButton
size="small" className={styles.iconButton}
disabled={!deadlinePlusEnabled()} size="small"
onClick={onDeadlinePlus} disabled={!deadlinePlusEnabled()}
> onClick={onDeadlinePlus}
<Tooltip title={t("workspaceScheduleButton.editDeadlinePlus")}> >
<AddIcon /> <Tooltip title={t("workspaceScheduleButton.editDeadlinePlus")}>
</Tooltip> <AddIcon />
</IconButton> </Tooltip>
</span> </IconButton>
)} </span>
</span> )}
</span>
)}
<> <>
<Button <Button
ref={anchorRef} ref={anchorRef}
@ -94,7 +106,9 @@ export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = (
onClick={() => { onClick={() => {
setIsOpen(true) setIsOpen(true)
}} }}
className={styles.scheduleButton} className={`${styles.scheduleButton} ${
shouldDisplayScheduleLabel(workspace) ? "label" : ""
}`}
> >
{t("workspaceScheduleButton.schedule")} {t("workspaceScheduleButton.schedule")}
</Button> </Button>
@ -124,8 +138,8 @@ const useStyles = makeStyles((theme) => ({
wrapper: { wrapper: {
display: "inline-flex", display: "inline-flex",
alignItems: "center", alignItems: "center",
border: `1px solid ${theme.palette.divider}`,
borderRadius: `${theme.shape.borderRadius}px`, borderRadius: `${theme.shape.borderRadius}px`,
border: `1px solid ${theme.palette.divider}`,
[theme.breakpoints.down("sm")]: { [theme.breakpoints.down("sm")]: {
flexDirection: "column", flexDirection: "column",
@ -153,15 +167,22 @@ const useStyles = makeStyles((theme) => ({
}, },
scheduleButton: { scheduleButton: {
border: "none", border: "none",
borderLeft: `1px solid ${theme.palette.divider}`, borderRadius: `${theme.shape.borderRadius}px`,
borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px`,
flexShrink: 0, flexShrink: 0,
"&.label": {
borderLeft: `1px solid ${theme.palette.divider}`,
borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px`,
},
[theme.breakpoints.down("sm")]: { [theme.breakpoints.down("sm")]: {
width: "100%", width: "100%",
borderLeft: 0,
borderTop: `1px solid ${theme.palette.divider}`, "&.label": {
borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`, borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
borderLeft: 0,
borderTop: `1px solid ${theme.palette.divider}`,
},
}, },
}, },
iconButton: { iconButton: {