Skip to content

chore: miscellaneous cleanup #11027

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.

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 1 commit into from
Jan 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion site/src/components/Alert/Alert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const Alert: FC<AlertProps> = ({
children,
actions,
dismissible,
severity,
severity = "info",
onDismiss,
...alertProps
}) => {
Expand Down
4 changes: 1 addition & 3 deletions site/src/components/BuildAvatar/BuildAvatar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,7 @@ export const BuildAvatar: FC<BuildAvatarProps> = ({ build, size }) => {
const theme = useTheme();
const { status, type } = getDisplayWorkspaceBuildStatus(theme, build);
const badgeType = useClassName(
(css, theme) => css`
background-color: ${theme.palette[type].light};
`,
(css, theme) => css({ backgroundColor: theme.palette[type].light }),
[type],
);

Expand Down
45 changes: 23 additions & 22 deletions site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
import {
type FC,
type FormEvent,
type PropsWithChildren,
useId,
useState,
} from "react";

import { useTheme } from "@emotion/react";
import TextField from "@mui/material/TextField";
import { type Interpolation, type Theme } from "@emotion/react";
import { type FC, type FormEvent, useId, useState } from "react";
import { Stack } from "../../Stack/Stack";
import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog";

export interface DeleteDialogProps {
Expand All @@ -24,7 +18,7 @@ export interface DeleteDialogProps {
confirmText?: string;
}

export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
export const DeleteDialog: FC<DeleteDialogProps> = ({
isOpen,
onCancel,
onConfirm,
Expand All @@ -39,7 +33,6 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
confirmText,
}) => {
const hookId = useId();
const theme = useTheme();

const [userConfirmationText, setUserConfirmationText] = useState("");
const [isFocused, setIsFocused] = useState(false);
Expand Down Expand Up @@ -69,19 +62,17 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
confirmText={confirmText}
description={
<>
<p>
{verb ?? "Deleting"} this {entity} is irreversible!
</p>

{Boolean(info) && (
<p css={{ color: theme.palette.warning.light }}>{info}</p>
)}
<Stack spacing={1.5}>
<p>
{verb ?? "Deleting"} this {entity} is irreversible!
</p>

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

<p>
Type &ldquo;<strong>{name}</strong>&rdquo; below to confirm.
</p>
<p>
Type <strong>{name}</strong> below to confirm.
</p>
</Stack>

<form onSubmit={onSubmit}>
<TextField
Expand Down Expand Up @@ -114,3 +105,13 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
/>
);
};

const styles = {
callout: (theme) => ({
backgroundColor: theme.experimental.roles.danger.background,
border: `1px solid ${theme.experimental.roles.danger.outline}`,
borderRadius: theme.shape.borderRadius,
color: theme.experimental.roles.danger.text,
padding: "8px 16px",
}),
} satisfies Record<string, Interpolation<Theme>>;
4 changes: 2 additions & 2 deletions site/src/components/Dialogs/Dialog.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import MuiDialog, { DialogProps as MuiDialogProps } from "@mui/material/Dialog";
import LoadingButton, { LoadingButtonProps } from "@mui/lab/LoadingButton";
import { type Interpolation, type Theme } from "@emotion/react";
import { type FC, type ReactNode } from "react";
import { ConfirmDialogType } from "./types";
import { type Interpolation, type Theme } from "@emotion/react";
import LoadingButton, { LoadingButtonProps } from "@mui/lab/LoadingButton";

export interface DialogActionButtonsProps {
/** Text to display in the cancel button */
Expand Down
11 changes: 5 additions & 6 deletions site/src/components/InfoTooltip/InfoTooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ import {
HelpTooltipTitle,
HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import { Interpolation, Theme, css, useTheme } from "@emotion/react";
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
import type { ThemeRole } from "theme/experimental";

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

return (
<HelpTooltip>
<HelpTooltipTrigger size="small" css={styles.button}>
<HelpTooltipIcon
css={{ color: theme.experimental.roles[type].outline }}
/>
<HelpTooltipIcon css={{ color: iconColor }} />
</HelpTooltipTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>{title}</HelpTooltipTitle>
Expand Down
20 changes: 9 additions & 11 deletions site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { useTheme } from "@emotion/react";
import HelpOutline from "@mui/icons-material/HelpOutline";
import Tooltip from "@mui/material/Tooltip";
import { type FC } from "react";
import { getLatencyColor } from "utils/latency";
import CircularProgress from "@mui/material/CircularProgress";
import { visuallyHidden } from "@mui/utils";
import { useTheme } from "@emotion/react";
import { type FC } from "react";
import { getLatencyColor } from "utils/latency";
import { Abbr } from "components/Abbr/Abbr";

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

if (isLoading) {
return (
<Tooltip title="Loading latency...">
<CircularProgress
size={14}
css={{
// Always use the no latency color for loading.
color: getLatencyColor(theme, undefined),
marginLeft: "auto",
}}
css={{ marginLeft: "auto" }}
style={{ color }}
/>
</Tooltip>
);
Expand All @@ -45,16 +43,16 @@ export const ProxyStatusLatency: FC<ProxyStatusLatencyProps> = ({
css={{
marginLeft: "auto",
fontSize: "14px !important",
color,
}}
style={{ color }}
/>
</>
</Tooltip>
);
}

return (
<p css={{ color, fontSize: 13, margin: "0 0 0 auto" }}>
<p css={{ fontSize: 13, margin: "0 0 0 auto" }} style={{ color }}>
<span css={{ ...visuallyHidden }}>Latency: </span>
{latency.toFixed(0)}
<Abbr title="milliseconds">ms</Abbr>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { type CSSObject, type Interpolation, type Theme } from "@emotion/react";
import Button from "@mui/material/Button";
import Paper from "@mui/material/Paper";
import dayjs from "dayjs";
import { useState } from "react";
import { type FC, useState } from "react";
import { compareAsc } from "date-fns";
import { type GetLicensesResponse } from "api/api";
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
Expand All @@ -17,13 +17,13 @@ type LicenseCardProps = {
isRemoving: boolean;
};

export const LicenseCard = ({
export const LicenseCard: FC<LicenseCardProps> = ({
license,
userLimitActual,
userLimitLimit,
onRemove,
isRemoving,
}: LicenseCardProps) => {
}) => {
const [licenseIDMarkedForRemoval, setLicenseIDMarkedForRemoval] = useState<
number | undefined
>(undefined);
Expand Down
101 changes: 55 additions & 46 deletions site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -508,9 +508,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
ref={buildLogsRef}
css={{
display: selectedTab !== "logs" ? "none" : "flex",
height: selectedTab ? 280 : 0,
flexDirection: "column",
overflowY: "auto",
height: selectedTab ? 280 : 0,
}}
>
{templateVersion.job.error && (
Expand All @@ -536,59 +536,21 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({

{buildLogs && buildLogs.length > 0 && (
<WorkspaceBuildLogs
css={{
borderRadius: 0,
border: 0,

// Hack to update logs header and lines
"& .logs-header": {
border: 0,
padding: "0 16px",
fontFamily: MONOSPACE_FONT_FAMILY,

"&:first-child": {
paddingTop: 16,
},

"&:last-child": {
paddingBottom: 16,
},
},

"& .logs-line": {
paddingLeft: 16,
},

"& .logs-container": {
border: "0 !important",
},
}}
css={styles.buildLogs}
hideTimestamps
logs={buildLogs}
/>
)}
</div>

<div
css={{
display: selectedTab !== "resources" ? "none" : undefined,
overflowY: "auto",
height: selectedTab ? 280 : 0,

// Hack to access customize resource-card from here
"& .resource-card": {
borderLeft: 0,
borderRight: 0,

"&:first-child": {
borderTop: 0,
},

"&:last-child": {
borderBottom: 0,
},
css={[
{
display: selectedTab !== "resources" ? "none" : undefined,
height: selectedTab ? 280 : 0,
},
}}
styles.resources,
]}
>
{resources && (
<TemplateResourcesTable
Expand Down Expand Up @@ -670,6 +632,7 @@ const styles = {
color: theme.palette.text.disabled,
},
}),

tabBar: (theme) => ({
padding: "8px 16px",
position: "sticky",
Expand All @@ -684,4 +647,50 @@ const styles = {
borderTop: `1px solid ${theme.palette.divider}`,
},
}),

buildLogs: {
borderRadius: 0,
border: 0,

// Hack to update logs header and lines
"& .logs-header": {
border: 0,
padding: "0 16px",
fontFamily: MONOSPACE_FONT_FAMILY,

"&:first-child": {
paddingTop: 16,
},

"&:last-child": {
paddingBottom: 16,
},
},

"& .logs-line": {
paddingLeft: 16,
},

"& .logs-container": {
border: "0 !important",
},
},

resources: {
overflowY: "auto",

// Hack to access customize resource-card from here
"& .resource-card": {
borderLeft: 0,
borderRight: 0,

"&:first-child": {
borderTop: 0,
},

"&:last-child": {
borderBottom: 0,
},
},
},
} satisfies Record<string, Interpolation<Theme>>;
10 changes: 5 additions & 5 deletions site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@ import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { Stack } from "components/Stack/Stack";
import { TableEmpty } from "components/TableEmpty/TableEmpty";
import { TableLoader } from "components/TableLoader/TableLoader";
import IconButton from "@mui/material/IconButton";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import dayjs from "dayjs";
import { useTheme } from "@emotion/react";
import { type FC, type ReactNode } from "react";
import IconButton from "@mui/material/IconButton/IconButton";
import type { APIKeyWithOwner } from "api/typesGenerated";
import relativeTime from "dayjs/plugin/relativeTime";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { Stack } from "components/Stack/Stack";
import { TableEmpty } from "components/TableEmpty/TableEmpty";
import { TableLoader } from "components/TableLoader/TableLoader";

dayjs.extend(relativeTime);

Expand Down
4 changes: 0 additions & 4 deletions site/src/pages/UsersPage/UsersPage.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,6 @@ const deleteUser = async () => {
const deleteButton = screen.getByText(/Delete/);
await user.click(deleteButton);

// Check if the confirm message is displayed
const confirmDialog = await screen.findByRole("dialog");
expect(confirmDialog).toHaveTextContent(`Are you sure you want to proceed?`);

// Confirm with text input
const textField = screen.getByLabelText("Name of the user to delete");
const dialog = screen.getByRole("dialog");
Expand Down
Loading