@akemona-org/strapi-admin 3.7.0

package/admin/src/components/Roles/Permissions/utils/tabLabels.js

@@ -0,0 +1,24 @@
+const TAB_LABELS = [
+  {
+    labelId: 'app.components.LeftMenuLinkContainer.collectionTypes',
+    defaultMessage: 'Collection Types',
+    id: 'collectionTypes',
+  },
+  {
+    labelId: 'app.components.LeftMenuLinkContainer.singleTypes',
+    id: 'singleTypes',
+    defaultMessage: 'Single Types',
+  },
+  {
+    labelId: 'app.components.LeftMenuLinkContainer.plugins',
+    defaultMessage: 'Plugins',
+    id: 'plugins',
+  },
+  {
+    labelId: 'app.components.LeftMenuLinkContainer.settings',
+    defaultMessage: 'Settings',
+    id: 'settings',
+  },
+];
+
+export default TAB_LABELS;

package/admin/src/components/Roles/Permissions/utils/updateConditionsToFalse.js

@@ -0,0 +1,39 @@
+import { isObject, has, omit } from 'lodash';
+import { createArrayOfValues } from '../../utils';
+
+/**
+ * Changes all the conditions leaf when the properties are all falsy
+ * @param {object} obj the modifiedData state
+ * @returns {object} the mutated modifiedData
+ */
+const updateConditionsToFalse = obj => {
+  return Object.keys(obj).reduce((acc, current) => {
+    const currentValue = obj[current];
+
+    if (isObject(currentValue) && !has(currentValue, 'conditions')) {
+      return { ...acc, [current]: updateConditionsToFalse(currentValue) };
+    }
+
+    if (isObject(currentValue) && has(currentValue, 'conditions')) {
+      const isActionEnabled = createArrayOfValues(omit(currentValue, 'conditions')).some(
+        val => val
+      );
+
+      if (!isActionEnabled) {
+        const updatedConditions = Object.keys(currentValue.conditions).reduce((acc1, current) => {
+          acc1[current] = false;
+
+          return acc1;
+        }, {});
+
+        return { ...acc, [current]: { ...currentValue, conditions: updatedConditions } };
+      }
+    }
+
+    acc[current] = currentValue;
+
+    return acc;
+  }, {});
+};
+
+export default updateConditionsToFalse;

package/admin/src/components/Roles/Permissions/utils/updateValues.js

@@ -0,0 +1,31 @@
+import { isObject } from 'lodash';
+
+/**
+ * Sets all the none object values of an object to the given one
+ * @param {object} obj
+ * @param {boolean} valueToSet The value we want to set
+ * It preserves the shape of the object, it only modifies the leafs
+ * of an object.
+ * This utility is very helpful when dealing with parent<>children checkboxes
+ */
+const updateValues = (obj, valueToSet) => {
+  return Object.keys(obj).reduce((acc, current) => {
+    const currentValue = obj[current];
+
+    if (current === 'conditions') {
+      acc[current] = currentValue;
+
+      return acc;
+    }
+
+    if (isObject(currentValue)) {
+      return { ...acc, [current]: updateValues(currentValue, valueToSet) };
+    }
+
+    acc[current] = valueToSet;
+
+    return acc;
+  }, {});
+};
+
+export default updateValues;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { PermissionsDataManagerContext } from '../../../contexts';
+
+const PermissionsDataManagerProvider = ({ children, value }) => {
+  return (
+    <PermissionsDataManagerContext.Provider value={value}>
+      {children}
+    </PermissionsDataManagerContext.Provider>
+  );
+};
+
+PermissionsDataManagerProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  value: PropTypes.exact({
+    availableConditions: PropTypes.array.isRequired,
+    modifiedData: PropTypes.object.isRequired,
+    onChangeCollectionTypeLeftActionRowCheckbox: PropTypes.func.isRequired,
+    onChangeConditions: PropTypes.func.isRequired,
+    onChangeSimpleCheckbox: PropTypes.func.isRequired,
+    onChangeParentCheckbox: PropTypes.func.isRequired,
+    onChangeCollectionTypeGlobalActionCheckbox: PropTypes.func.isRequired,
+  }).isRequired,
+};
+
+export default PermissionsDataManagerProvider;

package/admin/src/components/Roles/PluginsAndSettings/ListWrapper.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const ListWrapper = styled.div`
+  background-color: ${({ theme }) => 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;

package/admin/src/components/Roles/PluginsAndSettings/Row/Wrapper.js

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

package/admin/src/components/Roles/PluginsAndSettings/Row/index.js

@@ -0,0 +1,82 @@
+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 PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import SubCategory from '../SubCategory';
+import RowStyle from './Wrapper';
+
+const PermissionRow = ({
+  childrenForm,
+  kind,
+  name,
+  isOpen,
+  isFormDisabled,
+  isWhite,
+  onOpenCategory,
+  pathToData,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const handleClick = () => {
+    onOpenCategory(name);
+  };
+
+  const categoryName = useMemo(() => {
+    const split = name.split('::');
+
+    return split.pop();
+  }, [name]);
+
+  return (
+    <RowContainer isWhite={isWhite}>
+      <RowStyle isWhite={isWhite} isActive={isOpen} onClick={handleClick}>
+        <Flex alignItems="center" justifyContent="space-between">
+          <div>
+            <Text color="grey" fontWeight="bold" fontSize="xs" textTransform="uppercase">
+              {categoryName}
+            </Text>
+            <Text lineHeight="22px" color="grey">
+              {formatMessage({ id: 'Settings.permissions.category' }, { category: categoryName })}
+              &nbsp;{kind === 'plugins' ? 'plugin' : kind}
+            </Text>
+          </div>
+          <div>
+            <FontAwesomeIcon style={{ width: '11px' }} color="#9EA7B8" icon="chevron-down" />
+          </div>
+        </Flex>
+      </RowStyle>
+
+      {isOpen && (
+        <PermissionsWrapper isWhite={isWhite}>
+          {childrenForm.map(({ actions, subCategoryName, subCategoryId }) => (
+            <SubCategory
+              key={subCategoryName}
+              actions={actions}
+              categoryName={categoryName}
+              isFormDisabled={isFormDisabled}
+              subCategoryName={subCategoryName}
+              pathToData={[...pathToData, subCategoryId]}
+            />
+          ))}
+        </PermissionsWrapper>
+      )}
+    </RowContainer>
+  );
+};
+
+PermissionRow.defaultProps = {};
+
+PermissionRow.propTypes = {
+  childrenForm: PropTypes.array.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  isWhite: PropTypes.bool.isRequired,
+  kind: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onOpenCategory: PropTypes.func.isRequired,
+  pathToData: PropTypes.array.isRequired,
+};
+
+export default PermissionRow;

package/admin/src/components/Roles/PluginsAndSettings/SubCategory/CheckboxWrapper.js

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

package/admin/src/components/Roles/PluginsAndSettings/SubCategory/ConditionsButtonWrapper.js

@@ -0,0 +1,13 @@
+/* eslint-disable indent */
+import styled from 'styled-components';
+
+const ConditionsButtonWrapper = styled.div`
+  padding: 0.9rem;
+  ${({ hasConditions }) =>
+    hasConditions &&
+    `
+    padding-left: 22px;
+  `}
+`;
+
+export default ConditionsButtonWrapper;

package/admin/src/components/Roles/PluginsAndSettings/SubCategory/Wrapper.js

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

package/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js

@@ -0,0 +1,136 @@
+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 { 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;
+`;
+
+const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, pathToData }) => {
+  const [modalState, setModalState] = useState({ isOpen: false, isMounted: false });
+  const {
+    modifiedData,
+    onChangeParentCheckbox,
+    onChangeSimpleCheckbox,
+  } = usePermissionsDataManager();
+  const { formatMessage } = useIntl();
+
+  const mainData = get(modifiedData, pathToData, {});
+  const dataWithoutCondition = useMemo(() => {
+    return Object.keys(mainData).reduce((acc, current) => {
+      acc[current] = removeConditionKeyFromData(mainData[current]);
+
+      return acc;
+    }, {});
+  }, [mainData]);
+
+  const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(dataWithoutCondition);
+
+  const handleToggleModalIsOpen = () => {
+    setModalState(prevState => ({ isMounted: true, isOpen: !prevState.isOpen }));
+  };
+
+  const handleModalClose = () => {
+    setModalState(prevState => ({ ...prevState, isMounted: false }));
+  };
+
+  // We need to format the actions so it matches the shape of the ConditionsModal actions props
+  const formattedActions = formatActions(actions, modifiedData, pathToData);
+  const doesButtonHasCondition = getConditionsButtonState(get(modifiedData, [...pathToData], {}));
+
+  return (
+    <>
+      <Wrapper>
+        <Flex justifyContent="space-between" alignItems="center">
+          <Padded right size="sm">
+            <Text
+              lineHeight="18px"
+              color="#919bae"
+              fontWeight="bold"
+              fontSize="xs"
+              textTransform="uppercase"
+            >
+              {subCategoryName}
+            </Text>
+          </Padded>
+          <Border />
+          <Padded left size="sm">
+            <BaselineAlignment top size="1px" />
+            <Checkbox
+              name={pathToData.join('..')}
+              message={formatMessage({ id: 'app.utils.select-all' })}
+              disabled={isFormDisabled || IS_DISABLED}
+              onChange={onChangeParentCheckbox}
+              someChecked={hasSomeActionsSelected}
+              value={hasAllActionsSelected}
+            />
+          </Padded>
+        </Flex>
+        <BaselineAlignment top size="1px" />
+        <Padded top size="xs">
+          <Flex flexWrap="wrap">
+            {formattedActions.map(({ checkboxName, value, action, displayName, hasConditions }) => {
+              return (
+                <CheckboxWrapper
+                  disabled={isFormDisabled || IS_DISABLED}
+                  hasConditions={hasConditions}
+                  key={action}
+                >
+                  <Checkbox
+                    name={checkboxName}
+                    disabled={isFormDisabled || IS_DISABLED}
+                    message={displayName}
+                    onChange={onChangeSimpleCheckbox}
+                    value={value}
+                  />
+                </CheckboxWrapper>
+              );
+            })}
+          </Flex>
+          <ConditionsButtonWrapper disabled={isFormDisabled} hasConditions={doesButtonHasCondition}>
+            <ConditionsButton
+              hasConditions={doesButtonHasCondition}
+              onClick={handleToggleModalIsOpen}
+            />
+          </ConditionsButtonWrapper>
+        </Padded>
+      </Wrapper>
+      {modalState.isMounted && (
+        <ConditionsModal
+          headerBreadCrumbs={[categoryName, subCategoryName]}
+          actions={formattedActions}
+          isOpen={modalState.isOpen}
+          isFormDisabled={isFormDisabled}
+          onClosed={handleModalClose}
+          onToggle={handleToggleModalIsOpen}
+        />
+      )}
+    </>
+  );
+};
+
+SubCategory.propTypes = {
+  actions: PropTypes.array.isRequired,
+  categoryName: PropTypes.string.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  subCategoryName: PropTypes.string.isRequired,
+  pathToData: PropTypes.array.isRequired,
+};
+
+export default SubCategory;

package/admin/src/components/Roles/PluginsAndSettings/SubCategory/utils/constants.js

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

package/admin/src/components/Roles/PluginsAndSettings/SubCategory/utils/formatActions.js

@@ -0,0 +1,32 @@
+import { get } from 'lodash';
+import { createArrayOfValues } from '../../../utils';
+
+/**
+ * We need to format the actions to an array of object that matches the ConditionsModal action's props
+ * @param {array<object>} actions
+ * @config {string} displayName the displayName of the action
+ * @config {string} action requied, the name of the action
+ * @param {object} modifiedData
+ * @param {array} pathToData
+ */
+const formatActions = (actions, modifiedData, pathToData) => {
+  return actions.map(action => {
+    const checkboxName = [...pathToData, action.action, 'properties', 'enabled'];
+    const checkboxValue = get(modifiedData, checkboxName, false);
+    const conditionValue = get(modifiedData, [...pathToData, action.action, 'conditions'], {});
+    const hasConditions = createArrayOfValues(conditionValue).some(val => val);
+
+    return {
+      ...action,
+      isDisplayed: checkboxValue,
+      checkboxName: checkboxName.join('..'),
+      hasSomeActionsSelected: checkboxValue,
+      value: checkboxValue,
+      hasConditions,
+      label: action.displayName,
+      actionId: action.action,
+      pathToConditionsObject: [...pathToData, action.action],
+    };
+  });
+};
+export default formatActions;

package/admin/src/components/Roles/PluginsAndSettings/SubCategory/utils/getConditionsButtonState.js

@@ -0,0 +1,17 @@
+import { createArrayOfValues } from '../../../utils';
+
+const getConditionsButtonState = valueObj => {
+  const relatedData = Object.entries(valueObj).reduce((acc, current) => {
+    const [catName, { conditions }] = current;
+
+    acc[catName] = conditions;
+
+    return acc;
+  }, {});
+
+  const arrayOfValues = createArrayOfValues(relatedData);
+
+  return arrayOfValues.some(val => val);
+};
+
+export default getConditionsButtonState;

package/admin/src/components/Roles/PluginsAndSettings/SubCategory/utils/index.js

@@ -0,0 +1,2 @@
+export { default as formatActions } from './formatActions';
+export { default as getConditionsButtonState } from './getConditionsButtonState';

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

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Padded } from '@buffetjs/core';
+import ListWrapper from './ListWrapper';
+import PermissionRow from './Row';
+
+const PluginsAndSettingsPermissions = ({ isFormDisabled, kind, layout }) => {
+  const [openedCategory, setOpenedCategory] = useState(null);
+
+  const handleOpenCategory = categoryName => {
+    setOpenedCategory(categoryName === openedCategory ? null : categoryName);
+  };
+
+  return (
+    <ListWrapper>
+      <Padded left right size="md">
+        {layout.map(({ category, categoryId, childrenForm }, index) => {
+          return (
+            <PermissionRow
+              key={category}
+              childrenForm={childrenForm}
+              kind={kind}
+              isFormDisabled={isFormDisabled}
+              isOpen={openedCategory === category}
+              isWhite={index % 2 === 1}
+              name={category}
+              onOpenCategory={handleOpenCategory}
+              pathToData={[kind, categoryId]}
+            />
+          );
+        })}
+      </Padded>
+    </ListWrapper>
+  );
+};
+
+PluginsAndSettingsPermissions.propTypes = {
+  isFormDisabled: PropTypes.bool.isRequired,
+  kind: PropTypes.string.isRequired,
+  layout: PropTypes.arrayOf(
+    PropTypes.shape({
+      category: PropTypes.string.isRequired,
+      categoryId: PropTypes.string.isRequired,
+      childrenForm: PropTypes.arrayOf(
+        PropTypes.shape({
+          actions: PropTypes.array.isRequired,
+        })
+      ).isRequired,
+    }).isRequired
+  ).isRequired,
+};
+
+export default PluginsAndSettingsPermissions;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Required = styled.span`
+  color: ${({ theme }) => theme.main.colors.red};
+  padding-left: 2px;
+`;
+
+const RequiredSign = () => <Required>*</Required>;
+
+export default RequiredSign;

package/admin/src/components/Roles/RoleForm/NameInput.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import SizedInput from '../../SizedInput';
+
+const NameInput = inputProps => <SizedInput name="name" type="text" {...inputProps} />;
+
+export default NameInput;

package/admin/src/components/Roles/RoleForm/RoleForm.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import NameInput from './NameInput';
+
+import FormCard from '../../FormBloc';
+import SizedInput from '../../SizedInput';
+import ButtonWithNumber from '../ButtonWithNumber';
+
+const RoleForm = ({ disabled, role, values, errors, onChange, onBlur, isLoading }) => {
+  const { formatMessage } = useIntl();
+
+  const actions = [
+    <ButtonWithNumber
+      number={role.usersCount}
+      onClick={() => console.log('Open user modal')}
+      key="user-button"
+    >
+      {formatMessage({
+        id: 'Settings.roles.form.button.users-with-role',
+        defaultMessage: 'Users with this role',
+      })}
+    </ButtonWithNumber>,
+  ];
+
+  return (
+    <FormCard
+      actions={actions}
+      isLoading={isLoading}
+      title={
+        /* eslint-disable indent */
+        role
+          ? role.name
+          : formatMessage({
+              id: 'Settings.roles.form.title',
+              defaultMessage: 'Details',
+            })
+      }
+      subtitle={
+        role
+          ? role.description
+          : formatMessage({
+              id: 'Settings.roles.form.description',
+              defaultMessage: 'Name and description of the role',
+            })
+      }
+      /* eslint-enable indent */
+    >
+      <NameInput
+        disabled={disabled}
+        label="Settings.roles.form.input.name"
+        defaultMessage="Name"
+        name="name"
+        type="text"
+        error={errors.name ? { id: errors.name } : null}
+        onBlur={onBlur}
+        value={values.name}
+        onChange={onChange}
+      />
+
+      <SizedInput
+        disabled={disabled}
+        label="Settings.roles.form.input.description"
+        defaultMessage="Description"
+        name="description"
+        type="textarea"
+        onBlur={onBlur}
+        value={values.description}
+        onChange={onChange}
+        // Override the default height of the textarea
+        style={{ height: 115 }}
+      />
+    </FormCard>
+  );
+};
+
+RoleForm.defaultProps = {
+  disabled: false,
+  isLoading: false,
+  role: null,
+  values: { name: '', description: '' },
+};
+RoleForm.propTypes = {
+  disabled: PropTypes.bool,
+  errors: PropTypes.object.isRequired,
+  isLoading: PropTypes.bool,
+  onBlur: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  role: PropTypes.object,
+  values: PropTypes.object,
+};
+
+export default RoleForm;

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

@@ -0,0 +1,2 @@
+export { default as NameInput } from './NameInput';
+export { default as RoleForm } from './RoleForm';