@akemona-org/strapi-plugin-users-permissions 3.7.0

package/admin/src/components/Permissions/PermissionRow/SubCategory/index.js

@@ -0,0 +1,116 @@
+import React, { useCallback, useMemo } from 'react';
+import { get } from 'lodash';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { Flex, Padded, Text, Checkbox } from '@buffetjs/core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useIntl } from 'react-intl';
+import CheckboxWrapper from '../CheckboxWrapper';
+import BaselineAlignment from '../BaselineAlignment';
+import SubCategoryWrapper from './SubCategoryWrapper';
+import { useUsersPermissions } from '../../../../contexts/UsersPermissionsContext';
+import PolicyWrapper from './PolicyWrapper';
+
+const Border = styled.div`
+  flex: 1;
+  align-self: center;
+  border-top: 1px solid #f6f6f6;
+  padding: 0px 10px;
+`;
+
+const SubCategory = ({ subCategory }) => {
+  const { formatMessage } = useIntl();
+  const {
+    onChange,
+    onChangeSelectAll,
+    onSelectedAction,
+    selectedAction,
+    modifiedData,
+  } = useUsersPermissions();
+
+  const currentScopedModifiedData = useMemo(() => {
+    return get(modifiedData, subCategory.name, {});
+  }, [modifiedData, subCategory]);
+
+  const hasAllActionsSelected = useMemo(() => {
+    return Object.values(currentScopedModifiedData).every(action => action.enabled === true);
+  }, [currentScopedModifiedData]);
+
+  const hasSomeActionsSelected = useMemo(() => {
+    return (
+      Object.values(currentScopedModifiedData).some(action => action.enabled === true) &&
+      !hasAllActionsSelected
+    );
+  }, [currentScopedModifiedData, hasAllActionsSelected]);
+
+  const handleChangeSelectAll = useCallback(
+    ({ target: { name } }) => {
+      onChangeSelectAll({ target: { name, value: !hasAllActionsSelected } });
+    },
+    [hasAllActionsSelected, onChangeSelectAll]
+  );
+
+  const isActionSelected = useCallback(
+    actionName => {
+      return selectedAction === actionName;
+    },
+    [selectedAction]
+  );
+
+  return (
+    <SubCategoryWrapper>
+      <Flex justifyContent="space-between" alignItems="center">
+        <Padded right size="sm">
+          <Text
+            lineHeight="18px"
+            color="#919bae"
+            fontWeight="bold"
+            fontSize="xs"
+            textTransform="uppercase"
+          >
+            {subCategory.label}
+          </Text>
+        </Padded>
+        <Border />
+        <Padded left size="sm">
+          <BaselineAlignment />
+          <Checkbox
+            name={subCategory.name}
+            message={formatMessage({ id: 'app.utils.select-all' })}
+            onChange={handleChangeSelectAll}
+            someChecked={hasSomeActionsSelected}
+            value={hasAllActionsSelected}
+          />
+        </Padded>
+      </Flex>
+      <BaselineAlignment />
+      <Padded top size="xs">
+        <Flex flexWrap="wrap">
+          {subCategory.actions.map(action => {
+            const name = `${action.name}.enabled`;
+
+            return (
+              <CheckboxWrapper isActive={isActionSelected(action.name)} key={action.name}>
+                <Checkbox
+                  value={get(modifiedData, name, false)}
+                  name={name}
+                  message={action.label}
+                  onChange={onChange}
+                />
+                <PolicyWrapper onClick={() => onSelectedAction(action.name)}>
+                  <FontAwesomeIcon icon="cog" />
+                </PolicyWrapper>
+              </CheckboxWrapper>
+            );
+          })}
+        </Flex>
+      </Padded>
+    </SubCategoryWrapper>
+  );
+};
+
+SubCategory.propTypes = {
+  subCategory: PropTypes.object.isRequired,
+};
+
+export default SubCategory;

package/admin/src/components/Permissions/PermissionRow/index.js

@@ -0,0 +1,92 @@
+import React, { useMemo } from 'react';
+import { Flex, Text } from '@buffetjs/core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { sortBy } from 'lodash';
+import { PermissionsWrapper, RowContainer } from 'strapi-helper-plugin';
+
+import getTrad from '../../../utils/getTrad';
+import SubCategory from './SubCategory';
+import RowStyle from './RowStyle';
+
+const PermissionRow = ({ isOpen, isWhite, name, onOpenPlugin, permissions }) => {
+  const { formatMessage } = useIntl();
+
+  const subCategories = useMemo(() => {
+    // Avoid computing when not necesserary
+    if (!isOpen) {
+      return [];
+    }
+
+    return sortBy(
+      Object.values(permissions.controllers).reduce((acc, curr, index) => {
+        const currentName = `${name}.controllers.${Object.keys(permissions.controllers)[index]}`;
+        const actions = sortBy(
+          Object.keys(curr).reduce((acc, current) => {
+            return [
+              ...acc,
+              {
+                ...curr[current],
+                label: current,
+                name: `${currentName}.${current}`,
+              },
+            ];
+          }, []),
+          'label'
+        );
+
+        return [
+          ...acc,
+          {
+            actions,
+            label: Object.keys(permissions.controllers)[index],
+            name: currentName,
+          },
+        ];
+      }, []),
+      'label'
+    );
+  }, [isOpen, name, permissions]);
+
+  return (
+    <RowContainer isWhite={isWhite}>
+      <RowStyle isActive={isOpen} isWhite={isWhite} onClick={onOpenPlugin}>
+        <Flex alignItems="center" justifyContent="space-between">
+          <div>
+            <Text color="grey" fontWeight="bold" fontSize="xs" textTransform="uppercase">
+              {name}
+            </Text>
+            <Text lineHeight="22px" color="grey">
+              {formatMessage({ id: getTrad('Plugin.permissions.plugins.description') }, { name })}
+            </Text>
+          </div>
+          <div>
+            <FontAwesomeIcon
+              style={{ width: '11px' }}
+              color="#9EA7B8"
+              icon={isOpen ? 'chevron-up' : 'chevron-down'}
+            />
+          </div>
+        </Flex>
+      </RowStyle>
+      {isOpen && (
+        <PermissionsWrapper isWhite={isWhite}>
+          {subCategories.map(subCategory => (
+            <SubCategory key={subCategory.name} subCategory={subCategory} />
+          ))}
+        </PermissionsWrapper>
+      )}
+    </RowContainer>
+  );
+};
+
+PermissionRow.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  isWhite: PropTypes.bool.isRequired,
+  name: PropTypes.string.isRequired,
+  onOpenPlugin: PropTypes.func.isRequired,
+  permissions: PropTypes.object.isRequired,
+};
+
+export default PermissionRow;

package/admin/src/components/Permissions/index.js

@@ -0,0 +1,44 @@
+import React, { memo, useCallback, useReducer } from 'react';
+import { Padded } from '@buffetjs/core';
+import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
+import ListWrapper from './ListWrapper';
+import PermissionRow from './PermissionRow';
+import init from './init';
+import { initialState, reducer } from './reducer';
+
+const Permissions = () => {
+  const { modifiedData } = useUsersPermissions();
+  const [{ collapses }, dispatch] = useReducer(reducer, initialState, state =>
+    init(state, modifiedData)
+  );
+
+  const handleOpenPlugin = useCallback(index => {
+    dispatch({
+      type: 'TOGGLE_COLLAPSE',
+      index,
+    });
+  }, []);
+
+  return (
+    <ListWrapper>
+      <Padded left right size="sm">
+        {collapses.map((_, index) => {
+          const { isOpen, name } = collapses[index];
+
+          return (
+            <PermissionRow
+              key={name}
+              isOpen={isOpen}
+              isWhite={index % 2 === 1}
+              name={name}
+              onOpenPlugin={() => handleOpenPlugin(index)}
+              permissions={modifiedData[name]}
+            />
+          );
+        })}
+      </Padded>
+    </ListWrapper>
+  );
+};
+
+export default memo(Permissions);

package/admin/src/components/Permissions/init.js

@@ -0,0 +1,14 @@
+const init = (initialState, permissions) => {
+  const collapses = Object.keys(permissions)
+    .sort()
+    .reduce((acc, current, index) => {
+      return acc.concat({
+        name: current,
+        isOpen: index === 0,
+      });
+    }, []);
+
+  return { ...initialState, collapses };
+};
+
+export default init;

package/admin/src/components/Permissions/reducer.js

@@ -0,0 +1,27 @@
+import produce from 'immer';
+
+const initialState = {
+  collapses: [],
+};
+
+const reducer = (state, action) =>
+  // eslint-disable-next-line consistent-return
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'TOGGLE_COLLAPSE': {
+        draftState.collapses = state.collapses.map((collapse, index) => {
+          if (index === action.index) {
+            return { ...collapse, isOpen: !collapse.isOpen };
+          }
+
+          return { ...collapse, isOpen: false };
+        });
+
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export { initialState, reducer };

package/admin/src/components/Policies/Components.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { themePropTypes } from 'strapi-helper-plugin';
+
+const Wrapper = styled.div`
+  min-height: 100%;
+  background-color: #f6f6f6;
+`;
+
+const Header = styled.div`
+  margin-bottom: 1.1rem;
+  padding-top: 1.1rem;
+  font-size: 18px;
+  font-weight: ${({ theme }) => theme.main.fontWeights.bold};
+  line-height: 3.6rem;
+`;
+
+const Sticky = styled.div`
+  position: sticky;
+  top: 70px;
+`;
+
+Header.propTypes = {
+  ...themePropTypes,
+};
+
+export { Header, Wrapper, Sticky };

package/admin/src/components/Policies/index.js

@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Col } from 'reactstrap';
+import { get, isEmpty, takeRight, toLower, without } from 'lodash';
+import { getTrad } from '../../utils';
+import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
+import BoundRoute from '../BoundRoute';
+import SizedInput from '../SizedInput';
+import { Header, Wrapper, Sticky } from './Components';
+
+const Policies = () => {
+  const { modifiedData, selectedAction, routes, policies, onChange } = useUsersPermissions();
+  const baseTitle = 'users-permissions.Policies.header';
+  const title = !selectedAction ? 'hint' : 'title';
+  const path = without(selectedAction.split('.'), 'controllers');
+  const controllerRoutes = get(routes, path[0]);
+  const displayedRoutes = isEmpty(controllerRoutes)
+    ? []
+    : controllerRoutes.filter(o => toLower(o.handler) === toLower(takeRight(path, 2).join('.')));
+
+  const inputName = `${selectedAction}.policy`;
+
+  const value = useMemo(() => {
+    return get(modifiedData, inputName, '');
+  }, [inputName, modifiedData]);
+
+  return (
+    <Wrapper className="col-md-5">
+      <Sticky className="container-fluid">
+        <div className="row">
+          <Header className="col-md-12">
+            <FormattedMessage id={`${baseTitle}.${title}`} />
+          </Header>
+          {selectedAction && (
+            <>
+              <SizedInput
+                type="select"
+                name={inputName}
+                onChange={onChange}
+                label={getTrad('Policies.InputSelect.label')}
+                options={policies}
+                value={value}
+              />
+
+              <div className="row">
+                <Col size={{ xs: 12 }}>
+                  {displayedRoutes.map((route, key) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <BoundRoute key={key} route={route} />
+                  ))}
+                </Col>
+              </div>
+            </>
+          )}
+        </div>
+      </Sticky>
+    </Wrapper>
+  );
+};
+
+export default Policies;

package/admin/src/components/PrefixedIcon/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Flex, Padded, Text } from '@buffetjs/core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { upperFirst } from 'lodash';
+import PropTypes from 'prop-types';
+
+const PrefixedIcon = ({ icon, name }) => {
+  return (
+    <Flex>
+      <div>
+        <FontAwesomeIcon icon={icon} />
+      </div>
+      <Padded left size="md">
+        <Text fontWeight="semiBold" lineHeight="18px">
+          {upperFirst(name)}
+        </Text>
+      </Padded>
+    </Flex>
+  );
+};
+
+PrefixedIcon.propTypes = {
+  icon: PropTypes.array.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default PrefixedIcon;

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const BaselineAlignment = styled.div`
+  padding-top: 2px;
+`;
+
+export default BaselineAlignment;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Flex, Padded, Text } from '@buffetjs/core';
+import { useIntl } from 'react-intl';
+
+import BaselineAlignment from './BaselineAlignment';
+
+const EmptyRole = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <BaselineAlignment />
+      <Padded top bottom size="md">
+        <Flex justifyContent="center">
+          <Text fontSize="lg" fontWeight="bold">
+            {formatMessage({
+              id: 'Roles.components.List.empty',
+              defaultMessage: 'There is no role',
+            })}
+          </Text>
+        </Flex>
+      </Padded>
+    </>
+  );
+};
+
+export default EmptyRole;

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

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const RoleListWrapper = styled.div`
+  border-radius: 2px;
+  box-shadow: 0 2px 4px #e3e9f3;
+  background: white;
+
+  > div,
+  > div > div:last-of-type {
+    box-shadow: none;
+    border-radius: 2px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+`;
+
+export default RoleListWrapper;

package/admin/src/components/Roles/RoleRow/RoleDescription.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Text } from '@buffetjs/core';
+
+const RoleDescription = styled(props => <Text {...props} ellipsis />)`
+  max-width: 25rem;
+`;
+
+export default RoleDescription;

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CustomRow } from '@buffetjs/styles';
+import { IconLinks, Text } from '@buffetjs/core';
+import { useIntl } from 'react-intl';
+
+import RoleDescription from './RoleDescription';
+
+const RoleRow = ({ role, onClick, links }) => {
+  const { formatMessage } = useIntl();
+  const number = role.nb_users;
+  const text = formatMessage(
+    { id: `Roles.RoleRow.user-count.${number > 1 ? 'plural' : 'singular'}` },
+    { number }
+  );
+
+  return (
+    <CustomRow onClick={onClick}>
+      <td>
+        <Text fontWeight="semiBold">{role.name}</Text>
+      </td>
+      <td>
+        <RoleDescription>{role.description}</RoleDescription>
+      </td>
+      <td>
+        <Text>{text}</Text>
+      </td>
+      <td>
+        <IconLinks links={links} />
+      </td>
+    </CustomRow>
+  );
+};
+
+RoleRow.defaultProps = {
+  onClick: null,
+};
+
+RoleRow.propTypes = {
+  links: PropTypes.array.isRequired,
+  onClick: PropTypes.func,
+  role: PropTypes.object.isRequired,
+};
+
+export default RoleRow;

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

@@ -0,0 +1,3 @@
+export { default as RoleRow } from './RoleRow';
+export { default as RoleListWrapper } from './RoleListWrapper';
+export { default as EmptyRole } from './EmptyRole';

package/admin/src/components/SizedInput/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Col } from 'reactstrap';
+import PropTypes from 'prop-types';
+import IntlInput from '../IntlInput';
+
+const SizedInput = ({ size, ...rest }) => {
+  return (
+    <Col {...size}>
+      <IntlInput {...rest} />
+    </Col>
+  );
+};
+
+SizedInput.defaultProps = {
+  size: {
+    xs: '12',
+  },
+};
+
+SizedInput.propTypes = {
+  size: PropTypes.object,
+};
+
+export default SizedInput;

package/admin/src/components/UsersPermissions/index.js

@@ -0,0 +1,91 @@
+import React, { memo, useReducer, useCallback, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { Padded, Flex } from '@buffetjs/core';
+import { useIntl } from 'react-intl';
+
+import FormCard from '../FormBloc';
+import getTrad from '../../utils/getTrad';
+import Policies from '../Policies';
+import Permissions from '../Permissions';
+import reducer, { initialState } from './reducer';
+import { UsersPermissionsProvider } from '../../contexts/UsersPermissionsContext';
+import init from './init';
+
+const UsersPermissions = forwardRef(({ permissions, routes, policies }, ref) => {
+  const { formatMessage } = useIntl();
+  const [state, dispatch] = useReducer(reducer, initialState, state =>
+    init(state, permissions, routes, policies)
+  );
+
+  useImperativeHandle(ref, () => ({
+    getPermissions: () => {
+      return {
+        permissions: state.modifiedData,
+      };
+    },
+    resetForm: () => {
+      dispatch({ type: 'ON_RESET' });
+    },
+    setFormAfterSubmit: () => {
+      dispatch({ type: 'ON_SUBMIT_SUCCEEDED' });
+    },
+  }));
+
+  const handleChange = useCallback(({ target: { name, value } }) => {
+    dispatch({
+      type: 'ON_CHANGE',
+      keys: name.split('.'),
+      value: value === 'empty__string_value' ? '' : value,
+    });
+  }, []);
+
+  const handleChangeSelectAll = useCallback(({ target: { name, value } }) => {
+    dispatch({
+      type: 'ON_CHANGE_SELECT_ALL',
+      keys: name.split('.'),
+      value,
+    });
+  }, []);
+
+  const handleSelectedAction = useCallback(actionToSelect => {
+    dispatch({
+      type: 'SELECT_ACTION',
+      actionToSelect,
+    });
+  }, []);
+
+  const providerValue = {
+    ...state,
+    onChange: handleChange,
+    onChangeSelectAll: handleChangeSelectAll,
+    onSelectedAction: handleSelectedAction,
+  };
+
+  return (
+    <UsersPermissionsProvider value={providerValue}>
+      <Flex>
+        <FormCard
+          title={formatMessage({
+            id: getTrad('Plugins.header.title'),
+          })}
+          subtitle={formatMessage({
+            id: getTrad('Plugins.header.description'),
+          })}
+        >
+          <Padded left right size="xs">
+            <Permissions />
+          </Padded>
+        </FormCard>
+        <Policies />
+      </Flex>
+    </UsersPermissionsProvider>
+  );
+});
+
+UsersPermissions.propTypes = {
+  permissions: PropTypes.object.isRequired,
+  routes: PropTypes.object.isRequired,
+  policies: PropTypes.array.isRequired,
+};
+
+export default memo(UsersPermissions);

package/admin/src/components/UsersPermissions/init.js

@@ -0,0 +1,11 @@
+const init = (state, permissions, routes, policies) => {
+  return {
+    ...state,
+    initialData: permissions,
+    modifiedData: permissions,
+    routes,
+    policies,
+  };
+};
+
+export default init;