Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00
Code Issues Projects Releases Wiki Activity

Shaswat: Remove usage of useStyles from UserForm (#2619)

Browse Source 
Changes for [issue](https://github.com/Unleash/unleash/issues/2606)

Co-authored-by: Nuno Góis <github@nunogois.com>
This commit is contained in:
Shaswat Prabhat 2022-12-09 17:40:30 +05:30 committed by GitHub
parent 1bd95d44e5
commit 59c043e1ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 69 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/component/admin/users/UserForm/UserForm.styles.ts
View File

@ -1,60 +0,0 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
container: {
maxWidth: '400px',
},
form: {
display: 'flex',
flexDirection: 'column',
height: '100%',
},
input: { width: '100%', marginBottom: '1rem' },
label: {
minWidth: '300px',
[theme.breakpoints.down(600)]: {
minWidth: 'auto',
},
},
buttonContainer: {
marginTop: 'auto',
display: 'flex',
justifyContent: 'flex-end',
},
cancelButton: {
marginLeft: '1.5rem',
},
inputDescription: {
marginBottom: '0.5rem',
},
permissionErrorContainer: {
position: 'relative',
},
errorMessage: {
fontSize: theme.fontSizes.smallBody,
color: theme.palette.error.main,
position: 'absolute',
top: '-8px',
},
roleBox: {
margin: '3px 0',
border: '1px solid #EFEFEF',
padding: '1rem',
},
userInfoContainer: {
margin: '-20px 0',
},
roleRadio: {
marginRight: '15px',
},
roleSubtitle: {
margin: '0.5rem 0',
},
errorAlert: {
marginBottom: '1rem',
},
flexRow: {
display: 'flex',
alignItems: 'center',
},
}));

100
frontend/src/component/admin/users/UserForm/UserForm.tsx
View File

@ -7,14 +7,62 @@ import {
Typography,
Radio,
Switch,
styled,
} from '@mui/material';
import { useStyles } from './UserForm.styles';
import React from 'react';
import { useUsers } from 'hooks/api/getters/useUsers/useUsers';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { EDIT } from 'constants/misc';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
const StyledForm = styled('form')(() => ({
display: 'flex',
flexDirection: 'column',
height: '100%',
}));
const StyledContainer = styled('div')(({ theme }) => ({
maxWidth: theme.spacing(50),
}));
const StyledInputDescription = styled('p')(({ theme }) => ({
marginBottom: theme.spacing(1),
}));
const StyledInput = styled(Input)(({ theme }) => ({
width: '100%',
marginBottom: theme.spacing(2),
}));
const StyledRoleSubtitle = styled(Typography)(({ theme }) => ({
margin: theme.spacing(1, 0),
}));
const StyledRoleBox = styled(FormControlLabel)(({ theme }) => ({
margin: theme.spacing(0.5, 0),
border: `1px solid ${theme.palette.divider}`,
padding: theme.spacing(2),
}));
const StyledRoleRadio = styled(Radio)(({ theme }) => ({
marginRight: theme.spacing(2),
}));
const StyledFlexRow = styled('div')(() => ({
display: 'flex',
alignItems: 'center',
}));
const StyledButtonContainer = styled('div')(() => ({
marginTop: 'auto',
display: 'flex',
justifyContent: 'flex-end',
}));
const StyledCancelButton = styled(Button)(({ theme }) => ({
marginLeft: theme.spacing(3),
}));
interface IUserForm {
email: string;
name: string;
@ -47,7 +95,6 @@ const UserForm: React.FC<IUserForm> = ({
clearErrors,
mode,
}) => {
const { classes: styles } = useStyles();
const { roles } = useUsers();
const { uiConfig } = useUiConfig();
@ -62,13 +109,12 @@ const UserForm: React.FC<IUserForm> = ({
};
return (
<form onSubmit={handleSubmit} className={styles.form}>
<div className={styles.container}>
<p className={styles.inputDescription}>
<StyledForm onSubmit={handleSubmit}>
<StyledContainer>
<StyledInputDescription>
Who is the new Unleash user?
</p>
<Input
className={styles.input}
</StyledInputDescription>
<StyledInput
label="Full name"
value={name}
onChange={e => setName(e.target.value)}
@ -77,8 +123,7 @@ const UserForm: React.FC<IUserForm> = ({
onFocus={() => clearErrors()}
autoFocus
/>
<Input
className={styles.input}
<StyledInput
label="Email"
type="email"
value={email}
@ -88,13 +133,9 @@ const UserForm: React.FC<IUserForm> = ({
onFocus={() => clearErrors()}
/>
<FormControl>
<Typography
variant="subtitle1"
className={styles.roleSubtitle}
data-loading
>
<StyledRoleSubtitle variant="subtitle1" data-loading>
What is your team member allowed to do?
</Typography>
</StyledRoleSubtitle>
<RadioGroup
name="rootRole"
value={rootRole || ''}
@ -103,10 +144,9 @@ const UserForm: React.FC<IUserForm> = ({
>
{/* @ts-expect-error */}
{roles.sort(sortRoles).map(role => (
<FormControlLabel
<StyledRoleBox
key={`role-${role.id}`}
labelPlacement="end"
className={styles.roleBox}
label={
<div>
<strong>{role.name}</strong>
@ -116,9 +156,8 @@ const UserForm: React.FC<IUserForm> = ({
</div>
}
control={
<Radio
<StyledRoleRadio
checked={role.id === rootRole}
className={styles.roleRadio}
/>
}
value={role.id}
@ -130,14 +169,13 @@ const UserForm: React.FC<IUserForm> = ({
condition={mode !== EDIT && Boolean(uiConfig?.emailEnabled)}
show={
<FormControl>
<Typography
<StyledRoleSubtitle
variant="subtitle1"
className={styles.roleSubtitle}
data-loading
>
Should we send an email to your new team member
</Typography>
<div className={styles.flexRow}>
</StyledRoleSubtitle>
<StyledFlexRow>
<Switch
name="sendEmail"
onChange={() => setSendEmail(!sendEmail)}
@ -146,18 +184,18 @@ const UserForm: React.FC<IUserForm> = ({
<Typography>
{sendEmail ? 'Yes' : 'No'}
</Typography>
</div>
</StyledFlexRow>
</FormControl>
}
/>
</div>
<div className={styles.buttonContainer}>
</StyledContainer>
<StyledButtonContainer>
{children}
<Button onClick={handleCancel} className={styles.cancelButton}>
<StyledCancelButton onClick={handleCancel}>
Cancel
</Button>
</div>
</form>
</StyledCancelButton>
</StyledButtonContainer>
</StyledForm>
);
};