diff --git a/packages/web/src/components/PermissionCatalogField/ActionField.jsx b/packages/web/src/components/PermissionCatalogField/ActionField.jsx
new file mode 100644
index 00000000..43d86de8
--- /dev/null
+++ b/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 (
+
+ {action.subjects.includes(subject.key) && (
+
+ )}
+
+ {!action.subjects.includes(subject.key) && '-'}
+
+ );
+};
+
+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;
diff --git a/packages/web/src/components/PermissionCatalogField/PermissionSettings.ee.jsx b/packages/web/src/components/PermissionCatalogField/PermissionSettings.ee.jsx
index 625c6daa..71cc4691 100644
--- a/packages/web/src/components/PermissionCatalogField/PermissionSettings.ee.jsx
+++ b/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
>
{formatMessage('permissionSettings.title')}
@@ -64,10 +65,10 @@ function PermissionSettings(props) {
-
{actions.map((action) => (
-
+
{condition.label}
@@ -98,7 +99,7 @@ function PermissionSettings(props) {
key={`${action.key}.${condition.key}`}
align="center"
>
-
+
{action.subjects.includes(subject) && (
{
+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) => (
{
data-test={`${subject.key}-permission-row`}
>
- {subject.label}
+
+ {subject.label}
+
{permissionCatalog?.actions.map((action) => (
-
- {action.subjects.includes(subject.key) && (
-
- )}
-
- {!action.subjects.includes(subject.key) && '-'}
-
+
))}
@@ -109,6 +112,7 @@ const PermissionCatalogField = ({ name = 'permissions', disabled = false }) => {
PermissionCatalogField.propTypes = {
name: PropTypes.string,
disabled: PropTypes.bool,
+ syncIsCreator: PropTypes.bool,
};
export default PermissionCatalogField;
diff --git a/packages/web/src/pages/EditRole/index.ee.jsx b/packages/web/src/pages/EditRole/index.ee.jsx
index 42832080..29e0e584 100644
--- a/packages/web/src/pages/EditRole/index.ee.jsx
+++ b/packages/web/src/pages/EditRole/index.ee.jsx
@@ -117,6 +117,7 @@ export default function EditRole() {