feat: sync isCreator value when editing role settings

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

@@ -0,0 +1,60 @@
+import React, { useEffect, useRef } 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 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 (
+      syncIsCreator &&
+      defaultActionFieldValueRef?.current === false &&
+      !conditionFieldTouched
+    ) {
+      resetField(conditionFieldName, { defaultValue: actionFieldValue });
+    }
+  }, [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`}
+        />
+      )}
+
+      {!action.subjects.includes(subject.key) && '-'}
+    </Typography>
+  );
+};
+
+ActionField.propTypes = {
+  action: PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    subjects: PropTypes.arrayOf(PropTypes.string).isRequired,
+  }),
+  subject: PropTypes.shape({
+    key: PropTypes.string.isRequired,
+  }).isRequired,
+  disabled: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  syncIsCreator: PropTypes.bool,
+};
+
+export default ActionField;

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

@@ -33,7 +33,7 @@ function PermissionSettings(props) {
     for (const action of actions) {
       for (const condition of conditions) {
         const fieldName = `${fieldPrefix}.${action.key}.conditions.${condition.key}`;
-        resetField(fieldName);
+        resetField(fieldName, { keepTouched: true });
       }
     }
     onClose();
@@ -44,7 +44,7 @@ function PermissionSettings(props) {
       for (const condition of conditions) {
         const fieldName = `${fieldPrefix}.${action.key}.conditions.${condition.key}`;
         const value = getValues(fieldName);
-        resetField(fieldName, { defaultValue: value });
+        resetField(fieldName, { defaultValue: value, keepTouched: true });
       }
     }
     onClose();
@@ -55,6 +55,7 @@ function PermissionSettings(props) {
       open={open}
       onClose={cancel}
       data-test={`${subject}-role-conditions-modal`}
+      keepMounted
     >
       <DialogTitle>{formatMessage('permissionSettings.title')}</DialogTitle>
 
@@ -64,10 +65,10 @@ function PermissionSettings(props) {
             <TableHead>
               <TableRow>
                 <TableCell component="th" />
-
                 {actions.map((action) => (
                   <TableCell component="th" key={action.key}>
                     <Typography
+                      component="div"
                       variant="subtitle1"
                       align="center"
                       sx={{
@@ -88,7 +89,7 @@ function PermissionSettings(props) {
                   sx={{ '&:last-child td': { border: 0 } }}
                 >
                   <TableCell scope="row">
-                    <Typography variant="subtitle2">
+                    <Typography variant="subtitle2" component="div">
                       {condition.label}
                     </Typography>
                   </TableCell>
@@ -98,7 +99,7 @@ function PermissionSettings(props) {
                       key={`${action.key}.${condition.key}`}
                       align="center"
                     >
-                      <Typography variant="subtitle2">
+                      <Typography variant="subtitle2" component="div">
                         {action.subjects.includes(subject) && (
                           <ControlledCheckbox
                             name={`${fieldPrefix}.${action.key}.conditions.${condition.key}`}

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

@@ -12,12 +12,16 @@ import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
 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';
+import ActionField from './ActionField';
 
-const PermissionCatalogField = ({ name = 'permissions', disabled = false }) => {
+const PermissionCatalogField = ({
+  name = 'permissions',
+  disabled = false,
+  syncIsCreator = false,
+}) => {
   const { data, isLoading: isPermissionCatalogLoading } =
     usePermissionCatalog();
   const permissionCatalog = data?.data;
@@ -35,6 +39,7 @@ const PermissionCatalogField = ({ name = 'permissions', disabled = false }) => {
             {permissionCatalog?.actions.map((action) => (
               <TableCell component="th" key={action.key}>
                 <Typography
+                  component="div"
                   variant="subtitle1"
                   align="center"
                   sx={{
@@ -58,22 +63,20 @@ const PermissionCatalogField = ({ name = 'permissions', disabled = false }) => {
               data-test={`${subject.key}-permission-row`}
             >
               <TableCell scope="row">
-                <Typography variant="subtitle2">{subject.label}</Typography>
+                <Typography variant="subtitle2" component="div">
+                  {subject.label}
+                </Typography>
               </TableCell>
 
               {permissionCatalog?.actions.map((action) => (
                 <TableCell key={`${subject.key}.${action.key}`} align="center">
-                  <Typography variant="subtitle2">
-                    {action.subjects.includes(subject.key) && (
-                      <ControlledCheckbox
-                        disabled={disabled}
-                        name={`${name}.${subject.key}.${action.key}.value`}
-                        dataTest={`${action.key.toLowerCase()}-checkbox`}
-                      />
-                    )}
-
-                    {!action.subjects.includes(subject.key) && '-'}
-                  </Typography>
+                  <ActionField
+                    action={action}
+                    subject={subject}
+                    disabled={disabled}
+                    name={name}
+                    syncIsCreator={syncIsCreator}
+                  />
                 </TableCell>
               ))}
 
@@ -109,6 +112,7 @@ const PermissionCatalogField = ({ name = 'permissions', disabled = false }) => {
 PermissionCatalogField.propTypes = {
   name: PropTypes.string,
   disabled: PropTypes.bool,
+  syncIsCreator: PropTypes.bool,
 };
 
 export default PermissionCatalogField;

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

@@ -117,6 +117,7 @@ export default function EditRole() {
               <PermissionCatalogField
                 name="computedPermissions"
                 disabled={role?.isAdmin}
+                syncIsCreator
               />
 
               <LoadingButton