@strapi/plugin-users-permissions 0.0.0-next.cb00a1799402728de4ecec6d52a815e33fcedaf3 → 0.0.0-next.ce84fada19d58a7dfbdd553035e6558f8befcba4

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

@@ -1,33 +1,28 @@
 import * as React from 'react';
 
 import {
-  ContentLayout,
-  HeaderLayout,
   Main,
   Button,
   Flex,
   TextInput,
   Textarea,
   Typography,
-  GridItem,
   Grid,
+  Field,
 } from '@strapi/design-system';
+import { Check } from '@strapi/icons';
 import {
-  CheckPagePermissions,
-  useOverlayBlocker,
-  SettingsPageTitle,
-  LoadingIndicatorPage,
-  Form,
+  Page,
+  BackButton,
   useAPIErrorHandler,
-  useFetchClient,
   useNotification,
-  Link,
-} from '@strapi/helper-plugin';
-import { ArrowLeft, Check } from '@strapi/icons';
-import { Formik } from 'formik';
+  useFetchClient,
+  Layouts,
+} from '@strapi/strapi/admin';
+import { Formik, Form } from 'formik';
 import { useIntl } from 'react-intl';
 import { useQuery, useMutation } from 'react-query';
-import { useRouteMatch } from 'react-router-dom';
+import { useMatch } from 'react-router-dom';
 
 import UsersPermissions from '../../../components/UsersPermissions';
 import { PERMISSIONS } from '../../../constants';
@@ -37,11 +32,10 @@ import { usePlugins } from '../hooks/usePlugins';
 
 export const EditPage = () => {
   const { formatMessage } = useIntl();
-  const toggleNotification = useNotification();
-  const { lockApp, unlockApp } = useOverlayBlocker();
+  const { toggleNotification } = useNotification();
   const {
     params: { id },
-  } = useRouteMatch(`/settings/users-permissions/roles/:id`);
+  } = useMatch(`/settings/users-permissions/roles/:id`);
   const { get } = useFetchClient();
   const { isLoading: isLoadingPlugins, routes } = usePlugins();
   const {
@@ -63,7 +57,7 @@ export const EditPage = () => {
   const mutation = useMutation((body) => put(`/users-permissions/roles/${id}`, body), {
     onError(error) {
       toggleNotification({
-        type: 'warning',
+        type: 'danger',
         message: formatAPIError(error),
       });
     },
@@ -71,10 +65,10 @@ export const EditPage = () => {
     async onSuccess() {
       toggleNotification({
         type: 'success',
-        message: {
+        message: formatMessage({
           id: getTrad('Settings.roles.created'),
           defaultMessage: 'Role edited',
-        },
+        }),
       });
 
       await refetchRole();
@@ -82,24 +76,23 @@ export const EditPage = () => {
   });
 
   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 <Page.Loading />;
   }
 
   return (
     <Main>
-      {/* TODO: this needs to be translated */}
-      <SettingsPageTitle name="Roles" />
+      <Page.Title>
+        {formatMessage(
+          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
+          { name: 'Roles' }
+        )}
+      </Page.Title>
       <Formik
         enableReinitialize
         initialValues={{ name: role.name, description: role.description }}
@@ -108,9 +101,9 @@ export const EditPage = () => {
       >
         {({ handleSubmit, values, handleChange, errors }) => (
           <Form noValidate onSubmit={handleSubmit}>
-            <HeaderLayout
+            <Layouts.Header
               primaryAction={
-                !isLoadingPlugins && (
+                !isLoadingPlugins ? (
                   <Button
                     disabled={role.code === 'strapi-super-admin'}
                     type="submit"
@@ -122,20 +115,13 @@ export const EditPage = () => {
                       defaultMessage: 'Save',
                     })}
                   </Button>
-                )
+                ) : null
               }
               title={role.name}
               subtitle={role.description}
-              navigationAction={
-                <Link startIcon={<ArrowLeft />} to="/settings/users-permissions/roles">
-                  {formatMessage({
-                    id: 'global.back',
-                    defaultMessage: 'Back',
-                  })}
-                </Link>
-              }
+              navigationAction={<BackButton />}
             />
-            <ContentLayout>
+            <Layouts.Content>
               <Flex
                 background="neutral0"
                 direction="column"
@@ -149,40 +135,40 @@ export const EditPage = () => {
                 shadow="filterShadow"
               >
                 <Flex direction="column" alignItems="stretch" gap={4}>
-                  <Typography variant="delta" as="h2">
+                  <Typography variant="delta" tag="h2">
                     {formatMessage({
                       id: getTrad('EditPage.form.roles'),
                       defaultMessage: 'Role details',
                     })}
                   </Typography>
 
-                  <Grid gap={4}>
-                    <GridItem col={6}>
-                      <TextInput
+                  <Grid.Root gap={4}>
+                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                      <Field.Root
                         name="name"
-                        value={values.name || ''}
-                        onChange={handleChange}
-                        label={formatMessage({
-                          id: 'global.name',
-                          defaultMessage: 'Name',
-                        })}
                         error={
                           errors?.name
-                            ? formatMessage({ id: errors.name, defaultMessage: 'Name is required' })
+                            ? formatMessage({
+                                id: errors.name,
+                                defaultMessage: 'Name is required',
+                              })
                             : false
                         }
                         required
-                      />
-                    </GridItem>
-                    <GridItem col={6}>
-                      <Textarea
-                        id="description"
-                        value={values.description || ''}
-                        onChange={handleChange}
-                        label={formatMessage({
-                          id: 'global.description',
-                          defaultMessage: 'Description',
-                        })}
+                      >
+                        <Field.Label>
+                          {formatMessage({
+                            id: 'global.name',
+                            defaultMessage: 'Name',
+                          })}
+                        </Field.Label>
+                        <TextInput value={values.name || ''} onChange={handleChange} />
+                        <Field.Error />
+                      </Field.Root>
+                    </Grid.Item>
+                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                      <Field.Root
+                        name="description"
                         error={
                           errors?.description
                             ? formatMessage({
@@ -192,9 +178,18 @@ export const EditPage = () => {
                             : false
                         }
                         required
-                      />
-                    </GridItem>
-                  </Grid>
+                      >
+                        <Field.Label>
+                          {formatMessage({
+                            id: 'global.description',
+                            defaultMessage: 'Description',
+                          })}
+                        </Field.Label>
+                        <Textarea value={values.description || ''} onChange={handleChange} />
+                        <Field.Error />
+                      </Field.Root>
+                    </Grid.Item>
+                  </Grid.Root>
                 </Flex>
 
                 {!isLoadingPlugins && (
@@ -205,7 +200,7 @@ export const EditPage = () => {
                   />
                 )}
               </Flex>
-            </ContentLayout>
+            </Layouts.Content>
           </Form>
         )}
       </Formik>
@@ -214,7 +209,7 @@ export const EditPage = () => {
 };
 
 export const ProtectedRolesEditPage = () => (
-  <CheckPagePermissions permissions={PERMISSIONS.updateRole}>
+  <Page.Protect permissions={PERMISSIONS.updateRole}>
     <EditPage />
-  </CheckPagePermissions>
+  </Page.Protect>
 );

package/admin/src/pages/Roles/pages/ListPage/components/TableBody.jsx

@@ -1,24 +1,23 @@
 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 { 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';
+import { useNavigate, NavLink } from 'react-router-dom';
+import { styled } from 'styled-components';
 
 const EditLink = styled(Link)`
   align-items: center;
-  height: ${pxToRem(32)};
+  height: 3.2rem;
+  width: 3.2rem;
   display: flex;
   justify-content: center;
-  padding: ${({ theme }) => `${theme.spaces[2]}}`};
-  width: ${pxToRem(32)};
+  padding: ${({ theme }) => `${theme.spaces[2]}`};
 
   svg {
-    height: ${pxToRem(12)};
-    width: ${pxToRem(12)};
+    height: 1.6rem;
+    width: 1.6rem;
 
     path {
       fill: ${({ theme }) => theme.colors.neutral500};
@@ -35,9 +34,9 @@ const EditLink = styled(Link)`
   }
 `;
 
-const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDelete }) => {
+const TableBody = ({ sortedRoles, canDelete, canUpdate, setRoleToDelete, onDelete }) => {
   const { formatMessage } = useIntl();
-  const { push } = useHistory();
+  const navigate = useNavigate();
   const [showConfirmDelete, setShowConfirmDelete] = onDelete;
 
   const checkCanDeleteRole = (role) =>
@@ -48,14 +47,10 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
     setShowConfirmDelete(!showConfirmDelete);
   };
 
-  const handleClickEdit = (id) => {
-    push(`/settings/users-permissions/roles/${id}`);
-  };
-
   return (
     <Tbody>
       {sortedRoles?.map((role) => (
-        <Tr key={role.name} {...onRowClick({ fn: () => handleClickEdit(role.id) })}>
+        <Tr key={role.name} onClick={() => navigate(role.id.toString())}>
           <Td width="20%">
             <Typography>{role.name}</Typography>
           </Td>
@@ -74,10 +69,11 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
             </Typography>
           </Td>
           <Td>
-            <Flex justifyContent="end" {...stopPropagation}>
-              <CheckPermissions permissions={permissions.updateRole}>
+            <Flex justifyContent="end" onClick={(e) => e.stopPropagation()}>
+              {canUpdate ? (
                 <EditLink
-                  to={`/settings/users-permissions/roles/${role.id}`}
+                  tag={NavLink}
+                  to={role.id.toString()}
                   aria-label={formatMessage(
                     { id: 'app.component.table.edit', defaultMessage: 'Edit {target}' },
                     { target: `${role.name}` }
@@ -85,20 +81,19 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
                 >
                   <Pencil />
                 </EditLink>
-              </CheckPermissions>
+              ) : null}
 
               {checkCanDeleteRole(role) && (
-                <CheckPermissions permissions={permissions.deleteRole}>
-                  <IconButton
-                    onClick={() => handleClickDelete(role.id)}
-                    noBorder
-                    icon={<Trash />}
-                    label={formatMessage(
-                      { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
-                      { target: `${role.name}` }
-                    )}
-                  />
-                </CheckPermissions>
+                <IconButton
+                  onClick={() => handleClickDelete(role.id.toString())}
+                  variant="ghost"
+                  label={formatMessage(
+                    { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
+                    { target: `${role.name}` }
+                  )}
+                >
+                  <Trash />
+                </IconButton>
               )}
             </Flex>
           </Td>
@@ -112,12 +107,13 @@ export default TableBody;
 
 TableBody.defaultProps = {
   canDelete: false,
+  canUpdate: false,
 };
 
 TableBody.propTypes = {
   onDelete: PropTypes.array.isRequired,
-  permissions: PropTypes.object.isRequired,
   setRoleToDelete: PropTypes.func.isRequired,
   sortedRoles: PropTypes.array.isRequired,
   canDelete: PropTypes.bool,
+  canUpdate: PropTypes.bool,
 };

package/admin/src/pages/Roles/pages/ListPage/index.jsx

@@ -1,11 +1,6 @@
 import React, { useState } from 'react';
 
 import {
-  ActionLayout,
-  ContentLayout,
-  HeaderLayout,
-  Layout,
-  Main,
   Table,
   Th,
   Thead,
@@ -13,50 +8,48 @@ import {
   Typography,
   useNotifyAT,
   VisuallyHidden,
-} from '@strapi/design-system';
-import {
-  CheckPagePermissions,
-  CheckPermissions,
-  ConfirmDialog,
   EmptyStateLayout,
-  LinkButton,
-  LoadingIndicatorPage,
-  NoPermissions,
-  SearchURLQuery,
-  SettingsPageTitle,
   useCollator,
   useFilter,
-  useFocusWhenNavigate,
+  LinkButton,
+  Dialog,
+} from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
+import {
+  ConfirmDialog,
+  useTracking,
+  Page,
+  SearchInput,
+  BackButton,
   useNotification,
   useQueryParams,
+  useFetchClient,
   useRBAC,
-  useTracking,
-} from '@strapi/helper-plugin';
-import { Plus } from '@strapi/icons';
+  Layouts,
+} from '@strapi/strapi/admin';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery } from 'react-query';
+import { NavLink } from 'react-router-dom';
 
 import { PERMISSIONS } from '../../../../constants';
 import { getTrad } from '../../../../utils';
 
 import TableBody from './components/TableBody';
-import { deleteData, fetchData } from './utils/api';
 
 export const RolesListPage = () => {
   const { trackUsage } = useTracking();
   const { formatMessage, locale } = useIntl();
-  const toggleNotification = useNotification();
+  const { toggleNotification } = useNotification();
   const { notifyStatus } = useNotifyAT();
   const [{ query }] = useQueryParams();
   const _q = query?._q || '';
   const [showConfirmDelete, setShowConfirmDelete] = useState(false);
-  const [isConfirmButtonLoading, setIsConfirmButtonLoading] = useState(false);
   const [roleToDelete, setRoleToDelete] = useState();
-  useFocusWhenNavigate();
+  const { del, get } = useFetchClient();
 
   const {
     isLoading: isLoadingForPermissions,
-    allowedActions: { canRead, canDelete },
+    allowedActions: { canRead, canDelete, canCreate, canUpdate },
   } = useRBAC({
     create: PERMISSIONS.createRole,
     read: PERMISSIONS.readRoles,
@@ -69,12 +62,12 @@ export const RolesListPage = () => {
     data: { roles },
     isFetching,
     refetch,
-  } = useQuery('get-roles', () => fetchData(toggleNotification, notifyStatus), {
+  } = useQuery('get-roles', () => fetchData(toggleNotification, formatMessage, notifyStatus), {
     initialData: {},
     enabled: canRead,
   });
 
-  const { includes } = useFilter(locale, {
+  const { contains } = useFilter(locale, {
     sensitivity: 'base',
   });
 
@@ -85,12 +78,39 @@ export const RolesListPage = () => {
     sensitivity: 'base',
   });
 
-  const isLoading = isLoadingForData || isFetching;
+  const isLoading = isLoadingForData || isFetching || isLoadingForPermissions;
 
   const handleShowConfirmDelete = () => {
     setShowConfirmDelete(!showConfirmDelete);
   };
 
+  const deleteData = async (id, formatMessage, toggleNotification) => {
+    try {
+      await del(`/users-permissions/roles/${id}`);
+    } catch (error) {
+      toggleNotification({
+        type: 'danger',
+        message: formatMessage({ id: 'notification.error', defaultMessage: 'An error occured' }),
+      });
+    }
+  };
+
+  const fetchData = async (toggleNotification, formatMessage, notifyStatus) => {
+    try {
+      const { data } = await get('/users-permissions/roles');
+      notifyStatus('The roles have loaded successfully');
+
+      return data;
+    } catch (err) {
+      toggleNotification({
+        type: 'danger',
+        message: formatMessage({ id: 'notification.error', defaultMessage: 'An error occurred' }),
+      });
+
+      throw new Error(err);
+    }
+  };
+
   const emptyLayout = {
     roles: {
       id: getTrad('Roles.empty'),
@@ -107,21 +127,19 @@ export const RolesListPage = () => {
     defaultMessage: 'Roles',
   });
 
-  const deleteMutation = useMutation((id) => deleteData(id, toggleNotification), {
+  const deleteMutation = useMutation((id) => deleteData(id, formatMessage, toggleNotification), {
     async onSuccess() {
       await refetch();
     },
   });
 
   const handleConfirmDelete = async () => {
-    setIsConfirmButtonLoading(true);
     await deleteMutation.mutateAsync(roleToDelete);
     setShowConfirmDelete(!showConfirmDelete);
-    setIsConfirmButtonLoading(false);
   };
 
   const sortedRoles = (roles || [])
-    .filter((role) => includes(role.name, _q) || includes(role.description, _q))
+    .filter((role) => contains(role.name, _q) || contains(role.description, _q))
     .sort(
       (a, b) => formatter.compare(a.name, b.name) || formatter.compare(a.description, b.description)
     );
@@ -131,11 +149,20 @@ export const RolesListPage = () => {
   const colCount = 4;
   const rowCount = (roles?.length || 0) + 1;
 
+  if (isLoading) {
+    return <Page.Loading />;
+  }
+
   return (
-    <Layout>
-      <SettingsPageTitle name={pageTitle} />
-      <Main aria-busy={isLoading}>
-        <HeaderLayout
+    <Layouts.Root>
+      <Page.Title>
+        {formatMessage(
+          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
+          { name: pageTitle }
+        )}
+      </Page.Title>
+      <Page.Main>
+        <Layouts.Header
           title={formatMessage({
             id: 'global.roles',
             defaultMessage: 'Roles',
@@ -145,9 +172,10 @@ export const RolesListPage = () => {
             defaultMessage: 'List of roles',
           })}
           primaryAction={
-            <CheckPermissions permissions={PERMISSIONS.createRole}>
+            canCreate ? (
               <LinkButton
-                to="/settings/users-permissions/roles/new"
+                to="new"
+                tag={NavLink}
                 onClick={() => trackUsage('willCreateRole')}
                 startIcon={<Plus />}
                 size="S"
@@ -157,13 +185,14 @@ export const RolesListPage = () => {
                   defaultMessage: 'Add new role',
                 })}
               </LinkButton>
-            </CheckPermissions>
+            ) : null
           }
+          navigationAction={<BackButton />}
         />
 
-        <ActionLayout
+        <Layouts.Action
           startActions={
-            <SearchURLQuery
+            <SearchInput
               label={formatMessage({
                 id: 'app.component.search.label',
                 defaultMessage: 'Search',
@@ -172,9 +201,8 @@ export const RolesListPage = () => {
           }
         />
 
-        <ContentLayout>
-          {!canRead && <NoPermissions />}
-          {(isLoading || isLoadingForPermissions) && <LoadingIndicatorPage />}
+        <Layouts.Content>
+          {!canRead && <Page.NoPermissions />}
           {canRead && sortedRoles && sortedRoles?.length ? (
             <Table colCount={colCount} rowCount={rowCount}>
               <Thead>
@@ -213,30 +241,28 @@ export const RolesListPage = () => {
               <TableBody
                 sortedRoles={sortedRoles}
                 canDelete={canDelete}
+                canUpdate={canUpdate}
                 permissions={PERMISSIONS}
                 setRoleToDelete={setRoleToDelete}
                 onDelete={[showConfirmDelete, setShowConfirmDelete]}
               />
             </Table>
           ) : (
-            <EmptyStateLayout content={emptyLayout[emptyContent]} />
+            <EmptyStateLayout content={formatMessage(emptyLayout[emptyContent])} />
           )}
-        </ContentLayout>
-        <ConfirmDialog
-          isConfirmButtonLoading={isConfirmButtonLoading}
-          onConfirm={handleConfirmDelete}
-          onToggleDialog={handleShowConfirmDelete}
-          isOpen={showConfirmDelete}
-        />
-      </Main>
-    </Layout>
+        </Layouts.Content>
+        <Dialog.Root open={showConfirmDelete} onOpenChange={handleShowConfirmDelete}>
+          <ConfirmDialog onConfirm={handleConfirmDelete} />
+        </Dialog.Root>
+      </Page.Main>
+    </Layouts.Root>
   );
 };
 
 export const ProtectedRolesListPage = () => {
   return (
-    <CheckPagePermissions permissions={PERMISSIONS.accessRoles}>
+    <Page.Protect permissions={PERMISSIONS.accessRoles}>
       <RolesListPage />
-    </CheckPagePermissions>
+    </Page.Protect>
   );
 };

package/admin/src/translations/en.json

@@ -60,7 +60,7 @@
   "Settings.roles.deleted": "Role deleted",
   "Settings.roles.edited": "Role edited",
   "Settings.section-label": "Users & Permissions plugin",
-  "components.Input.error.validation.email": "This is an invalid email",
+  "components.Input.error.validation.email": "This is not a valid email",
   "components.Input.error.validation.json": "This doesn't match the JSON format",
   "components.Input.error.validation.max": "The value is too high.",
   "components.Input.error.validation.maxLength": "The value is too long.",

package/admin/src/utils/prefixPluginTranslations.js

@@ -0,0 +1,13 @@
+const prefixPluginTranslations = (trad, pluginId) => {
+  if (!pluginId) {
+    throw new TypeError("pluginId can't be empty");
+  }
+
+  return Object.keys(trad).reduce((acc, current) => {
+    acc[`${pluginId}.${current}`] = trad[current];
+
+    return acc;
+  }, {});
+};
+
+export { prefixPluginTranslations };

package/dist/_chunks/{ar-t5qTFaAD.js → ar-BguGUqwK.js}

@@ -41,4 +41,4 @@ const ar = {
   "plugin.name": "الأدوار والصلاحية"
 };
 exports.default = ar;
-//# sourceMappingURL=ar-t5qTFaAD.js.map
+//# sourceMappingURL=ar-BguGUqwK.js.map

package/dist/_chunks/ar-BguGUqwK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ar-BguGUqwK.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{ar-MvD8Ghac.mjs → ar-CK8BRRXB.mjs}

@@ -41,4 +41,4 @@ const ar = {
 export {
   ar as default
 };
-//# sourceMappingURL=ar-MvD8Ghac.mjs.map
+//# sourceMappingURL=ar-CK8BRRXB.mjs.map

package/dist/_chunks/ar-CK8BRRXB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ar-CK8BRRXB.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}