Form done, WIP collection type

packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/index.js

@@ -1,9 +1,9 @@
-import React, { useCallback, useMemo } from 'react';
+import { Box } from '@strapi/parts';
 import PropTypes from 'prop-types';
+import React, { useCallback, useMemo } from 'react';
 import Collapse from './Collapse';
 import CollapsePropertyMatrix from './CollapsePropertyMatrix';
 import { getAvailableActions } from './utils';
-import Wrapper from './Wrapper';
 
 const ContentTypeCollapse = ({
   allActions,
@@ -27,7 +27,7 @@ const ContentTypeCollapse = ({
   const isOdd = useMemo(() => index % 2 !== 0, [index]);
 
   return (
-    <Wrapper withMargin={isOdd}>
+    <Box>
       <Collapse
         availableActions={availableActions}
         isActive={isActive}
@@ -53,7 +53,7 @@ const ContentTypeCollapse = ({
             />
           );
         })}
-    </Wrapper>
+    </Box>
   );
 };
 

packages/core/admin/admin/src/components/Roles/ContentTypes/index.js

@@ -1,23 +1,20 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { Padded } from '@buffetjs/core';
+import { Box } from '@strapi/parts';
 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>
+    <Box background="neutral0">
+      <GlobalActions actions={actions} kind={kind} isFormDisabled={isFormDisabled} />
+      <ContentTypeCollapses
+        actions={actions}
+        isFormDisabled={isFormDisabled}
+        pathToData={kind}
+        subjects={subjects}
+      />
+    </Box>
   );
 };
 

packages/core/admin/admin/src/components/Roles/GlobalActions/Wrapper.js

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  padding-left: 165px;
-  padding-bottom: 25px;
-  padding-top: 26px;
+  padding-left: 200px;
+  padding-bottom: ${({ theme }) => theme.spaces[4]};
+  padding-top: ${({ theme }) => theme.spaces[6]};
   ${({ disabled, theme }) =>
     `
     input[type='checkbox'] {

packages/core/admin/admin/src/components/Roles/GlobalActions/index.js

@@ -1,14 +1,30 @@
-import React, { memo, useMemo } from 'react';
+import { Box, Checkbox, Stack } from '@strapi/parts';
+import IS_DISABLED from 'ee_else_ce/components/Roles/GlobalActions/utils/constants';
 import { get } from 'lodash';
 import PropTypes from 'prop-types';
-import { Flex } from '@buffetjs/core';
+import React, { memo, useMemo } from 'react';
 import { useIntl } from 'react-intl';
-import IS_DISABLED from 'ee_else_ce/components/Roles/GlobalActions/utils/constants';
+import styled from 'styled-components';
 import { usePermissionsDataManager } from '../../../hooks';
-import CheckboxWithCondition from '../CheckboxWithCondition';
 import { findDisplayedActions, getCheckboxesState } from './utils';
 import Wrapper from './Wrapper';
 
+const Label = styled(Box)`
+  font-size: ${11 / 16}rem;
+  text-transform: uppercase;
+  color: ${({ theme }) => theme.colors.neutral500};
+  font-weight: bold;
+`;
+
+// ! TODO - Remove dflex, and fcolumn when strapi/parts is updated
+const CenteredStack = styled(Stack)`
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  width: 120px;
+`;
+
 const GlobalActions = ({ actions, isFormDisabled, kind }) => {
   const { formatMessage } = useIntl();
   const { modifiedData, onChangeCollectionTypeGlobalActionCheckbox } = usePermissionsDataManager();
@@ -23,26 +39,29 @@ const GlobalActions = ({ actions, isFormDisabled, kind }) => {
 
   return (
     <Wrapper disabled={isFormDisabled}>
-      <Flex>
+      <Stack horizontal size={4}>
         {displayedActions.map(({ label, actionId }) => {
           return (
-            <CheckboxWithCondition
-              key={actionId}
-              disabled={isFormDisabled || IS_DISABLED}
-              message={formatMessage({
-                id: `Settings.roles.form.permissions.${label.toLowerCase()}`,
-                defaultMessage: label,
-              })}
-              onChange={({ target: { value } }) => {
-                onChangeCollectionTypeGlobalActionCheckbox(kind, actionId, value);
-              }}
-              name={actionId}
-              value={get(checkboxesState, [actionId, 'hasAllActionsSelected'], false)}
-              someChecked={get(checkboxesState, [actionId, 'hasSomeActionsSelected'], false)}
-            />
+            <CenteredStack key={actionId} size={3}>
+              <Label>
+                {formatMessage({
+                  id: `Settings.roles.form.permissions.${label.toLowerCase()}`,
+                  defaultMessage: label,
+                })}
+              </Label>
+              <Checkbox
+                disabled={isFormDisabled || IS_DISABLED}
+                onValueChange={value => {
+                  onChangeCollectionTypeGlobalActionCheckbox(kind, actionId, value);
+                }}
+                name={actionId}
+                value={get(checkboxesState, [actionId, 'hasAllActionsSelected'], false)}
+                indeterminate={get(checkboxesState, [actionId, 'hasSomeActionsSelected'], false)}
+              />
+            </CenteredStack>
           );
         })}
-      </Flex>
+      </Stack>
     </Wrapper>
   );
 };

packages/core/admin/admin/src/components/Roles/Permissions/index.js

@@ -1,8 +1,9 @@
 import React, { forwardRef, memo, useCallback, useImperativeHandle, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { difference } from '@strapi/helper-plugin';
+import { TabGroup, Tabs, TabPanels, Tab, TabPanel, Box } from '@strapi/parts';
+import { useIntl } from 'react-intl';
 import { has, isEmpty } from 'lodash';
-import Tabs from '../Tabs';
 import PermissionsDataManagerProvider from '../PermissionsDataManagerProvider';
 import ContentTypes from '../ContentTypes';
 import PluginsAndSettings from '../PluginsAndSettings';
@@ -15,6 +16,7 @@ const Permissions = forwardRef(({ layout, isFormDisabled, permissions }, ref) =>
   const [{ initialData, layouts, modifiedData }, dispatch] = useReducer(reducer, initialState, () =>
     init(layout, permissions)
   );
+  const { formatMessage } = useIntl();
 
   useImperativeHandle(ref, () => {
     return {
@@ -106,28 +108,49 @@ const Permissions = forwardRef(({ layout, isFormDisabled, permissions }, ref) =>
         onChangeCollectionTypeGlobalActionCheckbox: handleChangeCollectionTypeGlobalActionCheckbox,
       }}
     >
-      <Tabs tabsLabel={TAB_LABELS}>
-        <ContentTypes
-          layout={layouts.collectionTypes}
-          kind="collectionTypes"
-          isFormDisabled={isFormDisabled}
-        />
-        <ContentTypes
-          layout={layouts.singleTypes}
-          kind="singleTypes"
-          isFormDisabled={isFormDisabled}
-        />
-        <PluginsAndSettings
-          layout={layouts.plugins}
-          kind="plugins"
-          isFormDisabled={isFormDisabled}
-        />
-        <PluginsAndSettings
-          layout={layouts.settings}
-          kind="settings"
-          isFormDisabled={isFormDisabled}
-        />
-      </Tabs>
+      <TabGroup label="Some stuff for the label" id="tabs">
+        <Tabs>
+          {TAB_LABELS.map(tabLabel => (
+            <Tab key={tabLabel.id}>{formatMessage({ id: tabLabel.labelId })}</Tab>
+          ))}
+        </Tabs>
+        <TabPanels>
+          <TabPanel>
+            <ContentTypes
+              layout={layouts.collectionTypes}
+              kind="collectionTypes"
+              isFormDisabled={isFormDisabled}
+            />
+          </TabPanel>
+          <TabPanel>
+            <Box padding={4} background="neutral0">
+              <ContentTypes
+                layout={layouts.singleTypes}
+                kind="singleTypes"
+                isFormDisabled={isFormDisabled}
+              />
+            </Box>
+          </TabPanel>
+          <TabPanel>
+            <Box padding={4} background="neutral0">
+              <PluginsAndSettings
+                layout={layouts.plugins}
+                kind="plugins"
+                isFormDisabled={isFormDisabled}
+              />
+            </Box>
+          </TabPanel>
+          <TabPanel>
+            <Box padding={4} background="neutral0">
+              <PluginsAndSettings
+                layout={layouts.settings}
+                kind="settings"
+                isFormDisabled={isFormDisabled}
+              />
+            </Box>
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
     </PermissionsDataManagerProvider>
   );
 });

packages/core/admin/admin/src/translations/en.json

@@ -127,7 +127,7 @@
   "Settings.roles.create.title": "Create a role",
   "Settings.roles.created": "Role created",
   "Settings.roles.edit.title": "Edit a role",
-  "Settings.roles.form.button.users-with-role": "Users with this role",
+  "Settings.roles.form.button.users-with-role": "{number} users with this role",
   "Settings.roles.form.created": "Created",
   "Settings.roles.form.description": "Name and description of the role",
   "Settings.roles.form.input.description": "Description",

packages/core/admin/ee/admin/pages/Roles/CreatePage/index.js

@@ -1,24 +1,32 @@
-import { Padded } from '@buffetjs/core';
 import {
-  BaselineAlignment,
   CheckPagePermissions,
   request,
   useNotification,
   useOverlayBlocker,
   useTracking,
 } from '@strapi/helper-plugin';
-import { Button, HeaderLayout, Stack } from '@strapi/parts';
+import {
+  Box,
+  Button,
+  ContentLayout,
+  Grid,
+  GridItem,
+  HeaderLayout,
+  Row,
+  Stack,
+  Text,
+  Textarea,
+  TextInput,
+} from '@strapi/parts';
 import { Formik } from 'formik';
 import { get, isEmpty } from 'lodash';
 import moment from 'moment';
 import React, { useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useHistory, useRouteMatch } from 'react-router-dom';
-import FormCard from '../../../../../admin/src/components/FormBloc';
-import { ButtonWithNumber } from '../../../../../admin/src/components/Roles';
+import styled from 'styled-components';
 import Permissions from '../../../../../admin/src/components/Roles/Permissions';
 import PageTitle from '../../../../../admin/src/components/SettingsPageTitle';
-import SizedInput from '../../../../../admin/src/components/SizedInput';
 import { useFetchPermissionsLayout, useFetchRole } from '../../../../../admin/src/hooks';
 import adminPermissions from '../../../../../admin/src/permissions';
 import schema from './utils/schema';
@@ -91,14 +99,19 @@ const CreatePage = () => {
       });
   };
 
-  const actions = [
-    <ButtonWithNumber number={0} onClick={() => console.log('Open user modal')} key="user-button">
-      {formatMessage({
-        id: 'Settings.roles.form.button.users-with-role',
-        defaultMessage: 'Users with this role',
-      })}
-    </ButtonWithNumber>,
-  ];
+  const UsersRoleNumber = styled.div`
+    border: 1px solid ${({ theme }) => theme.colors.primary200};
+    background: ${({ theme }) => theme.colors.primary100};
+    padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};
+    color: ${({ theme }) => theme.colors.primary600};
+    border-radius: ${({ theme }) => theme.borderRadius};
+    font-size: ${12 / 16}rem;
+    font-width: bold;
+  `;
+
+  const FlexBox = styled(Box)`
+    flex: 1;
+  `;
 
   const defaultDescription = `${formatMessage({
     id: 'Settings.roles.form.created',
@@ -120,6 +133,7 @@ const CreatePage = () => {
                 primaryAction={
                   <Stack horizontal size={2}>
                     <Button
+                      variant="secondary"
                       onClick={() => {
                         handleReset();
                         permissionsRef.current.resetForm();
@@ -148,51 +162,71 @@ const CreatePage = () => {
                 })}
                 as="h1"
               />
-              <BaselineAlignment top size="3px" />
-              <FormCard
-                actions={actions}
-                title={formatMessage({
-                  id: 'Settings.roles.form.title',
-                  defaultMessage: 'Details',
-                })}
-                subtitle={formatMessage({
-                  id: 'Settings.roles.form.description',
-                  defaultMessage: 'Name and description of the role',
-                })}
-              >
-                <SizedInput
-                  label="Settings.roles.form.input.name"
-                  defaultMessage="Name"
-                  name="name"
-                  type="text"
-                  error={errors.name ? { id: errors.name } : null}
-                  onBlur={handleBlur}
-                  value={values.name}
-                  onChange={handleChange}
-                />
-
-                <SizedInput
-                  label="Settings.roles.form.input.description"
-                  defaultMessage="Description"
-                  name="description"
-                  type="textarea"
-                  onBlur={handleBlur}
-                  value={values.description}
-                  onChange={handleChange}
-                  // Override the default height of the textarea
-                  style={{ height: 115 }}
-                />
-              </FormCard>
-              {!isLayoutLoading && !isRoleLoading && (
-                <Padded top bottom size="md">
-                  <Permissions
-                    isFormDisabled={false}
-                    ref={permissionsRef}
-                    permissions={rolePermissions}
-                    layout={permissionsLayout}
-                  />
-                </Padded>
-              )}
+              <ContentLayout>
+                <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
+                  <Stack size={4}>
+                    <Row>
+                      <FlexBox>
+                        <Box>
+                          <Text highlighted>
+                            {formatMessage({
+                              id: 'Settings.roles.form.title',
+                            })}
+                          </Text>
+                        </Box>
+                        <Box>
+                          <Text textColor="neutral500" small>
+                            {formatMessage({
+                              id: 'Settings.roles.form.description',
+                            })}
+                          </Text>
+                        </Box>
+                      </FlexBox>
+                      <UsersRoleNumber>
+                        {formatMessage(
+                          {
+                            id: 'Settings.roles.form.button.users-with-role',
+                          },
+                          { number: 0 }
+                        )}
+                      </UsersRoleNumber>
+                    </Row>
+                    <Grid gap={4}>
+                      <GridItem col={6}>
+                        <TextInput
+                          name="name"
+                          error={errors.name && formatMessage({ id: errors.name })}
+                          label={formatMessage({ id: 'Settings.roles.form.input.name' })}
+                          onChange={handleChange}
+                          onBlur={handleBlur}
+                          value={values.name}
+                        />
+                      </GridItem>
+                      <GridItem col={6}>
+                        <Textarea
+                          label={formatMessage({ id: 'Settings.roles.form.input.description' })}
+                          name="description"
+                          error={errors.name && formatMessage({ id: errors.name })}
+                          onChange={handleChange}
+                          onBlur={handleBlur}
+                        >
+                          {values.description}
+                        </Textarea>
+                      </GridItem>
+                    </Grid>
+                  </Stack>
+                </Box>
+                {!isLayoutLoading && !isRoleLoading && (
+                  <Box paddingTop={6} paddingBottom={6}>
+                    <Permissions
+                      isFormDisabled={false}
+                      ref={permissionsRef}
+                      permissions={rolePermissions}
+                      layout={permissionsLayout}
+                    />
+                  </Box>
+                )}
+              </ContentLayout>
             </>
           </form>
         )}