@strapi/plugin-users-permissions 4.12.6 → 4.12.7

package/admin/src/pages/Roles/EditPage.js

@@ -0,0 +1,197 @@
+import React, { useRef, useState } from 'react';
+
+import {
+  ContentLayout,
+  HeaderLayout,
+  Main,
+  Button,
+  Flex,
+  Box,
+  TextInput,
+  Textarea,
+  Typography,
+  GridItem,
+  Grid,
+} from '@strapi/design-system';
+import {
+  useFetchClient,
+  useOverlayBlocker,
+  SettingsPageTitle,
+  LoadingIndicatorPage,
+  Form,
+  useNotification,
+  Link,
+} from '@strapi/helper-plugin';
+import { ArrowLeft, Check } from '@strapi/icons';
+import { Formik } from 'formik';
+import { useIntl } from 'react-intl';
+import { useRouteMatch } from 'react-router-dom';
+
+import UsersPermissions from '../../components/UsersPermissions';
+import { usePlugins, useFetchRole } from '../../hooks';
+import pluginId from '../../pluginId';
+import getTrad from '../../utils/getTrad';
+
+import { createRoleSchema } from './constants';
+
+const EditPage = () => {
+  const { formatMessage } = useIntl();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const toggleNotification = useNotification();
+  const { lockApp, unlockApp } = useOverlayBlocker();
+  const {
+    params: { id },
+  } = useRouteMatch(`/settings/${pluginId}/roles/:id`);
+  const { isLoading: isLoadingPlugins, routes } = usePlugins();
+  const { role, onSubmitSucceeded, isLoading: isLoadingRole } = useFetchRole(id);
+  const permissionsRef = useRef();
+  const { put } = useFetchClient();
+
+  const handleEditRoleSubmit = async (data) => {
+    // Set loading state
+    lockApp();
+    setIsSubmitting(true);
+    try {
+      const permissions = permissionsRef.current.getPermissions();
+      // Update role in Strapi
+      await put(`/${pluginId}/roles/${id}`, { ...data, ...permissions, users: [] });
+      // Notify success
+      onSubmitSucceeded({ name: data.name, description: data.description });
+      toggleNotification({
+        type: 'success',
+        message: {
+          id: getTrad('Settings.roles.edited'),
+          defaultMessage: 'Role edited',
+        },
+      });
+    } catch (err) {
+      console.error(err);
+      toggleNotification({
+        type: 'warning',
+        message: {
+          id: 'notification.error',
+          defaultMessage: 'An error occurred',
+        },
+      });
+    }
+    // Unset loading state
+    setIsSubmitting(false);
+    unlockApp();
+  };
+
+  if (isLoadingRole) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return (
+    <Main>
+      <SettingsPageTitle name="Roles" />
+      <Formik
+        enableReinitialize
+        initialValues={{ name: role.name, description: role.description }}
+        onSubmit={handleEditRoleSubmit}
+        validationSchema={createRoleSchema}
+      >
+        {({ handleSubmit, values, handleChange, errors }) => (
+          <Form noValidate onSubmit={handleSubmit}>
+            <HeaderLayout
+              primaryAction={
+                !isLoadingPlugins && (
+                  <Button
+                    disabled={role.code === 'strapi-super-admin'}
+                    type="submit"
+                    loading={isSubmitting}
+                    startIcon={<Check />}
+                  >
+                    {formatMessage({
+                      id: 'global.save',
+                      defaultMessage: 'Save',
+                    })}
+                  </Button>
+                )
+              }
+              title={role.name}
+              subtitle={role.description}
+              navigationAction={
+                <Link startIcon={<ArrowLeft />} to="/settings/users-permissions/roles">
+                  {formatMessage({
+                    id: 'global.back',
+                    defaultMessage: 'Back',
+                  })}
+                </Link>
+              }
+            />
+            <ContentLayout>
+              <Flex direction="column" alignItems="stretch" gap={7}>
+                <Box
+                  background="neutral0"
+                  hasRadius
+                  shadow="filterShadow"
+                  paddingTop={6}
+                  paddingBottom={6}
+                  paddingLeft={7}
+                  paddingRight={7}
+                >
+                  <Flex direction="column" alignItems="stretch" gap={4}>
+                    <Typography variant="delta" as="h2">
+                      {formatMessage({
+                        id: getTrad('EditPage.form.roles'),
+                        defaultMessage: 'Role details',
+                      })}
+                    </Typography>
+                    <Grid gap={4}>
+                      <GridItem col={6}>
+                        <TextInput
+                          name="name"
+                          value={values.name || ''}
+                          onChange={handleChange}
+                          label={formatMessage({
+                            id: 'global.name',
+                            defaultMessage: 'Name',
+                          })}
+                          error={
+                            errors.name
+                              ? formatMessage({ id: errors.name, defaultMessage: 'Invalid value' })
+                              : null
+                          }
+                        />
+                      </GridItem>
+                      <GridItem col={6}>
+                        <Textarea
+                          id="description"
+                          value={values.description || ''}
+                          onChange={handleChange}
+                          label={formatMessage({
+                            id: 'global.description',
+                            defaultMessage: 'Description',
+                          })}
+                          error={
+                            errors.description
+                              ? formatMessage({
+                                  id: errors.description,
+                                  defaultMessage: 'Invalid value',
+                                })
+                              : null
+                          }
+                        />
+                      </GridItem>
+                    </Grid>
+                  </Flex>
+                </Box>
+                {!isLoadingPlugins && (
+                  <UsersPermissions
+                    ref={permissionsRef}
+                    permissions={role.permissions}
+                    routes={routes}
+                  />
+                )}
+              </Flex>
+            </ContentLayout>
+          </Form>
+        )}
+      </Formik>
+    </Main>
+  );
+};
+
+export default EditPage;

package/admin/src/pages/Roles/{pages/ListPage → ListPage}/components/TableBody.js

@@ -1,39 +1,13 @@
 import React from 'react';
 
-import { Flex, IconButton, Link, Tbody, Td, Tr, Typography } from '@strapi/design-system';
-import { CheckPermissions, onRowClick, pxToRem, stopPropagation } from '@strapi/helper-plugin';
+import { Flex, IconButton, Tbody, Td, Tr, Typography } from '@strapi/design-system';
+import { CheckPermissions, onRowClick, stopPropagation } from '@strapi/helper-plugin';
 import { Pencil, Trash } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
 
-const EditLink = styled(Link)`
-  align-items: center;
-  height: ${pxToRem(32)};
-  display: flex;
-  justify-content: center;
-  padding: ${({ theme }) => `${theme.spaces[2]}}`};
-  width: ${pxToRem(32)};
-
-  svg {
-    height: ${pxToRem(12)};
-    width: ${pxToRem(12)};
-
-    path {
-      fill: ${({ theme }) => theme.colors.neutral500};
-    }
-  }
-
-  &:hover,
-  &:focus {
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.neutral800};
-      }
-    }
-  }
-`;
+import pluginId from '../../../../pluginId';
 
 const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDelete }) => {
   const { formatMessage } = useIntl();
@@ -49,7 +23,7 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
   };
 
   const handleClickEdit = (id) => {
-    push(`/settings/users-permissions/roles/${id}`);
+    push(`/settings/${pluginId}/roles/${id}`);
   };
 
   return (
@@ -65,10 +39,7 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
           <Td width="30%">
             <Typography>
               {formatMessage(
-                {
-                  id: 'Roles.RoleRow.user-count',
-                  defaultMessage: '{number, plural, =0 {# user} one {# user} other {# users}}',
-                },
+                { id: 'Roles.RoleRow.user-count', defaultMessage: '{number, plural, =0 {# user} one {# user} other {# users}}' },
                 { number: role.nb_users }
               )}
             </Typography>
@@ -76,17 +47,16 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
           <Td>
             <Flex justifyContent="end" {...stopPropagation}>
               <CheckPermissions permissions={permissions.updateRole}>
-                <EditLink
-                  to={`/settings/users-permissions/roles/${role.id}`}
-                  aria-label={formatMessage(
+                <IconButton
+                  onClick={() => handleClickEdit(role.id)}
+                  noBorder
+                  icon={<Pencil />}
+                  label={formatMessage(
                     { id: 'app.component.table.edit', defaultMessage: 'Edit {target}' },
                     { target: `${role.name}` }
                   )}
-                >
-                  <Pencil />
-                </EditLink>
+                />
               </CheckPermissions>
-
               {checkCanDeleteRole(role) && (
                 <CheckPermissions permissions={permissions.deleteRole}>
                   <IconButton

package/admin/src/pages/Roles/{pages/ListPage → ListPage}/index.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import {
   ActionLayout,
+  Button,
   ContentLayout,
   HeaderLayout,
   Layout,
@@ -15,11 +16,9 @@ import {
   VisuallyHidden,
 } from '@strapi/design-system';
 import {
-  CheckPagePermissions,
   CheckPermissions,
   ConfirmDialog,
   EmptyStateLayout,
-  LinkButton,
   LoadingIndicatorPage,
   NoPermissions,
   SearchURLQuery,
@@ -35,16 +34,19 @@ import {
 import { Plus } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery } from 'react-query';
+import { useHistory } from 'react-router-dom';
 
-import { PERMISSIONS } from '../../../../constants';
-import { getTrad } from '../../../../utils';
+import { PERMISSIONS } from '../../../constants';
+import pluginId from '../../../pluginId';
+import { getTrad } from '../../../utils';
 
 import TableBody from './components/TableBody';
 import { deleteData, fetchData } from './utils/api';
 
-export const RolesListPage = () => {
+const RoleListPage = () => {
   const { trackUsage } = useTracking();
   const { formatMessage, locale } = useIntl();
+  const { push } = useHistory();
   const toggleNotification = useNotification();
   const { notifyStatus } = useNotifyAT();
   const [{ query }] = useQueryParams();
@@ -87,6 +89,11 @@ export const RolesListPage = () => {
 
   const isLoading = isLoadingForData || isFetching;
 
+  const handleNewRoleClick = () => {
+    trackUsage('willCreateRole');
+    push(`/settings/${pluginId}/roles/new`);
+  };
+
   const handleShowConfirmDelete = () => {
     setShowConfirmDelete(!showConfirmDelete);
   };
@@ -146,17 +153,12 @@ export const RolesListPage = () => {
           })}
           primaryAction={
             <CheckPermissions permissions={PERMISSIONS.createRole}>
-              <LinkButton
-                to="/settings/users-permissions/roles/new"
-                onClick={() => trackUsage('willCreateRole')}
-                startIcon={<Plus />}
-                size="S"
-              >
+              <Button onClick={handleNewRoleClick} startIcon={<Plus />} size="S">
                 {formatMessage({
                   id: getTrad('List.button.roles'),
                   defaultMessage: 'Add new role',
                 })}
-              </LinkButton>
+              </Button>
             </CheckPermissions>
           }
         />
@@ -233,10 +235,4 @@ export const RolesListPage = () => {
   );
 };
 
-export const ProtectedRolesListPage = () => {
-  return (
-    <CheckPagePermissions permissions={PERMISSIONS.accessRoles}>
-      <RolesListPage />
-    </CheckPagePermissions>
-  );
-};
+export default RoleListPage;

package/admin/src/pages/Roles/ProtectedCreatePage.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { CheckPagePermissions } from '@strapi/helper-plugin';
+
+import { PERMISSIONS } from '../../constants';
+
+import RolesCreatePage from './CreatePage';
+
+const ProtectedRolesCreatePage = () => (
+  <CheckPagePermissions permissions={PERMISSIONS.createRole}>
+    <RolesCreatePage />
+  </CheckPagePermissions>
+);
+
+export default ProtectedRolesCreatePage;

package/admin/src/pages/Roles/ProtectedEditPage.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { CheckPagePermissions } from '@strapi/helper-plugin';
+
+import { PERMISSIONS } from '../../constants';
+
+import RolesEditPage from './EditPage';
+
+const ProtectedRolesEditPage = () => (
+  <CheckPagePermissions permissions={PERMISSIONS.updateRole}>
+    <RolesEditPage />
+  </CheckPagePermissions>
+);
+
+export default ProtectedRolesEditPage;

package/admin/src/pages/Roles/ProtectedListPage.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { CheckPagePermissions } from '@strapi/helper-plugin';
+
+import { PERMISSIONS } from '../../constants';
+
+import RolesListPage from './ListPage';
+
+const ProtectedRolesListPage = () => {
+  return (
+    <CheckPagePermissions permissions={PERMISSIONS.accessRoles}>
+      <RolesListPage />
+    </CheckPagePermissions>
+  );
+};
+
+export default ProtectedRolesListPage;

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

@@ -4,26 +4,23 @@ import { AnErrorOccurred, CheckPagePermissions } from '@strapi/helper-plugin';
 import { Route, Switch } from 'react-router-dom';
 
 import { PERMISSIONS } from '../../constants';
+import pluginId from '../../pluginId';
 
-import { ProtectedRolesCreatePage } from './pages/CreatePage';
-import { ProtectedRolesEditPage } from './pages/EditPage';
-import { ProtectedRolesListPage } from './pages/ListPage';
+import ProtectedRolesCreatePage from './ProtectedCreatePage';
+import ProtectedRolesEditPage from './ProtectedEditPage';
+import ProtectedRolesListPage from './ProtectedListPage';
 
 const Roles = () => {
   return (
     <CheckPagePermissions permissions={PERMISSIONS.accessRoles}>
       <Switch>
         <Route
-          path="/settings/users-permissions/roles/new"
+          path={`/settings/${pluginId}/roles/new`}
           component={ProtectedRolesCreatePage}
           exact
         />
-        <Route
-          path="/settings/users-permissions/roles/:id"
-          component={ProtectedRolesEditPage}
-          exact
-        />
-        <Route path="/settings/users-permissions/roles" component={ProtectedRolesListPage} exact />
+        <Route path={`/settings/${pluginId}/roles/:id`} component={ProtectedRolesEditPage} exact />
+        <Route path={`/settings/${pluginId}/roles`} component={ProtectedRolesListPage} exact />
         <Route path="" component={AnErrorOccurred} />
       </Switch>
     </CheckPagePermissions>

package/jest.config.front.js

@@ -3,5 +3,5 @@
 module.exports = {
   preset: '../../../jest-preset.front.js',
   displayName: 'Users & Permissions plugin',
-  setupFilesAfterEnv: ['./admin/src/tests/setup.js'],
+  setupFilesAfterEnv: ['./tests/setup.js'],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/plugin-users-permissions",
-  "version": "4.12.6",
+  "version": "4.12.7",
   "description": "Protect your API with a full-authentication process based on JWT",
   "repository": {
     "type": "git",
@@ -30,9 +30,9 @@
   },
   "dependencies": {
     "@strapi/design-system": "1.9.0",
-    "@strapi/helper-plugin": "4.12.6",
+    "@strapi/helper-plugin": "4.12.7",
     "@strapi/icons": "1.9.0",
-    "@strapi/utils": "4.12.6",
+    "@strapi/utils": "4.12.7",
     "bcryptjs": "2.4.3",
     "formik": "2.4.0",
     "grant-koa": "5.4.8",
@@ -77,5 +77,5 @@
     "required": true,
     "kind": "plugin"
   },
-  "gitHead": "9bb6ba1e0d07c65423e99075438262540a042d76"
+  "gitHead": "fefc4a24acc60a59c00049e67a99ec1069be2add"
 }

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

@@ -1,190 +0,0 @@
-import * as React from 'react';
-
-import {
-  Button,
-  ContentLayout,
-  Flex,
-  Grid,
-  GridItem,
-  HeaderLayout,
-  Main,
-  Textarea,
-  TextInput,
-  Typography,
-} from '@strapi/design-system';
-import {
-  CheckPagePermissions,
-  Form,
-  SettingsPageTitle,
-  useFetchClient,
-  useNotification,
-  useOverlayBlocker,
-  useTracking,
-} from '@strapi/helper-plugin';
-import { Check } from '@strapi/icons';
-import { Formik } from 'formik';
-import { useIntl } from 'react-intl';
-import { useMutation } from 'react-query';
-import { useHistory } from 'react-router-dom';
-
-import UsersPermissions from '../../../components/UsersPermissions';
-import { PERMISSIONS } from '../../../constants';
-import getTrad from '../../../utils/getTrad';
-import { createRoleSchema } from '../constants';
-import { usePlugins } from '../hooks/usePlugins';
-
-export const CreatePage = () => {
-  const { formatMessage } = useIntl();
-  const toggleNotification = useNotification();
-  const { goBack } = useHistory();
-  const { lockApp, unlockApp } = useOverlayBlocker();
-  const { isLoading: isLoadingPlugins, permissions, routes } = usePlugins();
-  const { trackUsage } = useTracking();
-  const permissionsRef = React.useRef();
-  const { post } = useFetchClient();
-  const mutation = useMutation((body) => post(`/users-permissions/roles`, body), {
-    onError() {
-      toggleNotification({
-        type: 'warning',
-        message: {
-          id: 'notification.error',
-          defaultMessage: 'An error occurred',
-        },
-      });
-    },
-
-    onSuccess() {
-      trackUsage('didCreateRole');
-
-      toggleNotification({
-        type: 'success',
-        message: {
-          id: getTrad('Settings.roles.created'),
-          defaultMessage: 'Role created',
-        },
-      });
-
-      // Forcing redirecting since we don't have the id in the response
-      goBack();
-    },
-  });
-
-  const handleCreateRoleSubmit = async (data) => {
-    lockApp();
-
-    // TODO: refactor. Child -> parent component communication is evil;
-    // We should either move the provider one level up or move the state
-    // straight into redux.
-    const permissions = permissionsRef.current.getPermissions();
-
-    await mutation.mutate({ ...data, ...permissions, users: [] });
-
-    unlockApp();
-  };
-
-  return (
-    <Main>
-      {/* TODO: This needs to be translated */}
-      <SettingsPageTitle name="Roles" />
-      <Formik
-        enableReinitialize
-        initialValues={{ name: '', description: '' }}
-        onSubmit={handleCreateRoleSubmit}
-        validationSchema={createRoleSchema}
-      >
-        {({ handleSubmit, values, handleChange, errors }) => (
-          <Form noValidate onSubmit={handleSubmit}>
-            <HeaderLayout
-              primaryAction={
-                !isLoadingPlugins && (
-                  <Button type="submit" loading={mutation.isLoading} startIcon={<Check />}>
-                    {formatMessage({
-                      id: 'global.save',
-                      defaultMessage: 'Save',
-                    })}
-                  </Button>
-                )
-              }
-              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',
-              })}
-            />
-            <ContentLayout>
-              <Flex
-                background="neutral0"
-                direction="column"
-                alignItems="stretch"
-                gap={7}
-                hasRadius
-                paddingTop={6}
-                paddingBottom={6}
-                paddingLeft={7}
-                paddingRight={7}
-                shadow="filterShadow"
-              >
-                <Flex direction="column" alignItems="stretch">
-                  <Typography variant="delta" as="h2">
-                    {formatMessage({
-                      id: getTrad('EditPage.form.roles'),
-                      defaultMessage: 'Role details',
-                    })}
-                  </Typography>
-
-                  <Grid gap={4}>
-                    <GridItem col={6}>
-                      <TextInput
-                        name="name"
-                        value={values.name || ''}
-                        onChange={handleChange}
-                        label={formatMessage({
-                          id: 'global.name',
-                          defaultMessage: 'Name',
-                        })}
-                        error={errors?.name ? formatMessage({ id: errors.name }) : false}
-                        required
-                      />
-                    </GridItem>
-                    <GridItem col={6}>
-                      <Textarea
-                        id="description"
-                        value={values.description || ''}
-                        onChange={handleChange}
-                        label={formatMessage({
-                          id: 'global.description',
-                          defaultMessage: 'Description',
-                        })}
-                        error={
-                          errors?.description ? formatMessage({ id: errors.description }) : false
-                        }
-                        required
-                      />
-                    </GridItem>
-                  </Grid>
-                </Flex>
-
-                {!isLoadingPlugins && (
-                  <UsersPermissions
-                    ref={permissionsRef}
-                    permissions={permissions}
-                    routes={routes}
-                  />
-                )}
-              </Flex>
-            </ContentLayout>
-          </Form>
-        )}
-      </Formik>
-    </Main>
-  );
-};
-
-export const ProtectedRolesCreatePage = () => (
-  <CheckPagePermissions permissions={PERMISSIONS.createRole}>
-    <CreatePage />
-  </CheckPagePermissions>
-);