Merge pull request #10934 from strapi/add-empty-state-components

Add empty state components
2025-11-11 07:39:16 +00:00 · 2021-09-13 06:25:25 +02:00 · 2021-09-13 06:25:25 +02:00 · a42a3747f1
commit a42a3747f1
parent fab2a6f46b a408ad86e2
15 changed files with 346 additions and 91 deletions
--- a/packages/core/admin/admin/src/content-manager/pages/NoPermissions/index.js
+++ b/packages/core/admin/admin/src/content-manager/pages/NoPermissions/index.js
@ -1,7 +1,7 @@
 import React from 'react';
-import { CustomContentLayout, useFocusWhenNavigate } from '@strapi/helper-plugin';
+import { useFocusWhenNavigate, NoPermissions as NoPermissionsCompo } from '@strapi/helper-plugin';
 import { Main } from '@strapi/parts/Main';
-import { HeaderLayout } from '@strapi/parts/Layout';
+import { ContentLayout, HeaderLayout } from '@strapi/parts/Layout';
 import { useIntl } from 'react-intl';
 import { getTrad } from '../../utils';

@ -18,9 +18,9 @@ const NoPermissions = () => {
          defaultMessage: 'Content',
        })}
      />
-      <CustomContentLayout canRead={false}>
-        <div />
-      </CustomContentLayout>
+      <ContentLayout>
+        <NoPermissionsCompo />
+      </ContentLayout>
    </Main>
  );
 };
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js
@ -6,7 +6,6 @@ import pick from 'lodash/pick';
 import get from 'lodash/get';
 import omit from 'lodash/omit';
 import {
-  CustomContentLayout,
  Form,
  GenericInput,
  SettingsPageTitle,
@ -15,13 +14,14 @@ import {
  useFocusWhenNavigate,
  useNotification,
  useOverlayBlocker,
+  LoadingIndicatorPage,
 } from '@strapi/helper-plugin';
 import { useQuery } from 'react-query';
 import { Formik } from 'formik';
 import { Box } from '@strapi/parts/Box';
 import { Button } from '@strapi/parts/Button';
 import { Grid, GridItem } from '@strapi/parts/Grid';
-import { HeaderLayout } from '@strapi/parts/Layout';
+import { HeaderLayout, ContentLayout } from '@strapi/parts/Layout';
 import { H3 } from '@strapi/parts/Text';
 import { Main } from '@strapi/parts/Main';
 import { Stack } from '@strapi/parts/Stack';
@ -130,7 +130,7 @@ const EditPage = ({ canUpdate }) => {

  if (isLoading) {
    return (
-      <Main labelledBy="title">
+      <Main labelledBy="title" aria-busy="true">
        <SettingsPageTitle name="Users" />
        <HeaderLayout
          id="title"
@ -141,7 +141,9 @@ const EditPage = ({ canUpdate }) => {
          }
          title={title}
        />
-        <CustomContentLayout isLoading />
+        <ContentLayout>
+          <LoadingIndicatorPage />
+        </ContentLayout>
      </Main>
    );
  }
@ -172,7 +174,7 @@ const EditPage = ({ canUpdate }) => {
                }
                title={title}
              />
-              <CustomContentLayout isLoading={isLoading}>
+              <ContentLayout>
                {data?.registrationToken && (
                  <Box paddingBottom={6}>
                    <MagicLink registrationToken={data.registrationToken} />
@ -243,7 +245,7 @@ const EditPage = ({ canUpdate }) => {
                    </Stack>
                  </Box>
                </Stack>
-              </CustomContentLayout>
+              </ContentLayout>
            </Form>
          );
        }}
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js
@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import {
-  CustomContentLayout,
  Search,
  SettingsPageTitle,
  useRBAC,
  useNotification,
  useFocusWhenNavigate,
+  NoPermissions,
 } from '@strapi/helper-plugin';
-import { Button, Box, HeaderLayout, Main, Row } from '@strapi/parts';
+import { Button, Box, HeaderLayout, Main, Row, ContentLayout } from '@strapi/parts';
 import { Mail } from '@strapi/icons';
 import { useLocation } from 'react-router-dom';
 import { useIntl } from 'react-intl';
@ -85,7 +85,7 @@ const ListPage = () => {
  );

  return (
-    <Main labelledBy="title">
+    <Main labelledBy="title" aria-busy={isLoading}>
      <SettingsPageTitle name="Users" />
      <HeaderLayout
        id="title"
@ -102,7 +102,8 @@ const ListPage = () => {
          { number: total }
        )}
      />
-      <CustomContentLayout canRead={canRead}>
+      <ContentLayout canRead={canRead}>
+        {!canRead && <NoPermissions />}
        {status === 'error' && <div>TODO: An error occurred</div>}
        {canRead && (
          <>
@ -129,7 +130,7 @@ const ListPage = () => {
            <PaginationFooter pagination={data?.pagination} />
          </>
        )}
-      </CustomContentLayout>
+      </ContentLayout>
      {isModalOpened && <ModalForm onToggle={handleToggle} queryName={queryName} />}
    </Main>
  );
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js
@ -121,6 +121,11 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
        padding-right: 8px;
      }

+      .c13 {
+        padding-right: 56px;
+        padding-left: 56px;
+      }
+
      .c14 {
        padding-bottom: 16px;
      }
@ -748,11 +753,6 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
        fill: #666687;
      }

-      .c13 {
-        padding-right: 56px;
-        padding-left: 56px;
-      }
-
      .c36 tr:last-of-type {
        border-bottom: none;
      }
@ -789,6 +789,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
      }

      <main
+        aria-busy="true"
        aria-labelledby="title"
        class="c0"
        id="main-content"
@ -861,7 +862,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
          </div>
        </div>
        <div
-          class="c13"
+          class="c1 c13"
        >
          <div
            class="c1 c14"
--- a/packages/core/helper-plugin/lib/src/components/CustomContentLayout/index.js
+++ b/packages/core/helper-plugin/lib/src/components/CustomContentLayout/index.js
@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ContentLayout } from '@strapi/parts/Layout';
 import PropTypes from 'prop-types';
 import EmptyStateLayout from '../EmptyStateLayout';
 import LoadingIndicatorPage from '../LoadingIndicatorPage';

+// TODO: REMOVE this component
 const CustomContentLayout = ({
  action,
  canRead,
@ -12,6 +13,12 @@ const CustomContentLayout = ({
  shouldShowEmptyState,
  ...rest
 }) => {
+  useEffect(() => {
+    console.error(
+      'This component will soon be removed, please check out the PageTemplate in the storybook'
+    );
+  }, []);
+
  if (!canRead) {
    return (
      <ContentLayout>
--- a/packages/core/helper-plugin/lib/src/components/NoContent/NoContent.stories.mdx
+++ b/packages/core/helper-plugin/lib/src/components/NoContent/NoContent.stories.mdx
@ -0,0 +1,31 @@
+<!--- EmptyStateLayout.stories.mdx --->
+
+import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { Main, Row, Button } from '@strapi/parts';
+import NoContent from './index';
+
+<Meta title="components/NoContent" />
+
+# NoContent
+
+This component is used to display an empty state.
+
+## Usage
+
+<Canvas>
+  <Story name="base">
+    <Main>
+      <NoContent
+        content={{
+          id: 'app.components.EmptyStateLayout.content-document',
+          defaultMessage: "There's no content",
+        }}
+        action={<Button>Add content</Button>}
+      />
+    </Main>
+  </Story>
+</Canvas>
+
+### Props
+
+<ArgsTable of={NoContent} />
--- a/packages/core/helper-plugin/lib/src/components/NoContent/index.js
+++ 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 (
+    <EmptyStateLayout
+      icon={<EmptyStateDocument width="10rem" />}
+      {...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;
--- a/packages/core/helper-plugin/lib/src/components/NoMedia/NoMedia.stories.mdx
+++ b/packages/core/helper-plugin/lib/src/components/NoMedia/NoMedia.stories.mdx
@ -0,0 +1,25 @@
+<!--- EmptyStateLayout.stories.mdx --->
+
+import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { Main, Row, Button } from '@strapi/parts';
+import NoMedia from './index';
+
+<Meta title="components/NoMedia" />
+
+# NoMedia
+
+This component is used to display an empty state.
+
+## Usage
+
+<Canvas>
+  <Story name="base">
+    <Main>
+      <NoMedia content="There's no media" action={<Button>Add a media</Button>} />
+    </Main>
+  </Story>
+</Canvas>
+
+### Props
+
+<ArgsTable of={NoMedia} />
--- a/packages/core/helper-plugin/lib/src/components/NoMedia/index.js
+++ 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 <EmptyStateLayout icon={<EmptyStatePicture width="10rem" />} {...props} />;
+};
+
+export default NoMedia;
--- a/packages/core/helper-plugin/lib/src/components/NoPermissions/NoPermissions.stories.mdx
+++ b/packages/core/helper-plugin/lib/src/components/NoPermissions/NoPermissions.stories.mdx
@ -0,0 +1,25 @@
+<!--- EmptyStateLayout.stories.mdx --->
+
+import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { Main, Row } from '@strapi/parts';
+import NoPermissions from './index';
+
+<Meta title="components/NoPermissions" />
+
+# NoPermissions
+
+This component is used to display an empty state.
+
+## Usage
+
+<Canvas>
+  <Story name="base">
+    <Main>
+      <NoPermissions />
+    </Main>
+  </Story>
+</Canvas>
+
+### Props
+
+<ArgsTable of={NoPermissions} />
--- a/packages/core/helper-plugin/lib/src/components/NoPermissions/index.js
+++ 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 (
+    <EmptyStateLayout
+      icon={<EmptyStatePermissions width="10rem" />}
+      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;
--- 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';
--- a/packages/core/helper-plugin/lib/src/templates/PageTemplate/PageTemplate.stories.mdx
+++ b/packages/core/helper-plugin/lib/src/templates/PageTemplate/PageTemplate.stories.mdx
@ -0,0 +1,74 @@
+<!--- EmptyStateLayout.stories.mdx --->
+
+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'
+
+<Meta title="templates/PageTemplate" />
+
+# 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
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const canRead = false;
+      const isLoading = true;
+      const data = [];
+      return (
+        <Box background="neutral100">
+          <Layout>
+            <Main labelledBy="title" aria-busy={isLoading}>
+              <HeaderLayout
+                id="title"
+                primaryAction={<Button startIcon={<AddIcon />}>Add an entry</Button>}
+                secondaryAction={
+                  <Button variant="tertiary" startIcon={<EditIcon />}>
+                    Edit
+                  </Button>
+                }
+                title="Other CT"
+                subtitle="36 entries found"
+              />
+              <ActionLayout
+                startActions={
+                  <>
+                    <Button variant="tertiary">Search</Button>
+                    <Button variant="tertiary">Filter</Button>
+                  </>
+                }
+                endActions={
+                  <>
+                    <Button variant="tertiary">Settings</Button>
+                  </>
+                }
+              />
+              <ContentLayout>
+                {!canRead && <NoPermissions />}
+                {(canRead && data && data.length === 0) && <NoContent content="No content available" action={<Button>Add content</Button>}/>}
+                {isLoading && <LoadingIndicatorPage />}
+              </ContentLayout>
+            </Main>
+          </Layout>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
--- 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 = () => {
          }
        />

-        <CustomContentLayout
+        <ContentLayout
          canRead={canRead}
          shouldShowEmptyState={roles && !roles.length}
          isLoading={isLoading || isLoadingForPermissions}
        >
-          <Table colCount={4} rowCount={roles && roles.length + 1}>
-            <Thead>
-              <Tr>
-                <Th>
-                  <TableLabel>
-                    {formatMessage({ id: getTrad('Roles.name'), defaultMessage: 'Name' })}
-                  </TableLabel>
-                </Th>
-                <Th>
-                  <TableLabel>
-                    {formatMessage({
-                      id: getTrad('Roles.description'),
-                      defaultMessage: 'Description',
-                    })}
-                  </TableLabel>
-                </Th>
-                <Th>
-                  <TableLabel>
-                    {formatMessage({
-                      id: getTrad('Roles.users'),
-                      defaultMessage: 'Users',
-                    })}
-                  </TableLabel>
-                </Th>
-              </Tr>
-            </Thead>
-            <Tbody>
-              {roles &&
-                roles.map((role) => (
-                  <Tr key={role.name}>
-                    <Td width="20%">
-                      <Text>{role.name}</Text>
-                    </Td>
-                    <Td width="50%">
-                      <Text>{role.description}</Text>
-                    </Td>
-                    <Td width="30%">
-                      <Text>
-                        {`${role.nb_users} ${formatMessage({
-                          id: getTrad('Roles.users'),
-                          defaultMessage: 'users',
-                        }).toLowerCase()}`}
-                      </Text>
-                    </Td>
-                    <Td>
-                      <CheckPermissions permissions={permissions.updateRole}>
-                        <IconButton
-                          onClick={() => handleClickEdit(role.id)}
-                          noBorder
-                          icon={<EditIcon />}
-                          label="Edit"
-                        />
-                      </CheckPermissions>
-                    </Td>
-                  </Tr>
-                ))}
-            </Tbody>
-          </Table>
-        </CustomContentLayout>
+          {!canRead && <NoPermissions />}
+          {(isLoading || isLoadingForPermissions) && <LoadingIndicatorPage />}
+          {canRead && roles && roles.length && (
+            <Table colCount={4} rowCount={roles && roles.length + 1}>
+              <Thead>
+                <Tr>
+                  <Th>
+                    <TableLabel>
+                      {formatMessage({ id: getTrad('Roles.name'), defaultMessage: 'Name' })}
+                    </TableLabel>
+                  </Th>
+                  <Th>
+                    <TableLabel>
+                      {formatMessage({
+                        id: getTrad('Roles.description'),
+                        defaultMessage: 'Description',
+                      })}
+                    </TableLabel>
+                  </Th>
+                  <Th>
+                    <TableLabel>
+                      {formatMessage({
+                        id: getTrad('Roles.users'),
+                        defaultMessage: 'Users',
+                      })}
+                    </TableLabel>
+                  </Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {roles &&
+                  roles.map(role => (
+                    <Tr key={role.name}>
+                      <Td width="20%">
+                        <Text>{role.name}</Text>
+                      </Td>
+                      <Td width="50%">
+                        <Text>{role.description}</Text>
+                      </Td>
+                      <Td width="30%">
+                        <Text>
+                          {`${role.nb_users} ${formatMessage({
+                            id: getTrad('Roles.users'),
+                            defaultMessage: 'users',
+                          }).toLowerCase()}`}
+                        </Text>
+                      </Td>
+                      <Td>
+                        <CheckPermissions permissions={permissions.updateRole}>
+                          <IconButton
+                            onClick={() => handleClickEdit(role.id)}
+                            noBorder
+                            icon={<EditIcon />}
+                            label="Edit"
+                          />
+                        </CheckPermissions>
+                      </Td>
+                    </Tr>
+                  ))}
+              </Tbody>
+            </Table>
+          )}
+        </ContentLayout>
      </Main>
    </Layout>
  );
--- 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);