move edit page to ds

packages/core/admin/admin/src/components/Roles/PluginsAndSettings/Row/index.js

@@ -28,7 +28,7 @@ const PermissionRow = ({
   }, [name]);
 
   return (
-    <Accordion expanded={isOpen} toggle={handleClick} id="acc-1">
+    <Accordion expanded={isOpen} toggle={handleClick} id={`accordion-${name}`}>
       <AccordionToggle
         title={upperFirst(categoryName)}
         description={`${formatMessage(

packages/core/admin/admin/src/components/Roles/RoleForm/RoleForm.js

@@ -1,90 +1,97 @@
-import React from 'react';
+import { Box, Grid, GridItem, Row, Stack, Text, Textarea, TextInput } from '@strapi/parts';
 import { PropTypes } from 'prop-types';
+import React from 'react';
 import { useIntl } from 'react-intl';
+import styled from 'styled-components';
 
-import NameInput from './NameInput';
+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;
+`;
 
-import FormCard from '../../FormBloc';
-import SizedInput from '../../SizedInput';
-import ButtonWithNumber from '../ButtonWithNumber';
-
-const RoleForm = ({ disabled, role, values, errors, onChange, onBlur, isLoading }) => {
+const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
   const { formatMessage } = useIntl();
 
-  const actions = [
-    <ButtonWithNumber
-      number={role.usersCount}
-      onClick={() => console.log('Open user modal')}
-      key="user-button"
-    >
-      {formatMessage({
-        id: 'Settings.roles.form.button.users-with-role',
-        defaultMessage: 'Users with this role',
-      })}
-    </ButtonWithNumber>,
-  ];
-
   return (
-    <FormCard
-      actions={actions}
-      isLoading={isLoading}
-      title={
-        /* eslint-disable indent */
-        role
-          ? role.name
-          : formatMessage({
-              id: 'Settings.roles.form.title',
-              defaultMessage: 'Details',
-            })
-      }
-      subtitle={
-        role
-          ? role.description
-          : formatMessage({
-              id: 'Settings.roles.form.description',
-              defaultMessage: 'Name and description of the role',
-            })
-      }
-      /* eslint-enable indent */
-    >
-      <NameInput
-        disabled={disabled}
-        label="Settings.roles.form.input.name"
-        defaultMessage="Name"
-        name="name"
-        type="text"
-        error={errors.name ? { id: errors.name } : null}
-        onBlur={onBlur}
-        value={values.name}
-        onChange={onChange}
-      />
-
-      <SizedInput
-        disabled={disabled}
-        label="Settings.roles.form.input.description"
-        defaultMessage="Description"
-        name="description"
-        type="textarea"
-        onBlur={onBlur}
-        value={values.description}
-        onChange={onChange}
-        // Override the default height of the textarea
-        style={{ height: 115 }}
-      />
-    </FormCard>
+    <>
+      <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
+        <Stack size={4}>
+          <Row justifyContent="space-between">
+            <Box>
+              <Box>
+                <Text highlighted>
+                  {role
+                    ? role.name
+                    : formatMessage({
+                        id: 'Settings.roles.form.title',
+                        defaultMessage: 'Details',
+                      })}
+                </Text>
+              </Box>
+              <Box>
+                <Text textColor="neutral500" small>
+                  {role
+                    ? role.description
+                    : formatMessage({
+                        id: 'Settings.roles.form.description',
+                        defaultMessage: 'Name and description of the role',
+                      })}
+                </Text>
+              </Box>
+            </Box>
+            <UsersRoleNumber>
+              {formatMessage(
+                {
+                  id: 'Settings.roles.form.button.users-with-role',
+                },
+                { number: role.usersCount }
+              )}
+            </UsersRoleNumber>
+          </Row>
+          <Grid gap={4}>
+            <GridItem col={6}>
+              <TextInput
+                disabled={disabled}
+                name="name"
+                error={errors.name && formatMessage({ id: errors.name })}
+                label={formatMessage({ id: 'Settings.roles.form.input.name' })}
+                onChange={onChange}
+                onBlur={onBlur}
+                value={values.name || ''}
+              />
+            </GridItem>
+            <GridItem col={6}>
+              <Textarea
+                disabled={disabled}
+                label={formatMessage({ id: 'Settings.roles.form.input.description' })}
+                name="description"
+                error={errors.name && formatMessage({ id: errors.name })}
+                onChange={onChange}
+                onBlur={onBlur}
+              >
+                {values.description || ''}
+              </Textarea>
+            </GridItem>
+          </Grid>
+        </Stack>
+      </Box>
+    </>
   );
 };
 
 RoleForm.defaultProps = {
   disabled: false,
-  isLoading: false,
   role: null,
   values: { name: '', description: '' },
 };
 RoleForm.propTypes = {
   disabled: PropTypes.bool,
   errors: PropTypes.object.isRequired,
-  isLoading: PropTypes.bool,
   onBlur: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
   role: PropTypes.object,

packages/core/admin/admin/src/pages/Roles/EditPage/index.js

@@ -1,21 +1,13 @@
-import React, { useState, useRef } from 'react';
-import { useRouteMatch } from 'react-router-dom';
-import get from 'lodash/get';
-import {
-  BaselineAlignment,
-  request,
-  useNotification,
-  useOverlayBlocker,
-  useTracking,
-} from '@strapi/helper-plugin';
-import { Header } from '@buffetjs/custom';
-import { Padded } from '@buffetjs/core';
+import { request, useNotification, useOverlayBlocker, useTracking } from '@strapi/helper-plugin';
+import { Box, Button, HeaderLayout, Main, Stack, ContentLayout } from '@strapi/parts';
 import { Formik } from 'formik';
+import get from 'lodash/get';
+import React, { useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
-import PageTitle from '../../../components/SettingsPageTitle';
-import ContainerFluid from '../../../components/ContainerFluid';
+import { useRouteMatch } from 'react-router-dom';
 import { Permissions, RoleForm } from '../../../components/Roles';
-import { useFetchRole, useFetchPermissionsLayout } from '../../../hooks';
+import PageTitle from '../../../components/SettingsPageTitle';
+import { useFetchPermissionsLayout, useFetchRole } from '../../../hooks';
 import schema from './utils/schema';
 
 const EditPage = () => {
@@ -24,7 +16,7 @@ const EditPage = () => {
   const {
     params: { id },
   } = useRouteMatch('/settings/roles/:id');
-  const [isSubmiting, setIsSubmiting] = useState(false);
+  const [, setIsSubmiting] = useState(false);
   const permissionsRef = useRef();
   const { lockApp, unlockApp } = useOverlayBlocker();
   const { trackUsage } = useTracking();
@@ -37,38 +29,6 @@ const EditPage = () => {
     onSubmitSucceeded,
   } = useFetchRole(id);
 
-  /* eslint-disable indent */
-  const headerActions = (handleSubmit, handleReset) =>
-    isLayoutLoading && isRoleLoading
-      ? []
-      : [
-          {
-            label: formatMessage({
-              id: 'app.components.Button.reset',
-              defaultMessage: 'Reset',
-            }),
-            disabled: role.code === 'strapi-super-admin',
-            onClick: () => {
-              handleReset();
-              permissionsRef.current.resetForm();
-            },
-            color: 'cancel',
-            type: 'button',
-          },
-          {
-            label: formatMessage({
-              id: 'app.components.Button.save',
-              defaultMessage: 'Save',
-            }),
-            disabled: role.code === 'strapi-super-admin',
-            onClick: handleSubmit,
-            color: 'success',
-            type: 'submit',
-            isLoading: isSubmiting,
-          },
-        ];
-  /* eslint-enable indent */
-
   const handleEditRoleSubmit = async data => {
     try {
       lockApp();
@@ -120,7 +80,7 @@ const EditPage = () => {
   const isFormDisabled = role.code === 'strapi-super-admin';
 
   return (
-    <>
+    <Main labelledBy="title">
       <PageTitle name="Roles" />
       <Formik
         enableReinitialize
@@ -134,46 +94,68 @@ const EditPage = () => {
       >
         {({ handleSubmit, values, errors, handleReset, handleChange, handleBlur }) => (
           <form onSubmit={handleSubmit}>
-            <ContainerFluid padding="0">
-              <Header
-                title={{
-                  label: formatMessage({
-                    id: 'Settings.roles.edit.title',
-                    defaultMessage: 'Edit a role',
-                  }),
-                }}
-                content={formatMessage({
+            <>
+              <HeaderLayout
+                id="title"
+                primaryAction={
+                  <Stack horizontal size={2}>
+                    <Button
+                      variant="secondary"
+                      disabled={role.code === 'strapi-super-admin'}
+                      onClick={() => {
+                        handleReset();
+                        permissionsRef.current.resetForm();
+                      }}
+                    >
+                      {formatMessage({
+                        id: 'app.components.Button.reset',
+                        defaultMessage: 'Reset',
+                      })}
+                    </Button>
+                    <Button disabled={role.code === 'strapi-super-admin'} onClick={handleSubmit}>
+                      {formatMessage({
+                        id: 'app.components.Button.save',
+                        defaultMessage: 'Save',
+                      })}
+                    </Button>
+                  </Stack>
+                }
+                title={formatMessage({
+                  id: 'Settings.roles.edit.title',
+                  defaultMessage: 'Edit a role',
+                })}
+                subtitle={formatMessage({
                   id: 'Settings.roles.create.description',
                   defaultMessage: 'Define the rights given to the role',
                 })}
-                actions={headerActions(handleSubmit, handleReset)}
-                isLoading={isLayoutLoading || isRoleLoading}
+                as="h1"
               />
-              <BaselineAlignment top size="3px" />
-              <RoleForm
-                isLoading={isRoleLoading}
-                disabled={isFormDisabled}
-                errors={errors}
-                values={values}
-                onChange={handleChange}
-                onBlur={handleBlur}
-                role={role}
-              />
-              {!isLayoutLoading && !isRoleLoading && (
-                <Padded top bottom size="md">
-                  <Permissions
-                    isFormDisabled={isFormDisabled}
-                    permissions={rolePermissions}
-                    ref={permissionsRef}
-                    layout={permissionsLayout}
-                  />
-                </Padded>
-              )}
-            </ContainerFluid>
+              <ContentLayout>
+                <RoleForm
+                  isLoading={isRoleLoading}
+                  disabled={isFormDisabled}
+                  errors={errors}
+                  values={values}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                  role={role}
+                />
+                {!isLayoutLoading && !isRoleLoading && (
+                  <Box paddingTop={6} paddingBottom={6}>
+                    <Permissions
+                      isFormDisabled={isFormDisabled}
+                      permissions={rolePermissions}
+                      ref={permissionsRef}
+                      layout={permissionsLayout}
+                    />
+                  </Box>
+                )}
+              </ContentLayout>
+            </>
           </form>
         )}
       </Formik>
-    </>
+    </Main>
   );
 };