@strapi/plugin-users-permissions 0.0.0-next.f8af92b375dc730ba47ed2117f25df893aae696c → 0.0.0-next.f93d6eabe52aa7681655cfa08eedbc3708dbb90d

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/pluginId.js

@@ -1,5 +1,5 @@
-import pluginPkg from '../../package.json';
+import { name } from '../../package.json';
 
-const pluginId = pluginPkg.name.replace(/^@strapi\/plugin-/i, '');
+const pluginId = name.replace(/^@strapi\/plugin-/i, '');
 
 export default pluginId;

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/translations/uk.json

@@ -12,6 +12,16 @@
   "EditForm.inputToggle.label.email-confirmation-redirection": "URL для перенаправлення",
   "EditForm.inputToggle.label.email-reset-password": "Сторінка скидання пароля",
   "EditForm.inputToggle.label.sign-up": "Увімкнути реєстрацію",
+  "EditForm.inputToggle.placeholder.email-confirmation-redirection": "наприклад: https://yourfrontend.com/email-confirmation-redirection",
+  "EditForm.inputToggle.placeholder.email-reset-password": "наприклад: https://yourfrontend.com/reset-password",
+  "EditPage.form.roles": "Деталі ролі",
+  "Email.template.data.loaded": "Шаблони електронної пошти завантажено",
+  "Email.template.email_confirmation": "Підтвердження електронної адреси",
+  "Email.template.form.edit.label": "Редагувати шаблон",
+  "Email.template.table.action.label": "дія",
+  "Email.template.table.icon.label": "іконка",
+  "Email.template.table.name.label": "назва",
+  "Form.advancedSettings.data.loaded": "Дані розширених налаштувань завантажено",
   "HeaderNav.link.advancedSettings": "Розширені налаштування",
   "HeaderNav.link.emailTemplates": "Шаблони листів",
   "HeaderNav.link.providers": "Провайдери",
@@ -21,12 +31,14 @@
   "Policies.header.hint": "Виберіть дії вашого додатку або дії плаґіну та натисніть на значок шестірні, щоб відобразити пов'язаний маршрут",
   "Policies.header.title": "Розширені налашрування",
   "PopUpForm.Email.email_templates.inputDescription": "Якщо ви не впевнені, як використовувати змінні, {link}",
+  "PopUpForm.Email.link.documentation": "перегляньте документацію.",
   "PopUpForm.Email.options.from.email.label": "Email відправника",
   "PopUpForm.Email.options.from.email.placeholder": "kai@doe.com",
   "PopUpForm.Email.options.from.name.label": "Ім'я відправника",
-  "PopUpForm.Email.options.from.name.placeholder": "Kai Doe",
+  "PopUpForm.Email.options.from.name.placeholder": "Тарас Шевченко",
   "PopUpForm.Email.options.message.label": "Повідомлення",
   "PopUpForm.Email.options.object.label": "Тема",
+  "PopUpForm.Email.options.object.placeholder": "Будь ласка, підтвердьте свою електронну адресу для %APP_NAME%",
   "PopUpForm.Email.options.response_email.label": "Email для відповіді",
   "PopUpForm.Email.options.response_email.placeholder": "kai@doe.com",
   "PopUpForm.Providers.enabled.description": "Якщо вимкнуто, користувачі не зможуть вікористати цей провайдер.",
@@ -34,12 +46,37 @@
   "PopUpForm.Providers.key.label": "Client ID",
   "PopUpForm.Providers.key.placeholder": "TEXT",
   "PopUpForm.Providers.redirectURL.front-end.label": "URL переадресації для вашего front-end додатку",
+  "PopUpForm.Providers.redirectURL.label": "URL -адреса для переадресації, щоб додати у ваші конфігурації програми {постачальник}",
   "PopUpForm.Providers.secret.label": "Client Secret",
   "PopUpForm.Providers.secret.placeholder": "TEXT",
   "PopUpForm.Providers.subdomain.label": "Host URI (Subdomain)",
   "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
-  "PopUpForm.header.edit.email-templates": "Редагування шаблони листів",
+  "PopUpForm.header.edit.email-templates": "Редагування шаблону листів",
+  "PopUpForm.header.edit.providers": "Редагувати провайдера",
+  "Providers.data.loaded": "Провайдери завантажено",
+  "Providers.status": "Статус",
+  "Roles.empty": "У вас ще немає ролей.",
+  "Roles.empty.search": "Не знайдено ролей, що відповідають пошуку.",
+  "Settings.roles.deleted": "Роль видалено",
+  "Settings.roles.edited": "Роль редаговано",
+  "Settings.section-label": "Плаґін користувачів та дозволів",
+  "components.Input.error.validation.email": "Це неправильна електронна адреса",
+  "components.Input.error.validation.json": "Це не відповідає формату JSON",
+  "components.Input.error.validation.max": "Значення занадто велике.",
+  "components.Input.error.validation.maxLength": "Значення занадто довге.",
+  "components.Input.error.validation.min": "Значення занадто низьке.",
+  "components.Input.error.validation.minLength": "Значення занадто коротке.",
+  "components.Input.error.validation.minSupMax": "Не може бути більшим",
+  "components.Input.error.validation.regex": "Значення не відповідає регулярному виразу.",
+  "components.Input.error.validation.required": "Це значення є обов’язковим.",
+  "components.Input.error.validation.unique": "Це значення вже використовується.",
   "notification.success.submit": "Налаштування оновлено",
-  "plugin.description.long": "Захистіть API за допомогою процесу аутентифікації на основі JWT. Цей плагін також включає можливості ACL, які дозволяють керувати дозволами між групами користувачів.",
-  "plugin.description.short": "Захистіть API за допомогою процесу аутентифікації на основі JWT"
+  "page.title": "Налаштування - Ролі",
+  "plugin.description.long": "Захистіть API за допомогою процесу аутентифікації на основі JWT. Цей плаґін також включає можливості ACL, які дозволяють керувати дозволами між групами користувачів.",
+  "plugin.description.short": "Захистіть API за допомогою процесу аутентифікації на основі JWT",
+  "plugin.name": "Плаґін користувачів та дозволів",
+  "popUpWarning.button.cancel": "Скасувати",
+  "popUpWarning.button.confirm": "Підтвердити",
+  "popUpWarning.title": "Будь ласка, підтвердіть",
+  "popUpWarning.warning.cancel": "Ви впевнені, що хочете скасувати свої зміни?"
 }

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/admin/components/BoundRoute/getMethodColor.js

@@ -0,0 +1,49 @@
+'use strict';
+
+const getMethodColor = (verb)=>{
+    switch(verb){
+        case 'POST':
+            {
+                return {
+                    text: 'success600',
+                    border: 'success200',
+                    background: 'success100'
+                };
+            }
+        case 'GET':
+            {
+                return {
+                    text: 'secondary600',
+                    border: 'secondary200',
+                    background: 'secondary100'
+                };
+            }
+        case 'PUT':
+            {
+                return {
+                    text: 'warning600',
+                    border: 'warning200',
+                    background: 'warning100'
+                };
+            }
+        case 'DELETE':
+            {
+                return {
+                    text: 'danger600',
+                    border: 'danger200',
+                    background: 'danger100'
+                };
+            }
+        default:
+            {
+                return {
+                    text: 'neutral600',
+                    border: 'neutral200',
+                    background: 'neutral100'
+                };
+            }
+    }
+};
+
+module.exports = getMethodColor;
+//# sourceMappingURL=getMethodColor.js.map

package/dist/admin/components/BoundRoute/getMethodColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMethodColor.js","sources":["../../../../admin/src/components/BoundRoute/getMethodColor.js"],"sourcesContent":["const getMethodColor = (verb) => {\n  switch (verb) {\n    case 'POST': {\n      return {\n        text: 'success600',\n        border: 'success200',\n        background: 'success100',\n      };\n    }\n    case 'GET': {\n      return {\n        text: 'secondary600',\n        border: 'secondary200',\n        background: 'secondary100',\n      };\n    }\n    case 'PUT': {\n      return {\n        text: 'warning600',\n        border: 'warning200',\n        background: 'warning100',\n      };\n    }\n    case 'DELETE': {\n      return {\n        text: 'danger600',\n        border: 'danger200',\n        background: 'danger100',\n      };\n    }\n    default: {\n      return {\n        text: 'neutral600',\n        border: 'neutral200',\n        background: 'neutral100',\n      };\n    }\n  }\n};\n\nexport default getMethodColor;\n"],"names":["getMethodColor","verb","text","border","background"],"mappings":";;AAAA,MAAMA,iBAAiB,CAACC,IAAAA,GAAAA;IACtB,OAAQA,IAAAA;QACN,KAAK,MAAA;AAAQ,YAAA;gBACX,OAAO;oBACLC,IAAM,EAAA,YAAA;oBACNC,MAAQ,EAAA,YAAA;oBACRC,UAAY,EAAA;AACd,iBAAA;AACF;QACA,KAAK,KAAA;AAAO,YAAA;gBACV,OAAO;oBACLF,IAAM,EAAA,cAAA;oBACNC,MAAQ,EAAA,cAAA;oBACRC,UAAY,EAAA;AACd,iBAAA;AACF;QACA,KAAK,KAAA;AAAO,YAAA;gBACV,OAAO;oBACLF,IAAM,EAAA,YAAA;oBACNC,MAAQ,EAAA,YAAA;oBACRC,UAAY,EAAA;AACd,iBAAA;AACF;QACA,KAAK,QAAA;AAAU,YAAA;gBACb,OAAO;oBACLF,IAAM,EAAA,WAAA;oBACNC,MAAQ,EAAA,WAAA;oBACRC,UAAY,EAAA;AACd,iBAAA;AACF;AACA,QAAA;AAAS,YAAA;gBACP,OAAO;oBACLF,IAAM,EAAA,YAAA;oBACNC,MAAQ,EAAA,YAAA;oBACRC,UAAY,EAAA;AACd,iBAAA;AACF;AACF;AACF;;;;"}

package/dist/admin/components/BoundRoute/getMethodColor.mjs

@@ -0,0 +1,47 @@
+const getMethodColor = (verb)=>{
+    switch(verb){
+        case 'POST':
+            {
+                return {
+                    text: 'success600',
+                    border: 'success200',
+                    background: 'success100'
+                };
+            }
+        case 'GET':
+            {
+                return {
+                    text: 'secondary600',
+                    border: 'secondary200',
+                    background: 'secondary100'
+                };
+            }
+        case 'PUT':
+            {
+                return {
+                    text: 'warning600',
+                    border: 'warning200',
+                    background: 'warning100'
+                };
+            }
+        case 'DELETE':
+            {
+                return {
+                    text: 'danger600',
+                    border: 'danger200',
+                    background: 'danger100'
+                };
+            }
+        default:
+            {
+                return {
+                    text: 'neutral600',
+                    border: 'neutral200',
+                    background: 'neutral100'
+                };
+            }
+    }
+};
+
+export { getMethodColor as default };
+//# sourceMappingURL=getMethodColor.mjs.map

package/dist/admin/components/BoundRoute/getMethodColor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMethodColor.mjs","sources":["../../../../admin/src/components/BoundRoute/getMethodColor.js"],"sourcesContent":["const getMethodColor = (verb) => {\n  switch (verb) {\n    case 'POST': {\n      return {\n        text: 'success600',\n        border: 'success200',\n        background: 'success100',\n      };\n    }\n    case 'GET': {\n      return {\n        text: 'secondary600',\n        border: 'secondary200',\n        background: 'secondary100',\n      };\n    }\n    case 'PUT': {\n      return {\n        text: 'warning600',\n        border: 'warning200',\n        background: 'warning100',\n      };\n    }\n    case 'DELETE': {\n      return {\n        text: 'danger600',\n        border: 'danger200',\n        background: 'danger100',\n      };\n    }\n    default: {\n      return {\n        text: 'neutral600',\n        border: 'neutral200',\n        background: 'neutral100',\n      };\n    }\n  }\n};\n\nexport default getMethodColor;\n"],"names":["getMethodColor","verb","text","border","background"],"mappings":"AAAA,MAAMA,iBAAiB,CAACC,IAAAA,GAAAA;IACtB,OAAQA,IAAAA;QACN,KAAK,MAAA;AAAQ,YAAA;gBACX,OAAO;oBACLC,IAAM,EAAA,YAAA;oBACNC,MAAQ,EAAA,YAAA;oBACRC,UAAY,EAAA;AACd,iBAAA;AACF;QACA,KAAK,KAAA;AAAO,YAAA;gBACV,OAAO;oBACLF,IAAM,EAAA,cAAA;oBACNC,MAAQ,EAAA,cAAA;oBACRC,UAAY,EAAA;AACd,iBAAA;AACF;QACA,KAAK,KAAA;AAAO,YAAA;gBACV,OAAO;oBACLF,IAAM,EAAA,YAAA;oBACNC,MAAQ,EAAA,YAAA;oBACRC,UAAY,EAAA;AACd,iBAAA;AACF;QACA,KAAK,QAAA;AAAU,YAAA;gBACb,OAAO;oBACLF,IAAM,EAAA,WAAA;oBACNC,MAAQ,EAAA,WAAA;oBACRC,UAAY,EAAA;AACd,iBAAA;AACF;AACA,QAAA;AAAS,YAAA;gBACP,OAAO;oBACLF,IAAM,EAAA,YAAA;oBACNC,MAAQ,EAAA,YAAA;oBACRC,UAAY,EAAA;AACd,iBAAA;AACF;AACF;AACF;;;;"}

package/dist/admin/components/BoundRoute/index.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var map = require('lodash/map');
+var tail = require('lodash/tail');
+var PropTypes = require('prop-types');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var getMethodColor = require('./getMethodColor.js');
+
+const MethodBox = styledComponents.styled(designSystem.Box)`
+  margin: -1px;
+  border-radius: ${({ theme })=>theme.spaces[1]} 0 0 ${({ theme })=>theme.spaces[1]};
+`;
+function BoundRoute({ route }) {
+    const { formatMessage } = reactIntl.useIntl();
+    const { method, handler: title, path } = route;
+    const formattedRoute = path ? tail(path.split('/')) : [];
+    const [controller = '', action = ''] = title ? title.split('.') : [];
+    const colors = getMethodColor(route.method);
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 2,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Typography, {
+                variant: "delta",
+                tag: "h3",
+                children: [
+                    formatMessage({
+                        id: 'users-permissions.BoundRoute.title',
+                        defaultMessage: 'Bound route to'
+                    }),
+                    " ",
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        children: controller
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Typography, {
+                        variant: "delta",
+                        textColor: "primary600",
+                        children: [
+                            ".",
+                            action
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                hasRadius: true,
+                background: "neutral0",
+                borderColor: "neutral200",
+                gap: 0,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(MethodBox, {
+                        background: colors.background,
+                        borderColor: colors.border,
+                        padding: 2,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            fontWeight: "bold",
+                            textColor: colors.text,
+                            children: method
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                        paddingLeft: 2,
+                        paddingRight: 2,
+                        children: map(formattedRoute, (value)=>/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Typography, {
+                                textColor: value.includes(':') ? 'neutral600' : 'neutral900',
+                                children: [
+                                    "/",
+                                    value
+                                ]
+                            }, value))
+                    })
+                ]
+            })
+        ]
+    });
+}
+BoundRoute.defaultProps = {
+    route: {
+        handler: 'Nocontroller.error',
+        method: 'GET',
+        path: '/there-is-no-path'
+    }
+};
+BoundRoute.propTypes = {
+    route: PropTypes.shape({
+        handler: PropTypes.string,
+        method: PropTypes.string,
+        path: PropTypes.string
+    })
+};
+
+module.exports = BoundRoute;
+//# sourceMappingURL=index.js.map

package/dist/admin/components/BoundRoute/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../admin/src/components/BoundRoute/index.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport map from 'lodash/map';\nimport tail from 'lodash/tail';\nimport PropTypes from 'prop-types';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport getMethodColor from './getMethodColor';\n\nconst MethodBox = styled(Box)`\n  margin: -1px;\n  border-radius: ${({ theme }) => theme.spaces[1]} 0 0 ${({ theme }) => theme.spaces[1]};\n`;\n\nfunction BoundRoute({ route }) {\n  const { formatMessage } = useIntl();\n\n  const { method, handler: title, path } = route;\n  const formattedRoute = path ? tail(path.split('/')) : [];\n  const [controller = '', action = ''] = title ? title.split('.') : [];\n  const colors = getMethodColor(route.method);\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Typography variant=\"delta\" tag=\"h3\">\n        {formatMessage({\n          id: 'users-permissions.BoundRoute.title',\n          defaultMessage: 'Bound route to',\n        })}\n        &nbsp;\n        <span>{controller}</span>\n        <Typography variant=\"delta\" textColor=\"primary600\">\n          .{action}\n        </Typography>\n      </Typography>\n      <Flex hasRadius background=\"neutral0\" borderColor=\"neutral200\" gap={0}>\n        <MethodBox background={colors.background} borderColor={colors.border} padding={2}>\n          <Typography fontWeight=\"bold\" textColor={colors.text}>\n            {method}\n          </Typography>\n        </MethodBox>\n        <Box paddingLeft={2} paddingRight={2}>\n          {map(formattedRoute, (value) => (\n            <Typography key={value} textColor={value.includes(':') ? 'neutral600' : 'neutral900'}>\n              /{value}\n            </Typography>\n          ))}\n        </Box>\n      </Flex>\n    </Flex>\n  );\n}\n\nBoundRoute.defaultProps = {\n  route: {\n    handler: 'Nocontroller.error',\n    method: 'GET',\n    path: '/there-is-no-path',\n  },\n};\n\nBoundRoute.propTypes = {\n  route: PropTypes.shape({\n    handler: PropTypes.string,\n    method: PropTypes.string,\n    path: PropTypes.string,\n  }),\n};\n\nexport default BoundRoute;\n"],"names":["MethodBox","styled","Box","theme","spaces","BoundRoute","route","formatMessage","useIntl","method","handler","title","path","formattedRoute","tail","split","controller","action","colors","getMethodColor","_jsxs","Flex","direction","alignItems","gap","Typography","variant","tag","id","defaultMessage","_jsx","span","textColor","hasRadius","background","borderColor","border","padding","fontWeight","text","paddingLeft","paddingRight","map","value","includes","defaultProps","propTypes","PropTypes","shape","string"],"mappings":"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"}