@akemona-org/strapi-admin 3.7.0

package/admin/src/components/Roles/ConditionsModal/ConditionsSelect/MenuList/UpperFirst.js

@@ -0,0 +1,6 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { upperFirst } from 'lodash';
+
+const UpperFirst = ({ content }) => upperFirst(content);
+
+export default UpperFirst;

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

@@ -0,0 +1,140 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { components } from 'react-select';
+import { get } from 'lodash';
+import { Checkbox, Flex } from '@buffetjs/core';
+import { Label } from '@buffetjs/styles';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import IS_DISABLED from 'ee_else_ce/components/Roles/ConditionsModal/ConditionsSelect/MenuList/utils/constants';
+import { getCheckboxState } from '../../../utils';
+import createCollapsesObject from './utils/createCollapsesObject';
+import SubUl from './SubUl';
+import Ul from './Ul';
+import UpperFirst from './UpperFirst';
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+const MenuList = ({ selectProps, ...rest }) => {
+  const Component = components.MenuList;
+  const { arrayOfOptionsGroupedByCategory } = selectProps;
+
+  const initCollapses = useMemo(() => createCollapsesObject(arrayOfOptionsGroupedByCategory), [
+    arrayOfOptionsGroupedByCategory,
+  ]);
+  const [collapses, setCollapses] = useState(initCollapses);
+
+  const toggleCollapse = collapseName => {
+    setCollapses(prevState => ({ ...prevState, [collapseName]: !collapses[collapseName] }));
+  };
+
+  return (
+    <Component {...rest}>
+      <Ul disabled={IS_DISABLED}>
+        {arrayOfOptionsGroupedByCategory.map((category, index) => {
+          const [categoryName, conditions] = category;
+          const checkboxName = `${selectProps.name}..${categoryName}`;
+
+          const {
+            hasAllActionsSelected: hasAllConditionsSelected,
+            hasSomeActionsSelected: hasSomeConditionsSelected,
+          } = getCheckboxState(selectProps.value);
+
+          return (
+            <li key={categoryName}>
+              <div>
+                <Flex justifyContent="space-between">
+                  <Label
+                    htmlFor="overrideReactSelectBehavior"
+                    onClick={() => {
+                      if (!IS_DISABLED) {
+                        selectProps.onCategoryChange({
+                          keys: [selectProps.name, categoryName],
+                          value: !hasAllConditionsSelected,
+                        });
+                      }
+                    }}
+                  >
+                    <Flex>
+                      <Checkbox
+                        disabled={IS_DISABLED}
+                        id="checkCategory"
+                        name={checkboxName}
+                        onChange={() => {}}
+                        someChecked={hasSomeConditionsSelected}
+                        value={hasAllConditionsSelected}
+                      />
+                      <UpperFirst content={categoryName} />
+                    </Flex>
+                  </Label>
+                  <div
+                    style={{ flex: 1, textAlign: 'end', cursor: 'pointer' }}
+                    onClick={() => toggleCollapse(categoryName)}
+                  >
+                    <FontAwesomeIcon
+                      style={{
+                        margin: 'auto',
+                        fontSize: '11px',
+                        color: '#919bae',
+                      }}
+                      icon={collapses[categoryName] ? 'chevron-up' : 'chevron-down'}
+                    />
+                  </div>
+                </Flex>
+              </div>
+              <SubUl tag="ul" isOpen={collapses[categoryName]}>
+                {conditions.map(condition => {
+                  const checkboxValue = get(selectProps.value, [categoryName, condition.id], false);
+
+                  return (
+                    <li key={condition.id}>
+                      <Flex>
+                        <Label
+                          htmlFor={condition.id}
+                          message={condition.displayName}
+                          onClick={() => {
+                            if (!IS_DISABLED) {
+                              selectProps.onChange({
+                                keys: [selectProps.name, categoryName, condition.id],
+                                value: !checkboxValue,
+                              });
+                            }
+                          }}
+                        >
+                          <Flex>
+                            <Checkbox
+                              id="check"
+                              name={condition.id}
+                              // Remove the handler
+                              onChange={() => {}}
+                              value={checkboxValue}
+                            />
+                            {condition.displayName}
+                          </Flex>
+                        </Label>
+                      </Flex>
+                    </li>
+                  );
+                })}
+              </SubUl>
+              {index + 1 < arrayOfOptionsGroupedByCategory.length.length && (
+                <div style={{ paddingTop: '17px' }} />
+              )}
+            </li>
+          );
+        })}
+      </Ul>
+    </Component>
+  );
+};
+
+MenuList.propTypes = {
+  selectProps: PropTypes.shape({
+    arrayOfOptionsGroupedByCategory: PropTypes.array.isRequired,
+    name: PropTypes.string.isRequired,
+    onCategoryChange: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
+    value: PropTypes.object.isRequired,
+  }).isRequired,
+};
+export default MenuList;

package/admin/src/components/Roles/ConditionsModal/ConditionsSelect/MenuList/utils/constants.js

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

package/admin/src/components/Roles/ConditionsModal/ConditionsSelect/MenuList/utils/createCollapsesObject.js

@@ -0,0 +1,14 @@
+/**
+ * Creates an object with keys corresponding to the categoryName and leafs to false except for the first category
+ *
+ * @param {array<array>} arrayOfCategories
+ * @returns {object}
+ */
+const createCollapsesObject = arrayOfCategories =>
+  arrayOfCategories.reduce((acc, current, index) => {
+    acc[current[0]] = index === 0;
+
+    return acc;
+  }, {});
+
+export default createCollapsesObject;

package/admin/src/components/Roles/ConditionsModal/ConditionsSelect/SingleValue.js

@@ -0,0 +1,46 @@
+/* eslint-disable indent */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { components } from 'react-select';
+import { Text } from '@buffetjs/core';
+import { useIntl } from 'react-intl';
+import { createArrayOfValues } from '../../utils';
+
+const Value = ({ children, selectProps, ...props }) => {
+  const { formatMessage } = useIntl();
+  const SingleValue = components.SingleValue;
+  const valuesArray = createArrayOfValues(selectProps.value).filter(val => val);
+
+  return (
+    <SingleValue {...props}>
+      <Text style={{ paddingTop: 1 }}>
+        {valuesArray.length === 0
+          ? formatMessage({ id: 'Settings.permissions.conditions.none-selected' })
+          : formatMessage(
+              {
+                id: `Settings.permissions.conditions.selected.${
+                  selectProps.value.length > 1 ? 'plural' : 'singular'
+                }`,
+              },
+              { number: valuesArray.length }
+            )}
+      </Text>
+    </SingleValue>
+  );
+};
+
+Value.defaultProps = {
+  children: null,
+  selectProps: {
+    value: [],
+  },
+};
+
+Value.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  selectProps: PropTypes.shape({
+    value: PropTypes.object,
+  }),
+};
+
+export default Value;

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Select from 'react-select';
+import { useIntl } from 'react-intl';
+import MenuList from './MenuList';
+import ClearIndicator from './ClearIndicator';
+import DropdownIndicator from './CustomDropdownIndicator';
+import IndicatorSeparator from './IndicatorSeparator';
+import SingleValue from './SingleValue';
+import selectStyle from '../utils/selectStyle';
+
+const Wrapper = styled.div`
+  padding-left: ${({ theme }) => theme.main.sizes.paddings.md};
+  width: 60%;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};
+`;
+
+const ConditionsSelect = ({
+  arrayOfOptionsGroupedByCategory,
+  isFormDisabled,
+  name,
+  onCategoryChange,
+  onChange,
+  value,
+}) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Wrapper disabled={isFormDisabled}>
+      <Select
+        components={{
+          ClearIndicator,
+          DropdownIndicator,
+          IndicatorSeparator,
+          SingleValue,
+          MenuList,
+        }}
+        arrayOfOptionsGroupedByCategory={arrayOfOptionsGroupedByCategory}
+        isDisabled={isFormDisabled}
+        name={name}
+        onChange={onChange}
+        isClearable={false}
+        isLoading={false}
+        closeMenuOnSelect={false}
+        isSearchable={false}
+        hideSelectedOptions={false}
+        placeholder={formatMessage({ id: 'Settings.permissions.conditions.anytime' })}
+        onCategoryChange={onCategoryChange}
+        options={[]}
+        styles={selectStyle}
+        value={value}
+      />
+    </Wrapper>
+  );
+};
+
+ConditionsSelect.propTypes = {
+  arrayOfOptionsGroupedByCategory: PropTypes.array.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  name: PropTypes.string.isRequired,
+  onCategoryChange: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.object.isRequired,
+};
+
+export default ConditionsSelect;

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

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

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

@@ -0,0 +1,150 @@
+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/ConditionsModal/utils/createDefaultConditionsForm.js

@@ -0,0 +1,47 @@
+import { get } from 'lodash';
+
+const createConditionsForm = (conditions, valueObject) => {
+  return conditions.reduce((acc, current) => {
+    acc[current.id] = get(valueObject, current.id, false);
+
+    return acc;
+  }, {});
+};
+
+const createCategoryForm = (arrayOfOptions, valueObject) => {
+  return arrayOfOptions.reduce((acc, current) => {
+    const [categoryName, relatedConditions] = current;
+
+    const conditionsForm = createConditionsForm(relatedConditions, valueObject);
+
+    acc[categoryName] = conditionsForm;
+
+    return acc;
+  }, {});
+};
+
+const createDefaultConditionsForm = (
+  actionsToDisplay,
+  modifiedData,
+  arrayOfOptionsGroupedByCategory
+) => {
+  return actionsToDisplay.reduce((acc, current) => {
+    const valueFromModifiedData = get(
+      modifiedData,
+      [...current.pathToConditionsObject, 'conditions'],
+      {}
+    );
+
+    const categoryDefaultForm = createCategoryForm(
+      arrayOfOptionsGroupedByCategory,
+      valueFromModifiedData
+    );
+
+    acc[current.pathToConditionsObject.join('..')] = categoryDefaultForm;
+
+    return acc;
+  }, {});
+};
+
+export default createDefaultConditionsForm;
+export { createConditionsForm, createCategoryForm };

package/admin/src/components/Roles/ConditionsModal/utils/selectStyle.js

@@ -0,0 +1,95 @@
+/* eslint-disable indent */
+/* eslint-disable no-nested-ternary */
+
+const selectStyle = {
+  container: base => ({
+    ...base,
+    width: '70%',
+    alignItems: 'center',
+    height: '36px',
+  }),
+  menu: base => ({
+    ...base,
+    margin: '0',
+    paddingTop: 0,
+    borderRadius: '2px !important',
+    borderTopLeftRadius: '0 !important',
+    borderTopRightRadius: '0 !important',
+    border: '1px solid #78caff !important',
+    boxShadow: 0,
+    borderTop: '0 !important',
+    fontSize: '13px',
+  }),
+  menuList: base => ({
+    ...base,
+    paddingBottom: 9,
+    paddingTop: 10,
+  }),
+  multiValue: base => ({
+    ...base,
+    backgroundColor: 'none',
+    color: '#333740',
+  }),
+  multiValueLabel: base => ({
+    ...base,
+    fontSize: '13px',
+  }),
+  multiValueRemove: base => ({
+    ...base,
+    display: 'none',
+  }),
+
+  control: (base, state) => {
+    const borderRadiusStyle = state.selectProps.menuIsOpen
+      ? {
+          borderBottomLeftRadius: '0 !important',
+          borderBottomRightRadius: '0 !important',
+        }
+      : {};
+
+    const {
+      selectProps: { error, value },
+    } = state;
+
+    let border;
+    let borderBottom;
+
+    if (state.isFocused) {
+      border = '1px solid #78caff !important';
+    } else if (error && !value.length) {
+      border = '1px solid #f64d0a !important';
+    } else {
+      border = '1px solid #e3e9f3 !important';
+    }
+
+    if (state.menuIsOpen === true) {
+      borderBottom = '1px solid #e3e9f3 !important';
+    }
+
+    return {
+      ...base,
+      fontSize: 13,
+      minHeight: 34,
+      top: '1px',
+      border,
+      outline: 0,
+      boxShadow: 0,
+      borderRadius: '2px !important',
+      ...borderRadiusStyle,
+      borderBottom,
+    };
+  },
+  valueContainer: base => ({
+    ...base,
+    padding: '2px 4px 4px 10px',
+    lineHeight: '18px',
+    minWidth: 200,
+  }),
+  placeholder: base => ({
+    ...base,
+    paddingTop: 1,
+    color: 'black',
+  }),
+};
+
+export default selectStyle;

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

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