@strapi/admin 4.7.2-exp.175f7ac70ee76d6c825e4429e15fc85ee78d23bb → 4.8.0

package/admin/src/pages/SettingsPage/pages/Roles/CreatePage/index.js

@@ -1,8 +1,270 @@
-import React from 'react';
-import { Redirect } from 'react-router-dom';
+import React, { useRef, useState } from 'react';
+import { format } from 'date-fns';
+import {
+  CheckPagePermissions,
+  Form,
+  LoadingIndicatorPage,
+  SettingsPageTitle,
+  request,
+  useNotification,
+  useOverlayBlocker,
+  useTracking,
+  Link,
+} from '@strapi/helper-plugin';
+import {
+  Box,
+  Button,
+  ContentLayout,
+  HeaderLayout,
+  Grid,
+  GridItem,
+  Main,
+  Flex,
+  Typography,
+  TextInput,
+  Textarea,
+} from '@strapi/design-system';
+import { ArrowLeft } from '@strapi/icons';
+import { Formik } from 'formik';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import { useIntl } from 'react-intl';
+import { useHistory, useRouteMatch } from 'react-router-dom';
+import styled from 'styled-components';
+import Permissions from '../EditPage/components/Permissions';
+import { useFetchPermissionsLayout, useFetchRole } from '../../../../../hooks';
+import adminPermissions from '../../../../../permissions';
+import schema from './utils/schema';
+
+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-weight: bold;
+`;
 
 const CreatePage = () => {
-  return <Redirect to="/404" />;
+  const toggleNotification = useNotification();
+  const { lockApp, unlockApp } = useOverlayBlocker();
+  const { formatMessage } = useIntl();
+  const [isSubmitting, setIsSubmiting] = useState(false);
+  const { replace } = useHistory();
+  const permissionsRef = useRef();
+  const { trackUsage } = useTracking();
+  const params = useRouteMatch('/settings/roles/duplicate/:id');
+  const id = get(params, 'params.id', null);
+  const { isLoading: isLayoutLoading, data: permissionsLayout } = useFetchPermissionsLayout();
+  const { permissions: rolePermissions, isLoading: isRoleLoading } = useFetchRole(id);
+
+  const handleCreateRoleSubmit = (data) => {
+    lockApp();
+    setIsSubmiting(true);
+
+    if (id) {
+      trackUsage('willDuplicateRole');
+    } else {
+      trackUsage('willCreateNewRole');
+    }
+
+    Promise.resolve(
+      request('/admin/roles', {
+        method: 'POST',
+        body: data,
+      })
+    )
+      .then(async (res) => {
+        const { permissionsToSend } = permissionsRef.current.getPermissions();
+
+        if (id) {
+          trackUsage('didDuplicateRole');
+        } else {
+          trackUsage('didCreateNewRole');
+        }
+
+        if (res.data.id && !isEmpty(permissionsToSend)) {
+          await request(`/admin/roles/${res.data.id}/permissions`, {
+            method: 'PUT',
+            body: { permissions: permissionsToSend },
+          });
+        }
+
+        return res;
+      })
+      .then((res) => {
+        setIsSubmiting(false);
+        toggleNotification({
+          type: 'success',
+          message: { id: 'Settings.roles.created', defaultMessage: 'created' },
+        });
+        replace(`/settings/roles/${res.data.id}`);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmiting(false);
+        toggleNotification({
+          type: 'warning',
+          message: { id: 'notification.error' },
+        });
+      })
+      .finally(() => {
+        unlockApp();
+      });
+  };
+
+  const defaultDescription = `${formatMessage({
+    id: 'Settings.roles.form.created',
+    defaultMessage: 'Created',
+  })} ${format(new Date(), 'PPP')}`;
+
+  return (
+    <Main>
+      <SettingsPageTitle name="Roles" />
+      <Formik
+        initialValues={{ name: '', description: defaultDescription }}
+        onSubmit={handleCreateRoleSubmit}
+        validationSchema={schema}
+        validateOnChange={false}
+      >
+        {({ handleSubmit, values, errors, handleReset, handleChange }) => (
+          <Form noValidate>
+            <>
+              <HeaderLayout
+                primaryAction={
+                  <Flex gap={2}>
+                    <Button
+                      variant="secondary"
+                      onClick={() => {
+                        handleReset();
+                        permissionsRef.current.resetForm();
+                      }}
+                      size="L"
+                    >
+                      {formatMessage({
+                        id: 'app.components.Button.reset',
+                        defaultMessage: 'Reset',
+                      })}
+                    </Button>
+                    <Button onClick={handleSubmit} loading={isSubmitting} size="L">
+                      {formatMessage({
+                        id: 'global.save',
+                        defaultMessage: 'Save',
+                      })}
+                    </Button>
+                  </Flex>
+                }
+                title={formatMessage({
+                  id: 'Settings.roles.create.title',
+                  defaultMessage: 'Create a role',
+                })}
+                subtitle={formatMessage({
+                  id: 'Settings.roles.create.description',
+                  defaultMessage: 'Define the rights given to the role',
+                })}
+                navigationAction={
+                  <Link startIcon={<ArrowLeft />} to="/settings/roles">
+                    {formatMessage({
+                      id: 'global.back',
+                      defaultMessage: 'Back',
+                    })}
+                  </Link>
+                }
+              />
+              <ContentLayout>
+                <Flex direction="column" alignItems="stretch" gap={6}>
+                  <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
+                    <Flex direction="column" alignItems="stretch" gap={4}>
+                      <Flex justifyContent="space-between">
+                        <Box>
+                          <Box>
+                            <Typography fontWeight="bold">
+                              {formatMessage({
+                                id: 'global.details',
+                                defaultMessage: 'Details',
+                              })}
+                            </Typography>
+                          </Box>
+                          <Box>
+                            <Typography variant="pi" textColor="neutral600">
+                              {formatMessage({
+                                id: 'Settings.roles.form.description',
+                                defaultMessage: 'Name and description of the role',
+                              })}
+                            </Typography>
+                          </Box>
+                        </Box>
+                        <UsersRoleNumber>
+                          {formatMessage(
+                            {
+                              id: 'Settings.roles.form.button.users-with-role',
+                              defaultMessage:
+                                '{number, plural, =0 {# users} one {# user} other {# users}} with this role',
+                            },
+                            { number: 0 }
+                          )}
+                        </UsersRoleNumber>
+                      </Flex>
+                      <Grid gap={4}>
+                        <GridItem col={6}>
+                          <TextInput
+                            name="name"
+                            error={errors.name && formatMessage({ id: errors.name })}
+                            label={formatMessage({
+                              id: 'global.name',
+                              defaultMessage: 'Name',
+                            })}
+                            onChange={handleChange}
+                            value={values.name}
+                          />
+                        </GridItem>
+                        <GridItem col={6}>
+                          <Textarea
+                            label={formatMessage({
+                              id: 'global.description',
+                              defaultMessage: 'Description',
+                            })}
+                            name="description"
+                            error={errors.description && formatMessage({ id: errors.description })}
+                            onChange={handleChange}
+                          >
+                            {values.description}
+                          </Textarea>
+                        </GridItem>
+                      </Grid>
+                    </Flex>
+                  </Box>
+                  {!isLayoutLoading && !isRoleLoading ? (
+                    <Box shadow="filterShadow" hasRadius>
+                      <Permissions
+                        isFormDisabled={false}
+                        ref={permissionsRef}
+                        permissions={rolePermissions}
+                        layout={permissionsLayout}
+                      />
+                    </Box>
+                  ) : (
+                    <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
+                      <LoadingIndicatorPage />
+                    </Box>
+                  )}
+                </Flex>
+              </ContentLayout>
+            </>
+          </Form>
+        )}
+      </Formik>
+    </Main>
+  );
 };
 
-export default CreatePage;
+export default function () {
+  return (
+    <CheckPagePermissions permissions={adminPermissions.settings.roles.create}>
+      <CreatePage />
+    </CheckPagePermissions>
+  );
+}
+
+export { CreatePage };

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/utils/constants';
 import { Box, Flex, Typography, MultiSelectNested } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
@@ -52,7 +51,7 @@ const ActionRow = ({
           onChange={handleChange}
           value={getSelectedValues(value)}
           options={getNestedOptions(arrayOfOptionsGroupedByCategory)}
-          disabled={isFormDisabled || IS_DISABLED}
+          disabled={isFormDisabled}
         />
       </Box>
     </Flex>

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

@@ -6,7 +6,6 @@ import get from 'lodash/get';
 import omit from 'lodash/omit';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/utils/constants';
 import { usePermissionsDataManager } from '../../../../../../../../hooks';
 import ConditionsButton from '../../ConditionsButton';
 import ConditionsModal from '../../ConditionsModal';
@@ -179,7 +178,7 @@ const Collapse = ({
                   <Cell key={actionId} justifyContent="center" alignItems="center">
                     {hasConditions && <TinyDot />}
                     <BaseCheckbox
-                      disabled={isFormDisabled || IS_DISABLED}
+                      disabled={isFormDisabled}
                       name={checkboxName}
                       aria-label={formatMessage(
                         {
@@ -208,7 +207,7 @@ const Collapse = ({
                 <Cell key={actionId} justifyContent="center" alignItems="center">
                   {hasConditions && <TinyDot />}
                   <BaseCheckbox
-                    disabled={isFormDisabled || IS_DISABLED}
+                    disabled={isFormDisabled}
                     indeterminate={hasConditions}
                     name={checkboxName}
                     // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91

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

@@ -4,7 +4,6 @@ import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { BaseCheckbox, Flex } from '@strapi/design-system';
 import get from 'lodash/get';
-import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/utils/constants';
 import { usePermissionsDataManager } from '../../../../../../../../../hooks';
 import HiddenAction from '../../../HiddenAction';
 import { cellWidth, rowHeight } from '../../../Permissions/utils/constants';
@@ -133,7 +132,7 @@ const ActionRow = ({
                 return (
                   <Cell key={actionId} justifyContent="center" alignItems="center">
                     <BaseCheckbox
-                      disabled={isFormDisabled || IS_DISABLED}
+                      disabled={isFormDisabled}
                       name={checkboxName.join('..')}
                       aria-label={formatMessage(
                         {
@@ -164,7 +163,7 @@ const ActionRow = ({
               return (
                 <Cell key={label} justifyContent="center" alignItems="center">
                   <BaseCheckbox
-                    disabled={isFormDisabled || IS_DISABLED}
+                    disabled={isFormDisabled}
                     name={checkboxName.join('..')}
                     // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
                     onValueChange={(value) => {

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

@@ -5,7 +5,6 @@ import upperFirst from 'lodash/upperFirst';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { BaseCheckbox, Box, Flex, Typography } from '@strapi/design-system';
-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';
@@ -150,7 +149,7 @@ const SubActionRow = ({
                         return (
                           <Cell key={propertyLabel} justifyContent="center" alignItems="center">
                             <BaseCheckbox
-                              disabled={isFormDisabled || IS_DISABLED}
+                              disabled={isFormDisabled}
                               name={checkboxName.join('..')}
                               aria-label={formatMessage(
                                 {
@@ -181,7 +180,7 @@ const SubActionRow = ({
                         <Cell key={propertyLabel} justifyContent="center" alignItems="center">
                           <BaseCheckbox
                             key={propertyLabel}
-                            disabled={isFormDisabled || IS_DISABLED}
+                            disabled={isFormDisabled}
                             name={checkboxName.join('..')}
                             aria-label={formatMessage(
                               {

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

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { BaseCheckbox, Box, Flex, Typography } from '@strapi/design-system';
 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';
@@ -28,10 +27,16 @@ const GlobalActions = ({ actions, isFormDisabled, kind }) => {
 
   return (
     <Box paddingBottom={4} paddingTop={6} style={{ paddingLeft: firstRowWidth }}>
-      <Flex alignItems="center" justifyContent="center" gap={0}>
+      <Flex gap={0}>
         {displayedActions.map(({ label, actionId }) => {
           return (
-            <CenteredStack key={actionId} spacing={3}>
+            <CenteredStack
+              direction="column"
+              alignItems="center"
+              justifyContent="center"
+              key={actionId}
+              gap={3}
+            >
               <Typography variant="sigma" textColor="neutral500">
                 {formatMessage({
                   id: `Settings.roles.form.permissions.${label.toLowerCase()}`,
@@ -39,7 +44,7 @@ const GlobalActions = ({ actions, isFormDisabled, kind }) => {
                 })}
               </Typography>
               <BaseCheckbox
-                disabled={isFormDisabled || IS_DISABLED}
+                disabled={isFormDisabled}
                 onValueChange={(value) => {
                   onChangeCollectionTypeGlobalActionCheckbox(kind, actionId, value);
                 }}

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

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { Grid, GridItem, Box, Checkbox, Flex, Typography } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
-import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/SubCategory/utils/constants';
 import { usePermissionsDataManager } from '../../../../../../../../hooks';
 import { getCheckboxState, removeConditionKeyFromData } from '../../utils';
 import ConditionsButton from '../../ConditionsButton';
@@ -77,7 +76,7 @@ const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, p
           <Box paddingLeft={4}>
             <Checkbox
               name={pathToData.join('..')}
-              disabled={isFormDisabled || IS_DISABLED}
+              disabled={isFormDisabled}
               // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
               onValueChange={(value) => {
                 onChangeParentCheckbox({
@@ -99,13 +98,10 @@ const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, p
             {formattedActions.map(({ checkboxName, value, action, displayName, hasConditions }) => {
               return (
                 <GridItem col={3} key={action}>
-                  <CheckboxWrapper
-                    disabled={isFormDisabled || IS_DISABLED}
-                    hasConditions={hasConditions}
-                  >
+                  <CheckboxWrapper disabled={isFormDisabled} hasConditions={hasConditions}>
                     <Checkbox
                       name={checkboxName}
-                      disabled={isFormDisabled || IS_DISABLED}
+                      disabled={isFormDisabled}
                       // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
                       onValueChange={(value) => {
                         onChangeSimpleCheckbox({