Merge pull request #2256 from automatisch/AUT-1384

feat: disable inputs when data is loading

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

@@ -39,14 +39,14 @@ const PermissionCatalogFieldLoader = () => {
               {[...Array(5)].map((action, index) => (
                 <TableCell key={index} align="center">
                   <Typography variant="subtitle2">
-                    <ControlledCheckbox name="value" />
+                    <ControlledCheckbox name="value" disabled />
                   </Typography>
                 </TableCell>
               ))}
 
               <TableCell>
                 <Stack direction="row" gap={1} justifyContent="right">
-                  <IconButton color="info" size="small">
+                  <IconButton color="info" size="small" disabled>
                     <SettingsIcon />
                   </IconButton>
                 </Stack>

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

@@ -21,13 +21,15 @@ const PermissionCatalogField = ({
   name = 'permissions',
   disabled = false,
   syncIsCreator = false,
+  loading = false,
 }) => {
   const { data, isLoading: isPermissionCatalogLoading } =
     usePermissionCatalog();
   const permissionCatalog = data?.data;
   const [dialogName, setDialogName] = React.useState();
 
-  if (isPermissionCatalogLoading) return <PermissionCatalogFieldLoader />;
+  if (isPermissionCatalogLoading || loading)
+    return <PermissionCatalogFieldLoader />;
 
   return (
     <TableContainer component={Paper}>
@@ -118,6 +120,7 @@ PermissionCatalogField.propTypes = {
   name: PropTypes.string,
   disabled: PropTypes.bool,
   syncIsCreator: PropTypes.bool,
+  loading: PropTypes.bool,
 };
 
 export default PermissionCatalogField;

packages/web/src/pages/CreateRole/index.ee.jsx

@@ -25,7 +25,8 @@ export default function CreateRole() {
   const enqueueSnackbar = useEnqueueSnackbar();
   const { mutateAsync: createRole, isPending: isCreateRolePending } =
     useAdminCreateRole();
-  const { data: permissionCatalogData } = usePermissionCatalog();
+  const { data: permissionCatalogData, isLoading: isPermissionCatalogLoading } =
+    usePermissionCatalog();
 
   const defaultValues = React.useMemo(
     () => ({
@@ -91,6 +92,7 @@ export default function CreateRole() {
                 label={formatMessage('roleForm.name')}
                 fullWidth
                 data-test="name-input"
+                disabled={isPermissionCatalogLoading}
               />
 
               <TextField
@@ -98,6 +100,7 @@ export default function CreateRole() {
                 label={formatMessage('roleForm.description')}
                 fullWidth
                 data-test="description-input"
+                disabled={isPermissionCatalogLoading}
               />
 
               <PermissionCatalogField name="computedPermissions" />

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

@@ -1,6 +1,5 @@
 import LoadingButton from '@mui/lab/LoadingButton';
 import Grid from '@mui/material/Grid';
-import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
@@ -30,7 +29,8 @@ export default function EditRole() {
   const { data: roleData, isLoading: isRoleLoading } = useRole({ roleId });
   const { mutateAsync: updateRole, isPending: isUpdateRolePending } =
     useAdminUpdateRole(roleId);
-  const { data: permissionCatalogData } = usePermissionCatalog();
+  const { data: permissionCatalogData, isLoading: isPermissionCatalogLoading } =
+    usePermissionCatalog();
   const role = roleData?.data;
   const permissionCatalog = permissionCatalogData?.data;
   const enqueueSnackbar = useEnqueueSnackbar();
@@ -84,36 +84,30 @@ export default function EditRole() {
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
           <Form defaultValues={defaultValues} onSubmit={handleRoleUpdate}>
             <Stack direction="column" gap={2}>
-              {isRoleLoading && (
+              <TextField
-                <>
+                disabled={
-                  <Skeleton variant="rounded" height={55} />
+                  role?.isAdmin || isRoleLoading || isPermissionCatalogLoading
-                  <Skeleton variant="rounded" height={55} />
+                }
-                </>
+                required={true}
-              )}
+                name="name"
-              {!isRoleLoading && role && (
+                label={formatMessage('roleForm.name')}
-                <>
+                data-test="name-input"
-                  <TextField
+                fullWidth
-                    disabled={role.isAdmin}
+              />
-                    required={true}
+              <TextField
-                    name="name"
+                disabled={
-                    label={formatMessage('roleForm.name')}
+                  role?.isAdmin || isRoleLoading || isPermissionCatalogLoading
-                    data-test="name-input"
+                }
-                    fullWidth
+                name="description"
-                  />
+                label={formatMessage('roleForm.description')}
-
+                data-test="description-input"
-                  <TextField
+                fullWidth
-                    disabled={role.isAdmin}
+              />
-                    name="description"
-                    label={formatMessage('roleForm.description')}
-                    data-test="description-input"
-                    fullWidth
-                  />
-                </>
-              )}
               <PermissionCatalogField
                 name="computedPermissions"
                 disabled={role?.isAdmin}
                 syncIsCreator
+                loading={isRoleLoading}
               />
               <LoadingButton
                 type="submit"