@strapi/admin 4.0.0-next.12 → 4.0.0-next.16

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/index.js

@@ -0,0 +1,169 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '@strapi/parts/Box';
+import { Button } from '@strapi/parts/Button';
+import { Divider } from '@strapi/parts/Divider';
+import { Stack } from '@strapi/parts/Stack';
+import { ModalFooter, ModalHeader, ModalLayout } from '@strapi/parts/ModalLayout';
+import { Breadcrumbs, Crumb } from '@strapi/parts/Breadcrumbs';
+import { H2, Text } from '@strapi/parts/Text';
+import produce from 'immer';
+import get from 'lodash/get';
+import groupBy from 'lodash/groupBy';
+import upperFirst from 'lodash/upperFirst';
+import { useIntl } from 'react-intl';
+import { usePermissionsDataManager } from '../../../../../../../hooks';
+import ActionRow from './ActionRow';
+import createDefaultConditionsForm from './utils/createDefaultConditionsForm';
+
+const ConditionsModal = ({ actions, headerBreadCrumbs, isFormDisabled, onClosed, onToggle }) => {
+  const { formatMessage } = useIntl();
+  const { availableConditions, modifiedData, onChangeConditions } = usePermissionsDataManager();
+
+  const arrayOfOptionsGroupedByCategory = useMemo(() => {
+    return Object.entries(groupBy(availableConditions, 'category'));
+  }, [availableConditions]);
+
+  const actionsToDisplay = actions.filter(
+    ({ isDisplayed, hasSomeActionsSelected, hasAllActionsSelected }) =>
+      isDisplayed && (hasSomeActionsSelected || hasAllActionsSelected)
+  );
+
+  const initState = useMemo(() => {
+    return createDefaultConditionsForm(
+      actionsToDisplay,
+      modifiedData,
+      arrayOfOptionsGroupedByCategory
+    );
+  }, [actionsToDisplay, modifiedData, arrayOfOptionsGroupedByCategory]);
+
+  const [state, setState] = useState(initState);
+
+  const handleChange = (name, values) => {
+    setState(
+      produce(draft => {
+        if (!draft[name]) {
+          draft[name] = {};
+        }
+
+        if (!draft[name].default) {
+          draft[name].default = {};
+        }
+
+        draft[name].default = values;
+      })
+    );
+  };
+
+  const handleSubmit = () => {
+    const conditionsWithoutCategory = Object.entries(state).reduce((acc, current) => {
+      const [key, value] = current;
+
+      const merged = Object.values(value).reduce((acc1, current1) => {
+        return { ...acc1, ...current1 };
+      }, {});
+
+      acc[key] = merged;
+
+      return acc;
+    }, {});
+
+    onChangeConditions(conditionsWithoutCategory);
+    onToggle();
+  };
+
+  return (
+    <ModalLayout labelledBy="condition-modal-breadcrumbs" onClose={onClosed}>
+      <ModalHeader>
+        <Breadcrumbs id="condition-modal-breadcrumbs" label={headerBreadCrumbs.join(', ')}>
+          {headerBreadCrumbs.map(label => (
+            <Crumb key={label}>
+              {upperFirst(
+                formatMessage({
+                  id: label,
+                  defaultMessage: label,
+                })
+              )}
+            </Crumb>
+          ))}
+        </Breadcrumbs>
+      </ModalHeader>
+      <Box padding={8}>
+        <Stack size={6}>
+          <H2>
+            {formatMessage({
+              id: 'Settings.permissions.conditions.define-conditions',
+              defaultMessage: 'Define conditions',
+            })}
+          </H2>
+          <Box>
+            <Divider />
+          </Box>
+          <Box>
+            {actionsToDisplay.length === 0 && (
+              <Text>
+                {formatMessage({
+                  id: 'Settings.permissions.conditions.no-actions',
+                  defaultMessage:
+                    'You first need to select actions (create, read, update, ...) before defining conditions on them.',
+                })}
+              </Text>
+            )}
+            <ul>
+              {actionsToDisplay.map(({ actionId, label, pathToConditionsObject }, index) => {
+                const name = pathToConditionsObject.join('..');
+
+                return (
+                  <ActionRow
+                    key={actionId}
+                    arrayOfOptionsGroupedByCategory={arrayOfOptionsGroupedByCategory}
+                    label={label}
+                    isFormDisabled={isFormDisabled}
+                    isGrey={index % 2 === 0}
+                    name={name}
+                    onChange={handleChange}
+                    value={get(state, name, {})}
+                  />
+                );
+              })}
+            </ul>
+          </Box>
+        </Stack>
+      </Box>
+      <ModalFooter
+        startActions={
+          <Button variant="tertiary" onClick={onToggle}>
+            {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}
+          </Button>
+        }
+        endActions={
+          <Button onClick={handleSubmit}>
+            {formatMessage({
+              id: 'Settings.permissions.conditions.apply',
+              defaultMessage: 'Apply',
+            })}
+          </Button>
+        }
+      />
+    </ModalLayout>
+  );
+};
+
+ConditionsModal.propTypes = {
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      actionId: PropTypes.string.isRequired,
+      checkboxName: PropTypes.string,
+      hasSomeActionsSelected: PropTypes.bool.isRequired,
+      hasAllActionsSelected: PropTypes.bool,
+      isDisplayed: PropTypes.bool.isRequired,
+      label: PropTypes.string,
+    })
+  ).isRequired,
+  headerBreadCrumbs: PropTypes.arrayOf(PropTypes.string).isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  onClosed: PropTypes.func.isRequired,
+  onToggle: PropTypes.func.isRequired,
+};
+
+export default ConditionsModal;

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/index.js

@@ -0,0 +1,266 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import Down from '@strapi/icons/Down';
+import Up from '@strapi/icons/Up';
+import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
+import { Box } from '@strapi/parts/Box';
+import { Row } from '@strapi/parts/Row';
+import get from 'lodash/get';
+import omit from 'lodash/omit';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/utils/constants';
+import { usePermissionsDataManager } from '../../../../../../../../hooks';
+import ConditionsButton from '../../ConditionsButton';
+import ConditionsModal from '../../ConditionsModal';
+import HiddenAction from '../../HiddenAction';
+import { cellWidth, rowHeight } from '../../Permissions/utils/constants';
+import RowLabelWithCheckbox from '../../RowLabelWithCheckbox';
+import { getCheckboxState } from '../../utils';
+import generateCheckboxesActions from './utils/generateCheckboxesActions';
+import activeStyle from '../utils/activeStyle';
+
+const activeRowStyle = (theme, isActive) => `
+  ${Wrapper} {
+    background-color: ${theme.colors.primary100};
+    color: ${theme.colors.primary600};
+    border-radius: ${isActive ? '2px 2px 0 0' : '2px'};
+  }
+  ${Chevron} {
+    display: flex;
+  }
+  ${ConditionsButton} {
+    display: block;
+  }
+  &:hover {
+   ${activeStyle(theme)}
+  }
+  
+`;
+
+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;
+  }
+  ${({ isActive, theme }) => isActive && activeRowStyle(theme, isActive)}
+  &:hover {
+    ${({ theme, isActive }) => activeRowStyle(theme, isActive)}
+  }
+
+  &:focus-within {
+    ${({ theme, isActive }) => activeRowStyle(theme, isActive)}
+  }
+`;
+
+const Cell = styled(Row)`
+  width: ${cellWidth};
+  position: relative;
+`;
+
+const Chevron = styled(Box)`
+  display: none;
+  svg {
+    width: 11px;
+  }
+  * {
+    fill: ${({ theme }) => theme.colors.primary600};
+  }
+`;
+
+const TinyDot = styled.span`
+  position: absolute;
+  top: -6px;
+  left: 37px;
+  width: 6px;
+  height: 6px;
+  border-radius: 20px;
+  background: ${({ theme }) => theme.colors.primary600};
+`;
+
+const AbsoluteBox = styled(Box)`
+  position: absolute;
+  right: 9px;
+  transform: translateY(10px);
+`;
+
+const Collapse = ({
+  availableActions,
+  isActive,
+  isGrey,
+  isFormDisabled,
+  label,
+  onClickToggle,
+  pathToData,
+}) => {
+  const [isModalOpen, setModalOpen] = useState(false);
+  const { formatMessage } = useIntl();
+  const {
+    modifiedData,
+    onChangeParentCheckbox,
+    onChangeSimpleCheckbox,
+  } = usePermissionsDataManager();
+
+  const handleToggleModalIsOpen = () => {
+    setModalOpen(s => !s);
+  };
+
+  const handleModalClose = () => {
+    setModalOpen(false);
+  };
+
+  // This corresponds to the data related to the CT left checkbox
+  // modifiedData: { collectionTypes: { [ctuid]: {create: {properties: { fields: {f1: true} }, update: {}, ... } } } }
+  const mainData = get(modifiedData, pathToData.split('..'), {});
+  // The utils we are using: getCheckboxState, retrieves all the boolean leafs of an object in order
+  // to return the state of checkbox. Since the conditions are not related to the property we need to remove the key from the object.
+  const dataWithoutCondition = useMemo(() => {
+    return Object.keys(mainData).reduce((acc, current) => {
+      acc[current] = omit(mainData[current], 'conditions');
+
+      return acc;
+    }, {});
+  }, [mainData]);
+
+  const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(dataWithoutCondition);
+
+  // Here we create an array of <checkbox>, since the state of each one of them is used in
+  // order to know if whether or not we need to display the associated action in
+  // the <ConditionsModal />
+  const checkboxesActions = useMemo(() => {
+    return generateCheckboxesActions(availableActions, modifiedData, pathToData);
+  }, [availableActions, modifiedData, pathToData]);
+
+  const doesConditionButtonHasConditions = checkboxesActions.some(
+    ({ hasConditions }) => hasConditions
+  );
+
+  return (
+    <BoxWrapper isActive={isActive}>
+      <Wrapper isGrey={isGrey}>
+        <RowLabelWithCheckbox
+          isCollapsable
+          isFormDisabled={isFormDisabled}
+          label={label}
+          checkboxName={pathToData}
+          onChange={onChangeParentCheckbox}
+          onClick={onClickToggle}
+          someChecked={hasSomeActionsSelected}
+          value={hasAllActionsSelected}
+          isActive={isActive}
+        >
+          <Chevron paddingLeft={2}>{isActive ? <Up /> : <Down />}</Chevron>
+        </RowLabelWithCheckbox>
+
+        <Row style={{ flex: 1 }}>
+          {checkboxesActions.map(
+            ({
+              actionId,
+              hasConditions,
+              hasAllActionsSelected,
+              hasSomeActionsSelected,
+              isDisplayed,
+              isParentCheckbox,
+              checkboxName,
+              label: permissionLabel,
+            }) => {
+              if (!isDisplayed) {
+                return <HiddenAction key={actionId} />;
+              }
+
+              if (isParentCheckbox) {
+                return (
+                  <Cell key={actionId} justifyContent="center" alignItems="center">
+                    {hasConditions && <TinyDot />}
+                    <BaseCheckbox
+                      disabled={isFormDisabled || IS_DISABLED}
+                      name={checkboxName}
+                      aria-label={formatMessage(
+                        {
+                          id: `Settings.permissions.select-by-permission`,
+                          defaultMessage: 'Select {label} permission',
+                        },
+                        { label: `${permissionLabel} ${label}` }
+                      )}
+                      // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
+                      onValueChange={value => {
+                        onChangeParentCheckbox({
+                          target: {
+                            name: checkboxName,
+                            value,
+                          },
+                        });
+                      }}
+                      indeterminate={hasSomeActionsSelected}
+                      value={hasAllActionsSelected}
+                    />
+                  </Cell>
+                );
+              }
+
+              return (
+                <Cell key={actionId} justifyContent="center" alignItems="center">
+                  {hasConditions && <TinyDot />}
+                  <BaseCheckbox
+                    disabled={isFormDisabled || IS_DISABLED}
+                    indeterminate={hasConditions}
+                    name={checkboxName}
+                    // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
+                    onValueChange={value => {
+                      onChangeSimpleCheckbox({
+                        target: {
+                          name: checkboxName,
+                          value,
+                        },
+                      });
+                    }}
+                    value={hasAllActionsSelected}
+                  />
+                </Cell>
+              );
+            }
+          )}
+        </Row>
+        {isModalOpen && (
+          <ConditionsModal
+            headerBreadCrumbs={[label, 'app.components.LeftMenuLinkContainer.settings']}
+            actions={checkboxesActions}
+            isFormDisabled={isFormDisabled}
+            onClosed={handleModalClose}
+            onToggle={handleToggleModalIsOpen}
+          />
+        )}
+      </Wrapper>
+      <AbsoluteBox>
+        <ConditionsButton
+          onClick={handleToggleModalIsOpen}
+          hasConditions={doesConditionButtonHasConditions}
+        />
+      </AbsoluteBox>
+    </BoxWrapper>
+  );
+};
+
+Collapse.propTypes = {
+  availableActions: PropTypes.array.isRequired,
+  isActive: PropTypes.bool.isRequired,
+  isGrey: PropTypes.bool.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  label: PropTypes.string.isRequired,
+  onClickToggle: PropTypes.func.isRequired,
+  pathToData: PropTypes.string.isRequired,
+};
+
+export default Collapse;

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js

@@ -0,0 +1,227 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
+import { Row } from '@strapi/parts/Row';
+import get from 'lodash/get';
+import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/utils/constants';
+import { usePermissionsDataManager } from '../../../../../../../../../hooks';
+import HiddenAction from '../../../HiddenAction';
+import { cellWidth, rowHeight } from '../../../Permissions/utils/constants';
+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(Row)`
+  width: ${cellWidth};
+  position: relative;
+`;
+
+const Wrapper = styled(Row)`
+  height: ${rowHeight};
+  flex: 1;
+
+  ${({ isCollapsable, theme }) =>
+    isCollapsable &&
+    `
+      ${CarretIcon} {
+        display: block;
+        color: ${theme.colors.neutral100};
+      }
+      &:hover {
+        ${activeStyle(theme)}
+      }
+  `}
+  ${({ isActive, theme }) => isActive && activeStyle(theme)};
+`;
+
+const ActionRow = ({
+  childrenForm,
+  label,
+  isFormDisabled,
+  name,
+  required,
+  pathToData,
+  propertyActions,
+  propertyName,
+  isOdd,
+}) => {
+  const { formatMessage } = useIntl();
+  const [rowToOpen, setRowToOpen] = useState(null);
+  const {
+    modifiedData,
+    onChangeCollectionTypeLeftActionRowCheckbox,
+    onChangeParentCheckbox,
+    onChangeSimpleCheckbox,
+  } = usePermissionsDataManager();
+
+  const isActive = rowToOpen === name;
+
+  const recursiveChildren = useMemo(() => {
+    if (!Array.isArray(childrenForm)) {
+      return [];
+    }
+
+    return childrenForm;
+  }, [childrenForm]);
+
+  const isCollapsable = recursiveChildren.length > 0;
+
+  const handleClick = useCallback(() => {
+    if (isCollapsable) {
+      setRowToOpen(prev => {
+        if (prev === name) {
+          return null;
+        }
+
+        return name;
+      });
+    }
+  }, [isCollapsable, name]);
+
+  const handleChangeLeftRowCheckbox = ({ target: { value } }) => {
+    onChangeCollectionTypeLeftActionRowCheckbox(pathToData, propertyName, name, value);
+  };
+
+  const { hasAllActionsSelected, hasSomeActionsSelected } = useMemo(() => {
+    return getRowLabelCheckboxeState(propertyActions, modifiedData, pathToData, propertyName, name);
+  }, [propertyActions, modifiedData, pathToData, propertyName, name]);
+
+  return (
+    <>
+      <Wrapper
+        alignItems="center"
+        isCollapsable={isCollapsable}
+        isActive={isActive}
+        background={isOdd ? 'neutral100' : 'neutral0'}
+      >
+        <Row>
+          <RowLabelWithCheckbox
+            onChange={handleChangeLeftRowCheckbox}
+            onClick={handleClick}
+            isCollapsable={isCollapsable}
+            isFormDisabled={isFormDisabled}
+            label={label}
+            someChecked={hasSomeActionsSelected}
+            value={hasAllActionsSelected}
+            isActive={isActive}
+          >
+            {required && <RequiredSign />}
+            <CarretIcon $isActive={isActive} />
+          </RowLabelWithCheckbox>
+          <Row>
+            {propertyActions.map(({ label, isActionRelatedToCurrentProperty, actionId }) => {
+              if (!isActionRelatedToCurrentProperty) {
+                return <HiddenAction key={label} />;
+              }
+
+              const checkboxName = [
+                ...pathToData.split('..'),
+                actionId,
+                'properties',
+                propertyName,
+                name,
+              ];
+
+              if (!isCollapsable) {
+                const checkboxValue = get(modifiedData, checkboxName, false);
+
+                return (
+                  <Cell key={actionId} justifyContent="center" alignItems="center">
+                    <BaseCheckbox
+                      disabled={isFormDisabled || IS_DISABLED}
+                      name={checkboxName.join('..')}
+                      aria-label={formatMessage(
+                        {
+                          id: `Settings.permissions.select-by-permission`,
+                          defaultMessage: 'Select {label} permission',
+                        },
+                        { label: `${name} ${label}` }
+                      )}
+                      // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
+                      onValueChange={value => {
+                        onChangeSimpleCheckbox({
+                          target: {
+                            name: checkboxName.join('..'),
+                            value,
+                          },
+                        });
+                      }}
+                      value={checkboxValue}
+                    />
+                  </Cell>
+                );
+              }
+
+              const data = get(modifiedData, checkboxName, {});
+
+              const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(data);
+
+              return (
+                <Cell key={label} justifyContent="center" alignItems="center">
+                  <BaseCheckbox
+                    disabled={isFormDisabled || IS_DISABLED}
+                    name={checkboxName.join('..')}
+                    // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
+                    onValueChange={value => {
+                      onChangeParentCheckbox({
+                        target: {
+                          name: checkboxName.join('..'),
+                          value,
+                        },
+                      });
+                    }}
+                    aria-label={formatMessage(
+                      {
+                        id: `Settings.permissions.select-by-permission`,
+                        defaultMessage: 'Select {label} permission',
+                      },
+                      { label: `${name} ${label}` }
+                    )}
+                    value={hasAllActionsSelected}
+                    indeterminate={hasSomeActionsSelected}
+                  />
+                </Cell>
+              );
+            })}
+          </Row>
+        </Row>
+      </Wrapper>
+      {isActive && (
+        <SubActionRow
+          childrenForm={recursiveChildren}
+          isFormDisabled={isFormDisabled}
+          parentName={name}
+          pathToDataFromActionRow={pathToData}
+          propertyName={propertyName}
+          propertyActions={propertyActions}
+          recursiveLevel={0}
+        />
+      )}
+    </>
+  );
+};
+
+ActionRow.defaultProps = {
+  childrenForm: [],
+  required: false,
+};
+
+ActionRow.propTypes = {
+  childrenForm: PropTypes.array,
+  label: PropTypes.string.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  name: PropTypes.string.isRequired,
+  pathToData: PropTypes.string.isRequired,
+  propertyActions: PropTypes.array.isRequired,
+  propertyName: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  isOdd: PropTypes.bool.isRequired,
+};
+
+export default memo(ActionRow);

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/CarretIcon/index.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import Carret from '@strapi/icons/Carret';
+
+const CarretIcon = styled(Carret)`
+  display: none;
+  width: ${10 / 16}rem;
+  transform: rotate(${({ $isActive }) => ($isActive ? '180' : '0')}deg);
+  margin-left: ${({ theme }) => theme.spaces[2]};
+  * {
+    fill: ${({ theme }) => theme.colors.primary600};
+  }
+`;
+
+export default CarretIcon;