Skip to content

Commit f90f088

Browse files
ParkreinerParkreiner
committed
chore: move schedule controls to the right side of the screen
1 parent bcf9bc3 commit f90f088

File tree

3 files changed

+71
-59
lines changed

3 files changed

+71
-59
lines changed

‎site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,12 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
220220
(n) => n.severity === "warning",
221221
);
222222

223+
// We have to avoid rendering out a div at all if there is no content so
224+
// that we don't introduce additional gaps via the parent flex container
225+
if (infoNotifications.length === 0 && warningNotifications.length === 0) {
226+
return null;
227+
}
228+
223229
return (
224230
<div css={styles.notificationsGroup}>
225231
{infoNotifications.length > 0 && (

‎site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,15 @@ import {
3030
} from "utils/schedule";
3131
import { isWorkspaceOn } from "utils/workspace";
3232

33-
export interface WorkspaceScheduleContainerProps {
33+
interface WorkspaceScheduleContainerProps {
3434
children?: ReactNode;
3535
onClickIcon?: () => void;
3636
}
3737

38-
export const WorkspaceScheduleContainer: FC<
39-
WorkspaceScheduleContainerProps
40-
> = ({ children, onClickIcon }) => {
38+
const WorkspaceScheduleContainer: FC<WorkspaceScheduleContainerProps> = ({
39+
children,
40+
onClickIcon,
41+
}) => {
4142
const icon = (
4243
<TopbarIcon>
4344
<ScheduleOutlined aria-label="Schedule" />
@@ -49,6 +50,7 @@ export const WorkspaceScheduleContainer: FC<
4950
<Tooltip title="Schedule">
5051
{onClickIcon ? (
5152
<button
53+
type="button"
5254
data-testid="schedule-icon-button"
5355
onClick={onClickIcon}
5456
css={styles.scheduleIconButton}
@@ -294,6 +296,7 @@ const styles = {
294296
padding: 0,
295297
fontSize: "inherit",
296298
lineHeight: "inherit",
299+
cursor: "pointer",
297300
},
298301

299302
scheduleValue: {

‎site/src/pages/WorkspacePage/WorkspaceTopbar.tsx

Lines changed: 58 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,8 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
132132
rowGap: 8,
133133
flexWrap: "wrap",
134134
// 12px - It is needed to keep vertical spacing when the content is wrapped
135-
padding: "12px 0 12px 16px",
135+
padding: "12px",
136+
marginRight: "auto",
136137
}}
137138
>
138139
<TopbarData>
@@ -144,7 +145,9 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
144145
<Tooltip title="Owner">
145146
<span>{workspace.owner_name}</span>
146147
</Tooltip>
148+
147149
<TopbarDivider />
150+
148151
<Popover mode="hover">
149152
<PopoverTrigger>
150153
<span
@@ -200,16 +203,6 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
200203
</Popover>
201204
</TopbarData>
202205

203-
{!isImmutable && (
204-
<WorkspaceScheduleControls
205-
workspace={workspace}
206-
template={template}
207-
canUpdateSchedule={
208-
canUpdateWorkspace && template.allow_user_autostop
209-
}
210-
/>
211-
)}
212-
213206
{shouldDisplayDormantData && (
214207
<TopbarData>
215208
<TopbarIcon>
@@ -221,7 +214,13 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
221214
title="Schedule settings"
222215
css={{ color: "inherit" }}
223216
>
224-
Deletion on {new Date(workspace.deleting_at!).toLocaleString()}
217+
{workspace.deleting_at ? (
218+
<>
219+
Deletion on {new Date(workspace.deleting_at).toLocaleString()}
220+
</>
221+
) : (
222+
"Deleting soon"
223+
)}
225224
</Link>
226225
</TopbarData>
227226
)}
@@ -244,49 +243,53 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
244243
)}
245244
</div>
246245

247-
<div
248-
css={{
249-
marginLeft: "auto",
250-
display: "flex",
251-
alignItems: "center",
252-
gap: 12,
253-
}}
254-
>
255-
{!isImmutable && (
256-
<>
257-
<WorkspaceNotifications
258-
workspace={workspace}
259-
template={template}
260-
latestVersion={latestVersion}
261-
permissions={permissions}
262-
onRestartWorkspace={handleRestart}
263-
onUpdateWorkspace={handleUpdate}
264-
onActivateWorkspace={handleDormantActivate}
265-
/>
266-
<WorkspaceStatusBadge workspace={workspace} />
267-
<WorkspaceActions
268-
workspace={workspace}
269-
handleStart={handleStart}
270-
handleStop={handleStop}
271-
handleRestart={handleRestart}
272-
handleDelete={handleDelete}
273-
handleUpdate={handleUpdate}
274-
handleCancel={handleCancel}
275-
handleSettings={handleSettings}
276-
handleRetry={handleRetry}
277-
handleDebug={handleDebug}
278-
handleChangeVersion={handleChangeVersion}
279-
handleDormantActivate={handleDormantActivate}
280-
handleToggleFavorite={handleToggleFavorite}
281-
canDebug={canDebugMode}
282-
canChangeVersions={canChangeVersions}
283-
isUpdating={isUpdating}
284-
isRestarting={isRestarting}
285-
isOwner={isOwner}
286-
/>
287-
</>
288-
)}
289-
</div>
246+
{!isImmutable && (
247+
<div
248+
css={{
249+
display: "flex",
250+
alignItems: "center",
251+
gap: 8,
252+
}}
253+
>
254+
<WorkspaceScheduleControls
255+
workspace={workspace}
256+
template={template}
257+
canUpdateSchedule={
258+
canUpdateWorkspace && template.allow_user_autostop
259+
}
260+
/>
261+
<WorkspaceNotifications
262+
workspace={workspace}
263+
template={template}
264+
latestVersion={latestVersion}
265+
permissions={permissions}
266+
onRestartWorkspace={handleRestart}
267+
onUpdateWorkspace={handleUpdate}
268+
onActivateWorkspace={handleDormantActivate}
269+
/>
270+
<WorkspaceStatusBadge workspace={workspace} />
271+
<WorkspaceActions
272+
workspace={workspace}
273+
handleStart={handleStart}
274+
handleStop={handleStop}
275+
handleRestart={handleRestart}
276+
handleDelete={handleDelete}
277+
handleUpdate={handleUpdate}
278+
handleCancel={handleCancel}
279+
handleSettings={handleSettings}
280+
handleRetry={handleRetry}
281+
handleDebug={handleDebug}
282+
handleChangeVersion={handleChangeVersion}
283+
handleDormantActivate={handleDormantActivate}
284+
handleToggleFavorite={handleToggleFavorite}
285+
canDebug={canDebugMode}
286+
canChangeVersions={canChangeVersions}
287+
isUpdating={isUpdating}
288+
isRestarting={isRestarting}
289+
isOwner={isOwner}
290+
/>
291+
</div>
292+
)}
290293
</Topbar>
291294
);
292295
};

0 commit comments

Comments
 (0)