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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy