@strapi/plugin-users-permissions 0.0.0-next.e21fe90bf2ab9906267ea6e6ca620bdcc729906c → 0.0.0-next.e326c69a49373b420f6566c30aca26f4b6274c6a

package/admin/src/pages/Providers/index.jsx

@@ -144,7 +144,7 @@ export const ProvidersPage = () => {
   }
 
   return (
-    <Layouts.Root>
+    <Page.Main>
       <Page.Title>
         {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
@@ -156,83 +156,81 @@ export const ProvidersPage = () => {
           }
         )}
       </Page.Title>
-      <Page.Main>
-        <Layouts.Header
-          title={formatMessage({
-            id: getTrad('HeaderNav.link.providers'),
-            defaultMessage: 'Providers',
-          })}
-        />
-        <Layouts.Content>
-          <Table colCount={3} rowCount={providers.length + 1}>
-            <Thead>
-              <Tr>
-                <Th>
-                  <Typography variant="sigma" textColor="neutral600">
-                    {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}
-                  </Typography>
-                </Th>
-                <Th>
-                  <Typography variant="sigma" textColor="neutral600">
-                    {formatMessage({ id: getTrad('Providers.status'), defaultMessage: 'Status' })}
+      <Layouts.Header
+        title={formatMessage({
+          id: getTrad('HeaderNav.link.providers'),
+          defaultMessage: 'Providers',
+        })}
+      />
+      <Layouts.Content>
+        <Table colCount={3} rowCount={providers.length + 1}>
+          <Thead>
+            <Tr>
+              <Th>
+                <Typography variant="sigma" textColor="neutral600">
+                  {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}
+                </Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma" textColor="neutral600">
+                  {formatMessage({ id: getTrad('Providers.status'), defaultMessage: 'Status' })}
+                </Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma">
+                  <VisuallyHidden>
+                    {formatMessage({
+                      id: 'global.settings',
+                      defaultMessage: 'Settings',
+                    })}
+                  </VisuallyHidden>
+                </Typography>
+              </Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {providers.map((provider) => (
+              <Tr
+                key={provider.name}
+                onClick={() => (canUpdate ? handleClickEdit(provider) : undefined)}
+              >
+                <Td width="45%">
+                  <Typography fontWeight="semiBold" textColor="neutral800">
+                    {provider.name}
                   </Typography>
-                </Th>
-                <Th>
-                  <Typography variant="sigma">
-                    <VisuallyHidden>
-                      {formatMessage({
-                        id: 'global.settings',
-                        defaultMessage: 'Settings',
-                      })}
-                    </VisuallyHidden>
+                </Td>
+                <Td width="65%">
+                  <Typography
+                    textColor={provider.enabled ? 'success600' : 'danger600'}
+                    data-testid={`enable-${provider.name}`}
+                  >
+                    {provider.enabled
+                      ? formatMessage({
+                          id: 'global.enabled',
+                          defaultMessage: 'Enabled',
+                        })
+                      : formatMessage({
+                          id: 'global.disabled',
+                          defaultMessage: 'Disabled',
+                        })}
                   </Typography>
-                </Th>
-              </Tr>
-            </Thead>
-            <Tbody>
-              {providers.map((provider) => (
-                <Tr
-                  key={provider.name}
-                  onClick={() => (canUpdate ? handleClickEdit(provider) : undefined)}
-                >
-                  <Td width="45%">
-                    <Typography fontWeight="semiBold" textColor="neutral800">
-                      {provider.name}
-                    </Typography>
-                  </Td>
-                  <Td width="65%">
-                    <Typography
-                      textColor={provider.enabled ? 'success600' : 'danger600'}
-                      data-testid={`enable-${provider.name}`}
+                </Td>
+                <Td onClick={(e) => e.stopPropagation()}>
+                  {canUpdate && (
+                    <IconButton
+                      onClick={() => handleClickEdit(provider)}
+                      variant="ghost"
+                      label="Edit"
                     >
-                      {provider.enabled
-                        ? formatMessage({
-                            id: 'global.enabled',
-                            defaultMessage: 'Enabled',
-                          })
-                        : formatMessage({
-                            id: 'global.disabled',
-                            defaultMessage: 'Disabled',
-                          })}
-                    </Typography>
-                  </Td>
-                  <Td onClick={(e) => e.stopPropagation()}>
-                    {canUpdate && (
-                      <IconButton
-                        onClick={() => handleClickEdit(provider)}
-                        variant="ghost"
-                        label="Edit"
-                      >
-                        <Pencil />
-                      </IconButton>
-                    )}
-                  </Td>
-                </Tr>
-              ))}
-            </Tbody>
-          </Table>
-        </Layouts.Content>
-      </Page.Main>
+                      <Pencil />
+                    </IconButton>
+                  )}
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </Layouts.Content>
       <FormModal
         initialData={data[providerToEditName]}
         isOpen={isOpen}
@@ -249,7 +247,7 @@ export const ProvidersPage = () => {
         onSubmit={handleSubmit}
         providerToEditName={providerToEditName}
       />
-    </Layouts.Root>
+    </Page.Main>
   );
 };
 

package/admin/src/pages/Roles/pages/CreatePage.jsx

@@ -1,15 +1,6 @@
 import * as React from 'react';
 
-import {
-  Button,
-  Flex,
-  Grid,
-  Main,
-  Textarea,
-  TextInput,
-  Typography,
-  Field,
-} from '@strapi/design-system';
+import { Button, Flex, Grid, Textarea, TextInput, Typography, Field } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
 import { Page, useTracking, useNotification, useFetchClient, Layouts } from '@strapi/strapi/admin';
 import { Formik, Form } from 'formik';
@@ -68,7 +59,7 @@ export const CreatePage = () => {
   };
 
   return (
-    <Main>
+    <Page.Main>
       <Page.Title>
         {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
@@ -183,7 +174,7 @@ export const CreatePage = () => {
           </Form>
         )}
       </Formik>
-    </Main>
+    </Page.Main>
   );
 };
 

package/admin/src/pages/Roles/pages/EditPage.jsx

@@ -1,15 +1,6 @@
 import * as React from 'react';
 
-import {
-  Main,
-  Button,
-  Flex,
-  TextInput,
-  Textarea,
-  Typography,
-  Grid,
-  Field,
-} from '@strapi/design-system';
+import { Button, Flex, TextInput, Textarea, Typography, Grid, Field } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
 import {
   Page,
@@ -86,7 +77,7 @@ export const EditPage = () => {
   }
 
   return (
-    <Main>
+    <Page.Main>
       <Page.Title>
         {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
@@ -204,7 +195,7 @@ export const EditPage = () => {
           </Form>
         )}
       </Formik>
-    </Main>
+    </Page.Main>
   );
 };
 

package/admin/src/pages/Roles/pages/ListPage/index.jsx

@@ -153,107 +153,105 @@ export const RolesListPage = () => {
   }
 
   return (
-    <Layouts.Root>
+    <Page.Main>
       <Page.Title>
         {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
           { name: pageTitle }
         )}
       </Page.Title>
-      <Page.Main>
-        <Layouts.Header
-          title={formatMessage({
-            id: 'global.roles',
-            defaultMessage: 'Roles',
-          })}
-          subtitle={formatMessage({
-            id: 'Settings.roles.list.description',
-            defaultMessage: 'List of roles',
-          })}
-          primaryAction={
-            canCreate ? (
-              <LinkButton
-                to="new"
-                tag={NavLink}
-                onClick={() => trackUsage('willCreateRole')}
-                startIcon={<Plus />}
-                size="S"
-              >
-                {formatMessage({
-                  id: getTrad('List.button.roles'),
-                  defaultMessage: 'Add new role',
-                })}
-              </LinkButton>
-            ) : null
-          }
-        />
-
-        <Layouts.Action
-          startActions={
-            <SearchInput
-              label={formatMessage({
-                id: 'app.component.search.label',
-                defaultMessage: 'Search',
+      <Layouts.Header
+        title={formatMessage({
+          id: 'global.roles',
+          defaultMessage: 'Roles',
+        })}
+        subtitle={formatMessage({
+          id: 'Settings.roles.list.description',
+          defaultMessage: 'List of roles',
+        })}
+        primaryAction={
+          canCreate ? (
+            <LinkButton
+              to="new"
+              tag={NavLink}
+              onClick={() => trackUsage('willCreateRole')}
+              startIcon={<Plus />}
+              size="S"
+            >
+              {formatMessage({
+                id: getTrad('List.button.roles'),
+                defaultMessage: 'Add new role',
               })}
-            />
-          }
-        />
+            </LinkButton>
+          ) : null
+        }
+      />
+
+      <Layouts.Action
+        startActions={
+          <SearchInput
+            label={formatMessage({
+              id: 'app.component.search.label',
+              defaultMessage: 'Search',
+            })}
+          />
+        }
+      />
 
-        <Layouts.Content>
-          {!canRead && <Page.NoPermissions />}
-          {canRead && sortedRoles && sortedRoles?.length ? (
-            <Table colCount={colCount} rowCount={rowCount}>
-              <Thead>
-                <Tr>
-                  <Th>
-                    <Typography variant="sigma" textColor="neutral600">
-                      {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}
-                    </Typography>
-                  </Th>
-                  <Th>
-                    <Typography variant="sigma" textColor="neutral600">
-                      {formatMessage({
-                        id: 'global.description',
-                        defaultMessage: 'Description',
-                      })}
-                    </Typography>
-                  </Th>
-                  <Th>
-                    <Typography variant="sigma" textColor="neutral600">
-                      {formatMessage({
-                        id: 'global.users',
-                        defaultMessage: 'Users',
-                      })}
-                    </Typography>
-                  </Th>
-                  <Th>
-                    <VisuallyHidden>
-                      {formatMessage({
-                        id: 'global.actions',
-                        defaultMessage: 'Actions',
-                      })}
-                    </VisuallyHidden>
-                  </Th>
-                </Tr>
-              </Thead>
-              <TableBody
-                sortedRoles={sortedRoles}
-                canDelete={canDelete}
-                canUpdate={canUpdate}
-                permissions={PERMISSIONS}
-                setRoleToDelete={setRoleToDelete}
-                onDelete={[showConfirmDelete, setShowConfirmDelete]}
-              />
-            </Table>
-          ) : (
-            <EmptyStateLayout content={formatMessage(emptyLayout[emptyContent])} />
-          )}
-        </Layouts.Content>
-        <Dialog.Root open={showConfirmDelete} onOpenChange={handleShowConfirmDelete}>
-          <ConfirmDialog onConfirm={handleConfirmDelete} />
-        </Dialog.Root>
-      </Page.Main>
-    </Layouts.Root>
+      <Layouts.Content>
+        {!canRead && <Page.NoPermissions />}
+        {canRead && sortedRoles && sortedRoles?.length ? (
+          <Table colCount={colCount} rowCount={rowCount}>
+            <Thead>
+              <Tr>
+                <Th>
+                  <Typography variant="sigma" textColor="neutral600">
+                    {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma" textColor="neutral600">
+                    {formatMessage({
+                      id: 'global.description',
+                      defaultMessage: 'Description',
+                    })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma" textColor="neutral600">
+                    {formatMessage({
+                      id: 'global.users',
+                      defaultMessage: 'Users',
+                    })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <VisuallyHidden>
+                    {formatMessage({
+                      id: 'global.actions',
+                      defaultMessage: 'Actions',
+                    })}
+                  </VisuallyHidden>
+                </Th>
+              </Tr>
+            </Thead>
+            <TableBody
+              sortedRoles={sortedRoles}
+              canDelete={canDelete}
+              canUpdate={canUpdate}
+              permissions={PERMISSIONS}
+              setRoleToDelete={setRoleToDelete}
+              onDelete={[showConfirmDelete, setShowConfirmDelete]}
+            />
+          </Table>
+        ) : (
+          <EmptyStateLayout content={formatMessage(emptyLayout[emptyContent])} />
+        )}
+      </Layouts.Content>
+      <Dialog.Root open={showConfirmDelete} onOpenChange={handleShowConfirmDelete}>
+        <ConfirmDialog onConfirm={handleConfirmDelete} />
+      </Dialog.Root>
+    </Page.Main>
   );
 };
 

package/admin/src/utils/formatPluginName.js

@@ -15,7 +15,7 @@ function formatPluginName(pluginSlug) {
     case 'plugin::i18n':
       return 'i18n';
     case 'plugin::upload':
-      return 'Upload';
+      return 'Media Library';
     case 'plugin::users-permissions':
       return 'Users-permissions';
     default:

package/dist/admin/pages/Providers/index.js

@@ -143,7 +143,7 @@ const ProvidersPage = ()=>{
     if (isLoading) {
         return /*#__PURE__*/ jsxRuntime.jsx(admin.Page.Loading, {});
     }
-    return /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.Layouts.Root, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(admin.Page.Main, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(admin.Page.Title, {
                 children: formatMessage({
@@ -156,98 +156,94 @@ const ProvidersPage = ()=>{
                     })
                 })
             }),
-            /*#__PURE__*/ jsxRuntime.jsxs(admin.Page.Main, {
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Header, {
-                        title: formatMessage({
-                            id: getTrad('HeaderNav.link.providers'),
-                            defaultMessage: 'Providers'
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Content, {
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Table, {
-                            colCount: 3,
-                            rowCount: providers.length + 1,
-                            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: getTrad('Providers.status'),
-                                                        defaultMessage: 'Status'
-                                                    })
-                                                })
-                                            }),
-                                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Th, {
-                                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                                    variant: "sigma",
-                                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
-                                                        children: formatMessage({
-                                                            id: 'global.settings',
-                                                            defaultMessage: 'Settings'
-                                                        })
-                                                    })
+            /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Header, {
+                title: formatMessage({
+                    id: getTrad('HeaderNav.link.providers'),
+                    defaultMessage: 'Providers'
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Content, {
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Table, {
+                    colCount: 3,
+                    rowCount: providers.length + 1,
+                    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: getTrad('Providers.status'),
+                                                defaultMessage: 'Status'
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Th, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                            variant: "sigma",
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                                                children: formatMessage({
+                                                    id: 'global.settings',
+                                                    defaultMessage: 'Settings'
                                                 })
                                             })
-                                        ]
+                                        })
                                     })
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tbody, {
-                                    children: providers.map((provider)=>/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tr, {
-                                            onClick: ()=>canUpdate ? handleClickEdit(provider) : undefined,
-                                            children: [
-                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
-                                                    width: "45%",
-                                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                                        fontWeight: "semiBold",
-                                                        textColor: "neutral800",
-                                                        children: provider.name
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
-                                                    width: "65%",
-                                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                                        textColor: provider.enabled ? 'success600' : 'danger600',
-                                                        "data-testid": `enable-${provider.name}`,
-                                                        children: provider.enabled ? formatMessage({
-                                                            id: 'global.enabled',
-                                                            defaultMessage: 'Enabled'
-                                                        }) : formatMessage({
-                                                            id: 'global.disabled',
-                                                            defaultMessage: 'Disabled'
-                                                        })
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
-                                                    onClick: (e)=>e.stopPropagation(),
-                                                    children: canUpdate && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                                        onClick: ()=>handleClickEdit(provider),
-                                                        variant: "ghost",
-                                                        label: "Edit",
-                                                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.Pencil, {})
-                                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tbody, {
+                            children: providers.map((provider)=>/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tr, {
+                                    onClick: ()=>canUpdate ? handleClickEdit(provider) : undefined,
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
+                                            width: "45%",
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                fontWeight: "semiBold",
+                                                textColor: "neutral800",
+                                                children: provider.name
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
+                                            width: "65%",
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                textColor: provider.enabled ? 'success600' : 'danger600',
+                                                "data-testid": `enable-${provider.name}`,
+                                                children: provider.enabled ? formatMessage({
+                                                    id: 'global.enabled',
+                                                    defaultMessage: 'Enabled'
+                                                }) : formatMessage({
+                                                    id: 'global.disabled',
+                                                    defaultMessage: 'Disabled'
                                                 })
-                                            ]
-                                        }, provider.name))
-                                })
-                            ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
+                                            onClick: (e)=>e.stopPropagation(),
+                                            children: canUpdate && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                                onClick: ()=>handleClickEdit(provider),
+                                                variant: "ghost",
+                                                label: "Edit",
+                                                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Pencil, {})
+                                            })
+                                        })
+                                    ]
+                                }, provider.name))
                         })
-                    })
-                ]
+                    ]
+                })
             }),
             /*#__PURE__*/ jsxRuntime.jsx(index, {
                 initialData: data[providerToEditName],