@strapi/admin 4.15.0 → 4.15.2

package/dist/_chunks/index-f9e95b10.js

@@ -0,0 +1,365 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const helperPlugin = require("@strapi/helper-plugin");
+const reactRedux = require("react-redux");
+const AuthenticatedApp = require("./AuthenticatedApp-d1e28164.js");
+const React = require("react");
+const designSystem = require("@strapi/design-system");
+const Icons = require("@strapi/icons");
+const reactIntl = require("react-intl");
+const reactRouterDom = require("react-router-dom");
+const useAdminRoles = require("./useAdminRoles-68d5d608.js");
+const PropTypes = require("prop-types");
+const produce = require("immer");
+require("react-query");
+require("semver/functions/lt");
+require("semver/functions/valid");
+require("./index-e2663a88.js");
+require("react-dom/client");
+require("invariant");
+require("lodash/isFunction");
+require("lodash/merge");
+require("lodash/pick");
+require("react-helmet");
+require("@radix-ui/react-context");
+require("@strapi/design-system/v2");
+require("formik");
+require("lodash/camelCase");
+require("styled-components");
+require("yup");
+require("lodash/defaultsDeep");
+require("lodash/omit");
+require("qs");
+require("lodash/get");
+require("lodash/set");
+require("@reduxjs/toolkit");
+require("react-dnd");
+require("react-dnd-html5-backend");
+require("lodash/cloneDeep");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const PropTypes__default = /* @__PURE__ */ _interopDefault(PropTypes);
+const produce__default = /* @__PURE__ */ _interopDefault(produce);
+const EmptyRole = () => "todo empty role";
+const RoleRow = ({ id, name, description, usersCount, icons, rowIndex, canUpdate }) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const [, editObject] = icons;
+  const usersCountText = formatMessage(
+    {
+      id: `Roles.RoleRow.user-count`,
+      defaultMessage: "{number, plural, =0 {#  user} one {#  user} other {# users}}"
+    },
+    { number: usersCount }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    designSystem.Tr,
+    {
+      "aria-rowindex": rowIndex,
+      ...canUpdate ? helperPlugin.onRowClick({
+        fn: editObject.onClick
+      }) : {},
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { maxWidth: helperPlugin.pxToRem(130), children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { ellipsis: true, textColor: "neutral800", children: name }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { maxWidth: helperPlugin.pxToRem(250), children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { ellipsis: true, textColor: "neutral800", children: description }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", children: usersCountText }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "flex-end", ...helperPlugin.stopPropagation, children: icons.map(
+          (icon, i) => icon ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: i === 0 ? 0 : 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { onClick: icon.onClick, label: icon.label, noBorder: true, icon: icon.icon }) }, icon.label) : null
+        ) }) })
+      ]
+    },
+    id
+  );
+};
+RoleRow.propTypes = {
+  id: PropTypes__default.default.number.isRequired,
+  name: PropTypes__default.default.string.isRequired,
+  description: PropTypes__default.default.string.isRequired,
+  usersCount: PropTypes__default.default.number.isRequired,
+  icons: PropTypes__default.default.array.isRequired,
+  rowIndex: PropTypes__default.default.number.isRequired,
+  canUpdate: PropTypes__default.default.bool
+};
+RoleRow.defaultProps = {
+  canUpdate: false
+};
+const initialState = {
+  roleToDelete: null,
+  showModalConfirmButtonLoading: false,
+  shouldRefetchData: false
+};
+const reducer = (state, action) => produce__default.default(state, (draftState) => {
+  switch (action.type) {
+    case "ON_REMOVE_ROLES": {
+      draftState.showModalConfirmButtonLoading = true;
+      break;
+    }
+    case "ON_REMOVE_ROLES_SUCCEEDED": {
+      draftState.shouldRefetchData = true;
+      draftState.roleToDelete = null;
+      break;
+    }
+    case "RESET_DATA_TO_DELETE": {
+      draftState.shouldRefetchData = false;
+      draftState.roleToDelete = null;
+      draftState.showModalConfirmButtonLoading = false;
+      break;
+    }
+    case "SET_ROLE_TO_DELETE": {
+      draftState.roleToDelete = action.id;
+      break;
+    }
+    default:
+      return draftState;
+  }
+});
+const useRoleActions = ({ canCreate, canDelete, canUpdate, refetchRoles }) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { formatAPIError } = helperPlugin.useAPIErrorHandler();
+  const toggleNotification = helperPlugin.useNotification();
+  const [isWarningDeleteAllOpened, setIsWarningDeleteAllOpenend] = React.useState(false);
+  const { push } = reactRouterDom.useHistory();
+  const [{ selectedRoles, showModalConfirmButtonLoading, roleToDelete }, dispatch] = React.useReducer(
+    reducer,
+    initialState
+  );
+  const { post } = helperPlugin.getFetchClient();
+  const handleDeleteData = async () => {
+    try {
+      dispatch({
+        type: "ON_REMOVE_ROLES"
+      });
+      await post("/admin/roles/batch-delete", {
+        ids: [roleToDelete]
+      });
+      await refetchRoles();
+      dispatch({
+        type: "RESET_DATA_TO_DELETE"
+      });
+    } catch (error) {
+      toggleNotification({
+        type: "warning",
+        message: formatAPIError(error)
+      });
+    }
+    handleToggleModal();
+  };
+  const onRoleDuplicate = React.useCallback(
+    (id) => {
+      push(`/settings/roles/duplicate/${id}`);
+    },
+    [push]
+  );
+  const handleNewRoleClick = () => push("/settings/roles/new");
+  const onRoleRemove = React.useCallback((roleId) => {
+    dispatch({
+      type: "SET_ROLE_TO_DELETE",
+      id: roleId
+    });
+    handleToggleModal();
+  }, []);
+  const handleToggleModal = () => setIsWarningDeleteAllOpenend((prev) => !prev);
+  const handleGoTo = React.useCallback(
+    (id) => {
+      push(`/settings/roles/${id}`);
+    },
+    [push]
+  );
+  const handleClickDelete = React.useCallback(
+    (e, role) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (role.usersCount) {
+        toggleNotification({
+          type: "info",
+          message: { id: "Roles.ListPage.notification.delete-not-allowed" }
+        });
+      } else {
+        onRoleRemove(role.id);
+      }
+    },
+    [toggleNotification, onRoleRemove]
+  );
+  const handleClickDuplicate = React.useCallback(
+    (e, role) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onRoleDuplicate(role.id);
+    },
+    [onRoleDuplicate]
+  );
+  const getIcons = React.useCallback(
+    (role) => [
+      ...canCreate ? [
+        {
+          onClick: (e) => handleClickDuplicate(e, role),
+          label: formatMessage({ id: "app.utils.duplicate", defaultMessage: "Duplicate" }),
+          icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Duplicate, {})
+        }
+      ] : [],
+      ...canUpdate ? [
+        {
+          onClick: () => handleGoTo(role.id),
+          label: formatMessage({ id: "app.utils.edit", defaultMessage: "Edit" }),
+          icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Pencil, {})
+        }
+      ] : [],
+      ...canDelete ? [
+        {
+          onClick: (e) => handleClickDelete(e, role),
+          label: formatMessage({ id: "global.delete", defaultMessage: "Delete" }),
+          icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
+        }
+      ] : []
+    ],
+    [
+      formatMessage,
+      handleClickDelete,
+      handleClickDuplicate,
+      handleGoTo,
+      canCreate,
+      canUpdate,
+      canDelete
+    ]
+  );
+  return {
+    handleNewRoleClick,
+    getIcons,
+    selectedRoles,
+    isWarningDeleteAllOpened,
+    showModalConfirmButtonLoading,
+    handleToggleModal,
+    handleDeleteData
+  };
+};
+const RoleListPage = () => {
+  const { formatMessage } = reactIntl.useIntl();
+  helperPlugin.useFocusWhenNavigate();
+  const permissions = reactRedux.useSelector(AuthenticatedApp.selectAdminPermissions);
+  const [{ query }] = helperPlugin.useQueryParams();
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: { canCreate, canDelete, canRead, canUpdate }
+  } = helperPlugin.useRBAC(permissions.settings.roles);
+  const {
+    roles,
+    isLoading,
+    refetch: refetchRoles
+  } = useAdminRoles.useAdminRoles(
+    { filters: query?._q ? { name: { $containsi: query._q } } : void 0 },
+    {
+      cacheTime: 0,
+      enabled: !isLoadingForPermissions && canRead
+    }
+  );
+  const {
+    handleNewRoleClick,
+    getIcons,
+    isWarningDeleteAllOpened,
+    showModalConfirmButtonLoading,
+    handleToggleModal,
+    handleDeleteData
+  } = useRoleActions({ refetchRoles, canCreate, canDelete, canUpdate });
+  const rowCount = roles.length + 1;
+  const colCount = 6;
+  if (isLoadingForPermissions) {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Main, { children: /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.LoadingIndicatorPage, {}) });
+  }
+  const title = formatMessage({
+    id: "global.roles",
+    defaultMessage: "roles"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.SettingsPageTitle, { name: "Roles" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.HeaderLayout,
+      {
+        primaryAction: canCreate ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: handleNewRoleClick, startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, {}), size: "S", children: formatMessage({
+          id: "Settings.roles.list.button.add",
+          defaultMessage: "Add new role"
+        }) }) : null,
+        title,
+        subtitle: formatMessage({
+          id: "Settings.roles.list.description",
+          defaultMessage: "List of roles"
+        }),
+        as: "h2"
+      }
+    ),
+    canRead && /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.ActionLayout,
+      {
+        startActions: /* @__PURE__ */ jsxRuntime.jsx(
+          helperPlugin.SearchURLQuery,
+          {
+            label: formatMessage(
+              { id: "app.component.search.label", defaultMessage: "Search for {target}" },
+              { target: title }
+            )
+          }
+        )
+      }
+    ),
+    canRead && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.ContentLayout, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.Table,
+        {
+          colCount,
+          rowCount,
+          footer: canCreate ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.TFooter, { onClick: handleNewRoleClick, icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, {}), children: formatMessage({
+            id: "Settings.roles.list.button.add",
+            defaultMessage: "Add new role"
+          }) }) : null,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { "aria-rowindex": 1, 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(designSystem.Tbody, { children: roles?.map((role, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              RoleRow,
+              {
+                id: role.id,
+                name: role.name,
+                description: role.description,
+                usersCount: role.usersCount,
+                icons: getIcons(role),
+                rowIndex: index + 2,
+                canUpdate
+              },
+              role.id
+            )) })
+          ]
+        }
+      ),
+      !rowCount && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(EmptyRole, {})
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      helperPlugin.ConfirmDialog,
+      {
+        isOpen: isWarningDeleteAllOpened,
+        onConfirm: handleDeleteData,
+        isConfirmButtonLoading: showModalConfirmButtonLoading,
+        onToggleDialog: handleToggleModal
+      }
+    )
+  ] });
+};
+const ProtectedListPage = () => {
+  const permissions = reactRedux.useSelector(AuthenticatedApp.selectAdminPermissions);
+  return /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.CheckPagePermissions, { permissions: permissions.settings.roles.main, children: /* @__PURE__ */ jsxRuntime.jsx(RoleListPage, {}) });
+};
+exports.default = ProtectedListPage;
+//# sourceMappingURL=index-f9e95b10.js.map

package/dist/_chunks/index-f9e95b10.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-f9e95b10.js","sources":["../../admin/src/pages/SettingsPage/pages/Roles/ListPage/components/EmptyRole/index.js","../../admin/src/pages/SettingsPage/pages/Roles/ListPage/components/RoleRow/index.js","../../admin/src/pages/SettingsPage/pages/Roles/ListPage/reducer.js","../../admin/src/pages/SettingsPage/pages/Roles/ListPage/index.js","../../admin/src/pages/SettingsPage/pages/Roles/ProtectedListPage/index.js"],"sourcesContent":["export default () => 'todo empty role';\n","import React from 'react';\n\nimport { Box, Flex, IconButton, Td, Tr, Typography } from '@strapi/design-system';\nimport { onRowClick, pxToRem, stopPropagation } from '@strapi/helper-plugin';\nimport PropTypes from 'prop-types';\nimport { useIntl } from 'react-intl';\n\nconst RoleRow = ({ id, name, description, usersCount, icons, rowIndex, canUpdate }) => {\n  const { formatMessage } = useIntl();\n  const [, editObject] = icons;\n\n  const usersCountText = formatMessage(\n    {\n      id: `Roles.RoleRow.user-count`,\n      defaultMessage: '{number, plural, =0 {#  user} one {#  user} other {# users}}',\n    },\n    { number: usersCount }\n  );\n\n  return (\n    <Tr\n      aria-rowindex={rowIndex}\n      key={id}\n      {...(canUpdate\n        ? onRowClick({\n            fn: editObject.onClick,\n          })\n        : {})}\n    >\n      <Td maxWidth={pxToRem(130)}>\n        <Typography ellipsis textColor=\"neutral800\">\n          {name}\n        </Typography>\n      </Td>\n      <Td maxWidth={pxToRem(250)}>\n        <Typography ellipsis textColor=\"neutral800\">\n          {description}\n        </Typography>\n      </Td>\n      <Td>\n        <Typography textColor=\"neutral800\">{usersCountText}</Typography>\n      </Td>\n      <Td>\n        <Flex justifyContent=\"flex-end\" {...stopPropagation}>\n          {icons.map((icon, i) =>\n            icon ? (\n              <Box key={icon.label} paddingLeft={i === 0 ? 0 : 1}>\n                <IconButton onClick={icon.onClick} label={icon.label} noBorder icon={icon.icon} />\n              </Box>\n            ) : null\n          )}\n        </Flex>\n      </Td>\n    </Tr>\n  );\n};\n\nRoleRow.propTypes = {\n  id: PropTypes.number.isRequired,\n  name: PropTypes.string.isRequired,\n  description: PropTypes.string.isRequired,\n  usersCount: PropTypes.number.isRequired,\n  icons: PropTypes.array.isRequired,\n  rowIndex: PropTypes.number.isRequired,\n  canUpdate: PropTypes.bool,\n};\n\nRoleRow.defaultProps = {\n  canUpdate: false,\n};\n\nexport default RoleRow;\n","/* eslint-disable consistent-return */\nimport produce from 'immer';\n\nexport const initialState = {\n  roleToDelete: null,\n  showModalConfirmButtonLoading: false,\n  shouldRefetchData: false,\n};\n\nconst reducer = (state, action) =>\n  produce(state, (draftState) => {\n    switch (action.type) {\n      case 'ON_REMOVE_ROLES': {\n        draftState.showModalConfirmButtonLoading = true;\n        break;\n      }\n      case 'ON_REMOVE_ROLES_SUCCEEDED': {\n        draftState.shouldRefetchData = true;\n        draftState.roleToDelete = null;\n        break;\n      }\n      case 'RESET_DATA_TO_DELETE': {\n        draftState.shouldRefetchData = false;\n        draftState.roleToDelete = null;\n        draftState.showModalConfirmButtonLoading = false;\n        break;\n      }\n      case 'SET_ROLE_TO_DELETE': {\n        draftState.roleToDelete = action.id;\n\n        break;\n      }\n      default:\n        return draftState;\n    }\n  });\n\nexport default reducer;\n","import React, { useCallback, useReducer, useState } from 'react';\n\nimport {\n  ActionLayout,\n  Button,\n  ContentLayout,\n  HeaderLayout,\n  Main,\n  Table,\n  Tbody,\n  TFooter,\n  Th,\n  Thead,\n  Tr,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport {\n  ConfirmDialog,\n  getFetchClient,\n  LoadingIndicatorPage,\n  SearchURLQuery,\n  SettingsPageTitle,\n  useAPIErrorHandler,\n  useFocusWhenNavigate,\n  useQueryParams,\n  useNotification,\n  useRBAC,\n} from '@strapi/helper-plugin';\nimport { Duplicate, Pencil, Plus, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useSelector } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\n\nimport { useAdminRoles } from '../../../../../hooks/useAdminRoles';\nimport { selectAdminPermissions } from '../../../../../selectors';\n\nimport EmptyRole from './components/EmptyRole';\nimport BaseRoleRow from './components/RoleRow';\nimport reducer, { initialState } from './reducer';\n\nconst useRoleActions = ({ canCreate, canDelete, canUpdate, refetchRoles }) => {\n  const { formatMessage } = useIntl();\n  const { formatAPIError } = useAPIErrorHandler();\n  const toggleNotification = useNotification();\n  const [isWarningDeleteAllOpened, setIsWarningDeleteAllOpenend] = useState(false);\n  const { push } = useHistory();\n  const [{ selectedRoles, showModalConfirmButtonLoading, roleToDelete }, dispatch] = useReducer(\n    reducer,\n    initialState\n  );\n\n  const { post } = getFetchClient();\n\n  const handleDeleteData = async () => {\n    try {\n      dispatch({\n        type: 'ON_REMOVE_ROLES',\n      });\n\n      await post('/admin/roles/batch-delete', {\n        ids: [roleToDelete],\n      });\n\n      await refetchRoles();\n\n      dispatch({\n        type: 'RESET_DATA_TO_DELETE',\n      });\n    } catch (error) {\n      toggleNotification({\n        type: 'warning',\n        message: formatAPIError(error),\n      });\n    }\n    handleToggleModal();\n  };\n\n  const onRoleDuplicate = useCallback(\n    (id) => {\n      push(`/settings/roles/duplicate/${id}`);\n    },\n    [push]\n  );\n\n  const handleNewRoleClick = () => push('/settings/roles/new');\n\n  const onRoleRemove = useCallback((roleId) => {\n    dispatch({\n      type: 'SET_ROLE_TO_DELETE',\n      id: roleId,\n    });\n\n    handleToggleModal();\n  }, []);\n\n  const handleToggleModal = () => setIsWarningDeleteAllOpenend((prev) => !prev);\n\n  const handleGoTo = useCallback(\n    (id) => {\n      push(`/settings/roles/${id}`);\n    },\n    [push]\n  );\n\n  const handleClickDelete = useCallback(\n    (e, role) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (role.usersCount) {\n        toggleNotification({\n          type: 'info',\n          message: { id: 'Roles.ListPage.notification.delete-not-allowed' },\n        });\n      } else {\n        onRoleRemove(role.id);\n      }\n    },\n    [toggleNotification, onRoleRemove]\n  );\n\n  const handleClickDuplicate = useCallback(\n    (e, role) => {\n      e.preventDefault();\n      e.stopPropagation();\n      onRoleDuplicate(role.id);\n    },\n    [onRoleDuplicate]\n  );\n\n  const getIcons = useCallback(\n    (role) => [\n      ...(canCreate\n        ? [\n            {\n              onClick: (e) => handleClickDuplicate(e, role),\n              label: formatMessage({ id: 'app.utils.duplicate', defaultMessage: 'Duplicate' }),\n              icon: <Duplicate />,\n            },\n          ]\n        : []),\n      ...(canUpdate\n        ? [\n            {\n              onClick: () => handleGoTo(role.id),\n              label: formatMessage({ id: 'app.utils.edit', defaultMessage: 'Edit' }),\n              icon: <Pencil />,\n            },\n          ]\n        : []),\n      ...(canDelete\n        ? [\n            {\n              onClick: (e) => handleClickDelete(e, role),\n              label: formatMessage({ id: 'global.delete', defaultMessage: 'Delete' }),\n              icon: <Trash />,\n            },\n          ]\n        : []),\n    ],\n    [\n      formatMessage,\n      handleClickDelete,\n      handleClickDuplicate,\n      handleGoTo,\n      canCreate,\n      canUpdate,\n      canDelete,\n    ]\n  );\n\n  return {\n    handleNewRoleClick,\n    getIcons,\n    selectedRoles,\n    isWarningDeleteAllOpened,\n    showModalConfirmButtonLoading,\n    handleToggleModal,\n    handleDeleteData,\n  };\n};\n\nconst RoleListPage = () => {\n  const { formatMessage } = useIntl();\n  useFocusWhenNavigate();\n  const permissions = useSelector(selectAdminPermissions);\n  const [{ query }] = useQueryParams();\n  const {\n    isLoading: isLoadingForPermissions,\n    allowedActions: { canCreate, canDelete, canRead, canUpdate },\n  } = useRBAC(permissions.settings.roles);\n\n  const {\n    roles,\n    isLoading,\n    refetch: refetchRoles,\n  } = useAdminRoles(\n    { filters: query?._q ? { name: { $containsi: query._q } } : undefined },\n    {\n      cacheTime: 0,\n      enabled: !isLoadingForPermissions && canRead,\n    }\n  );\n\n  const {\n    handleNewRoleClick,\n    getIcons,\n    isWarningDeleteAllOpened,\n    showModalConfirmButtonLoading,\n    handleToggleModal,\n    handleDeleteData,\n  } = useRoleActions({ refetchRoles, canCreate, canDelete, canUpdate });\n\n  // ! TODO - Show the search bar only if the user is allowed to read - add the search input\n  // canRead\n\n  const rowCount = roles.length + 1;\n  const colCount = 6;\n\n  if (isLoadingForPermissions) {\n    return (\n      <Main>\n        <LoadingIndicatorPage />\n      </Main>\n    );\n  }\n\n  const title = formatMessage({\n    id: 'global.roles',\n    defaultMessage: 'roles',\n  });\n\n  return (\n    <Main>\n      <SettingsPageTitle name=\"Roles\" />\n      <HeaderLayout\n        primaryAction={\n          canCreate ? (\n            <Button onClick={handleNewRoleClick} startIcon={<Plus />} size=\"S\">\n              {formatMessage({\n                id: 'Settings.roles.list.button.add',\n                defaultMessage: 'Add new role',\n              })}\n            </Button>\n          ) : null\n        }\n        title={title}\n        subtitle={formatMessage({\n          id: 'Settings.roles.list.description',\n          defaultMessage: 'List of roles',\n        })}\n        as=\"h2\"\n      />\n      {canRead && (\n        <ActionLayout\n          startActions={\n            <SearchURLQuery\n              label={formatMessage(\n                { id: 'app.component.search.label', defaultMessage: 'Search for {target}' },\n                { target: title }\n              )}\n            />\n          }\n        />\n      )}\n      {canRead && (\n        <ContentLayout>\n          <Table\n            colCount={colCount}\n            rowCount={rowCount}\n            footer={\n              canCreate ? (\n                <TFooter onClick={handleNewRoleClick} icon={<Plus />}>\n                  {formatMessage({\n                    id: 'Settings.roles.list.button.add',\n                    defaultMessage: 'Add new role',\n                  })}\n                </TFooter>\n              ) : null\n            }\n          >\n            <Thead>\n              <Tr aria-rowindex={1}>\n                <Th>\n                  <Typography variant=\"sigma\" textColor=\"neutral600\">\n                    {formatMessage({\n                      id: 'global.name',\n                      defaultMessage: 'Name',\n                    })}\n                  </Typography>\n                </Th>\n                <Th>\n                  <Typography variant=\"sigma\" textColor=\"neutral600\">\n                    {formatMessage({\n                      id: 'global.description',\n                      defaultMessage: 'Description',\n                    })}\n                  </Typography>\n                </Th>\n                <Th>\n                  <Typography variant=\"sigma\" textColor=\"neutral600\">\n                    {formatMessage({\n                      id: 'global.users',\n                      defaultMessage: 'Users',\n                    })}\n                  </Typography>\n                </Th>\n                <Th>\n                  <VisuallyHidden>\n                    {formatMessage({\n                      id: 'global.actions',\n                      defaultMessage: 'Actions',\n                    })}\n                  </VisuallyHidden>\n                </Th>\n              </Tr>\n            </Thead>\n            <Tbody>\n              {roles?.map((role, index) => (\n                <BaseRoleRow\n                  key={role.id}\n                  id={role.id}\n                  name={role.name}\n                  description={role.description}\n                  usersCount={role.usersCount}\n                  icons={getIcons(role)}\n                  rowIndex={index + 2}\n                  canUpdate={canUpdate}\n                />\n              ))}\n            </Tbody>\n          </Table>\n          {!rowCount && !isLoading && <EmptyRole />}\n        </ContentLayout>\n      )}\n      <ConfirmDialog\n        isOpen={isWarningDeleteAllOpened}\n        onConfirm={handleDeleteData}\n        isConfirmButtonLoading={showModalConfirmButtonLoading}\n        onToggleDialog={handleToggleModal}\n      />\n    </Main>\n  );\n};\n\nexport default RoleListPage;\n","import React from 'react';\n\nimport { CheckPagePermissions } from '@strapi/helper-plugin';\nimport { useSelector } from 'react-redux';\n\nimport { selectAdminPermissions } from '../../../../../selectors';\nimport ListPage from '../ListPage';\n\nconst ProtectedListPage = () => {\n  const permissions = useSelector(selectAdminPermissions);\n\n  return (\n    <CheckPagePermissions permissions={permissions.settings.roles.main}>\n      <ListPage />\n    </CheckPagePermissions>\n  );\n};\n\nexport default ProtectedListPage;\n"],"names":["useIntl","jsxs","Tr","onRowClick","jsx","Td","pxToRem","Typography","Flex","stopPropagation","Box","IconButton","PropTypes","produce","useAPIErrorHandler","useNotification","useState","useHistory","useReducer","getFetchClient","useCallback","Duplicate","Pencil","Trash","useFocusWhenNavigate","useSelector","selectAdminPermissions","useQueryParams","useRBAC","useAdminRoles","Main","LoadingIndicatorPage","SettingsPageTitle","HeaderLayout","Button","Plus","ActionLayout","SearchURLQuery","ContentLayout","Table","TFooter","Thead","Th","VisuallyHidden","Tbody","BaseRoleRow","ConfirmDialog","CheckPagePermissions","ListPage"],"mappings":"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"}

package/dist/_chunks/index-fc700e52.js

@@ -0,0 +1,263 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const designSystem = require("@strapi/design-system");
+const helperPlugin = require("@strapi/helper-plugin");
+const PropTypes = require("prop-types");
+const reactIntl = require("react-intl");
+const reactRouterDom = require("react-router-dom");
+const React = require("react");
+const Icons = require("@strapi/icons");
+const styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const PropTypes__default = /* @__PURE__ */ _interopDefault(PropTypes);
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const DeleteButton = ({ tokenName, onClickDelete, tokenType }) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { trackUsage } = helperPlugin.useTracking();
+  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);
+  const handleClickDelete = () => {
+    setShowConfirmDialog(false);
+    trackUsage("willDeleteToken", {
+      tokenType
+    });
+    onClickDelete();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingLeft: 1, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.IconButton,
+      {
+        onClick: () => {
+          setShowConfirmDialog(true);
+        },
+        label: formatMessage(
+          {
+            id: "global.delete-target",
+            defaultMessage: "Delete {target}"
+          },
+          { target: `${tokenName}` }
+        ),
+        name: "delete",
+        noBorder: true,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      helperPlugin.ConfirmDialog,
+      {
+        onToggleDialog: () => setShowConfirmDialog(false),
+        onConfirm: handleClickDelete,
+        isOpen: showConfirmDialog
+      }
+    )
+  ] });
+};
+DeleteButton.propTypes = {
+  tokenName: PropTypes__default.default.string.isRequired,
+  onClickDelete: PropTypes__default.default.func.isRequired,
+  tokenType: PropTypes__default.default.string.isRequired
+};
+const MESSAGES_MAP = {
+  edit: {
+    id: "app.component.table.edit",
+    defaultMessage: "Edit {target}"
+  },
+  read: {
+    id: "app.component.table.read",
+    defaultMessage: "Read {target}"
+  }
+};
+const LinkStyled = styled__default.default(helperPlugin.Link)`
+  svg {
+    path {
+      fill: ${({ theme }) => theme.colors.neutral500};
+    }
+  }
+
+  &:hover,
+  &:focus {
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.neutral800};
+      }
+    }
+  }
+`;
+const DefaultButton = ({ tokenName, tokenId, buttonType, children }) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const {
+    location: { pathname }
+  } = reactRouterDom.useHistory();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LinkStyled,
+    {
+      to: `${pathname}/${tokenId}`,
+      title: formatMessage(MESSAGES_MAP[buttonType], { target: tokenName }),
+      children
+    }
+  );
+};
+DefaultButton.propTypes = {
+  tokenName: PropTypes__default.default.string.isRequired,
+  tokenId: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]).isRequired,
+  buttonType: PropTypes__default.default.string,
+  children: PropTypes__default.default.node.isRequired
+};
+DefaultButton.defaultProps = {
+  buttonType: "edit"
+};
+const ReadButton = ({ tokenName, tokenId }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(DefaultButton, { tokenName, tokenId, buttonType: "read", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Eye, {}) });
+};
+ReadButton.propTypes = {
+  tokenName: PropTypes__default.default.string.isRequired,
+  tokenId: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]).isRequired
+};
+const UpdateButton = ({ tokenName, tokenId }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(DefaultButton, { tokenName, tokenId, children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Pencil, {}) });
+};
+UpdateButton.propTypes = {
+  tokenName: PropTypes__default.default.string.isRequired,
+  tokenId: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]).isRequired
+};
+const Table = ({
+  permissions,
+  headers,
+  contentType,
+  isLoading,
+  tokens,
+  onConfirmDelete,
+  tokenType
+}) => {
+  const { canDelete, canUpdate, canRead } = permissions;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    helperPlugin.DynamicTable,
+    {
+      headers,
+      contentType,
+      rows: tokens,
+      withBulkActions: canDelete || canUpdate || canRead,
+      isLoading,
+      onConfirmDelete,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        TableRows,
+        {
+          tokenType,
+          permissions,
+          onConfirmDelete
+        }
+      )
+    }
+  );
+};
+Table.propTypes = {
+  tokens: PropTypes__default.default.array,
+  permissions: PropTypes__default.default.shape({
+    canRead: PropTypes__default.default.bool,
+    canDelete: PropTypes__default.default.bool,
+    canUpdate: PropTypes__default.default.bool
+  }).isRequired,
+  headers: PropTypes__default.default.arrayOf(
+    PropTypes__default.default.shape({
+      cellFormatter: PropTypes__default.default.func,
+      key: PropTypes__default.default.string.isRequired,
+      metadatas: PropTypes__default.default.shape({
+        label: PropTypes__default.default.string.isRequired,
+        sortable: PropTypes__default.default.bool
+      }).isRequired,
+      name: PropTypes__default.default.string.isRequired
+    })
+  ),
+  contentType: PropTypes__default.default.string.isRequired,
+  isLoading: PropTypes__default.default.bool,
+  onConfirmDelete: PropTypes__default.default.func,
+  tokenType: PropTypes__default.default.string.isRequired
+};
+Table.defaultProps = {
+  tokens: [],
+  headers: [],
+  isLoading: false,
+  onConfirmDelete() {
+  }
+};
+const TableRows = ({ tokenType, permissions, rows, withBulkActions, onConfirmDelete }) => {
+  const { canDelete, canUpdate, canRead } = permissions;
+  const [{ query }] = helperPlugin.useQueryParams();
+  const { formatMessage } = reactIntl.useIntl();
+  const [, sortOrder] = query ? query.sort.split(":") : "ASC";
+  const {
+    push,
+    location: { pathname }
+  } = reactRouterDom.useHistory();
+  const { trackUsage } = helperPlugin.useTracking();
+  const sortedTokens = rows.sort((a, b) => {
+    const comparison = a.name.localeCompare(b.name);
+    return sortOrder === "DESC" ? -comparison : comparison;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: sortedTokens.map((token) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Tr,
+      {
+        ...helperPlugin.onRowClick({
+          fn() {
+            trackUsage("willEditTokenFromList", {
+              tokenType
+            });
+            push(`${pathname}/${token.id}`);
+          },
+          condition: canUpdate
+        }),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { maxWidth: helperPlugin.pxToRem(250), children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", fontWeight: "bold", ellipsis: true, children: token.name }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { maxWidth: helperPlugin.pxToRem(250), children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", ellipsis: true, children: token.description }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", children: /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.RelativeTime, { timestamp: new Date(token.createdAt) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: token.lastUsedAt && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", children: /* @__PURE__ */ jsxRuntime.jsx(
+            helperPlugin.RelativeTime,
+            {
+              timestamp: new Date(token.lastUsedAt),
+              customIntervals: [
+                {
+                  unit: "hours",
+                  threshold: 1,
+                  text: formatMessage({
+                    id: "Settings.apiTokens.lastHour",
+                    defaultMessage: "last hour"
+                  })
+                }
+              ]
+            }
+          ) }) }),
+          withBulkActions && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "end", children: [
+            canUpdate && /* @__PURE__ */ jsxRuntime.jsx(UpdateButton, { tokenName: token.name, tokenId: token.id }),
+            !canUpdate && canRead && /* @__PURE__ */ jsxRuntime.jsx(ReadButton, { tokenName: token.name, tokenId: token.id }),
+            canDelete && /* @__PURE__ */ jsxRuntime.jsx(
+              DeleteButton,
+              {
+                tokenName: token.name,
+                onClickDelete: () => onConfirmDelete(token.id),
+                tokenType
+              }
+            )
+          ] }) })
+        ]
+      },
+      token.id
+    );
+  }) });
+};
+TableRows.defaultProps = {
+  rows: [],
+  withBulkActions: false
+};
+TableRows.propTypes = {
+  rows: PropTypes__default.default.array,
+  permissions: PropTypes__default.default.shape({
+    canRead: PropTypes__default.default.bool,
+    canDelete: PropTypes__default.default.bool,
+    canUpdate: PropTypes__default.default.bool
+  }).isRequired,
+  onConfirmDelete: PropTypes__default.default.func.isRequired,
+  tokenType: PropTypes__default.default.string.isRequired,
+  withBulkActions: PropTypes__default.default.bool
+};
+exports.Table = Table;
+//# sourceMappingURL=index-fc700e52.js.map