From 9f7208db9d3711377a8aa6259174a54171bbd1c0 Mon Sep 17 00:00:00 2001 From: bulby97 Date: Mon, 16 Aug 2021 10:30:07 +0200 Subject: [PATCH 01/20] wip --- .../ee/admin/pages/Roles/CreatePage/index.js | 97 ++++++++----------- 1 file changed, 38 insertions(+), 59 deletions(-) diff --git a/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js b/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js index ef311da534..88bb763cba 100644 --- a/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js +++ b/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js @@ -1,36 +1,33 @@ -import React, { useState, useRef } from 'react'; -import { Header } from '@buffetjs/custom'; import { Padded } from '@buffetjs/core'; -import moment from 'moment'; -import { Formik } from 'formik'; -import { get, isEmpty } from 'lodash'; -import { useIntl } from 'react-intl'; -import { HeaderLayout, Button } from '@strapi/parts'; -import { AddIcon, EditIcon } from '@strapi/icons'; import { BaselineAlignment, CheckPagePermissions, request, - useTracking, useNotification, useOverlayBlocker, + useTracking, } from '@strapi/helper-plugin'; +import { Button, HeaderLayout, Stack } from '@strapi/parts'; +import { Formik } from 'formik'; +import { get, isEmpty } from 'lodash'; +import moment from 'moment'; +import React, { useRef, useState } from 'react'; +import { useIntl } from 'react-intl'; import { useHistory, useRouteMatch } from 'react-router-dom'; -import adminPermissions from '../../../../../admin/src/permissions'; -import { useFetchPermissionsLayout, useFetchRole } from '../../../../../admin/src/hooks'; -import PageTitle from '../../../../../admin/src/components/SettingsPageTitle'; import FormCard from '../../../../../admin/src/components/FormBloc'; import { ButtonWithNumber } from '../../../../../admin/src/components/Roles'; -import SizedInput from '../../../../../admin/src/components/SizedInput'; import Permissions from '../../../../../admin/src/components/Roles/Permissions'; - +import PageTitle from '../../../../../admin/src/components/SettingsPageTitle'; +import SizedInput from '../../../../../admin/src/components/SizedInput'; +import { useFetchPermissionsLayout, useFetchRole } from '../../../../../admin/src/hooks'; +import adminPermissions from '../../../../../admin/src/permissions'; import schema from './utils/schema'; const CreatePage = () => { const toggleNotification = useNotification(); const { lockApp, unlockApp } = useOverlayBlocker(); const { formatMessage } = useIntl(); - const [isSubmiting, setIsSubmiting] = useState(false); + const [, setIsSubmiting] = useState(false); const { replace } = useHistory(); const permissionsRef = useRef(); const { trackUsage } = useTracking(); @@ -39,31 +36,6 @@ const CreatePage = () => { const { isLoading: isLayoutLoading, data: permissionsLayout } = useFetchPermissionsLayout(); const { permissions: rolePermissions, isLoading: isRoleLoading } = useFetchRole(id); - const headerActions = (handleSubmit, handleReset) => [ - { - label: formatMessage({ - id: 'app.components.Button.reset', - defaultMessage: 'Reset', - }), - onClick: () => { - handleReset(); - permissionsRef.current.resetForm(); - }, - color: 'cancel', - type: 'button', - }, - { - label: formatMessage({ - id: 'app.components.Button.save', - defaultMessage: 'Save', - }), - onClick: handleSubmit, - color: 'success', - type: 'submit', - isLoading: isSubmiting, - }, - ]; - const handleCreateRoleSubmit = data => { lockApp(); setIsSubmiting(true); @@ -145,29 +117,36 @@ const CreatePage = () => {
<> }>Add an entry} - secondaryAction={ - + primaryAction={ + + + + } - title="Other CT" - subtitle="36 entries found" - as="h1" - /> -
Date: Tue, 17 Aug 2021 15:49:07 +0200 Subject: [PATCH 02/20] Form done, WIP collection type --- .../Roles/ContentTypeCollapse/index.js | 8 +- .../components/Roles/ContentTypes/index.js | 23 ++- .../components/Roles/GlobalActions/Wrapper.js | 6 +- .../components/Roles/GlobalActions/index.js | 59 ++++--- .../src/components/Roles/Permissions/index.js | 69 +++++--- .../core/admin/admin/src/translations/en.json | 2 +- .../ee/admin/pages/Roles/CreatePage/index.js | 152 +++++++++++------- 7 files changed, 196 insertions(+), 123 deletions(-) diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/index.js index 2966993ac3..1ab3f0a315 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/index.js @@ -1,9 +1,9 @@ -import React, { useCallback, useMemo } from 'react'; +import { Box } from '@strapi/parts'; import PropTypes from 'prop-types'; +import React, { useCallback, useMemo } from 'react'; import Collapse from './Collapse'; import CollapsePropertyMatrix from './CollapsePropertyMatrix'; import { getAvailableActions } from './utils'; -import Wrapper from './Wrapper'; const ContentTypeCollapse = ({ allActions, @@ -27,7 +27,7 @@ const ContentTypeCollapse = ({ const isOdd = useMemo(() => index % 2 !== 0, [index]); return ( - + ); })} - + ); }; diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypes/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypes/index.js index c0d36c3fbc..1c68fc1647 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypes/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypes/index.js @@ -1,23 +1,20 @@ import React, { memo } from 'react'; import PropTypes from 'prop-types'; -import { Padded } from '@buffetjs/core'; +import { Box } from '@strapi/parts'; import ContentTypeCollapses from '../ContentTypeCollapses'; import GlobalActions from '../GlobalActions'; -import Wrapper from './Wrapper'; const ContentTypes = ({ isFormDisabled, kind, layout: { actions, subjects } }) => { return ( - - - - - - + + + + ); }; diff --git a/packages/core/admin/admin/src/components/Roles/GlobalActions/Wrapper.js b/packages/core/admin/admin/src/components/Roles/GlobalActions/Wrapper.js index 02160ca175..97e64616d5 100644 --- a/packages/core/admin/admin/src/components/Roles/GlobalActions/Wrapper.js +++ b/packages/core/admin/admin/src/components/Roles/GlobalActions/Wrapper.js @@ -1,9 +1,9 @@ import styled from 'styled-components'; const Wrapper = styled.div` - padding-left: 165px; - padding-bottom: 25px; - padding-top: 26px; + padding-left: 200px; + padding-bottom: ${({ theme }) => theme.spaces[4]}; + padding-top: ${({ theme }) => theme.spaces[6]}; ${({ disabled, theme }) => ` input[type='checkbox'] { diff --git a/packages/core/admin/admin/src/components/Roles/GlobalActions/index.js b/packages/core/admin/admin/src/components/Roles/GlobalActions/index.js index c298d183d4..bcbcca8d99 100644 --- a/packages/core/admin/admin/src/components/Roles/GlobalActions/index.js +++ b/packages/core/admin/admin/src/components/Roles/GlobalActions/index.js @@ -1,14 +1,30 @@ -import React, { memo, useMemo } from 'react'; +import { Box, Checkbox, Stack } from '@strapi/parts'; +import IS_DISABLED from 'ee_else_ce/components/Roles/GlobalActions/utils/constants'; import { get } from 'lodash'; import PropTypes from 'prop-types'; -import { Flex } from '@buffetjs/core'; +import React, { memo, useMemo } from 'react'; import { useIntl } from 'react-intl'; -import IS_DISABLED from 'ee_else_ce/components/Roles/GlobalActions/utils/constants'; +import styled from 'styled-components'; import { usePermissionsDataManager } from '../../../hooks'; -import CheckboxWithCondition from '../CheckboxWithCondition'; import { findDisplayedActions, getCheckboxesState } from './utils'; import Wrapper from './Wrapper'; +const Label = styled(Box)` + font-size: ${11 / 16}rem; + text-transform: uppercase; + color: ${({ theme }) => theme.colors.neutral500}; + font-weight: bold; +`; + +// ! TODO - Remove dflex, and fcolumn when strapi/parts is updated +const CenteredStack = styled(Stack)` + align-items: center; + justify-content: center; + display: flex; + flex-direction: column; + width: 120px; +`; + const GlobalActions = ({ actions, isFormDisabled, kind }) => { const { formatMessage } = useIntl(); const { modifiedData, onChangeCollectionTypeGlobalActionCheckbox } = usePermissionsDataManager(); @@ -23,26 +39,29 @@ const GlobalActions = ({ actions, isFormDisabled, kind }) => { return ( - + {displayedActions.map(({ label, actionId }) => { return ( - { - onChangeCollectionTypeGlobalActionCheckbox(kind, actionId, value); - }} - name={actionId} - value={get(checkboxesState, [actionId, 'hasAllActionsSelected'], false)} - someChecked={get(checkboxesState, [actionId, 'hasSomeActionsSelected'], false)} - /> + + + { + onChangeCollectionTypeGlobalActionCheckbox(kind, actionId, value); + }} + name={actionId} + value={get(checkboxesState, [actionId, 'hasAllActionsSelected'], false)} + indeterminate={get(checkboxesState, [actionId, 'hasSomeActionsSelected'], false)} + /> + ); })} - + ); }; diff --git a/packages/core/admin/admin/src/components/Roles/Permissions/index.js b/packages/core/admin/admin/src/components/Roles/Permissions/index.js index ff620d0f77..3d8876ee14 100644 --- a/packages/core/admin/admin/src/components/Roles/Permissions/index.js +++ b/packages/core/admin/admin/src/components/Roles/Permissions/index.js @@ -1,8 +1,9 @@ import React, { forwardRef, memo, useCallback, useImperativeHandle, useReducer } from 'react'; import PropTypes from 'prop-types'; import { difference } from '@strapi/helper-plugin'; +import { TabGroup, Tabs, TabPanels, Tab, TabPanel, Box } from '@strapi/parts'; +import { useIntl } from 'react-intl'; import { has, isEmpty } from 'lodash'; -import Tabs from '../Tabs'; import PermissionsDataManagerProvider from '../PermissionsDataManagerProvider'; import ContentTypes from '../ContentTypes'; import PluginsAndSettings from '../PluginsAndSettings'; @@ -15,6 +16,7 @@ const Permissions = forwardRef(({ layout, isFormDisabled, permissions }, ref) => const [{ initialData, layouts, modifiedData }, dispatch] = useReducer(reducer, initialState, () => init(layout, permissions) ); + const { formatMessage } = useIntl(); useImperativeHandle(ref, () => { return { @@ -106,28 +108,49 @@ const Permissions = forwardRef(({ layout, isFormDisabled, permissions }, ref) => onChangeCollectionTypeGlobalActionCheckbox: handleChangeCollectionTypeGlobalActionCheckbox, }} > - - - - - - + + + {TAB_LABELS.map(tabLabel => ( + {formatMessage({ id: tabLabel.labelId })} + ))} + + + + + + + + + + + + + + + + + + + + + + ); }); diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json index 434d12f519..ad711b8120 100644 --- a/packages/core/admin/admin/src/translations/en.json +++ b/packages/core/admin/admin/src/translations/en.json @@ -127,7 +127,7 @@ "Settings.roles.create.title": "Create a role", "Settings.roles.created": "Role created", "Settings.roles.edit.title": "Edit a role", - "Settings.roles.form.button.users-with-role": "Users with this role", + "Settings.roles.form.button.users-with-role": "{number} users with this role", "Settings.roles.form.created": "Created", "Settings.roles.form.description": "Name and description of the role", "Settings.roles.form.input.description": "Description", diff --git a/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js b/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js index 88bb763cba..8f5fbca3ed 100644 --- a/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js +++ b/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js @@ -1,24 +1,32 @@ -import { Padded } from '@buffetjs/core'; import { - BaselineAlignment, CheckPagePermissions, request, useNotification, useOverlayBlocker, useTracking, } from '@strapi/helper-plugin'; -import { Button, HeaderLayout, Stack } from '@strapi/parts'; +import { + Box, + Button, + ContentLayout, + Grid, + GridItem, + HeaderLayout, + Row, + Stack, + Text, + Textarea, + TextInput, +} from '@strapi/parts'; import { Formik } from 'formik'; import { get, isEmpty } from 'lodash'; import moment from 'moment'; import React, { useRef, useState } from 'react'; import { useIntl } from 'react-intl'; import { useHistory, useRouteMatch } from 'react-router-dom'; -import FormCard from '../../../../../admin/src/components/FormBloc'; -import { ButtonWithNumber } from '../../../../../admin/src/components/Roles'; +import styled from 'styled-components'; import Permissions from '../../../../../admin/src/components/Roles/Permissions'; import PageTitle from '../../../../../admin/src/components/SettingsPageTitle'; -import SizedInput from '../../../../../admin/src/components/SizedInput'; import { useFetchPermissionsLayout, useFetchRole } from '../../../../../admin/src/hooks'; import adminPermissions from '../../../../../admin/src/permissions'; import schema from './utils/schema'; @@ -91,14 +99,19 @@ const CreatePage = () => { }); }; - const actions = [ - console.log('Open user modal')} key="user-button"> - {formatMessage({ - id: 'Settings.roles.form.button.users-with-role', - defaultMessage: 'Users with this role', - })} - , - ]; + const UsersRoleNumber = styled.div` + border: 1px solid ${({ theme }) => theme.colors.primary200}; + background: ${({ theme }) => theme.colors.primary100}; + padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`}; + color: ${({ theme }) => theme.colors.primary600}; + border-radius: ${({ theme }) => theme.borderRadius}; + font-size: ${12 / 16}rem; + font-width: bold; + `; + + const FlexBox = styled(Box)` + flex: 1; + `; const defaultDescription = `${formatMessage({ id: 'Settings.roles.form.created', @@ -120,6 +133,7 @@ const CreatePage = () => { primaryAction={ ); }; @@ -34,13 +40,11 @@ const ConditionsButton = ({ onClick, className, hasConditions, isRight }) => { ConditionsButton.defaultProps = { className: null, hasConditions: false, - isRight: false, }; ConditionsButton.propTypes = { onClick: PropTypes.func.isRequired, className: PropTypes.string, hasConditions: PropTypes.bool, - isRight: PropTypes.bool, }; // This is a styled component advanced usage : diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/Wrapper.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/Wrapper.js deleted file mode 100644 index 48a223f793..0000000000 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/Wrapper.js +++ /dev/null @@ -1,38 +0,0 @@ -import styled from 'styled-components'; -import { Text } from '@buffetjs/core'; -import ConditionsButton from '../../ConditionsButton'; -import Chevron from '../../Chevron'; - -const activeRowStyle = (theme, isActive) => ` - border: 1px solid ${theme.main.colors.darkBlue}; - background-color: ${theme.main.colors.lightBlue}; - color: ${theme.main.colors.mediumBlue}; - border-radius: ${isActive ? '2px 2px 0 0' : '2px'}; - ${Text} { - color: ${theme.main.colors.mediumBlue}; - } - ${Chevron} { - display: block; - } - ${ConditionsButton} { - display: block; - } -`; - -const StyledRow = styled.div` - display: flex; - align-items: center; - height: 36px; - background-color: ${({ isGrey, theme }) => - isGrey ? theme.main.colors.content.background : theme.main.colors.white}; - border: 1px solid transparent; - ${ConditionsButton} { - display: none; - } - ${({ isActive, theme }) => isActive && activeRowStyle(theme, isActive)} - &:hover { - ${({ theme, isActive }) => activeRowStyle(theme, isActive)} - } -`; - -export default StyledRow; diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js index c100485024..f520caf947 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js @@ -1,19 +1,80 @@ -import React, { useMemo, useState } from 'react'; +import { Box, Checkbox, Text, Row } from '@strapi/parts'; +import { Up, Down } from '@strapi/icons'; +import IS_DISABLED from 'ee_else_ce/components/Roles/ContentTypeCollapse/Collapse/utils/constants'; import { get, omit } from 'lodash'; import PropTypes from 'prop-types'; -import { Flex, Padded } from '@buffetjs/core'; -import IS_DISABLED from 'ee_else_ce/components/Roles/ContentTypeCollapse/Collapse/utils/constants'; +import React, { useMemo, useState } from 'react'; +import styled from 'styled-components'; import { usePermissionsDataManager } from '../../../../hooks'; -import { getCheckboxState } from '../../utils'; -import CheckboxWithCondition from '../../CheckboxWithCondition'; -import Chevron from '../../Chevron'; import ConditionsButton from '../../ConditionsButton'; import ConditionsModal from '../../ConditionsModal'; import HiddenAction from '../../HiddenAction'; +import { cellWidth } from '../../Permissions/utils/constants'; import RowLabelWithCheckbox from '../../RowLabelWithCheckbox'; -import Wrapper from './Wrapper'; +import { getCheckboxState } from '../../utils'; import generateCheckboxesActions from './utils/generateCheckboxesActions'; +const activeRowStyle = (theme, isActive, isClicked) => ` + ${isClicked ? `border: 1px solid ${theme.colors.primary600}; border-bottom: none;` : ''} + background-color: ${theme.colors.primary100}; + color: ${theme.colors.primary600}; + border-radius: ${isActive ? '2px 2px 0 0' : '2px'}; + ${Text} { + color: ${theme.colors.primary600}; + font-weight: bold; + } + ${Chevron} { + display: block; + } + ${ConditionsButton} { + display: block; + } +`; + +const Wrapper = styled.div` + display: flex; + align-items: center; + height: 52px; + background-color: ${({ isGrey, theme }) => + isGrey ? theme.colors.neutral100 : theme.colors.neutral0}; + border: 1px solid transparent; + ${ConditionsButton} { + display: none; + } + ${({ isActive, theme }) => isActive && activeRowStyle(theme, isActive, true)} + &:hover { + ${({ theme, isActive }) => activeRowStyle(theme, isActive)} + } +`; + +const Cell = styled(Box)` + width: ${cellWidth}; + display: flex; + align-items: center; + justify-content: center; + position: relative; +`; + +const Chevron = styled(Box)` + display: none; + svg { + width: 11px; + } + * { + fill: ${({ theme }) => theme.colors.primary600}; + } +`; + +const TinyDot = styled(Box)` + position: absolute; + top: 0; + left: 35px; + width: 6px; + height: 6px; + border-radius: 20px; + background: ${({ theme }) => theme.colors.primary600}; +`; + const Collapse = ({ availableActions, isActive, @@ -66,8 +127,7 @@ const Collapse = ({ return ( - - + - + {isActive ? : } - + {checkboxesActions.map( ({ actionId, @@ -98,37 +158,53 @@ const Collapse = ({ if (isParentCheckbox) { return ( - + + {hasConditions && } + + onChangeParentCheckbox({ + target: { + name: checkboxName, + value, + }, + })} + indeterminate={hasSomeActionsSelected} + value={hasAllActionsSelected} + /> + ); } return ( - + + {hasConditions && } + + onChangeSimpleCheckbox({ + target: { + name: checkboxName, + value, + }, + })} + value={hasAllActionsSelected} + /> + ); } )} - + - + {modalState.isMounted && ( - isCollapsable && - ` - ${Chevron} { - display: block; - color: ${theme.main.colors.grey}; - } - &:hover { - ${activeStyle(theme)} - } - `} - ${({ isActive, theme }) => isActive && activeStyle(theme)}; -`; - -export default RowWrapper; diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js index a687e7da8a..c8163e6b30 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js @@ -1,19 +1,60 @@ -import React, { memo, useState, useMemo, useCallback } from 'react'; -import PropTypes from 'prop-types'; -import { get } from 'lodash'; -import { Padded, Flex } from '@buffetjs/core'; +import { Flex } from '@buffetjs/core'; +import { Down, Up } from '@strapi/icons'; +import { Box, Checkbox } from '@strapi/parts'; import IS_DISABLED from 'ee_else_ce/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/utils/constants'; +import { get } from 'lodash'; +import PropTypes from 'prop-types'; +import React, { memo, useCallback, useMemo, useState } from 'react'; +import styled from 'styled-components'; import { usePermissionsDataManager } from '../../../../../hooks'; -import { getCheckboxState } from '../../../utils'; -import CheckboxWithCondition from '../../../CheckboxWithCondition'; -import Chevron from '../../../Chevron'; import HiddenAction from '../../../HiddenAction'; +import { cellWidth } from '../../../Permissions/utils/constants'; import RequiredSign from '../../../RequiredSign'; import RowLabelWithCheckbox from '../../../RowLabelWithCheckbox'; +import { getCheckboxState } from '../../../utils'; +import { activeStyle } from '../../utils'; import SubActionRow from '../SubActionRow'; -import Wrapper from './Wrapper'; import getRowLabelCheckboxeState from './utils/getRowLabelCheckboxeState'; +const Cell = styled(Box)` + width: ${cellWidth}; + display: flex; + align-items: center; + justify-content: center; + position: relative; +`; + +const Chevron = styled(Box)` + display: none; + svg { + width: 11px; + } + * { + fill: ${({ theme }) => theme.colors.primary600}; + } +`; + +const Wrapper = styled(Flex)` + height: 52px; + flex: 1; + background: ${({ theme, isOdd }) => theme.colors[isOdd ? 'neutral100' : 'neutral0']}; + ${Chevron} { + width: 13px; + } + ${({ isCollapsable, theme }) => + isCollapsable && + ` + ${Chevron} { + display: block; + color: ${theme.main.colors.grey}; + } + &:hover { + ${activeStyle(theme)} + } + `} + ${({ isActive, theme }) => isActive && activeStyle(theme)}; +`; + const ActionRow = ({ childrenForm, label, @@ -23,6 +64,7 @@ const ActionRow = ({ pathToData, propertyActions, propertyName, + isOdd, }) => { const [rowToOpen, setRowToOpen] = useState(null); const { @@ -66,11 +108,9 @@ const ActionRow = ({ return ( <> - + - {required && } - + {isActive ? : } {propertyActions.map(({ label, isActionRelatedToCurrentProperty, actionId }) => { @@ -100,13 +140,21 @@ const ActionRow = ({ const checkboxValue = get(modifiedData, checkboxName, false); return ( - + + + onChangeSimpleCheckbox({ + target: { + name: checkboxName, + value, + }, + })} + value={checkboxValue} + /> + ); } @@ -115,14 +163,22 @@ const ActionRow = ({ const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(data); return ( - + + + onChangeParentCheckbox({ + target: { + name: checkboxName, + value, + }, + })} + value={hasAllActionsSelected} + indeterminate={hasSomeActionsSelected} + /> + ); })} @@ -157,6 +213,7 @@ ActionRow.propTypes = { propertyActions: PropTypes.array.isRequired, propertyName: PropTypes.string.isRequired, required: PropTypes.bool, + isOdd: PropTypes.bool.isRequired, }; export default memo(ActionRow); diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js index 6cd69c4947..d29c39fa03 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js @@ -1,20 +1,29 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; -import { Flex, Text } from '@buffetjs/core'; +import { Row, Box } from '@strapi/parts'; import styled from 'styled-components'; +import { cellWidth, firstRowWidth } from '../../../Permissions/utils/constants'; // Those styles are very specific. // so it is not a big problem to use custom paddings and widths. const HeaderLabel = styled.div` - width: 12rem; - padding-top: 1rem; - padding-bottom: 1rem; + justify-content: center; + display: flex; + width: ${cellWidth}; `; const PropertyLabelWrapper = styled.div` - width: 18rem; - padding-top: 1rem; - padding-bottom: 1rem; - padding-left: 3.5rem; + width: ${firstRowWidth}; + display: flex; + align-items: center; + padding-left: ${({ theme }) => theme.spaces[6]}; + height: 52px; +`; + +const Label = styled(Box)` + font-size: ${11 / 16}rem; + text-transform: uppercase; + color: ${({ theme }) => theme.colors.neutral500}; + font-weight: bold; `; const Header = ({ headers, label }) => { @@ -28,9 +37,9 @@ const Header = ({ headers, label }) => { ); return ( - + - {translatedLabel} + {headers.map(header => { if (!header.isActionRelatedToCurrentProperty) { @@ -39,16 +48,16 @@ const Header = ({ headers, label }) => { return ( - + + ); })} - + ); }; diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/Wrapper.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/Wrapper.js deleted file mode 100644 index 34e58c6204..0000000000 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/Wrapper.js +++ /dev/null @@ -1,21 +0,0 @@ -import styled from 'styled-components'; - -const Wrapper = styled.div` - padding-top: 18px; - border: 1px solid ${({ theme }) => theme.main.colors.darkBlue}; - border-top: none; - border-bottom: ${({ isLast, theme }) => { - if (isLast) { - return `1px solid ${theme.main.colors.darkBlue}`; - } - - return `none`; - }}; - border-radius: 0px 0px 2px 2px; -`; - -Wrapper.defaultProps = { - isLast: true, -}; - -export default Wrapper; diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/index.js index 3ce5c4d18f..4bb21e0b06 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/index.js @@ -1,10 +1,27 @@ import React, { useMemo } from 'react'; import PropTypes from 'prop-types'; -import { Padded } from '@buffetjs/core'; +import styled from 'styled-components'; +import { Box } from '@strapi/parts'; import generateHeadersFromActions from './utils/generateHeadersFromActions'; import Header from './Header'; import ActionRow from './ActionRow'; -import Wrapper from './Wrapper'; + +const Wrapper = styled.div` + border: 1px solid ${({ theme }) => theme.colors.primary600}; + border-top: none; + border-bottom: ${({ isLast, theme }) => { + if (isLast) { + return `1px solid ${theme.colors.primary600}`; + } + + return `none`; + }}; + border-radius: 0px 0px 2px 2px; +`; + +Wrapper.defaultProps = { + isLast: true, +}; const CollapsePropertyMatrix = ({ availableActions, @@ -23,8 +40,8 @@ const CollapsePropertyMatrix = ({ return (
- - {childrenForm.map(({ children: childrenForm, label, value, required }) => ( + + {childrenForm.map(({ children: childrenForm, label, value, required }, i) => ( ))} - + ); }; diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/index.js index 1ab3f0a315..91eec906d7 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/index.js @@ -1,4 +1,3 @@ -import { Box } from '@strapi/parts'; import PropTypes from 'prop-types'; import React, { useCallback, useMemo } from 'react'; import Collapse from './Collapse'; @@ -24,10 +23,8 @@ const ContentTypeCollapse = ({ return getAvailableActions(allActions, contentTypeName); }, [allActions, contentTypeName]); - const isOdd = useMemo(() => index % 2 !== 0, [index]); - return ( - + <> ); })} - + ); }; diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypes/Wrapper.js b/packages/core/admin/admin/src/components/Roles/ContentTypes/Wrapper.js deleted file mode 100644 index 657bdb4675..0000000000 --- a/packages/core/admin/admin/src/components/Roles/ContentTypes/Wrapper.js +++ /dev/null @@ -1,13 +0,0 @@ -import styled from 'styled-components'; - -const Wrapper = styled.div` - background-color: ${({ theme }) => theme.main.colors.white}; - overflow: auto; - border-bottom-left-radius: ${({ theme }) => theme.main.sizes.borderRadius}; - border-bottom-right-radius: ${({ theme }) => theme.main.sizes.borderRadius}; - ::-webkit-scrollbar { - height: 10px; - } -`; - -export default Wrapper; diff --git a/packages/core/admin/admin/src/components/Roles/GlobalActions/Wrapper.js b/packages/core/admin/admin/src/components/Roles/GlobalActions/Wrapper.js deleted file mode 100644 index 97e64616d5..0000000000 --- a/packages/core/admin/admin/src/components/Roles/GlobalActions/Wrapper.js +++ /dev/null @@ -1,18 +0,0 @@ -import styled from 'styled-components'; - -const Wrapper = styled.div` - padding-left: 200px; - padding-bottom: ${({ theme }) => theme.spaces[4]}; - padding-top: ${({ theme }) => theme.spaces[6]}; - ${({ disabled, theme }) => - ` - input[type='checkbox'] { - &:after { - color: ${!disabled ? theme.main.colors.mediumBlue : theme.main.colors.grey}; - } - } - cursor: initial; - `} -`; - -export default Wrapper; diff --git a/packages/core/admin/admin/src/components/Roles/GlobalActions/index.js b/packages/core/admin/admin/src/components/Roles/GlobalActions/index.js index bcbcca8d99..574259c1fb 100644 --- a/packages/core/admin/admin/src/components/Roles/GlobalActions/index.js +++ b/packages/core/admin/admin/src/components/Roles/GlobalActions/index.js @@ -6,8 +6,8 @@ import React, { memo, useMemo } from 'react'; import { useIntl } from 'react-intl'; import styled from 'styled-components'; import { usePermissionsDataManager } from '../../../hooks'; +import { cellWidth, firstRowWidth } from '../Permissions/utils/constants'; import { findDisplayedActions, getCheckboxesState } from './utils'; -import Wrapper from './Wrapper'; const Label = styled(Box)` font-size: ${11 / 16}rem; @@ -22,7 +22,22 @@ const CenteredStack = styled(Stack)` justify-content: center; display: flex; flex-direction: column; - width: 120px; + width: ${cellWidth}; +`; + +const Wrapper = styled.div` + padding-left: ${firstRowWidth}; + padding-bottom: ${({ theme }) => theme.spaces[4]}; + padding-top: ${({ theme }) => theme.spaces[6]}; + ${({ disabled, theme }) => + ` + input[type='checkbox'] { + &:after { + color: ${!disabled ? theme.main.colors.mediumBlue : theme.main.colors.grey}; + } + } + cursor: initial; + `} `; const GlobalActions = ({ actions, isFormDisabled, kind }) => { @@ -39,7 +54,7 @@ const GlobalActions = ({ actions, isFormDisabled, kind }) => { return ( - + {displayedActions.map(({ label, actionId }) => { return ( diff --git a/packages/core/admin/admin/src/components/Roles/Permissions/utils/constants.js b/packages/core/admin/admin/src/components/Roles/Permissions/utils/constants.js new file mode 100644 index 0000000000..c77ec5d474 --- /dev/null +++ b/packages/core/admin/admin/src/components/Roles/Permissions/utils/constants.js @@ -0,0 +1,2 @@ +export const cellWidth = '120px'; +export const firstRowWidth = '200px'; diff --git a/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/Wrapper.js b/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/Wrapper.js deleted file mode 100644 index db7c351f2f..0000000000 --- a/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/Wrapper.js +++ /dev/null @@ -1,29 +0,0 @@ -import styled from 'styled-components'; - -import PropTypes from 'prop-types'; - -const Wrapper = styled.div` - display: flex; - align-items: center; - width: ${({ width }) => width}; - ${({ disabled, theme }) => - disabled && - ` - input[type='checkbox'] { - cursor: not-allowed; - &:after { - color: ${theme.main.colors.grey}; - } - } - `} -`; - -Wrapper.defaultProps = { - width: '18rem', -}; - -Wrapper.propTypes = { - width: PropTypes.string, -}; - -export default Wrapper; diff --git a/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js b/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js index 4856b86dc8..011b3feb24 100644 --- a/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js +++ b/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js @@ -1,8 +1,33 @@ import React, { memo } from 'react'; import PropTypes from 'prop-types'; -import { Checkbox, Text } from '@buffetjs/core'; +import styled from 'styled-components'; +import { Checkbox, Text, Box } from '@strapi/parts'; import CollapseLabel from '../CollapseLabel'; -import Wrapper from './Wrapper'; +import { firstRowWidth } from '../Permissions/utils/constants'; + +const Wrapper = styled(Box)` + display: flex; + align-items: center; + width: ${firstRowWidth}; + padding-left: ${({ theme }) => theme.spaces[6]}; + + ${({ disabled, theme }) => + disabled && + ` + input[type='checkbox'] { + cursor: not-allowed; + &:after { + color: ${theme.main.colors.grey}; + } + } + `}; +`; + +const StyledText = styled(Text)` + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +`; const RowLabelWithCheckbox = ({ children, @@ -13,17 +38,22 @@ const RowLabelWithCheckbox = ({ onClick, checkboxName, someChecked, - textColor, value, - width, }) => { return ( - + + onChange({ + target: { + name: checkboxName, + value, + }, + })} + indeterminate={someChecked} value={value} /> - - {label} - + {label.charAt(0).toUpperCase() + label.slice(1)} {children} @@ -55,8 +76,6 @@ RowLabelWithCheckbox.defaultProps = { value: false, someChecked: false, isCollapsable: false, - textColor: 'grey', - width: '18rem', }; RowLabelWithCheckbox.propTypes = { @@ -68,9 +87,7 @@ RowLabelWithCheckbox.propTypes = { onChange: PropTypes.func, onClick: PropTypes.func.isRequired, someChecked: PropTypes.bool, - textColor: PropTypes.string, value: PropTypes.bool, - width: PropTypes.string, }; export default memo(RowLabelWithCheckbox); From e7ba1c3230429eb460dd97aa869dcade1f7fca9a Mon Sep 17 00:00:00 2001 From: bulby97 Date: Thu, 19 Aug 2021 10:59:39 +0200 Subject: [PATCH 04/20] Fix flex issues, and improve use of DS --- .../Roles/ConditionsButton/index.js | 1 + .../ContentTypeCollapse/Collapse/index.js | 119 +++++++++--------- .../CollapsePropertyMatrix/ActionRow/index.js | 17 ++- .../SubActionRow/Wrapper.js | 8 -- .../SubActionRow/index.js | 6 +- .../components/Roles/GlobalActions/index.js | 16 +-- .../src/components/Roles/Permissions/index.js | 52 ++++---- .../ee/admin/pages/Roles/CreatePage/index.js | 36 +++--- 8 files changed, 112 insertions(+), 143 deletions(-) delete mode 100644 packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/Wrapper.js diff --git a/packages/core/admin/admin/src/components/Roles/ConditionsButton/index.js b/packages/core/admin/admin/src/components/Roles/ConditionsButton/index.js index ed92c7405e..a90459a83f 100644 --- a/packages/core/admin/admin/src/components/Roles/ConditionsButton/index.js +++ b/packages/core/admin/admin/src/components/Roles/ConditionsButton/index.js @@ -7,6 +7,7 @@ import styled from 'styled-components'; const Wrapper = styled.div` position: relative; + margin-left: auto; padding-right: ${({ theme }) => theme.spaces[6]}; ${({ hasConditions, disabled, theme }) => diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js index f520caf947..b62f694c3c 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js @@ -47,11 +47,8 @@ const Wrapper = styled.div` } `; -const Cell = styled(Box)` +const Cell = styled(Row)` width: ${cellWidth}; - display: flex; - align-items: center; - justify-content: center; position: relative; `; @@ -127,84 +124,82 @@ const Collapse = ({ return ( - - - {isActive ? : } - + + {isActive ? : } + - - {checkboxesActions.map( - ({ - actionId, - hasConditions, - hasAllActionsSelected, - hasSomeActionsSelected, - isDisplayed, - isParentCheckbox, - checkboxName, - }) => { - if (!isDisplayed) { - return ; - } - - if (isParentCheckbox) { - return ( - - {hasConditions && } - - onChangeParentCheckbox({ - target: { - name: checkboxName, - value, - }, - })} - indeterminate={hasSomeActionsSelected} - value={hasAllActionsSelected} - /> - - ); - } + + {checkboxesActions.map( + ({ + actionId, + hasConditions, + hasAllActionsSelected, + hasSomeActionsSelected, + isDisplayed, + isParentCheckbox, + checkboxName, + }) => { + if (!isDisplayed) { + return ; + } + if (isParentCheckbox) { return ( - + {hasConditions && } - onChangeSimpleCheckbox({ + onChangeParentCheckbox({ target: { name: checkboxName, value, }, })} + indeterminate={hasSomeActionsSelected} value={hasAllActionsSelected} /> ); } - )} - - + + return ( + + {hasConditions && } + + onChangeSimpleCheckbox({ + target: { + name: checkboxName, + value, + }, + })} + value={hasAllActionsSelected} + /> + + ); + } + )} + {modalState.isMounted && ( theme.colors[isOdd ? 'neutral100' : 'neutral0']}; @@ -109,7 +108,7 @@ const ActionRow = ({ return ( <> - + } {isActive ? : } - + {propertyActions.map(({ label, isActionRelatedToCurrentProperty, actionId }) => { if (!isActionRelatedToCurrentProperty) { return ; @@ -148,7 +147,7 @@ const ActionRow = ({ onValueChange={value => onChangeSimpleCheckbox({ target: { - name: checkboxName, + name: checkboxName.join('..'), value, }, })} @@ -171,7 +170,7 @@ const ActionRow = ({ onValueChange={value => onChangeParentCheckbox({ target: { - name: checkboxName, + name: checkboxName.join('..'), value, }, })} @@ -181,8 +180,8 @@ const ActionRow = ({ ); })} - - + + {isActive && ( + {childrenForm.map(({ label, value, required, children: subChildrenForm }, index) => { const isVisible = index + 1 < childrenForm.length; @@ -159,7 +159,7 @@ const SubActionRow = ({ ); })} - + ); }; diff --git a/packages/core/admin/admin/src/components/Roles/GlobalActions/index.js b/packages/core/admin/admin/src/components/Roles/GlobalActions/index.js index 574259c1fb..c81f13bbad 100644 --- a/packages/core/admin/admin/src/components/Roles/GlobalActions/index.js +++ b/packages/core/admin/admin/src/components/Roles/GlobalActions/index.js @@ -1,4 +1,4 @@ -import { Box, Checkbox, Stack } from '@strapi/parts'; +import { Checkbox, Stack, TableLabel } from '@strapi/parts'; import IS_DISABLED from 'ee_else_ce/components/Roles/GlobalActions/utils/constants'; import { get } from 'lodash'; import PropTypes from 'prop-types'; @@ -9,19 +9,9 @@ import { usePermissionsDataManager } from '../../../hooks'; import { cellWidth, firstRowWidth } from '../Permissions/utils/constants'; import { findDisplayedActions, getCheckboxesState } from './utils'; -const Label = styled(Box)` - font-size: ${11 / 16}rem; - text-transform: uppercase; - color: ${({ theme }) => theme.colors.neutral500}; - font-weight: bold; -`; - -// ! TODO - Remove dflex, and fcolumn when strapi/parts is updated const CenteredStack = styled(Stack)` align-items: center; justify-content: center; - display: flex; - flex-direction: column; width: ${cellWidth}; `; @@ -58,12 +48,12 @@ const GlobalActions = ({ actions, isFormDisabled, kind }) => { {displayedActions.map(({ label, actionId }) => { return ( - + { diff --git a/packages/core/admin/admin/src/components/Roles/Permissions/index.js b/packages/core/admin/admin/src/components/Roles/Permissions/index.js index 3d8876ee14..31ebec6c94 100644 --- a/packages/core/admin/admin/src/components/Roles/Permissions/index.js +++ b/packages/core/admin/admin/src/components/Roles/Permissions/index.js @@ -1,16 +1,16 @@ -import React, { forwardRef, memo, useCallback, useImperativeHandle, useReducer } from 'react'; -import PropTypes from 'prop-types'; import { difference } from '@strapi/helper-plugin'; -import { TabGroup, Tabs, TabPanels, Tab, TabPanel, Box } from '@strapi/parts'; -import { useIntl } from 'react-intl'; +import { Tab, TabGroup, TabPanel, TabPanels, Tabs } from '@strapi/parts'; import { has, isEmpty } from 'lodash'; -import PermissionsDataManagerProvider from '../PermissionsDataManagerProvider'; +import PropTypes from 'prop-types'; +import React, { forwardRef, memo, useCallback, useImperativeHandle, useReducer } from 'react'; +import { useIntl } from 'react-intl'; import ContentTypes from '../ContentTypes'; +import PermissionsDataManagerProvider from '../PermissionsDataManagerProvider'; import PluginsAndSettings from '../PluginsAndSettings'; -import TAB_LABELS from './utils/tabLabels'; -import formatPermissionsToAPI from './utils/formatPermissionsToAPI'; import init from './init'; import reducer, { initialState } from './reducer'; +import formatPermissionsToAPI from './utils/formatPermissionsToAPI'; +import TAB_LABELS from './utils/tabLabels'; const Permissions = forwardRef(({ layout, isFormDisabled, permissions }, ref) => { const [{ initialData, layouts, modifiedData }, dispatch] = useReducer(reducer, initialState, () => @@ -108,7 +108,7 @@ const Permissions = forwardRef(({ layout, isFormDisabled, permissions }, ref) => onChangeCollectionTypeGlobalActionCheckbox: handleChangeCollectionTypeGlobalActionCheckbox, }} > - + {TAB_LABELS.map(tabLabel => ( {formatMessage({ id: tabLabel.labelId })} @@ -123,31 +123,25 @@ const Permissions = forwardRef(({ layout, isFormDisabled, permissions }, ref) => /> - - - + - - - + - - - + diff --git a/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js b/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js index 8f5fbca3ed..2029aa9472 100644 --- a/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js +++ b/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js @@ -17,6 +17,7 @@ import { Text, Textarea, TextInput, + Main, } from '@strapi/parts'; import { Formik } from 'formik'; import { get, isEmpty } from 'lodash'; @@ -31,6 +32,16 @@ import { useFetchPermissionsLayout, useFetchRole } from '../../../../../admin/sr import adminPermissions from '../../../../../admin/src/permissions'; import schema from './utils/schema'; +const UsersRoleNumber = styled.div` + border: 1px solid ${({ theme }) => theme.colors.primary200}; + background: ${({ theme }) => theme.colors.primary100}; + padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`}; + color: ${({ theme }) => theme.colors.primary600}; + border-radius: ${({ theme }) => theme.borderRadius}; + font-size: ${12 / 16}rem; + font-width: bold; +`; + const CreatePage = () => { const toggleNotification = useNotification(); const { lockApp, unlockApp } = useOverlayBlocker(); @@ -99,26 +110,12 @@ const CreatePage = () => { }); }; - const UsersRoleNumber = styled.div` - border: 1px solid ${({ theme }) => theme.colors.primary200}; - background: ${({ theme }) => theme.colors.primary100}; - padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`}; - color: ${({ theme }) => theme.colors.primary600}; - border-radius: ${({ theme }) => theme.borderRadius}; - font-size: ${12 / 16}rem; - font-width: bold; - `; - - const FlexBox = styled(Box)` - flex: 1; - `; - const defaultDescription = `${formatMessage({ id: 'Settings.roles.form.created', })} ${moment().format('LL')}`; return ( - <> +
{
<>
); }; From fddb6fffe028189ba43309d188cdc20122aba323 Mon Sep 17 00:00:00 2001 From: bulby97 Date: Thu, 19 Aug 2021 14:09:12 +0200 Subject: [PATCH 05/20] Make collapseLabel a11ible --- .../admin/src/components/Roles/CollapseLabel/index.js | 6 +++--- .../src/components/Roles/RowLabelWithCheckbox/index.js | 7 ++++++- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/core/admin/admin/src/components/Roles/CollapseLabel/index.js b/packages/core/admin/admin/src/components/Roles/CollapseLabel/index.js index e6948dc06f..c2e2ccecd3 100644 --- a/packages/core/admin/admin/src/components/Roles/CollapseLabel/index.js +++ b/packages/core/admin/admin/src/components/Roles/CollapseLabel/index.js @@ -1,8 +1,8 @@ import styled from 'styled-components'; -import { Flex } from '@buffetjs/core'; +import { Row } from '@strapi/parts'; -const CollapseLabel = styled(Flex)` - padding-right: 10px; +const CollapseLabel = styled(Row)` + padding-right: ${({ theme }) => theme.spaces[2]}; overflow: hidden; flex: 1; ${({ isCollapsable }) => isCollapsable && 'cursor: pointer;'} diff --git a/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js b/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js index 011b3feb24..32b7218977 100644 --- a/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js +++ b/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js @@ -60,7 +60,12 @@ const RowLabelWithCheckbox = ({ title={label} alignItems="center" isCollapsable={isCollapsable} - onClick={onClick} + {...(isCollapsable && { + onClick, + onKeyDown: ({ key }) => (key === 'Enter' || key === ' ') && onClick(), + tabIndex: 0, + role: 'button', + })} > {label.charAt(0).toUpperCase() + label.slice(1)} {children} From 7a68a06082c06a8540bbf8d1eb050ca022cf5a07 Mon Sep 17 00:00:00 2001 From: bulby97 Date: Fri, 20 Aug 2021 09:10:18 +0200 Subject: [PATCH 06/20] move to ds accordion --- .../Roles/ConditionsButton/index.js | 8 +- .../ContentTypeCollapse/Collapse/index.js | 12 +- .../Roles/PluginsAndSettings/ListWrapper.js | 10 -- .../Roles/PluginsAndSettings/Row/Wrapper.js | 28 ---- .../Roles/PluginsAndSettings/Row/index.js | 44 +++---- .../SubCategory/CheckboxWrapper.js | 22 ---- .../SubCategory/ConditionsButtonWrapper.js | 13 -- .../PluginsAndSettings/SubCategory/Wrapper.js | 26 ---- .../PluginsAndSettings/SubCategory/index.js | 124 ++++++++++-------- .../Roles/PluginsAndSettings/index.js | 39 +++--- .../Roles/RowLabelWithCheckbox/index.js | 7 +- 11 files changed, 122 insertions(+), 211 deletions(-) delete mode 100644 packages/core/admin/admin/src/components/Roles/PluginsAndSettings/ListWrapper.js delete mode 100644 packages/core/admin/admin/src/components/Roles/PluginsAndSettings/Row/Wrapper.js delete mode 100644 packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/CheckboxWrapper.js delete mode 100644 packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/ConditionsButtonWrapper.js delete mode 100644 packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/Wrapper.js diff --git a/packages/core/admin/admin/src/components/Roles/ConditionsButton/index.js b/packages/core/admin/admin/src/components/Roles/ConditionsButton/index.js index a90459a83f..a445371892 100644 --- a/packages/core/admin/admin/src/components/Roles/ConditionsButton/index.js +++ b/packages/core/admin/admin/src/components/Roles/ConditionsButton/index.js @@ -7,8 +7,6 @@ import styled from 'styled-components'; const Wrapper = styled.div` position: relative; - margin-left: auto; - padding-right: ${({ theme }) => theme.spaces[6]}; ${({ hasConditions, disabled, theme }) => hasConditions && @@ -26,12 +24,12 @@ const Wrapper = styled.div` `} `; -const ConditionsButton = ({ onClick, className, hasConditions }) => { +const ConditionsButton = ({ onClick, className, hasConditions, variant }) => { const { formatMessage } = useIntl(); return ( - @@ -41,11 +39,13 @@ const ConditionsButton = ({ onClick, className, hasConditions }) => { ConditionsButton.defaultProps = { className: null, hasConditions: false, + variant: 'secondary', }; ConditionsButton.propTypes = { onClick: PropTypes.func.isRequired, className: PropTypes.string, hasConditions: PropTypes.bool, + variant: PropTypes.string, }; // This is a styled component advanced usage : diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js index b62f694c3c..a31f0b0605 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js @@ -137,7 +137,7 @@ const Collapse = ({ {isActive ? : } - + {checkboxesActions.map( ({ actionId, @@ -196,10 +196,12 @@ const Collapse = ({ } )} - + + + {modalState.isMounted && ( theme.main.colors.white}; - border-bottom-left-radius: ${({ theme }) => theme.main.sizes.borderRadius}; - border-bottom-right-radius: ${({ theme }) => theme.main.sizes.borderRadius}; - padding: 1.8rem 0; -`; - -export default ListWrapper; diff --git a/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/Row/Wrapper.js b/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/Row/Wrapper.js deleted file mode 100644 index 4ed1014fd8..0000000000 --- a/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/Row/Wrapper.js +++ /dev/null @@ -1,28 +0,0 @@ -import styled from 'styled-components'; -import { Text } from '@buffetjs/core'; - -const activeStyle = theme => ` - background-color: ${theme.main.colors.lightestBlue}; - border: 1px solid ${theme.main.colors.darkBlue}; - ${Text} { - color: ${theme.main.colors.mediumBlue}; - } - svg { - color: ${theme.main.colors.mediumBlue}; - } -`; - -const RowStyle = styled.div` - height: 5.4rem; - padding: 1rem 3rem; - border: 1px solid transparent; - background-color: ${({ theme, isWhite }) => theme.main.colors[isWhite ? 'white' : 'lightGrey']}; - cursor: pointer; - &:hover { - background-color: ${({ theme }) => theme.main.colors.lightestBlue}; - ${({ theme }) => activeStyle(theme)}; - } - ${({ isActive, theme }) => isActive && activeStyle(theme)}; -`; - -export default RowStyle; diff --git a/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/Row/index.js b/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/Row/index.js index abbfd03adb..d9dafcbfe7 100644 --- a/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/Row/index.js +++ b/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/Row/index.js @@ -1,11 +1,9 @@ -import React, { useMemo } from 'react'; -import { Flex, Text } from '@buffetjs/core'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { PermissionsWrapper, RowContainer } from '@strapi/helper-plugin'; +import { Accordion, AccordionContent, AccordionToggle, Box } from '@strapi/parts'; +import upperFirst from 'lodash/upperFirst'; import PropTypes from 'prop-types'; +import React, { useMemo } from 'react'; import { useIntl } from 'react-intl'; import SubCategory from '../SubCategory'; -import RowStyle from './Wrapper'; const PermissionRow = ({ childrenForm, @@ -30,26 +28,18 @@ const PermissionRow = ({ }, [name]); return ( - - - -
- - {categoryName} - - - {formatMessage({ id: 'Settings.permissions.category' }, { category: categoryName })} -  {kind === 'plugins' ? 'plugin' : kind} - -
-
- -
- - + + - {isOpen && ( - + + {childrenForm.map(({ actions, subCategoryName, subCategoryId }) => ( ))} - - )} - + + + ); }; diff --git a/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/CheckboxWrapper.js b/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/CheckboxWrapper.js deleted file mode 100644 index 5c6429d212..0000000000 --- a/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/CheckboxWrapper.js +++ /dev/null @@ -1,22 +0,0 @@ -/* eslint-disable indent */ -import styled from 'styled-components'; - -const CheckboxWrapper = styled.div` - min-width: 33%; - padding: 0.9rem; - height: 3.6rem; - position: relative; - ${({ hasConditions, disabled, theme }) => - hasConditions && - ` - &:before { - content: '•'; - position: absolute; - top: 2px; - left: 0px; - color: ${disabled ? theme.main.colors.grey : theme.main.colors.mediumBlue}; - } - `} -`; - -export default CheckboxWrapper; diff --git a/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/ConditionsButtonWrapper.js b/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/ConditionsButtonWrapper.js deleted file mode 100644 index aea1db164d..0000000000 --- a/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/ConditionsButtonWrapper.js +++ /dev/null @@ -1,13 +0,0 @@ -/* eslint-disable indent */ -import styled from 'styled-components'; - -const ConditionsButtonWrapper = styled.div` - padding: 0.9rem; - ${({ hasConditions }) => - hasConditions && - ` - padding-left: 22px; - `} -`; - -export default ConditionsButtonWrapper; diff --git a/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/Wrapper.js b/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/Wrapper.js deleted file mode 100644 index aebf74cd33..0000000000 --- a/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/Wrapper.js +++ /dev/null @@ -1,26 +0,0 @@ -/* eslint-disable indent */ -import styled from 'styled-components'; - -const Wrapper = styled.div` - padding-bottom: 2.6rem; - input[type='checkbox'] { - &:after { - color: ${({ theme }) => theme.main.colors.mediumBlue}; - } - } - ${({ disabled, theme }) => - disabled && - ` - label { - cursor: default !important; - color: ${theme.main.colors.grey}; - } - input[type='checkbox'] { - &:after { - color: ${theme.main.colors.grey}; - } - } - `} -`; - -export default Wrapper; diff --git a/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js b/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js index 7882f9f905..6691930cd0 100644 --- a/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js +++ b/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js @@ -1,25 +1,39 @@ import React, { useMemo, useState } from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; -import { Flex, Padded, Text, Checkbox } from '@buffetjs/core'; +import { Row, Box, TableLabel, Checkbox, Grid, GridItem } from '@strapi/parts'; + import { useIntl } from 'react-intl'; -import { BaselineAlignment } from '@strapi/helper-plugin'; import { get } from 'lodash'; import IS_DISABLED from 'ee_else_ce/components/Roles/PluginsAndSettings/SubCategory/utils/constants'; import { usePermissionsDataManager } from '../../../../hooks'; import { getCheckboxState, removeConditionKeyFromData } from '../../utils'; import ConditionsButton from '../../ConditionsButton'; import ConditionsModal from '../../ConditionsModal'; -import CheckboxWrapper from './CheckboxWrapper'; -import ConditionsButtonWrapper from './ConditionsButtonWrapper'; -import Wrapper from './Wrapper'; import { formatActions, getConditionsButtonState } from './utils'; const Border = styled.div` flex: 1; align-self: center; - border-top: 1px solid #f6f6f6; - padding: 0px 10px; + border-top: 1px solid ${({ theme }) => theme.colors.neutral150}; +`; + +const CheckboxWrapper = styled.div` + position: relative; + ${({ hasConditions, disabled, theme }) => + hasConditions && + ` + &:before { + content: ''; + position: absolute; + top: -4px; + left: -8px; + width: 6px; + height: 6px; + border-radius: 20px; + background: ${disabled ? theme.colors.neutral100 : theme.colors.primary600}; + } + `} `; const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, pathToData }) => { @@ -56,61 +70,67 @@ const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, p return ( <> - - - - - {subCategoryName} - - + + + + {subCategoryName} + - - + + onChangeParentCheckbox({ + target: { + name: pathToData.join('..'), + value, + }, + })} + indeterminate={hasSomeActionsSelected} value={hasAllActionsSelected} - /> - - - - - + > + {formatMessage({ id: 'app.utils.select-all' })} + + + + + {formattedActions.map(({ checkboxName, value, action, displayName, hasConditions }) => { return ( - - + - + hasConditions={hasConditions} + > + + onChangeSimpleCheckbox({ + target: { + name: checkboxName, + value, + }, + })} + value={value} + > + {displayName} + + + ); })} - - - - - - + + + + {modalState.isMounted && ( { @@ -12,25 +11,23 @@ const PluginsAndSettingsPermissions = ({ isFormDisabled, kind, layout }) => { }; return ( - - - {layout.map(({ category, categoryId, childrenForm }, index) => { - return ( - - ); - })} - - + + {layout.map(({ category, categoryId, childrenForm }, index) => { + return ( + + ); + })} + ); }; diff --git a/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js b/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js index 32b7218977..6c56978405 100644 --- a/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js +++ b/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js @@ -1,7 +1,8 @@ -import React, { memo } from 'react'; +import { Box, Checkbox, Text } from '@strapi/parts'; +import upperFirst from 'lodash/upperFirst'; import PropTypes from 'prop-types'; +import React, { memo } from 'react'; import styled from 'styled-components'; -import { Checkbox, Text, Box } from '@strapi/parts'; import CollapseLabel from '../CollapseLabel'; import { firstRowWidth } from '../Permissions/utils/constants'; @@ -67,7 +68,7 @@ const RowLabelWithCheckbox = ({ role: 'button', })} > - {label.charAt(0).toUpperCase() + label.slice(1)} + {upperFirst(label)} {children} From deb6859a5699f1b0ad75e402c3e403942d10c92c Mon Sep 17 00:00:00 2001 From: bulby97 Date: Fri, 20 Aug 2021 14:58:25 +0200 Subject: [PATCH 07/20] Add modal condition button --- .../ConditionsModal/ActionRow/Wrapper.js | 12 -- .../Roles/ConditionsModal/ActionRow/index.js | 75 ++++----- .../Roles/ConditionsModal/Separator.js | 9 -- .../components/Roles/ConditionsModal/index.js | 149 ++++++++++++------ .../ContentTypeCollapse/Collapse/index.js | 4 +- .../CollapsePropertyMatrix/ActionRow/index.js | 1 + 6 files changed, 132 insertions(+), 118 deletions(-) delete mode 100644 packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/Wrapper.js delete mode 100644 packages/core/admin/admin/src/components/Roles/ConditionsModal/Separator.js diff --git a/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/Wrapper.js b/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/Wrapper.js deleted file mode 100644 index b16441fb9c..0000000000 --- a/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/Wrapper.js +++ /dev/null @@ -1,12 +0,0 @@ -import styled from 'styled-components'; - -const Wrapper = styled.div` - display: flex; - height: 36px; - border-radius: ${({ theme }) => theme.main.sizes.borderRadius}; - margin-bottom: 18px; - background-color: ${({ theme, isGrey }) => - isGrey ? theme.main.colors.content.background : theme.main.colors.white}; -`; - -export default Wrapper; diff --git a/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js b/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js index bd80e4fb94..c630abf8bc 100644 --- a/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js +++ b/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js @@ -1,10 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Text, Padded, Flex } from '@buffetjs/core'; +import { Row, TableLabel } from '@strapi/parts'; import { useIntl } from 'react-intl'; +import styled from 'styled-components'; import ConditionsSelect from '../ConditionsSelect'; -import Wrapper from './Wrapper'; + +const RowWrapper = styled(Row)` + height: 52px; +`; const ActionRow = ({ arrayOfOptionsGroupedByCategory, @@ -19,50 +23,27 @@ const ActionRow = ({ const { formatMessage } = useIntl(); return ( - - - - - {formatMessage({ - id: 'Settings.permissions.conditions.can', - })} -   - - - {formatMessage({ - id: `Settings.roles.form.permissions.${label.toLowerCase()}`, - defaultMessage: label, - })} - - -   - {formatMessage({ - id: 'Settings.permissions.conditions.when', - })} - - - + + + + {formatMessage({ + id: 'Settings.permissions.conditions.can', + })} +   + + + {formatMessage({ + id: `Settings.roles.form.permissions.${label.toLowerCase()}`, + defaultMessage: label, + })} + + +   + {formatMessage({ + id: 'Settings.permissions.conditions.when', + })} + + - + ); }; diff --git a/packages/core/admin/admin/src/components/Roles/ConditionsModal/Separator.js b/packages/core/admin/admin/src/components/Roles/ConditionsModal/Separator.js deleted file mode 100644 index 5ac1963d5c..0000000000 --- a/packages/core/admin/admin/src/components/Roles/ConditionsModal/Separator.js +++ /dev/null @@ -1,9 +0,0 @@ -import styled from 'styled-components'; - -const Separator = styled.div` - padding-top: 1.4rem; - margin-bottom: 2.8rem; - border-bottom: 1px solid ${({ theme }) => theme.main.colors.brightGrey}; -`; - -export default Separator; diff --git a/packages/core/admin/admin/src/components/Roles/ConditionsModal/index.js b/packages/core/admin/admin/src/components/Roles/ConditionsModal/index.js index 5e1c66b631..b5d383535c 100644 --- a/packages/core/admin/admin/src/components/Roles/ConditionsModal/index.js +++ b/packages/core/admin/admin/src/components/Roles/ConditionsModal/index.js @@ -1,14 +1,38 @@ -import React, { useMemo, useState } from 'react'; +import { After } from '@strapi/icons'; +import { + Box, + Button, + H2, + ModalFooter, + ModalHeader, + ModalLayout, + Stack, + Text, + TextButton, +} from '@strapi/parts'; +import { cloneDeep, get, groupBy, set, upperFirst } from 'lodash'; import PropTypes from 'prop-types'; -import { cloneDeep, get, groupBy, set } from 'lodash'; -import { Modal, ModalHeader, ModalFooter } from '@strapi/helper-plugin'; -import { Button, Text, Padded } from '@buffetjs/core'; -import { useIntl } from 'react-intl'; +import React, { useMemo, useState } from 'react'; +import { FormattedMessage, useIntl } from 'react-intl'; +import styled from 'styled-components'; import { usePermissionsDataManager } from '../../../hooks'; -import createDefaultConditionsForm from './utils/createDefaultConditionsForm'; -import ActionRow from './ActionRow'; -import Separator from './Separator'; import updateValues from '../Permissions/utils/updateValues'; +import ActionRow from './ActionRow'; +import createDefaultConditionsForm from './utils/createDefaultConditionsForm'; + +// ! Something needs to be done in the DS parts to avoid doing this +const Icon = styled(Box)` + svg { + width: 6px; + } + * { + fill: ${({ theme }) => theme.colors.neutral300}; + } +`; + +const Separator = styled.div` + border-bottom: 1px solid ${({ theme }) => theme.main.colors.brightGrey}; +`; const ConditionsModal = ({ actions, @@ -21,6 +45,11 @@ const ConditionsModal = ({ const { formatMessage } = useIntl(); const { availableConditions, modifiedData, onChangeConditions } = usePermissionsDataManager(); + const translatedHeaders = headerBreadCrumbs.map(headerTrad => ({ + key: headerTrad, + element: , + })); + const arrayOfOptionsGroupedByCategory = useMemo(() => { return Object.entries(groupBy(availableConditions, 'category')); }, [availableConditions]); @@ -79,53 +108,77 @@ const ConditionsModal = ({ onToggle(); }; - return ( - - - - - {formatMessage({ - id: 'Settings.permissions.conditions.define-conditions', - })} - - - {actionsToDisplay.length === 0 && ( - - {formatMessage({ id: 'Settings.permissions.conditions.no-actions' })} - - )} - {actionsToDisplay.map(({ actionId, label, pathToConditionsObject }, index) => { - const name = pathToConditionsObject.join('..'); + if (!isOpen) return null; - return ( - - ); - })} - - -
- - - -
- - + } + /> + ); }; diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js index a31f0b0605..75a45e8d75 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js @@ -64,8 +64,8 @@ const Chevron = styled(Box)` const TinyDot = styled(Box)` position: absolute; - top: 0; - left: 35px; + top: -6px; + left: 37px; width: 6px; height: 6px; border-radius: 20px; diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js index bd75f78cac..92f730f2a4 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js @@ -23,6 +23,7 @@ const Cell = styled(Box)` position: relative; `; +// ! Something needs to be done in the DS parts to avoid doing this const Chevron = styled(Box)` display: none; svg { From e9dda123a58472860da8648b6cd855d7fce0ddb5 Mon Sep 17 00:00:00 2001 From: bulby97 Date: Mon, 23 Aug 2021 10:49:57 +0200 Subject: [PATCH 08/20] Add defaultMessage, add plural syntax --- .../Roles/ConditionsButton/index.js | 5 ++++- .../Roles/ConditionsModal/ActionRow/index.js | 2 ++ .../components/Roles/ConditionsModal/index.js | 20 ++++++++++++------- .../src/components/Roles/Permissions/index.js | 4 +++- .../PluginsAndSettings/SubCategory/index.js | 2 +- .../admin/src/pages/SettingsPage/index.js | 5 ++++- .../core/admin/admin/src/translations/en.json | 2 +- .../ee/admin/pages/Roles/CreatePage/index.js | 14 +++++++++++-- .../pages/Roles/CreatePage/index.test.js | 19 ++++++++++++++++++ 9 files changed, 59 insertions(+), 14 deletions(-) create mode 100644 packages/core/admin/ee/admin/pages/Roles/CreatePage/index.test.js diff --git a/packages/core/admin/admin/src/components/Roles/ConditionsButton/index.js b/packages/core/admin/admin/src/components/Roles/ConditionsButton/index.js index a445371892..d4707d383c 100644 --- a/packages/core/admin/admin/src/components/Roles/ConditionsButton/index.js +++ b/packages/core/admin/admin/src/components/Roles/ConditionsButton/index.js @@ -30,7 +30,10 @@ const ConditionsButton = ({ onClick, className, hasConditions, variant }) => { return ( ); diff --git a/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js b/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js index c630abf8bc..d5bf2b322b 100644 --- a/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js +++ b/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js @@ -28,6 +28,7 @@ const ActionRow = ({ {formatMessage({ id: 'Settings.permissions.conditions.can', + defaultMessage: 'Can', })}   @@ -41,6 +42,7 @@ const ActionRow = ({   {formatMessage({ id: 'Settings.permissions.conditions.when', + defaultMessage: 'When', })} diff --git a/packages/core/admin/admin/src/components/Roles/ConditionsModal/index.js b/packages/core/admin/admin/src/components/Roles/ConditionsModal/index.js index b5d383535c..1a17028c20 100644 --- a/packages/core/admin/admin/src/components/Roles/ConditionsModal/index.js +++ b/packages/core/admin/admin/src/components/Roles/ConditionsModal/index.js @@ -118,16 +118,14 @@ const ConditionsModal = ({ const shouldDisplayChevron = index < translatedHeaders.length - 1; return ( - <> - - {element} - + + {element} {shouldDisplayChevron && ( )} - + ); })} @@ -137,12 +135,19 @@ const ConditionsModal = ({

{formatMessage({ id: 'Settings.permissions.conditions.define-conditions', + defaultMessage: 'Define conditions', })}

{actionsToDisplay.length === 0 && ( - {formatMessage({ id: 'Settings.permissions.conditions.no-actions' })} + + {formatMessage({ + id: 'Settings.permissions.conditions.no-actions', + defaultMessage: + 'You first need to select actions (create, read, update, ...) before defining conditions on them.', + })} + )} {actionsToDisplay.map(({ actionId, label, pathToConditionsObject }, index) => { const name = pathToConditionsObject.join('..'); @@ -167,13 +172,14 @@ const ConditionsModal = ({ - {formatMessage({ id: 'app.components.Button.cancel' })} + {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })} } endActions={ } diff --git a/packages/core/admin/admin/src/components/Roles/Permissions/index.js b/packages/core/admin/admin/src/components/Roles/Permissions/index.js index 31ebec6c94..ea61812c13 100644 --- a/packages/core/admin/admin/src/components/Roles/Permissions/index.js +++ b/packages/core/admin/admin/src/components/Roles/Permissions/index.js @@ -111,7 +111,9 @@ const Permissions = forwardRef(({ layout, isFormDisabled, permissions }, ref) => {TAB_LABELS.map(tabLabel => ( - {formatMessage({ id: tabLabel.labelId })} + + {formatMessage({ id: tabLabel.labelId, defaultMessage: tabLabel.defaultMessage })} + ))} diff --git a/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js b/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js index 6691930cd0..21fe6c6781 100644 --- a/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js +++ b/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js @@ -91,7 +91,7 @@ const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, p indeterminate={hasSomeActionsSelected} value={hasAllActionsSelected} > - {formatMessage({ id: 'app.utils.select-all' })} + {formatMessage({ id: 'app.utils.select-all', defaultMessage: 'Select all' })} diff --git a/packages/core/admin/admin/src/pages/SettingsPage/index.js b/packages/core/admin/admin/src/pages/SettingsPage/index.js index f8de4f935d..9c90603e82 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/index.js @@ -63,7 +63,10 @@ function SettingsPage() { return ; } - const settingTitle = formatMessage({ id: 'app.components.LeftMenuLinkContainer.settings' }); + const settingTitle = formatMessage({ + id: 'app.components.LeftMenuLinkContainer.settings', + defaultMessage: 'Settings', + }); return ( diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json index ad711b8120..931921fa9d 100644 --- a/packages/core/admin/admin/src/translations/en.json +++ b/packages/core/admin/admin/src/translations/en.json @@ -127,7 +127,7 @@ "Settings.roles.create.title": "Create a role", "Settings.roles.created": "Role created", "Settings.roles.edit.title": "Edit a role", - "Settings.roles.form.button.users-with-role": "{number} users with this role", + "Settings.roles.form.button.users-with-role": "{number, plural, =0 {# users} one {# user} other {# users}} with this role", "Settings.roles.form.created": "Created", "Settings.roles.form.description": "Name and description of the role", "Settings.roles.form.input.description": "Description", diff --git a/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js b/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js index 2029aa9472..ae5104fb2a 100644 --- a/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js +++ b/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js @@ -169,6 +169,7 @@ const CreatePage = () => { {formatMessage({ id: 'Settings.roles.form.title', + defaultMessage: 'Details', })} @@ -176,6 +177,7 @@ const CreatePage = () => { {formatMessage({ id: 'Settings.roles.form.description', + defaultMessage: 'Name and description of the role', })} @@ -184,6 +186,8 @@ const CreatePage = () => { {formatMessage( { id: 'Settings.roles.form.button.users-with-role', + defaultMessage: + '{number, plural, =0 {# users} one {# user} other {# users}} with this role', }, { number: 0 } )} @@ -194,7 +198,10 @@ const CreatePage = () => { { - - - - - {!isLayoutLoading && !isRoleLoading ? ( - - + onChange={handleChange} + value={values.name} + /> + + + + + + - ) : ( - // ! TODO : Switch to the DS component when done - - - - )} + {!isLayoutLoading && !isRoleLoading ? ( + + + + ) : ( + + + + )} + - + )} From 863540ee7927c97fc3056c874fcdbc4296d628ee Mon Sep 17 00:00:00 2001 From: bulby97 Date: Wed, 25 Aug 2021 16:25:17 +0200 Subject: [PATCH 14/20] SubAction row migrated to DS --- .../CollapsePropertyMatrix/ActionRow/index.js | 44 ++--- .../CarretIcon/index.js | 14 ++ .../CollapsePropertyMatrix/Header/index.js | 2 + .../SubActionRow/index.js | 160 ++++++++++++------ .../SubActionRow/row.js | 37 ---- .../SubActionRow/timeline.js | 15 -- .../ContentTypeCollapse/utils/activeStyle.js | 12 +- .../components/Roles/ContentTypes/index.js | 2 +- .../admin/src/components/Roles/Curve/index.js | 60 ++++--- .../components/Roles/GlobalActions/index.js | 1 + .../Roles/Permissions/utils/constants.js | 1 + .../components/Roles/RequiredSign/index.js | 4 +- .../Roles/RowLabelWithCheckbox/index.js | 2 +- 13 files changed, 193 insertions(+), 161 deletions(-) create mode 100644 packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/CarretIcon/index.js delete mode 100644 packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/row.js delete mode 100644 packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/timeline.js diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js index 9fd8657038..bc9ef197ff 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js @@ -1,5 +1,4 @@ -import { Down, Up } from '@strapi/icons'; -import { Box, Checkbox, Row } from '@strapi/parts'; +import { Checkbox, Row } from '@strapi/parts'; import IS_DISABLED from 'ee_else_ce/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/utils/constants'; import { get } from 'lodash'; import PropTypes from 'prop-types'; @@ -12,41 +11,25 @@ import RequiredSign from '../../../RequiredSign'; import RowLabelWithCheckbox from '../../../RowLabelWithCheckbox'; import { getCheckboxState } from '../../../utils'; import { activeStyle } from '../../utils'; +import CarretIcon from '../CarretIcon'; import SubActionRow from '../SubActionRow'; import getRowLabelCheckboxeState from './utils/getRowLabelCheckboxeState'; -const Cell = styled(Box)` +const Cell = styled(Row)` width: ${cellWidth}; - display: flex; - align-items: center; - justify-content: center; position: relative; `; -// ! Something needs to be done in the DS parts to avoid doing this -const Chevron = styled(Box)` - display: none; - svg { - width: ${11 / 16}rem; - } - * { - fill: ${({ theme }) => theme.colors.primary600}; - } -`; - const Wrapper = styled(Row)` - height: 52px; + height: ${52 / 16}rem; flex: 1; - background: ${({ theme, isOdd }) => theme.colors[isOdd ? 'neutral100' : 'neutral0']}; - ${Chevron} { - width: ${13 / 16}rem; - } + ${({ isCollapsable, theme }) => isCollapsable && ` - ${Chevron} { + ${CarretIcon} { display: block; - color: ${theme.main.colors.grey}; + color: ${theme.colors.neutral100}; } &:hover { ${activeStyle(theme)} @@ -108,7 +91,12 @@ const ActionRow = ({ return ( <> - + {required && } - {isActive ? : } + {propertyActions.map(({ label, isActionRelatedToCurrentProperty, actionId }) => { @@ -141,7 +129,7 @@ const ActionRow = ({ const checkboxValue = get(modifiedData, checkboxName, false); return ( - + + ($isActive ? '180' : '0')}deg); + margin-left: ${({ theme }) => theme.spaces[2]}; + * { + fill: ${({ theme }) => theme.colors.primary600}; + } +`; + +export default CarretIcon; diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js index 87130c762c..ef11f70151 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js @@ -7,10 +7,12 @@ import { cellWidth, firstRowWidth } from '../../../Permissions/utils/constants'; const HeaderLabel = styled(Row)` width: ${cellWidth}; + flex-shrink: 0; `; const PropertyLabelWrapper = styled(Row)` width: ${firstRowWidth}; height: ${52 / 16}rem; + flex-shrink: 0; `; const Header = ({ headers, label }) => { diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js index f5c1f4cc02..643d23c3b2 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js @@ -1,23 +1,69 @@ import React, { memo, useMemo, useState } from 'react'; import PropTypes from 'prop-types'; -import { get } from 'lodash'; -import { Flex, Text } from '@buffetjs/core'; -import { Box } from '@strapi/parts'; +import { get, upperFirst } from 'lodash'; import styled from 'styled-components'; +import { Box, Row, Text, Checkbox } from '@strapi/parts'; import IS_DISABLED from 'ee_else_ce/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/utils/constants'; import { usePermissionsDataManager } from '../../../../../hooks'; import { getCheckboxState } from '../../../utils'; -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 { RowStyle, RowWrapper } from './row'; -import { LeftBorderTimeline, TopTimeline } from './timeline'; +import { cellWidth, rowHeight } from '../../../Permissions/utils/constants'; +import CarretIcon from '../CarretIcon'; +import { activeStyle } from '../../utils'; -const SubLevelWrapper = styled.div` - padding-bottom: 8px; +const Cell = styled(Row)` + width: ${cellWidth}; + position: relative; +`; + +const RowWrapper = styled(Row)` + height: ${rowHeight}; +`; + +const Wrapper = styled(Box)` + padding-left: ${31 / 16}rem; +`; + +const LeftBorderTimeline = styled(Box)` + border-left: ${({ isVisible, theme }) => + isVisible ? `4px solid ${theme.colors.primary200}` : '4px solid transparent'}; +`; + +const RowStyle = styled(Row)` + padding-left: ${({ theme }) => theme.spaces[4]}; + width: ${({ level }) => 145 - level * 36}px; + + ${({ isCollapsable, theme }) => + isCollapsable && + ` + ${CarretIcon} { + display: block; + color: ${theme.colors.neutral100}; + } + &:hover { + ${activeStyle(theme)} + } + `} + ${({ isActive, theme }) => isActive && activeStyle(theme)}; +`; + +const TopTimeline = styled.div` + padding-top: 8px; + margin-top: 8px; + width: 4px; + background-color: ${({ theme }) => theme.colors.primary200}; + border-top-left-radius: 2px; + border-top-right-radius: 2px; +`; + +// ! REMOVE THIS WHEN DS IS UPDATED WITH ELLIPSIS PROP +const StyledText = styled(Text)` + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; `; const SubActionRow = ({ @@ -55,45 +101,38 @@ const SubActionRow = ({ }, [rowToOpen, childrenForm]); return ( - + {childrenForm.map(({ label, value, required, children: subChildrenForm }, index) => { const isVisible = index + 1 < childrenForm.length; const isArrayType = Array.isArray(subChildrenForm); - const isSmall = isArrayType || index + 1 === childrenForm.length; const isActive = rowToOpen === value; return ( - - - + + + { - if (isArrayType) { - handleClickToggleSubLevel(value); - } - }} + {...(isArrayType && { + onClick: () => handleClickToggleSubLevel(value), + 'aria-expanded': isActive, + onKeyDown: ({ key }) => + (key === 'Enter' || key === ' ') && handleClickToggleSubLevel(value), + tabIndex: 0, + role: 'button', + })} title={label} > - - {label} - + {upperFirst(label)} {required && } - + - + {propertyActions.map(({ actionId, label, isActionRelatedToCurrentProperty }) => { if (!isActionRelatedToCurrentProperty) { return ; @@ -115,13 +154,22 @@ const SubActionRow = ({ if (!subChildrenForm) { return ( - + + + onChangeSimpleCheckbox({ + target: { + name: checkboxName.join('..'), + value, + }, + })} + value={checkboxValue} + /> + ); } @@ -130,21 +178,31 @@ const SubActionRow = ({ ); return ( - + + + onChangeParentCheckbox({ + target: { + name: checkboxName.join('..'), + value, + }, + })} + value={hasAllActionsSelected} + indeterminate={hasSomeActionsSelected} + /> + ); })} - - + + {displayedRecursiveChildren && isActive && ( - + - + )} ); })} - + ); }; diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/row.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/row.js deleted file mode 100644 index 653924178c..0000000000 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/row.js +++ /dev/null @@ -1,37 +0,0 @@ -import styled from 'styled-components'; -import { Flex } from '@buffetjs/core'; -import PropTypes from 'prop-types'; -import Chevron from '../../../Chevron'; -import { activeStyle } from '../../utils'; - -const RowStyle = styled.div` - padding-left: ${({ theme }) => theme.main.sizes.paddings.xs}; - width: ${({ level }) => 128 - level * 18}px; - ${Chevron} { - width: 13px; - } - ${({ isCollapsable, theme }) => - isCollapsable && - ` - ${Chevron} { - display: block; - color: ${theme.main.colors.grey}; - } - &:hover { - ${activeStyle(theme)} - } - `} - ${({ isActive, theme }) => isActive && activeStyle(theme)} -`; - -RowStyle.propTypes = { - isActive: PropTypes.bool.isRequired, - isCollapsable: PropTypes.bool.isRequired, - level: PropTypes.number.isRequired, -}; - -const RowWrapper = styled(Flex)` - height: ${({ isSmall }) => (isSmall ? '28px' : '36px')}; -`; - -export { RowStyle, RowWrapper }; diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/timeline.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/timeline.js deleted file mode 100644 index 42aa5a1f39..0000000000 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/timeline.js +++ /dev/null @@ -1,15 +0,0 @@ -import styled from 'styled-components'; - -const LeftBorderTimeline = styled.div` - border-left: ${({ isVisible }) => (isVisible ? '3px solid #a5d5ff' : '3px solid transparent')}; -`; - -const TopTimeline = styled.div` - padding-top: 8px; - width: 3px; - background-color: #a5d5ff; - border-top-left-radius: 2px; - border-top-right-radius: 2px; -`; - -export { LeftBorderTimeline, TopTimeline }; diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/utils/activeStyle.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/utils/activeStyle.js index bc70743bc1..9e048a8e83 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/utils/activeStyle.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/utils/activeStyle.js @@ -1,14 +1,14 @@ -import { Text } from '@buffetjs/core'; -import Chevron from '../../Chevron'; +import { Text } from '@strapi/parts'; +import CarretIcon from '../CollapsePropertyMatrix/CarretIcon'; const activeStyle = theme => ` - color: ${theme.main.colors.mediumBlue}; ${Text} { - color: ${theme.main.colors.mediumBlue}; + color: ${theme.colors.primary600}; + font-weight: bold; } - ${Chevron} { + ${CarretIcon} { display: block; - color: ${theme.main.colors.mediumBlue}; + color: ${theme.colors.primary600}; } `; diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypes/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypes/index.js index 1c68fc1647..f0ecfb9a25 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypes/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypes/index.js @@ -6,7 +6,7 @@ import GlobalActions from '../GlobalActions'; const ContentTypes = ({ isFormDisabled, kind, layout: { actions, subjects } }) => { return ( - + theme.colors.primary200}; + display: block; + } +`; + +const Svg = styled.svg` + position: relative; + flex-shrink: 0; + transform: translate(-0.5px, -1px); + + * { + fill: ${({ theme, color }) => theme.colors[color]}; + } +`; const Curve = props => ( - - + + - - + + ); Curve.defaultProps = { - fill: '#f3f4f4', + fill: 'primary200', }; Curve.propTypes = { fill: PropTypes.string, diff --git a/packages/core/admin/admin/src/components/Roles/GlobalActions/index.js b/packages/core/admin/admin/src/components/Roles/GlobalActions/index.js index de66ce51b9..4fffa09dce 100644 --- a/packages/core/admin/admin/src/components/Roles/GlobalActions/index.js +++ b/packages/core/admin/admin/src/components/Roles/GlobalActions/index.js @@ -13,6 +13,7 @@ const CenteredStack = styled(Stack)` align-items: center; justify-content: center; width: ${cellWidth}; + flex-shrink: 0; `; const GlobalActions = ({ actions, isFormDisabled, kind }) => { diff --git a/packages/core/admin/admin/src/components/Roles/Permissions/utils/constants.js b/packages/core/admin/admin/src/components/Roles/Permissions/utils/constants.js index 0a2b1c3d1d..a2b2630ecc 100644 --- a/packages/core/admin/admin/src/components/Roles/Permissions/utils/constants.js +++ b/packages/core/admin/admin/src/components/Roles/Permissions/utils/constants.js @@ -1,2 +1,3 @@ export const cellWidth = `${120 / 16}rem`; export const firstRowWidth = `${200 / 16}rem`; +export const rowHeight = `${53 / 16}rem`; diff --git a/packages/core/admin/admin/src/components/Roles/RequiredSign/index.js b/packages/core/admin/admin/src/components/Roles/RequiredSign/index.js index a9408604ba..4d3bfa3ed5 100644 --- a/packages/core/admin/admin/src/components/Roles/RequiredSign/index.js +++ b/packages/core/admin/admin/src/components/Roles/RequiredSign/index.js @@ -2,8 +2,8 @@ import React from 'react'; import styled from 'styled-components'; const Required = styled.span` - color: ${({ theme }) => theme.main.colors.red}; - padding-left: 2px; + color: ${({ theme }) => theme.colors.danger700}; + padding-left: ${({ theme }) => theme.spaces[1]}px; `; const RequiredSign = () => *; diff --git a/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js b/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js index c4b1048ef4..8968be831b 100644 --- a/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js +++ b/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js @@ -26,7 +26,7 @@ const RowLabelWithCheckbox = ({ value, }) => { return ( - + Date: Wed, 25 Aug 2021 22:01:47 +0200 Subject: [PATCH 15/20] Add rowHeight constant --- .../components/Roles/ConditionsModal/ActionRow/index.js | 3 ++- .../Roles/ContentTypeCollapse/Collapse/index.js | 4 ++-- .../CollapsePropertyMatrix/ActionRow/index.js | 4 ++-- .../CollapsePropertyMatrix/Header/index.js | 4 ++-- .../core/admin/ee/admin/pages/Roles/CreatePage/index.js | 9 ++++++++- 5 files changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js b/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js index 11c58632c3..1e3abf69e3 100644 --- a/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js +++ b/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js @@ -5,9 +5,10 @@ import { useIntl } from 'react-intl'; import styled from 'styled-components'; import ConditionsSelect from '../ConditionsSelect'; +import { rowHeight } from '../../Permissions/utils/constants'; const RowWrapper = styled(Row)` - height: ${52 / 16}rem; + height: ${rowHeight}; `; const ActionRow = ({ diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js index 6d08be97ca..5ce04db8aa 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js @@ -9,7 +9,7 @@ import { usePermissionsDataManager } from '../../../../hooks'; import ConditionsButton from '../../ConditionsButton'; import ConditionsModal from '../../ConditionsModal'; import HiddenAction from '../../HiddenAction'; -import { cellWidth } from '../../Permissions/utils/constants'; +import { cellWidth, rowHeight } from '../../Permissions/utils/constants'; import RowLabelWithCheckbox from '../../RowLabelWithCheckbox'; import { getCheckboxState } from '../../utils'; import generateCheckboxesActions from './utils/generateCheckboxesActions'; @@ -34,7 +34,7 @@ const activeRowStyle = (theme, isActive, isClicked) => ` const Wrapper = styled.div` display: flex; align-items: center; - height: ${52 / 16}rem; + height: ${rowHeight}; background-color: ${({ isGrey, theme }) => isGrey ? theme.colors.neutral100 : theme.colors.neutral0}; border: 1px solid transparent; diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js index bc9ef197ff..c741b597b5 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js @@ -6,7 +6,7 @@ import React, { memo, useCallback, useMemo, useState } from 'react'; import styled from 'styled-components'; import { usePermissionsDataManager } from '../../../../../hooks'; import HiddenAction from '../../../HiddenAction'; -import { cellWidth } from '../../../Permissions/utils/constants'; +import { cellWidth, rowHeight } from '../../../Permissions/utils/constants'; import RequiredSign from '../../../RequiredSign'; import RowLabelWithCheckbox from '../../../RowLabelWithCheckbox'; import { getCheckboxState } from '../../../utils'; @@ -21,7 +21,7 @@ const Cell = styled(Row)` `; const Wrapper = styled(Row)` - height: ${52 / 16}rem; + height: ${rowHeight}; flex: 1; ${({ isCollapsable, theme }) => diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js index ef11f70151..aa66456bc0 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; import { Row, TableLabel } from '@strapi/parts'; import styled from 'styled-components'; -import { cellWidth, firstRowWidth } from '../../../Permissions/utils/constants'; +import { cellWidth, firstRowWidth, rowHeight } from '../../../Permissions/utils/constants'; const HeaderLabel = styled(Row)` width: ${cellWidth}; @@ -11,7 +11,7 @@ const HeaderLabel = styled(Row)` `; const PropertyLabelWrapper = styled(Row)` width: ${firstRowWidth}; - height: ${52 / 16}rem; + height: ${rowHeight}; flex-shrink: 0; `; diff --git a/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js b/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js index c1a1fff5af..3fa5c3f800 100644 --- a/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js +++ b/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js @@ -235,7 +235,14 @@ const CreatePage = () => { /> ) : ( - + )} From 4d89016e9c1a12994c9f038bfdc34459c481dfdd Mon Sep 17 00:00:00 2001 From: bulby97 Date: Thu, 26 Aug 2021 10:28:52 +0200 Subject: [PATCH 16/20] Fix divider stack issue, add meaningfull aria-labels to checkboxes w/o labels --- .../Roles/ConditionsModal/ActionRow/index.js | 30 ++-- .../components/Roles/ConditionsModal/index.js | 5 +- .../ContentTypeCollapse/Collapse/index.js | 15 +- .../CollapsePropertyMatrix/ActionRow/index.js | 17 ++- .../SubActionRow/index.js | 128 ++++++++++-------- .../Roles/ContentTypeCollapse/index.js | 4 +- .../components/Roles/GlobalActions/index.js | 13 +- .../PluginsAndSettings/SubCategory/index.js | 1 - .../Roles/RowLabelWithCheckbox/index.js | 11 +- .../core/admin/admin/src/translations/en.json | 2 + 10 files changed, 144 insertions(+), 82 deletions(-) diff --git a/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js b/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js index 1e3abf69e3..83ddcd2f44 100644 --- a/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js +++ b/packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js @@ -4,7 +4,7 @@ import { Row, TableLabel } from '@strapi/parts'; import { useIntl } from 'react-intl'; import styled from 'styled-components'; -import ConditionsSelect from '../ConditionsSelect'; +// import ConditionsSelect from '../ConditionsSelect'; import { rowHeight } from '../../Permissions/utils/constants'; const RowWrapper = styled(Row)` @@ -12,14 +12,14 @@ const RowWrapper = styled(Row)` `; const ActionRow = ({ - arrayOfOptionsGroupedByCategory, - isFormDisabled, + // arrayOfOptionsGroupedByCategory, + // isFormDisabled, isGrey, label, - name, - onCategoryChange, - onChange, - value, + // name, + // onCategoryChange, + // onChange, + // value, }) => { const { formatMessage } = useIntl(); @@ -56,26 +56,26 @@ const ActionRow = ({ })} - + /> */} ); }; ActionRow.propTypes = { - arrayOfOptionsGroupedByCategory: PropTypes.array.isRequired, - isFormDisabled: PropTypes.bool.isRequired, + // arrayOfOptionsGroupedByCategory: PropTypes.array.isRequired, + // isFormDisabled: PropTypes.bool.isRequired, isGrey: PropTypes.bool.isRequired, label: PropTypes.string.isRequired, - name: PropTypes.string.isRequired, - value: PropTypes.object.isRequired, - onCategoryChange: PropTypes.func.isRequired, - onChange: PropTypes.func.isRequired, + // name: PropTypes.string.isRequired, + // value: PropTypes.object.isRequired, + // onCategoryChange: PropTypes.func.isRequired, + // onChange: PropTypes.func.isRequired, }; export default ActionRow; diff --git a/packages/core/admin/admin/src/components/Roles/ConditionsModal/index.js b/packages/core/admin/admin/src/components/Roles/ConditionsModal/index.js index edb3100e6a..4fab4072fb 100644 --- a/packages/core/admin/admin/src/components/Roles/ConditionsModal/index.js +++ b/packages/core/admin/admin/src/components/Roles/ConditionsModal/index.js @@ -115,8 +115,9 @@ const ConditionsModal = ({ defaultMessage: 'Define conditions', })} - {/* ! Need to force margin here - Remove this when Divider is updated in parts */} - + + + {actionsToDisplay.length === 0 && ( diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js index 5ce04db8aa..fcaa289d49 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js @@ -1,9 +1,10 @@ -import { Box, Checkbox, Text, Row } from '@strapi/parts'; -import { Up, Down } from '@strapi/icons'; +import { Down, Up } from '@strapi/icons'; +import { Box, Checkbox, Row, Text } from '@strapi/parts'; import IS_DISABLED from 'ee_else_ce/components/Roles/ContentTypeCollapse/Collapse/utils/constants'; import { get, omit } from 'lodash'; import PropTypes from 'prop-types'; import React, { useMemo, useState } from 'react'; +import { useIntl } from 'react-intl'; import styled from 'styled-components'; import { usePermissionsDataManager } from '../../../../hooks'; import ConditionsButton from '../../ConditionsButton'; @@ -86,6 +87,7 @@ const Collapse = ({ pathToData, }) => { const [isModalOpen, setModalOpen] = useState(false); + const { formatMessage } = useIntl(); const { modifiedData, onChangeParentCheckbox, @@ -152,6 +154,7 @@ const Collapse = ({ isDisplayed, isParentCheckbox, checkboxName, + label: permissionLabel, }) => { if (!isDisplayed) { return ; @@ -164,7 +167,13 @@ const Collapse = ({ onChangeParentCheckbox({ diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js index c741b597b5..5fad0f0a06 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js @@ -2,6 +2,7 @@ import { Checkbox, Row } from '@strapi/parts'; import IS_DISABLED from 'ee_else_ce/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/utils/constants'; import { get } from 'lodash'; import PropTypes from 'prop-types'; +import { useIntl } from 'react-intl'; import React, { memo, useCallback, useMemo, useState } from 'react'; import styled from 'styled-components'; import { usePermissionsDataManager } from '../../../../../hooks'; @@ -49,6 +50,7 @@ const ActionRow = ({ propertyName, isOdd, }) => { + const { formatMessage } = useIntl(); const [rowToOpen, setRowToOpen] = useState(null); const { modifiedData, @@ -133,7 +135,13 @@ const ActionRow = ({ onChangeSimpleCheckbox({ @@ -165,6 +173,13 @@ const ActionRow = ({ value, }, })} + aria-label={formatMessage( + { + id: `Settings.permissions.select-by-permission`, + defaultMessage: 'Select {label} permission', + }, + { label: `${name} ${label}` } + )} value={hasAllActionsSelected} indeterminate={hasSomeActionsSelected} /> diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js index 643d23c3b2..0923f9bb36 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js @@ -1,18 +1,19 @@ -import React, { memo, useMemo, useState } from 'react'; -import PropTypes from 'prop-types'; -import { get, upperFirst } from 'lodash'; -import styled from 'styled-components'; -import { Box, Row, Text, Checkbox } from '@strapi/parts'; +import { Box, Checkbox, Row, Text } from '@strapi/parts'; import IS_DISABLED from 'ee_else_ce/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/utils/constants'; +import { get, upperFirst } from 'lodash'; +import PropTypes from 'prop-types'; +import React, { memo, useMemo, useState } from 'react'; +import { useIntl } from 'react-intl'; +import styled from 'styled-components'; import { usePermissionsDataManager } from '../../../../../hooks'; -import { getCheckboxState } from '../../../utils'; import CollapseLabel from '../../../CollapseLabel'; import Curve from '../../../Curve'; import HiddenAction from '../../../HiddenAction'; -import RequiredSign from '../../../RequiredSign'; import { cellWidth, rowHeight } from '../../../Permissions/utils/constants'; -import CarretIcon from '../CarretIcon'; +import RequiredSign from '../../../RequiredSign'; +import { getCheckboxState } from '../../../utils'; import { activeStyle } from '../../utils'; +import CarretIcon from '../CarretIcon'; const Cell = styled(Row)` width: ${cellWidth}; @@ -75,6 +76,7 @@ const SubActionRow = ({ parentName, propertyName, }) => { + const { formatMessage } = useIntl(); const { modifiedData, onChangeParentCheckbox, @@ -133,71 +135,85 @@ const SubActionRow = ({ - {propertyActions.map(({ actionId, label, isActionRelatedToCurrentProperty }) => { - if (!isActionRelatedToCurrentProperty) { - return ; - } - /* - * Usually we use a 'dot' in order to know the key path of an object for which we want to change the value. - * Since an action and a subject are both separated by '.' or '::' we chose to use the '..' separators - */ - const checkboxName = [ - ...pathToDataFromActionRow.split('..'), - actionId, - 'properties', - propertyName, - ...parentName.split('..'), - value, - ]; + {propertyActions.map( + ({ actionId, label: propertyLabel, isActionRelatedToCurrentProperty }) => { + if (!isActionRelatedToCurrentProperty) { + return ; + } + /* + * Usually we use a 'dot' in order to know the key path of an object for which we want to change the value. + * Since an action and a subject are both separated by '.' or '::' we chose to use the '..' separators + */ + const checkboxName = [ + ...pathToDataFromActionRow.split('..'), + actionId, + 'properties', + propertyName, + ...parentName.split('..'), + value, + ]; - const checkboxValue = get(modifiedData, checkboxName, false); + const checkboxValue = get(modifiedData, checkboxName, false); + + if (!subChildrenForm) { + return ( + + + onChangeSimpleCheckbox({ + target: { + name: checkboxName.join('..'), + value, + }, + })} + value={checkboxValue} + /> + + ); + } + + const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState( + checkboxValue + ); - if (!subChildrenForm) { return ( - + - onChangeSimpleCheckbox({ + onChangeParentCheckbox({ target: { name: checkboxName.join('..'), value, }, })} - value={checkboxValue} + value={hasAllActionsSelected} + indeterminate={hasSomeActionsSelected} /> ); } - - const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState( - checkboxValue - ); - - return ( - - - onChangeParentCheckbox({ - target: { - name: checkboxName.join('..'), - value, - }, - })} - value={hasAllActionsSelected} - indeterminate={hasSomeActionsSelected} - /> - - ); - })} + )} diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/index.js index 91eec906d7..32e52174f2 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/index.js @@ -35,13 +35,13 @@ const ContentTypeCollapse = ({ pathToData={pathToData} /> {isActive && - properties.map(({ label, value, children: childrenForm }, i) => { + properties.map(({ label: propertyLabel, value, children: childrenForm }, i) => { return ( { onChangeCollectionTypeGlobalActionCheckbox(kind, actionId, value); }} name={actionId} - aria-label={actionId} + aria-label={formatMessage( + { + id: `Settings.permissions.select-all-by-permission`, + defaultMessage: 'Select all {label} permissions', + }, + { + label: formatMessage({ + id: `Settings.roles.form.permissions.${label.toLowerCase()}`, + defaultMessage: label, + }), + } + )} value={get(checkboxesState, [actionId, 'hasAllActionsSelected'], false)} indeterminate={get(checkboxesState, [actionId, 'hasSomeActionsSelected'], false)} /> diff --git a/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js b/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js index a235a12bb0..7ec6a9e40a 100644 --- a/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js +++ b/packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js @@ -78,7 +78,6 @@ const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, p diff --git a/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js b/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js index 8968be831b..fe5054de62 100644 --- a/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js +++ b/packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js @@ -3,6 +3,7 @@ import upperFirst from 'lodash/upperFirst'; import PropTypes from 'prop-types'; import React, { memo } from 'react'; import styled from 'styled-components'; +import { useIntl } from 'react-intl'; import CollapseLabel from '../CollapseLabel'; import { firstRowWidth } from '../Permissions/utils/constants'; @@ -25,11 +26,19 @@ const RowLabelWithCheckbox = ({ someChecked, value, }) => { + const { formatMessage } = useIntl(); + return ( diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json index 931921fa9d..39d3f7d3fc 100644 --- a/packages/core/admin/admin/src/translations/en.json +++ b/packages/core/admin/admin/src/translations/en.json @@ -118,6 +118,8 @@ "Settings.permissions.users.listview.header.description.plural": "{number} users found", "Settings.permissions.users.listview.header.description.singular": "{number} user found", "Settings.permissions.users.listview.header.title": "Users", + "Settings.permissions.select-all-by-permission": "Select all {label} permissions", + "Settings.permissions.select-by-permission": "Select {label} permission", "Settings.profile.form.section.experience.interfaceLanguage": "Interface language", "Settings.profile.form.section.experience.interfaceLanguage.hint": "This will only display your own interface in the chosen language.", "Settings.profile.form.section.experience.title": "Experience", From 48ab4ec6d1a45001e0223f5ddc2dac0b1dc88c0b Mon Sep 17 00:00:00 2001 From: bulby97 Date: Thu, 26 Aug 2021 10:56:19 +0200 Subject: [PATCH 17/20] fix tests and review issues --- .../src/components/SettingsPageTitle/index.js | 5 +- .../components/Login/tests/BaseLogin.test.js | 1 + .../components/Register/tests/index.test.js | 1 + .../ee/admin/pages/Roles/CreatePage/index.js | 19 +- .../pages/Roles/CreatePage/index.test.js | 19 - .../tests/__snapshots__/index.test.js.snap | 788 ++++++++++++++++++ .../Roles/CreatePage/tests/index.test.js | 49 ++ .../pages/Roles/CreatePage/utils/schema.js | 1 + 8 files changed, 849 insertions(+), 34 deletions(-) delete mode 100644 packages/core/admin/ee/admin/pages/Roles/CreatePage/index.test.js create mode 100644 packages/core/admin/ee/admin/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap create mode 100644 packages/core/admin/ee/admin/pages/Roles/CreatePage/tests/index.test.js diff --git a/packages/core/admin/admin/src/components/SettingsPageTitle/index.js b/packages/core/admin/admin/src/components/SettingsPageTitle/index.js index d66c432a29..2a22816ba4 100644 --- a/packages/core/admin/admin/src/components/SettingsPageTitle/index.js +++ b/packages/core/admin/admin/src/components/SettingsPageTitle/index.js @@ -5,7 +5,10 @@ import PageTitle from '../PageTitle'; const SettingsPageTitle = ({ name }) => { const { formatMessage } = useIntl(); - const text = formatMessage({ id: 'Settings.PageTitle' }, { name }); + const text = formatMessage( + { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' }, + { name } + ); return ; }; diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js b/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js index c33f2245f9..d8f91e4e72 100644 --- a/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js +++ b/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js @@ -674,6 +674,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => { class="c22 c23" > { class="c4 c33" > { defaultMessage: 'Description', })} name="description" - error={errors.name && formatMessage({ id: errors.name })} + error={errors.description && formatMessage({ id: errors.description })} onChange={handleChange} > {values.description} @@ -235,16 +235,7 @@ const CreatePage = () => { /> ) : ( - - - + )} diff --git a/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.test.js b/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.test.js deleted file mode 100644 index a3b8b61324..0000000000 --- a/packages/core/admin/ee/admin/pages/Roles/CreatePage/index.test.js +++ /dev/null @@ -1,19 +0,0 @@ -/** - * - * Tests for CreatePage - * - */ - -import React from 'react'; -import { render } from '@testing-library/react'; -import { CreatePage } from './index'; - -describe('', () => { - it('renders and matches the snapshot', () => { - const { - container: { firstChild }, - } = render(); - - expect(firstChild).toMatchInlineSnapshot(); - }); -}); diff --git a/packages/core/admin/ee/admin/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/ee/admin/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000..fa1f58da03 --- /dev/null +++ b/packages/core/admin/ee/admin/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap @@ -0,0 +1,788 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders and matches the snapshot 1`] = ` +.c32 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.c5 { + font-weight: 600; + font-size: 2rem; + line-height: 1.25; + color: #32324d; +} + +.c10 { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.33; + color: #32324d; +} + +.c12 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #666687; +} + +.c18 { + font-weight: 500; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; +} + +.c19 { + font-weight: 400; + font-size: 0.75rem; + line-height: 1.33; + color: #666687; +} + +.c13 { + font-size: 1rem; + line-height: 1.5; +} + +.c2 { + background: #f6f6f9; + padding-top: 56px; + padding-right: 56px; + padding-bottom: 56px; + padding-left: 56px; +} + +.c14 { + padding-right: 56px; + padding-left: 56px; +} + +.c16 { + background: #ffffff; + padding: 24px; + border-radius: 4px; + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); +} + +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; +} + +.c7 svg { + height: 12px; + width: 12px; +} + +.c7 svg > g, +.c7 svg path { + fill: #ffffff; +} + +.c7[aria-disabled='true'] { + pointer-events: none; +} + +.c8 { + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid #d9d8ff; + background: #f0f0ff; +} + +.c8 .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c8 .c9 { + color: #ffffff; +} + +.c8[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c8[aria-disabled='true'] .c9 { + color: #666687; +} + +.c8[aria-disabled='true'] svg > g, +.c8[aria-disabled='true'] svg path { + fill: #666687; +} + +.c8[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c8[aria-disabled='true']:active .c9 { + color: #666687; +} + +.c8[aria-disabled='true']:active svg > g, +.c8[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c8:hover { + background-color: #ffffff; +} + +.c8:active { + background-color: #ffffff; + border: 1px solid #4945ff; +} + +.c8:active .c9 { + color: #4945ff; +} + +.c8:active svg > g, +.c8:active svg path { + fill: #4945ff; +} + +.c8 .c9 { + color: #271fe0; +} + +.c8 svg > g, +.c8 svg path { + fill: #271fe0; +} + +.c11 { + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid #4945ff; + background: #4945ff; +} + +.c11 .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c11 .c9 { + color: #ffffff; +} + +.c11[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c11[aria-disabled='true'] .c9 { + color: #666687; +} + +.c11[aria-disabled='true'] svg > g, +.c11[aria-disabled='true'] svg path { + fill: #666687; +} + +.c11[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c11[aria-disabled='true']:active .c9 { + color: #666687; +} + +.c11[aria-disabled='true']:active svg > g, +.c11[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c11:hover { + border: 1px solid #7b79ff; + background: #7b79ff; +} + +.c11:active { + border: 1px solid #4945ff; + background: #4945ff; +} + +.c15 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c15 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c15 > * + * { + margin-top: 24px; +} + +.c17 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c17 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c17 > * + * { + margin-top: 16px; +} + +.c24 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c24 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c24 > * + * { + margin-top: 4px; +} + +.c6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c6 > * { + margin-left: 0; + margin-right: 0; +} + +.c6 > * + * { + margin-left: 8px; +} + +.c26 { + border: none; + padding-left: 16px; + padding-right: 16px; + color: #32324d; + font-weight: 400; + font-size: 0.875rem; + display: block; + width: 100%; + height: 2.5rem; +} + +.c26::-webkit-input-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c26::-moz-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c26:-ms-input-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c26::placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c26:disabled { + background: inherit; + color: inherit; +} + +.c26:focus { + outline: none; +} + +.c25 { + border: 1px solid #dcdce4; + border-radius: 4px; + background: #ffffff; + overflow: hidden; +} + +.c25:focus-within { + border: 1px solid #4945ff; +} + +.c23 textarea { + height: 5rem; +} + +.c21 { + display: grid; + grid-template-columns: repeat(12,1fr); + gap: 16px; +} + +.c22 { + grid-column: span 6; + word-break: break-all; +} + +.c0 { + outline: none; +} + +.c28 { + display: block; + width: 100%; + border: 1px solid #dcdce4; + border-radius: 4px; + padding-left: 16px; + padding-right: 16px; + padding-top: 12px; + padding-bottom: 12px; + font-weight: 400; + font-size: 0.875rem; + color: #32324d; + background: #ffffff; + outline: none; +} + +.c28:focus { + border: 1px solid #4945ff; +} + +.c28::-webkit-input-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c28::-moz-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c28:-ms-input-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c28::placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c27 textarea { + height: 5rem; + line-height: 1.25rem; + font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans', 'Helvetica Neue',sans-serif; +} + +.c27 textarea::-webkit-input-placeholder { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #8e8ea9; + opacity: 1; +} + +.c27 textarea::-moz-placeholder { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #8e8ea9; + opacity: 1; +} + +.c27 textarea:-ms-input-placeholder { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #8e8ea9; + opacity: 1; +} + +.c27 textarea::placeholder { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #8e8ea9; + opacity: 1; +} + +.c30 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.c31 { + -webkit-animation: gzYjWD 1s infinite linear; + animation: gzYjWD 1s infinite linear; +} + +.c29 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c20 { + border: 1px solid #d9d8ff; + background: #f0f0ff; + padding: 8px 16px; + color: #4945ff; + border-radius: 4px; + font-size: 0.75rem; + font-width: bold; +} + +@media (max-width:68.75rem) { + .c22 { + grid-column: span; + } +} + +@media (max-width:34.375rem) { + .c22 { + grid-column: span; + } +} + +
+
+
+
+
+
+
+

+ Create a role +

+
+
+ + +
+
+

+ Define the rights given to the role +

+
+
+
+
+
+
+
+
+
+ + Details + +
+
+ + Name and description of the role + +
+
+
+ 0 users with this role +
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+ Loading content. +
+ +
+
+
+
+
+
+
+

+

+

+
+`; diff --git a/packages/core/admin/ee/admin/pages/Roles/CreatePage/tests/index.test.js b/packages/core/admin/ee/admin/pages/Roles/CreatePage/tests/index.test.js new file mode 100644 index 0000000000..97a1e911fc --- /dev/null +++ b/packages/core/admin/ee/admin/pages/Roles/CreatePage/tests/index.test.js @@ -0,0 +1,49 @@ +/** + * + * Tests for CreatePage + * + */ + +import React from 'react'; +import { render } from '@testing-library/react'; +import { IntlProvider } from 'react-intl'; +import { Router, Switch, Route } from 'react-router'; +import { createMemoryHistory } from 'history'; +import Theme from '../../../../../../admin/src/components/Theme'; +import { CreatePage } from '../index'; + +jest.mock('@strapi/helper-plugin', () => ({ + ...jest.requireActual('@strapi/helper-plugin'), + useNotification: jest.fn(() => jest.fn()), + useOverlayBlocker: jest.fn(() => ({ lockApp: jest.fn(), unlockApp: jest.fn() })), + useTracking: jest.fn(() => ({ trackUsage: jest.fn() })), +})); + +const makeApp = history => ( + + + + + + + + + + + + + + +); + +describe('', () => { + it('renders and matches the snapshot', () => { + const history = createMemoryHistory(); + const App = makeApp(history); + const { container } = render(App); + + history.push('/settings/roles/new'); + + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/core/admin/ee/admin/pages/Roles/CreatePage/utils/schema.js b/packages/core/admin/ee/admin/pages/Roles/CreatePage/utils/schema.js index 7fc1ec4d10..5e2ac5c5af 100644 --- a/packages/core/admin/ee/admin/pages/Roles/CreatePage/utils/schema.js +++ b/packages/core/admin/ee/admin/pages/Roles/CreatePage/utils/schema.js @@ -3,6 +3,7 @@ import { translatedErrors } from '@strapi/helper-plugin'; const schema = yup.object().shape({ name: yup.string().required(translatedErrors.required), + description: yup.string().required(translatedErrors.required), }); export default schema; From ecce72d23b396d2e82bc3c7ad6969c0b283aca29 Mon Sep 17 00:00:00 2001 From: bulby97 Date: Thu, 26 Aug 2021 14:15:36 +0200 Subject: [PATCH 18/20] fix overflowX issue with table --- .../ContentTypeCollapse/Collapse/index.js | 171 ++++++++++-------- .../components/Roles/ContentTypes/index.js | 9 +- .../src/components/Roles/Permissions/index.js | 2 +- 3 files changed, 102 insertions(+), 80 deletions(-) diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js index fcaa289d49..a115874f2e 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js @@ -16,10 +16,12 @@ import { getCheckboxState } from '../../utils'; import generateCheckboxesActions from './utils/generateCheckboxesActions'; const activeRowStyle = (theme, isActive, isClicked) => ` - ${isClicked ? `border: 1px solid ${theme.colors.primary600}; border-bottom: none;` : ''} - background-color: ${theme.colors.primary100}; - color: ${theme.colors.primary600}; - border-radius: ${isActive ? '2px 2px 0 0' : '2px'}; + ${Wrapper} { + ${isClicked ? `border: 1px solid ${theme.colors.primary600}; border-bottom: none;` : ''} + background-color: ${theme.colors.primary100}; + color: ${theme.colors.primary600}; + border-radius: ${isActive ? '2px 2px 0 0' : '2px'}; + } ${Text} { color: ${theme.colors.primary600}; font-weight: bold; @@ -33,12 +35,19 @@ const activeRowStyle = (theme, isActive, isClicked) => ` `; const Wrapper = styled.div` + flex: 1; display: flex; align-items: center; height: ${rowHeight}; background-color: ${({ isGrey, theme }) => isGrey ? theme.colors.neutral100 : theme.colors.neutral0}; border: 1px solid transparent; +`; + +const BoxWrapper = styled.div` + display: inline-flex; + min-width: 100%; + ${ConditionsButton} { display: none; } @@ -77,6 +86,12 @@ const TinyDot = styled(Box)` background: ${({ theme }) => theme.colors.primary600}; `; +const AbsoluteBox = styled(Box)` + position: absolute; + right: 9px; + transform: translateY(10px); +`; + const Collapse = ({ availableActions, isActive, @@ -129,103 +144,105 @@ const Collapse = ({ ); return ( - - - {isActive ? : } - + + + + {isActive ? : } + - - {checkboxesActions.map( - ({ - actionId, - hasConditions, - hasAllActionsSelected, - hasSomeActionsSelected, - isDisplayed, - isParentCheckbox, - checkboxName, - label: permissionLabel, - }) => { - if (!isDisplayed) { - return ; - } + + {checkboxesActions.map( + ({ + actionId, + hasConditions, + hasAllActionsSelected, + hasSomeActionsSelected, + isDisplayed, + isParentCheckbox, + checkboxName, + label: permissionLabel, + }) => { + if (!isDisplayed) { + return ; + } + + if (isParentCheckbox) { + return ( + + {hasConditions && } + + onChangeParentCheckbox({ + target: { + name: checkboxName, + value, + }, + })} + indeterminate={hasSomeActionsSelected} + value={hasAllActionsSelected} + /> + + ); + } - if (isParentCheckbox) { return ( {hasConditions && } - onChangeParentCheckbox({ + onChangeSimpleCheckbox({ target: { name: checkboxName, value, }, })} - indeterminate={hasSomeActionsSelected} value={hasAllActionsSelected} /> ); } - - return ( - - {hasConditions && } - - onChangeSimpleCheckbox({ - target: { - name: checkboxName, - value, - }, - })} - value={hasAllActionsSelected} - /> - - ); - } - )} - - + )} + + + + - - - + + ); }; diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypes/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypes/index.js index f0ecfb9a25..50eba465d8 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypes/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypes/index.js @@ -1,12 +1,17 @@ import React, { memo } from 'react'; import PropTypes from 'prop-types'; import { Box } from '@strapi/parts'; +import styled from 'styled-components'; import ContentTypeCollapses from '../ContentTypeCollapses'; import GlobalActions from '../GlobalActions'; +const StyledBox = styled(Box)` + overflow-x: auto; +`; + const ContentTypes = ({ isFormDisabled, kind, layout: { actions, subjects } }) => { return ( - + - + ); }; diff --git a/packages/core/admin/admin/src/components/Roles/Permissions/index.js b/packages/core/admin/admin/src/components/Roles/Permissions/index.js index ea61812c13..39997e9fa4 100644 --- a/packages/core/admin/admin/src/components/Roles/Permissions/index.js +++ b/packages/core/admin/admin/src/components/Roles/Permissions/index.js @@ -116,7 +116,7 @@ const Permissions = forwardRef(({ layout, isFormDisabled, permissions }, ref) => ))} - + Date: Thu, 26 Aug 2021 14:21:03 +0200 Subject: [PATCH 19/20] Rm useless wrapper, add empty space box --- .../Roles/ContentTypeCollapse/Collapse/index.js | 1 + .../Roles/ContentTypeCollapse/Wrapper.js | 17 ----------------- 2 files changed, 1 insertion(+), 17 deletions(-) delete mode 100644 packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Wrapper.js diff --git a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js index a115874f2e..a8ccfd6aa8 100644 --- a/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js +++ b/packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js @@ -227,6 +227,7 @@ const Collapse = ({ } )} + - withMargin && - ` - margin: 9px 0; - `} - - ${CollapsePropertyMatrix}:last-of-type { - padding-bottom: 17px; - } -`; - -export default RowWrapper; From 6d135dcb6076242864ee8ac6bd8af2ad91dc633c Mon Sep 17 00:00:00 2001 From: bulby97 Date: Thu, 26 Aug 2021 14:25:51 +0200 Subject: [PATCH 20/20] fix hidden action width issue --- .../admin/admin/src/components/Roles/HiddenAction/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/core/admin/admin/src/components/Roles/HiddenAction/index.js b/packages/core/admin/admin/src/components/Roles/HiddenAction/index.js index 3f81af849f..d796f48457 100644 --- a/packages/core/admin/admin/src/components/Roles/HiddenAction/index.js +++ b/packages/core/admin/admin/src/components/Roles/HiddenAction/index.js @@ -1,9 +1,8 @@ import styled from 'styled-components'; +import { cellWidth } from '../Permissions/utils/constants'; const HiddenAction = styled.div` - min-width: 10rem; - max-width: 12rem; - flex: 1; + width: ${cellWidth}; `; export default HiddenAction;