Skip to content

chore: use emotion for styling (pt. 9) #10474

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 28 commits into from
Nov 2, 2023
Merged

chore: use emotion for styling (pt. 9) #10474

Changes from 1 commit
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
4bd9a7e
emotion: `IconField`
aslilac Oct 31, 2023
6f820c1
emotion: `UserAutocomplete`
aslilac Oct 31, 2023
ffa39ef
emotion: `WorkspaceBuildLogs`
aslilac Oct 31, 2023
f6e0a64
emotion: `CreateTemplateForm`
aslilac Oct 31, 2023
1f61a4b
emotion: `SingleSignOnSection`
aslilac Oct 31, 2023
55ecf93
emotion: `WorkspaceActions`
aslilac Nov 1, 2023
f132aee
emotion: `LicensesSettingsPageView`
aslilac Nov 1, 2023
13db92d
emotion: `WorkspaceProxyPage`
aslilac Nov 1, 2023
0587497
emotion: `GroupsPageView`
aslilac Nov 1, 2023
0706d34
emotion: `useClickableTableRow`
aslilac Nov 1, 2023
21da106
🧹
aslilac Nov 1, 2023
3212c58
emotion: `CreateWorkspacePageView`
aslilac Nov 1, 2023
05df2f5
emotion: `WorkspaceStats`
aslilac Nov 1, 2023
90a6252
🧹
aslilac Nov 1, 2023
f61ad92
emotion: `StarterTemplatePageView`
aslilac Nov 1, 2023
44f9d42
emotion: `WorkspaceBuildProgress`
aslilac Nov 1, 2023
ec8e7b6
emotion: `WorkspaceBuildPageView`
aslilac Nov 1, 2023
0bf9449
emotion: `EditRolesButton`
aslilac Nov 1, 2023
ffc72af
emotion: `TerminalPage`
aslilac Nov 1, 2023
d05ea6c
emotion: `TemplatesPageView`
aslilac Nov 1, 2023
815ca99
emotion: `Sidebar`
aslilac Nov 1, 2023
a128475
🧹
aslilac Nov 1, 2023
67d0af4
emotion: `StarterTemplatesPageView`
aslilac Nov 1, 2023
49c5812
🧹
aslilac Nov 1, 2023
4323a07
emotion: `WorkspaceStatusBadge`
aslilac Nov 1, 2023
cca3565
🧹
aslilac Nov 1, 2023
7840dcb
Merge branch 'main' into emotional-damage-9
aslilac Nov 2, 2023
9af85c8
fix storybook!
aslilac Nov 2, 2023
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
Prev Previous commit
Next Next commit
emotion: WorkspaceStats
  • Loading branch information
@aslilac
aslilac committed Nov 1, 2023
commit 05df2f5cd6a77241953adbc8a2ed6c50b9a620dc
129 changes: 63 additions & 66 deletions site/src/pages/WorkspacePage/WorkspaceStats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { css } from "@emotion/css";
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import Link from "@mui/material/Link";
import { WorkspaceOutdatedTooltip } from "components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip";
import { FC } from "react";
import { type FC } from "react";
import { Link as RouterLink } from "react-router-dom";
import { createDayString } from "utils/createDayString";
import {
Expand All @@ -9,13 +11,12 @@ import {
isWorkspaceOn,
workspaceUpdatePolicy,
} from "utils/workspace";
import { Workspace } from "api/typesGenerated";
import type { Workspace } from "api/typesGenerated";
import { Stats, StatsItem } from "components/Stats/Stats";
import upperFirst from "lodash/upperFirst";
import { autostartDisplay, autostopDisplay } from "utils/schedule";
import IconButton from "@mui/material/IconButton";
import RemoveIcon from "@mui/icons-material/RemoveOutlined";
import { makeStyles } from "@mui/styles";
import AddIcon from "@mui/icons-material/AddOutlined";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
Expand Down Expand Up @@ -70,26 +71,36 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
onDeadlineMinus,
onDeadlinePlus,
}) => {
const theme = useTheme();
const initiatedBy = getDisplayWorkspaceBuildInitiatedBy(
workspace.latest_build,
);
const displayTemplateName = getDisplayWorkspaceTemplateName(workspace);
const styles = useStyles();
const deadlinePlusEnabled = maxDeadlineIncrease >= 1;
const deadlineMinusEnabled = maxDeadlineDecrease >= 1;
const templatePoliciesEnabled = useTemplatePoliciesEnabled();

const paperStyles = css`
padding: ${theme.spacing(3)};
max-width: ${theme.spacing(36)};
margin-top: ${theme.spacing(1)};
border-radius: 4px;
display: flex;
flex-direction: column;
gap: ${theme.spacing(1)};
`;

return (
<>
<Stats aria-label={Language.workspaceDetails} className={styles.stats}>
<Stats aria-label={Language.workspaceDetails} css={styles.stats}>
<StatsItem
className={styles.statsItem}
css={styles.statsItem}
label="Status"
value={<WorkspaceStatusText workspace={workspace} />}
/>
<DormantDeletionStat workspace={workspace} />
<StatsItem
className={styles.statsItem}
css={styles.statsItem}
label={Language.templateLabel}
value={
<Link
Expand All @@ -101,7 +112,7 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
}
/>
<StatsItem
className={styles.statsItem}
css={styles.statsItem}
label={Language.versionLabel}
value={
<>
Expand All @@ -124,7 +135,7 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
}
/>
<StatsItem
className={styles.statsItem}
css={styles.statsItem}
label={Language.lastBuiltLabel}
value={
<>
Expand All @@ -135,10 +146,10 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
/>
{shouldDisplayScheduleLabel(workspace) && (
<StatsItem
className={styles.statsItem}
css={styles.statsItem}
label={getScheduleLabel(workspace)}
value={
<span className={styles.scheduleValue}>
<span css={styles.scheduleValue}>
<Link
component={RouterLink}
to="settings/schedule"
Expand All @@ -149,21 +160,21 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
: autostartDisplay(workspace.autostart_schedule)}
</Link>
{canUpdateWorkspace && canEditDeadline(workspace) && (
<span className={styles.scheduleControls}>
<span css={styles.scheduleControls}>
<Popover>
<PopoverTrigger>
<IconButton
disabled={!deadlineMinusEnabled}
size="small"
title="Subtract hours from deadline"
className={styles.scheduleButton}
css={styles.scheduleButton}
>
<RemoveIcon />
</IconButton>
</PopoverTrigger>
<PopoverContent
id="schedule-sub"
classes={{ paper: styles.timePopoverPaper }}
classes={{ paper: paperStyles }}
horizontal="right"
>
<DecreaseTimeContent
Expand All @@ -178,14 +189,14 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
disabled={!deadlinePlusEnabled}
size="small"
title="Add hours to deadline"
className={styles.scheduleButton}
css={styles.scheduleButton}
>
<AddIcon />
</IconButton>
</PopoverTrigger>
<PopoverContent
id="schedule-add"
classes={{ paper: styles.timePopoverPaper }}
classes={{ paper: paperStyles }}
horizontal="right"
>
<AddTimeContent
Expand All @@ -202,7 +213,7 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
)}
{workspace.latest_build.daily_cost > 0 && (
<StatsItem
className={styles.statsItem}
css={styles.statsItem}
label={Language.costLabel}
value={`${workspace.latest_build.daily_cost} ${
quotaBudget ? `/ ${quotaBudget}` : ""
Expand All @@ -212,7 +223,7 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
{templatePoliciesEnabled && (
<Stack direction="row" spacing={0.5}>
<StatsItem
className={styles.statsItem}
css={styles.statsItem}
label={Language.updatePolicy}
value={upperFirst(
workspaceUpdatePolicy(workspace, canChangeVersions),
Expand All @@ -239,18 +250,17 @@ const AddTimeContent = (props: {
maxDeadlineIncrease: number;
onDeadlinePlus: (value: number) => void;
}) => {
const styles = useStyles();
const popover = usePopover();

return (
<>
<span className={styles.timePopoverTitle}>Add hours to deadline</span>
<span className={styles.timePopoverDescription}>
<span css={styles.timePopoverTitle}>Add hours to deadline</span>
<span css={styles.timePopoverDescription}>
Delay the shutdown of this workspace for a few more hours. This is only
applied once.
</span>
<form
className={styles.timePopoverForm}
css={styles.timePopoverForm}
onSubmit={(e) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
Expand All @@ -264,9 +274,9 @@ const AddTimeContent = (props: {
type="number"
size="small"
fullWidth
className={styles.timePopoverField}
css={styles.timePopoverField}
InputProps={{
className: styles.timePopoverFieldInput,
className: timePopoverFieldInputStyles,
}}
inputProps={{
min: 0,
Expand All @@ -276,7 +286,7 @@ const AddTimeContent = (props: {
}}
/>

<Button className={styles.timePopoverButton} type="submit">
<Button css={styles.timePopoverButton} type="submit">
Apply
</Button>
</form>
Expand All @@ -288,20 +298,17 @@ export const DecreaseTimeContent = (props: {
onDeadlineMinus: (hours: number) => void;
maxDeadlineDecrease: number;
}) => {
const styles = useStyles();
const popover = usePopover();

return (
<>
<span className={styles.timePopoverTitle}>
Subtract hours to deadline
</span>
<span className={styles.timePopoverDescription}>
<span css={styles.timePopoverTitle}>Subtract hours to deadline</span>
<span css={styles.timePopoverDescription}>
Anticipate the shutdown of this workspace for a few more hours. This is
only applied once.
</span>
<form
className={styles.timePopoverForm}
css={styles.timePopoverForm}
onSubmit={(e) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
Expand All @@ -315,9 +322,9 @@ export const DecreaseTimeContent = (props: {
type="number"
size="small"
fullWidth
className={styles.timePopoverField}
css={styles.timePopoverField}
InputProps={{
className: styles.timePopoverFieldInput,
className: timePopoverFieldInputStyles,
}}
inputProps={{
min: 0,
Expand All @@ -327,7 +334,7 @@ export const DecreaseTimeContent = (props: {
}}
/>

<Button className={styles.timePopoverButton} type="submit">
<Button css={styles.timePopoverButton} type="submit">
Apply
</Button>
</form>
Expand All @@ -353,8 +360,14 @@ const getScheduleLabel = (workspace: Workspace) => {
return isWorkspaceOn(workspace) ? "Stops at" : "Starts at";
};

const useStyles = makeStyles((theme) => ({
stats: {
const timePopoverFieldInputStyles = css`
font-size: 14px;
padding: 0px;
border-radius: 4px;
`;

const styles = {
stats: (theme) => ({
padding: 0,
border: 0,
gap: theme.spacing(6),
Expand All @@ -367,7 +380,7 @@ const useStyles = makeStyles((theme) => ({
alignItems: "flex-start",
gap: theme.spacing(1),
},
},
}),

statsItem: {
flexDirection: "column",
Expand All @@ -380,19 +393,19 @@ const useStyles = makeStyles((theme) => ({
},
},

scheduleValue: {
scheduleValue: (theme) => ({
display: "flex",
alignItems: "center",
gap: theme.spacing(1.5),
},
}),

scheduleControls: {
scheduleControls: (theme) => ({
display: "flex",
alignItems: "center",
gap: theme.spacing(0.5),
},
}),

scheduleButton: {
scheduleButton: (theme) => ({
border: `1px solid ${theme.palette.divider}`,
borderRadius: 4,
width: 20,
Expand All @@ -402,47 +415,31 @@ const useStyles = makeStyles((theme) => ({
width: theme.spacing(1.5),
height: theme.spacing(1.5),
},
},

timePopoverPaper: {
padding: theme.spacing(3),
maxWidth: theme.spacing(36),
marginTop: theme.spacing(1),
borderRadius: 4,
display: "flex",
flexDirection: "column",
gap: theme.spacing(1),
},
}),

timePopoverTitle: {
fontWeight: 600,
},

timePopoverDescription: {
timePopoverDescription: (theme) => ({
color: theme.palette.text.secondary,
},
}),

timePopoverForm: {
timePopoverForm: (theme) => ({
display: "flex",
alignItems: "center",
gap: theme.spacing(1),
padding: theme.spacing(1, 0),
},
}),

timePopoverField: {
margin: 0,
},

timePopoverFieldInput: {
fontSize: 14,
padding: theme.spacing(0),
borderRadius: 4,
},

timePopoverButton: {
timePopoverButton: (theme) => ({
borderRadius: 4,
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
flexShrink: 0,
},
}));
}),
} satisfies Record<string, Interpolation<Theme>>;