diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/Wrapper.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/Wrapper.js
index 6da189077f..9bd0c54e35 100644
--- a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/Wrapper.js
+++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/Wrapper.js
@@ -1,20 +1,9 @@
/* eslint-disable indent */
import styled from 'styled-components';
-import { Flex, Text } from '@buffetjs/core';
-
+import { Flex } from '@buffetjs/core';
+import { activeStyle } from '../../utils';
import Chevron from '../../../Chevron';
-const activeStyle = theme => `
- color: ${theme.main.colors.mediumBlue};
- ${Text} {
- color: ${theme.main.colors.mediumBlue};
- }
- ${Chevron} {
- display: block;
- color: ${theme.main.colors.mediumBlue};
- }
- `;
-
const RowWrapper = styled(Flex)`
height: 36px;
padding: 1rem 0;
diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js
index 2cc73ae7fe..db27f34721 100644
--- a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js
+++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js
@@ -49,7 +49,7 @@ const ActionRow = ({ name, value, required, propertyActions }) => {
// TODO
textColor="grey"
>
- {required && *}
+ {required && }
diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/index.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/index.js
index 361e8e8556..4813850c5e 100644
--- a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/index.js
+++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/index.js
@@ -5,9 +5,9 @@ import styled from 'styled-components';
import CheckboxWithCondition from '../../../CheckboxWithCondition';
import Chevron from '../../../Chevron';
import CollapseLabel from '../../../CollapseLabel';
+import Curve from '../../../Curve';
import HiddenAction from '../../../HiddenAction';
import RequiredSign from '../../../RequiredSign';
-import Curve from './Curve';
import { RowStyle, RowWrapper } from './row';
import { LeftBorderTimeline, TopTimeline } from './timeline';
import Wrapper from './Wrapper';
@@ -17,7 +17,6 @@ const SubLevelWrapper = styled.div`
`;
const SubActionRow = ({ recursiveLevel, values, propertyActions }) => {
- console.log({ propertyActions });
const [rowToOpen, setRowToOpen] = useState(null);
const handleClickToggleSubLevel = useCallback(name => {
setRowToOpen(prev => {
@@ -72,7 +71,7 @@ const SubActionRow = ({ recursiveLevel, values, propertyActions }) => {
>
{value.key}
- {value.required && *}
+ {value.required && }
diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js
index f7057f650b..4813850c5e 100644
--- a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js
+++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js
@@ -5,9 +5,9 @@ import styled from 'styled-components';
import CheckboxWithCondition from '../../../CheckboxWithCondition';
import Chevron from '../../../Chevron';
import CollapseLabel from '../../../CollapseLabel';
+import Curve from '../../../Curve';
import HiddenAction from '../../../HiddenAction';
import RequiredSign from '../../../RequiredSign';
-import Curve from './Curve';
import { RowStyle, RowWrapper } from './row';
import { LeftBorderTimeline, TopTimeline } from './timeline';
import Wrapper from './Wrapper';
@@ -71,7 +71,7 @@ const SubActionRow = ({ recursiveLevel, values, propertyActions }) => {
>
{value.key}
- {value.required && *}
+ {value.required && }
diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/row.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/row.js
index 5359e80e29..35bb44da02 100644
--- a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/row.js
+++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/row.js
@@ -1,18 +1,8 @@
import styled from 'styled-components';
-import { Flex, Text } from '@buffetjs/core';
+import { Flex } from '@buffetjs/core';
import PropTypes from 'prop-types';
import Chevron from '../../../Chevron';
-
-const activeStyle = theme => `
- color: ${theme.main.colors.mediumBlue};
- ${Text} {
- color: ${theme.main.colors.mediumBlue};
- }
- ${Chevron} {
- display: block;
- color: ${theme.main.colors.mediumBlue};
- }
-`;
+import { activeStyle } from '../../utils';
const RowStyle = styled.div`
padding-left: ${({ theme }) => theme.main.sizes.paddings.xs};
diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/index.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/index.js
index afae076357..5981109ced 100644
--- a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/index.js
+++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/index.js
@@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import Collapse from './Collapse';
import CollapsePropertyMatrix from './CollapsePropertyMatrix';
-import getAvailableActions from './utils/getAvailableActions';
+import { getAvailableActions } from './utils';
import Wrapper from './Wrapper';
const ContentTypeCollapse = ({
diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/utils/activeStyle.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/utils/activeStyle.js
new file mode 100644
index 0000000000..e333148e77
--- /dev/null
+++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/utils/activeStyle.js
@@ -0,0 +1,16 @@
+// import styled from 'styled-components';
+import { Text } from '@buffetjs/core';
+import Chevron from '../../Chevron';
+
+const activeStyle = theme => `
+ color: ${theme.main.colors.mediumBlue};
+ ${Text} {
+ color: ${theme.main.colors.mediumBlue};
+ }
+ ${Chevron} {
+ display: block;
+ color: ${theme.main.colors.mediumBlue};
+ }
+`;
+
+export default activeStyle;
diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/utils/index.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/utils/index.js
new file mode 100644
index 0000000000..2aaa8770eb
--- /dev/null
+++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/utils/index.js
@@ -0,0 +1,2 @@
+export { default as activeStyle } from './activeStyle';
+export { default as getAvailableActions } from './getAvailableActions';
diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/utils/tests/getAvailableActions.test.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/utils/tests/getAvailableActions.test.js
new file mode 100644
index 0000000000..8fa73717d5
--- /dev/null
+++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/utils/tests/getAvailableActions.test.js
@@ -0,0 +1,110 @@
+import getAvailableActions from '../getAvailableActions';
+
+describe('ADMIN | COMPONENTS | Permissions | ContentTypeCollapse | utils | getAvailableActions', () => {
+ it('should return an empty array', () => {
+ expect(getAvailableActions([])).toHaveLength(0);
+ });
+
+ it('should set the isDisplayed key to false to all actions if the subject value does not match the target', () => {
+ const actions = [
+ {
+ label: 'Create',
+ actionId: 'content-manager.explorer.create',
+ subjects: ['restaurant', 'address'],
+ applyToProperties: ['fields', 'locales'],
+ },
+ {
+ label: 'Read',
+ actionId: 'content-manager.explorer.read',
+ subjects: ['restaurant', 'address'],
+ applyToProperties: ['fields', 'locales'],
+ },
+ ];
+ const expected = [
+ {
+ label: 'Create',
+ actionId: 'content-manager.explorer.create',
+ subjects: ['restaurant', 'address'],
+ applyToProperties: ['fields', 'locales'],
+ isDisplayed: false,
+ },
+ {
+ label: 'Read',
+ actionId: 'content-manager.explorer.read',
+ subjects: ['restaurant', 'address'],
+ applyToProperties: ['fields', 'locales'],
+ isDisplayed: false,
+ },
+ ];
+
+ expect(getAvailableActions(actions, 'test')).toEqual(expected);
+ });
+
+ it('should set the isDisplayed key to false for the actions which the type of the subjects value is not an array', () => {
+ const actions = [
+ {
+ label: 'Create',
+ actionId: 'content-manager.explorer.create',
+ subjects: 'test',
+ applyToProperties: ['fields', 'locales'],
+ },
+ {
+ label: 'Read',
+ actionId: 'content-manager.explorer.read',
+ applyToProperties: ['fields', 'locales'],
+ },
+ ];
+ const expected = [
+ {
+ label: 'Create',
+ actionId: 'content-manager.explorer.create',
+ subjects: 'test',
+ applyToProperties: ['fields', 'locales'],
+ isDisplayed: false,
+ },
+ {
+ label: 'Read',
+ actionId: 'content-manager.explorer.read',
+ applyToProperties: ['fields', 'locales'],
+ isDisplayed: false,
+ },
+ ];
+
+ expect(getAvailableActions(actions, 'test')).toEqual(expected);
+ });
+
+ it('should set the isDisplayed key to false for the action which include the targetSubject in the subjects value array', () => {
+ const actions = [
+ {
+ label: 'Create',
+ actionId: 'content-manager.explorer.create',
+ subjects: ['restaurant', 'address'],
+ applyToProperties: ['fields', 'locales'],
+ },
+ {
+ label: 'Read',
+ actionId: 'content-manager.explorer.read',
+ subjects: [],
+ applyToProperties: ['fields', 'locales'],
+ },
+ ];
+ const expected = [
+ {
+ label: 'Create',
+ actionId: 'content-manager.explorer.create',
+ subjects: ['restaurant', 'address'],
+ applyToProperties: ['fields', 'locales'],
+ isDisplayed: true,
+ },
+ {
+ label: 'Read',
+ actionId: 'content-manager.explorer.read',
+ subjects: [],
+ applyToProperties: ['fields', 'locales'],
+ isDisplayed: false,
+ },
+ ];
+
+ expect(getAvailableActions(actions, 'address')).toEqual(expected);
+ });
+});
diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/Curve.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/Curve/index.js
similarity index 89%
rename from packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/Curve.js
rename to packages/strapi-admin/ee/admin/containers/Roles/CreatePage/Curve/index.js
index 8e4ff56865..eea6ce80aa 100644
--- a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/Curve.js
+++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/Curve/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
import PropTypes from 'prop-types';
const Curve = props => (
@@ -32,4 +32,4 @@ Curve.propTypes = {
fill: PropTypes.string,
};
-export default Curve;
+export default memo(Curve);
diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/RequiredSign/index.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/RequiredSign/index.js
index b96e5f5a0e..a9408604ba 100644
--- a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/RequiredSign/index.js
+++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/RequiredSign/index.js
@@ -1,8 +1,11 @@
+import React from 'react';
import styled from 'styled-components';
-const RequiredSign = styled.span`
+const Required = styled.span`
color: ${({ theme }) => theme.main.colors.red};
padding-left: 2px;
`;
+const RequiredSign = () => *;
+
export default RequiredSign;