@strapi/plugin-users-permissions 0.0.0-next.e50ef5e2ea57ecf3da5bcf308508b51ee3c0deca → 0.0.0-next.e5b87a54008c9de2b3286a4774635dcf69895d9b

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

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

package/dist/admin/pages/Providers/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../admin/src/pages/Providers/index.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking, Layouts } from '@strapi/admin/strapi-admin';\nimport {\n  IconButton,\n  Table,\n  Tbody,\n  Td,\n  Th,\n  Thead,\n  Tr,\n  Typography,\n  VisuallyHidden,\n  useCollator,\n} from '@strapi/design-system';\nimport { Pencil } from '@strapi/icons';\nimport {\n  Page,\n  useAPIErrorHandler,\n  useNotification,\n  useFetchClient,\n  useRBAC,\n} from '@strapi/strapi/admin';\nimport upperFirst from 'lodash/upperFirst';\nimport { useIntl } from 'react-intl';\nimport { useMutation, useQuery, useQueryClient } from 'react-query';\n\nimport FormModal from '../../components/FormModal';\nimport { PERMISSIONS } from '../../constants';\nimport { getTrad } from '../../utils';\n\nimport forms from './utils/forms';\n\nexport const ProvidersPage = () => {\n  const { formatMessage, locale } = useIntl();\n  const queryClient = useQueryClient();\n  const { trackUsage } = useTracking();\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [providerToEditName, setProviderToEditName] = React.useState(null);\n  const { toggleNotification } = useNotification();\n  const { get, put } = useFetchClient();\n  const { formatAPIError } = useAPIErrorHandler();\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n\n  const {\n    isLoading: isLoadingPermissions,\n    allowedActions: { canUpdate },\n  } = useRBAC({ update: PERMISSIONS.updateProviders });\n\n  const { isLoading: isLoadingData, data } = useQuery(\n    ['users-permissions', 'get-providers'],\n    async () => {\n      const { data } = await get('/users-permissions/providers');\n\n      return data;\n    },\n    {\n      initialData: {},\n    }\n  );\n\n  const submitMutation = useMutation((body) => put('/users-permissions/providers', body), {\n    async onSuccess() {\n      await queryClient.invalidateQueries(['users-permissions', 'get-providers']);\n\n      toggleNotification({\n        type: 'success',\n        message: formatMessage({ id: getTrad('notification.success.submit') }),\n      });\n\n      trackUsage('didEditAuthenticationProvider');\n\n      handleToggleModal();\n    },\n    onError(error) {\n      toggleNotification({\n        type: 'danger',\n        message: formatAPIError(error),\n      });\n    },\n    refetchActive: false,\n  });\n\n  const providers = Object.entries(data)\n    .reduce((acc, [name, provider]) => {\n      const { icon, enabled, subdomain } = provider;\n\n      acc.push({\n        name,\n        icon: icon === 'envelope' ? ['fas', 'envelope'] : ['fab', icon],\n        enabled,\n        subdomain,\n      });\n\n      return acc;\n    }, [])\n    .sort((a, b) => formatter.compare(a.name, b.name));\n\n  const isLoading = isLoadingData || isLoadingPermissions;\n\n  const isProviderWithSubdomain = React.useMemo(() => {\n    if (!providerToEditName) {\n      return false;\n    }\n\n    const providerToEdit = providers.find((obj) => obj.name === providerToEditName);\n\n    return !!providerToEdit?.subdomain;\n  }, [providers, providerToEditName]);\n\n  const layoutToRender = React.useMemo(() => {\n    if (providerToEditName === 'email') {\n      return forms.email;\n    }\n\n    if (isProviderWithSubdomain) {\n      return forms.providersWithSubdomain;\n    }\n\n    return forms.providers;\n  }, [providerToEditName, isProviderWithSubdomain]);\n\n  const handleToggleModal = () => {\n    setIsOpen((prev) => !prev);\n  };\n\n  const handleClickEdit = (provider) => {\n    if (canUpdate) {\n      setProviderToEditName(provider.name);\n      handleToggleModal();\n    }\n  };\n\n  const handleSubmit = async (values) => {\n    trackUsage('willEditAuthenticationProvider');\n\n    submitMutation.mutate({ providers: { ...data, [providerToEditName]: values } });\n  };\n\n  if (isLoading) {\n    return <Page.Loading />;\n  }\n\n  return (\n    <Layouts.Root>\n      <Page.Title>\n        {formatMessage(\n          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },\n          {\n            name: formatMessage({\n              id: getTrad('HeaderNav.link.providers'),\n              defaultMessage: 'Providers',\n            }),\n          }\n        )}\n      </Page.Title>\n      <Page.Main>\n        <Layouts.Header\n          title={formatMessage({\n            id: getTrad('HeaderNav.link.providers'),\n            defaultMessage: 'Providers',\n          })}\n        />\n        <Layouts.Content>\n          <Table colCount={3} rowCount={providers.length + 1}>\n            <Thead>\n              <Tr>\n                <Th>\n                  <Typography variant=\"sigma\" textColor=\"neutral600\">\n                    {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}\n                  </Typography>\n                </Th>\n                <Th>\n                  <Typography variant=\"sigma\" textColor=\"neutral600\">\n                    {formatMessage({ id: getTrad('Providers.status'), defaultMessage: 'Status' })}\n                  </Typography>\n                </Th>\n                <Th>\n                  <Typography variant=\"sigma\">\n                    <VisuallyHidden>\n                      {formatMessage({\n                        id: 'global.settings',\n                        defaultMessage: 'Settings',\n                      })}\n                    </VisuallyHidden>\n                  </Typography>\n                </Th>\n              </Tr>\n            </Thead>\n            <Tbody>\n              {providers.map((provider) => (\n                <Tr\n                  key={provider.name}\n                  onClick={() => (canUpdate ? handleClickEdit(provider) : undefined)}\n                >\n                  <Td width=\"45%\">\n                    <Typography fontWeight=\"semiBold\" textColor=\"neutral800\">\n                      {provider.name}\n                    </Typography>\n                  </Td>\n                  <Td width=\"65%\">\n                    <Typography\n                      textColor={provider.enabled ? 'success600' : 'danger600'}\n                      data-testid={`enable-${provider.name}`}\n                    >\n                      {provider.enabled\n                        ? formatMessage({\n                            id: 'global.enabled',\n                            defaultMessage: 'Enabled',\n                          })\n                        : formatMessage({\n                            id: 'global.disabled',\n                            defaultMessage: 'Disabled',\n                          })}\n                    </Typography>\n                  </Td>\n                  <Td onClick={(e) => e.stopPropagation()}>\n                    {canUpdate && (\n                      <IconButton\n                        onClick={() => handleClickEdit(provider)}\n                        variant=\"ghost\"\n                        label=\"Edit\"\n                      >\n                        <Pencil />\n                      </IconButton>\n                    )}\n                  </Td>\n                </Tr>\n              ))}\n            </Tbody>\n          </Table>\n        </Layouts.Content>\n      </Page.Main>\n      <FormModal\n        initialData={data[providerToEditName]}\n        isOpen={isOpen}\n        isSubmiting={submitMutation.isLoading}\n        layout={layoutToRender}\n        headerBreadcrumbs={[\n          formatMessage({\n            id: getTrad('PopUpForm.header.edit.providers'),\n            defaultMessage: 'Edit Provider',\n          }),\n          upperFirst(providerToEditName),\n        ]}\n        onToggle={handleToggleModal}\n        onSubmit={handleSubmit}\n        providerToEditName={providerToEditName}\n      />\n    </Layouts.Root>\n  );\n};\n\nconst ProtectedProvidersPage = () => (\n  <Page.Protect permissions={PERMISSIONS.readProviders}>\n    <ProvidersPage />\n  </Page.Protect>\n);\n\nexport default ProtectedProvidersPage;\n"],"names":["ProvidersPage","formatMessage","locale","useIntl","queryClient","useQueryClient","trackUsage","useTracking","isOpen","setIsOpen","React","useState","providerToEditName","setProviderToEditName","toggleNotification","useNotification","get","put","useFetchClient","formatAPIError","useAPIErrorHandler","formatter","useCollator","sensitivity","isLoading","isLoadingPermissions","allowedActions","canUpdate","useRBAC","update","PERMISSIONS","updateProviders","isLoadingData","data","useQuery","initialData","submitMutation","useMutation","body","onSuccess","invalidateQueries","type","message","id","getTrad","handleToggleModal","onError","error","refetchActive","providers","Object","entries","reduce","acc","name","provider","icon","enabled","subdomain","push","sort","a","b","compare","isProviderWithSubdomain","useMemo","providerToEdit","find","obj","layoutToRender","forms","email","providersWithSubdomain","prev","handleClickEdit","handleSubmit","values","mutate","_jsx","Page","Loading","_jsxs","Layouts","Root","Title","defaultMessage","Main","Header","title","Content","Table","colCount","rowCount","length","Thead","Tr","Th","Typography","variant","textColor","VisuallyHidden","Tbody","map","onClick","undefined","Td","width","fontWeight","data-testid","e","stopPropagation","IconButton","label","Pencil","FormModal","isSubmiting","layout","headerBreadcrumbs","upperFirst","onToggle","onSubmit","ProtectedProvidersPage","Protect","permissions","readProviders"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../../admin/src/pages/Providers/index.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking, Layouts } from '@strapi/admin/strapi-admin';\nimport {\n  IconButton,\n  Table,\n  Tbody,\n  Td,\n  Th,\n  Thead,\n  Tr,\n  Typography,\n  VisuallyHidden,\n  useCollator,\n} from '@strapi/design-system';\nimport { Pencil } from '@strapi/icons';\nimport {\n  Page,\n  useAPIErrorHandler,\n  useNotification,\n  useFetchClient,\n  useRBAC,\n} from '@strapi/strapi/admin';\nimport upperFirst from 'lodash/upperFirst';\nimport { useIntl } from 'react-intl';\nimport { useMutation, useQuery, useQueryClient } from 'react-query';\n\nimport FormModal from '../../components/FormModal';\nimport { PERMISSIONS } from '../../constants';\nimport { getTrad } from '../../utils';\n\nimport forms from './utils/forms';\n\nexport const ProvidersPage = () => {\n  const { formatMessage, locale } = useIntl();\n  const queryClient = useQueryClient();\n  const { trackUsage } = useTracking();\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [providerToEditName, setProviderToEditName] = React.useState(null);\n  const { toggleNotification } = useNotification();\n  const { get, put } = useFetchClient();\n  const { formatAPIError } = useAPIErrorHandler();\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n\n  const {\n    isLoading: isLoadingPermissions,\n    allowedActions: { canUpdate },\n  } = useRBAC({ update: PERMISSIONS.updateProviders });\n\n  const { isLoading: isLoadingData, data } = useQuery(\n    ['users-permissions', 'get-providers'],\n    async () => {\n      const { data } = await get('/users-permissions/providers');\n\n      return data;\n    },\n    {\n      initialData: {},\n    }\n  );\n\n  const submitMutation = useMutation((body) => put('/users-permissions/providers', body), {\n    async onSuccess() {\n      await queryClient.invalidateQueries(['users-permissions', 'get-providers']);\n\n      toggleNotification({\n        type: 'success',\n        message: formatMessage({ id: getTrad('notification.success.submit') }),\n      });\n\n      trackUsage('didEditAuthenticationProvider');\n\n      handleToggleModal();\n    },\n    onError(error) {\n      toggleNotification({\n        type: 'danger',\n        message: formatAPIError(error),\n      });\n    },\n    refetchActive: false,\n  });\n\n  const providers = Object.entries(data)\n    .reduce((acc, [name, provider]) => {\n      const { icon, enabled, subdomain } = provider;\n\n      acc.push({\n        name,\n        icon: icon === 'envelope' ? ['fas', 'envelope'] : ['fab', icon],\n        enabled,\n        subdomain,\n      });\n\n      return acc;\n    }, [])\n    .sort((a, b) => formatter.compare(a.name, b.name));\n\n  const isLoading = isLoadingData || isLoadingPermissions;\n\n  const isProviderWithSubdomain = React.useMemo(() => {\n    if (!providerToEditName) {\n      return false;\n    }\n\n    const providerToEdit = providers.find((obj) => obj.name === providerToEditName);\n\n    return !!providerToEdit?.subdomain;\n  }, [providers, providerToEditName]);\n\n  const layoutToRender = React.useMemo(() => {\n    if (providerToEditName === 'email') {\n      return forms.email;\n    }\n\n    if (isProviderWithSubdomain) {\n      return forms.providersWithSubdomain;\n    }\n\n    return forms.providers;\n  }, [providerToEditName, isProviderWithSubdomain]);\n\n  const handleToggleModal = () => {\n    setIsOpen((prev) => !prev);\n  };\n\n  const handleClickEdit = (provider) => {\n    if (canUpdate) {\n      setProviderToEditName(provider.name);\n      handleToggleModal();\n    }\n  };\n\n  const handleSubmit = async (values) => {\n    trackUsage('willEditAuthenticationProvider');\n\n    submitMutation.mutate({ providers: { ...data, [providerToEditName]: values } });\n  };\n\n  if (isLoading) {\n    return <Page.Loading />;\n  }\n\n  return (\n    <Page.Main>\n      <Page.Title>\n        {formatMessage(\n          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },\n          {\n            name: formatMessage({\n              id: getTrad('HeaderNav.link.providers'),\n              defaultMessage: 'Providers',\n            }),\n          }\n        )}\n      </Page.Title>\n      <Layouts.Header\n        title={formatMessage({\n          id: getTrad('HeaderNav.link.providers'),\n          defaultMessage: 'Providers',\n        })}\n      />\n      <Layouts.Content>\n        <Table colCount={3} rowCount={providers.length + 1}>\n          <Thead>\n            <Tr>\n              <Th>\n                <Typography variant=\"sigma\" textColor=\"neutral600\">\n                  {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}\n                </Typography>\n              </Th>\n              <Th>\n                <Typography variant=\"sigma\" textColor=\"neutral600\">\n                  {formatMessage({ id: getTrad('Providers.status'), defaultMessage: 'Status' })}\n                </Typography>\n              </Th>\n              <Th>\n                <Typography variant=\"sigma\">\n                  <VisuallyHidden>\n                    {formatMessage({\n                      id: 'global.settings',\n                      defaultMessage: 'Settings',\n                    })}\n                  </VisuallyHidden>\n                </Typography>\n              </Th>\n            </Tr>\n          </Thead>\n          <Tbody>\n            {providers.map((provider) => (\n              <Tr\n                key={provider.name}\n                onClick={() => (canUpdate ? handleClickEdit(provider) : undefined)}\n              >\n                <Td width=\"45%\">\n                  <Typography fontWeight=\"semiBold\" textColor=\"neutral800\">\n                    {provider.name}\n                  </Typography>\n                </Td>\n                <Td width=\"65%\">\n                  <Typography\n                    textColor={provider.enabled ? 'success600' : 'danger600'}\n                    data-testid={`enable-${provider.name}`}\n                  >\n                    {provider.enabled\n                      ? formatMessage({\n                          id: 'global.enabled',\n                          defaultMessage: 'Enabled',\n                        })\n                      : formatMessage({\n                          id: 'global.disabled',\n                          defaultMessage: 'Disabled',\n                        })}\n                  </Typography>\n                </Td>\n                <Td onClick={(e) => e.stopPropagation()}>\n                  {canUpdate && (\n                    <IconButton\n                      onClick={() => handleClickEdit(provider)}\n                      variant=\"ghost\"\n                      label=\"Edit\"\n                    >\n                      <Pencil />\n                    </IconButton>\n                  )}\n                </Td>\n              </Tr>\n            ))}\n          </Tbody>\n        </Table>\n      </Layouts.Content>\n      <FormModal\n        initialData={data[providerToEditName]}\n        isOpen={isOpen}\n        isSubmiting={submitMutation.isLoading}\n        layout={layoutToRender}\n        headerBreadcrumbs={[\n          formatMessage({\n            id: getTrad('PopUpForm.header.edit.providers'),\n            defaultMessage: 'Edit Provider',\n          }),\n          upperFirst(providerToEditName),\n        ]}\n        onToggle={handleToggleModal}\n        onSubmit={handleSubmit}\n        providerToEditName={providerToEditName}\n      />\n    </Page.Main>\n  );\n};\n\nconst ProtectedProvidersPage = () => (\n  <Page.Protect permissions={PERMISSIONS.readProviders}>\n    <ProvidersPage />\n  </Page.Protect>\n);\n\nexport default ProtectedProvidersPage;\n"],"names":["ProvidersPage","formatMessage","locale","useIntl","queryClient","useQueryClient","trackUsage","useTracking","isOpen","setIsOpen","React","useState","providerToEditName","setProviderToEditName","toggleNotification","useNotification","get","put","useFetchClient","formatAPIError","useAPIErrorHandler","formatter","useCollator","sensitivity","isLoading","isLoadingPermissions","allowedActions","canUpdate","useRBAC","update","PERMISSIONS","updateProviders","isLoadingData","data","useQuery","initialData","submitMutation","useMutation","body","onSuccess","invalidateQueries","type","message","id","getTrad","handleToggleModal","onError","error","refetchActive","providers","Object","entries","reduce","acc","name","provider","icon","enabled","subdomain","push","sort","a","b","compare","isProviderWithSubdomain","useMemo","providerToEdit","find","obj","layoutToRender","forms","email","providersWithSubdomain","prev","handleClickEdit","handleSubmit","values","mutate","_jsx","Page","Loading","_jsxs","Main","Title","defaultMessage","Layouts","Header","title","Content","Table","colCount","rowCount","length","Thead","Tr","Th","Typography","variant","textColor","VisuallyHidden","Tbody","map","onClick","undefined","Td","width","fontWeight","data-testid","e","stopPropagation","IconButton","label","Pencil","FormModal","isSubmiting","layout","headerBreadcrumbs","upperFirst","onToggle","onSubmit","ProtectedProvidersPage","Protect","permissions","readProviders"],"mappings":"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"}

package/dist/admin/pages/Roles/pages/CreatePage.js

@@ -76,7 +76,7 @@ const CreatePage = ()=>{
             users: []
         });
     };
-    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Main, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(admin.Page.Main, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(admin.Page.Title, {
                 children: formatMessage({
@@ -103,6 +103,7 @@ const CreatePage = ()=>{
                                     type: "submit",
                                     loading: mutation.isLoading,
                                     startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Check, {}),
+                                    fullWidth: true,
                                     children: formatMessage({
                                         id: 'global.save',
                                         defaultMessage: 'Save'
@@ -115,6 +116,16 @@ const CreatePage = ()=>{
                                 subtitle: formatMessage({
                                     id: 'Settings.roles.create.description',
                                     defaultMessage: 'Define the rights given to the role'
+                                }),
+                                navigationAction: // The back link for mobile works differently; it is placed higher up in the DOM.
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                    display: {
+                                        initial: 'none',
+                                        medium: 'block'
+                                    },
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(admin.BackButton, {
+                                        fallback: ".."
+                                    })
                                 })
                             }),
                             /*#__PURE__*/ jsxRuntime.jsx(admin.Layouts.Content, {
@@ -147,6 +158,7 @@ const CreatePage = ()=>{
                                                     children: [
                                                         /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
                                                             col: 6,
+                                                            xs: 12,
                                                             direction: "column",
                                                             alignItems: "stretch",
                                                             children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
@@ -164,6 +176,7 @@ const CreatePage = ()=>{
                                                                         })
                                                                     }),
                                                                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextInput, {
+                                                                        type: "text",
                                                                         value: values.name || '',
                                                                         onChange: handleChange
                                                                     }),
@@ -173,6 +186,7 @@ const CreatePage = ()=>{
                                                         }),
                                                         /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
                                                             col: 6,
+                                                            xs: 12,
                                                             direction: "column",
                                                             alignItems: "stretch",
                                                             children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {

package/dist/admin/pages/Roles/pages/CreatePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreatePage.js","sources":["../../../../../admin/src/pages/Roles/pages/CreatePage.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Button,\n  Flex,\n  Grid,\n  Main,\n  Textarea,\n  TextInput,\n  Typography,\n  Field,\n} from '@strapi/design-system';\nimport { Check } from '@strapi/icons';\nimport { Page, useTracking, useNotification, useFetchClient, Layouts } from '@strapi/strapi/admin';\nimport { Formik, Form } from 'formik';\nimport { useIntl } from 'react-intl';\nimport { useMutation } from 'react-query';\nimport { useNavigate } from 'react-router-dom';\n\nimport UsersPermissions from '../../../components/UsersPermissions';\nimport { PERMISSIONS } from '../../../constants';\nimport getTrad from '../../../utils/getTrad';\nimport { createRoleSchema } from '../constants';\nimport { usePlugins } from '../hooks/usePlugins';\n\nexport const CreatePage = () => {\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const navigate = useNavigate();\n  const { isLoading: isLoadingPlugins, permissions, routes } = usePlugins();\n  const { trackUsage } = useTracking();\n  const permissionsRef = React.useRef();\n  const { post } = useFetchClient();\n  const mutation = useMutation((body) => post(`/users-permissions/roles`, body), {\n    onError() {\n      toggleNotification({\n        type: 'danger',\n        message: formatMessage({\n          id: 'notification.error',\n          defaultMessage: 'An error occurred',\n        }),\n      });\n    },\n\n    onSuccess() {\n      trackUsage('didCreateRole');\n\n      toggleNotification({\n        type: 'success',\n        message: formatMessage({\n          id: getTrad('Settings.roles.created'),\n          defaultMessage: 'Role created',\n        }),\n      });\n\n      // Forcing redirecting since we don't have the id in the response\n      navigate(-1);\n    },\n  });\n\n  const handleCreateRoleSubmit = async (data) => {\n    // TODO: refactor. Child -> parent component communication is evil;\n    // We should either move the provider one level up or move the state\n    // straight into redux.\n    const permissions = permissionsRef.current.getPermissions();\n\n    await mutation.mutate({ ...data, ...permissions, users: [] });\n  };\n\n  return (\n    <Main>\n      <Page.Title>\n        {formatMessage(\n          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },\n          { name: 'Roles' }\n        )}\n      </Page.Title>\n      <Formik\n        enableReinitialize\n        initialValues={{ name: '', description: '' }}\n        onSubmit={handleCreateRoleSubmit}\n        validationSchema={createRoleSchema}\n      >\n        {({ handleSubmit, values, handleChange, errors }) => (\n          <Form noValidate onSubmit={handleSubmit}>\n            <Layouts.Header\n              primaryAction={\n                !isLoadingPlugins && (\n                  <Button type=\"submit\" loading={mutation.isLoading} startIcon={<Check />}>\n                    {formatMessage({\n                      id: 'global.save',\n                      defaultMessage: 'Save',\n                    })}\n                  </Button>\n                )\n              }\n              title={formatMessage({\n                id: 'Settings.roles.create.title',\n                defaultMessage: 'Create a role',\n              })}\n              subtitle={formatMessage({\n                id: 'Settings.roles.create.description',\n                defaultMessage: 'Define the rights given to the role',\n              })}\n            />\n            <Layouts.Content>\n              <Flex\n                background=\"neutral0\"\n                direction=\"column\"\n                alignItems=\"stretch\"\n                gap={7}\n                hasRadius\n                paddingTop={6}\n                paddingBottom={6}\n                paddingLeft={7}\n                paddingRight={7}\n                shadow=\"filterShadow\"\n              >\n                <Flex direction=\"column\" alignItems=\"stretch\">\n                  <Typography variant=\"delta\" tag=\"h2\">\n                    {formatMessage({\n                      id: getTrad('EditPage.form.roles'),\n                      defaultMessage: 'Role details',\n                    })}\n                  </Typography>\n\n                  <Grid.Root gap={4}>\n                    <Grid.Item col={6} direction=\"column\" alignItems=\"stretch\">\n                      <Field.Root\n                        name=\"name\"\n                        error={\n                          errors?.name\n                            ? formatMessage({ id: errors.name, defaultMessage: 'Name is required' })\n                            : false\n                        }\n                        required\n                      >\n                        <Field.Label>\n                          {formatMessage({\n                            id: 'global.name',\n                            defaultMessage: 'Name',\n                          })}\n                        </Field.Label>\n                        <TextInput value={values.name || ''} onChange={handleChange} />\n                        <Field.Error />\n                      </Field.Root>\n                    </Grid.Item>\n                    <Grid.Item col={6} direction=\"column\" alignItems=\"stretch\">\n                      <Field.Root\n                        name=\"description\"\n                        error={\n                          errors?.description\n                            ? formatMessage({\n                                id: errors.description,\n                                defaultMessage: 'Description is required',\n                              })\n                            : false\n                        }\n                        required\n                      >\n                        <Field.Label>\n                          {formatMessage({\n                            id: 'global.description',\n                            defaultMessage: 'Description',\n                          })}\n                        </Field.Label>\n                        <Textarea value={values.description || ''} onChange={handleChange} />\n                        <Field.Error />\n                      </Field.Root>\n                    </Grid.Item>\n                  </Grid.Root>\n                </Flex>\n\n                {!isLoadingPlugins && (\n                  <UsersPermissions\n                    ref={permissionsRef}\n                    permissions={permissions}\n                    routes={routes}\n                  />\n                )}\n              </Flex>\n            </Layouts.Content>\n          </Form>\n        )}\n      </Formik>\n    </Main>\n  );\n};\n\nexport const ProtectedRolesCreatePage = () => (\n  <Page.Protect permissions={PERMISSIONS.createRole}>\n    <CreatePage />\n  </Page.Protect>\n);\n"],"names":["CreatePage","formatMessage","useIntl","toggleNotification","useNotification","navigate","useNavigate","isLoading","isLoadingPlugins","permissions","routes","usePlugins","trackUsage","useTracking","permissionsRef","React","useRef","post","useFetchClient","mutation","useMutation","body","onError","type","message","id","defaultMessage","onSuccess","getTrad","handleCreateRoleSubmit","data","current","getPermissions","mutate","users","_jsxs","Main","_jsx","Page","Title","name","Formik","enableReinitialize","initialValues","description","onSubmit","validationSchema","createRoleSchema","handleSubmit","values","handleChange","errors","Form","noValidate","Layouts","Header","primaryAction","Button","loading","startIcon","Check","title","subtitle","Content","Flex","background","direction","alignItems","gap","hasRadius","paddingTop","paddingBottom","paddingLeft","paddingRight","shadow","Typography","variant","tag","Grid","Root","Item","col","Field","error","required","Label","TextInput","value","onChange","Error","Textarea","UsersPermissions","ref","ProtectedRolesCreatePage","Protect","PERMISSIONS","createRole"],"mappings":"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"}
+{"version":3,"file":"CreatePage.js","sources":["../../../../../admin/src/pages/Roles/pages/CreatePage.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Button,\n  Flex,\n  Grid,\n  Textarea,\n  TextInput,\n  Typography,\n  Field,\n  Box,\n} from '@strapi/design-system';\nimport { Check } from '@strapi/icons';\nimport {\n  Page,\n  useTracking,\n  useNotification,\n  useFetchClient,\n  Layouts,\n  BackButton,\n} from '@strapi/strapi/admin';\nimport { Formik, Form } from 'formik';\nimport { useIntl } from 'react-intl';\nimport { useMutation } from 'react-query';\nimport { useNavigate } from 'react-router-dom';\n\nimport UsersPermissions from '../../../components/UsersPermissions';\nimport { PERMISSIONS } from '../../../constants';\nimport getTrad from '../../../utils/getTrad';\nimport { createRoleSchema } from '../constants';\nimport { usePlugins } from '../hooks/usePlugins';\n\nexport const CreatePage = () => {\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const navigate = useNavigate();\n  const { isLoading: isLoadingPlugins, permissions, routes } = usePlugins();\n  const { trackUsage } = useTracking();\n  const permissionsRef = React.useRef();\n  const { post } = useFetchClient();\n  const mutation = useMutation((body) => post(`/users-permissions/roles`, body), {\n    onError() {\n      toggleNotification({\n        type: 'danger',\n        message: formatMessage({\n          id: 'notification.error',\n          defaultMessage: 'An error occurred',\n        }),\n      });\n    },\n\n    onSuccess() {\n      trackUsage('didCreateRole');\n\n      toggleNotification({\n        type: 'success',\n        message: formatMessage({\n          id: getTrad('Settings.roles.created'),\n          defaultMessage: 'Role created',\n        }),\n      });\n\n      // Forcing redirecting since we don't have the id in the response\n      navigate(-1);\n    },\n  });\n\n  const handleCreateRoleSubmit = async (data) => {\n    // TODO: refactor. Child -> parent component communication is evil;\n    // We should either move the provider one level up or move the state\n    // straight into redux.\n    const permissions = permissionsRef.current.getPermissions();\n\n    await mutation.mutate({ ...data, ...permissions, users: [] });\n  };\n\n  return (\n    <Page.Main>\n      <Page.Title>\n        {formatMessage(\n          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },\n          { name: 'Roles' }\n        )}\n      </Page.Title>\n      <Formik\n        enableReinitialize\n        initialValues={{ name: '', description: '' }}\n        onSubmit={handleCreateRoleSubmit}\n        validationSchema={createRoleSchema}\n      >\n        {({ handleSubmit, values, handleChange, errors }) => (\n          <Form noValidate onSubmit={handleSubmit}>\n            <Layouts.Header\n              primaryAction={\n                !isLoadingPlugins && (\n                  <Button\n                    type=\"submit\"\n                    loading={mutation.isLoading}\n                    startIcon={<Check />}\n                    fullWidth\n                  >\n                    {formatMessage({\n                      id: 'global.save',\n                      defaultMessage: 'Save',\n                    })}\n                  </Button>\n                )\n              }\n              title={formatMessage({\n                id: 'Settings.roles.create.title',\n                defaultMessage: 'Create a role',\n              })}\n              subtitle={formatMessage({\n                id: 'Settings.roles.create.description',\n                defaultMessage: 'Define the rights given to the role',\n              })}\n              navigationAction={\n                // The back link for mobile works differently; it is placed higher up in the DOM.\n                <Box display={{ initial: 'none', medium: 'block' }}>\n                  <BackButton fallback=\"..\" />\n                </Box>\n              }\n            />\n            <Layouts.Content>\n              <Flex\n                background=\"neutral0\"\n                direction=\"column\"\n                alignItems=\"stretch\"\n                gap={7}\n                hasRadius\n                paddingTop={6}\n                paddingBottom={6}\n                paddingLeft={7}\n                paddingRight={7}\n                shadow=\"filterShadow\"\n              >\n                <Flex direction=\"column\" alignItems=\"stretch\">\n                  <Typography variant=\"delta\" tag=\"h2\">\n                    {formatMessage({\n                      id: getTrad('EditPage.form.roles'),\n                      defaultMessage: 'Role details',\n                    })}\n                  </Typography>\n\n                  <Grid.Root gap={4}>\n                    <Grid.Item col={6} xs={12} direction=\"column\" alignItems=\"stretch\">\n                      <Field.Root\n                        name=\"name\"\n                        error={\n                          errors?.name\n                            ? formatMessage({ id: errors.name, defaultMessage: 'Name is required' })\n                            : false\n                        }\n                        required\n                      >\n                        <Field.Label>\n                          {formatMessage({\n                            id: 'global.name',\n                            defaultMessage: 'Name',\n                          })}\n                        </Field.Label>\n                        <TextInput type=\"text\" value={values.name || ''} onChange={handleChange} />\n                        <Field.Error />\n                      </Field.Root>\n                    </Grid.Item>\n                    <Grid.Item col={6} xs={12} direction=\"column\" alignItems=\"stretch\">\n                      <Field.Root\n                        name=\"description\"\n                        error={\n                          errors?.description\n                            ? formatMessage({\n                                id: errors.description,\n                                defaultMessage: 'Description is required',\n                              })\n                            : false\n                        }\n                        required\n                      >\n                        <Field.Label>\n                          {formatMessage({\n                            id: 'global.description',\n                            defaultMessage: 'Description',\n                          })}\n                        </Field.Label>\n                        <Textarea value={values.description || ''} onChange={handleChange} />\n                        <Field.Error />\n                      </Field.Root>\n                    </Grid.Item>\n                  </Grid.Root>\n                </Flex>\n\n                {!isLoadingPlugins && (\n                  <UsersPermissions\n                    ref={permissionsRef}\n                    permissions={permissions}\n                    routes={routes}\n                  />\n                )}\n              </Flex>\n            </Layouts.Content>\n          </Form>\n        )}\n      </Formik>\n    </Page.Main>\n  );\n};\n\nexport const ProtectedRolesCreatePage = () => (\n  <Page.Protect permissions={PERMISSIONS.createRole}>\n    <CreatePage />\n  </Page.Protect>\n);\n"],"names":["CreatePage","formatMessage","useIntl","toggleNotification","useNotification","navigate","useNavigate","isLoading","isLoadingPlugins","permissions","routes","usePlugins","trackUsage","useTracking","permissionsRef","React","useRef","post","useFetchClient","mutation","useMutation","body","onError","type","message","id","defaultMessage","onSuccess","getTrad","handleCreateRoleSubmit","data","current","getPermissions","mutate","users","_jsxs","Page","Main","_jsx","Title","name","Formik","enableReinitialize","initialValues","description","onSubmit","validationSchema","createRoleSchema","handleSubmit","values","handleChange","errors","Form","noValidate","Layouts","Header","primaryAction","Button","loading","startIcon","Check","fullWidth","title","subtitle","navigationAction","Box","display","initial","medium","BackButton","fallback","Content","Flex","background","direction","alignItems","gap","hasRadius","paddingTop","paddingBottom","paddingLeft","paddingRight","shadow","Typography","variant","tag","Grid","Root","Item","col","xs","Field","error","required","Label","TextInput","value","onChange","Error","Textarea","UsersPermissions","ref","ProtectedRolesCreatePage","Protect","PERMISSIONS","createRole"],"mappings":"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"}

package/dist/admin/pages/Roles/pages/CreatePage.mjs

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Main, Button, Flex, Typography, Grid, Field, TextInput, Textarea } from '@strapi/design-system';
+import { Button, Box, Flex, Typography, Grid, Field, TextInput, Textarea } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
-import { Page, useNotification, useTracking, useFetchClient, Layouts } from '@strapi/strapi/admin';
+import { Page, useNotification, useTracking, useFetchClient, Layouts, BackButton } from '@strapi/strapi/admin';
 import { Formik, Form } from 'formik';
 import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
@@ -55,7 +55,7 @@ const CreatePage = ()=>{
             users: []
         });
     };
-    return /*#__PURE__*/ jsxs(Main, {
+    return /*#__PURE__*/ jsxs(Page.Main, {
         children: [
             /*#__PURE__*/ jsx(Page.Title, {
                 children: formatMessage({
@@ -82,6 +82,7 @@ const CreatePage = ()=>{
                                     type: "submit",
                                     loading: mutation.isLoading,
                                     startIcon: /*#__PURE__*/ jsx(Check, {}),
+                                    fullWidth: true,
                                     children: formatMessage({
                                         id: 'global.save',
                                         defaultMessage: 'Save'
@@ -94,6 +95,16 @@ const CreatePage = ()=>{
                                 subtitle: formatMessage({
                                     id: 'Settings.roles.create.description',
                                     defaultMessage: 'Define the rights given to the role'
+                                }),
+                                navigationAction: // The back link for mobile works differently; it is placed higher up in the DOM.
+                                /*#__PURE__*/ jsx(Box, {
+                                    display: {
+                                        initial: 'none',
+                                        medium: 'block'
+                                    },
+                                    children: /*#__PURE__*/ jsx(BackButton, {
+                                        fallback: ".."
+                                    })
                                 })
                             }),
                             /*#__PURE__*/ jsx(Layouts.Content, {
@@ -126,6 +137,7 @@ const CreatePage = ()=>{
                                                     children: [
                                                         /*#__PURE__*/ jsx(Grid.Item, {
                                                             col: 6,
+                                                            xs: 12,
                                                             direction: "column",
                                                             alignItems: "stretch",
                                                             children: /*#__PURE__*/ jsxs(Field.Root, {
@@ -143,6 +155,7 @@ const CreatePage = ()=>{
                                                                         })
                                                                     }),
                                                                     /*#__PURE__*/ jsx(TextInput, {
+                                                                        type: "text",
                                                                         value: values.name || '',
                                                                         onChange: handleChange
                                                                     }),
@@ -152,6 +165,7 @@ const CreatePage = ()=>{
                                                         }),
                                                         /*#__PURE__*/ jsx(Grid.Item, {
                                                             col: 6,
+                                                            xs: 12,
                                                             direction: "column",
                                                             alignItems: "stretch",
                                                             children: /*#__PURE__*/ jsxs(Field.Root, {

package/dist/admin/pages/Roles/pages/CreatePage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CreatePage.mjs","sources":["../../../../../admin/src/pages/Roles/pages/CreatePage.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Button,\n  Flex,\n  Grid,\n  Main,\n  Textarea,\n  TextInput,\n  Typography,\n  Field,\n} from '@strapi/design-system';\nimport { Check } from '@strapi/icons';\nimport { Page, useTracking, useNotification, useFetchClient, Layouts } from '@strapi/strapi/admin';\nimport { Formik, Form } from 'formik';\nimport { useIntl } from 'react-intl';\nimport { useMutation } from 'react-query';\nimport { useNavigate } from 'react-router-dom';\n\nimport UsersPermissions from '../../../components/UsersPermissions';\nimport { PERMISSIONS } from '../../../constants';\nimport getTrad from '../../../utils/getTrad';\nimport { createRoleSchema } from '../constants';\nimport { usePlugins } from '../hooks/usePlugins';\n\nexport const CreatePage = () => {\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const navigate = useNavigate();\n  const { isLoading: isLoadingPlugins, permissions, routes } = usePlugins();\n  const { trackUsage } = useTracking();\n  const permissionsRef = React.useRef();\n  const { post } = useFetchClient();\n  const mutation = useMutation((body) => post(`/users-permissions/roles`, body), {\n    onError() {\n      toggleNotification({\n        type: 'danger',\n        message: formatMessage({\n          id: 'notification.error',\n          defaultMessage: 'An error occurred',\n        }),\n      });\n    },\n\n    onSuccess() {\n      trackUsage('didCreateRole');\n\n      toggleNotification({\n        type: 'success',\n        message: formatMessage({\n          id: getTrad('Settings.roles.created'),\n          defaultMessage: 'Role created',\n        }),\n      });\n\n      // Forcing redirecting since we don't have the id in the response\n      navigate(-1);\n    },\n  });\n\n  const handleCreateRoleSubmit = async (data) => {\n    // TODO: refactor. Child -> parent component communication is evil;\n    // We should either move the provider one level up or move the state\n    // straight into redux.\n    const permissions = permissionsRef.current.getPermissions();\n\n    await mutation.mutate({ ...data, ...permissions, users: [] });\n  };\n\n  return (\n    <Main>\n      <Page.Title>\n        {formatMessage(\n          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },\n          { name: 'Roles' }\n        )}\n      </Page.Title>\n      <Formik\n        enableReinitialize\n        initialValues={{ name: '', description: '' }}\n        onSubmit={handleCreateRoleSubmit}\n        validationSchema={createRoleSchema}\n      >\n        {({ handleSubmit, values, handleChange, errors }) => (\n          <Form noValidate onSubmit={handleSubmit}>\n            <Layouts.Header\n              primaryAction={\n                !isLoadingPlugins && (\n                  <Button type=\"submit\" loading={mutation.isLoading} startIcon={<Check />}>\n                    {formatMessage({\n                      id: 'global.save',\n                      defaultMessage: 'Save',\n                    })}\n                  </Button>\n                )\n              }\n              title={formatMessage({\n                id: 'Settings.roles.create.title',\n                defaultMessage: 'Create a role',\n              })}\n              subtitle={formatMessage({\n                id: 'Settings.roles.create.description',\n                defaultMessage: 'Define the rights given to the role',\n              })}\n            />\n            <Layouts.Content>\n              <Flex\n                background=\"neutral0\"\n                direction=\"column\"\n                alignItems=\"stretch\"\n                gap={7}\n                hasRadius\n                paddingTop={6}\n                paddingBottom={6}\n                paddingLeft={7}\n                paddingRight={7}\n                shadow=\"filterShadow\"\n              >\n                <Flex direction=\"column\" alignItems=\"stretch\">\n                  <Typography variant=\"delta\" tag=\"h2\">\n                    {formatMessage({\n                      id: getTrad('EditPage.form.roles'),\n                      defaultMessage: 'Role details',\n                    })}\n                  </Typography>\n\n                  <Grid.Root gap={4}>\n                    <Grid.Item col={6} direction=\"column\" alignItems=\"stretch\">\n                      <Field.Root\n                        name=\"name\"\n                        error={\n                          errors?.name\n                            ? formatMessage({ id: errors.name, defaultMessage: 'Name is required' })\n                            : false\n                        }\n                        required\n                      >\n                        <Field.Label>\n                          {formatMessage({\n                            id: 'global.name',\n                            defaultMessage: 'Name',\n                          })}\n                        </Field.Label>\n                        <TextInput value={values.name || ''} onChange={handleChange} />\n                        <Field.Error />\n                      </Field.Root>\n                    </Grid.Item>\n                    <Grid.Item col={6} direction=\"column\" alignItems=\"stretch\">\n                      <Field.Root\n                        name=\"description\"\n                        error={\n                          errors?.description\n                            ? formatMessage({\n                                id: errors.description,\n                                defaultMessage: 'Description is required',\n                              })\n                            : false\n                        }\n                        required\n                      >\n                        <Field.Label>\n                          {formatMessage({\n                            id: 'global.description',\n                            defaultMessage: 'Description',\n                          })}\n                        </Field.Label>\n                        <Textarea value={values.description || ''} onChange={handleChange} />\n                        <Field.Error />\n                      </Field.Root>\n                    </Grid.Item>\n                  </Grid.Root>\n                </Flex>\n\n                {!isLoadingPlugins && (\n                  <UsersPermissions\n                    ref={permissionsRef}\n                    permissions={permissions}\n                    routes={routes}\n                  />\n                )}\n              </Flex>\n            </Layouts.Content>\n          </Form>\n        )}\n      </Formik>\n    </Main>\n  );\n};\n\nexport const ProtectedRolesCreatePage = () => (\n  <Page.Protect permissions={PERMISSIONS.createRole}>\n    <CreatePage />\n  </Page.Protect>\n);\n"],"names":["CreatePage","formatMessage","useIntl","toggleNotification","useNotification","navigate","useNavigate","isLoading","isLoadingPlugins","permissions","routes","usePlugins","trackUsage","useTracking","permissionsRef","React","useRef","post","useFetchClient","mutation","useMutation","body","onError","type","message","id","defaultMessage","onSuccess","getTrad","handleCreateRoleSubmit","data","current","getPermissions","mutate","users","_jsxs","Main","_jsx","Page","Title","name","Formik","enableReinitialize","initialValues","description","onSubmit","validationSchema","createRoleSchema","handleSubmit","values","handleChange","errors","Form","noValidate","Layouts","Header","primaryAction","Button","loading","startIcon","Check","title","subtitle","Content","Flex","background","direction","alignItems","gap","hasRadius","paddingTop","paddingBottom","paddingLeft","paddingRight","shadow","Typography","variant","tag","Grid","Root","Item","col","Field","error","required","Label","TextInput","value","onChange","Error","Textarea","UsersPermissions","ref","ProtectedRolesCreatePage","Protect","PERMISSIONS","createRole"],"mappings":"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"}
+{"version":3,"file":"CreatePage.mjs","sources":["../../../../../admin/src/pages/Roles/pages/CreatePage.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Button,\n  Flex,\n  Grid,\n  Textarea,\n  TextInput,\n  Typography,\n  Field,\n  Box,\n} from '@strapi/design-system';\nimport { Check } from '@strapi/icons';\nimport {\n  Page,\n  useTracking,\n  useNotification,\n  useFetchClient,\n  Layouts,\n  BackButton,\n} from '@strapi/strapi/admin';\nimport { Formik, Form } from 'formik';\nimport { useIntl } from 'react-intl';\nimport { useMutation } from 'react-query';\nimport { useNavigate } from 'react-router-dom';\n\nimport UsersPermissions from '../../../components/UsersPermissions';\nimport { PERMISSIONS } from '../../../constants';\nimport getTrad from '../../../utils/getTrad';\nimport { createRoleSchema } from '../constants';\nimport { usePlugins } from '../hooks/usePlugins';\n\nexport const CreatePage = () => {\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const navigate = useNavigate();\n  const { isLoading: isLoadingPlugins, permissions, routes } = usePlugins();\n  const { trackUsage } = useTracking();\n  const permissionsRef = React.useRef();\n  const { post } = useFetchClient();\n  const mutation = useMutation((body) => post(`/users-permissions/roles`, body), {\n    onError() {\n      toggleNotification({\n        type: 'danger',\n        message: formatMessage({\n          id: 'notification.error',\n          defaultMessage: 'An error occurred',\n        }),\n      });\n    },\n\n    onSuccess() {\n      trackUsage('didCreateRole');\n\n      toggleNotification({\n        type: 'success',\n        message: formatMessage({\n          id: getTrad('Settings.roles.created'),\n          defaultMessage: 'Role created',\n        }),\n      });\n\n      // Forcing redirecting since we don't have the id in the response\n      navigate(-1);\n    },\n  });\n\n  const handleCreateRoleSubmit = async (data) => {\n    // TODO: refactor. Child -> parent component communication is evil;\n    // We should either move the provider one level up or move the state\n    // straight into redux.\n    const permissions = permissionsRef.current.getPermissions();\n\n    await mutation.mutate({ ...data, ...permissions, users: [] });\n  };\n\n  return (\n    <Page.Main>\n      <Page.Title>\n        {formatMessage(\n          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },\n          { name: 'Roles' }\n        )}\n      </Page.Title>\n      <Formik\n        enableReinitialize\n        initialValues={{ name: '', description: '' }}\n        onSubmit={handleCreateRoleSubmit}\n        validationSchema={createRoleSchema}\n      >\n        {({ handleSubmit, values, handleChange, errors }) => (\n          <Form noValidate onSubmit={handleSubmit}>\n            <Layouts.Header\n              primaryAction={\n                !isLoadingPlugins && (\n                  <Button\n                    type=\"submit\"\n                    loading={mutation.isLoading}\n                    startIcon={<Check />}\n                    fullWidth\n                  >\n                    {formatMessage({\n                      id: 'global.save',\n                      defaultMessage: 'Save',\n                    })}\n                  </Button>\n                )\n              }\n              title={formatMessage({\n                id: 'Settings.roles.create.title',\n                defaultMessage: 'Create a role',\n              })}\n              subtitle={formatMessage({\n                id: 'Settings.roles.create.description',\n                defaultMessage: 'Define the rights given to the role',\n              })}\n              navigationAction={\n                // The back link for mobile works differently; it is placed higher up in the DOM.\n                <Box display={{ initial: 'none', medium: 'block' }}>\n                  <BackButton fallback=\"..\" />\n                </Box>\n              }\n            />\n            <Layouts.Content>\n              <Flex\n                background=\"neutral0\"\n                direction=\"column\"\n                alignItems=\"stretch\"\n                gap={7}\n                hasRadius\n                paddingTop={6}\n                paddingBottom={6}\n                paddingLeft={7}\n                paddingRight={7}\n                shadow=\"filterShadow\"\n              >\n                <Flex direction=\"column\" alignItems=\"stretch\">\n                  <Typography variant=\"delta\" tag=\"h2\">\n                    {formatMessage({\n                      id: getTrad('EditPage.form.roles'),\n                      defaultMessage: 'Role details',\n                    })}\n                  </Typography>\n\n                  <Grid.Root gap={4}>\n                    <Grid.Item col={6} xs={12} direction=\"column\" alignItems=\"stretch\">\n                      <Field.Root\n                        name=\"name\"\n                        error={\n                          errors?.name\n                            ? formatMessage({ id: errors.name, defaultMessage: 'Name is required' })\n                            : false\n                        }\n                        required\n                      >\n                        <Field.Label>\n                          {formatMessage({\n                            id: 'global.name',\n                            defaultMessage: 'Name',\n                          })}\n                        </Field.Label>\n                        <TextInput type=\"text\" value={values.name || ''} onChange={handleChange} />\n                        <Field.Error />\n                      </Field.Root>\n                    </Grid.Item>\n                    <Grid.Item col={6} xs={12} direction=\"column\" alignItems=\"stretch\">\n                      <Field.Root\n                        name=\"description\"\n                        error={\n                          errors?.description\n                            ? formatMessage({\n                                id: errors.description,\n                                defaultMessage: 'Description is required',\n                              })\n                            : false\n                        }\n                        required\n                      >\n                        <Field.Label>\n                          {formatMessage({\n                            id: 'global.description',\n                            defaultMessage: 'Description',\n                          })}\n                        </Field.Label>\n                        <Textarea value={values.description || ''} onChange={handleChange} />\n                        <Field.Error />\n                      </Field.Root>\n                    </Grid.Item>\n                  </Grid.Root>\n                </Flex>\n\n                {!isLoadingPlugins && (\n                  <UsersPermissions\n                    ref={permissionsRef}\n                    permissions={permissions}\n                    routes={routes}\n                  />\n                )}\n              </Flex>\n            </Layouts.Content>\n          </Form>\n        )}\n      </Formik>\n    </Page.Main>\n  );\n};\n\nexport const ProtectedRolesCreatePage = () => (\n  <Page.Protect permissions={PERMISSIONS.createRole}>\n    <CreatePage />\n  </Page.Protect>\n);\n"],"names":["CreatePage","formatMessage","useIntl","toggleNotification","useNotification","navigate","useNavigate","isLoading","isLoadingPlugins","permissions","routes","usePlugins","trackUsage","useTracking","permissionsRef","React","useRef","post","useFetchClient","mutation","useMutation","body","onError","type","message","id","defaultMessage","onSuccess","getTrad","handleCreateRoleSubmit","data","current","getPermissions","mutate","users","_jsxs","Page","Main","_jsx","Title","name","Formik","enableReinitialize","initialValues","description","onSubmit","validationSchema","createRoleSchema","handleSubmit","values","handleChange","errors","Form","noValidate","Layouts","Header","primaryAction","Button","loading","startIcon","Check","fullWidth","title","subtitle","navigationAction","Box","display","initial","medium","BackButton","fallback","Content","Flex","background","direction","alignItems","gap","hasRadius","paddingTop","paddingBottom","paddingLeft","paddingRight","shadow","Typography","variant","tag","Grid","Root","Item","col","xs","Field","error","required","Label","TextInput","value","onChange","Error","Textarea","UsersPermissions","ref","ProtectedRolesCreatePage","Protect","PERMISSIONS","createRole"],"mappings":"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"}

package/dist/admin/pages/Roles/pages/EditPage.js

@@ -81,7 +81,7 @@ const EditPage = ()=>{
     if (isLoadingRole) {
         return /*#__PURE__*/ jsxRuntime.jsx(admin.Page.Loading, {});
     }
-    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Main, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(admin.Page.Main, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(admin.Page.Title, {
                 children: formatMessage({
@@ -109,6 +109,7 @@ const EditPage = ()=>{
                                     type: "submit",
                                     loading: mutation.isLoading,
                                     startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Check, {}),
+                                    fullWidth: true,
                                     children: formatMessage({
                                         id: 'global.save',
                                         defaultMessage: 'Save'
@@ -116,8 +117,15 @@ const EditPage = ()=>{
                                 }) : null,
                                 title: role.name,
                                 subtitle: role.description,
-                                navigationAction: /*#__PURE__*/ jsxRuntime.jsx(admin.BackButton, {
-                                    fallback: ".."
+                                navigationAction: // The back link for mobile works differently; it is placed higher up in the DOM.
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                    display: {
+                                        initial: 'none',
+                                        medium: 'block'
+                                    },
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(admin.BackButton, {
+                                        fallback: ".."
+                                    })
                                 })
                             }),
                             /*#__PURE__*/ jsxRuntime.jsx(admin.Layouts.Content, {
@@ -151,6 +159,7 @@ const EditPage = ()=>{
                                                     children: [
                                                         /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
                                                             col: 6,
+                                                            xs: 12,
                                                             direction: "column",
                                                             alignItems: "stretch",
                                                             children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
@@ -168,6 +177,7 @@ const EditPage = ()=>{
                                                                         })
                                                                     }),
                                                                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextInput, {
+                                                                        type: "text",
                                                                         value: values.name || '',
                                                                         onChange: handleChange
                                                                     }),
@@ -177,6 +187,7 @@ const EditPage = ()=>{
                                                         }),
                                                         /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
                                                             col: 6,
+                                                            xs: 12,
                                                             direction: "column",
                                                             alignItems: "stretch",
                                                             children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {