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

packages/web/src/components/ListLoader/index.tsx

@@ -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;

packages/web/src/components/PermissionCatalogField/PermissionCatalogFieldLoader/index.tsx

@@ -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;

packages/web/src/components/PermissionCatalogField/index.ee.tsx

@@ -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;

packages/web/src/components/RoleList/index.ee.tsx

@@ -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,34 +49,41 @@ export default function RoleList(): React.ReactElement {
           </TableRow>
         </TableHead>
         <TableBody>
-          {roles.map((role) => (
-            <TableRow
-              key={role.id}
-              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-            >
-              <TableCell scope="row">
-                <Typography variant="subtitle2">{role.name}</Typography>
-              </TableCell>
+          {loading && <ListLoader rowsNumber={3} columnsNumber={2} />}
+          {!loading &&
+            roles.map((role) => (
+              <TableRow
+                key={role.id}
+                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+              >
+                <TableCell scope="row">
+                  <Typography variant="subtitle2">{role.name}</Typography>
+                </TableCell>
 
-              <TableCell scope="row">
-                <Typography variant="subtitle2">{role.description}</Typography>
-              </TableCell>
+                <TableCell scope="row">
+                  <Typography variant="subtitle2">
+                    {role.description}
+                  </Typography>
+                </TableCell>
 
-              <TableCell>
-                <Stack direction="row" gap={1} justifyContent="right">
-                  <IconButton
-                    size="small"
-                    component={Link}
-                    to={URLS.ROLE(role.id)}
-                  >
-                    <EditIcon />
-                  </IconButton>
+                <TableCell>
+                  <Stack direction="row" gap={1} justifyContent="right">
+                    <IconButton
+                      size="small"
+                      component={Link}
+                      to={URLS.ROLE(role.id)}
+                    >
+                      <EditIcon />
+                    </IconButton>
 
-                  <DeleteRoleButton disabled={role.isAdmin} roleId={role.id} />
-                </Stack>
-              </TableCell>
-            </TableRow>
-          ))}
+                    <DeleteRoleButton
+                      disabled={role.isAdmin}
+                      roleId={role.id}
+                    />
+                  </Stack>
+                </TableCell>
+              </TableRow>
+            ))}
         </TableBody>
       </Table>
     </TableContainer>

packages/web/src/components/UserList/index.tsx

@@ -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,34 +49,36 @@ export default function UserList(): React.ReactElement {
           </TableRow>
         </TableHead>
         <TableBody>
-          {users.map((user) => (
-            <TableRow
-              key={user.id}
-              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-            >
-              <TableCell scope="row">
-                <Typography variant="subtitle2">{user.fullName}</Typography>
-              </TableCell>
+          {loading && <ListLoader rowsNumber={3} columnsNumber={2} />}
+          {!loading &&
+            users.map((user) => (
+              <TableRow
+                key={user.id}
+                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+              >
+                <TableCell scope="row">
+                  <Typography variant="subtitle2">{user.fullName}</Typography>
+                </TableCell>
 
-              <TableCell>
-                <Typography variant="subtitle2">{user.email}</Typography>
-              </TableCell>
+                <TableCell>
+                  <Typography variant="subtitle2">{user.email}</Typography>
+                </TableCell>
 
-              <TableCell>
-                <Stack direction="row" gap={1} justifyContent="right">
-                  <IconButton
-                    size="small"
-                    component={Link}
-                    to={URLS.USER(user.id)}
-                  >
-                    <EditIcon />
-                  </IconButton>
+                <TableCell>
+                  <Stack direction="row" gap={1} justifyContent="right">
+                    <IconButton
+                      size="small"
+                      component={Link}
+                      to={URLS.USER(user.id)}
+                    >
+                      <EditIcon />
+                    </IconButton>
 
-                  <DeleteUserButton userId={user.id} />
-                </Stack>
-              </TableCell>
-            </TableRow>
-          ))}
+                    <DeleteUserButton userId={user.id} />
+                  </Stack>
+                </TableCell>
+              </TableRow>
+            ))}
         </TableBody>
       </Table>
     </TableContainer>

packages/web/src/helpers/computePermissions.ee.ts

@@ -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) => ({
-    ...computedPermissions,
-    [permission.subject]: {
-      ...(computedPermissions[permission.subject] || {}),
-      [permission.action]: {
-        conditions: Object.fromEntries(permission
-          .conditions
-          .map(condition => [condition, true])),
-        value: true,
+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])
+          ),
+          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>[]
+  );
 }

packages/web/src/hooks/usePermissionCatalog.ee.ts

@@ -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 };
 }

packages/web/src/hooks/useRole.ee.ts

@@ -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,
   };
 }

packages/web/src/pages/EditRole/index.ee.tsx

@@ -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,24 +76,34 @@ export default function EditRole(): React.ReactElement {
             onSubmit={handleRoleUpdate}
           >
             <Stack direction="column" gap={2}>
-              <TextField
-                disabled={role.isAdmin}
-                required={true}
-                name="name"
-                label={formatMessage('roleForm.name')}
-                fullWidth
-              />
+              {roleLoading && (
+                <>
+                  <Skeleton variant="rounded" height={55} />
+                  <Skeleton variant="rounded" height={55} />
+                </>
+              )}
+              {!roleLoading && role && (
+                <>
+                  <TextField
+                    disabled={role.isAdmin}
+                    required={true}
+                    name="name"
+                    label={formatMessage('roleForm.name')}
+                    fullWidth
+                  />
 
-              <TextField
-                disabled={role.isAdmin}
-                name="description"
-                label={formatMessage('roleForm.description')}
-                fullWidth
-              />
+                  <TextField
+                    disabled={role.isAdmin}
+                    name="description"
+                    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>

packages/web/src/pages/EditUser/index.tsx

@@ -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,50 +71,61 @@ export default function EditUser(): React.ReactElement {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
-          <Form defaultValues={user} onSubmit={handleUserUpdate}>
+          {userLoading && (
             <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>
+              <Skeleton variant="rounded" height={55} />
+              <Skeleton variant="rounded" height={55} />
+              <Skeleton variant="rounded" height={55} />
+              <Skeleton variant="rounded" height={45} />
             </Stack>
-          </Form>
+          )}
+
+          {!userLoading && (
+            <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>