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

feat(auth): add loading state for user and role management (#1188)

Browse Source
This commit is contained in:
Rıdvan Akca
2023-08-09 22:51:07 +03:00
committed by GitHub
parent ce8c9906cb
commit 5046c4c911
10 changed files with 308 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
packages/web/src/components/ListLoader/index.tsx Normal file
View File

@@ -0,0 +1,47 @@
import {
IconButton,
Skeleton,
Stack,
TableCell,
TableRow,
} from '@mui/material';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
type ListLoaderProps = {
rowsNumber: number;
columnsNumber: number;
};
const ListLoader = ({ rowsNumber, columnsNumber }: ListLoaderProps) => {
return (
<>
{[...Array(rowsNumber)].map((row, index) => (
<TableRow
key={index}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
{[...Array(columnsNumber)].map((cell, index) => (
<TableCell key={index} scope="row">
<Skeleton />
</TableCell>
))}
<TableCell>
<Stack direction="row" gap={1} justifyContent="right">
<IconButton size="small">
<EditIcon />
</IconButton>
<IconButton size="small">
<DeleteIcon />
</IconButton>
</Stack>
</TableCell>
</TableRow>
))}
</>
);
};
export default ListLoader;

61
packages/web/src/components/PermissionCatalogField/PermissionCatalogFieldLoader/index.tsx Normal file
View File

@@ -0,0 +1,61 @@
import {
IconButton,
Skeleton,
Stack,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Typography,
} from '@mui/material';
import SettingsIcon from '@mui/icons-material/Settings';
import ControlledCheckbox from 'components/ControlledCheckbox';
const PermissionCatalogFieldLoader = () => {
return (
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell component="th" />
{[...Array(5)].map((row, index) => (
<TableCell key={index} component="th">
<Skeleton />
</TableCell>
))}
<TableCell component="th" />
</TableRow>
</TableHead>
<TableBody>
{[...Array(3)].map((row, index) => (
<TableRow key={index} sx={{ '&:last-child td': { border: 0 } }}>
<TableCell scope="row">
<Skeleton width={40} />
</TableCell>
{[...Array(5)].map((action, index) => (
<TableCell key={index} align="center">
<Typography variant="subtitle2">
<ControlledCheckbox name="value" />
</Typography>
</TableCell>
))}
<TableCell>
<Stack direction="row" gap={1} justifyContent="right">
<IconButton color="info" size="small">
<SettingsIcon />
</IconButton>
</Stack>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
};
export default PermissionCatalogFieldLoader;

37
packages/web/src/components/PermissionCatalogField/index.ee.tsx
View File

@@ -14,17 +14,21 @@ import * as React from 'react';
import ControlledCheckbox from 'components/ControlledCheckbox';
import usePermissionCatalog from 'hooks/usePermissionCatalog.ee';
import PermissionSettings from './PermissionSettings.ee';
import PermissionCatalogFieldLoader from './PermissionCatalogFieldLoader';
type PermissionCatalogFieldProps = {
name?: string;
disabled?: boolean;
};
const PermissionCatalogField = ({ name = 'permissions', disabled = false }: PermissionCatalogFieldProps) => {
const permissionCatalog = usePermissionCatalog();
const PermissionCatalogField = ({
name = 'permissions',
disabled = false,
}: PermissionCatalogFieldProps) => {
const { permissionCatalog, loading } = usePermissionCatalog();
const [dialogName, setDialogName] = React.useState<string>();
if (!permissionCatalog) return (<React.Fragment />);
if (loading) return <PermissionCatalogFieldLoader />;
return (
<TableContainer component={Paper}>
@@ -33,14 +37,14 @@ const PermissionCatalogField = ({ name = 'permissions', disabled = false }: Perm
<TableRow>
<TableCell component="th" />
{permissionCatalog.actions.map(action => (
{permissionCatalog.actions.map((action) => (
<TableCell component="th" key={action.key}>
<Typography
variant="subtitle1"
align="center"
sx={{
color: 'text.secondary',
fontWeight: 700
fontWeight: 700,
}}
>
{action.label}
@@ -58,21 +62,12 @@ const PermissionCatalogField = ({ name = 'permissions', disabled = false }: Perm
sx={{ '&:last-child td': { border: 0 } }}
>
<TableCell scope="row">
<Typography
variant="subtitle2"
>
{subject.label}
</Typography>
<Typography variant="subtitle2">{subject.label}</Typography>
</TableCell>
{permissionCatalog.actions.map((action) => (
<TableCell
key={`${subject.key}.${action.key}`}
align="center"
>
<Typography
variant="subtitle2"
>
<TableCell key={`${subject.key}.${action.key}`} align="center">
<Typography variant="subtitle2">
{action.subjects.includes(subject.key) && (
<ControlledCheckbox
disabled={disabled}
@@ -86,11 +81,7 @@ const PermissionCatalogField = ({ name = 'permissions', disabled = false }: Perm
))}
<TableCell>
<Stack
direction="row"
gap={1}
justifyContent="right"
>
<Stack direction="row" gap={1} justifyContent="right">
<IconButton
color="info"
size="small"
@@ -116,7 +107,7 @@ const PermissionCatalogField = ({ name = 'permissions', disabled = false }: Perm
</TableBody>
</Table>
</TableContainer>
)
);
};
export default PermissionCatalogField;

17
packages/web/src/components/RoleList/index.ee.tsx
View File

@@ -13,14 +13,14 @@ import Typography from '@mui/material/Typography';
import EditIcon from '@mui/icons-material/Edit';
import DeleteRoleButton from 'components/DeleteRoleButton/index.ee';
import ListLoader from 'components/ListLoader';
import useFormatMessage from 'hooks/useFormatMessage';
import useRoles from 'hooks/useRoles.ee';
import * as URLS from 'config/urls';
// TODO: introduce loading bar
export default function RoleList(): React.ReactElement {
const formatMessage = useFormatMessage();
const { roles } = useRoles();
const { roles, loading } = useRoles();
return (
<TableContainer component={Paper}>
@@ -49,7 +49,9 @@ export default function RoleList(): React.ReactElement {
</TableRow>
</TableHead>
<TableBody>
{roles.map((role) => (
{loading && <ListLoader rowsNumber={3} columnsNumber={2} />}
{!loading &&
roles.map((role) => (
<TableRow
key={role.id}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
@@ -59,7 +61,9 @@ export default function RoleList(): React.ReactElement {
</TableCell>
<TableCell scope="row">
<Typography variant="subtitle2">{role.description}</Typography>
<Typography variant="subtitle2">
{role.description}
</Typography>
</TableCell>
<TableCell>
@@ -72,7 +76,10 @@ export default function RoleList(): React.ReactElement {
<EditIcon />
</IconButton>
<DeleteRoleButton disabled={role.isAdmin} roleId={role.id} />
<DeleteRoleButton
disabled={role.isAdmin}
roleId={role.id}
/>
</Stack>
</TableCell>
</TableRow>

6
packages/web/src/components/UserList/index.tsx
View File

@@ -13,11 +13,11 @@ import Typography from '@mui/material/Typography';
import EditIcon from '@mui/icons-material/Edit';
import DeleteUserButton from 'components/DeleteUserButton/index.ee';
import ListLoader from 'components/ListLoader';
import useUsers from 'hooks/useUsers';
import useFormatMessage from 'hooks/useFormatMessage';
import * as URLS from 'config/urls';
// TODO: introduce loading bar
export default function UserList(): React.ReactElement {
const formatMessage = useFormatMessage();
const { users, loading } = useUsers();
@@ -49,7 +49,9 @@ export default function UserList(): React.ReactElement {
</TableRow>
</TableHead>
<TableBody>
{users.map((user) => (
{loading && <ListLoader rowsNumber={3} columnsNumber={2} />}
{!loading &&
users.map((user) => (
<TableRow
key={user.id}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}

47
packages/web/src/helpers/computePermissions.ee.ts
View File

@@ -3,24 +3,33 @@ import { IRole, IPermission } from '@automatisch/types';
type ComputeAction = {
conditions: Record<string, boolean>;
value: boolean;
}
};
type ComputedActions = Record<string, ComputeAction>;
type ComputedPermissions = Record<string, ComputedActions>;
export type RoleWithComputedPermissions = IRole & { computedPermissions: ComputedPermissions };
export type RoleWithComputedPermissions = IRole & {
computedPermissions: ComputedPermissions;
};
export function getRoleWithComputedPermissions(role: IRole): RoleWithComputedPermissions {
const computedPermissions = role.permissions.reduce((computedPermissions, permission) => ({
export function getRoleWithComputedPermissions(
role?: IRole
): Partial<RoleWithComputedPermissions> {
if (!role) return {};
const computedPermissions = role.permissions.reduce(
(computedPermissions, permission) => ({
...computedPermissions,
[permission.subject]: {
...(computedPermissions[permission.subject] || {}),
[permission.action]: {
conditions: Object.fromEntries(permission
.conditions
.map(condition => [condition, true])),
conditions: Object.fromEntries(
permission.conditions.map((condition) => [condition, true])
),
value: true,
},
}
}), {} as ComputedPermissions);
},
}),
{} as ComputedPermissions
);
return {
...role,
@@ -31,29 +40,27 @@ export function getRoleWithComputedPermissions(role: IRole): RoleWithComputedPer
export function getPermissions(computedPermissions?: ComputedPermissions) {
if (!computedPermissions) return [];
return Object
.entries(computedPermissions)
.reduce((permissions, computedPermissionEntry) => {
return Object.entries(computedPermissions).reduce(
(permissions, computedPermissionEntry) => {
const [subject, actionsWithConditions] = computedPermissionEntry;
for (const action in actionsWithConditions) {
const {
value: permitted,
conditions = {},
} = actionsWithConditions[action];
const { value: permitted, conditions = {} } =
actionsWithConditions[action];
if (permitted) {
permissions.push({
action,
subject,
conditions: Object
.entries(conditions)
conditions: Object.entries(conditions)
.filter(([, enabled]) => enabled)
.map(([condition]) => condition),
})
});
}
}
return permissions;
}, [] as Partial<IPermission>[]);
},
[] as Partial<IPermission>[]
);
}

11
packages/web/src/hooks/usePermissionCatalog.ee.ts
View File

@@ -3,8 +3,13 @@ import { IPermissionCatalog } from '@automatisch/types';
import { GET_PERMISSION_CATALOG } from 'graphql/queries/get-permission-catalog.ee';
export default function usePermissionCatalog(): IPermissionCatalog {
const { data } = useQuery(GET_PERMISSION_CATALOG);
type UsePermissionCatalogReturn = {
permissionCatalog: IPermissionCatalog;
loading: boolean;
};
return data?.getPermissionCatalog;
export default function usePermissionCatalog(): UsePermissionCatalogReturn {
const { data, loading } = useQuery(GET_PERMISSION_CATALOG);
return { permissionCatalog: data?.getPermissionCatalog, loading };
}

8
packages/web/src/hooks/useRole.ee.ts
View File

@@ -6,7 +6,7 @@ import { GET_ROLE } from 'graphql/queries/get-role.ee';
type QueryResponse = {
getRole: IRole;
}
};
export default function useRole(roleId?: string) {
const [getRole, { data, loading }] = useLazyQuery<QueryResponse>(GET_ROLE);
@@ -15,14 +15,14 @@ export default function useRole(roleId?: string) {
if (roleId) {
getRole({
variables: {
id: roleId
}
id: roleId,
},
});
}
}, [roleId]);
return {
role: data?.getRole,
loading
loading,
};
}

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

@@ -3,6 +3,7 @@ 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 Skeleton from '@mui/material/Skeleton';
import * as React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useSnackbar } from 'notistack';
@@ -25,7 +26,6 @@ type EditRoleParams = {
roleId: string;
};
// TODO: introduce loading bar
export default function EditRole(): React.ReactElement {
const formatMessage = useFormatMessage();
const [updateRole, { loading }] = useMutation(UPDATE_ROLE);
@@ -61,8 +61,6 @@ export default function EditRole(): React.ReactElement {
}
};
if (roleLoading || !role) return <React.Fragment />;
const roleWithComputedPermissions = getRoleWithComputedPermissions(role);
return (
@@ -78,6 +76,14 @@ export default function EditRole(): React.ReactElement {
onSubmit={handleRoleUpdate}
>
<Stack direction="column" gap={2}>
{roleLoading && (
<>
<Skeleton variant="rounded" height={55} />
<Skeleton variant="rounded" height={55} />
</>
)}
{!roleLoading && role && (
<>
<TextField
disabled={role.isAdmin}
required={true}
@@ -92,10 +98,12 @@ export default function EditRole(): React.ReactElement {
label={formatMessage('roleForm.description')}
fullWidth
/>
</>
)}
<PermissionCatalogField
name="computedPermissions"
disabled={role.isAdmin}
disabled={role?.isAdmin}
/>
<LoadingButton
@@ -104,7 +112,7 @@ export default function EditRole(): React.ReactElement {
color="primary"
sx={{ boxShadow: 2 }}
loading={loading}
disabled={role.isAdmin}
disabled={role?.isAdmin || roleLoading}
>
{formatMessage('editRole.submit')}
</LoadingButton>

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

@@ -5,6 +5,7 @@ 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 Skeleton from '@mui/material/Skeleton';
import LoadingButton from '@mui/lab/LoadingButton';
import { IUser, IRole } from '@automatisch/types';
import { useSnackbar } from 'notistack';
@@ -28,7 +29,6 @@ function generateRoleOptions(roles: IRole[]) {
return roles?.map(({ name: label, id: value }) => ({ label, value }));
}
// TODO: introduce loading bar
export default function EditUser(): React.ReactElement {
const formatMessage = useFormatMessage();
const [updateUser, { loading }] = useMutation(UPDATE_USER);
@@ -63,8 +63,6 @@ export default function EditUser(): React.ReactElement {
}
};
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}>
@@ -73,6 +71,16 @@ export default function EditUser(): React.ReactElement {
</Grid>
<Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
{userLoading && (
<Stack direction="column" gap={2}>
<Skeleton variant="rounded" height={55} />
<Skeleton variant="rounded" height={55} />
<Skeleton variant="rounded" height={55} />
<Skeleton variant="rounded" height={45} />
</Stack>
)}
{!userLoading && (
<Form defaultValues={user} onSubmit={handleUserUpdate}>
<Stack direction="column" gap={2}>
<TextField
@@ -117,6 +125,7 @@ export default function EditUser(): React.ReactElement {
</LoadingButton>
</Stack>
</Form>
)}
</Grid>
</Grid>
</Container>