groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(auth): add feedback state for user and role management (#1191)

Browse Source
This commit is contained in:
Rıdvan Akca
2023-08-07 12:08:29 +03:00
committed by GitHub
parent 7ca37c412e
commit b4cda90338
10 changed files with 161 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/web/src/pages/CreateRole/index.ee.tsx
View File

@@ -6,6 +6,7 @@ import Stack from '@mui/material/Stack';
import * as React from 'react';
import { useNavigate } from 'react-router-dom';
import PermissionCatalogField from 'components/PermissionCatalogField/index.ee';
import { useSnackbar } from 'notistack';
import Form from 'components/Form';
import PageTitle from 'components/PageTitle';
@@ -22,21 +23,32 @@ export default function CreateRole(): React.ReactElement {
const navigate = useNavigate();
const formatMessage = useFormatMessage();
const [createRole, { loading }] = useMutation(CREATE_ROLE);
const { enqueueSnackbar } = useSnackbar();
const handleRoleCreation = async (roleData: Partial<RoleWithComputedPermissions>) => {
const permissions = getPermissions(roleData.computedPermissions);
const handleRoleCreation = async (
roleData: Partial<RoleWithComputedPermissions>
) => {
try {
const permissions = getPermissions(roleData.computedPermissions);
await createRole({
variables: {
input: {
name: roleData.name,
description: roleData.description,
permissions,
}
}
});
await createRole({
variables: {
input: {
name: roleData.name,
description: roleData.description,
permissions,
},
},
});
navigate(URLS.ROLES);
enqueueSnackbar(formatMessage('createRole.successfullyCreated'), {
variant: 'success',
});
navigate(URLS.ROLES);
} catch (error) {
throw new Error('Failed while creating!');
}
};
return (
@@ -62,7 +74,7 @@ export default function CreateRole(): React.ReactElement {
fullWidth
/>
<PermissionCatalogField name='computedPermissions' />
<PermissionCatalogField name="computedPermissions" />
<LoadingButton
type="submit"

45
packages/web/src/pages/CreateUser/index.tsx
View File

@@ -7,6 +7,7 @@ import Stack from '@mui/material/Stack';
import MuiTextField from '@mui/material/TextField';
import LoadingButton from '@mui/lab/LoadingButton';
import { IUser, IRole } from '@automatisch/types';
import { useSnackbar } from 'notistack';
import { CREATE_USER } from 'graphql/mutations/create-user.ee';
import * as URLS from 'config/urls';
@@ -27,22 +28,31 @@ export default function CreateUser(): React.ReactElement {
const formatMessage = useFormatMessage();
const [createUser, { loading }] = useMutation(CREATE_USER);
const { roles, loading: rolesLoading } = useRoles();
const { enqueueSnackbar } = useSnackbar();
const handleUserCreation = async (userData: Partial<IUser>) => {
await createUser({
variables: {
input: {
fullName: userData.fullName,
password: userData.password,
email: userData.email,
role: {
id: userData.role?.id
}
}
}
});
try {
await createUser({
variables: {
input: {
fullName: userData.fullName,
password: userData.password,
email: userData.email,
role: {
id: userData.role?.id,
},
},
},
});
navigate(URLS.USERS);
enqueueSnackbar(formatMessage('createUser.successfullyCreated'), {
variant: 'success',
});
navigate(URLS.USERS);
} catch (error) {
throw new Error('Failed while creating!');
}
};
return (
@@ -77,14 +87,19 @@ export default function CreateUser(): React.ReactElement {
fullWidth
/>
<Can I='update' a='Role'>
<Can I="update" a="Role">
<ControlledAutocomplete
name="role.id"
fullWidth
disablePortal
disableClearable={true}
options={generateRoleOptions(roles)}
renderInput={(params) => <MuiTextField {...params} label={formatMessage('userForm.role')} />}
renderInput={(params) => (
<MuiTextField
{...params}
label={formatMessage('userForm.role')}
/>
)}
loading={rolesLoading}
/>
</Can>

46
packages/web/src/pages/EditRole/index.ee.tsx
View File

@@ -5,6 +5,7 @@ import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import * as React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useSnackbar } from 'notistack';
import Form from 'components/Form';
import PageTitle from 'components/PageTitle';
@@ -22,9 +23,8 @@ import useRole from 'hooks/useRole.ee';
type EditRoleParams = {
roleId: string;
}
};
// TODO: introduce interaction feedback upon deletion (successful + failure)
// TODO: introduce loading bar
export default function EditRole(): React.ReactElement {
const formatMessage = useFormatMessage();
@@ -32,22 +32,33 @@ export default function EditRole(): React.ReactElement {
const navigate = useNavigate();
const { roleId } = useParams<EditRoleParams>();
const { role, loading: roleLoading } = useRole(roleId);
const { enqueueSnackbar } = useSnackbar();
const handleRoleUpdate = async (roleData: Partial<RoleWithComputedPermissions>) => {
const newPermissions = getPermissions(roleData.computedPermissions);
const handleRoleUpdate = async (
roleData: Partial<RoleWithComputedPermissions>
) => {
try {
const newPermissions = getPermissions(roleData.computedPermissions);
await updateRole({
variables: {
input: {
id: roleId,
name: roleData.name,
description: roleData.description,
permissions: newPermissions,
}
},
});
await updateRole({
variables: {
input: {
id: roleId,
name: roleData.name,
description: roleData.description,
permissions: newPermissions,
},
},
});
navigate(URLS.ROLES);
enqueueSnackbar(formatMessage('editRole.successfullyUpdated'), {
variant: 'success',
});
navigate(URLS.ROLES);
} catch (error) {
throw new Error('Failed while updating!');
}
};
if (roleLoading || !role) return <React.Fragment />;
@@ -82,7 +93,10 @@ export default function EditRole(): React.ReactElement {
fullWidth
/>
<PermissionCatalogField name='computedPermissions' disabled={role.isAdmin} />
<PermissionCatalogField
name="computedPermissions"
disabled={role.isAdmin}
/>
<LoadingButton
type="submit"

54
packages/web/src/pages/EditUser/index.tsx
View File

@@ -1,5 +1,5 @@
import * as React from 'react';
import { useParams } from 'react-router-dom';
import { useParams, useNavigate } from 'react-router-dom';
import { useMutation } from '@apollo/client';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
@@ -7,9 +7,11 @@ import Stack from '@mui/material/Stack';
import MuiTextField from '@mui/material/TextField';
import LoadingButton from '@mui/lab/LoadingButton';
import { IUser, IRole } from '@automatisch/types';
import { useSnackbar } from 'notistack';
import { UPDATE_USER } from 'graphql/mutations/update-user.ee';
import Can from 'components/Can';
import * as URLS from 'config/urls';
import useUser from 'hooks/useUser';
import useRoles from 'hooks/useRoles.ee';
import PageTitle from 'components/PageTitle';
@@ -20,13 +22,12 @@ import useFormatMessage from 'hooks/useFormatMessage';
type EditUserParams = {
userId: string;
}
};
function generateRoleOptions(roles: IRole[]) {
return roles?.map(({ name: label, id: value }) => ({ label, value }));
}
// TODO: introduce interaction feedback upon deletion (successful + failure)
// TODO: introduce loading bar
export default function EditUser(): React.ReactElement {
const formatMessage = useFormatMessage();
@@ -34,20 +35,32 @@ export default function EditUser(): React.ReactElement {
const { userId } = useParams<EditUserParams>();
const { user, loading: userLoading } = useUser(userId);
const { roles, loading: rolesLoading } = useRoles();
const { enqueueSnackbar } = useSnackbar();
const navigate = useNavigate();
const handleUserUpdate = (userDataToUpdate: Partial<IUser>) => {
updateUser({
variables: {
input: {
id: userId,
fullName: userDataToUpdate.fullName,
email: userDataToUpdate.email,
role: {
id: userDataToUpdate.role?.id
}
}
}
});
const handleUserUpdate = async (userDataToUpdate: Partial<IUser>) => {
try {
await updateUser({
variables: {
input: {
id: userId,
fullName: userDataToUpdate.fullName,
email: userDataToUpdate.email,
role: {
id: userDataToUpdate.role?.id,
},
},
},
});
enqueueSnackbar(formatMessage('editUser.successfullyUpdated'), {
variant: 'success',
});
navigate(URLS.USERS);
} catch (error) {
throw new Error('Failed while updating!');
}
};
if (userLoading) return <React.Fragment />;
@@ -76,14 +89,19 @@ export default function EditUser(): React.ReactElement {
fullWidth
/>
<Can I='update' a='Role'>
<Can I="update" a="Role">
<ControlledAutocomplete
name="role.id"
fullWidth
disablePortal
disableClearable={true}
options={generateRoleOptions(roles)}
renderInput={(params) => <MuiTextField {...params} label={formatMessage('userForm.role')} />}
renderInput={(params) => (
<MuiTextField
{...params}
label={formatMessage('userForm.role')}
/>
)}
loading={rolesLoading}
/>
</Can>