opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-23 22:20:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Add description to the roles options (#4480)

Browse Source
This commit is contained in:
Bruno Quaresma
2022-10-11 14:08:13 -03:00
committed by GitHub
parent 443173c071
commit aefb477e21
1 changed files with 49 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
+49 -23
View File
@@ -1,5 +1,5 @@
import MenuItem from "@material-ui/core/MenuItem"
import Select from "@material-ui/core/Select"
import Select, { SelectProps } from "@material-ui/core/Select"
import { makeStyles } from "@material-ui/core/styles"
import Table from "@material-ui/core/Table"
import TableBody from "@material-ui/core/TableBody"
@@ -118,6 +118,34 @@ const AddTemplateUserOrGroup: React.FC<AddTemplateUserOrGroupProps> = ({
)
}
const RoleSelect: FC<SelectProps> = (props) => {
const styles = useStyles()
return (
<Select
renderValue={(value) => <div className={styles.role}>{`${value}`}</div>}
variant="outlined"
className={styles.updateSelect}
{...props}
>
<MenuItem key="view" value="view" className={styles.menuItem}>
<div>
<div>View</div>
<div className={styles.menuItemSecondary}>Read, access</div>
</div>
</MenuItem>
<MenuItem key="admin" value="admin" className={styles.menuItem}>
<div>
<div>Admin</div>
<div className={styles.menuItemSecondary}>
Read, access, edit, push, and delete
</div>
</div>
</MenuItem>
</Select>
)
}
export interface TemplatePermissionsPageViewProps {
templateACL: TemplateACL | undefined
organizationId: string
@@ -218,10 +246,8 @@ export const TemplatePermissionsPageView: FC<
<TableCell>
<ChooseOne>
<Cond condition={canUpdatePermissions}>
<Select
<RoleSelect
value={group.role}
variant="outlined"
className={styles.updateSelect}
disabled={
updatingGroup && updatingGroup.id === group.id
}
@@ -231,14 +257,7 @@ export const TemplatePermissionsPageView: FC<
event.target.value as TemplateRole,
)
}}
>
<MenuItem key="view" value="view">
View
</MenuItem>
<MenuItem key="admin" value="admin">
Admin
</MenuItem>
</Select>
/>
</Cond>
<Cond>
<div className={styles.role}>{group.role}</div>
@@ -283,10 +302,8 @@ export const TemplatePermissionsPageView: FC<
<TableCell>
<ChooseOne>
<Cond condition={canUpdatePermissions}>
<Select
<RoleSelect
value={user.role}
variant="outlined"
className={styles.updateSelect}
disabled={
updatingUser && updatingUser.id === user.id
}
@@ -296,14 +313,7 @@ export const TemplatePermissionsPageView: FC<
event.target.value as TemplateRole,
)
}}
>
<MenuItem key="view" value="view">
View
</MenuItem>
<MenuItem key="admin" value="admin">
Admin
</MenuItem>
</Select>
/>
</Cond>
<Cond>
<div className={styles.role}>{user.role}</div>
@@ -355,15 +365,31 @@ export const useStyles = makeStyles((theme) => {
// Set a fixed width for the select. It avoids selects having different sizes
// depending on how many roles they have selected.
width: theme.spacing(25),
"& .MuiSelect-root": {
// Adjusting padding because it does not have label
paddingTop: theme.spacing(1.5),
paddingBottom: theme.spacing(1.5),
".secondary": {
display: "none",
},
},
},
role: {
textTransform: "capitalize",
},
menuItem: {
lineHeight: "140%",
paddingTop: theme.spacing(1.5),
paddingBottom: theme.spacing(1.5),
},
menuItemSecondary: {
fontSize: 14,
color: theme.palette.text.secondary,
},
}
})