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

Commit5284d97

Browse files
authored
chore: use emotion for styling (pt. 7) (#10431)
1 parentec7d759 commit5284d97

File tree

21 files changed

+556
-668
lines changed

21 files changed

+556
-668
lines changed

‎site/src/components/Resources/AgentMetadata.tsx

Lines changed: 34 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
importmakeStylesfrom"@mui/styles/makeStyles";
21
import{watchAgentMetadata}from"api/api";
3-
import{WorkspaceAgent,WorkspaceAgentMetadata}from"api/typesGenerated";
2+
importtype{
3+
WorkspaceAgent,
4+
WorkspaceAgentMetadata,
5+
}from"api/typesGenerated";
46
import{Stack}from"components/Stack/Stack";
57
importdayjsfrom"dayjs";
68
import{
@@ -13,17 +15,15 @@ import {
1315
}from"react";
1416
importSkeletonfrom"@mui/material/Skeleton";
1517
import{MONOSPACE_FONT_FAMILY}from"theme/constants";
16-
import{combineClasses}from"utils/combineClasses";
1718
importTooltipfrom"@mui/material/Tooltip";
1819
importBox,{BoxProps}from"@mui/material/Box";
20+
import{typeInterpolation,typeTheme}from"@emotion/react";
1921

2022
typeItemStatus="stale"|"valid"|"loading";
2123

2224
exportconstWatchAgentMetadataContext=createContext(watchAgentMetadata);
2325

2426
constMetadataItem:FC<{item:WorkspaceAgentMetadata}>=({ item})=>{
25-
conststyles=useStyles();
26-
2727
if(item.result===undefined){
2828
thrownewError("Metadata item result is undefined");
2929
}
@@ -56,41 +56,29 @@ const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
5656
// could be buggy. But, how common is that anyways?
5757
constvalue=
5858
status==="loading" ?(
59-
<Skeleton
60-
width={65}
61-
height={12}
62-
variant="text"
63-
className={styles.skeleton}
64-
/>
59+
<Skeletonwidth={65}height={12}variant="text"css={styles.skeleton}/>
6560
) :status==="stale" ?(
6661
<Tooltiptitle="This data is stale and no longer up to date">
67-
<StaticWidth
68-
className={combineClasses([
69-
styles.metadataValue,
70-
styles.metadataStale,
71-
])}
72-
>
62+
<StaticWidthcss={[styles.metadataValue,styles.metadataStale]}>
7363
{item.result.value}
7464
</StaticWidth>
7565
</Tooltip>
7666
) :(
7767
<StaticWidth
78-
className={combineClasses([
68+
css={[
7969
styles.metadataValue,
8070
item.result.error.length===0
8171
?styles.metadataValueSuccess
8272
:styles.metadataValueError,
83-
])}
73+
]}
8474
>
8575
{item.result.value}
8676
</StaticWidth>
8777
);
8878

8979
return(
90-
<divclassName={styles.metadata}>
91-
<divclassName={styles.metadataLabel}>
92-
{item.description.display_name}
93-
</div>
80+
<divcss={styles.metadata}>
81+
<divcss={styles.metadataLabel}>{item.description.display_name}</div>
9482
<Box>{value}</Box>
9583
</div>
9684
);
@@ -101,12 +89,11 @@ export interface AgentMetadataViewProps {
10189
}
10290

10391
exportconstAgentMetadataView:FC<AgentMetadataViewProps>=({ metadata})=>{
104-
conststyles=useStyles();
10592
if(metadata.length===0){
10693
return<></>;
10794
}
10895
return(
109-
<divclassName={styles.root}>
96+
<divcss={styles.root}>
11097
<StackalignItems="baseline"direction="row"spacing={6}>
11198
{metadata.map((m)=>{
11299
if(m.description===undefined){
@@ -127,7 +114,6 @@ export const AgentMetadata: FC<{
127114
WorkspaceAgentMetadata[]|undefined
128115
>(undefined);
129116
constwatchAgentMetadata=useContext(WatchAgentMetadataContext);
130-
conststyles=useStyles();
131117

132118
useEffect(()=>{
133119
if(storybookMetadata!==undefined){
@@ -166,7 +152,7 @@ export const AgentMetadata: FC<{
166152

167153
if(metadata===undefined){
168154
return(
169-
<divclassName={styles.root}>
155+
<divcss={styles.root}>
170156
<AgentMetadataSkeleton/>
171157
</div>
172158
);
@@ -176,21 +162,19 @@ export const AgentMetadata: FC<{
176162
};
177163

178164
exportconstAgentMetadataSkeleton:FC=()=>{
179-
conststyles=useStyles();
180-
181165
return(
182166
<StackalignItems="baseline"direction="row"spacing={6}>
183-
<divclassName={styles.metadata}>
167+
<divcss={styles.metadata}>
184168
<Skeletonwidth={40}height={12}variant="text"/>
185169
<Skeletonwidth={65}height={14}variant="text"/>
186170
</div>
187171

188-
<divclassName={styles.metadata}>
172+
<divcss={styles.metadata}>
189173
<Skeletonwidth={40}height={12}variant="text"/>
190174
<Skeletonwidth={65}height={14}variant="text"/>
191175
</div>
192176

193-
<divclassName={styles.metadata}>
177+
<divcss={styles.metadata}>
194178
<Skeletonwidth={40}height={12}variant="text"/>
195179
<Skeletonwidth={65}height={14}variant="text"/>
196180
</div>
@@ -219,16 +203,16 @@ const StaticWidth = (props: BoxProps) => {
219203

220204
// These are more or less copied from
221205
// site/src/components/Resources/ResourceCard.tsx
222-
constuseStyles=makeStyles((theme)=>({
223-
root:{
206+
conststyles={
207+
root:(theme)=>({
224208
padding:theme.spacing(2.5,4),
225209
borderTop:`1px solid${theme.palette.divider}`,
226210
background:theme.palette.background.paper,
227211
overflowX:"auto",
228212
scrollPadding:theme.spacing(0,4),
229-
},
213+
}),
230214

231-
metadata:{
215+
metadata:(theme)=>({
232216
fontSize:12,
233217
lineHeight:"normal",
234218
display:"flex",
@@ -240,15 +224,15 @@ const useStyles = makeStyles((theme) => ({
240224
"&:last-child":{
241225
paddingRight:theme.spacing(4),
242226
},
243-
},
227+
}),
244228

245-
metadataLabel:{
229+
metadataLabel:(theme)=>({
246230
color:theme.palette.text.secondary,
247231
textOverflow:"ellipsis",
248232
overflow:"hidden",
249233
whiteSpace:"nowrap",
250234
fontWeight:500,
251-
},
235+
}),
252236

253237
metadataValue:{
254238
textOverflow:"ellipsis",
@@ -258,29 +242,29 @@ const useStyles = makeStyles((theme) => ({
258242
fontSize:14,
259243
},
260244

261-
metadataValueSuccess:{
245+
metadataValueSuccess:(theme)=>({
262246
color:theme.palette.success.light,
263-
},
247+
}),
264248

265-
metadataValueError:{
249+
metadataValueError:(theme)=>({
266250
color:theme.palette.error.main,
267-
},
251+
}),
268252

269-
metadataStale:{
253+
metadataStale:(theme)=>({
270254
color:theme.palette.text.disabled,
271255
cursor:"pointer",
272-
},
256+
}),
273257

274-
skeleton:{
258+
skeleton:(theme)=>({
275259
marginTop:theme.spacing(0.5),
276-
},
260+
}),
277261

278-
inlineCommand:{
262+
inlineCommand:(theme)=>({
279263
fontFamily:MONOSPACE_FONT_FAMILY,
280264
display:"inline-block",
281265
fontWeight:600,
282266
margin:0,
283267
borderRadius:4,
284268
color:theme.palette.text.primary,
285-
},
286-
}));
269+
}),
270+
}satisfiesRecord<string,Interpolation<Theme>>;

0 commit comments

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