Skip to content

feat: flexbox updates on workspace page #1963

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jun 2, 2022
Merged

feat: flexbox updates on workspace page #1963

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
33e5c08
feat: flexbox work on workspace page
Kira-Pilot Jun 1, 2022
fd470ad
resolving merge conflicts
Kira-Pilot Jun 1, 2022
21e539d
fixing cancel text
Kira-Pilot Jun 1, 2022
43dbc3c
chromatic fixes
Kira-Pilot Jun 1, 2022
2bf40fe
Merge remote-tracking branch 'origin/main' into reorg-status-card-for…
Kira-Pilot Jun 1, 2022
b80db0b
Merge remote-tracking branch 'origin/main' into reorg-status-card-for…
Kira-Pilot Jun 2, 2022
37d6e6a
resolves #1953
Kira-Pilot Jun 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions site/src/components/Resources/Resources.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
<TableHeaderRow>
<TableCell>{Language.resourceLabel}</TableCell>
<TableCell className={styles.agentColumn}>{Language.agentLabel}</TableCell>
<TableCell>{Language.statusLabel}</TableCell>
<TableCell>{Language.accessLabel}</TableCell>
<TableCell>{Language.statusLabel}</TableCell>
</TableHeaderRow>
</TableHead>
<TableBody>
Expand Down Expand Up @@ -82,11 +82,6 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
{agent.name}
<span className={styles.operatingSystem}>{agent.operating_system}</span>
</TableCell>
<TableCell>
<span style={{ color: getDisplayAgentStatus(theme, agent).color }}>
{getDisplayAgentStatus(theme, agent).status}
</span>
</TableCell>
<TableCell>
{agent.status === "connected" && (
<TerminalLink
Expand All @@ -97,6 +92,11 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
/>
)}
</TableCell>
<TableCell>
<span style={{ color: getDisplayAgentStatus(theme, agent).color }}>
{getDisplayAgentStatus(theme, agent).status}
</span>
</TableCell>
</TableRow>
)
})
Expand Down
62 changes: 33 additions & 29 deletions site/src/components/Workspace/Workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,43 +42,43 @@ export const Workspace: FC<WorkspaceProps> = ({

return (
<div className={styles.root}>
<div className={styles.header}>
<div>
<Typography variant="h4" className={styles.title}>
{workspace.name}
</Typography>
<Stack direction="row" spacing={3}>
<Stack direction="column" className={styles.firstColumnSpacer} spacing={3}>
<div className={styles.header}>
<div>
<Typography variant="h4" className={styles.title}>
{workspace.name}
</Typography>

<Typography color="textSecondary" className={styles.subtitle}>
{workspace.owner_name}
</Typography>
</div>
<Typography color="textSecondary" className={styles.subtitle}>
{workspace.owner_name}
</Typography>
</div>
<WorkspaceActions
workspace={workspace}
handleStart={handleStart}
handleStop={handleStop}
handleDelete={handleDelete}
handleUpdate={handleUpdate}
handleCancel={handleCancel}
/>
</div>
</Stack>

<div className={styles.headerActions}>
<WorkspaceActions
workspace={workspace}
handleStart={handleStart}
handleStop={handleStop}
handleDelete={handleDelete}
handleUpdate={handleUpdate}
handleCancel={handleCancel}
/>
</div>
</div>
<Stack direction="column" className={styles.secondColumnSpacer} spacing={3}></Stack>
</Stack>

<Stack direction="row" spacing={3} className={styles.layout}>
<Stack spacing={3} className={styles.main}>
<Stack direction="row" spacing={3}>
<Stack direction="column" className={styles.firstColumnSpacer} spacing={3}>
<WorkspaceScheduleBanner workspace={workspace} />

<WorkspaceStats workspace={workspace} />

<Resources resources={resources} getResourcesError={getResourcesError} workspace={workspace} />

<WorkspaceSection title="Timeline" contentsProps={{ className: styles.timelineContents }}>
<BuildsTable builds={builds} className={styles.timelineTable} />
</WorkspaceSection>
</Stack>

<Stack spacing={3} className={styles.sidebar}>
<Stack direction="column" className={styles.secondColumnSpacer} spacing={3}>
<WorkspaceSchedule workspace={workspace} />
</Stack>
</Stack>
Expand All @@ -92,15 +92,19 @@ export const useStyles = makeStyles((theme) => {
display: "flex",
flexDirection: "column",
},
firstColumnSpacer: {
flex: 2,
},
secondColumnSpacer: {
flex: "0 0 300px",
},
header: {
paddingTop: theme.spacing(5),
paddingBottom: theme.spacing(5),
fontFamily: MONOSPACE_FONT_FAMILY,
display: "flex",
alignItems: "center",
},
headerActions: {
marginLeft: "auto",
justifyContent: "space-between",
},
title: {
fontWeight: 600,
Expand Down
19 changes: 11 additions & 8 deletions site/src/components/WorkspaceActions/WorkspaceActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ import { Stack } from "../Stack/Stack"
import { WorkspaceActionButton } from "../WorkspaceActionButton/WorkspaceActionButton"

export const Language = {
stop: "Stop workspace",
stopping: "Stopping workspace",
start: "Start workspace",
starting: "Starting workspace",
delete: "Delete workspace",
deleting: "Deleting workspace",
stop: "Stop",
stopping: "Stopping",
start: "Start",
starting: "Starting",
delete: "Delete",
deleting: "Deleting",
cancel: "Cancel action",
update: "Update workspace",
update: "Update",
}

/**
Expand Down Expand Up @@ -92,7 +92,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
)}
{canCancelJobs(workspaceStatus) && (
<WorkspaceActionButton
className={styles.actionButton}
className={styles.cancelActionButton}
icon={<CancelIcon />}
onClick={handleCancel}
label={Language.cancel}
Expand All @@ -111,6 +111,9 @@ const useStyles = makeStyles((theme) => ({
actionButton: {
// Set fixed width for the action buttons so they will not change the size
// during the transitions
width: theme.spacing(16),
},
cancelActionButton: {
width: theme.spacing(27),
},
}))
20 changes: 10 additions & 10 deletions site/src/components/WorkspaceStats/WorkspaceStats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,6 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({ workspace }) => {
</Link>
</div>
<div className={styles.statsDivider} />
<div className={styles.statItem}>
<span className={styles.statsLabel}>{Language.statusLabel}</span>
<span className={styles.statsValue}>
<span style={{ color: status.color }} role="status">
{status.status}
</span>
</span>
</div>
<div className={styles.statsDivider} />
<div className={styles.statItem}>
<span className={styles.statsLabel}>{Language.versionLabel}</span>
<span className={styles.statsValue}>
Expand All @@ -65,6 +56,15 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({ workspace }) => {
{dayjs().to(dayjs(workspace.latest_build.created_at))}
</span>
</div>
<div className={styles.statsDivider} />
<div className={styles.statItem}>
<span className={styles.statsLabel}>{Language.statusLabel}</span>
<span className={styles.statsValue}>
<span style={{ color: status.color }} role="status">
{status.status}
</span>
</span>
</div>
</div>
)
}
Expand All @@ -83,7 +83,7 @@ const useStyles = makeStyles((theme) => ({
},

statItem: {
minWidth: theme.spacing(20),
minWidth: "20%",
padding: theme.spacing(2),
paddingTop: theme.spacing(1.75),
},
Expand Down