@strapi/plugin-users-permissions 0.0.0-next.f4ff842a3cb7b83db540bee67554b704e042b042 → 0.0.0-next.f5312617ca16b870c2bf1adcea2c69b676979e29

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,47 @@ 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,
   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 +61,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 +77,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 +126,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 +148,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 +171,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 +184,13 @@ export const RolesListPage = () => {
                   defaultMessage: 'Add new role',
                 })}
               </LinkButton>
-            </CheckPermissions>
+            ) : null
           }
         />
 
-        <ActionLayout
+        <Layouts.Action
           startActions={
-            <SearchURLQuery
+            <SearchInput
               label={formatMessage({
                 id: 'app.component.search.label',
                 defaultMessage: 'Search',
@@ -172,9 +199,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 +239,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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{cs-BMuXwxA1.mjs → cs-BVigMk0l.mjs}

@@ -47,4 +47,4 @@ const cs = {
 export {
   cs as default
 };
-//# sourceMappingURL=cs-BMuXwxA1.mjs.map
+//# sourceMappingURL=cs-BVigMk0l.mjs.map

package/dist/_chunks/cs-BVigMk0l.mjs.map

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

package/dist/_chunks/{cs-I8N4u-Sd.js → cs-BW8-K_GY.js}

@@ -47,4 +47,4 @@ const cs = {
   "plugin.name": "Role a oprávnění"
 };
 exports.default = cs;
-//# sourceMappingURL=cs-I8N4u-Sd.js.map
+//# sourceMappingURL=cs-BW8-K_GY.js.map

package/dist/_chunks/cs-BW8-K_GY.js.map

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

package/dist/_chunks/{de-zs2qqc0W.mjs → de-BKUdRFI4.mjs}

@@ -59,4 +59,4 @@ const de = {
 export {
   de as default
 };
-//# sourceMappingURL=de-zs2qqc0W.mjs.map
+//# sourceMappingURL=de-BKUdRFI4.mjs.map

package/dist/_chunks/de-BKUdRFI4.mjs.map

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

package/dist/_chunks/{de-YTjtq89K.js → de-owXpVluI.js}

@@ -59,4 +59,4 @@ const de = {
   "popUpWarning.warning.cancel": "Willst du wirklich alle deine Änderungen verwerfen?"
 };
 exports.default = de;
-//# sourceMappingURL=de-YTjtq89K.js.map
+//# sourceMappingURL=de-owXpVluI.js.map

package/dist/_chunks/de-owXpVluI.js.map

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

package/dist/_chunks/{dk-HctVBMsG.mjs → dk-BQiTK50l.mjs}

@@ -83,4 +83,4 @@ const dk = {
 export {
   dk as default
 };
-//# sourceMappingURL=dk-HctVBMsG.mjs.map
+//# sourceMappingURL=dk-BQiTK50l.mjs.map

package/dist/_chunks/dk-BQiTK50l.mjs.map

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

package/dist/_chunks/{dk-TF-dWjzl.js → dk-LXAnbuBk.js}

@@ -83,4 +83,4 @@ const dk = {
   "popUpWarning.warning.cancel": "Er du sikker på at du vil annullere dine ændringer?"
 };
 exports.default = dk;
-//# sourceMappingURL=dk-TF-dWjzl.js.map
+//# sourceMappingURL=dk-LXAnbuBk.js.map

package/dist/_chunks/dk-LXAnbuBk.js.map

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

package/dist/_chunks/{en-CE3wEy_c.mjs → en-DOHtPf-2.mjs}

@@ -60,7 +60,7 @@ const en = {
   "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.",
@@ -83,4 +83,4 @@ const en = {
 export {
   en as default
 };
-//# sourceMappingURL=en-CE3wEy_c.mjs.map
+//# sourceMappingURL=en-DOHtPf-2.mjs.map

package/dist/_chunks/en-DOHtPf-2.mjs.map

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

package/dist/_chunks/{en-m608rMZx.js → en-MHo5mcsU.js}

@@ -62,7 +62,7 @@ const en = {
   "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.",
@@ -83,4 +83,4 @@ const en = {
   "popUpWarning.warning.cancel": "Are you sure you want to cancel your modifications?"
 };
 exports.default = en;
-//# sourceMappingURL=en-m608rMZx.js.map
+//# sourceMappingURL=en-MHo5mcsU.js.map

package/dist/_chunks/en-MHo5mcsU.js.map

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

package/dist/_chunks/{es-XBQsB8_9.js → es-BwLCLXAQ.js}

@@ -83,4 +83,4 @@ const es = {
   "popUpWarning.warning.cancel": "¿Está seguro de que desea cancelar sus modificaciones?"
 };
 exports.default = es;
-//# sourceMappingURL=es-XBQsB8_9.js.map
+//# sourceMappingURL=es-BwLCLXAQ.js.map

package/dist/_chunks/es-BwLCLXAQ.js.map

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

package/dist/_chunks/{es-9381tih_.mjs → es-DNgOVMjD.mjs}

@@ -83,4 +83,4 @@ const es = {
 export {
   es as default
 };
-//# sourceMappingURL=es-9381tih_.mjs.map
+//# sourceMappingURL=es-DNgOVMjD.mjs.map

package/dist/_chunks/es-DNgOVMjD.mjs.map

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

package/dist/_chunks/{fr-CMSc77If.mjs → fr-DkgRugiU.mjs}

@@ -47,4 +47,4 @@ const fr = {
 export {
   fr as default
 };
-//# sourceMappingURL=fr-CMSc77If.mjs.map
+//# sourceMappingURL=fr-DkgRugiU.mjs.map

package/dist/_chunks/fr-DkgRugiU.mjs.map

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

package/dist/_chunks/{fr-6cz3U-IF.js → fr-DkhpSjjm.js}

@@ -47,4 +47,4 @@ const fr = {
   "plugin.name": "Rôles et autorisations"
 };
 exports.default = fr;
-//# sourceMappingURL=fr-6cz3U-IF.js.map
+//# sourceMappingURL=fr-DkhpSjjm.js.map

package/dist/_chunks/fr-DkhpSjjm.js.map

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

package/dist/_chunks/{id-RJ934rq-.js → id-BTemOeTZ.js}

@@ -59,4 +59,4 @@ const id = {
   "popUpWarning.warning.cancel": "Anda yakin ingin membatalkan modifikasi Anda?"
 };
 exports.default = id;
-//# sourceMappingURL=id-RJ934rq-.js.map
+//# sourceMappingURL=id-BTemOeTZ.js.map

package/dist/_chunks/id-BTemOeTZ.js.map

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

package/dist/_chunks/{id-SDuyIkZa.mjs → id-BdEsvnaF.mjs}

@@ -59,4 +59,4 @@ const id = {
 export {
   id as default
 };
-//# sourceMappingURL=id-SDuyIkZa.mjs.map
+//# sourceMappingURL=id-BdEsvnaF.mjs.map

package/dist/_chunks/id-BdEsvnaF.mjs.map

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