Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0cbd32b

Browse files
committed
emotion:AuditLogRow
1 parent9eec598 commit0cbd32b

File tree

1 file changed

+30
-35
lines changed

1 file changed

+30
-35
lines changed

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

Lines changed: 30 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
import{typeCSSObject,typeInterpolation,typeTheme}from"@emotion/react";
12
importCollapsefrom"@mui/material/Collapse";
2-
import{makeStyles}from"@mui/styles";
33
importTableCellfrom"@mui/material/TableCell";
4-
import{AuditLog}from"api/typesGenerated";
4+
importtype{AuditLog}from"api/typesGenerated";
55
import{DropdownArrow}from"components/DropdownArrow/DropdownArrow";
66
import{Pill,typePillType}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-
conststyles=useStyles();
4443
const[isDiffOpen,setIsDiffOpen]=useState(defaultIsDiffOpen);
4544
constdiffs=Object.entries(auditLog.diff);
4645
constshouldDisplayDiff=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-
<TableCellclassName={styles.auditLogCell}>
67+
<TableCellcss={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+
<Stackdirection="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
<AuditLogDescriptionauditLog={auditLog}/>
109104
{auditLog.is_deleted&&(
110-
<spanclassName={styles.deletedLabel}>
105+
<spancss={styles.deletedLabel}>
111106
<>(deleted)</>
112107
</span>
113108
)}
114-
<spanclassName={styles.auditLogTime}>
109+
<spancss={styles.auditLogTime}>
115110
{newDate(auditLog.time).toLocaleTimeString()}
116111
</span>
117112
</Stack>
118113

119114
<Stackdirection="row"alignItems="center">
120115
<Stackdirection="row"spacing={1}alignItems="baseline">
121116
{auditLog.ip&&(
122-
<spanclassName={styles.auditLogInfo}>
117+
<spancss={styles.auditLogInfo}>
123118
<>IP:</>
124119
<strong>{auditLog.ip}</strong>
125120
</span>
126121
)}
127122
{os.name&&(
128-
<spanclassName={styles.auditLogInfo}>
123+
<spancss={styles.auditLogInfo}>
129124
<>OS:</>
130125
<strong>{os.name}</strong>
131126
</span>
132127
)}
133128
{browser.name&&(
134-
<spanclassName={styles.auditLogInfo}>
129+
<spancss={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>{<DropdownArrowclose={isDiffOpen}/>}</div>
155150
) :(
156-
<divclassName={styles.columnWithoutDiff}></div>
151+
<divcss={styles.columnWithoutDiff}></div>
157152
)}
158153
</Stack>
159154

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

170-
constuseStyles=makeStyles((theme)=>({
165+
conststyles={
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.body1asCSSObject),
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.body2asCSSObject),
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.captionasCSSObject),
221216
color:theme.palette.text.secondary,
222-
},
223-
}));
217+
}),
218+
}satisfiesRecord<string,Interpolation<Theme>>;

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp