feat(Roles): adopt request form data for new form style

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

@@ -1,51 +0,0 @@
-import React from 'react';
-import { useFormContext } from 'react-hook-form';
-import PropTypes from 'prop-types';
-import ControlledCheckbox from 'components/ControlledCheckbox';
-
-const ActionField = ({ action, subject, disabled, name, syncIsCreator }) => {
-  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 handleSyncIsCreator = (newValue) => {
-    if (
-      syncIsCreator &&
-      actionDefaultValue === false &&
-      !conditionFieldTouched
-    ) {
-      resetField(conditionFieldName, { defaultValue: newValue });
-    }
-  };
-
-  return (
-    <ControlledCheckbox
-      disabled={disabled}
-      name={`${name}.${subject.key}.${action.key}.value`}
-      dataTest={`${action.key.toLowerCase()}-checkbox`}
-      onChange={(e, value) => {
-        handleSyncIsCreator(value);
-      }}
-    />
-  );
-};
-
-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/AllEntitiesPermissions.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import PropTypes from 'prop-types';
+import ControlledCheckbox from 'components/ControlledCheckbox';
+
+const AllEntitiesPermissions = ({
+  action,
+  subject,
+  disabled,
+  name,
+  syncIsCreator,
+}) => {
+  const { getValues, formState, resetField } = useFormContext();
+
+  const fieldName = `${name}.${subject.key}.${action.key}.allEntities`;
+  const defaultValue =
+    formState.defaultValues?.[name]?.[subject.key]?.[action.key].allEntities;
+  const ownEntitiesFieldName = `${name}.${subject.key}.${action.key}.ownEntities`;
+  const ownEntitiesFieldTouched =
+    formState.touchedFields?.[name]?.[subject.key]?.[action.key]
+      ?.ownEntities === true;
+
+  const currentValue = getValues(fieldName);
+
+  React.useEffect(() => {
+    if (currentValue === true) {
+      resetField(ownEntitiesFieldName, { defaultValue: true });
+    }
+  }, [ownEntitiesFieldName, currentValue]);
+
+  const handleSyncIsCreator = (newValue) => {
+    if (syncIsCreator && defaultValue === false && !ownEntitiesFieldTouched) {
+      resetField(ownEntitiesFieldName, { defaultValue: newValue });
+    }
+
+    if (newValue === true) {
+      resetField(ownEntitiesFieldName, { defaultValue: true });
+    }
+  };
+
+  return (
+    <ControlledCheckbox
+      disabled={disabled}
+      name={fieldName}
+      dataTest={`${action.key.toLowerCase()}-checkbox`}
+    />
+  );
+};
+
+AllEntitiesPermissions.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 AllEntitiesPermissions;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import PropTypes from 'prop-types';
+import ControlledCheckbox from 'components/ControlledCheckbox';
+
+const OwnEntitiesPermission = ({ action, subject, disabled, name }) => {
+  const { getValues, resetField } = useFormContext();
+
+  const fieldName = `${name}.${subject.key}.${action.key}.ownEntities`;
+  const allEntitiesFieldName = `${name}.${subject.key}.${action.key}.allEntities`;
+
+  const currentValue = getValues(fieldName);
+
+  React.useEffect(() => {
+    if (currentValue === false) {
+      resetField(allEntitiesFieldName, { defaultValue: false });
+    }
+  }, [allEntitiesFieldName, currentValue]);
+
+  return (
+    <ControlledCheckbox
+      name={fieldName}
+      disabled={disabled}
+      dataTest={`isCreator-${action.key.toLowerCase()}-checkbox`}
+    />
+  );
+};
+
+OwnEntitiesPermission.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,
+};
+
+export default OwnEntitiesPermission;

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

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import SettingsIcon from '@mui/icons-material/Settings';
 import IconButton from '@mui/material/IconButton';
 import Paper from '@mui/material/Paper';
@@ -10,12 +9,16 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
+import PropTypes from 'prop-types';
 import * as React from 'react';
 
+import ControlledCheckbox from 'components/ControlledCheckbox';
 import usePermissionCatalog from 'hooks/usePermissionCatalog.ee';
-import PermissionSettings from './PermissionSettings.ee';
+import useFormatMessage from 'hooks/useFormatMessage';
+import AllEntitiesPermissions from './AllEntitiesPermissions';
+import ConditionField from './OwnEntitiesPermission';
 import PermissionCatalogFieldLoader from './PermissionCatalogFieldLoader';
-import ActionField from './ActionField';
+import PermissionSettings from './PermissionSettings.ee';
 
 const PermissionCatalogField = ({
   name = 'permissions',
@@ -23,6 +26,7 @@ const PermissionCatalogField = ({
   syncIsCreator = false,
   loading = false,
 }) => {
+  const formatMessage = useFormatMessage();
   const { data, isLoading: isPermissionCatalogLoading } =
     usePermissionCatalog();
   const permissionCatalog = data?.data;
@@ -39,24 +43,44 @@ const PermissionCatalogField = ({
             <TableCell component="th" />
 
             {permissionCatalog?.actions.map((action) => (
-              <TableCell component="th" key={action.key}>
-                <Typography
-                  component="div"
-                  variant="subtitle1"
-                  align="center"
-                  sx={{
-                    color: 'text.secondary',
-                    fontWeight: 700,
-                  }}
-                >
-                  {action.label}
-                </Typography>
-              </TableCell>
-            ))}
+              <React.Fragment key={action.key}>
+                <TableCell component="th" key={action.key}>
+                  <Typography
+                    component="div"
+                    variant="subtitle2"
+                    align="center"
+                    sx={{
+                      color: 'text.secondary',
+                      fontWeight: 700,
+                    }}
+                  >
+                    {action.label}{' '}
+                    {formatMessage('permissionCatalogField.ownEntitiesLabel')}
+                  </Typography>
+                </TableCell>
 
-            <TableCell component="th" />
+                <TableCell
+                  component="th"
+                  key={`${action.key}-isCreator-condition`}
+                >
+                  <Typography
+                    component="div"
+                    variant="subtitle2"
+                    align="center"
+                    sx={{
+                      color: 'text.secondary',
+                      fontWeight: 700,
+                    }}
+                  >
+                    {action.label}{' '}
+                    {formatMessage('permissionCatalogField.allEntitiesLabel')}
+                  </Typography>
+                </TableCell>
+              </React.Fragment>
+            ))}
           </TableRow>
         </TableHead>
+
         <TableBody>
           {permissionCatalog?.subjects.map((subject) => (
             <TableRow
@@ -71,44 +95,43 @@ const PermissionCatalogField = ({
               </TableCell>
 
               {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}
-                        disabled={disabled}
-                        name={name}
-                        syncIsCreator={syncIsCreator}
-                      />
-                    )}
-                    {!action.subjects.includes(subject.key) && '-'}
-                  </Typography>
-                </TableCell>
-              ))}
-
-              <TableCell>
-                <Stack direction="row" gap={1} justifyContent="right">
-                  <IconButton
-                    color="info"
-                    size="small"
-                    onClick={() => setDialogName(subject.key)}
-                    disabled={disabled}
-                    data-test="permission-settings-button"
+                <React.Fragment key={`${subject.key}.${action.key}`}>
+                  <TableCell
+                    key={`${subject.key}.${action.key}-isCreator-condition`}
+                    align="center"
                   >
-                    <SettingsIcon />
-                  </IconButton>
+                    <Typography variant="subtitle2" component="div">
+                      {action.subjects.includes(subject.key) && (
+                        <ConditionField
+                          action={action}
+                          subject={subject}
+                          disabled={disabled}
+                          name={name}
+                        />
+                      )}
+                      {!action.subjects.includes(subject.key) && '-'}
+                    </Typography>
+                  </TableCell>
 
-                  <PermissionSettings
-                    open={dialogName === subject.key}
-                    onClose={() => setDialogName('')}
-                    fieldPrefix={`${name}.${subject.key}`}
-                    subject={subject.key}
-                    actions={permissionCatalog?.actions}
-                    conditions={permissionCatalog?.conditions}
-                  />
-                </Stack>
-              </TableCell>
+                  <TableCell
+                    key={`${subject.key}.${action.key}`}
+                    align="center"
+                  >
+                    <Typography variant="subtitle2" component="div">
+                      {action.subjects.includes(subject.key) && (
+                        <AllEntitiesPermissions
+                          action={action}
+                          subject={subject}
+                          disabled={disabled}
+                          name={name}
+                          syncIsCreator={syncIsCreator}
+                        />
+                      )}
+                      {!action.subjects.includes(subject.key) && '-'}
+                    </Typography>
+                  </TableCell>
+                </React.Fragment>
+              ))}
             </TableRow>
           ))}
         </TableBody>
@@ -116,6 +139,7 @@ const PermissionCatalogField = ({
     </TableContainer>
   );
 };
+
 PermissionCatalogField.propTypes = {
   name: PropTypes.string,
   disabled: PropTypes.bool,