Fix checkboxes

packages/plugins/users-permissions/admin/src/components/Permissions/PermissionRow/SubCategory/index.js

@@ -2,7 +2,7 @@ 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 { TableLabel, Box, Row, Checkbox, Grid, GridItem } from '@strapi/parts';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useIntl } from 'react-intl';
 import CheckboxWrapper from '../CheckboxWrapper';
@@ -14,8 +14,7 @@ import PolicyWrapper from './PolicyWrapper';
 const Border = styled.div`
   flex: 1;
   align-self: center;
-  border-top: 1px solid #f6f6f6;
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
-  padding: 0px 10px;
 `;
 
 const SubCategory = ({ subCategory }) => {
@@ -57,6 +56,48 @@ const SubCategory = ({ subCategory }) => {
     [selectedAction]
   );
 
+  return (
+    <Box>
+      <Row justifyContent="space-between" alignItems="center">
+        <Box paddingRight={4}>
+          <TableLabel textColor="neutral600">{subCategory.label}</TableLabel>
+        </Box>
+        <Border />
+        <Box paddingLeft={4}>
+          <Checkbox
+            name={subCategory.name}
+            value={hasAllActionsSelected}
+            onValueChange={
+              value => handleChangeSelectAll({target: { name: subCategory.name, value } })
+            }
+            indeterminate={hasSomeActionsSelected}
+          >
+            {formatMessage({ id: 'app.utils.select-all', defaultMessage: 'Select all' })}
+          </Checkbox>
+        </Box>
+      </Row>
+      <Row paddingTop={6} paddingBottom={6}>
+        <Grid gap={2} style={{ flex: 1 }}>
+          {subCategory.actions.map(action => {
+            const name = `${action.name}.enabled`;
+
+            return (
+              <GridItem col={6} key={action.name}>
+                <Checkbox
+                  value={get(modifiedData, name, false)}
+                  name={name}
+                  onValueChange={value => onChange({ target: { name, value } })}
+                >
+                  {action.label}
+                </Checkbox>
+              </GridItem>
+            );
+          })}
+        </Grid>
+      </Row>
+    </Box>
+  );
+
   return (
     <SubCategoryWrapper>
       <Flex justifyContent="space-between" alignItems="center">

packages/plugins/users-permissions/admin/src/components/Permissions/PermissionRow/index.js

@@ -1,24 +1,12 @@
 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 { Box } from '@strapi/parts';
-
-import getTrad from '../../../utils/getTrad';
 import SubCategory from './SubCategory';
-import RowStyle from './RowStyle';
 
-const PermissionRow = ({ isOpen, isWhite, name, onOpenPlugin, permissions }) => {
+const PermissionRow = ({ name, 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]}`;
@@ -47,45 +35,19 @@ const PermissionRow = ({ isOpen, isWhite, name, onOpenPlugin, permissions }) =>
       }, []),
       'label'
     );
-  }, [isOpen, name, permissions]);
+  }, [name, permissions]);
 
   return (
-    <RowContainer isWhite={isWhite}>
+    <Box padding={6}>
-      <RowStyle isActive={isOpen} isWhite={isWhite} onClick={onOpenPlugin}>
+      {subCategories.map(subCategory => (
-        <Flex alignItems="center" justifyContent="space-between">
+        <SubCategory key={subCategory.name} subCategory={subCategory} />
-          <div>
+      ))}
-            <Text color="grey" fontWeight="bold" fontSize="xs" textTransform="uppercase">
+    </Box>
-              {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,
 };
 

packages/plugins/users-permissions/admin/src/components/Permissions/index.js

@@ -3,6 +3,7 @@ import { Accordion, AccordionToggle, AccordionContent, Box } from '@strapi/parts
 import { useIntl } from 'react-intl';
 import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
 import formatPluginName from '../../utils/formatPluginName';
+import PermissionRow from './PermissionRow';
 import init from './init';
 import { initialState, reducer } from './reducer';
 
@@ -35,14 +36,12 @@ const Permissions = () => {
                 id: 'users-permissions.Plugin.permissions.plugins.description',
                 defaultMessage: 'Define all allowed actions for the {name} plugin.',
               },
-              { name: collapse.name }
+              { name: formatPluginName(collapse.name) }
             )}
             variant={index % 2 ? 'primary' : 'secondary'}
           />
           <AccordionContent>
-            <Box padding={6}>
+            <PermissionRow permissions={modifiedData[collapse.name]} name={collapse.name} />
-              <p>Accordion content</p>
-            </Box>
           </AccordionContent>
         </Accordion>
       ))}

packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/index.js

@@ -38,8 +38,9 @@ const EditPage = () => {
     lockApp();
     setIsSubmitting(true);
     try {
+      const permissions = permissionsRef.current.getPermissions();
       // Update role in Strapi
-      await axiosInstance.put(`/${pluginId}/roles/${id}`, { ...data, users: [] });
+      await axiosInstance.put(`/${pluginId}/roles/${id}`, { ...data, ...permissions, users: [] });
       // Notify success
       onSubmitSucceeded({ name: data.name, description: data.description });
       toggleNotification({

packages/plugins/users-permissions/admin/src/utils/formatPluginName.js

@@ -4,22 +4,22 @@ function formatPluginName(pluginSlug) {
   switch (pluginSlug) {
     case 'application':
       return 'Application';
-    case 'content-manager':
+    case 'plugin::content-manager':
       return 'Content manager';
-    case 'content-type-builder':
+    case 'plugin::content-type-builder':
       return 'Content types builder';
-    case 'documentation':
+    case 'plugin::documentation':
       return 'Documentation';
-    case 'email':
+    case 'plugin::email':
       return 'Email';
-    case 'i18n':
+    case 'plugin::i18n':
       return 'i18n';
-    case 'upload':
+    case 'plugin::upload':
       return 'Upload';
-    case 'users-permissions':
+    case 'plugin::users-permissions':
       return 'Users-permissions';
     default:
-      return upperFirst(pluginSlug);
+      return upperFirst(pluginSlug.replace('api::', '').replace('plugin::', ''));
   }
 }