From c3147e90c22bc08c897e5373f5282a576fc650b5 Mon Sep 17 00:00:00 2001 From: soupette Date: Tue, 2 Nov 2021 15:29:49 +0100 Subject: [PATCH] Disable conditions in EE Signed-off-by: soupette --- .../ConditionsModal/ActionRow/index.js | 3 +- .../MenuList => ActionRow}/utils/constants.js | 0 .../ConditionsSelect/ClearIndicator.js | 15 -- .../CustomDropdownIndicator.js | 39 ----- .../ConditionsSelect/IndicatorSeparator.js | 3 - .../ConditionsSelect/MenuList/SubUl.js | 48 ------ .../ConditionsSelect/MenuList/Ul.js | 80 ---------- .../ConditionsSelect/MenuList/UpperFirst.js | 6 - .../ConditionsSelect/MenuList/index.js | 140 ------------------ .../MenuList/utils/createCollapsesObject.js | 14 -- .../utils/tests/createCollapsesObject.test.js | 13 -- .../ConditionsSelect/SingleValue.js | 46 ------ .../ConditionsModal/ConditionsSelect/index.js | 67 --------- .../ConditionsModal/utils/selectStyle.js | 95 ------------ .../MenuList => ActionRow}/utils/constants.js | 0 .../Roles/CreatePage/tests/index.test.js | 8 +- .../pages/Roles/EditPage/tests/index.test.js | 8 +- 17 files changed, 10 insertions(+), 575 deletions(-) rename packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/{ConditionsSelect/MenuList => ActionRow}/utils/constants.js (100%) delete mode 100644 packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/ClearIndicator.js delete mode 100644 packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/CustomDropdownIndicator.js delete mode 100644 packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/IndicatorSeparator.js delete mode 100644 packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/SubUl.js delete mode 100644 packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/Ul.js delete mode 100644 packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/UpperFirst.js delete mode 100644 packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/index.js delete mode 100644 packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/utils/createCollapsesObject.js delete mode 100644 packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/utils/tests/createCollapsesObject.test.js delete mode 100644 packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/SingleValue.js delete mode 100644 packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/index.js delete mode 100644 packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/utils/selectStyle.js rename packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/{ConditionsSelect/MenuList => ActionRow}/utils/constants.js (100%) diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/index.js index 64f5f89894..848c599f73 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/index.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/utils/constants'; import { Box } from '@strapi/design-system/Box'; import { Flex } from '@strapi/design-system/Flex'; import { TableLabel } from '@strapi/design-system/Text'; @@ -95,7 +96,7 @@ const ActionRow = ({ onChange={handleChange} value={values} options={options} - disabled={isFormDisabled} + disabled={isFormDisabled || IS_DISABLED} /> diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/utils/constants.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/utils/constants.js similarity index 100% rename from packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/utils/constants.js rename to packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/utils/constants.js diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/ClearIndicator.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/ClearIndicator.js deleted file mode 100644 index b24f77bdd6..0000000000 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/ClearIndicator.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Remove } from '@buffetjs/icons'; -import { components } from 'react-select'; - -const ClearIndicator = props => { - const Component = components.ClearIndicator; - - return ( - - - - ); -}; - -export default ClearIndicator; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/CustomDropdownIndicator.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/CustomDropdownIndicator.js deleted file mode 100644 index 628b29aa46..0000000000 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/CustomDropdownIndicator.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Flex } from '@buffetjs/core'; -import styled from 'styled-components'; -import PropTypes from 'prop-types'; - -const Wrapper = styled(Flex)` - height: 100%; - width: 32px; - background: #fafafb; - > svg { - align-self: center; - font-size: 11px; - color: #b3b5b9; - } -`; - -const DropdownIndicator = ({ selectProps: { menuIsOpen } }) => { - const icon = menuIsOpen ? 'caret-up' : 'caret-down'; - - return ( - - - - ); -}; - -DropdownIndicator.propTypes = { - selectProps: PropTypes.shape({ - menuIsOpen: PropTypes.bool.isRequired, - }).isRequired, -}; - -Wrapper.defaultProps = { - flexDirection: 'column', - justifyContent: 'center', -}; - -export default DropdownIndicator; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/IndicatorSeparator.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/IndicatorSeparator.js deleted file mode 100644 index 458dd41265..0000000000 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/IndicatorSeparator.js +++ /dev/null @@ -1,3 +0,0 @@ -const IndicatorSeparator = () => null; - -export default IndicatorSeparator; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/SubUl.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/SubUl.js deleted file mode 100644 index 283d99db4b..0000000000 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/SubUl.js +++ /dev/null @@ -1,48 +0,0 @@ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -import React from 'react'; -import PropTypes from 'prop-types'; -import styled from 'styled-components'; -import { Collapse } from 'reactstrap'; - -const ToggleUl = styled(Collapse)` - font-size: 13px; - padding: 12px 15px 0 15px; - list-style: none; - background-color: #fff; - > li { - padding-top: 5px; - label { - cursor: pointer; - } - - .check-wrapper { - z-index: 9; - > input { - z-index: 1; - } - } - } - > li:not(:last-child) { - padding-bottom: 12px; - } -`; - -const SubUl = ({ children, isOpen }) => { - return ( - - {children} - - ); -}; - -SubUl.defaultProps = { - children: null, - isOpen: false, -}; - -SubUl.propTypes = { - children: PropTypes.node, - isOpen: PropTypes.bool, -}; - -export default SubUl; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/Ul.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/Ul.js deleted file mode 100644 index 55b787cd2b..0000000000 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/Ul.js +++ /dev/null @@ -1,80 +0,0 @@ -/* eslint-disable indent */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -import styled from 'styled-components'; - -const Ul = styled.ul` - max-height: 150px; - font-size: 13px; - padding: 0 15px; - margin-bottom: 0px; - list-style: none; - background-color: #fff; - > li { - label { - flex-shrink: 1; - width: fit-content !important; - cursor: pointer; - margin-bottom: 0px; - } - - .check-wrapper { - z-index: 9; - > input { - z-index: 1; - } - } - .chevron { - margin: auto; - - font-size: 11px; - color: #919bae; - } - } - .li-multi-menu { - margin-bottom: -3px; - } - .li { - line-height: 27px; - position: relative; - > p { - margin: 0; - } - - &:hover { - > p::after { - content: attr(datadescr); - position: absolute; - left: 0; - color: ${({ theme }) => theme.main.colors.mediumBlue}; - font-weight: 700; - z-index: 100; - } - &::after { - content: ''; - position: absolute; - z-index: 1; - top: 0; - left: -30px; - right: -30px; - bottom: 0; - background-color: ${({ theme }) => theme.main.colors.lightBlue}; - } - } - } - ${({ disabled, theme }) => - disabled && - ` - label { - cursor: not-allowed !important; - } - input[type='checkbox'] { - cursor: not-allowed; - &:after { - cursor: not-allowed; - color: ${theme.main.colors.grey}; - } - } - `} -`; - -export default Ul; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/UpperFirst.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/UpperFirst.js deleted file mode 100644 index 4784590693..0000000000 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/UpperFirst.js +++ /dev/null @@ -1,6 +0,0 @@ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -import upperFirst from 'lodash/upperFirst'; - -const UpperFirst = ({ content }) => upperFirst(content); - -export default UpperFirst; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/index.js deleted file mode 100644 index 2db04b2272..0000000000 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/index.js +++ /dev/null @@ -1,140 +0,0 @@ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -import React, { useState, useMemo } from 'react'; -import PropTypes from 'prop-types'; -import { components } from 'react-select'; -import { get } from 'lodash'; -import { Checkbox, Flex } from '@buffetjs/core'; -import { Label } from '@buffetjs/styles'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/utils/constants'; -import { getCheckboxState } from '../../../utils'; -import createCollapsesObject from './utils/createCollapsesObject'; -import SubUl from './SubUl'; -import Ul from './Ul'; -import UpperFirst from './UpperFirst'; - -/* eslint-disable jsx-a11y/no-static-element-interactions */ - -const MenuList = ({ selectProps, ...rest }) => { - const Component = components.MenuList; - const { arrayOfOptionsGroupedByCategory } = selectProps; - - const initCollapses = useMemo(() => createCollapsesObject(arrayOfOptionsGroupedByCategory), [ - arrayOfOptionsGroupedByCategory, - ]); - const [collapses, setCollapses] = useState(initCollapses); - - const toggleCollapse = collapseName => { - setCollapses(prevState => ({ ...prevState, [collapseName]: !collapses[collapseName] })); - }; - - return ( - -
    - {arrayOfOptionsGroupedByCategory.map((category, index) => { - const [categoryName, conditions] = category; - const checkboxName = `${selectProps.name}..${categoryName}`; - - const { - hasAllActionsSelected: hasAllConditionsSelected, - hasSomeActionsSelected: hasSomeConditionsSelected, - } = getCheckboxState(selectProps.value); - - return ( -
  • -
    - - -
    toggleCollapse(categoryName)} - > - -
    -     -
    - - {conditions.map(condition => { - const checkboxValue = get(selectProps.value, [categoryName, condition.id], false); - - return ( -
  • - - - -
    • - ); - })} - - {index + 1 < arrayOfOptionsGroupedByCategory.length.length && ( -
    - )} - - ); - })} -
- - ); -}; - -MenuList.propTypes = { - selectProps: PropTypes.shape({ - arrayOfOptionsGroupedByCategory: PropTypes.array.isRequired, - name: PropTypes.string.isRequired, - onCategoryChange: PropTypes.func.isRequired, - onChange: PropTypes.func.isRequired, - value: PropTypes.object.isRequired, - }).isRequired, -}; -export default MenuList; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/utils/createCollapsesObject.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/utils/createCollapsesObject.js deleted file mode 100644 index e8307f417a..0000000000 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/utils/createCollapsesObject.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Creates an object with keys corresponding to the categoryName and leafs to false except for the first category - * - * @param {array} arrayOfCategories - * @returns {object} - */ -const createCollapsesObject = arrayOfCategories => - arrayOfCategories.reduce((acc, current, index) => { - acc[current[0]] = index === 0; - - return acc; - }, {}); - -export default createCollapsesObject; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/utils/tests/createCollapsesObject.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/utils/tests/createCollapsesObject.test.js deleted file mode 100644 index f1d8cc2d28..0000000000 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/utils/tests/createCollapsesObject.test.js +++ /dev/null @@ -1,13 +0,0 @@ -import createCollapsesObject from '../createCollapsesObject'; - -describe('ADMIN | COMPONENTS | ROLES | ConditionsSelect | utils | createCollapsesObject', () => { - it('should return an object of collapses', () => { - const arrayOfCategories = [['default', [{ id: 'test' }]], ['custom', { id: 'test' }]]; - const expected = { - default: true, - custom: false, - }; - - expect(createCollapsesObject(arrayOfCategories)).toEqual(expected); - }); -}); diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/SingleValue.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/SingleValue.js deleted file mode 100644 index fc52c3a250..0000000000 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/SingleValue.js +++ /dev/null @@ -1,46 +0,0 @@ -/* eslint-disable indent */ -import React from 'react'; -import PropTypes from 'prop-types'; -import { components } from 'react-select'; -import { Text } from '@buffetjs/core'; -import { useIntl } from 'react-intl'; -import { createArrayOfValues } from '../../utils'; - -const Value = ({ children, selectProps, ...props }) => { - const { formatMessage } = useIntl(); - const SingleValue = components.SingleValue; - const valuesArray = createArrayOfValues(selectProps.value).filter(val => val); - - return ( - - - {valuesArray.length === 0 - ? formatMessage({ id: 'Settings.permissions.conditions.none-selected' }) - : formatMessage( - { - id: `Settings.permissions.conditions.selected.${ - selectProps.value.length > 1 ? 'plural' : 'singular' - }`, - }, - { number: valuesArray.length } - )} - - - ); -}; - -Value.defaultProps = { - children: null, - selectProps: { - value: [], - }, -}; - -Value.propTypes = { - children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), - selectProps: PropTypes.shape({ - value: PropTypes.object, - }), -}; - -export default Value; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/index.js deleted file mode 100644 index 674c64c864..0000000000 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/index.js +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import styled from 'styled-components'; -import Select from 'react-select'; -import { useIntl } from 'react-intl'; -import MenuList from './MenuList'; -import ClearIndicator from './ClearIndicator'; -import DropdownIndicator from './CustomDropdownIndicator'; -import IndicatorSeparator from './IndicatorSeparator'; -import SingleValue from './SingleValue'; -import selectStyle from '../utils/selectStyle'; - -const Wrapper = styled.div` - padding-left: ${({ theme }) => theme.main.sizes.paddings.md}; - width: 60%; - cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')}; -`; - -const ConditionsSelect = ({ - arrayOfOptionsGroupedByCategory, - isFormDisabled, - name, - onCategoryChange, - onChange, - value, -}) => { - const { formatMessage } = useIntl(); - - return ( - -