@akemona-org/strapi-admin 3.7.0

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

@@ -0,0 +1,176 @@
+import React, { memo, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+import { Flex, Text } from '@buffetjs/core';
+import styled from 'styled-components';
+import IS_DISABLED from 'ee_else_ce/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/utils/constants';
+import { usePermissionsDataManager } from '../../../../../hooks';
+import { getCheckboxState } from '../../../utils';
+import CheckboxWithCondition from '../../../CheckboxWithCondition';
+import Chevron from '../../../Chevron';
+import CollapseLabel from '../../../CollapseLabel';
+import Curve from '../../../Curve';
+import HiddenAction from '../../../HiddenAction';
+import RequiredSign from '../../../RequiredSign';
+import { RowStyle, RowWrapper } from './row';
+import { LeftBorderTimeline, TopTimeline } from './timeline';
+import Wrapper from './Wrapper';
+
+const SubLevelWrapper = styled.div`
+  padding-bottom: 8px;
+`;
+
+const SubActionRow = ({
+  childrenForm,
+  isFormDisabled,
+  recursiveLevel,
+  pathToDataFromActionRow,
+  propertyActions,
+  parentName,
+  propertyName,
+}) => {
+  const {
+    modifiedData,
+    onChangeParentCheckbox,
+    onChangeSimpleCheckbox,
+  } = usePermissionsDataManager();
+  const [rowToOpen, setRowToOpen] = useState(null);
+
+  const handleClickToggleSubLevel = name => {
+    setRowToOpen(prev => {
+      if (prev === name) {
+        return null;
+      }
+
+      return name;
+    });
+  };
+
+  const displayedRecursiveChildren = useMemo(() => {
+    if (!rowToOpen) {
+      return null;
+    }
+
+    return childrenForm.find(({ value }) => value === rowToOpen);
+  }, [rowToOpen, childrenForm]);
+
+  return (
+    <Wrapper>
+      <TopTimeline />
+      {childrenForm.map(({ label, value, required, children: subChildrenForm }, index) => {
+        const isVisible = index + 1 < childrenForm.length;
+        const isArrayType = Array.isArray(subChildrenForm);
+        const isSmall = isArrayType || index + 1 === childrenForm.length;
+        const isActive = rowToOpen === value;
+
+        return (
+          <LeftBorderTimeline key={value} isVisible={isVisible}>
+            <RowWrapper isSmall={isSmall}>
+              <Curve fill="#a5d5ff" />
+              <Flex style={{ flex: 1 }}>
+                <RowStyle level={recursiveLevel} isActive={isActive} isCollapsable={isArrayType}>
+                  <CollapseLabel
+                    alignItems="center"
+                    isCollapsable={isArrayType}
+                    onClick={() => {
+                      if (isArrayType) {
+                        handleClickToggleSubLevel(value);
+                      }
+                    }}
+                    title={label}
+                  >
+                    <Text
+                      color={isActive ? 'mediumBlue' : 'grey'}
+                      ellipsis
+                      fontSize="xs"
+                      fontWeight="bold"
+                      lineHeight="20px"
+                      textTransform="uppercase"
+                    >
+                      {label}
+                    </Text>
+                    {required && <RequiredSign />}
+                    <Chevron icon={isActive ? 'caret-up' : 'caret-down'} />
+                  </CollapseLabel>
+                </RowStyle>
+                <Flex style={{ flex: 1 }}>
+                  {propertyActions.map(({ actionId, label, isActionRelatedToCurrentProperty }) => {
+                    if (!isActionRelatedToCurrentProperty) {
+                      return <HiddenAction key={actionId} />;
+                    }
+                    /*
+                     * Usually we use a 'dot' in order to know the key path of an object for which we want to change the value.
+                     * Since an action and a subject are both separated by '.' or '::' we chose to use the '..' separators
+                     */
+                    const checkboxName = [
+                      ...pathToDataFromActionRow.split('..'),
+                      actionId,
+                      'properties',
+                      propertyName,
+                      ...parentName.split('..'),
+                      value,
+                    ];
+
+                    const checkboxValue = get(modifiedData, checkboxName, false);
+
+                    if (!subChildrenForm) {
+                      return (
+                        <CheckboxWithCondition
+                          key={label}
+                          disabled={isFormDisabled || IS_DISABLED}
+                          name={checkboxName.join('..')}
+                          onChange={onChangeSimpleCheckbox}
+                          value={checkboxValue}
+                        />
+                      );
+                    }
+
+                    const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(
+                      checkboxValue
+                    );
+
+                    return (
+                      <CheckboxWithCondition
+                        key={label}
+                        disabled={isFormDisabled || IS_DISABLED}
+                        name={checkboxName.join('..')}
+                        onChange={onChangeParentCheckbox}
+                        value={hasAllActionsSelected}
+                        someChecked={hasSomeActionsSelected}
+                      />
+                    );
+                  })}
+                </Flex>
+              </Flex>
+            </RowWrapper>
+            {displayedRecursiveChildren && isActive && (
+              <SubLevelWrapper>
+                <SubActionRow
+                  isFormDisabled={isFormDisabled}
+                  parentName={`${parentName}..${value}`}
+                  pathToDataFromActionRow={pathToDataFromActionRow}
+                  propertyActions={propertyActions}
+                  propertyName={propertyName}
+                  recursiveLevel={recursiveLevel + 1}
+                  childrenForm={displayedRecursiveChildren.children}
+                />
+              </SubLevelWrapper>
+            )}
+          </LeftBorderTimeline>
+        );
+      })}
+    </Wrapper>
+  );
+};
+
+SubActionRow.propTypes = {
+  childrenForm: PropTypes.array.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  parentName: PropTypes.string.isRequired,
+  pathToDataFromActionRow: PropTypes.string.isRequired,
+  propertyActions: PropTypes.array.isRequired,
+  propertyName: PropTypes.string.isRequired,
+  recursiveLevel: PropTypes.number.isRequired,
+};
+
+export default memo(SubActionRow);

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

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import { Flex } from '@buffetjs/core';
+import PropTypes from 'prop-types';
+import Chevron from '../../../Chevron';
+import { activeStyle } from '../../utils';
+
+const RowStyle = styled.div`
+  padding-left: ${({ theme }) => theme.main.sizes.paddings.xs};
+  width: ${({ level }) => 128 - level * 18}px;
+  ${Chevron} {
+    width: 13px;
+  }
+  ${({ isCollapsable, theme }) =>
+    isCollapsable &&
+    `
+    ${Chevron} {
+      display: block;
+      color: ${theme.main.colors.grey};
+    }
+    &:hover {
+      ${activeStyle(theme)}
+    }
+  `}
+  ${({ isActive, theme }) => isActive && activeStyle(theme)}}
+`;
+
+RowStyle.propTypes = {
+  isActive: PropTypes.bool.isRequired,
+  isCollapsable: PropTypes.bool.isRequired,
+  level: PropTypes.number.isRequired,
+};
+
+const RowWrapper = styled(Flex)`
+  height: ${({ isSmall }) => (isSmall ? '28px' : '36px')};
+`;
+
+export { RowStyle, RowWrapper };

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

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const LeftBorderTimeline = styled.div`
+  border-left: ${({ isVisible }) => (isVisible ? '3px solid #a5d5ff' : '3px solid transparent')};
+`;
+
+const TopTimeline = styled.div`
+  padding-top: 8px;
+  width: 3px;
+  background-color: #a5d5ff;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+`;
+
+export { LeftBorderTimeline, TopTimeline };

package/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/utils/constants.js

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

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

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  padding-top: 18px;
+  border: 1px solid ${({ theme }) => theme.main.colors.darkBlue};
+  border-top: none;
+  border-bottom: ${({ isLast, theme }) => {
+    if (isLast) {
+      return `1px solid ${theme.main.colors.darkBlue}`;
+    }
+
+    return `none`;
+  }};
+  border-radius: 0px 0px 2px 2px;
+`;
+
+Wrapper.defaultProps = {
+  isLast: true,
+};
+
+export default Wrapper;

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

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Padded } from '@buffetjs/core';
+import generateHeadersFromActions from './utils/generateHeadersFromActions';
+import Header from './Header';
+import ActionRow from './ActionRow';
+import Wrapper from './Wrapper';
+
+const CollapsePropertyMatrix = ({
+  availableActions,
+  childrenForm,
+  isLast,
+  isFormDisabled,
+  label,
+  pathToData,
+  propertyName,
+}) => {
+  const propertyActions = useMemo(
+    () => generateHeadersFromActions(availableActions, propertyName),
+    [availableActions, propertyName]
+  );
+
+  return (
+    <Wrapper isLast={isLast}>
+      <Header label={label} headers={propertyActions} />
+      <Padded left size="md">
+        {childrenForm.map(({ children: childrenForm, label, value, required }) => (
+          <ActionRow
+            childrenForm={childrenForm}
+            key={value}
+            label={label}
+            isFormDisabled={isFormDisabled}
+            name={value}
+            required={required}
+            propertyActions={propertyActions}
+            pathToData={pathToData}
+            propertyName={propertyName}
+          />
+        ))}
+      </Padded>
+    </Wrapper>
+  );
+};
+
+CollapsePropertyMatrix.propTypes = {
+  childrenForm: PropTypes.array.isRequired,
+  availableActions: PropTypes.array.isRequired,
+  isLast: PropTypes.bool.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  label: PropTypes.string.isRequired,
+  pathToData: PropTypes.string.isRequired,
+  propertyName: PropTypes.string.isRequired,
+};
+
+export default CollapsePropertyMatrix;

package/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/utils/generateHeadersFromActions.js

@@ -0,0 +1,12 @@
+const generateHeadersFromActions = (actions, propertyName) => {
+  return actions.map(action => {
+    const isActionRelatedToCurrentProperty =
+      Array.isArray(action.applyToProperties) &&
+      action.applyToProperties.indexOf(propertyName) !== -1 &&
+      action.isDisplayed;
+
+    return { label: action.label, actionId: action.actionId, isActionRelatedToCurrentProperty };
+  });
+};
+
+export default generateHeadersFromActions;

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

@@ -0,0 +1,17 @@
+/* eslint-disable indent */
+import styled from 'styled-components';
+import CollapsePropertyMatrix from './CollapsePropertyMatrix/Wrapper';
+
+const RowWrapper = styled.div`
+  ${({ withMargin }) =>
+    withMargin &&
+    `
+      margin: 9px 0;
+    `}
+
+  ${CollapsePropertyMatrix}:last-of-type {
+    padding-bottom: 17px;
+  }
+`;
+
+export default RowWrapper;

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

@@ -0,0 +1,72 @@
+import React, { useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import Collapse from './Collapse';
+import CollapsePropertyMatrix from './CollapsePropertyMatrix';
+import { getAvailableActions } from './utils';
+import Wrapper from './Wrapper';
+
+const ContentTypeCollapse = ({
+  allActions,
+  contentTypeName,
+  label,
+  index,
+  isActive,
+  isFormDisabled,
+  onClickToggleCollapse,
+  pathToData,
+  properties,
+}) => {
+  const handleClickToggleCollapse = useCallback(() => {
+    onClickToggleCollapse(contentTypeName);
+  }, [contentTypeName, onClickToggleCollapse]);
+
+  const availableActions = useMemo(() => {
+    return getAvailableActions(allActions, contentTypeName);
+  }, [allActions, contentTypeName]);
+
+  const isOdd = useMemo(() => index % 2 !== 0, [index]);
+
+  return (
+    <Wrapper withMargin={isOdd}>
+      <Collapse
+        availableActions={availableActions}
+        isActive={isActive}
+        isGrey={index % 2 === 0}
+        isFormDisabled={isFormDisabled}
+        label={label}
+        onClickToggle={handleClickToggleCollapse}
+        pathToData={pathToData}
+      />
+      {isActive &&
+        properties.map(({ label, value, children: childrenForm }, i) => {
+          return (
+            <CollapsePropertyMatrix
+              availableActions={availableActions}
+              childrenForm={childrenForm}
+              isFormDisabled={isFormDisabled}
+              label={label}
+              pathToData={pathToData}
+              propertyName={value}
+              key={value}
+              isLast={i === properties.length - 1}
+              isOdd={isOdd}
+            />
+          );
+        })}
+    </Wrapper>
+  );
+};
+
+ContentTypeCollapse.propTypes = {
+  allActions: PropTypes.array.isRequired,
+  contentTypeName: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  isActive: PropTypes.bool.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  label: PropTypes.string.isRequired,
+  onClickToggleCollapse: PropTypes.func.isRequired,
+  pathToData: PropTypes.string.isRequired,
+  properties: PropTypes.array.isRequired,
+};
+
+export default ContentTypeCollapse;

package/admin/src/components/Roles/ContentTypeCollapse/utils/activeStyle.js

@@ -0,0 +1,15 @@
+import { Text } from '@buffetjs/core';
+import Chevron from '../../Chevron';
+
+const activeStyle = theme => `
+  color: ${theme.main.colors.mediumBlue};
+  ${Text} {
+    color: ${theme.main.colors.mediumBlue};
+  }
+  ${Chevron} {
+    display: block;
+    color: ${theme.main.colors.mediumBlue};
+  }
+`;
+
+export default activeStyle;

package/admin/src/components/Roles/ContentTypeCollapse/utils/getAvailableActions.js

@@ -0,0 +1,10 @@
+const getAvailableActions = (actions, targetSubject) => {
+  return actions.map(action => {
+    const isDisplayed =
+      Array.isArray(action.subjects) && action.subjects.indexOf(targetSubject) !== -1;
+
+    return { ...action, isDisplayed };
+  });
+};
+
+export default getAvailableActions;

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

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

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

@@ -0,0 +1,50 @@
+import React, { memo, useState } from 'react';
+import PropTypes from 'prop-types';
+import ContentTypeCollapse from '../ContentTypeCollapse';
+
+const ContentTypeCollapses = ({ actions, isFormDisabled, pathToData, subjects }) => {
+  const [collapseToOpen, setCollapseToOpen] = useState(null);
+
+  const handleClickToggleCollapse = collapseName => {
+    const nextCollapseToOpen = collapseToOpen === collapseName ? null : collapseName;
+
+    setCollapseToOpen(nextCollapseToOpen);
+  };
+
+  return subjects.map(({ uid, label, properties }, index) => {
+    return (
+      <ContentTypeCollapse
+        allActions={actions}
+        key={uid}
+        contentTypeName={uid}
+        label={label}
+        isActive={collapseToOpen === uid}
+        isFormDisabled={isFormDisabled}
+        index={index}
+        onClickToggleCollapse={handleClickToggleCollapse}
+        pathToData={`${pathToData}..${uid}`}
+        properties={properties}
+      />
+    );
+  });
+};
+
+ContentTypeCollapses.defaultProps = {
+  actions: [],
+  subjects: [],
+};
+
+ContentTypeCollapses.propTypes = {
+  actions: PropTypes.array.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  pathToData: PropTypes.string.isRequired,
+  subjects: PropTypes.arrayOf(
+    PropTypes.shape({
+      uid: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      properties: PropTypes.array.isRequired,
+    })
+  ),
+};
+
+export default memo(ContentTypeCollapses);

package/admin/src/components/Roles/ContentTypes/Wrapper.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  background-color: ${({ theme }) => theme.main.colors.white};
+  overflow: auto;
+  border-bottom-left-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  border-bottom-right-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  ::-webkit-scrollbar {
+    height: 10px;
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,39 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { Padded } from '@buffetjs/core';
+import ContentTypeCollapses from '../ContentTypeCollapses';
+import GlobalActions from '../GlobalActions';
+import Wrapper from './Wrapper';
+
+const ContentTypes = ({ isFormDisabled, kind, layout: { actions, subjects } }) => {
+  return (
+    <Wrapper>
+      <Padded left right bottom size="md">
+        <GlobalActions actions={actions} kind={kind} isFormDisabled={isFormDisabled} />
+        <ContentTypeCollapses
+          actions={actions}
+          isFormDisabled={isFormDisabled}
+          pathToData={kind}
+          subjects={subjects}
+        />
+      </Padded>
+    </Wrapper>
+  );
+};
+
+ContentTypes.propTypes = {
+  isFormDisabled: PropTypes.bool.isRequired,
+  kind: PropTypes.string.isRequired,
+  layout: PropTypes.shape({
+    actions: PropTypes.array,
+    subjects: PropTypes.arrayOf(
+      PropTypes.shape({
+        uid: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired,
+        properties: PropTypes.array.isRequired,
+      })
+    ),
+  }).isRequired,
+};
+
+export default memo(ContentTypes);

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

@@ -0,0 +1,35 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+
+const Curve = props => (
+  <svg
+    style={{
+      height: '14px',
+      transform: 'translate(-3.2px, -1px)',
+      position: 'relative',
+    }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 21.08 21"
+    {...props}
+  >
+    <g>
+      <path
+        d="M2.58 2.5q-1.2 16 16 16"
+        fill="none"
+        stroke={props.fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="5"
+      />
+    </g>
+  </svg>
+);
+
+Curve.defaultProps = {
+  fill: '#f3f4f4',
+};
+Curve.propTypes = {
+  fill: PropTypes.string,
+};
+
+export default memo(Curve);

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Flex, Padded, Text } from '@buffetjs/core';
+import { useIntl } from 'react-intl';
+import { BaselineAlignment, useQuery } from 'strapi-helper-plugin';
+
+const EmptyRole = () => {
+  const { formatMessage } = useIntl();
+  const query = useQuery();
+  const search = query.get('_q');
+
+  return (
+    <>
+      <BaselineAlignment top size="2px" />
+      <Padded top bottom size="md">
+        <Flex justifyContent="center">
+          <Text fontSize="lg" fontWeight="bold">
+            {formatMessage(
+              {
+                id: 'Roles.components.List.empty.withSearch',
+                defaultMessage: 'There is no role corresponding to the search ({search})...',
+              },
+              { search }
+            )}
+          </Text>
+        </Flex>
+      </Padded>
+    </>
+  );
+};
+
+export default EmptyRole;

package/admin/src/components/Roles/GlobalActions/Wrapper.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  padding-left: 165px;
+  padding-bottom: 25px;
+  padding-top: 26px;
+  ${({ disabled, theme }) =>
+    `
+    input[type='checkbox'] {
+      &:after {
+        color: ${!disabled ? theme.main.colors.mediumBlue : theme.main.colors.grey};
+      }
+    }
+    cursor: initial;
+    `}
+`;
+
+export default Wrapper;