@strapi/plugin-users-permissions 5.25.0 → 5.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -144,7 +144,7 @@ export const ProvidersPage = () => {
144
144
  }
145
145
 
146
146
  return (
147
- <Layouts.Root>
147
+ <Page.Main>
148
148
  <Page.Title>
149
149
  {formatMessage(
150
150
  { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
@@ -156,83 +156,81 @@ export const ProvidersPage = () => {
156
156
  }
157
157
  )}
158
158
  </Page.Title>
159
- <Page.Main>
160
- <Layouts.Header
161
- title={formatMessage({
162
- id: getTrad('HeaderNav.link.providers'),
163
- defaultMessage: 'Providers',
164
- })}
165
- />
166
- <Layouts.Content>
167
- <Table colCount={3} rowCount={providers.length + 1}>
168
- <Thead>
169
- <Tr>
170
- <Th>
171
- <Typography variant="sigma" textColor="neutral600">
172
- {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}
173
- </Typography>
174
- </Th>
175
- <Th>
176
- <Typography variant="sigma" textColor="neutral600">
177
- {formatMessage({ id: getTrad('Providers.status'), defaultMessage: 'Status' })}
159
+ <Layouts.Header
160
+ title={formatMessage({
161
+ id: getTrad('HeaderNav.link.providers'),
162
+ defaultMessage: 'Providers',
163
+ })}
164
+ />
165
+ <Layouts.Content>
166
+ <Table colCount={3} rowCount={providers.length + 1}>
167
+ <Thead>
168
+ <Tr>
169
+ <Th>
170
+ <Typography variant="sigma" textColor="neutral600">
171
+ {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}
172
+ </Typography>
173
+ </Th>
174
+ <Th>
175
+ <Typography variant="sigma" textColor="neutral600">
176
+ {formatMessage({ id: getTrad('Providers.status'), defaultMessage: 'Status' })}
177
+ </Typography>
178
+ </Th>
179
+ <Th>
180
+ <Typography variant="sigma">
181
+ <VisuallyHidden>
182
+ {formatMessage({
183
+ id: 'global.settings',
184
+ defaultMessage: 'Settings',
185
+ })}
186
+ </VisuallyHidden>
187
+ </Typography>
188
+ </Th>
189
+ </Tr>
190
+ </Thead>
191
+ <Tbody>
192
+ {providers.map((provider) => (
193
+ <Tr
194
+ key={provider.name}
195
+ onClick={() => (canUpdate ? handleClickEdit(provider) : undefined)}
196
+ >
197
+ <Td width="45%">
198
+ <Typography fontWeight="semiBold" textColor="neutral800">
199
+ {provider.name}
178
200
  </Typography>
179
- </Th>
180
- <Th>
181
- <Typography variant="sigma">
182
- <VisuallyHidden>
183
- {formatMessage({
184
- id: 'global.settings',
185
- defaultMessage: 'Settings',
186
- })}
187
- </VisuallyHidden>
201
+ </Td>
202
+ <Td width="65%">
203
+ <Typography
204
+ textColor={provider.enabled ? 'success600' : 'danger600'}
205
+ data-testid={`enable-${provider.name}`}
206
+ >
207
+ {provider.enabled
208
+ ? formatMessage({
209
+ id: 'global.enabled',
210
+ defaultMessage: 'Enabled',
211
+ })
212
+ : formatMessage({
213
+ id: 'global.disabled',
214
+ defaultMessage: 'Disabled',
215
+ })}
188
216
  </Typography>
189
- </Th>
190
- </Tr>
191
- </Thead>
192
- <Tbody>
193
- {providers.map((provider) => (
194
- <Tr
195
- key={provider.name}
196
- onClick={() => (canUpdate ? handleClickEdit(provider) : undefined)}
197
- >
198
- <Td width="45%">
199
- <Typography fontWeight="semiBold" textColor="neutral800">
200
- {provider.name}
201
- </Typography>
202
- </Td>
203
- <Td width="65%">
204
- <Typography
205
- textColor={provider.enabled ? 'success600' : 'danger600'}
206
- data-testid={`enable-${provider.name}`}
217
+ </Td>
218
+ <Td onClick={(e) => e.stopPropagation()}>
219
+ {canUpdate && (
220
+ <IconButton
221
+ onClick={() => handleClickEdit(provider)}
222
+ variant="ghost"
223
+ label="Edit"
207
224
  >
208
- {provider.enabled
209
- ? formatMessage({
210
- id: 'global.enabled',
211
- defaultMessage: 'Enabled',
212
- })
213
- : formatMessage({
214
- id: 'global.disabled',
215
- defaultMessage: 'Disabled',
216
- })}
217
- </Typography>
218
- </Td>
219
- <Td onClick={(e) => e.stopPropagation()}>
220
- {canUpdate && (
221
- <IconButton
222
- onClick={() => handleClickEdit(provider)}
223
- variant="ghost"
224
- label="Edit"
225
- >
226
- <Pencil />
227
- </IconButton>
228
- )}
229
- </Td>
230
- </Tr>
231
- ))}
232
- </Tbody>
233
- </Table>
234
- </Layouts.Content>
235
- </Page.Main>
225
+ <Pencil />
226
+ </IconButton>
227
+ )}
228
+ </Td>
229
+ </Tr>
230
+ ))}
231
+ </Tbody>
232
+ </Table>
233
+ </Layouts.Content>
236
234
  <FormModal
237
235
  initialData={data[providerToEditName]}
238
236
  isOpen={isOpen}
@@ -249,7 +247,7 @@ export const ProvidersPage = () => {
249
247
  onSubmit={handleSubmit}
250
248
  providerToEditName={providerToEditName}
251
249
  />
252
- </Layouts.Root>
250
+ </Page.Main>
253
251
  );
254
252
  };
255
253
 
@@ -1,15 +1,6 @@
1
1
  import * as React from 'react';
2
2
 
3
- import {
4
- Button,
5
- Flex,
6
- Grid,
7
- Main,
8
- Textarea,
9
- TextInput,
10
- Typography,
11
- Field,
12
- } from '@strapi/design-system';
3
+ import { Button, Flex, Grid, Textarea, TextInput, Typography, Field } from '@strapi/design-system';
13
4
  import { Check } from '@strapi/icons';
14
5
  import { Page, useTracking, useNotification, useFetchClient, Layouts } from '@strapi/strapi/admin';
15
6
  import { Formik, Form } from 'formik';
@@ -68,7 +59,7 @@ export const CreatePage = () => {
68
59
  };
69
60
 
70
61
  return (
71
- <Main>
62
+ <Page.Main>
72
63
  <Page.Title>
73
64
  {formatMessage(
74
65
  { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
@@ -183,7 +174,7 @@ export const CreatePage = () => {
183
174
  </Form>
184
175
  )}
185
176
  </Formik>
186
- </Main>
177
+ </Page.Main>
187
178
  );
188
179
  };
189
180
 
@@ -1,15 +1,6 @@
1
1
  import * as React from 'react';
2
2
 
3
- import {
4
- Main,
5
- Button,
6
- Flex,
7
- TextInput,
8
- Textarea,
9
- Typography,
10
- Grid,
11
- Field,
12
- } from '@strapi/design-system';
3
+ import { Button, Flex, TextInput, Textarea, Typography, Grid, Field } from '@strapi/design-system';
13
4
  import { Check } from '@strapi/icons';
14
5
  import {
15
6
  Page,
@@ -86,7 +77,7 @@ export const EditPage = () => {
86
77
  }
87
78
 
88
79
  return (
89
- <Main>
80
+ <Page.Main>
90
81
  <Page.Title>
91
82
  {formatMessage(
92
83
  { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
@@ -204,7 +195,7 @@ export const EditPage = () => {
204
195
  </Form>
205
196
  )}
206
197
  </Formik>
207
- </Main>
198
+ </Page.Main>
208
199
  );
209
200
  };
210
201
 
@@ -153,107 +153,105 @@ export const RolesListPage = () => {
153
153
  }
154
154
 
155
155
  return (
156
- <Layouts.Root>
156
+ <Page.Main>
157
157
  <Page.Title>
158
158
  {formatMessage(
159
159
  { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
160
160
  { name: pageTitle }
161
161
  )}
162
162
  </Page.Title>
163
- <Page.Main>
164
- <Layouts.Header
165
- title={formatMessage({
166
- id: 'global.roles',
167
- defaultMessage: 'Roles',
168
- })}
169
- subtitle={formatMessage({
170
- id: 'Settings.roles.list.description',
171
- defaultMessage: 'List of roles',
172
- })}
173
- primaryAction={
174
- canCreate ? (
175
- <LinkButton
176
- to="new"
177
- tag={NavLink}
178
- onClick={() => trackUsage('willCreateRole')}
179
- startIcon={<Plus />}
180
- size="S"
181
- >
182
- {formatMessage({
183
- id: getTrad('List.button.roles'),
184
- defaultMessage: 'Add new role',
185
- })}
186
- </LinkButton>
187
- ) : null
188
- }
189
- />
190
-
191
- <Layouts.Action
192
- startActions={
193
- <SearchInput
194
- label={formatMessage({
195
- id: 'app.component.search.label',
196
- defaultMessage: 'Search',
163
+ <Layouts.Header
164
+ title={formatMessage({
165
+ id: 'global.roles',
166
+ defaultMessage: 'Roles',
167
+ })}
168
+ subtitle={formatMessage({
169
+ id: 'Settings.roles.list.description',
170
+ defaultMessage: 'List of roles',
171
+ })}
172
+ primaryAction={
173
+ canCreate ? (
174
+ <LinkButton
175
+ to="new"
176
+ tag={NavLink}
177
+ onClick={() => trackUsage('willCreateRole')}
178
+ startIcon={<Plus />}
179
+ size="S"
180
+ >
181
+ {formatMessage({
182
+ id: getTrad('List.button.roles'),
183
+ defaultMessage: 'Add new role',
197
184
  })}
198
- />
199
- }
200
- />
185
+ </LinkButton>
186
+ ) : null
187
+ }
188
+ />
189
+
190
+ <Layouts.Action
191
+ startActions={
192
+ <SearchInput
193
+ label={formatMessage({
194
+ id: 'app.component.search.label',
195
+ defaultMessage: 'Search',
196
+ })}
197
+ />
198
+ }
199
+ />
201
200
 
202
- <Layouts.Content>
203
- {!canRead && <Page.NoPermissions />}
204
- {canRead && sortedRoles && sortedRoles?.length ? (
205
- <Table colCount={colCount} rowCount={rowCount}>
206
- <Thead>
207
- <Tr>
208
- <Th>
209
- <Typography variant="sigma" textColor="neutral600">
210
- {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}
211
- </Typography>
212
- </Th>
213
- <Th>
214
- <Typography variant="sigma" textColor="neutral600">
215
- {formatMessage({
216
- id: 'global.description',
217
- defaultMessage: 'Description',
218
- })}
219
- </Typography>
220
- </Th>
221
- <Th>
222
- <Typography variant="sigma" textColor="neutral600">
223
- {formatMessage({
224
- id: 'global.users',
225
- defaultMessage: 'Users',
226
- })}
227
- </Typography>
228
- </Th>
229
- <Th>
230
- <VisuallyHidden>
231
- {formatMessage({
232
- id: 'global.actions',
233
- defaultMessage: 'Actions',
234
- })}
235
- </VisuallyHidden>
236
- </Th>
237
- </Tr>
238
- </Thead>
239
- <TableBody
240
- sortedRoles={sortedRoles}
241
- canDelete={canDelete}
242
- canUpdate={canUpdate}
243
- permissions={PERMISSIONS}
244
- setRoleToDelete={setRoleToDelete}
245
- onDelete={[showConfirmDelete, setShowConfirmDelete]}
246
- />
247
- </Table>
248
- ) : (
249
- <EmptyStateLayout content={formatMessage(emptyLayout[emptyContent])} />
250
- )}
251
- </Layouts.Content>
252
- <Dialog.Root open={showConfirmDelete} onOpenChange={handleShowConfirmDelete}>
253
- <ConfirmDialog onConfirm={handleConfirmDelete} />
254
- </Dialog.Root>
255
- </Page.Main>
256
- </Layouts.Root>
201
+ <Layouts.Content>
202
+ {!canRead && <Page.NoPermissions />}
203
+ {canRead && sortedRoles && sortedRoles?.length ? (
204
+ <Table colCount={colCount} rowCount={rowCount}>
205
+ <Thead>
206
+ <Tr>
207
+ <Th>
208
+ <Typography variant="sigma" textColor="neutral600">
209
+ {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}
210
+ </Typography>
211
+ </Th>
212
+ <Th>
213
+ <Typography variant="sigma" textColor="neutral600">
214
+ {formatMessage({
215
+ id: 'global.description',
216
+ defaultMessage: 'Description',
217
+ })}
218
+ </Typography>
219
+ </Th>
220
+ <Th>
221
+ <Typography variant="sigma" textColor="neutral600">
222
+ {formatMessage({
223
+ id: 'global.users',
224
+ defaultMessage: 'Users',
225
+ })}
226
+ </Typography>
227
+ </Th>
228
+ <Th>
229
+ <VisuallyHidden>
230
+ {formatMessage({
231
+ id: 'global.actions',
232
+ defaultMessage: 'Actions',
233
+ })}
234
+ </VisuallyHidden>
235
+ </Th>
236
+ </Tr>
237
+ </Thead>
238
+ <TableBody
239
+ sortedRoles={sortedRoles}
240
+ canDelete={canDelete}
241
+ canUpdate={canUpdate}
242
+ permissions={PERMISSIONS}
243
+ setRoleToDelete={setRoleToDelete}
244
+ onDelete={[showConfirmDelete, setShowConfirmDelete]}
245
+ />
246
+ </Table>
247
+ ) : (
248
+ <EmptyStateLayout content={formatMessage(emptyLayout[emptyContent])} />
249
+ )}
250
+ </Layouts.Content>
251
+ <Dialog.Root open={showConfirmDelete} onOpenChange={handleShowConfirmDelete}>
252
+ <ConfirmDialog onConfirm={handleConfirmDelete} />
253
+ </Dialog.Root>
254
+ </Page.Main>
257
255
  );
258
256
  };
259
257
 
@@ -143,7 +143,7 @@ const ProvidersPage = ()=>{
143
143
  if (isLoading) {
144
144
  return /*#__PURE__*/ jsxRuntime.jsx(admin.Page.Loading, {});
145
145
  }
146
- return /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.Layouts.Root, {
146
+ return /*#__PURE__*/ jsxRuntime.jsxs(admin.Page.Main, {
147
147
  children: [
148
148
  /*#__PURE__*/ jsxRuntime.jsx(admin.Page.Title, {
149
149
  children: formatMessage({
@@ -156,98 +156,94 @@ const ProvidersPage = ()=>{
156
156
  })
157
157
  })
158
158
  }),
159
- /*#__PURE__*/ jsxRuntime.jsxs(admin.Page.Main, {
160
- children: [
161
- /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Header, {
162
- title: formatMessage({
163
- id: getTrad('HeaderNav.link.providers'),
164
- defaultMessage: 'Providers'
165
- })
166
- }),
167
- /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Content, {
168
- children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Table, {
169
- colCount: 3,
170
- rowCount: providers.length + 1,
171
- children: [
172
- /*#__PURE__*/ jsxRuntime.jsx(designSystem.Thead, {
173
- children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tr, {
174
- children: [
175
- /*#__PURE__*/ jsxRuntime.jsx(designSystem.Th, {
176
- children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
177
- variant: "sigma",
178
- textColor: "neutral600",
179
- children: formatMessage({
180
- id: 'global.name',
181
- defaultMessage: 'Name'
182
- })
183
- })
184
- }),
185
- /*#__PURE__*/ jsxRuntime.jsx(designSystem.Th, {
186
- children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
187
- variant: "sigma",
188
- textColor: "neutral600",
189
- children: formatMessage({
190
- id: getTrad('Providers.status'),
191
- defaultMessage: 'Status'
192
- })
193
- })
194
- }),
195
- /*#__PURE__*/ jsxRuntime.jsx(designSystem.Th, {
196
- children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
197
- variant: "sigma",
198
- children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
199
- children: formatMessage({
200
- id: 'global.settings',
201
- defaultMessage: 'Settings'
202
- })
203
- })
159
+ /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Header, {
160
+ title: formatMessage({
161
+ id: getTrad('HeaderNav.link.providers'),
162
+ defaultMessage: 'Providers'
163
+ })
164
+ }),
165
+ /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Content, {
166
+ children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Table, {
167
+ colCount: 3,
168
+ rowCount: providers.length + 1,
169
+ children: [
170
+ /*#__PURE__*/ jsxRuntime.jsx(designSystem.Thead, {
171
+ children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tr, {
172
+ children: [
173
+ /*#__PURE__*/ jsxRuntime.jsx(designSystem.Th, {
174
+ children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
175
+ variant: "sigma",
176
+ textColor: "neutral600",
177
+ children: formatMessage({
178
+ id: 'global.name',
179
+ defaultMessage: 'Name'
180
+ })
181
+ })
182
+ }),
183
+ /*#__PURE__*/ jsxRuntime.jsx(designSystem.Th, {
184
+ children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
185
+ variant: "sigma",
186
+ textColor: "neutral600",
187
+ children: formatMessage({
188
+ id: getTrad('Providers.status'),
189
+ defaultMessage: 'Status'
190
+ })
191
+ })
192
+ }),
193
+ /*#__PURE__*/ jsxRuntime.jsx(designSystem.Th, {
194
+ children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
195
+ variant: "sigma",
196
+ children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
197
+ children: formatMessage({
198
+ id: 'global.settings',
199
+ defaultMessage: 'Settings'
204
200
  })
205
201
  })
206
- ]
202
+ })
207
203
  })
208
- }),
209
- /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tbody, {
210
- children: providers.map((provider)=>/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tr, {
211
- onClick: ()=>canUpdate ? handleClickEdit(provider) : undefined,
212
- children: [
213
- /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
214
- width: "45%",
215
- children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
216
- fontWeight: "semiBold",
217
- textColor: "neutral800",
218
- children: provider.name
219
- })
220
- }),
221
- /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
222
- width: "65%",
223
- children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
224
- textColor: provider.enabled ? 'success600' : 'danger600',
225
- "data-testid": `enable-${provider.name}`,
226
- children: provider.enabled ? formatMessage({
227
- id: 'global.enabled',
228
- defaultMessage: 'Enabled'
229
- }) : formatMessage({
230
- id: 'global.disabled',
231
- defaultMessage: 'Disabled'
232
- })
233
- })
234
- }),
235
- /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
236
- onClick: (e)=>e.stopPropagation(),
237
- children: canUpdate && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
238
- onClick: ()=>handleClickEdit(provider),
239
- variant: "ghost",
240
- label: "Edit",
241
- children: /*#__PURE__*/ jsxRuntime.jsx(icons.Pencil, {})
242
- })
204
+ ]
205
+ })
206
+ }),
207
+ /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tbody, {
208
+ children: providers.map((provider)=>/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tr, {
209
+ onClick: ()=>canUpdate ? handleClickEdit(provider) : undefined,
210
+ children: [
211
+ /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
212
+ width: "45%",
213
+ children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
214
+ fontWeight: "semiBold",
215
+ textColor: "neutral800",
216
+ children: provider.name
217
+ })
218
+ }),
219
+ /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
220
+ width: "65%",
221
+ children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
222
+ textColor: provider.enabled ? 'success600' : 'danger600',
223
+ "data-testid": `enable-${provider.name}`,
224
+ children: provider.enabled ? formatMessage({
225
+ id: 'global.enabled',
226
+ defaultMessage: 'Enabled'
227
+ }) : formatMessage({
228
+ id: 'global.disabled',
229
+ defaultMessage: 'Disabled'
243
230
  })
244
- ]
245
- }, provider.name))
246
- })
247
- ]
231
+ })
232
+ }),
233
+ /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
234
+ onClick: (e)=>e.stopPropagation(),
235
+ children: canUpdate && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
236
+ onClick: ()=>handleClickEdit(provider),
237
+ variant: "ghost",
238
+ label: "Edit",
239
+ children: /*#__PURE__*/ jsxRuntime.jsx(icons.Pencil, {})
240
+ })
241
+ })
242
+ ]
243
+ }, provider.name))
248
244
  })
249
- })
250
- ]
245
+ ]
246
+ })
251
247
  }),
252
248
  /*#__PURE__*/ jsxRuntime.jsx(index, {
253
249
  initialData: data[providerToEditName],