Merge pull request #11324 from strapi/ui-back-button

[v4] Add missing back button

packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js

@@ -1,3 +1,4 @@
+import React, { useRef, useState } from 'react';
 import {
   request,
   useNotification,
@@ -12,8 +13,9 @@ import { ContentLayout, HeaderLayout } from '@strapi/parts/Layout';
 import { Main } from '@strapi/parts/Main';
 import { Stack } from '@strapi/parts/Stack';
 import { Formik } from 'formik';
+import { Link } from '@strapi/parts/Link';
+import BackIcon from '@strapi/icons/BackIcon';
 import get from 'lodash/get';
-import React, { useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 import { Permissions, RoleForm } from './components';
@@ -129,6 +131,14 @@ const EditPage = () => {
                   id: 'Settings.roles.create.description',
                   defaultMessage: 'Define the rights given to the role',
                 })}
+                navigationAction={
+                  <Link startIcon={<BackIcon />} to="/settings/roles">
+                    {formatMessage({
+                      id: 'app.components.go-back',
+                      defaultMessage: 'Go back',
+                    })}
+                  </Link>
+                }
               />
               <ContentLayout>
                 <Stack size={6}>

packages/core/admin/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js

@@ -22,9 +22,11 @@ import { Box } from '@strapi/parts/Box';
 import { Button } from '@strapi/parts/Button';
 import { Grid, GridItem } from '@strapi/parts/Grid';
 import { HeaderLayout, ContentLayout } from '@strapi/parts/Layout';
+import { Link } from '@strapi/parts/Link';
 import { H3 } from '@strapi/parts/Text';
 import { Main } from '@strapi/parts/Main';
 import { Stack } from '@strapi/parts/Stack';
+import BackIcon from '@strapi/icons/BackIcon';
 import CheckIcon from '@strapi/icons/CheckIcon';
 import MagicLink from 'ee_else_ce/pages/SettingsPage/pages/Users/components/MagicLink';
 import { formatAPIErrors } from '../../../../../utils';
@@ -144,6 +146,14 @@ const EditPage = ({ canUpdate }) => {
             </Button>
           }
           title={title}
+          navigationAction={
+            <Link startIcon={<BackIcon />} to="/settings/users?pageSize=10&page=1&sort=firstname">
+              {formatMessage({
+                id: 'app.components.go-back',
+                defaultMessage: 'Go back',
+              })}
+            </Link>
+          }
         />
         <ContentLayout>
           <LoadingIndicatorPage />
@@ -177,6 +187,17 @@ const EditPage = ({ canUpdate }) => {
                   </Button>
                 }
                 title={title}
+                navigationAction={
+                  <Link
+                    startIcon={<BackIcon />}
+                    to="/settings/users?pageSize=10&page=1&sort=firstname"
+                  >
+                    {formatMessage({
+                      id: 'app.components.go-back',
+                      defaultMessage: 'Go back',
+                    })}
+                  </Link>
+                }
               />
               <ContentLayout>
                 {data?.registrationToken && (

packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/index.js

@@ -15,11 +15,13 @@ import { Button } from '@strapi/parts/Button';
 import { ContentLayout, HeaderLayout } from '@strapi/parts/Layout';
 import { Grid, GridItem } from '@strapi/parts/Grid';
 import { Main } from '@strapi/parts/Main';
+import { Link } from '@strapi/parts/Link';
 import { Row } from '@strapi/parts/Row';
 import { Stack } from '@strapi/parts/Stack';
 import { Text } from '@strapi/parts/Text';
 import { TextInput } from '@strapi/parts/TextInput';
 import { Textarea } from '@strapi/parts/Textarea';
+import BackIcon from '@strapi/icons/BackIcon';
 import { Formik } from 'formik';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
@@ -158,6 +160,14 @@ const CreatePage = () => {
                   id: 'Settings.roles.create.description',
                   defaultMessage: 'Define the rights given to the role',
                 })}
+                navigationAction={
+                  <Link startIcon={<BackIcon />} to="/settings/roles">
+                    {formatMessage({
+                      id: 'app.components.go-back',
+                      defaultMessage: 'Go back',
+                    })}
+                  </Link>
+                }
               />
               <ContentLayout>
                 <Stack size={6}>

packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/index.js

@@ -7,7 +7,9 @@ import { Box } from '@strapi/parts/Box';
 import { TextInput } from '@strapi/parts/TextInput';
 import { Textarea } from '@strapi/parts/Textarea';
 import { H3 } from '@strapi/parts/Text';
+import BackIcon from '@strapi/icons/BackIcon';
 import CheckIcon from '@strapi/icons/CheckIcon';
+import { Link } from '@strapi/parts/Link';
 import { GridItem, Grid } from '@strapi/parts/Grid';
 import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
@@ -103,6 +105,14 @@ const EditPage = () => {
               }
               title={role.name}
               subtitle={role.description}
+              navigationAction={
+                <Link startIcon={<BackIcon />} to="/settings/users-permissions/roles">
+                  {formatMessage({
+                    id: 'app.components.go-back',
+                    defaultMessage: 'Go back',
+                  })}
+                </Link>
+              }
             />
             <ContentLayout>
               <Stack size={7}>