Skip to content

Commit fe8e3ad

Browse files
aslilacaslilac
committed
yo
1 parent 7c35776 commit fe8e3ad

File tree

23 files changed

+193
-152
lines changed

23 files changed

+193
-152
lines changed

‎site/src/App.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,14 @@ export const ThemeProviders: FC<PropsWithChildren> = ({ children }) => {
4444
);
4545
};
4646

47-
export const AppProviders = ({
48-
children,
49-
queryClient = defaultQueryClient,
50-
}: {
47+
interface AppProvidersProps {
5148
children: ReactNode;
5249
queryClient?: QueryClient;
50+
}
51+
52+
export const AppProviders: FC<AppProvidersProps> = ({
53+
children,
54+
queryClient = defaultQueryClient,
5355
}) => {
5456
return (
5557
<HelmetProvider>

‎site/src/components/Dashboard/useUpdateCheck.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { act, renderHook, waitFor } from "@testing-library/react";
22
import { useUpdateCheck } from "./useUpdateCheck";
33
import { QueryClient, QueryClientProvider } from "react-query";
4-
import { ReactNode } from "react";
4+
import { type PropsWithChildren } from "react";
55
import { rest } from "msw";
66
import { MockUpdateCheck } from "testHelpers/entities";
77
import { server } from "testHelpers/server";
88

99
const createWrapper = () => {
1010
const queryClient = new QueryClient();
11-
return ({ children }: { children: ReactNode }) => (
11+
return ({ children }: PropsWithChildren) => (
1212
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
1313
);
1414
};

‎site/src/components/Filter/UserFilter.tsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { type FC } from "react";
12
import { useMe } from "hooks";
23
import { BaseOption } from "./options";
34
import { getUsers } from "api/api";
@@ -67,7 +68,11 @@ export const useUserFilterMenu = ({
6768

6869
export type UserFilterMenu = ReturnType<typeof useUserFilterMenu>;
6970

70-
export const UserMenu = (menu: UserFilterMenu) => {
71+
interface UserMenuProps {
72+
menu: UserFilterMenu;
73+
}
74+
75+
export const UserMenu: FC<UserMenuProps> = ({ menu }) => {
7176
return (
7277
<FilterSearchMenu
7378
id="users-menu"
@@ -85,13 +90,12 @@ export const UserMenu = (menu: UserFilterMenu) => {
8590
);
8691
};
8792

88-
const UserOptionItem = ({
89-
option,
90-
isSelected,
91-
}: {
93+
interface UserOptionItemProps {
9294
option: UserOption;
9395
isSelected?: boolean;
94-
}) => {
96+
}
97+
98+
const UserOptionItem: FC<UserOptionItemProps> = ({ option, isSelected }) => {
9599
return (
96100
<OptionItem
97101
option={option}

‎site/src/components/Filter/filter.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -442,17 +442,19 @@ export const FilterMenu = <TOption extends BaseOption>(
442442
);
443443
};
444444

445+
interface FilterSearchMenuProps<TOption extends BaseOption> {
446+
menu: ReturnType<typeof useFilterMenu<TOption>>;
447+
label: ReactNode;
448+
id: string;
449+
children: (values: { option: TOption; isSelected: boolean }) => ReactNode;
450+
}
451+
445452
export const FilterSearchMenu = <TOption extends BaseOption>({
446453
id,
447454
menu,
448455
label,
449456
children,
450-
}: {
451-
menu: ReturnType<typeof useFilterMenu<TOption>>;
452-
label: ReactNode;
453-
id: string;
454-
children: (values: { option: TOption; isSelected: boolean }) => ReactNode;
455-
}) => {
457+
}: FilterSearchMenuProps<TOption>) => {
456458
const buttonRef = useRef<HTMLButtonElement>(null);
457459
const [isMenuOpen, setIsMenuOpen] = useState(false);
458460

‎site/src/components/GlobalSnackbar/GlobalSnackbar.tsx

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,12 @@ export const GlobalSnackbar: FC = () => {
4646
autoHideDuration={notification.msgType === MsgType.Error ? 22000 : 6000}
4747
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
4848
message={
49-
<div css={styles.messageWrapper}>
49+
<div css={{ display: "flex" }}>
5050
{notification.msgType === MsgType.Error && (
5151
<ErrorIcon css={styles.errorIcon} />
5252
)}
5353

54-
<div css={styles.message}>
54+
<div css={{ maxWidth: 670 }}>
5555
<Typography variant="body1" css={styles.messageTitle}>
5656
{notification.msg}
5757
</Typography>
@@ -67,30 +67,13 @@ export const GlobalSnackbar: FC = () => {
6767
);
6868
};
6969

70-
const styles = {
71-
list: {
72-
paddingLeft: 0,
73-
},
74-
messageWrapper: {
75-
display: "flex",
76-
},
77-
message: {
78-
maxWidth: 670,
79-
},
80-
messageTitle: {
81-
fontSize: 14,
82-
fontWeight: 600,
83-
},
84-
messageSubtitle: {
85-
marginTop: 12,
86-
},
87-
errorIcon: (theme) => ({
88-
color: theme.palette.error.contrastText,
89-
marginRight: 16,
90-
}),
91-
} satisfies Record<string, Interpolation<Theme>>;
70+
interface AdditionalMessageDisplayProps {
71+
message: AdditionalMessage;
72+
}
9273

93-
function AdditionalMessageDisplay({ message }: { message: AdditionalMessage }) {
74+
const AdditionalMessageDisplay: FC<AdditionalMessageDisplayProps> = ({
75+
message,
76+
}) => {
9477
if (isNotificationText(message)) {
9578
return (
9679
<Typography gutterBottom variant="body2" css={styles.messageSubtitle}>
@@ -109,7 +92,7 @@ function AdditionalMessageDisplay({ message }: { message: AdditionalMessage }) {
10992

11093
if (isNotificationList(message)) {
11194
return (
112-
<ul css={styles.list}>
95+
<ul css={{ paddingLeft: 0 }}>
11396
{message.map((item, idx) => (
11497
<li key={idx}>
11598
<Typography variant="body2" css={styles.messageSubtitle}>
@@ -122,4 +105,18 @@ function AdditionalMessageDisplay({ message }: { message: AdditionalMessage }) {
122105
}
123106

124107
return null;
125-
}
108+
};
109+
110+
const styles = {
111+
messageTitle: {
112+
fontSize: 14,
113+
fontWeight: 600,
114+
},
115+
messageSubtitle: {
116+
marginTop: 12,
117+
},
118+
errorIcon: (theme) => ({
119+
color: theme.palette.error.contrastText,
120+
marginRight: 16,
121+
}),
122+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/components/LastSeen/LastSeen.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import { useTheme } from "@emotion/react";
22
import dayjs from "dayjs";
3-
import { type HTMLAttributes } from "react";
3+
import { type FC, type HTMLAttributes } from "react";
44

55
interface LastSeenProps extends HTMLAttributes<HTMLSpanElement> {
66
value: string;
77
}
88

9-
export const LastSeen = (props: LastSeenProps) => {
10-
const { value, ...attrs } = props;
9+
export const LastSeen: FC<LastSeenProps> = ({ value, ...attrs }) => {
1110
const theme = useTheme();
1211
const t = dayjs(value);
1312
const now = dayjs();

‎site/src/components/OverflowY/OverflowY.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* @file Provides reusable vertical overflow behavior.
33
*/
4-
import { type ReactNode } from "react";
4+
import { type FC, type ReactNode } from "react";
55

66
type OverflowYProps = {
77
children?: ReactNode;
@@ -10,12 +10,12 @@ type OverflowYProps = {
1010
maxHeight?: number;
1111
};
1212

13-
export function OverflowY({
13+
export const OverflowY: FC<OverflowYProps> = ({
1414
children,
1515
height,
1616
maxHeight,
1717
...attrs
18-
}: OverflowYProps) {
18+
}) => {
1919
const computedHeight = height === undefined ? "100%" : `${height}px`;
2020

2121
// Doing Math.max check to catch cases where height is accidentally larger
@@ -39,4 +39,4 @@ export function OverflowY({
3939
{children}
4040
</div>
4141
);
42-
}
42+
};

‎site/src/components/TableLoader/TableLoader.tsx

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,14 @@ export const TableLoader: FC = () => {
1313
);
1414
};
1515

16-
export const TableLoaderSkeleton = ({
16+
interface TableLoaderSkeletonProps {
17+
rows?: number;
18+
children?: ReactNode;
19+
}
20+
21+
export const TableLoaderSkeleton: FC<TableLoaderSkeletonProps> = ({
1722
rows = 4,
1823
children,
19-
}: {
20-
rows?: number;
21-
children: ReactNode;
2224
}) => {
2325
if (!isValidElement(children)) {
2426
throw new Error(
@@ -34,6 +36,13 @@ export const TableLoaderSkeleton = ({
3436
);
3537
};
3638

37-
export const TableRowSkeleton = (props: TableRowProps) => {
38-
return <TableRow role="progressbar" data-testid="loader" {...props} />;
39+
export const TableRowSkeleton: FC<TableRowProps> = ({
40+
children,
41+
...rowProps
42+
}) => {
43+
return (
44+
<TableRow role="progressbar" data-testid="loader" {...rowProps}>
45+
{children}
46+
</TableRow>
47+
);
3948
};

‎site/src/components/Tabs/Tabs.tsx

Lines changed: 34 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import { ReactNode } from "react";
1+
import { type FC, type PropsWithChildren } from "react";
22
import { NavLink, NavLinkProps } from "react-router-dom";
33
import { combineClasses } from "utils/combineClasses";
44
import { Margins } from "components/Margins/Margins";
5-
import { css } from "@emotion/css";
6-
import { useTheme } from "@emotion/react";
5+
import { type ClassName, useClassName } from "hooks/useClassName";
76

8-
export const Tabs = ({ children }: { children: ReactNode }) => {
7+
export const Tabs: FC<PropsWithChildren> = ({ children }) => {
98
return (
109
<div
1110
css={(theme) => ({
@@ -26,10 +25,34 @@ export const Tabs = ({ children }: { children: ReactNode }) => {
2625
);
2726
};
2827

29-
export const TabLink = (props: NavLinkProps) => {
30-
const theme = useTheme();
28+
interface TabLinkProps extends NavLinkProps {
29+
className?: string;
30+
}
3131

32-
const baseTabLink = css`
32+
export const TabLink: FC<TabLinkProps> = ({
33+
className,
34+
children,
35+
...linkProps
36+
}) => {
37+
const tabLink = useClassName(classNames.tabLink, []);
38+
const activeTabLink = useClassName(classNames.tabLink, []);
39+
40+
return (
41+
<NavLink
42+
className={({ isActive }) =>
43+
combineClasses([
44+
tabLink,
45+
isActive ? activeTabLink : undefined,
46+
className,
47+
])
48+
}
49+
{...linkProps}
50+
/>
51+
);
52+
};
53+
54+
const classNames = {
55+
tabLink: (css, theme) => css`
3356
text-decoration: none;
3457
color: ${theme.palette.text.secondary};
3558
font-size: 14px;
@@ -39,9 +62,8 @@ export const TabLink = (props: NavLinkProps) => {
3962
&:hover {
4063
color: ${theme.palette.text.primary};
4164
}
42-
`;
43-
44-
const activeTabLink = css`
65+
`,
66+
activeTabLink: (css, theme) => css`
4567
color: ${theme.palette.text.primary};
4668
position: relative;
4769
@@ -54,18 +76,5 @@ export const TabLink = (props: NavLinkProps) => {
5476
background: ${theme.palette.primary.main};
5577
position: absolute;
5678
}
57-
`;
58-
59-
return (
60-
<NavLink
61-
className={({ isActive }) =>
62-
combineClasses([
63-
baseTabLink,
64-
isActive ? activeTabLink : undefined,
65-
props.className as string,
66-
])
67-
}
68-
{...props}
69-
/>
70-
);
71-
};
79+
`,
80+
} satisfies Record<string, ClassName>;

‎site/src/components/WorkspaceDeletion/DormantDeletionText.tsx

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
import { Workspace } from "api/typesGenerated";
1+
import { type FC } from "react";
2+
import type { Workspace } from "api/typesGenerated";
23
import { displayDormantDeletion } from "./utils";
34
import { useDashboard } from "components/Dashboard/DashboardProvider";
4-
import styled from "@emotion/styled";
5-
import { Theme as MaterialUITheme } from "@mui/material/styles";
65

7-
export const DormantDeletionText = ({
8-
workspace,
9-
}: {
6+
interface DormantDeletionTextProps {
107
workspace: Workspace;
11-
}): JSX.Element | null => {
8+
}
9+
10+
export const DormantDeletionText: FC<DormantDeletionTextProps> = ({
11+
workspace,
12+
}) => {
1213
const { entitlements, experiments } = useDashboard();
1314
const allowAdvancedScheduling =
1415
entitlements.features["advanced_template_scheduling"].enabled;
@@ -25,10 +26,16 @@ export const DormantDeletionText = ({
2526
) {
2627
return null;
2728
}
28-
return <StyledSpan role="status">Impending deletion</StyledSpan>;
29-
};
3029

31-
const StyledSpan = styled.span<{ theme?: MaterialUITheme }>`
32-
color: ${(props) => props.theme.palette.warning.light};
33-
font-weight: 600;
34-
`;
30+
return (
31+
<span
32+
role="status"
33+
css={(theme) => ({
34+
color: theme.palette.warning.light,
35+
fontWeight: 600,
36+
})}
37+
>
38+
Impending deletion
39+
</span>
40+
);
41+
};

0 commit comments

Comments
 (0)