Skip to content

Commit 1fb8c4e

Browse files
aslilacaslilac
committed
🌭
1 parent fb29af6 commit 1fb8c4e

File tree

13 files changed

+116
-115
lines changed

13 files changed

+116
-115
lines changed

‎site/src/components/Alert/Alert.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const Alert: FC<AlertProps> = ({
2121
children,
2222
actions,
2323
dismissible,
24-
severity,
24+
severity = "info",
2525
onDismiss,
2626
...alertProps
2727
}) => {

‎site/src/components/BuildAvatar/BuildAvatar.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,7 @@ export const BuildAvatar: FC<BuildAvatarProps> = ({ build, size }) => {
1717
const theme = useTheme();
1818
const { status, type } = getDisplayWorkspaceBuildStatus(theme, build);
1919
const badgeType = useClassName(
20-
(css, theme) => css`
21-
background-color: ${theme.palette[type].light};
22-
`,
20+
(css, theme) => css({ backgroundColor: theme.palette[type].light }),
2321
[type],
2422
);
2523

‎site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
1-
import {
2-
type FC,
3-
type FormEvent,
4-
type PropsWithChildren,
5-
useId,
6-
useState,
7-
} from "react";
8-
9-
import { useTheme } from "@emotion/react";
101
import TextField from "@mui/material/TextField";
2+
import { type Interpolation, type Theme } from "@emotion/react";
3+
import { type FC, type FormEvent, useId, useState } from "react";
4+
import { Stack } from "../../Stack/Stack";
115
import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog";
126

137
export interface DeleteDialogProps {
@@ -24,7 +18,7 @@ export interface DeleteDialogProps {
2418
confirmText?: string;
2519
}
2620

27-
export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
21+
export const DeleteDialog: FC<DeleteDialogProps> = ({
2822
isOpen,
2923
onCancel,
3024
onConfirm,
@@ -39,7 +33,6 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
3933
confirmText,
4034
}) => {
4135
const hookId = useId();
42-
const theme = useTheme();
4336

4437
const [userConfirmationText, setUserConfirmationText] = useState("");
4538
const [isFocused, setIsFocused] = useState(false);
@@ -69,19 +62,17 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
6962
confirmText={confirmText}
7063
description={
7164
<>
72-
<p>
73-
{verb ?? "Deleting"} this {entity} is irreversible!
74-
</p>
75-
76-
{Boolean(info) && (
77-
<p css={{ color: theme.palette.warning.light }}>{info}</p>
78-
)}
65+
<Stack spacing={1.5}>
66+
<p>
67+
{verb ?? "Deleting"} this {entity} is irreversible!
68+
</p>
7969

80-
<p>Are you sure you want to proceed?</p>
70+
{Boolean(info) && <div css={styles.callout}>{info}</div>}
8171

82-
<p>
83-
Type &ldquo;<strong>{name}</strong>&rdquo; below to confirm.
84-
</p>
72+
<p>
73+
Type <strong>{name}</strong> below to confirm.
74+
</p>
75+
</Stack>
8576

8677
<form onSubmit={onSubmit}>
8778
<TextField
@@ -114,3 +105,13 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
114105
/>
115106
);
116107
};
108+
109+
const styles = {
110+
callout: (theme) => ({
111+
backgroundColor: theme.experimental.roles.danger.background,
112+
border: `1px solid ${theme.experimental.roles.danger.outline}`,
113+
borderRadius: theme.shape.borderRadius,
114+
color: theme.experimental.roles.danger.text,
115+
padding: "8px 16px",
116+
}),
117+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/components/Dialogs/Dialog.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import MuiDialog, { DialogProps as MuiDialogProps } from "@mui/material/Dialog";
2+
import LoadingButton, { LoadingButtonProps } from "@mui/lab/LoadingButton";
3+
import { type Interpolation, type Theme } from "@emotion/react";
24
import { type FC, type ReactNode } from "react";
35
import { ConfirmDialogType } from "./types";
4-
import { type Interpolation, type Theme } from "@emotion/react";
5-
import LoadingButton, { LoadingButtonProps } from "@mui/lab/LoadingButton";
66

77
export interface DialogActionButtonsProps {
88
/** Text to display in the cancel button */

‎site/src/components/InfoTooltip/InfoTooltip.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import {
77
HelpTooltipTitle,
88
HelpTooltipTrigger,
99
} from "components/HelpTooltip/HelpTooltip";
10-
import { Interpolation, Theme, css, useTheme } from "@emotion/react";
10+
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
11+
import type { ThemeRole } from "theme/experimental";
1112

1213
interface InfoTooltipProps {
13-
// TODO: use a `ThemeRole` type or something
14-
type?: "warning" | "notice" | "info";
14+
type?: ThemeRole;
1515
title: ReactNode;
1616
message: ReactNode;
1717
}
@@ -22,13 +22,12 @@ export const InfoTooltip: FC<InfoTooltipProps> = ({
2222
type = "info",
2323
}) => {
2424
const theme = useTheme();
25+
const iconColor = theme.experimental.roles[type].outline;
2526

2627
return (
2728
<HelpTooltip>
2829
<HelpTooltipTrigger size="small" css={styles.button}>
29-
<HelpTooltipIcon
30-
css={{ color: theme.experimental.roles[type].outline }}
31-
/>
30+
<HelpTooltipIcon css={{ color: iconColor }} />
3231
</HelpTooltipTrigger>
3332
<HelpTooltipContent>
3433
<HelpTooltipTitle>{title}</HelpTooltipTitle>

‎site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { useTheme } from "@emotion/react";
21
import HelpOutline from "@mui/icons-material/HelpOutline";
32
import Tooltip from "@mui/material/Tooltip";
4-
import { type FC } from "react";
5-
import { getLatencyColor } from "utils/latency";
63
import CircularProgress from "@mui/material/CircularProgress";
74
import { visuallyHidden } from "@mui/utils";
5+
import { useTheme } from "@emotion/react";
6+
import { type FC } from "react";
7+
import { getLatencyColor } from "utils/latency";
88
import { Abbr } from "components/Abbr/Abbr";
99

1010
interface ProxyStatusLatencyProps {
@@ -17,18 +17,16 @@ export const ProxyStatusLatency: FC<ProxyStatusLatencyProps> = ({
1717
isLoading,
1818
}) => {
1919
const theme = useTheme();
20-
const color = getLatencyColor(theme, latency);
20+
// Always use the no latency color for loading.
21+
const color = getLatencyColor(theme, isLoading ? undefined : latency);
2122

2223
if (isLoading) {
2324
return (
2425
<Tooltip title="Loading latency...">
2526
<CircularProgress
2627
size={14}
27-
css={{
28-
// Always use the no latency color for loading.
29-
color: getLatencyColor(theme, undefined),
30-
marginLeft: "auto",
31-
}}
28+
css={{ marginLeft: "auto" }}
29+
style={{ color }}
3230
/>
3331
</Tooltip>
3432
);
@@ -45,16 +43,16 @@ export const ProxyStatusLatency: FC<ProxyStatusLatencyProps> = ({
4543
css={{
4644
marginLeft: "auto",
4745
fontSize: "14px !important",
48-
color,
4946
}}
47+
style={{ color }}
5048
/>
5149
</>
5250
</Tooltip>
5351
);
5452
}
5553

5654
return (
57-
<p css={{ color, fontSize: 13, margin: "0 0 0 auto" }}>
55+
<p css={{ fontSize: 13, margin: "0 0 0 auto" }} style={{ color }}>
5856
<span css={{ ...visuallyHidden }}>Latency: </span>
5957
{latency.toFixed(0)}
6058
<Abbr title="milliseconds">ms</Abbr>

‎site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { type CSSObject, type Interpolation, type Theme } from "@emotion/react";
22
import Button from "@mui/material/Button";
33
import Paper from "@mui/material/Paper";
44
import dayjs from "dayjs";
5-
import { useState } from "react";
5+
import { type FC, useState } from "react";
66
import { compareAsc } from "date-fns";
77
import { type GetLicensesResponse } from "api/api";
88
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
@@ -17,13 +17,13 @@ type LicenseCardProps = {
1717
isRemoving: boolean;
1818
};
1919

20-
export const LicenseCard = ({
20+
export const LicenseCard: FC<LicenseCardProps> = ({
2121
license,
2222
userLimitActual,
2323
userLimitLimit,
2424
onRemove,
2525
isRemoving,
26-
}: LicenseCardProps) => {
26+
}) => {
2727
const [licenseIDMarkedForRemoval, setLicenseIDMarkedForRemoval] = useState<
2828
number | undefined
2929
>(undefined);

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx

Lines changed: 55 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -508,9 +508,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
508508
ref={buildLogsRef}
509509
css={{
510510
display: selectedTab !== "logs" ? "none" : "flex",
511+
height: selectedTab ? 280 : 0,
511512
flexDirection: "column",
512513
overflowY: "auto",
513-
height: selectedTab ? 280 : 0,
514514
}}
515515
>
516516
{templateVersion.job.error && (
@@ -536,59 +536,21 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
536536

537537
{buildLogs && buildLogs.length > 0 && (
538538
<WorkspaceBuildLogs
539-
css={{
540-
borderRadius: 0,
541-
border: 0,
542-
543-
// Hack to update logs header and lines
544-
"& .logs-header": {
545-
border: 0,
546-
padding: "0 16px",
547-
fontFamily: MONOSPACE_FONT_FAMILY,
548-
549-
"&:first-child": {
550-
paddingTop: 16,
551-
},
552-
553-
"&:last-child": {
554-
paddingBottom: 16,
555-
},
556-
},
557-
558-
"& .logs-line": {
559-
paddingLeft: 16,
560-
},
561-
562-
"& .logs-container": {
563-
border: "0 !important",
564-
},
565-
}}
539+
css={styles.buildLogs}
566540
hideTimestamps
567541
logs={buildLogs}
568542
/>
569543
)}
570544
</div>
571545

572546
<div
573-
css={{
574-
display: selectedTab !== "resources" ? "none" : undefined,
575-
overflowY: "auto",
576-
height: selectedTab ? 280 : 0,
577-
578-
// Hack to access customize resource-card from here
579-
"& .resource-card": {
580-
borderLeft: 0,
581-
borderRight: 0,
582-
583-
"&:first-child": {
584-
borderTop: 0,
585-
},
586-
587-
"&:last-child": {
588-
borderBottom: 0,
589-
},
547+
css={[
548+
{
549+
display: selectedTab !== "resources" ? "none" : undefined,
550+
height: selectedTab ? 280 : 0,
590551
},
591-
}}
552+
styles.resources,
553+
]}
592554
>
593555
{resources && (
594556
<TemplateResourcesTable
@@ -670,6 +632,7 @@ const styles = {
670632
color: theme.palette.text.disabled,
671633
},
672634
}),
635+
673636
tabBar: (theme) => ({
674637
padding: "8px 16px",
675638
position: "sticky",
@@ -684,4 +647,50 @@ const styles = {
684647
borderTop: `1px solid ${theme.palette.divider}`,
685648
},
686649
}),
650+
651+
buildLogs: {
652+
borderRadius: 0,
653+
border: 0,
654+
655+
// Hack to update logs header and lines
656+
"& .logs-header": {
657+
border: 0,
658+
padding: "0 16px",
659+
fontFamily: MONOSPACE_FONT_FAMILY,
660+
661+
"&:first-child": {
662+
paddingTop: 16,
663+
},
664+
665+
"&:last-child": {
666+
paddingBottom: 16,
667+
},
668+
},
669+
670+
"& .logs-line": {
671+
paddingLeft: 16,
672+
},
673+
674+
"& .logs-container": {
675+
border: "0 !important",
676+
},
677+
},
678+
679+
resources: {
680+
overflowY: "auto",
681+
682+
// Hack to access customize resource-card from here
683+
"& .resource-card": {
684+
borderLeft: 0,
685+
borderRight: 0,
686+
687+
"&:first-child": {
688+
borderTop: 0,
689+
},
690+
691+
"&:last-child": {
692+
borderBottom: 0,
693+
},
694+
},
695+
},
687696
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,18 @@ import TableCell from "@mui/material/TableCell";
44
import TableContainer from "@mui/material/TableContainer";
55
import TableHead from "@mui/material/TableHead";
66
import TableRow from "@mui/material/TableRow";
7-
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
8-
import { Stack } from "components/Stack/Stack";
9-
import { TableEmpty } from "components/TableEmpty/TableEmpty";
10-
import { TableLoader } from "components/TableLoader/TableLoader";
7+
import IconButton from "@mui/material/IconButton";
118
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
129
import dayjs from "dayjs";
1310
import { useTheme } from "@emotion/react";
1411
import { type FC, type ReactNode } from "react";
15-
import IconButton from "@mui/material/IconButton/IconButton";
1612
import type { APIKeyWithOwner } from "api/typesGenerated";
1713
import relativeTime from "dayjs/plugin/relativeTime";
1814
import { ErrorAlert } from "components/Alert/ErrorAlert";
15+
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
16+
import { Stack } from "components/Stack/Stack";
17+
import { TableEmpty } from "components/TableEmpty/TableEmpty";
18+
import { TableLoader } from "components/TableLoader/TableLoader";
1919

2020
dayjs.extend(relativeTime);
2121

‎site/src/pages/UsersPage/UsersPage.test.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,6 @@ const deleteUser = async () => {
4949
const deleteButton = screen.getByText(/Delete/);
5050
await user.click(deleteButton);
5151

52-
// Check if the confirm message is displayed
53-
const confirmDialog = await screen.findByRole("dialog");
54-
expect(confirmDialog).toHaveTextContent(`Are you sure you want to proceed?`);
55-
5652
// Confirm with text input
5753
const textField = screen.getByLabelText("Name of the user to delete");
5854
const dialog = screen.getByRole("dialog");

0 commit comments

Comments
 (0)