Merge pull request #17062 from nitinmadelyn/ui-improvement

packages/core/content-type-builder/admin/src/components/FormModal/index.js

@@ -95,6 +95,7 @@ const FormModal = () => {
     forTarget,
     modalType,
     isOpen,
+    showBackLink,
     kind,
     step,
     targetUid,
@@ -1006,6 +1007,7 @@ const FormModal = () => {
         targetUid={targetUid}
         attributeType={attributeType}
         customFieldUid={customFieldUid}
+        showBackLink={showBackLink}
       />
       {isPickingAttribute && (
         <AttributeOptions

packages/core/content-type-builder/admin/src/components/FormModalHeader/index.js

@@ -8,11 +8,14 @@ import React from 'react';
 
 import { Box, Flex, ModalHeader, Typography } from '@strapi/design-system';
 import { Breadcrumbs, Crumb } from '@strapi/design-system/v2';
+import { Link } from '@strapi/helper-plugin';
+import { ArrowLeft } from '@strapi/icons';
 import upperFirst from 'lodash/upperFirst';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
 import useDataManager from '../../hooks/useDataManager';
+import useFormModalNavigation from '../../hooks/useFormModalNavigation';
 import getTrad from '../../utils/getTrad';
 import AttributeIcon from '../AttributeIcon';
 
@@ -27,9 +30,11 @@ const FormModalHeader = ({
   modalType,
   targetUid,
   customFieldUid,
+  showBackLink
 }) => {
   const { formatMessage } = useIntl();
   const { modifiedData } = useDataManager();
+  const { onOpenModalAddField } = useFormModalNavigation();
 
   let icon;
   let headers = [];
@@ -107,6 +112,7 @@ const FormModalHeader = ({
   return (
     <ModalHeader>
       <Flex gap={3}>
+        {showBackLink && (<Link aria-label="Back" startIcon={<ArrowLeft />} onClick={() => onOpenModalAddField({ forTarget, targetUid })} to="#back" />)}
         <AttributeIcon type={icon} customField={customFieldUid} />
 
         <Breadcrumbs label={headers.map(({ label }) => label).join(',')}>
@@ -145,6 +151,7 @@ FormModalHeader.defaultProps = {
   contentTypeKind: null,
   targetUid: null,
   customFieldUid: null,
+  showBackLink: false,
 };
 
 FormModalHeader.propTypes = {
@@ -158,6 +165,7 @@ FormModalHeader.propTypes = {
   modalType: PropTypes.string.isRequired,
   targetUid: PropTypes.string,
   customFieldUid: PropTypes.string,
+  showBackLink: PropTypes.bool,
 };
 
 export default FormModalHeader;

packages/core/content-type-builder/admin/src/components/FormModalNavigationProvider/constants.js

@@ -7,6 +7,7 @@ const INITIAL_STATE_DATA = {
   forTarget: null,
   modalType: null,
   isOpen: false,
+  showBackLink: false,
   kind: null,
   step: null,
   targetUid: null,

packages/core/content-type-builder/admin/src/components/FormModalNavigationProvider/index.js

@@ -36,6 +36,7 @@ const FormModalNavigationProvider = ({ children }) => {
         modalType: 'attribute',
         step,
         attributeType,
+        showBackLink: true,
       };
     });
   };
@@ -64,6 +65,7 @@ const FormModalNavigationProvider = ({ children }) => {
         targetUid,
         modalType: 'chooseAttribute',
         isOpen: true,
+        showBackLink: false,
       };
     });
   };

packages/core/content-type-builder/admin/src/pages/ListView/index.js

@@ -109,7 +109,7 @@ const ListView = () => {
   return (
     <>
       <Prompt
-        message={formatMessage({ id: getTrad('prompt.unsaved') })}
+        message={(location) => location.hash === '#back' ? false : formatMessage({ id: getTrad('prompt.unsaved') })}
         when={hasModelBeenModified}
       />
       <HeaderLayout