Skip to content

Commit e81f2dc

Browse files
aslilacaslilac
committed
emotion: AuditLogRow 
1 parent 44ce30d commit e81f2dc

File tree

1 file changed

+30
-35
lines changed

1 file changed

+30
-35
lines changed

‎site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx

+30-35
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
import { type CSSObject, type Interpolation, type Theme } from "@emotion/react";
12
import Collapse from "@mui/material/Collapse";
2-
import { makeStyles } from "@mui/styles";
33
import TableCell from "@mui/material/TableCell";
4-
import { AuditLog } from "api/typesGenerated";
4+
import type { AuditLog } from "api/typesGenerated";
55
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
66
import { Pill, type PillType } from "components/Pill/Pill";
77
import { Stack } from "components/Stack/Stack";
@@ -40,7 +40,6 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
4040
auditLog,
4141
defaultIsDiffOpen = false,
4242
}) => {
43-
const styles = useStyles();
4443
const [isDiffOpen, setIsDiffOpen] = useState(defaultIsDiffOpen);
4544
const diffs = Object.entries(auditLog.diff);
4645
const shouldDisplayDiff = diffs.length > 0;
@@ -65,11 +64,11 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
6564
data-testid={`audit-log-row-${auditLog.id}`}
6665
clickable={shouldDisplayDiff}
6766
>
68-
<TableCell className={styles.auditLogCell}>
67+
<TableCell css={styles.auditLogCell}>
6968
<Stack
7069
direction="row"
7170
alignItems="center"
72-
className={styles.auditLogHeader}
71+
css={styles.auditLogHeader}
7372
tabIndex={0}
7473
onClick={toggle}
7574
onKeyDown={(event) => {
@@ -81,57 +80,53 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
8180
<Stack
8281
direction="row"
8382
alignItems="center"
84-
className={styles.auditLogHeaderInfo}
83+
css={styles.auditLogHeaderInfo}
8584
>
86-
<Stack
87-
direction="row"
88-
alignItems="center"
89-
className={styles.fullWidth}
90-
>
85+
<Stack direction="row" alignItems="center" css={styles.fullWidth}>
9186
<UserAvatar
9287
username={auditLog.user?.username ?? "?"}
9388
avatarURL={auditLog.user?.avatar_url}
9489
/>
9590

9691
<Stack
9792
alignItems="baseline"
98-
className={styles.fullWidth}
93+
css={styles.fullWidth}
9994
justifyContent="space-between"
10095
direction="row"
10196
>
10297
<Stack
103-
className={styles.auditLogSummary}
98+
css={styles.auditLogSummary}
10499
direction="row"
105100
alignItems="baseline"
106101
spacing={1}
107102
>
108103
<AuditLogDescription auditLog={auditLog} />
109104
{auditLog.is_deleted && (
110-
<span className={styles.deletedLabel}>
105+
<span css={styles.deletedLabel}>
111106
<>(deleted)</>
112107
</span>
113108
)}
114-
<span className={styles.auditLogTime}>
109+
<span css={styles.auditLogTime}>
115110
{new Date(auditLog.time).toLocaleTimeString()}
116111
</span>
117112
</Stack>
118113

119114
<Stack direction="row" alignItems="center">
120115
<Stack direction="row" spacing={1} alignItems="baseline">
121116
{auditLog.ip && (
122-
<span className={styles.auditLogInfo}>
117+
<span css={styles.auditLogInfo}>
123118
<>IP: </>
124119
<strong>{auditLog.ip}</strong>
125120
</span>
126121
)}
127122
{os.name && (
128-
<span className={styles.auditLogInfo}>
123+
<span css={styles.auditLogInfo}>
129124
<>OS: </>
130125
<strong>{os.name}</strong>
131126
</span>
132127
)}
133128
{browser.name && (
134-
<span className={styles.auditLogInfo}>
129+
<span css={styles.auditLogInfo}>
135130
<>Browser: </>
136131
<strong>
137132
{browser.name} {browser.version}
@@ -141,7 +136,7 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
141136
</Stack>
142137

143138
<Pill
144-
className={styles.httpStatusPill}
139+
css={styles.httpStatusPill}
145140
type={httpStatusColor(auditLog.status_code)}
146141
text={auditLog.status_code.toString()}
147142
/>
@@ -153,7 +148,7 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
153148
{shouldDisplayDiff ? (
154149
<div> {<DropdownArrow close={isDiffOpen} />}</div>
155150
) : (
156-
<div className={styles.columnWithoutDiff}></div>
151+
<div css={styles.columnWithoutDiff}></div>
157152
)}
158153
</Stack>
159154

@@ -167,37 +162,37 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
167162
);
168163
};
169164

170-
const useStyles = makeStyles((theme) => ({
165+
const styles = {
171166
auditLogCell: {
172167
padding: "0 !important",
173168
border: 0,
174169
},
175170

176-
auditLogHeader: {
171+
auditLogHeader: (theme) => ({
177172
padding: theme.spacing(2, 4),
178-
},
173+
}),
179174

180175
auditLogHeaderInfo: {
181176
flex: 1,
182177
},
183178

184-
auditLogSummary: {
185-
...theme.typography.body1,
179+
auditLogSummary: (theme) => ({
180+
...(theme.typography.body1 as CSSObject),
186181
fontFamily: "inherit",
187-
},
182+
}),
188183

189-
auditLogTime: {
184+
auditLogTime: (theme) => ({
190185
color: theme.palette.text.secondary,
191186
fontSize: 12,
192-
},
187+
}),
193188

194-
auditLogInfo: {
195-
...theme.typography.body2,
189+
auditLogInfo: (theme) => ({
190+
...(theme.typography.body2 as CSSObject),
196191
fontSize: 12,
197192
fontFamily: "inherit",
198193
color: theme.palette.text.secondary,
199194
display: "block",
200-
},
195+
}),
201196

202197
// offset the absence of the arrow icon on diff-less logs
203198
columnWithoutDiff: {
@@ -216,8 +211,8 @@ const useStyles = makeStyles((theme) => ({
216211
fontWeight: 600,
217212
},
218213

219-
deletedLabel: {
220-
...theme.typography.caption,
214+
deletedLabel: (theme) => ({
215+
...(theme.typography.caption as CSSObject),
221216
color: theme.palette.text.secondary,
222-
},
223-
}));
217+
}),
218+
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)