@strapi/plugin-users-permissions 5.9.0 → 5.10.0

package/dist/admin/chunks/index-D01zzG9y.js

@@ -0,0 +1,1537 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var admin = require('@strapi/strapi/admin');
+var reactRouterDom = require('react-router-dom');
+var index = require('./index-DAclA-0k.js');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var formik = require('formik');
+var reactIntl = require('react-intl');
+var reactQuery = require('react-query');
+var PropTypes = require('prop-types');
+var upperFirst = require('lodash/upperFirst');
+var sortBy = require('lodash/sortBy');
+var get = require('lodash/get');
+var styledComponents = require('styled-components');
+var immer = require('immer');
+var isEmpty = require('lodash/isEmpty');
+var without = require('lodash/without');
+var map = require('lodash/map');
+var tail = require('lodash/tail');
+var set = require('lodash/set');
+var take = require('lodash/take');
+var yup = require('yup');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var yup__namespace = /*#__PURE__*/_interopNamespaceDefault(yup);
+
+const UsersPermissions$2 = /*#__PURE__*/ React.createContext({});
+const UsersPermissionsProvider = ({ children, value })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(UsersPermissions$2.Provider, {
+        value: value,
+        children: children
+    });
+};
+const useUsersPermissions = ()=>React.useContext(UsersPermissions$2);
+UsersPermissionsProvider.propTypes = {
+    children: PropTypes.node.isRequired,
+    value: PropTypes.object.isRequired
+};
+
+function formatPluginName(pluginSlug) {
+    switch(pluginSlug){
+        case 'application':
+            return 'Application';
+        case 'plugin::content-manager':
+            return 'Content manager';
+        case 'plugin::content-type-builder':
+            return 'Content types builder';
+        case 'plugin::documentation':
+            return 'Documentation';
+        case 'plugin::email':
+            return 'Email';
+        case 'plugin::i18n':
+            return 'i18n';
+        case 'plugin::upload':
+            return 'Upload';
+        case 'plugin::users-permissions':
+            return 'Users-permissions';
+        default:
+            return upperFirst(pluginSlug.replace('api::', '').replace('plugin::', ''));
+    }
+}
+
+const init$1 = (initialState, permissions)=>{
+    const collapses = Object.keys(permissions).sort().map((name)=>({
+            name,
+            isOpen: false
+        }));
+    return {
+        ...initialState,
+        collapses
+    };
+};
+
+const activeCheckboxWrapperStyles = styledComponents.css`
+  background: ${(props)=>props.theme.colors.primary100};
+
+  #cog {
+    opacity: 1;
+  }
+`;
+const CheckboxWrapper = styledComponents.styled(designSystem.Box)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  #cog {
+    opacity: 0;
+    path {
+      fill: ${(props)=>props.theme.colors.primary600};
+    }
+  }
+
+  /* Show active style both on hover and when the action is selected */
+  ${(props)=>props.isActive && activeCheckboxWrapperStyles}
+  &:hover {
+    ${activeCheckboxWrapperStyles}
+  }
+`;
+
+const Border = styledComponents.styled.div`
+  flex: 1;
+  align-self: center;
+  border-top: 1px solid ${({ theme })=>theme.colors.neutral150};
+`;
+const SubCategory = ({ subCategory })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { onChange, onChangeSelectAll, onSelectedAction, selectedAction, modifiedData } = useUsersPermissions();
+    const currentScopedModifiedData = React.useMemo(()=>{
+        return get(modifiedData, subCategory.name, {});
+    }, [
+        modifiedData,
+        subCategory
+    ]);
+    const hasAllActionsSelected = React.useMemo(()=>{
+        return Object.values(currentScopedModifiedData).every((action)=>action.enabled === true);
+    }, [
+        currentScopedModifiedData
+    ]);
+    const hasSomeActionsSelected = React.useMemo(()=>{
+        return Object.values(currentScopedModifiedData).some((action)=>action.enabled === true) && !hasAllActionsSelected;
+    }, [
+        currentScopedModifiedData,
+        hasAllActionsSelected
+    ]);
+    const handleChangeSelectAll = React.useCallback(({ target: { name } })=>{
+        onChangeSelectAll({
+            target: {
+                name,
+                value: !hasAllActionsSelected
+            }
+        });
+    }, [
+        hasAllActionsSelected,
+        onChangeSelectAll
+    ]);
+    const isActionSelected = React.useCallback((actionName)=>{
+        return selectedAction === actionName;
+    }, [
+        selectedAction
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                justifyContent: "space-between",
+                alignItems: "center",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                        paddingRight: 4,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            variant: "sigma",
+                            textColor: "neutral600",
+                            children: subCategory.label
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(Border, {}),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                        paddingLeft: 4,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Checkbox, {
+                            name: subCategory.name,
+                            checked: hasSomeActionsSelected ? 'indeterminate' : hasAllActionsSelected,
+                            onCheckedChange: (value)=>handleChangeSelectAll({
+                                    target: {
+                                        name: subCategory.name,
+                                        value
+                                    }
+                                }),
+                            children: formatMessage({
+                                id: 'app.utils.select-all',
+                                defaultMessage: 'Select all'
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                paddingTop: 6,
+                paddingBottom: 6,
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
+                    gap: 2,
+                    style: {
+                        flex: 1
+                    },
+                    children: subCategory.actions.map((action)=>{
+                        const name = `${action.name}.enabled`;
+                        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                            col: 6,
+                            direction: "column",
+                            alignItems: "stretch",
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(CheckboxWrapper, {
+                                isActive: isActionSelected(action.name),
+                                padding: 2,
+                                hasRadius: true,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Checkbox, {
+                                        checked: get(modifiedData, name, false),
+                                        name: name,
+                                        onCheckedChange: (value)=>onChange({
+                                                target: {
+                                                    name,
+                                                    value
+                                                }
+                                            }),
+                                        children: action.label
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                                        type: "button",
+                                        onClick: ()=>onSelectedAction(action.name),
+                                        style: {
+                                            display: 'inline-flex',
+                                            alignItems: 'center'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                                                tag: "span",
+                                                children: formatMessage({
+                                                    id: 'app.utils.show-bound-route',
+                                                    defaultMessage: 'Show bound route for {route}'
+                                                }, {
+                                                    route: action.name
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx(icons.Cog, {
+                                                id: "cog",
+                                                cursor: "pointer"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        }, action.name);
+                    })
+                })
+            })
+        ]
+    });
+};
+SubCategory.propTypes = {
+    subCategory: PropTypes.object.isRequired
+};
+
+const PermissionRow = ({ name, permissions })=>{
+    const subCategories = React.useMemo(()=>{
+        return sortBy(Object.values(permissions.controllers).reduce((acc, curr, index)=>{
+            const currentName = `${name}.controllers.${Object.keys(permissions.controllers)[index]}`;
+            const actions = sortBy(Object.keys(curr).reduce((acc, current)=>{
+                return [
+                    ...acc,
+                    {
+                        ...curr[current],
+                        label: current,
+                        name: `${currentName}.${current}`
+                    }
+                ];
+            }, []), 'label');
+            return [
+                ...acc,
+                {
+                    actions,
+                    label: Object.keys(permissions.controllers)[index],
+                    name: currentName
+                }
+            ];
+        }, []), 'label');
+    }, [
+        name,
+        permissions
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+        padding: 6,
+        children: subCategories.map((subCategory)=>/*#__PURE__*/ jsxRuntime.jsx(SubCategory, {
+                subCategory: subCategory
+            }, subCategory.name))
+    });
+};
+PermissionRow.propTypes = {
+    name: PropTypes.string.isRequired,
+    permissions: PropTypes.object.isRequired
+};
+
+const initialState$1 = {
+    collapses: []
+};
+const reducer$1 = (state, action)=>// eslint-disable-next-line consistent-return
+    immer.produce(state, (draftState)=>{
+        switch(action.type){
+            case 'TOGGLE_COLLAPSE':
+                {
+                    draftState.collapses = state.collapses.map((collapse, index)=>{
+                        if (index === action.index) {
+                            return {
+                                ...collapse,
+                                isOpen: !collapse.isOpen
+                            };
+                        }
+                        return {
+                            ...collapse,
+                            isOpen: false
+                        };
+                    });
+                    break;
+                }
+            default:
+                return draftState;
+        }
+    });
+
+const Permissions = ()=>{
+    const { modifiedData } = useUsersPermissions();
+    const { formatMessage } = reactIntl.useIntl();
+    const [{ collapses }] = React.useReducer(reducer$1, initialState$1, (state)=>init$1(state, modifiedData));
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Accordion.Root, {
+        size: "M",
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 1,
+            children: collapses.map((collapse, index)=>/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Accordion.Item, {
+                    value: collapse.name,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Accordion.Header, {
+                            variant: index % 2 === 0 ? 'secondary' : undefined,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Accordion.Trigger, {
+                                caretPosition: "right",
+                                description: formatMessage({
+                                    id: 'users-permissions.Plugin.permissions.plugins.description',
+                                    defaultMessage: 'Define all allowed actions for the {name} plugin.'
+                                }, {
+                                    name: collapse.name
+                                }),
+                                children: formatPluginName(collapse.name)
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Accordion.Content, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(PermissionRow, {
+                                permissions: modifiedData[collapse.name],
+                                name: collapse.name
+                            })
+                        })
+                    ]
+                }, collapse.name))
+        })
+    });
+};
+
+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'
+                };
+            }
+    }
+};
+
+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
+    })
+};
+
+const Policies = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { selectedAction, routes } = useUsersPermissions();
+    const path = without(selectedAction.split('.'), 'controllers');
+    const controllerRoutes = get(routes, path[0]);
+    const pathResolved = path.slice(1).join('.');
+    const displayedRoutes = isEmpty(controllerRoutes) ? [] : controllerRoutes.filter((o)=>o.handler.endsWith(pathResolved));
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+        col: 5,
+        background: "neutral150",
+        paddingTop: 6,
+        paddingBottom: 6,
+        paddingLeft: 7,
+        paddingRight: 7,
+        style: {
+            minHeight: '100%'
+        },
+        direction: "column",
+        alignItems: "stretch",
+        children: selectedAction ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 2,
+            children: displayedRoutes.map((route, key)=>// eslint-disable-next-line react/no-array-index-key
+                /*#__PURE__*/ jsxRuntime.jsx(BoundRoute, {
+                    route: route
+                }, key))
+        }) : /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 2,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    variant: "delta",
+                    tag: "h3",
+                    children: formatMessage({
+                        id: 'users-permissions.Policies.header.title',
+                        defaultMessage: 'Advanced settings'
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    tag: "p",
+                    textColor: "neutral600",
+                    children: formatMessage({
+                        id: 'users-permissions.Policies.header.hint',
+                        defaultMessage: "Select the application's actions or the plugin's actions and click on the cog icon to display the bound route"
+                    })
+                })
+            ]
+        })
+    });
+};
+
+const init = (state, permissions, routes)=>{
+    return {
+        ...state,
+        initialData: permissions,
+        modifiedData: permissions,
+        routes
+    };
+};
+
+const initialState = {
+    initialData: {},
+    modifiedData: {},
+    routes: {},
+    selectedAction: '',
+    policies: []
+};
+const reducer = (state, action)=>immer.produce(state, (draftState)=>{
+        switch(action.type){
+            case 'ON_CHANGE':
+                {
+                    const keysLength = action.keys.length;
+                    const isChangingCheckbox = action.keys[keysLength - 1] === 'enabled';
+                    if (action.value && isChangingCheckbox) {
+                        const selectedAction = take(action.keys, keysLength - 1).join('.');
+                        draftState.selectedAction = selectedAction;
+                    }
+                    set(draftState, [
+                        'modifiedData',
+                        ...action.keys
+                    ], action.value);
+                    break;
+                }
+            case 'ON_CHANGE_SELECT_ALL':
+                {
+                    const pathToValue = [
+                        'modifiedData',
+                        ...action.keys
+                    ];
+                    const oldValues = get(state, pathToValue, {});
+                    const updatedValues = Object.keys(oldValues).reduce((acc, current)=>{
+                        acc[current] = {
+                            ...oldValues[current],
+                            enabled: action.value
+                        };
+                        return acc;
+                    }, {});
+                    set(draftState, pathToValue, updatedValues);
+                    break;
+                }
+            case 'ON_RESET':
+                {
+                    draftState.modifiedData = state.initialData;
+                    break;
+                }
+            case 'ON_SUBMIT_SUCCEEDED':
+                {
+                    draftState.initialData = state.modifiedData;
+                    break;
+                }
+            case 'SELECT_ACTION':
+                {
+                    const { actionToSelect } = action;
+                    draftState.selectedAction = actionToSelect === state.selectedAction ? '' : actionToSelect;
+                    break;
+                }
+            default:
+                return draftState;
+        }
+    });
+
+const UsersPermissions = /*#__PURE__*/ React.forwardRef(({ permissions, routes }, ref)=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const [state, dispatch] = React.useReducer(reducer, initialState, (state)=>init(state, permissions, routes));
+    React.useImperativeHandle(ref, ()=>({
+            getPermissions () {
+                return {
+                    permissions: state.modifiedData
+                };
+            },
+            resetForm () {
+                dispatch({
+                    type: 'ON_RESET'
+                });
+            },
+            setFormAfterSubmit () {
+                dispatch({
+                    type: 'ON_SUBMIT_SUCCEEDED'
+                });
+            }
+        }));
+    const handleChange = ({ target: { name, value } })=>dispatch({
+            type: 'ON_CHANGE',
+            keys: name.split('.'),
+            value: value === 'empty__string_value' ? '' : value
+        });
+    const handleChangeSelectAll = ({ target: { name, value } })=>dispatch({
+            type: 'ON_CHANGE_SELECT_ALL',
+            keys: name.split('.'),
+            value
+        });
+    const handleSelectedAction = (actionToSelect)=>dispatch({
+            type: 'SELECT_ACTION',
+            actionToSelect
+        });
+    const providerValue = {
+        ...state,
+        onChange: handleChange,
+        onChangeSelectAll: handleChangeSelectAll,
+        onSelectedAction: handleSelectedAction
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(UsersPermissionsProvider, {
+        value: providerValue,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Grid.Root, {
+            gap: 0,
+            shadow: "filterShadow",
+            hasRadius: true,
+            background: "neutral0",
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                    col: 7,
+                    paddingTop: 6,
+                    paddingBottom: 6,
+                    paddingLeft: 7,
+                    paddingRight: 7,
+                    direction: "column",
+                    alignItems: "stretch",
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        direction: "column",
+                        alignItems: "stretch",
+                        gap: 6,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                direction: "column",
+                                alignItems: "stretch",
+                                gap: 2,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        variant: "delta",
+                                        tag: "h2",
+                                        children: formatMessage({
+                                            id: index.getTrad('Plugins.header.title'),
+                                            defaultMessage: 'Permissions'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        tag: "p",
+                                        textColor: "neutral600",
+                                        children: formatMessage({
+                                            id: index.getTrad('Plugins.header.description'),
+                                            defaultMessage: 'Only actions bound by a route are listed below.'
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(Permissions, {})
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(Policies, {})
+            ]
+        })
+    });
+});
+UsersPermissions.propTypes = {
+    permissions: PropTypes.object.isRequired,
+    routes: PropTypes.object.isRequired
+};
+var UsersPermissions$1 = /*#__PURE__*/ React.memo(UsersPermissions);
+
+const createRoleSchema = yup__namespace.object().shape({
+    name: yup__namespace.string().required(admin.translatedErrors.required.id),
+    description: yup__namespace.string().required(admin.translatedErrors.required.id)
+});
+
+const cleanPermissions = (permissions)=>Object.keys(permissions).reduce((acc, current)=>{
+        const currentPermission = permissions[current].controllers;
+        const cleanedControllers = Object.keys(currentPermission).reduce((acc2, curr)=>{
+            if (isEmpty(currentPermission[curr])) {
+                return acc2;
+            }
+            acc2[curr] = currentPermission[curr];
+            return acc2;
+        }, {});
+        if (isEmpty(cleanedControllers)) {
+            return acc;
+        }
+        acc[current] = {
+            controllers: cleanedControllers
+        };
+        return acc;
+    }, {});
+
+const usePlugins = ()=>{
+    const { toggleNotification } = admin.useNotification();
+    const { get } = admin.useFetchClient();
+    const { formatAPIError } = admin.useAPIErrorHandler(index.getTrad);
+    const [{ data: permissions, isLoading: isLoadingPermissions, error: permissionsError, refetch: refetchPermissions }, { data: routes, isLoading: isLoadingRoutes, error: routesError, refetch: refetchRoutes }] = reactQuery.useQueries([
+        {
+            queryKey: [
+                'users-permissions',
+                'permissions'
+            ],
+            async queryFn () {
+                const { data: { permissions } } = await get(`/users-permissions/permissions`);
+                return permissions;
+            }
+        },
+        {
+            queryKey: [
+                'users-permissions',
+                'routes'
+            ],
+            async queryFn () {
+                const { data: { routes } } = await get(`/users-permissions/routes`);
+                return routes;
+            }
+        }
+    ]);
+    const refetchQueries = async ()=>{
+        await Promise.all([
+            refetchPermissions(),
+            refetchRoutes()
+        ]);
+    };
+    React.useEffect(()=>{
+        if (permissionsError) {
+            toggleNotification({
+                type: 'danger',
+                message: formatAPIError(permissionsError)
+            });
+        }
+    }, [
+        toggleNotification,
+        permissionsError,
+        formatAPIError
+    ]);
+    React.useEffect(()=>{
+        if (routesError) {
+            toggleNotification({
+                type: 'danger',
+                message: formatAPIError(routesError)
+            });
+        }
+    }, [
+        toggleNotification,
+        routesError,
+        formatAPIError
+    ]);
+    const isLoading = isLoadingPermissions || isLoadingRoutes;
+    return {
+        // TODO: these return values need to be memoized, otherwise
+        // they will create infinite rendering loops when used as
+        // effect dependencies
+        permissions: permissions ? cleanPermissions(permissions) : {},
+        routes: routes ?? {},
+        getData: refetchQueries,
+        isLoading
+    };
+};
+
+const CreatePage = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { toggleNotification } = admin.useNotification();
+    const navigate = reactRouterDom.useNavigate();
+    const { isLoading: isLoadingPlugins, permissions, routes } = usePlugins();
+    const { trackUsage } = admin.useTracking();
+    const permissionsRef = React__namespace.useRef();
+    const { post } = admin.useFetchClient();
+    const mutation = reactQuery.useMutation((body)=>post(`/users-permissions/roles`, body), {
+        onError () {
+            toggleNotification({
+                type: 'danger',
+                message: formatMessage({
+                    id: 'notification.error',
+                    defaultMessage: 'An error occurred'
+                })
+            });
+        },
+        onSuccess () {
+            trackUsage('didCreateRole');
+            toggleNotification({
+                type: 'success',
+                message: formatMessage({
+                    id: index.getTrad('Settings.roles.created'),
+                    defaultMessage: 'Role created'
+                })
+            });
+            // Forcing redirecting since we don't have the id in the response
+            navigate(-1);
+        }
+    });
+    const handleCreateRoleSubmit = async (data)=>{
+        // 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: []
+        });
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Main, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(admin.Page.Title, {
+                children: formatMessage({
+                    id: 'Settings.PageTitle',
+                    defaultMessage: 'Settings - {name}'
+                }, {
+                    name: 'Roles'
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(formik.Formik, {
+                enableReinitialize: true,
+                initialValues: {
+                    name: '',
+                    description: ''
+                },
+                onSubmit: handleCreateRoleSubmit,
+                validationSchema: createRoleSchema,
+                children: ({ handleSubmit, values, handleChange, errors })=>/*#__PURE__*/ jsxRuntime.jsxs(formik.Form, {
+                        noValidate: true,
+                        onSubmit: handleSubmit,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(admin.Layouts.Header, {
+                                primaryAction: !isLoadingPlugins && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                    type: "submit",
+                                    loading: mutation.isLoading,
+                                    startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Check, {}),
+                                    children: formatMessage({
+                                        id: 'global.save',
+                                        defaultMessage: 'Save'
+                                    })
+                                }),
+                                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'
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(admin.Layouts.Content, {
+                                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                    background: "neutral0",
+                                    direction: "column",
+                                    alignItems: "stretch",
+                                    gap: 7,
+                                    hasRadius: true,
+                                    paddingTop: 6,
+                                    paddingBottom: 6,
+                                    paddingLeft: 7,
+                                    paddingRight: 7,
+                                    shadow: "filterShadow",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                    variant: "delta",
+                                                    tag: "h2",
+                                                    children: formatMessage({
+                                                        id: index.getTrad('EditPage.form.roles'),
+                                                        defaultMessage: 'Role details'
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Grid.Root, {
+                                                    gap: 4,
+                                                    children: [
+                                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                                                            col: 6,
+                                                            direction: "column",
+                                                            alignItems: "stretch",
+                                                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+                                                                name: "name",
+                                                                error: errors?.name ? formatMessage({
+                                                                    id: errors.name,
+                                                                    defaultMessage: 'Name is required'
+                                                                }) : false,
+                                                                required: true,
+                                                                children: [
+                                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                                                                        children: formatMessage({
+                                                                            id: 'global.name',
+                                                                            defaultMessage: 'Name'
+                                                                        })
+                                                                    }),
+                                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextInput, {
+                                                                        value: values.name || '',
+                                                                        onChange: handleChange
+                                                                    }),
+                                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})
+                                                                ]
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                                                            col: 6,
+                                                            direction: "column",
+                                                            alignItems: "stretch",
+                                                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+                                                                name: "description",
+                                                                error: errors?.description ? formatMessage({
+                                                                    id: errors.description,
+                                                                    defaultMessage: 'Description is required'
+                                                                }) : false,
+                                                                required: true,
+                                                                children: [
+                                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                                                                        children: formatMessage({
+                                                                            id: 'global.description',
+                                                                            defaultMessage: 'Description'
+                                                                        })
+                                                                    }),
+                                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Textarea, {
+                                                                        value: values.description || '',
+                                                                        onChange: handleChange
+                                                                    }),
+                                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})
+                                                                ]
+                                                            })
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        !isLoadingPlugins && /*#__PURE__*/ jsxRuntime.jsx(UsersPermissions$1, {
+                                            ref: permissionsRef,
+                                            permissions: permissions,
+                                            routes: routes
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    })
+            })
+        ]
+    });
+};
+const ProtectedRolesCreatePage = ()=>/*#__PURE__*/ jsxRuntime.jsx(admin.Page.Protect, {
+        permissions: index.PERMISSIONS.createRole,
+        children: /*#__PURE__*/ jsxRuntime.jsx(CreatePage, {})
+    });
+
+const EditPage = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { toggleNotification } = admin.useNotification();
+    const { params: { id } } = reactRouterDom.useMatch(`/settings/users-permissions/roles/:id`);
+    const { get } = admin.useFetchClient();
+    const { isLoading: isLoadingPlugins, routes } = usePlugins();
+    const { data: role, isLoading: isLoadingRole, refetch: refetchRole } = reactQuery.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__namespace.useRef();
+    const { put } = admin.useFetchClient();
+    const { formatAPIError } = admin.useAPIErrorHandler();
+    const mutation = reactQuery.useMutation((body)=>put(`/users-permissions/roles/${id}`, body), {
+        onError (error) {
+            toggleNotification({
+                type: 'danger',
+                message: formatAPIError(error)
+            });
+        },
+        async onSuccess () {
+            toggleNotification({
+                type: 'success',
+                message: formatMessage({
+                    id: index.getTrad('Settings.roles.created'),
+                    defaultMessage: 'Role edited'
+                })
+            });
+            await refetchRole();
+        }
+    });
+    const handleEditRoleSubmit = async (data)=>{
+        const permissions = permissionsRef.current.getPermissions();
+        await mutation.mutate({
+            ...data,
+            ...permissions,
+            users: []
+        });
+    };
+    if (isLoadingRole) {
+        return /*#__PURE__*/ jsxRuntime.jsx(admin.Page.Loading, {});
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Main, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(admin.Page.Title, {
+                children: formatMessage({
+                    id: 'Settings.PageTitle',
+                    defaultMessage: 'Settings - {name}'
+                }, {
+                    name: 'Roles'
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(formik.Formik, {
+                enableReinitialize: true,
+                initialValues: {
+                    name: role.name,
+                    description: role.description
+                },
+                onSubmit: handleEditRoleSubmit,
+                validationSchema: createRoleSchema,
+                children: ({ handleSubmit, values, handleChange, errors })=>/*#__PURE__*/ jsxRuntime.jsxs(formik.Form, {
+                        noValidate: true,
+                        onSubmit: handleSubmit,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(admin.Layouts.Header, {
+                                primaryAction: !isLoadingPlugins ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                    disabled: role.code === 'strapi-super-admin',
+                                    type: "submit",
+                                    loading: mutation.isLoading,
+                                    startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Check, {}),
+                                    children: formatMessage({
+                                        id: 'global.save',
+                                        defaultMessage: 'Save'
+                                    })
+                                }) : null,
+                                title: role.name,
+                                subtitle: role.description,
+                                navigationAction: /*#__PURE__*/ jsxRuntime.jsx(admin.BackButton, {
+                                    fallback: ".."
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(admin.Layouts.Content, {
+                                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                    background: "neutral0",
+                                    direction: "column",
+                                    alignItems: "stretch",
+                                    gap: 7,
+                                    hasRadius: true,
+                                    paddingTop: 6,
+                                    paddingBottom: 6,
+                                    paddingLeft: 7,
+                                    paddingRight: 7,
+                                    shadow: "filterShadow",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            gap: 4,
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                    variant: "delta",
+                                                    tag: "h2",
+                                                    children: formatMessage({
+                                                        id: index.getTrad('EditPage.form.roles'),
+                                                        defaultMessage: 'Role details'
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Grid.Root, {
+                                                    gap: 4,
+                                                    children: [
+                                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                                                            col: 6,
+                                                            direction: "column",
+                                                            alignItems: "stretch",
+                                                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+                                                                name: "name",
+                                                                error: errors?.name ? formatMessage({
+                                                                    id: errors.name,
+                                                                    defaultMessage: 'Name is required'
+                                                                }) : false,
+                                                                required: true,
+                                                                children: [
+                                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                                                                        children: formatMessage({
+                                                                            id: 'global.name',
+                                                                            defaultMessage: 'Name'
+                                                                        })
+                                                                    }),
+                                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextInput, {
+                                                                        value: values.name || '',
+                                                                        onChange: handleChange
+                                                                    }),
+                                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})
+                                                                ]
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                                                            col: 6,
+                                                            direction: "column",
+                                                            alignItems: "stretch",
+                                                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+                                                                name: "description",
+                                                                error: errors?.description ? formatMessage({
+                                                                    id: errors.description,
+                                                                    defaultMessage: 'Description is required'
+                                                                }) : false,
+                                                                required: true,
+                                                                children: [
+                                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                                                                        children: formatMessage({
+                                                                            id: 'global.description',
+                                                                            defaultMessage: 'Description'
+                                                                        })
+                                                                    }),
+                                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Textarea, {
+                                                                        value: values.description || '',
+                                                                        onChange: handleChange
+                                                                    }),
+                                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})
+                                                                ]
+                                                            })
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        !isLoadingPlugins && /*#__PURE__*/ jsxRuntime.jsx(UsersPermissions$1, {
+                                            ref: permissionsRef,
+                                            permissions: role.permissions,
+                                            routes: routes
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    })
+            })
+        ]
+    });
+};
+const ProtectedRolesEditPage = ()=>/*#__PURE__*/ jsxRuntime.jsx(admin.Page.Protect, {
+        permissions: index.PERMISSIONS.updateRole,
+        children: /*#__PURE__*/ jsxRuntime.jsx(EditPage, {})
+    });
+
+const EditLink = styledComponents.styled(designSystem.Link)`
+  align-items: center;
+  height: 3.2rem;
+  width: 3.2rem;
+  display: flex;
+  justify-content: center;
+  padding: ${({ theme })=>`${theme.spaces[2]}`};
+
+  svg {
+    height: 1.6rem;
+    width: 1.6rem;
+
+    path {
+      fill: ${({ theme })=>theme.colors.neutral500};
+    }
+  }
+
+  &:hover,
+  &:focus {
+    svg {
+      path {
+        fill: ${({ theme })=>theme.colors.neutral800};
+      }
+    }
+  }
+`;
+const TableBody = ({ sortedRoles, canDelete, canUpdate, setRoleToDelete, onDelete })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const navigate = reactRouterDom.useNavigate();
+    const [showConfirmDelete, setShowConfirmDelete] = onDelete;
+    const checkCanDeleteRole = (role)=>canDelete && ![
+            'public',
+            'authenticated'
+        ].includes(role.type);
+    const handleClickDelete = (id)=>{
+        setRoleToDelete(id);
+        setShowConfirmDelete(!showConfirmDelete);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tbody, {
+        children: sortedRoles?.map((role)=>/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tr, {
+                cursor: "pointer",
+                onClick: ()=>navigate(role.id.toString()),
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
+                        width: "20%",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            children: role.name
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
+                        width: "50%",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            children: role.description
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
+                        width: "30%",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            children: formatMessage({
+                                id: 'Roles.RoleRow.user-count',
+                                defaultMessage: '{number, plural, =0 {# user} one {# user} other {# users}}'
+                            }, {
+                                number: role.nb_users
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            justifyContent: "end",
+                            onClick: (e)=>e.stopPropagation(),
+                            children: [
+                                canUpdate ? /*#__PURE__*/ jsxRuntime.jsx(EditLink, {
+                                    tag: reactRouterDom.NavLink,
+                                    to: role.id.toString(),
+                                    "aria-label": formatMessage({
+                                        id: 'app.component.table.edit',
+                                        defaultMessage: 'Edit {target}'
+                                    }, {
+                                        target: `${role.name}`
+                                    }),
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.Pencil, {})
+                                }) : null,
+                                checkCanDeleteRole(role) && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                    onClick: ()=>handleClickDelete(role.id.toString()),
+                                    variant: "ghost",
+                                    label: formatMessage({
+                                        id: 'global.delete-target',
+                                        defaultMessage: 'Delete {target}'
+                                    }, {
+                                        target: `${role.name}`
+                                    }),
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.Trash, {})
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }, role.name))
+    });
+};
+TableBody.defaultProps = {
+    canDelete: false,
+    canUpdate: false
+};
+TableBody.propTypes = {
+    onDelete: PropTypes.array.isRequired,
+    setRoleToDelete: PropTypes.func.isRequired,
+    sortedRoles: PropTypes.array.isRequired,
+    canDelete: PropTypes.bool,
+    canUpdate: PropTypes.bool
+};
+
+const RolesListPage = ()=>{
+    const { trackUsage } = admin.useTracking();
+    const { formatMessage, locale } = reactIntl.useIntl();
+    const { toggleNotification } = admin.useNotification();
+    const { notifyStatus } = designSystem.useNotifyAT();
+    const [{ query }] = admin.useQueryParams();
+    const _q = query?._q || '';
+    const [showConfirmDelete, setShowConfirmDelete] = React.useState(false);
+    const [roleToDelete, setRoleToDelete] = React.useState();
+    const { del, get } = admin.useFetchClient();
+    const { isLoading: isLoadingForPermissions, allowedActions: { canRead, canDelete, canCreate, canUpdate } } = admin.useRBAC({
+        create: index.PERMISSIONS.createRole,
+        read: index.PERMISSIONS.readRoles,
+        update: index.PERMISSIONS.updateRole,
+        delete: index.PERMISSIONS.deleteRole
+    });
+    const { isLoading: isLoadingForData, data: { roles }, isFetching, refetch } = reactQuery.useQuery('get-roles', ()=>fetchData(toggleNotification, formatMessage, notifyStatus), {
+        initialData: {},
+        enabled: canRead
+    });
+    const { contains } = designSystem.useFilter(locale, {
+        sensitivity: 'base'
+    });
+    /**
+   * @type {Intl.Collator}
+   */ const formatter = designSystem.useCollator(locale, {
+        sensitivity: 'base'
+    });
+    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: index.getTrad('Roles.empty'),
+            defaultMessage: "You don't have any roles yet."
+        },
+        search: {
+            id: index.getTrad('Roles.empty.search'),
+            defaultMessage: 'No roles match the search.'
+        }
+    };
+    const pageTitle = formatMessage({
+        id: 'global.roles',
+        defaultMessage: 'Roles'
+    });
+    const deleteMutation = reactQuery.useMutation((id)=>deleteData(id, formatMessage, toggleNotification), {
+        async onSuccess () {
+            await refetch();
+        }
+    });
+    const handleConfirmDelete = async ()=>{
+        await deleteMutation.mutateAsync(roleToDelete);
+        setShowConfirmDelete(!showConfirmDelete);
+    };
+    const sortedRoles = (roles || []).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));
+    const emptyContent = _q && !sortedRoles.length ? 'search' : 'roles';
+    const colCount = 4;
+    const rowCount = (roles?.length || 0) + 1;
+    if (isLoading) {
+        return /*#__PURE__*/ jsxRuntime.jsx(admin.Page.Loading, {});
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(admin.Layouts.Root, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(admin.Page.Title, {
+                children: formatMessage({
+                    id: 'Settings.PageTitle',
+                    defaultMessage: 'Settings - {name}'
+                }, {
+                    name: pageTitle
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(admin.Page.Main, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(admin.Layouts.Header, {
+                        title: formatMessage({
+                            id: 'global.roles',
+                            defaultMessage: 'Roles'
+                        }),
+                        subtitle: formatMessage({
+                            id: 'Settings.roles.list.description',
+                            defaultMessage: 'List of roles'
+                        }),
+                        primaryAction: canCreate ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.LinkButton, {
+                            to: "new",
+                            tag: reactRouterDom.NavLink,
+                            onClick: ()=>trackUsage('willCreateRole'),
+                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Plus, {}),
+                            size: "S",
+                            children: formatMessage({
+                                id: index.getTrad('List.button.roles'),
+                                defaultMessage: 'Add new role'
+                            })
+                        }) : null
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(admin.Layouts.Action, {
+                        startActions: /*#__PURE__*/ jsxRuntime.jsx(admin.SearchInput, {
+                            label: formatMessage({
+                                id: 'app.component.search.label',
+                                defaultMessage: 'Search'
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(admin.Layouts.Content, {
+                        children: [
+                            !canRead && /*#__PURE__*/ jsxRuntime.jsx(admin.Page.NoPermissions, {}),
+                            canRead && sortedRoles && sortedRoles?.length ? /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Table, {
+                                colCount: colCount,
+                                rowCount: rowCount,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Thead, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tr, {
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Th, {
+                                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                        variant: "sigma",
+                                                        textColor: "neutral600",
+                                                        children: formatMessage({
+                                                            id: 'global.name',
+                                                            defaultMessage: 'Name'
+                                                        })
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Th, {
+                                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                        variant: "sigma",
+                                                        textColor: "neutral600",
+                                                        children: formatMessage({
+                                                            id: 'global.description',
+                                                            defaultMessage: 'Description'
+                                                        })
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Th, {
+                                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                        variant: "sigma",
+                                                        textColor: "neutral600",
+                                                        children: formatMessage({
+                                                            id: 'global.users',
+                                                            defaultMessage: 'Users'
+                                                        })
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Th, {
+                                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                                                        children: formatMessage({
+                                                            id: 'global.actions',
+                                                            defaultMessage: 'Actions'
+                                                        })
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(TableBody, {
+                                        sortedRoles: sortedRoles,
+                                        canDelete: canDelete,
+                                        canUpdate: canUpdate,
+                                        permissions: index.PERMISSIONS,
+                                        setRoleToDelete: setRoleToDelete,
+                                        onDelete: [
+                                            showConfirmDelete,
+                                            setShowConfirmDelete
+                                        ]
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ jsxRuntime.jsx(designSystem.EmptyStateLayout, {
+                                content: formatMessage(emptyLayout[emptyContent])
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Root, {
+                        open: showConfirmDelete,
+                        onOpenChange: handleShowConfirmDelete,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(admin.ConfirmDialog, {
+                            onConfirm: handleConfirmDelete
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+const ProtectedRolesListPage = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(admin.Page.Protect, {
+        permissions: index.PERMISSIONS.accessRoles,
+        children: /*#__PURE__*/ jsxRuntime.jsx(RolesListPage, {})
+    });
+};
+
+const Roles = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(admin.Page.Protect, {
+        permissions: index.PERMISSIONS.accessRoles,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(reactRouterDom.Routes, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Route, {
+                    index: true,
+                    element: /*#__PURE__*/ jsxRuntime.jsx(ProtectedRolesListPage, {})
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Route, {
+                    path: "new",
+                    element: /*#__PURE__*/ jsxRuntime.jsx(ProtectedRolesCreatePage, {})
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Route, {
+                    path: ":id",
+                    element: /*#__PURE__*/ jsxRuntime.jsx(ProtectedRolesEditPage, {})
+                })
+            ]
+        })
+    });
+};
+
+exports.default = Roles;
+//# sourceMappingURL=index-D01zzG9y.js.map