Remove usage of CustomContentLayout component

Signed-off-by: soupette <cyril@strapi.io>

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>
   );
 };

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>
           );
         }}

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>
   );

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"

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>

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>
   );

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);