mirror of
https://github.com/coder/coder.git
synced 2025-07-09 11:45:56 +00:00
@ -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: {
|
||||||
|
@ -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: {
|
||||||
|
Reference in New Issue
Block a user