feat: improve syncing isCreator value

packages/web/src/components/PermissionCatalogField/ActionField.jsx

@@ -1,46 +1,37 @@
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import { useFormContext } from 'react-hook-form';
-import { Typography } from '@mui/material';
 import PropTypes from 'prop-types';
 import ControlledCheckbox from 'components/ControlledCheckbox';
 
 const ActionField = ({ action, subject, disabled, name, syncIsCreator }) => {
-  const { watch, formState, resetField } = useFormContext();
-
-  const actionFieldName = `${name}.${subject.key}.${action.key}.value`;
-  const actionFieldValue = watch(actionFieldName);
+  const { formState, resetField } = useFormContext();
 
+  const actionDefaultValue =
+    formState.defaultValues?.[name]?.[subject.key]?.[action.key].value;
   const conditionFieldName = `${name}.${subject.key}.${action.key}.conditions.isCreator`;
   const conditionFieldTouched =
     formState.touchedFields?.[name]?.[subject.key]?.[action.key]?.conditions
       ?.isCreator === true;
 
-  const defaultActionFieldValueRef = useRef(actionFieldValue);
-
-  useEffect(() => {
-    if (defaultActionFieldValueRef?.current === undefined) {
-      defaultActionFieldValueRef.current = actionFieldValue;
-    } else if (
+  const handleSyncIsCreator = (newValue) => {
+    if (
       syncIsCreator &&
-      defaultActionFieldValueRef?.current === false &&
+      actionDefaultValue === false &&
       !conditionFieldTouched
     ) {
-      resetField(conditionFieldName, { defaultValue: actionFieldValue });
+      resetField(conditionFieldName, { defaultValue: newValue });
     }
-  }, [actionFieldValue, syncIsCreator]);
+  };
 
   return (
-    <Typography variant="subtitle2" component="div">
-      {action.subjects.includes(subject.key) && (
     <ControlledCheckbox
       disabled={disabled}
       name={`${name}.${subject.key}.${action.key}.value`}
       dataTest={`${action.key.toLowerCase()}-checkbox`}
+      onChange={(e, value) => {
+        handleSyncIsCreator(value);
+      }}
     />
-      )}
-
-      {!action.subjects.includes(subject.key) && '-'}
-    </Typography>
   );
 };
 

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

@@ -70,6 +70,8 @@ const PermissionCatalogField = ({
 
               {permissionCatalog?.actions.map((action) => (
                 <TableCell key={`${subject.key}.${action.key}`} align="center">
+                  <Typography variant="subtitle2" component="div">
+                    {action.subjects.includes(subject.key) && (
                       <ActionField
                         action={action}
                         subject={subject}
@@ -77,6 +79,9 @@ const PermissionCatalogField = ({
                         name={name}
                         syncIsCreator={syncIsCreator}
                       />
+                    )}
+                    {!action.subjects.includes(subject.key) && '-'}
+                  </Typography>
                 </TableCell>
               ))}
 

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

@@ -27,11 +27,12 @@ export default function EditRole() {
   const formatMessage = useFormatMessage();
   const navigate = useNavigate();
   const { roleId } = useParams();
-  const { data, isLoading: isRoleLoading } = useRole({ roleId });
+  const { data: roleData, isLoading: isRoleLoading } = useRole({ roleId });
   const { mutateAsync: updateRole, isPending: isUpdateRolePending } =
     useAdminUpdateRole(roleId);
   const { data: permissionCatalogData } = usePermissionCatalog();
-  const role = data?.data;
+  const role = roleData?.data;
+  const permissionCatalog = permissionCatalogData?.data;
   const enqueueSnackbar = useEnqueueSnackbar();
 
   const handleRoleUpdate = async (roleData) => {
@@ -56,24 +57,20 @@ export default function EditRole() {
     }
   };
 
+  const defaultValues = React.useMemo(() => {
     const roleWithComputedPermissions = getRoleWithComputedPermissions(role);
+    const computedPermissionsDefaultValues =
+      getComputedPermissionsDefaultValues(permissionCatalog);
 
-  const computedPermissionsDefaultValues = React.useMemo(
-    () => getComputedPermissionsDefaultValues(permissionCatalogData?.data),
-    [permissionCatalogData],
-  );
-
-  const defaultValues = React.useMemo(
-    () => ({
+    return {
       ...roleWithComputedPermissions,
       computedPermissions: merge(
         {},
         computedPermissionsDefaultValues,
         roleWithComputedPermissions.computedPermissions,
       ),
-    }),
-    [roleWithComputedPermissions, computedPermissionsDefaultValues],
-  );
+    };
+  }, [role, permissionCatalog]);
 
   return (
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
@@ -113,13 +110,11 @@ export default function EditRole() {
                   />
                 </>
               )}
-
               <PermissionCatalogField
                 name="computedPermissions"
                 disabled={role?.isAdmin}
                 syncIsCreator
               />
-
               <LoadingButton
                 type="submit"
                 variant="contained"