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

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { Row } from '@strapi/parts/Row';
+import { TableLabel } from '@strapi/parts/Text';
+import { cellWidth, firstRowWidth, rowHeight } from '../../../Permissions/utils/constants';
+
+const HeaderLabel = styled(Row)`
+  width: ${cellWidth};
+  flex-shrink: 0;
+`;
+const PropertyLabelWrapper = styled(Row)`
+  width: ${firstRowWidth};
+  height: ${rowHeight};
+  flex-shrink: 0;
+`;
+
+const Header = ({ headers, label }) => {
+  const { formatMessage } = useIntl();
+  const translatedLabel = formatMessage(
+    {
+      id: 'Settings.roles.form.permission.property-label',
+      defaultMessage: '{label} permissions',
+    },
+    { label }
+  );
+
+  return (
+    <Row>
+      <PropertyLabelWrapper alignItems="center" paddingLeft={6}>
+        <TableLabel textColor="neutral500">{translatedLabel}</TableLabel>
+      </PropertyLabelWrapper>
+      {headers.map(header => {
+        if (!header.isActionRelatedToCurrentProperty) {
+          return <HeaderLabel key={header.label} />;
+        }
+
+        return (
+          <HeaderLabel justifyContent="center" key={header.label}>
+            <TableLabel textColor="neutral500">
+              {formatMessage({
+                id: `Settings.roles.form.permissions.${header.label.toLowerCase()}`,
+                defaultMessage: header.label,
+              })}
+            </TableLabel>
+          </HeaderLabel>
+        );
+      })}
+    </Row>
+  );
+};
+
+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/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js

@@ -0,0 +1,249 @@
+import React, { memo, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import get from 'lodash/get';
+import upperFirst from 'lodash/upperFirst';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
+import { Box } from '@strapi/parts/Box';
+import { Row } from '@strapi/parts/Row';
+import { Text } from '@strapi/parts/Text';
+import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/utils/constants';
+import { usePermissionsDataManager } from '../../../../../../../../../hooks';
+import CollapseLabel from '../../../CollapseLabel';
+import Curve from '../../../Curve';
+import HiddenAction from '../../../HiddenAction';
+import { cellWidth, rowHeight } from '../../../Permissions/utils/constants';
+import RequiredSign from '../../../RequiredSign';
+import { getCheckboxState } from '../../../utils';
+import { activeStyle } from '../../utils';
+import CarretIcon from '../CarretIcon';
+
+const Cell = styled(Row)`
+  width: ${cellWidth};
+  position: relative;
+`;
+
+const RowWrapper = styled(Row)`
+  height: ${rowHeight};
+`;
+
+const Wrapper = styled(Box)`
+  padding-left: ${31 / 16}rem;
+`;
+
+const LeftBorderTimeline = styled(Box)`
+  border-left: ${({ isVisible, theme }) =>
+    isVisible ? `4px solid ${theme.colors.primary200}` : '4px solid transparent'};
+`;
+
+const RowStyle = styled(Row)`
+  padding-left: ${({ theme }) => theme.spaces[4]};
+  width: ${({ level }) => 145 - level * 36}px;
+
+  ${({ isCollapsable, theme }) =>
+    isCollapsable &&
+    `
+      ${CarretIcon} {
+        display: block;
+        color: ${theme.colors.neutral100};
+      }
+      &:hover {
+        ${activeStyle(theme)}
+      }
+  `}
+  ${({ isActive, theme }) => isActive && activeStyle(theme)};
+`;
+
+const TopTimeline = styled.div`
+  padding-top: ${({ theme }) => theme.spaces[2]};
+  margin-top: ${({ theme }) => theme.spaces[2]};
+  width: ${4 / 16}rem;
+  background-color: ${({ theme }) => theme.colors.primary200};
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+`;
+
+const SubActionRow = ({
+  childrenForm,
+  isFormDisabled,
+  recursiveLevel,
+  pathToDataFromActionRow,
+  propertyActions,
+  parentName,
+  propertyName,
+}) => {
+  const { formatMessage } = useIntl();
+  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 isActive = rowToOpen === value;
+
+        return (
+          <LeftBorderTimeline key={value} isVisible={isVisible}>
+            <RowWrapper>
+              <Curve color="primary200" />
+              <Row style={{ flex: 1 }}>
+                <RowStyle level={recursiveLevel} isActive={isActive} isCollapsable={isArrayType}>
+                  <CollapseLabel
+                    alignItems="center"
+                    isCollapsable={isArrayType}
+                    {...(isArrayType && {
+                      onClick: () => handleClickToggleSubLevel(value),
+                      'aria-expanded': isActive,
+                      onKeyDown: ({ key }) =>
+                        (key === 'Enter' || key === ' ') && handleClickToggleSubLevel(value),
+                      tabIndex: 0,
+                      role: 'button',
+                    })}
+                    title={label}
+                  >
+                    <Text ellipsis>{upperFirst(label)}</Text>
+                    {required && <RequiredSign />}
+                    <CarretIcon $isActive={isActive} />
+                  </CollapseLabel>
+                </RowStyle>
+                <Row style={{ flex: 1 }}>
+                  {propertyActions.map(
+                    ({ actionId, label: propertyLabel, 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 (
+                          <Cell key={propertyLabel} justifyContent="center" alignItems="center">
+                            <BaseCheckbox
+                              disabled={isFormDisabled || IS_DISABLED}
+                              name={checkboxName.join('..')}
+                              aria-label={formatMessage(
+                                {
+                                  id: `Settings.permissions.select-by-permission`,
+                                  defaultMessage: 'Select {label} permission',
+                                },
+                                { label: `${parentName} ${label} ${propertyLabel}` }
+                              )}
+                              // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
+                              onValueChange={value => {
+                                onChangeSimpleCheckbox({
+                                  target: {
+                                    name: checkboxName.join('..'),
+                                    value,
+                                  },
+                                });
+                              }}
+                              value={checkboxValue}
+                            />
+                          </Cell>
+                        );
+                      }
+
+                      const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(
+                        checkboxValue
+                      );
+
+                      return (
+                        <Cell key={propertyLabel} justifyContent="center" alignItems="center">
+                          <BaseCheckbox
+                            key={propertyLabel}
+                            disabled={isFormDisabled || IS_DISABLED}
+                            name={checkboxName.join('..')}
+                            aria-label={formatMessage(
+                              {
+                                id: `Settings.permissions.select-by-permission`,
+                                defaultMessage: 'Select {label} permission',
+                              },
+                              { label: `${parentName} ${label} ${propertyLabel}` }
+                            )}
+                            // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
+                            onValueChange={value => {
+                              onChangeParentCheckbox({
+                                target: {
+                                  name: checkboxName.join('..'),
+                                  value,
+                                },
+                              });
+                            }}
+                            value={hasAllActionsSelected}
+                            indeterminate={hasSomeActionsSelected}
+                          />
+                        </Cell>
+                      );
+                    }
+                  )}
+                </Row>
+              </Row>
+            </RowWrapper>
+            {displayedRecursiveChildren && isActive && (
+              <Box paddingBottom={2}>
+                <SubActionRow
+                  isFormDisabled={isFormDisabled}
+                  parentName={`${parentName}..${value}`}
+                  pathToDataFromActionRow={pathToDataFromActionRow}
+                  propertyActions={propertyActions}
+                  propertyName={propertyName}
+                  recursiveLevel={recursiveLevel + 1}
+                  childrenForm={displayedRecursiveChildren.children}
+                />
+              </Box>
+            )}
+          </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/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/index.js

@@ -0,0 +1,60 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Box } from '@strapi/parts/Box';
+import generateHeadersFromActions from './utils/generateHeadersFromActions';
+import Header from './Header';
+import ActionRow from './ActionRow';
+
+const Wrapper = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 0;
+`;
+
+const CollapsePropertyMatrix = ({
+  availableActions,
+  childrenForm,
+  isFormDisabled,
+  label,
+  pathToData,
+  propertyName,
+}) => {
+  const propertyActions = useMemo(
+    () => generateHeadersFromActions(availableActions, propertyName),
+    [availableActions, propertyName]
+  );
+
+  return (
+    <Wrapper>
+      <Header label={label} headers={propertyActions} />
+      <Box>
+        {childrenForm.map(({ children: childrenForm, label, value, required }, i) => (
+          <ActionRow
+            childrenForm={childrenForm}
+            key={value}
+            label={label}
+            isFormDisabled={isFormDisabled}
+            name={value}
+            required={required}
+            propertyActions={propertyActions}
+            pathToData={pathToData}
+            propertyName={propertyName}
+            isOdd={i % 2 === 0}
+          />
+        ))}
+      </Box>
+    </Wrapper>
+  );
+};
+
+CollapsePropertyMatrix.propTypes = {
+  childrenForm: PropTypes.array.isRequired,
+  availableActions: PropTypes.array.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  label: PropTypes.string.isRequired,
+  pathToData: PropTypes.string.isRequired,
+  propertyName: PropTypes.string.isRequired,
+};
+
+export default CollapsePropertyMatrix;

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/index.js

@@ -0,0 +1,75 @@
+import PropTypes from 'prop-types';
+import React, { useCallback, useMemo } from 'react';
+import styled from 'styled-components';
+import Collapse from './Collapse';
+import CollapsePropertyMatrix from './CollapsePropertyMatrix';
+import { getAvailableActions } from './utils';
+
+const Wrapper = styled.div`
+  flex-direction: column;
+  display: inline-flex;
+  min-width: 100%;
+  ${({ theme, isActive }) => isActive && `border: 1px solid ${theme.colors.primary600};`}
+`;
+
+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]);
+
+  return (
+    <Wrapper isActive={isActive}>
+      <Collapse
+        availableActions={availableActions}
+        isActive={isActive}
+        isGrey={index % 2 === 0}
+        isFormDisabled={isFormDisabled}
+        label={label}
+        onClickToggle={handleClickToggleCollapse}
+        pathToData={pathToData}
+      />
+      {isActive &&
+        properties.map(({ label: propertyLabel, value, children: childrenForm }) => {
+          return (
+            <CollapsePropertyMatrix
+              availableActions={availableActions}
+              childrenForm={childrenForm}
+              isFormDisabled={isFormDisabled}
+              label={propertyLabel}
+              pathToData={pathToData}
+              propertyName={value}
+              key={value}
+            />
+          );
+        })}
+    </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/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/utils/activeStyle.js

@@ -0,0 +1,15 @@
+import { Text } from '@strapi/parts/Text';
+import CarretIcon from '../CollapsePropertyMatrix/CarretIcon';
+
+const activeStyle = theme => `
+  ${Text} {
+    color: ${theme.colors.primary600};
+    font-weight: bold;
+  }
+  ${CarretIcon} {
+    display: block;
+    color: ${theme.colors.primary600};
+  }
+`;
+
+export default activeStyle;

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypes/index.js

@@ -0,0 +1,44 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '@strapi/parts/Box';
+import styled from 'styled-components';
+import sortBy from 'lodash/sortBy';
+import ContentTypeCollapses from '../ContentTypeCollapses';
+import GlobalActions from '../GlobalActions';
+
+const StyledBox = styled(Box)`
+  overflow-x: auto;
+`;
+
+const ContentTypes = ({ isFormDisabled, kind, layout: { actions, subjects } }) => {
+  const sortedSubjects = sortBy([...subjects], 'label');
+
+  return (
+    <StyledBox background="neutral0">
+      <GlobalActions actions={actions} kind={kind} isFormDisabled={isFormDisabled} />
+      <ContentTypeCollapses
+        actions={actions}
+        isFormDisabled={isFormDisabled}
+        pathToData={kind}
+        subjects={sortedSubjects}
+      />
+    </StyledBox>
+  );
+};
+
+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/pages/SettingsPage/pages/Roles/EditPage/components/Curve/index.js

@@ -0,0 +1,55 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Box } from '@strapi/parts/Box';
+
+const StyledBox = styled(Box)`
+  transform: translate(-4px, -12px);
+
+  &:before {
+    content: '';
+    width: ${4 / 16}rem;
+    height: ${12 / 16}rem;
+    background: ${({ theme }) => theme.colors.primary200};
+    display: block;
+  }
+`;
+
+const Svg = styled.svg`
+  position: relative;
+  flex-shrink: 0;
+  transform: translate(-0.5px, -1px);
+
+  * {
+    fill: ${({ theme, color }) => theme.colors[color]};
+  }
+`;
+
+const Curve = props => (
+  <StyledBox>
+    <Svg
+      width="20"
+      height="23"
+      viewBox="0 0 20 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.02477 14.7513C8.65865 17.0594 11.6046 18.6059 17.5596 18.8856C18.6836 18.9384 19.5976 19.8435 19.5976 20.9688V20.9688C19.5976 22.0941 18.6841 23.0125 17.5599 22.9643C10.9409 22.6805 6.454 20.9387 3.75496 17.1258C0.937988 13.1464 0.486328 7.39309 0.486328 0.593262H4.50974C4.50974 7.54693 5.06394 11.9813 7.02477 14.7513Z"
+        fill="#D9D8FF"
+      />
+    </Svg>
+  </StyledBox>
+);
+
+Curve.defaultProps = {
+  fill: 'primary200',
+};
+Curve.propTypes = {
+  fill: PropTypes.string,
+};
+
+export default memo(Curve);

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/GlobalActions/index.js

@@ -0,0 +1,91 @@
+import React, { memo, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
+import { Box } from '@strapi/parts/Box';
+import { Stack } from '@strapi/parts/Stack';
+import { TableLabel } from '@strapi/parts/Text';
+import styled from 'styled-components';
+import get from 'lodash/get';
+import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/GlobalActions/utils/constants';
+import { useIntl } from 'react-intl';
+import { usePermissionsDataManager } from '../../../../../../../hooks';
+import { cellWidth, firstRowWidth } from '../Permissions/utils/constants';
+import { findDisplayedActions, getCheckboxesState } from './utils';
+
+const CenteredStack = styled(Stack)`
+  align-items: center;
+  justify-content: center;
+  width: ${cellWidth};
+  flex-shrink: 0;
+`;
+
+const GlobalActions = ({ actions, isFormDisabled, kind }) => {
+  const { formatMessage } = useIntl();
+  const { modifiedData, onChangeCollectionTypeGlobalActionCheckbox } = usePermissionsDataManager();
+
+  const displayedActions = useMemo(() => {
+    return findDisplayedActions(actions);
+  }, [actions]);
+
+  const checkboxesState = useMemo(() => {
+    return getCheckboxesState(displayedActions, modifiedData[kind]);
+  }, [modifiedData, displayedActions, kind]);
+
+  return (
+    <Box paddingBottom={4} paddingTop={6} style={{ paddingLeft: firstRowWidth }}>
+      <Stack horizontal size={0}>
+        {displayedActions.map(({ label, actionId }) => {
+          return (
+            <CenteredStack key={actionId} size={3}>
+              <TableLabel textColor="neutral500">
+                {formatMessage({
+                  id: `Settings.roles.form.permissions.${label.toLowerCase()}`,
+                  defaultMessage: label,
+                })}
+              </TableLabel>
+              <BaseCheckbox
+                disabled={isFormDisabled || IS_DISABLED}
+                onValueChange={value => {
+                  onChangeCollectionTypeGlobalActionCheckbox(kind, actionId, value);
+                }}
+                name={actionId}
+                aria-label={formatMessage(
+                  {
+                    id: `Settings.permissions.select-all-by-permission`,
+                    defaultMessage: 'Select all {label} permissions',
+                  },
+                  {
+                    label: formatMessage({
+                      id: `Settings.roles.form.permissions.${label.toLowerCase()}`,
+                      defaultMessage: label,
+                    }),
+                  }
+                )}
+                value={get(checkboxesState, [actionId, 'hasAllActionsSelected'], false)}
+                indeterminate={get(checkboxesState, [actionId, 'hasSomeActionsSelected'], false)}
+              />
+            </CenteredStack>
+          );
+        })}
+      </Stack>
+    </Box>
+  );
+};
+
+GlobalActions.defaultProps = {
+  actions: [],
+};
+
+GlobalActions.propTypes = {
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      actionId: PropTypes.string.isRequired,
+      subjects: PropTypes.array.isRequired,
+    })
+  ),
+  isFormDisabled: PropTypes.bool.isRequired,
+  kind: PropTypes.string.isRequired,
+};
+
+export default memo(GlobalActions);

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/HiddenAction/index.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { cellWidth } from '../Permissions/utils/constants';
+
+const HiddenAction = styled.div`
+  width: ${cellWidth};
+`;
+
+export default HiddenAction;