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

feat(auth): add user and role management

Browse Source
This commit is contained in:
Ali BARIN
2023-07-18 21:00:10 +00:00
parent a7104c41a2
commit 0deaa03218
108 changed files with 2909 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,7 +10,6 @@ import {
useMatch,
useNavigate,
} from 'react-router-dom';
import type { LinkProps } from 'react-router-dom';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import Box from '@mui/material/Box';
@@ -67,41 +66,6 @@ export default function Application(): React.ReactElement | null {
const goToApplicationPage = () => navigate('connections');
const app = data?.getApp || {};
const NewConnectionLink = React.useMemo(
() =>
React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
function InlineLink(linkProps, ref) {
return (
<Link
ref={ref}
to={URLS.APP_ADD_CONNECTION(appKey)}
{...linkProps}
/>
);
}
),
[appKey]
);
const NewFlowLink = React.useMemo(
() =>
React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
function InlineLink(linkProps, ref) {
return (
<Link
ref={ref}
to={URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(
appKey,
connectionId
)}
{...linkProps}
/>
);
}
),
[appKey, connectionId]
);
if (loading) return null;
return (
@@ -131,7 +95,11 @@ export default function Application(): React.ReactElement | null {
variant="contained"
color="primary"
size="large"
component={NewFlowLink}
component={Link}
to={URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(
appKey,
connectionId
)}
fullWidth
icon={<AddIcon />}
>
@@ -148,7 +116,8 @@ export default function Application(): React.ReactElement | null {
variant="contained"
color="primary"
size="large"
component={NewConnectionLink}
component={Link}
to={URLS.APP_ADD_CONNECTION(appKey)}
fullWidth
icon={<AddIcon />}
data-test="add-connection-button"

42
packages/web/src/pages/Applications/index.tsx
View File

@@ -1,6 +1,5 @@
import * as React from 'react';
import { Link, Routes, Route, useNavigate } from 'react-router-dom';
import type { LinkProps } from 'react-router-dom';
import { useQuery } from '@apollo/client';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
@@ -9,6 +8,7 @@ import CircularProgress from '@mui/material/CircularProgress';
import AddIcon from '@mui/icons-material/Add';
import type { IApp } from '@automatisch/types';
import Can from 'components/Can';
import NoResultFound from 'components/NoResultFound';
import ConditionalIconButton from 'components/ConditionalIconButton';
import Container from 'components/Container';
@@ -39,16 +39,6 @@ export default function Applications(): React.ReactElement {
navigate(URLS.APPS);
}, [navigate]);
const NewAppConnectionLink = React.useMemo(
() =>
React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
function InlineLink(linkProps, ref) {
return <Link ref={ref} to={URLS.NEW_APP_CONNECTION} {...linkProps} />;
}
),
[]
);
return (
<Box sx={{ py: 3 }}>
<Container>
@@ -69,18 +59,24 @@ export default function Applications(): React.ReactElement {
alignItems="center"
order={{ xs: 1, sm: 2 }}
>
<ConditionalIconButton
type="submit"
variant="contained"
color="primary"
size="large"
component={NewAppConnectionLink}
fullWidth
icon={<AddIcon />}
data-test="add-connection-button"
>
{formatMessage('apps.addConnection')}
</ConditionalIconButton>
<Can I="create" a="Connection" passThrough>
{(allowed) => (
<ConditionalIconButton
type="submit"
variant="contained"
color="primary"
size="large"
component={Link}
to={URLS.NEW_APP_CONNECTION}
fullWidth
disabled={!allowed}
icon={<AddIcon />}
data-test="add-connection-button"
>
{formatMessage('apps.addConnection')}
</ConditionalIconButton>
)}
</Can>
</Grid>
</Grid>

82
packages/web/src/pages/CreateRole/index.ee.tsx Normal file
View File

@@ -0,0 +1,82 @@
import { useMutation } from '@apollo/client';
import LoadingButton from '@mui/lab/LoadingButton';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
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 Form from 'components/Form';
import PageTitle from 'components/PageTitle';
import TextField from 'components/TextField';
import * as URLS from 'config/urls';
import { CREATE_ROLE } from 'graphql/mutations/create-role.ee';
import {
RoleWithComputedPermissions,
getPermissions,
} from 'helpers/computePermissions.ee';
import useFormatMessage from 'hooks/useFormatMessage';
export default function CreateRole(): React.ReactElement {
const navigate = useNavigate();
const formatMessage = useFormatMessage();
const [createRole, { loading }] = useMutation(CREATE_ROLE);
const handleRoleCreation = async (roleData: Partial<RoleWithComputedPermissions>) => {
const permissions = getPermissions(roleData.computedPermissions);
await createRole({
variables: {
input: {
name: roleData.name,
description: roleData.description,
permissions,
}
}
});
navigate(URLS.ROLES);
};
return (
<Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
<Grid container item xs={12} sm={9} md={8} lg={6}>
<Grid item xs={12} sx={{ mb: [2, 5] }}>
<PageTitle>{formatMessage('createRolePage.title')}</PageTitle>
</Grid>
<Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
<Form onSubmit={handleRoleCreation}>
<Stack direction="column" gap={2}>
<TextField
required={true}
name="name"
label={formatMessage('roleForm.name')}
fullWidth
/>
<TextField
name="description"
label={formatMessage('roleForm.description')}
fullWidth
/>
<PermissionCatalogField name='computedPermissions' />
<LoadingButton
type="submit"
variant="contained"
color="primary"
sx={{ boxShadow: 2 }}
loading={loading}
>
{formatMessage('createRole.submit')}
</LoadingButton>
</Stack>
</Form>
</Grid>
</Grid>
</Container>
);
}

107
packages/web/src/pages/CreateUser/index.tsx Normal file
View File

@@ -0,0 +1,107 @@
import * as React from 'react';
import { useNavigate } from 'react-router-dom';
import { useMutation } from '@apollo/client';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
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 { CREATE_USER } from 'graphql/mutations/create-user.ee';
import * as URLS from 'config/urls';
import Can from 'components/Can';
import useRoles from 'hooks/useRoles.ee';
import PageTitle from 'components/PageTitle';
import Form from 'components/Form';
import ControlledAutocomplete from 'components/ControlledAutocomplete';
import TextField from 'components/TextField';
import useFormatMessage from 'hooks/useFormatMessage';
function generateRoleOptions(roles: IRole[]) {
return roles?.map(({ name: label, id: value }) => ({ label, value }));
}
export default function CreateUser(): React.ReactElement {
const navigate = useNavigate();
const formatMessage = useFormatMessage();
const [createUser, { loading }] = useMutation(CREATE_USER);
const { roles, loading: rolesLoading } = useRoles();
const handleUserCreation = async (userData: Partial<IUser>) => {
await createUser({
variables: {
input: {
fullName: userData.fullName,
password: userData.password,
email: userData.email,
role: {
id: userData.role?.id
}
}
}
});
navigate(URLS.USERS);
};
return (
<Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
<Grid container item xs={12} sm={9} md={8} lg={6}>
<Grid item xs={12} sx={{ mb: [2, 5] }}>
<PageTitle>{formatMessage('createUserPage.title')}</PageTitle>
</Grid>
<Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
<Form onSubmit={handleUserCreation}>
<Stack direction="column" gap={2}>
<TextField
required={true}
name="fullName"
label={formatMessage('userForm.fullName')}
fullWidth
/>
<TextField
required={true}
name="email"
label={formatMessage('userForm.email')}
fullWidth
/>
<TextField
required={true}
name="password"
label={formatMessage('userForm.password')}
type="password"
fullWidth
/>
<Can I='update' a='Role'>
<ControlledAutocomplete
name="role.id"
fullWidth
disablePortal
disableClearable={true}
options={generateRoleOptions(roles)}
renderInput={(params) => <MuiTextField {...params} label={formatMessage('userForm.role')} />}
loading={rolesLoading}
/>
</Can>
<LoadingButton
type="submit"
variant="contained"
color="primary"
sx={{ boxShadow: 2 }}
loading={loading}
>
{formatMessage('createUser.submit')}
</LoadingButton>
</Stack>
</Form>
</Grid>
</Grid>
</Container>
);
}

103
packages/web/src/pages/EditRole/index.ee.tsx Normal file
View File

@@ -0,0 +1,103 @@
import { useMutation } from '@apollo/client';
import LoadingButton from '@mui/lab/LoadingButton';
import Container from '@mui/material/Container';
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 Form from 'components/Form';
import PageTitle from 'components/PageTitle';
import PermissionCatalogField from 'components/PermissionCatalogField/index.ee';
import TextField from 'components/TextField';
import * as URLS from 'config/urls';
import { UPDATE_ROLE } from 'graphql/mutations/update-role.ee';
import {
RoleWithComputedPermissions,
getPermissions,
getRoleWithComputedPermissions,
} from 'helpers/computePermissions.ee';
import useFormatMessage from 'hooks/useFormatMessage';
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();
const [updateRole, { loading }] = useMutation(UPDATE_ROLE);
const navigate = useNavigate();
const { roleId } = useParams<EditRoleParams>();
const { role, loading: roleLoading } = useRole(roleId);
const handleRoleUpdate = async (roleData: Partial<RoleWithComputedPermissions>) => {
const newPermissions = getPermissions(roleData.computedPermissions);
await updateRole({
variables: {
input: {
id: roleId,
name: roleData.name,
description: roleData.description,
permissions: newPermissions,
}
},
});
navigate(URLS.ROLES);
};
if (roleLoading || !role) return <React.Fragment />;
const roleWithComputedPermissions = getRoleWithComputedPermissions(role);
return (
<Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
<Grid container item xs={12} sm={9} md={8} lg={6}>
<Grid item xs={12} sx={{ mb: [2, 5] }}>
<PageTitle>{formatMessage('editRolePage.title')}</PageTitle>
</Grid>
<Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
<Form
defaultValues={roleWithComputedPermissions}
onSubmit={handleRoleUpdate}
>
<Stack direction="column" gap={2}>
<TextField
disabled={role.isAdmin}
required={true}
name="name"
label={formatMessage('roleForm.name')}
fullWidth
/>
<TextField
disabled={role.isAdmin}
name="description"
label={formatMessage('roleForm.description')}
fullWidth
/>
<PermissionCatalogField name='computedPermissions' disabled={role.isAdmin} />
<LoadingButton
type="submit"
variant="contained"
color="primary"
sx={{ boxShadow: 2 }}
loading={loading}
disabled={role.isAdmin}
>
{formatMessage('editRole.submit')}
</LoadingButton>
</Stack>
</Form>
</Grid>
</Grid>
</Container>
);
}

106
packages/web/src/pages/EditUser/index.tsx Normal file
View File

@@ -0,0 +1,106 @@
import * as React from 'react';
import { useParams } from 'react-router-dom';
import { useMutation } from '@apollo/client';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
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 { UPDATE_USER } from 'graphql/mutations/update-user.ee';
import Can from 'components/Can';
import useUser from 'hooks/useUser';
import useRoles from 'hooks/useRoles.ee';
import PageTitle from 'components/PageTitle';
import Form from 'components/Form';
import ControlledAutocomplete from 'components/ControlledAutocomplete';
import TextField from 'components/TextField';
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();
const [updateUser, { loading }] = useMutation(UPDATE_USER);
const { userId } = useParams<EditUserParams>();
const { user, loading: userLoading } = useUser(userId);
const { roles, loading: rolesLoading } = useRoles();
const handleUserUpdate = (userDataToUpdate: Partial<IUser>) => {
updateUser({
variables: {
input: {
id: userId,
fullName: userDataToUpdate.fullName,
email: userDataToUpdate.email,
role: {
id: userDataToUpdate.role?.id
}
}
}
});
};
if (userLoading) return <React.Fragment />;
return (
<Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
<Grid container item xs={12} sm={9} md={8} lg={6}>
<Grid item xs={12} sx={{ mb: [2, 5] }}>
<PageTitle>{formatMessage('editUserPage.title')}</PageTitle>
</Grid>
<Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
<Form defaultValues={user} onSubmit={handleUserUpdate}>
<Stack direction="column" gap={2}>
<TextField
required={true}
name="fullName"
label={formatMessage('userForm.fullName')}
fullWidth
/>
<TextField
required={true}
name="email"
label={formatMessage('userForm.email')}
fullWidth
/>
<Can I='update' a='Role'>
<ControlledAutocomplete
name="role.id"
fullWidth
disablePortal
disableClearable={true}
options={generateRoleOptions(roles)}
renderInput={(params) => <MuiTextField {...params} label={formatMessage('userForm.role')} />}
loading={rolesLoading}
/>
</Can>
<LoadingButton
type="submit"
variant="contained"
color="primary"
sx={{ boxShadow: 2 }}
loading={loading}
>
{formatMessage('editUser.submit')}
</LoadingButton>
</Stack>
</Form>
</Grid>
</Grid>
</Container>
);
}

42
packages/web/src/pages/Flows/index.tsx
View File

@@ -1,6 +1,5 @@
import * as React from 'react';
import { Link, useSearchParams } from 'react-router-dom';
import type { LinkProps } from 'react-router-dom';
import { useLazyQuery } from '@apollo/client';
import debounce from 'lodash/debounce';
import Box from '@mui/material/Box';
@@ -12,6 +11,7 @@ import Pagination from '@mui/material/Pagination';
import PaginationItem from '@mui/material/PaginationItem';
import type { IFlow } from '@automatisch/types';
import Can from 'components/Can';
import FlowRow from 'components/FlowRow';
import NoResultFound from 'components/NoResultFound';
import ConditionalIconButton from 'components/ConditionalIconButton';
@@ -88,16 +88,6 @@ export default function Flows(): React.ReactElement {
setFlowName(event.target.value);
}, []);
const CreateFlowLink = React.useMemo(
() =>
React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
function InlineLink(linkProps, ref) {
return <Link ref={ref} to={URLS.CREATE_FLOW} {...linkProps} />;
}
),
[]
);
return (
<Box sx={{ py: 3 }}>
<Container>
@@ -118,18 +108,24 @@ export default function Flows(): React.ReactElement {
alignItems="center"
order={{ xs: 1, sm: 2 }}
>
<ConditionalIconButton
type="submit"
variant="contained"
color="primary"
size="large"
component={CreateFlowLink}
fullWidth
icon={<AddIcon />}
data-test="create-flow-button"
>
{formatMessage('flows.create')}
</ConditionalIconButton>
<Can I="create" a="Flow" passThrough>
{(allowed) => (
<ConditionalIconButton
type="submit"
variant="contained"
color="primary"
size="large"
component={Link}
fullWidth
disabled={!allowed}
icon={<AddIcon />}
to={URLS.CREATE_FLOW}
data-test="create-flow-button"
>
{formatMessage('flows.create')}
</ConditionalIconButton>
)}
</Can>
</Grid>
</Grid>

10
packages/web/src/pages/ProfileSettings/index.tsx
View File

@@ -15,7 +15,7 @@ import Container from 'components/Container';
import Form from 'components/Form';
import TextField from 'components/TextField';
import DeleteAccountDialog from 'components/DeleteAccountDialog/index.ee';
import { UPDATE_USER } from 'graphql/mutations/update-user';
import { UPDATE_CURRENT_USER } from 'graphql/mutations/update-current-user';
import useFormatMessage from 'hooks/useFormatMessage';
import useCurrentUser from 'hooks/useCurrentUser';
@@ -47,7 +47,7 @@ function ProfileSettings() {
const { enqueueSnackbar } = useSnackbar();
const currentUser = useCurrentUser();
const formatMessage = useFormatMessage();
const [updateUser] = useMutation(UPDATE_USER);
const [updateCurrentUser] = useMutation(UPDATE_CURRENT_USER);
const handleProfileSettingsUpdate = async (data: any) => {
const { fullName, password, email } = data;
@@ -61,12 +61,12 @@ function ProfileSettings() {
mutationInput.password = password;
}
await updateUser({
await updateCurrentUser({
variables: {
input: mutationInput,
},
optimisticResponse: {
updateUser: {
updateCurrentUser: {
__typename: 'User',
id: currentUser.id,
fullName,
@@ -89,7 +89,7 @@ function ProfileSettings() {
</Grid>
<Grid item xs={12} justifyContent="flex-end">
<StyledForm
<StyledForm
defaultValues={{ ...currentUser, password: '', confirmPassword: '' }}
onSubmit={handleProfileSettingsUpdate}
resolver={yupResolver(validationSchema)}

55
packages/web/src/pages/Roles/index.ee.tsx Normal file
View File

@@ -0,0 +1,55 @@
import * as React from 'react';
import { Link } from 'react-router-dom';
import Grid from '@mui/material/Grid';
import AddIcon from '@mui/icons-material/Add';
import * as URLS from 'config/urls';
import PageTitle from 'components/PageTitle';
import Container from 'components/Container';
import RoleList from 'components/RoleList/index.ee';
import ConditionalIconButton from 'components/ConditionalIconButton';
import useFormatMessage from 'hooks/useFormatMessage';
function RolesPage() {
const formatMessage = useFormatMessage();
return (
<Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
<Grid container item xs={12} sm={10} md={9}>
<Grid container sx={{ mb: [0, 3] }} columnSpacing={1.5} rowSpacing={3}>
<Grid container item xs sm alignItems="center">
<PageTitle>{formatMessage('rolesPage.title')}</PageTitle>
</Grid>
<Grid
container
item
xs="auto"
sm="auto"
alignItems="center"
>
<ConditionalIconButton
type="submit"
variant="contained"
color="primary"
size="large"
component={Link}
to={URLS.CREATE_ROLE}
fullWidth
icon={<AddIcon />}
data-test="create-role"
>
{formatMessage('rolesPage.createRole')}
</ConditionalIconButton>
</Grid>
</Grid>
<Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
<RoleList />
</Grid>
</Grid>
</Container>
);
}
export default RolesPage;

55
packages/web/src/pages/Users/index.tsx Normal file
View File

@@ -0,0 +1,55 @@
import * as React from 'react';
import { Link } from 'react-router-dom';
import Grid from '@mui/material/Grid';
import AddIcon from '@mui/icons-material/Add';
import * as URLS from 'config/urls';
import PageTitle from 'components/PageTitle';
import Container from 'components/Container';
import UserList from 'components/UserList';
import ConditionalIconButton from 'components/ConditionalIconButton';
import useFormatMessage from 'hooks/useFormatMessage';
function UsersPage() {
const formatMessage = useFormatMessage();
return (
<Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
<Grid container item xs={12} sm={10} md={9}>
<Grid container sx={{ mb: [0, 3] }} columnSpacing={1.5} rowSpacing={3}>
<Grid container item xs sm alignItems="center">
<PageTitle>{formatMessage('usersPage.title')}</PageTitle>
</Grid>
<Grid
container
item
xs="auto"
sm="auto"
alignItems="center"
>
<ConditionalIconButton
type="submit"
variant="contained"
color="primary"
size="large"
component={Link}
to={URLS.CREATE_USER}
fullWidth
icon={<AddIcon />}
data-test="create-user"
>
{formatMessage('usersPage.createUser')}
</ConditionalIconButton>
</Grid>
</Grid>
<Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
<UserList />
</Grid>
</Grid>
</Container>
);
}
export default UsersPage;