@akemona-org/strapi-admin 3.7.0

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

@@ -0,0 +1,156 @@
+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/Collapse/utils/constants.js

@@ -0,0 +1,3 @@
+const IS_DISABLED = true;
+
+export default IS_DISABLED;

package/admin/src/components/Roles/ContentTypeCollapse/Collapse/utils/generateCheckboxesActions.js

@@ -0,0 +1,55 @@
+import { get, isEmpty } from 'lodash';
+import { createArrayOfValues, getCheckboxState } from '../../../utils';
+
+const generateCheckboxesActions = (availableActions, modifiedData, pathToData) => {
+  return availableActions.map(({ actionId, isDisplayed, applyToProperties, label }) => {
+    if (!isDisplayed) {
+      return { actionId, hasSomeActionsSelected: false, isDisplayed };
+    }
+
+    const baseCheckboxNameArray = [...pathToData.split('..'), actionId];
+    const checkboxNameArray = isEmpty(applyToProperties)
+      ? [...baseCheckboxNameArray, 'properties', 'enabled']
+      : baseCheckboxNameArray;
+    const checkboxName = checkboxNameArray.join('..');
+    const conditionsValue = get(modifiedData, [...baseCheckboxNameArray, 'conditions'], null);
+
+    const hasConditions = createArrayOfValues(conditionsValue).some(val => val);
+
+    if (isEmpty(applyToProperties)) {
+      const value = get(modifiedData, checkboxNameArray, false);
+
+      // Since applyToProperties is empty it is not a parent checkbox, therefore hasAllActionsSelected is
+      // equal to hasSomeActionsSelected
+      return {
+        actionId,
+        checkboxName,
+        hasAllActionsSelected: value,
+        hasConditions,
+        hasSomeActionsSelected: value,
+        isDisplayed,
+        isParentCheckbox: false,
+        label,
+        pathToConditionsObject: baseCheckboxNameArray,
+      };
+    }
+
+    const mainData = get(modifiedData, checkboxNameArray, null);
+
+    const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(mainData);
+
+    return {
+      actionId,
+      checkboxName,
+      hasAllActionsSelected,
+      hasConditions,
+      hasSomeActionsSelected,
+      isDisplayed,
+      isParentCheckbox: true,
+      label,
+      pathToConditionsObject: baseCheckboxNameArray,
+    };
+  });
+};
+
+export default generateCheckboxesActions;

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

@@ -0,0 +1,28 @@
+/* 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

@@ -0,0 +1,162 @@
+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/ActionRow/utils/constants.js

@@ -0,0 +1,3 @@
+const IS_DISABLED = true;
+
+export default IS_DISABLED;

package/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/utils/getRowLabelCheckboxeState.js

@@ -0,0 +1,59 @@
+import { get } from 'lodash';
+import { getCheckboxState } from '../../../../utils';
+
+/**
+ * Returns a filtered array of actionId
+ * @param {array<object>} propertyActions
+ * @returns {string} actionId
+ */
+const getActionIdsFromPropertyActions = propertyActions => {
+  const actionIds = propertyActions.reduce((acc, current) => {
+    if (current.isActionRelatedToCurrentProperty) {
+      acc.push(current.actionId);
+    }
+
+    return acc;
+  }, []);
+
+  return actionIds;
+};
+
+/**
+ *
+ * Returns the state of the left checkbox of a ActionRow main checkbox
+ * @param {array} propertyActions
+ * @param {object} modifiedData
+ * @param {string} pathToContentType
+ * @param {string} propertyToCheck
+ * @param {string} targetKey
+ * @returns {object}
+ */
+const getRowLabelCheckboxeState = (
+  propertyActions,
+  modifiedData,
+  pathToContentType,
+  propertyToCheck,
+  targetKey
+) => {
+  const actionIds = getActionIdsFromPropertyActions(propertyActions);
+
+  const data = actionIds.reduce((acc, current) => {
+    const pathToData = [
+      ...pathToContentType.split('..'),
+      current,
+      'properties',
+      propertyToCheck,
+      targetKey,
+    ];
+    const mainData = get(modifiedData, pathToData, false);
+
+    acc[current] = mainData;
+
+    return acc;
+  }, {});
+
+  return getCheckboxState(data);
+};
+
+export default getRowLabelCheckboxeState;
+export { getActionIdsFromPropertyActions };

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

@@ -0,0 +1,65 @@
+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

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