diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx index 4ba95a70dc3de..1e2bb06b33caa 100644 --- a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx +++ b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx @@ -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({}) CannotEdit.args = { workspace: { diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx index e264321d377a9..e3ef8211d3ea1 100644 --- a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx +++ b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx @@ -31,6 +31,16 @@ export const shouldDisplayPlusMinus = (workspace: Workspace): boolean => { 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 { workspace: Workspace onDeadlinePlus: () => void @@ -60,33 +70,35 @@ export const WorkspaceScheduleButton: React.FC = ( return ( - - - {canUpdateWorkspace && shouldDisplayPlusMinus(workspace) && ( - - - - - - - - - - - - - )} - + {shouldDisplayScheduleLabel(workspace) && ( + + + {canUpdateWorkspace && shouldDisplayPlusMinus(workspace) && ( + + + + + + + + + + + + + )} + + )} <> @@ -124,8 +138,8 @@ const useStyles = makeStyles((theme) => ({ wrapper: { display: "inline-flex", alignItems: "center", - border: `1px solid ${theme.palette.divider}`, borderRadius: `${theme.shape.borderRadius}px`, + border: `1px solid ${theme.palette.divider}`, [theme.breakpoints.down("sm")]: { flexDirection: "column", @@ -153,15 +167,22 @@ const useStyles = makeStyles((theme) => ({ }, scheduleButton: { border: "none", - borderLeft: `1px solid ${theme.palette.divider}`, - borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px`, + borderRadius: `${theme.shape.borderRadius}px`, flexShrink: 0, + "&.label": { + borderLeft: `1px solid ${theme.palette.divider}`, + borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px`, + }, + [theme.breakpoints.down("sm")]: { width: "100%", - borderLeft: 0, - borderTop: `1px solid ${theme.palette.divider}`, - borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`, + + "&.label": { + borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`, + borderLeft: 0, + borderTop: `1px solid ${theme.palette.divider}`, + }, }, }, iconButton: {