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

package/admin/src/components/Roles/ConditionsModal/index.js

@@ -1,150 +0,0 @@
-import React, { useMemo, useState } from 'react';
-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 { usePermissionsDataManager } from '../../../hooks';
-import createDefaultConditionsForm from './utils/createDefaultConditionsForm';
-import ActionRow from './ActionRow';
-import Separator from './Separator';
-import updateValues from '../Permissions/utils/updateValues';
-
-const ConditionsModal = ({
-  actions,
-  headerBreadCrumbs,
-  isOpen,
-  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 handleCategoryChange = ({ keys, value }) => {
-    setState(prevState => {
-      const updatedState = cloneDeep(prevState);
-      const objToUpdate = get(prevState, keys, {});
-      const updatedValues = updateValues(objToUpdate, value);
-
-      set(updatedState, keys, updatedValues);
-
-      return updatedState;
-    });
-  };
-
-  const handleChange = ({ keys, value }) => {
-    setState(prevState => {
-      const updatedState = cloneDeep(prevState);
-
-      set(updatedState, keys, value);
-
-      return updatedState;
-    });
-  };
-
-  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 (
-    <Modal withoverflow="true" onClosed={onClosed} isOpen={isOpen} onToggle={onToggle}>
-      <ModalHeader headerBreadcrumbs={headerBreadCrumbs} />
-      <Padded top left right bottom size="md">
-        <Text fontSize="lg" fontWeight="bold">
-          {formatMessage({
-            id: 'Settings.permissions.conditions.define-conditions',
-          })}
-        </Text>
-        <Separator />
-        {actionsToDisplay.length === 0 && (
-          <Text fontSize="md" color="grey">
-            {formatMessage({ id: 'Settings.permissions.conditions.no-actions' })}
-          </Text>
-        )}
-        {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}
-              onCategoryChange={handleCategoryChange}
-              onChange={handleChange}
-              value={get(state, name, {})}
-            />
-          );
-        })}
-      </Padded>
-      <ModalFooter>
-        <section>
-          <Button type="button" color="cancel" onClick={onToggle}>
-            {formatMessage({ id: 'app.components.Button.cancel' })}
-          </Button>
-
-          <Button type="button" color="success" onClick={handleSubmit}>
-            {formatMessage({
-              id: 'Settings.permissions.conditions.apply',
-            })}
-          </Button>
-        </section>
-      </ModalFooter>
-    </Modal>
-  );
-};
-
-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,
-  isOpen: PropTypes.bool.isRequired,
-  isFormDisabled: PropTypes.bool.isRequired,
-  onClosed: PropTypes.func.isRequired,
-  onToggle: PropTypes.func.isRequired,
-};
-
-export default ConditionsModal;

package/admin/src/components/Roles/ContentTypeCollapse/Collapse/Wrapper.js

@@ -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;

package/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js

@@ -1,156 +0,0 @@
-import React, { useMemo, useState } from 'react';
-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 { 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 RowLabelWithCheckbox from '../../RowLabelWithCheckbox';
-import Wrapper from './Wrapper';
-import generateCheckboxesActions from './utils/generateCheckboxesActions';
-
-const Collapse = ({
-  availableActions,
-  isActive,
-  isGrey,
-  isFormDisabled,
-  label,
-  onClickToggle,
-  pathToData,
-}) => {
-  const [modalState, setModalState] = useState({ isOpen: false, isMounted: false });
-  const {
-    modifiedData,
-    onChangeParentCheckbox,
-    onChangeSimpleCheckbox,
-  } = usePermissionsDataManager();
-
-  const handleToggleModalIsOpen = () => {
-    setModalState(prevState => ({ isMounted: true, isOpen: !prevState.isOpen }));
-  };
-
-  const handleModalClose = () => {
-    setModalState(prevState => ({ ...prevState, isMounted: 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 (
-    <Wrapper isActive={isActive} isGrey={isGrey}>
-      <Flex style={{ flex: 1 }}>
-        <Padded left size="sm" />
-        <RowLabelWithCheckbox
-          isCollapsable
-          isFormDisabled={isFormDisabled}
-          label={label}
-          checkboxName={pathToData}
-          onChange={onChangeParentCheckbox}
-          onClick={onClickToggle}
-          someChecked={hasSomeActionsSelected}
-          value={hasAllActionsSelected}
-        >
-          <Chevron icon={isActive ? 'chevron-up' : 'chevron-down'} />
-        </RowLabelWithCheckbox>
-
-        <Flex style={{ flex: 1 }}>
-          {checkboxesActions.map(
-            ({
-              actionId,
-              hasConditions,
-              hasAllActionsSelected,
-              hasSomeActionsSelected,
-              isDisplayed,
-              isParentCheckbox,
-              checkboxName,
-            }) => {
-              if (!isDisplayed) {
-                return <HiddenAction key={actionId} />;
-              }
-
-              if (isParentCheckbox) {
-                return (
-                  <CheckboxWithCondition
-                    key={actionId}
-                    disabled={isFormDisabled || IS_DISABLED}
-                    hasConditions={hasConditions}
-                    name={checkboxName}
-                    onChange={onChangeParentCheckbox}
-                    someChecked={hasSomeActionsSelected}
-                    value={hasAllActionsSelected}
-                  />
-                );
-              }
-
-              return (
-                <CheckboxWithCondition
-                  key={actionId}
-                  disabled={isFormDisabled || IS_DISABLED}
-                  hasConditions={hasConditions}
-                  name={checkboxName}
-                  onChange={onChangeSimpleCheckbox}
-                  value={hasAllActionsSelected}
-                />
-              );
-            }
-          )}
-        </Flex>
-        <ConditionsButton
-          isRight
-          onClick={handleToggleModalIsOpen}
-          hasConditions={doesConditionButtonHasConditions}
-        />
-      </Flex>
-      {modalState.isMounted && (
-        <ConditionsModal
-          headerBreadCrumbs={[label, 'app.components.LeftMenuLinkContainer.settings']}
-          actions={checkboxesActions}
-          isOpen={modalState.isOpen}
-          isFormDisabled={isFormDisabled}
-          onClosed={handleModalClose}
-          onToggle={handleToggleModalIsOpen}
-        />
-      )}
-    </Wrapper>
-  );
-};
-
-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/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/Wrapper.js

@@ -1,28 +0,0 @@
-/* eslint-disable indent */
-import styled from 'styled-components';
-import { Flex } from '@buffetjs/core';
-import { activeStyle } from '../../utils';
-import Chevron from '../../../Chevron';
-
-const RowWrapper = styled(Flex)`
-  height: 36px;
-  padding: 1rem 0;
-  flex: 1;
-  ${Chevron} {
-    width: 13px;
-  }
-  ${({ isCollapsable, theme }) =>
-    isCollapsable &&
-    `
-      ${Chevron} {
-        display: block;
-        color: ${theme.main.colors.grey};
-      }
-      &:hover {
-        ${activeStyle(theme)}
-      }
-  `}
-  ${({ isActive, theme }) => isActive && activeStyle(theme)};
-`;
-
-export default RowWrapper;

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

@@ -1,162 +0,0 @@
-import React, { memo, useState, useMemo, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { get } from 'lodash';
-import { Padded, Flex } from '@buffetjs/core';
-import IS_DISABLED from 'ee_else_ce/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/utils/constants';
-import { usePermissionsDataManager } from '../../../../../hooks';
-import { getCheckboxState } from '../../../utils';
-import CheckboxWithCondition from '../../../CheckboxWithCondition';
-import Chevron from '../../../Chevron';
-import HiddenAction from '../../../HiddenAction';
-import RequiredSign from '../../../RequiredSign';
-import RowLabelWithCheckbox from '../../../RowLabelWithCheckbox';
-import SubActionRow from '../SubActionRow';
-import Wrapper from './Wrapper';
-import getRowLabelCheckboxeState from './utils/getRowLabelCheckboxeState';
-
-const ActionRow = ({
-  childrenForm,
-  label,
-  isFormDisabled,
-  name,
-  required,
-  pathToData,
-  propertyActions,
-  propertyName,
-}) => {
-  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}>
-        <Flex style={{ flex: 1 }}>
-          <Padded left size="sm" />
-          <RowLabelWithCheckbox
-            width="15rem"
-            onChange={handleChangeLeftRowCheckbox}
-            onClick={handleClick}
-            isCollapsable={isCollapsable}
-            isFormDisabled={isFormDisabled}
-            label={label}
-            someChecked={hasSomeActionsSelected}
-            value={hasAllActionsSelected}
-          >
-            {required && <RequiredSign />}
-            <Chevron icon={isActive ? 'caret-up' : 'caret-down'} />
-          </RowLabelWithCheckbox>
-          <Flex style={{ flex: 1 }}>
-            {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 (
-                  <CheckboxWithCondition
-                    key={actionId}
-                    disabled={isFormDisabled || IS_DISABLED}
-                    name={checkboxName.join('..')}
-                    onChange={onChangeSimpleCheckbox}
-                    value={checkboxValue}
-                  />
-                );
-              }
-
-              const data = get(modifiedData, checkboxName, {});
-
-              const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(data);
-
-              return (
-                <CheckboxWithCondition
-                  key={label}
-                  disabled={isFormDisabled || IS_DISABLED}
-                  name={checkboxName.join('..')}
-                  onChange={onChangeParentCheckbox}
-                  value={hasAllActionsSelected}
-                  someChecked={hasSomeActionsSelected}
-                />
-              );
-            })}
-          </Flex>
-        </Flex>
-      </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,
-};
-
-export default memo(ActionRow);

package/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { Flex, Text } from '@buffetjs/core';
-import styled from 'styled-components';
-// 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;
-`;
-const PropertyLabelWrapper = styled.div`
-  width: 18rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  padding-left: 3.5rem;
-`;
-
-const Header = ({ headers, label }) => {
-  const { formatMessage } = useIntl();
-  const translatedLabel = formatMessage(
-    {
-      id: 'Settings.roles.form.permission.property-label',
-      defaultMessage: '{label} permissions',
-    },
-    { label }
-  );
-
-  return (
-    <Flex>
-      <PropertyLabelWrapper>
-        <Text fontWeight="bold">{translatedLabel}</Text>
-      </PropertyLabelWrapper>
-      {headers.map(header => {
-        if (!header.isActionRelatedToCurrentProperty) {
-          return <HeaderLabel key={header.label} />;
-        }
-
-        return (
-          <HeaderLabel key={header.label}>
-            <Text textTransform="capitalize" fontWeight="bold">
-              {formatMessage({
-                id: `Settings.roles.form.permissions.${header.label.toLowerCase()}`,
-                defaultMessage: header.label,
-              })}
-            </Text>
-          </HeaderLabel>
-        );
-      })}
-    </Flex>
-  );
-};
-
-Header.propTypes = {
-  headers: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      isActionRelatedToCurrentProperty: PropTypes.bool.isRequired,
-    })
-  ).isRequired,
-  label: PropTypes.string.isRequired,
-};
-
-export default Header;

package/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/Wrapper.js

@@ -1,8 +0,0 @@
-/* eslint-disable indent */
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  padding-left: 15px;
-`;
-
-export default Wrapper;