@strapi/plugin-users-permissions 0.0.0-next.dff425769af4d4d006725a10c395f59637403653 → 0.0.0-next.e037a7b2d1f48b7bd8bcd0d9400ca0f9ded8a982

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

@@ -0,0 +1,190 @@
+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>
+);

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

@@ -0,0 +1,211 @@
+import * as React from 'react';
+
+import {
+  ContentLayout,
+  HeaderLayout,
+  Main,
+  Button,
+  Flex,
+  TextInput,
+  Textarea,
+  Typography,
+  GridItem,
+  Grid,
+} from '@strapi/design-system';
+import {
+  CheckPagePermissions,
+  useOverlayBlocker,
+  SettingsPageTitle,
+  LoadingIndicatorPage,
+  Form,
+  useAPIErrorHandler,
+  useFetchClient,
+  useNotification,
+  Link,
+} from '@strapi/helper-plugin';
+import { ArrowLeft, Check } from '@strapi/icons';
+import { Formik } from 'formik';
+import { useIntl } from 'react-intl';
+import { useQuery, useMutation } from 'react-query';
+import { useRouteMatch } 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 EditPage = () => {
+  const { formatMessage } = useIntl();
+  const toggleNotification = useNotification();
+  const { lockApp, unlockApp } = useOverlayBlocker();
+  const {
+    params: { id },
+  } = useRouteMatch(`/settings/users-permissions/roles/:id`);
+  const { get } = useFetchClient();
+  const { isLoading: isLoadingPlugins, routes } = usePlugins();
+  const {
+    data: role,
+    isLoading: isLoadingRole,
+    refetch: refetchRole,
+  } = useQuery(['users-permissions', 'role', id], async () => {
+    // TODO: why doesn't this endpoint follow the admin API conventions?
+    const {
+      data: { role },
+    } = await get(`/users-permissions/roles/${id}`);
+
+    return role;
+  });
+
+  const permissionsRef = React.useRef();
+  const { put } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
+  const mutation = useMutation((body) => put(`/users-permissions/roles/${id}`, body), {
+    onError(error) {
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(error),
+      });
+    },
+
+    async onSuccess() {
+      toggleNotification({
+        type: 'success',
+        message: {
+          id: getTrad('Settings.roles.created'),
+          defaultMessage: 'Role edited',
+        },
+      });
+
+      await refetchRole();
+    },
+  });
+
+  const handleEditRoleSubmit = async (data) => {
+    // Set loading state
+    lockApp();
+
+    const permissions = permissionsRef.current.getPermissions();
+
+    await mutation.mutate({ ...data, ...permissions, users: [] });
+
+    unlockApp();
+  };
+
+  if (isLoadingRole) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return (
+    <Main>
+      {/* TODO: this needs to be translated */}
+      <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={mutation.isLoading}
+                    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
+                background="neutral0"
+                direction="column"
+                alignItems="stretch"
+                gap={7}
+                hasRadius
+                paddingTop={6}
+                paddingBottom={6}
+                paddingLeft={7}
+                paddingRight={7}
+                shadow="filterShadow"
+              >
+                <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 }) : 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={role.permissions}
+                    routes={routes}
+                  />
+                )}
+              </Flex>
+            </ContentLayout>
+          </Form>
+        )}
+      </Formik>
+    </Main>
+  );
+};
+
+export const ProtectedRolesEditPage = () => (
+  <CheckPagePermissions permissions={PERMISSIONS.updateRole}>
+    <EditPage />
+  </CheckPagePermissions>
+);

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

@@ -1,12 +1,39 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { IconButton, Typography, Flex, Tbody, Tr, Td } from '@strapi/design-system';
+
+import { Flex, IconButton, Link, Tbody, Td, Tr, Typography } from '@strapi/design-system';
+import { CheckPermissions, onRowClick, pxToRem, stopPropagation } from '@strapi/helper-plugin';
 import { Pencil, Trash } from '@strapi/icons';
-import { CheckPermissions, onRowClick, stopPropagation } from '@strapi/helper-plugin';
+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)};
 
-import pluginId from '../../../../pluginId';
+  svg {
+    height: ${pxToRem(12)};
+    width: ${pxToRem(12)};
+
+    path {
+      fill: ${({ theme }) => theme.colors.neutral500};
+    }
+  }
+
+  &:hover,
+  &:focus {
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.neutral800};
+      }
+    }
+  }
+`;
 
 const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDelete }) => {
   const { formatMessage } = useIntl();
@@ -22,7 +49,7 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
   };
 
   const handleClickEdit = (id) => {
-    push(`/settings/${pluginId}/roles/${id}`);
+    push(`/settings/users-permissions/roles/${id}`);
   };
 
   return (
@@ -37,25 +64,29 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
           </Td>
           <Td width="30%">
             <Typography>
-              {`${role.nb_users} ${formatMessage({
-                id: 'global.users',
-                defaultMessage: 'users',
-              }).toLowerCase()}`}
+              {formatMessage(
+                {
+                  id: 'Roles.RoleRow.user-count',
+                  defaultMessage: '{number, plural, =0 {# user} one {# user} other {# users}}',
+                },
+                { number: role.nb_users }
+              )}
             </Typography>
           </Td>
           <Td>
             <Flex justifyContent="end" {...stopPropagation}>
               <CheckPermissions permissions={permissions.updateRole}>
-                <IconButton
-                  onClick={() => handleClickEdit(role.id)}
-                  noBorder
-                  icon={<Pencil />}
-                  label={formatMessage(
+                <EditLink
+                  to={`/settings/users-permissions/roles/${role.id}`}
+                  aria-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/{ListPage → pages/ListPage}/index.js

@@ -1,49 +1,50 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
+
 import {
-  Button,
+  ActionLayout,
+  ContentLayout,
   HeaderLayout,
   Layout,
-  ContentLayout,
-  ActionLayout,
   Main,
   Table,
-  Tr,
-  Thead,
   Th,
+  Thead,
+  Tr,
   Typography,
   useNotifyAT,
   VisuallyHidden,
 } from '@strapi/design-system';
-import { Plus } from '@strapi/icons';
 import {
-  useTracking,
-  SettingsPageTitle,
+  CheckPagePermissions,
   CheckPermissions,
-  useNotification,
-  useRBAC,
-  NoPermissions,
+  ConfirmDialog,
+  EmptyStateLayout,
+  LinkButton,
   LoadingIndicatorPage,
+  NoPermissions,
   SearchURLQuery,
+  SettingsPageTitle,
+  useCollator,
+  useFilter,
   useFocusWhenNavigate,
+  useNotification,
   useQueryParams,
-  EmptyStateLayout,
-  ConfirmDialog,
+  useRBAC,
+  useTracking,
 } from '@strapi/helper-plugin';
+import { Plus } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
-import matchSorter from 'match-sorter';
-
-import { fetchData, deleteData } from './utils/api';
-import { getTrad } from '../../../utils';
-import pluginId from '../../../pluginId';
-import permissions from '../../../permissions';
+import { useMutation, useQuery } from 'react-query';
+
+import { PERMISSIONS } from '../../../../constants';
+import { getTrad } from '../../../../utils';
+
 import TableBody from './components/TableBody';
+import { deleteData, fetchData } from './utils/api';
 
-const RoleListPage = () => {
+export const RolesListPage = () => {
   const { trackUsage } = useTracking();
-  const { formatMessage } = useIntl();
-  const { push } = useHistory();
+  const { formatMessage, locale } = useIntl();
   const toggleNotification = useNotification();
   const { notifyStatus } = useNotifyAT();
   const [{ query }] = useQueryParams();
@@ -53,37 +54,38 @@ const RoleListPage = () => {
   const [roleToDelete, setRoleToDelete] = useState();
   useFocusWhenNavigate();
 
-  const queryClient = useQueryClient();
-
-  const updatePermissions = useMemo(() => {
-    return {
-      create: permissions.createRole,
-      read: permissions.readRoles,
-      update: permissions.updateRole,
-      delete: permissions.deleteRole,
-    };
-  }, []);
-
   const {
     isLoading: isLoadingForPermissions,
     allowedActions: { canRead, canDelete },
-  } = useRBAC(updatePermissions);
+  } = useRBAC({
+    create: PERMISSIONS.createRole,
+    read: PERMISSIONS.readRoles,
+    update: PERMISSIONS.updateRole,
+    delete: PERMISSIONS.deleteRole,
+  });
 
   const {
     isLoading: isLoadingForData,
     data: { roles },
     isFetching,
+    refetch,
   } = useQuery('get-roles', () => fetchData(toggleNotification, notifyStatus), {
     initialData: {},
     enabled: canRead,
   });
 
-  const isLoading = isLoadingForData || isFetching;
+  const { includes } = useFilter(locale, {
+    sensitivity: 'base',
+  });
 
-  const handleNewRoleClick = () => {
-    trackUsage('willCreateRole');
-    push(`/settings/${pluginId}/roles/new`);
-  };
+  /**
+   * @type {Intl.Collator}
+   */
+  const formatter = useCollator(locale, {
+    sensitivity: 'base',
+  });
+
+  const isLoading = isLoadingForData || isFetching;
 
   const handleShowConfirmDelete = () => {
     setShowConfirmDelete(!showConfirmDelete);
@@ -107,7 +109,7 @@ const RoleListPage = () => {
 
   const deleteMutation = useMutation((id) => deleteData(id, toggleNotification), {
     async onSuccess() {
-      await queryClient.invalidateQueries('get-roles');
+      await refetch();
     },
   });
 
@@ -118,7 +120,12 @@ const RoleListPage = () => {
     setIsConfirmButtonLoading(false);
   };
 
-  const sortedRoles = matchSorter(roles || [], _q, { keys: ['name', 'description'] });
+  const sortedRoles = (roles || [])
+    .filter((role) => includes(role.name, _q) || includes(role.description, _q))
+    .sort(
+      (a, b) => formatter.compare(a.name, b.name) || formatter.compare(a.description, b.description)
+    );
+
   const emptyContent = _q && !sortedRoles.length ? 'search' : 'roles';
 
   const colCount = 4;
@@ -138,13 +145,18 @@ const RoleListPage = () => {
             defaultMessage: 'List of roles',
           })}
           primaryAction={
-            <CheckPermissions permissions={permissions.createRole}>
-              <Button onClick={handleNewRoleClick} startIcon={<Plus />} size="S">
+            <CheckPermissions permissions={PERMISSIONS.createRole}>
+              <LinkButton
+                to="/settings/users-permissions/roles/new"
+                onClick={() => trackUsage('willCreateRole')}
+                startIcon={<Plus />}
+                size="S"
+              >
                 {formatMessage({
                   id: getTrad('List.button.roles'),
                   defaultMessage: 'Add new role',
                 })}
-              </Button>
+              </LinkButton>
             </CheckPermissions>
           }
         />
@@ -201,7 +213,7 @@ const RoleListPage = () => {
               <TableBody
                 sortedRoles={sortedRoles}
                 canDelete={canDelete}
-                permissions={permissions}
+                permissions={PERMISSIONS}
                 setRoleToDelete={setRoleToDelete}
                 onDelete={[showConfirmDelete, setShowConfirmDelete]}
               />
@@ -221,4 +233,10 @@ const RoleListPage = () => {
   );
 };
 
-export default RoleListPage;
+export const ProtectedRolesListPage = () => {
+  return (
+    <CheckPagePermissions permissions={PERMISSIONS.accessRoles}>
+      <RolesListPage />
+    </CheckPagePermissions>
+  );
+};