Skip to content

Commit d621d05

Browse files
aslilacaslilac
committed
emotion: TemplatePermissionsPageView 
1 parent 9ce12e8 commit d621d05

File tree

1 file changed

+22
-26
lines changed

1 file changed

+22
-26
lines changed

‎site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import MenuItem from "@mui/material/MenuItem";
2-
import Select, { SelectProps } from "@mui/material/Select";
3-
import { makeStyles } from "@mui/styles";
2+
import Select, { type SelectProps } from "@mui/material/Select";
43
import Table from "@mui/material/Table";
54
import TableBody from "@mui/material/TableBody";
65
import TableCell from "@mui/material/TableCell";
76
import TableContainer from "@mui/material/TableContainer";
87
import TableHead from "@mui/material/TableHead";
98
import TableRow from "@mui/material/TableRow";
109
import PersonAdd from "@mui/icons-material/PersonAdd";
11-
import {
10+
import { type Interpolation, type Theme } from "@emotion/react";
11+
import type {
1212
Group,
1313
TemplateACL,
1414
TemplateGroup,
@@ -26,7 +26,7 @@ import {
2626
UserOrGroupAutocomplete,
2727
UserOrGroupAutocompleteValue,
2828
} from "components/UserOrGroupAutocomplete/UserOrGroupAutocomplete";
29-
import { FC, useState } from "react";
29+
import { type FC, useState } from "react";
3030
import { GroupAvatar } from "components/GroupAvatar/GroupAvatar";
3131
import { getGroupSubtitle } from "utils/groups";
3232
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
@@ -50,7 +50,6 @@ const AddTemplateUserOrGroup: React.FC<AddTemplateUserOrGroupProps> = ({
5050
templateID,
5151
templateACL,
5252
}) => {
53-
const styles = useStyles();
5453
const [selectedOption, setSelectedOption] =
5554
useState<UserOrGroupAutocompleteValue>(null);
5655
const [selectedRole, setSelectedRole] = useState<TemplateRole>("use");
@@ -94,7 +93,7 @@ const AddTemplateUserOrGroup: React.FC<AddTemplateUserOrGroupProps> = ({
9493
<Select
9594
defaultValue="use"
9695
size="small"
97-
className={styles.select}
96+
css={styles.select}
9897
disabled={isLoading}
9998
onChange={(event) => {
10099
setSelectedRole(event.target.value as TemplateRole);
@@ -122,26 +121,24 @@ const AddTemplateUserOrGroup: React.FC<AddTemplateUserOrGroupProps> = ({
122121
};
123122

124123
const RoleSelect: FC<SelectProps> = (props) => {
125-
const styles = useStyles();
126-
127124
return (
128125
<Select
129-
renderValue={(value) => <div className={styles.role}>{`${value}`}</div>}
130-
className={styles.updateSelect}
126+
renderValue={(value) => <div css={styles.role}>{`${value}`}</div>}
127+
css={styles.updateSelect}
131128
{...props}
132129
>
133-
<MenuItem key="use" value="use" className={styles.menuItem}>
130+
<MenuItem key="use" value="use" css={styles.menuItem}>
134131
<div>
135132
<div>Use</div>
136-
<div className={styles.menuItemSecondary}>
133+
<div css={styles.menuItemSecondary}>
137134
Can read and use this template to create workspaces.
138135
</div>
139136
</div>
140137
</MenuItem>
141-
<MenuItem key="admin" value="admin" className={styles.menuItem}>
138+
<MenuItem key="admin" value="admin" css={styles.menuItem}>
142139
<div>
143140
<div>Admin</div>
144-
<div className={styles.menuItemSecondary}>
141+
<div css={styles.menuItemSecondary}>
145142
Can modify all aspects of this template including permissions,
146143
metadata, and template versions.
147144
</div>
@@ -198,7 +195,6 @@ export const TemplatePermissionsPageView: FC<
198195
onUpdateGroup,
199196
onRemoveGroup,
200197
}) => {
201-
const styles = useStyles();
202198
const isEmpty = Boolean(
203199
templateACL &&
204200
templateACL.users.length === 0 &&
@@ -207,7 +203,7 @@ export const TemplatePermissionsPageView: FC<
207203

208204
return (
209205
<>
210-
<PageHeader className={styles.pageHeader}>
206+
<PageHeader css={styles.pageHeader}>
211207
<PageHeaderTitle>Permissions</PageHeaderTitle>
212208
</PageHeader>
213209

@@ -281,7 +277,7 @@ export const TemplatePermissionsPageView: FC<
281277
/>
282278
</Cond>
283279
<Cond>
284-
<div className={styles.role}>{group.role}</div>
280+
<div css={styles.role}>{group.role}</div>
285281
</Cond>
286282
</ChooseOne>
287283
</TableCell>
@@ -329,7 +325,7 @@ export const TemplatePermissionsPageView: FC<
329325
/>
330326
</Cond>
331327
<Cond>
332-
<div className={styles.role}>{user.role}</div>
328+
<div css={styles.role}>{user.role}</div>
333329
</Cond>
334330
</ChooseOne>
335331
</TableCell>
@@ -360,14 +356,14 @@ export const TemplatePermissionsPageView: FC<
360356
);
361357
};
362358

363-
export const useStyles = makeStyles((theme) => ({
359+
const styles = {
364360
select: {
365361
// Match button small height
366362
fontSize: 14,
367363
width: 100,
368364
},
369365

370-
updateSelect: {
366+
updateSelect: (theme) => ({
371367
margin: 0,
372368
// Set a fixed width for the select. It avoids selects having different sizes
373369
// depending on how many roles they have selected.
@@ -382,26 +378,26 @@ export const useStyles = makeStyles((theme) => ({
382378
display: "none",
383379
},
384380
},
385-
},
381+
}),
386382

387383
role: {
388384
textTransform: "capitalize",
389385
},
390386

391-
menuItem: {
387+
menuItem: (theme) => ({
392388
lineHeight: "140%",
393389
paddingTop: theme.spacing(1.5),
394390
paddingBottom: theme.spacing(1.5),
395391
whiteSpace: "normal",
396392
inlineSize: "250px",
397-
},
393+
}),
398394

399-
menuItemSecondary: {
395+
menuItemSecondary: (theme) => ({
400396
fontSize: 14,
401397
color: theme.palette.text.secondary,
402-
},
398+
}),
403399

404400
pageHeader: {
405401
paddingTop: 0,
406402
},
407-
}));
403+
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)