{
+ useEffect(() => {
+ console.error(
+ 'This component will soon be removed, please check out the PageTemplate in the storybook'
+ );
+ }, []);
+
if (!canRead) {
return (
diff --git a/packages/core/helper-plugin/lib/src/components/NoContent/NoContent.stories.mdx b/packages/core/helper-plugin/lib/src/components/NoContent/NoContent.stories.mdx
new file mode 100644
index 0000000000..a1da2d5546
--- /dev/null
+++ b/packages/core/helper-plugin/lib/src/components/NoContent/NoContent.stories.mdx
@@ -0,0 +1,31 @@
+
+
+import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { Main, Row, Button } from '@strapi/parts';
+import NoContent from './index';
+
+
+
+# NoContent
+
+This component is used to display an empty state.
+
+## Usage
+
+
+
+### Props
+
+
diff --git a/packages/core/helper-plugin/lib/src/components/NoContent/index.js b/packages/core/helper-plugin/lib/src/components/NoContent/index.js
new file mode 100644
index 0000000000..0e50062207
--- /dev/null
+++ b/packages/core/helper-plugin/lib/src/components/NoContent/index.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import EmptyStateDocument from '@strapi/icons/EmptyStateDocument';
+import { EmptyStateLayout } from '@strapi/parts/EmptyStateLayout';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
+const NoContent = ({ content, ...rest }) => {
+ const { formatMessage } = useIntl();
+
+ return (
+ }
+ {...rest}
+ content={formatMessage(
+ { id: content.id, defaultMessage: content.defaultMessage },
+ content.values
+ )}
+ />
+ );
+};
+
+NoContent.defaultProps = {
+ content: {
+ id: 'app.components.EmptyStateLayout.content-document',
+ defaultMessage: "You don't have any content yet...",
+ values: {},
+ },
+};
+
+NoContent.propTypes = {
+ content: PropTypes.shape({
+ id: PropTypes.string,
+ defaultMessage: PropTypes.string,
+ values: PropTypes.object,
+ }),
+};
+
+export default NoContent;
diff --git a/packages/core/helper-plugin/lib/src/components/NoMedia/NoMedia.stories.mdx b/packages/core/helper-plugin/lib/src/components/NoMedia/NoMedia.stories.mdx
new file mode 100644
index 0000000000..ea22ed2712
--- /dev/null
+++ b/packages/core/helper-plugin/lib/src/components/NoMedia/NoMedia.stories.mdx
@@ -0,0 +1,25 @@
+
+
+import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { Main, Row, Button } from '@strapi/parts';
+import NoMedia from './index';
+
+
+
+# NoMedia
+
+This component is used to display an empty state.
+
+## Usage
+
+
+
+### Props
+
+
diff --git a/packages/core/helper-plugin/lib/src/components/NoMedia/index.js b/packages/core/helper-plugin/lib/src/components/NoMedia/index.js
new file mode 100644
index 0000000000..7ec1d4d8d7
--- /dev/null
+++ b/packages/core/helper-plugin/lib/src/components/NoMedia/index.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import EmptyStatePicture from '@strapi/icons/EmptyStatePicture';
+import { EmptyStateLayout } from '@strapi/parts/EmptyStateLayout';
+
+const NoMedia = props => {
+ return } {...props} />;
+};
+
+export default NoMedia;
diff --git a/packages/core/helper-plugin/lib/src/components/NoPermissions/NoPermissions.stories.mdx b/packages/core/helper-plugin/lib/src/components/NoPermissions/NoPermissions.stories.mdx
new file mode 100644
index 0000000000..6790965b82
--- /dev/null
+++ b/packages/core/helper-plugin/lib/src/components/NoPermissions/NoPermissions.stories.mdx
@@ -0,0 +1,25 @@
+
+
+import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { Main, Row } from '@strapi/parts';
+import NoPermissions from './index';
+
+
+
+# NoPermissions
+
+This component is used to display an empty state.
+
+## Usage
+
+
+
+### Props
+
+
diff --git a/packages/core/helper-plugin/lib/src/components/NoPermissions/index.js b/packages/core/helper-plugin/lib/src/components/NoPermissions/index.js
new file mode 100644
index 0000000000..b517fef5c5
--- /dev/null
+++ b/packages/core/helper-plugin/lib/src/components/NoPermissions/index.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import EmptyStatePermissions from '@strapi/icons/EmptyStatePermissions';
+import { EmptyStateLayout } from '@strapi/parts/EmptyStateLayout';
+
+const NoPermissions = ({ action }) => {
+ const { formatMessage } = useIntl();
+
+ return (
+ }
+ content={formatMessage({
+ id: 'app.components.EmptyStateLayout.content-permissions',
+ defaultMessage: "You don't have the permissions to access that content",
+ })}
+ action={action}
+ />
+ );
+};
+
+NoPermissions.defaultProps = {
+ action: undefined,
+};
+
+NoPermissions.propTypes = {
+ action: PropTypes.node,
+};
+
+export default NoPermissions;
diff --git a/packages/core/helper-plugin/lib/src/index.js b/packages/core/helper-plugin/lib/src/index.js
index fc13c5d939..9deea2cbcd 100644
--- a/packages/core/helper-plugin/lib/src/index.js
+++ b/packages/core/helper-plugin/lib/src/index.js
@@ -183,6 +183,9 @@ export { default as ConfirmDialog } from './components/ConfirmDialog';
export { default as ContentBox } from './components/ContentBox';
export { default as CustomContentLayout } from './components/CustomContentLayout';
export { default as EmptyStateLayout } from './components/EmptyStateLayout';
+export { default as NoContent } from './components/NoContent';
+export { default as NoMedia } from './components/NoMedia';
+export { default as NoPermissions } from './components/NoPermissions';
export { default as EmptyBodyTable } from './components/EmptyBodyTable';
export { default as GenericInput } from './components/GenericInput';
export * from './components/InjectionZone';
diff --git a/packages/core/helper-plugin/lib/src/templates/PageTemplate/PageTemplate.stories.mdx b/packages/core/helper-plugin/lib/src/templates/PageTemplate/PageTemplate.stories.mdx
new file mode 100644
index 0000000000..317955e096
--- /dev/null
+++ b/packages/core/helper-plugin/lib/src/templates/PageTemplate/PageTemplate.stories.mdx
@@ -0,0 +1,74 @@
+
+
+import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { Main, Layout, HeaderLayout, Button, ActionLayout, ContentLayout,Box } from '@strapi/parts';
+import AddIcon from '@strapi/icons/AddIcon'
+import EditIcon from '@strapi/icons/EditIcon'
+import LoadingIndicatorPage from '../../components/LoadingIndicatorPage';
+import NoContent from '../../components/NoContent'
+import NoPermissions from '../../components/NoPermissions'
+
+
+
+# PageTemplate
+
+This component is used to display an empty state.
+
+## Imports
+
+```js
+import { Main } from '@strapi/parts/Main';
+import { ActionLayout, ContentLayout, HeaderLayout, Layout } from '@strapi/parts/Layout';
+import { Button } from '@strapi/parts/Button';
+import { Box } from '@strapi/parts/Box';
+import { LoadingIndicatorPage, NoContent, NoPermissions } from '@strapi/helper-plugin';
+```
+
+## Usage
+
+
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js
index 2267957e65..3f9873c1b6 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js
@@ -14,6 +14,7 @@ import {
Th,
TableLabel,
useNotifyAT,
+ ContentLayout,
} from '@strapi/parts';
import { AddIcon, EditIcon } from '@strapi/icons';
@@ -23,8 +24,9 @@ import {
SettingsPageTitle,
CheckPermissions,
useNotification,
- CustomContentLayout,
useRBAC,
+ NoPermissions,
+ LoadingIndicatorPage,
} from '@strapi/helper-plugin';
import { useHistory } from 'react-router-dom';
import { useQuery } from 'react-query';
@@ -59,7 +61,10 @@ const RoleListPage = () => {
isLoading: isLoadingForData,
data: { roles },
isFetching,
- } = useQuery('get-roles', () => fetchData(toggleNotification, notifyStatus), { initialData: {} });
+ } = useQuery('get-roles', () => fetchData(toggleNotification, notifyStatus), {
+ initialData: {},
+ enabled: canRead,
+ });
const isLoading = isLoadingForData || isFetching;
@@ -73,7 +78,7 @@ const RoleListPage = () => {
defaultMessage: 'Roles',
});
- const handleClickEdit = (id) => {
+ const handleClickEdit = id => {
push(`/settings/${pluginId}/roles/${id}`);
};
@@ -104,70 +109,74 @@ const RoleListPage = () => {
}
/>
-
-
-
-
- |
-
- {formatMessage({ id: getTrad('Roles.name'), defaultMessage: 'Name' })}
-
- |
-
-
- {formatMessage({
- id: getTrad('Roles.description'),
- defaultMessage: 'Description',
- })}
-
- |
-
-
- {formatMessage({
- id: getTrad('Roles.users'),
- defaultMessage: 'Users',
- })}
-
- |
-
-
-
- {roles &&
- roles.map((role) => (
-
- |
- {role.name}
- |
-
- {role.description}
- |
-
-
- {`${role.nb_users} ${formatMessage({
- id: getTrad('Roles.users'),
- defaultMessage: 'users',
- }).toLowerCase()}`}
-
- |
-
-
- handleClickEdit(role.id)}
- noBorder
- icon={}
- label="Edit"
- />
-
- |
-
- ))}
-
-
-
+ {!canRead && }
+ {(isLoading || isLoadingForPermissions) && }
+ {canRead && roles && roles.length && (
+
+
+
+ |
+
+ {formatMessage({ id: getTrad('Roles.name'), defaultMessage: 'Name' })}
+
+ |
+
+
+ {formatMessage({
+ id: getTrad('Roles.description'),
+ defaultMessage: 'Description',
+ })}
+
+ |
+
+
+ {formatMessage({
+ id: getTrad('Roles.users'),
+ defaultMessage: 'Users',
+ })}
+
+ |
+
+
+
+ {roles &&
+ roles.map(role => (
+
+ |
+ {role.name}
+ |
+
+ {role.description}
+ |
+
+
+ {`${role.nb_users} ${formatMessage({
+ id: getTrad('Roles.users'),
+ defaultMessage: 'users',
+ }).toLowerCase()}`}
+
+ |
+
+
+ handleClickEdit(role.id)}
+ noBorder
+ icon={}
+ label="Edit"
+ />
+
+ |
+
+ ))}
+
+
+ )}
+
);
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/index.test.js
index 7f320f9848..35b49f9e9f 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/index.test.js
@@ -91,6 +91,11 @@ describe('Admin | containers | RoleListPage', () => {
padding-left: 56px;
}
+ .c10 {
+ padding-right: 56px;
+ padding-left: 56px;
+ }
+
.c5 {
display: -webkit-box;
display: -webkit-flex;
@@ -136,11 +141,6 @@ describe('Admin | containers | RoleListPage', () => {
outline: none;
}
- .c10 {
- padding-right: 56px;
- padding-left: 56px;
- }
-
.c13 {
border: 0;
-webkit-clip: rect(0 0 0 0);