enhancement: add back button fallback support (strapi#21970)

* enhancement: add back button fallback support

* enhancement: add fallback urls

* fix: feedback and fixes

Author: remidej

packages/core/admin/admin/src/features/BackButton.tsx

@@ -4,7 +4,7 @@ import { Link, LinkProps } from '@strapi/design-system';
 import { ArrowLeft } from '@strapi/icons';
 import { produce } from 'immer';
 import { useIntl } from 'react-intl';
-import { NavLink, useLocation, useNavigate } from 'react-router-dom';
+import { NavLink, type To, useLocation, useNavigate } from 'react-router-dom';
 
 import { createContext } from '../components/Context';
 
@@ -188,43 +188,61 @@ const reducer = (state: HistoryState, action: HistoryActions) =>
 /* -------------------------------------------------------------------------------------------------
  * BackButton
  * -----------------------------------------------------------------------------------------------*/
-interface BackButtonProps extends Pick<LinkProps, 'disabled'> {}
+interface BackButtonProps extends Pick<LinkProps, 'disabled'> {
+  fallback?: To;
+}
 
 /**
  * @beta
  * @description The universal back button for the Strapi application. This uses the internal history
  * context to navigate the user back to the previous location. It can be completely disabled in a
- * specific user case.
+ * specific user case. When no history is available, you can provide a fallback destination,
+ * otherwise the link will be disabled.
  */
-const BackButton = React.forwardRef<HTMLAnchorElement, BackButtonProps>(({ disabled }, ref) => {
-  const { formatMessage } = useIntl();
-
-  const canGoBack = useHistory('BackButton', (state) => state.canGoBack);
-  const goBack = useHistory('BackButton', (state) => state.goBack);
-  const history = useHistory('BackButton', (state) => state.history);
-
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    e.preventDefault();
-    goBack();
-  };
+const BackButton = React.forwardRef<HTMLAnchorElement, BackButtonProps>(
+  ({ disabled, fallback = '' }, ref) => {
+    const { formatMessage } = useIntl();
+    const navigate = useNavigate();
+
+    const canGoBack = useHistory('BackButton', (state) => state.canGoBack);
+    const goBack = useHistory('BackButton', (state) => state.goBack);
+    const history = useHistory('BackButton', (state) => state.history);
+    const hasFallback = fallback !== '';
+    const shouldBeDisabled = disabled || (!canGoBack && !hasFallback);
+
+    const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+      e.preventDefault();
+
+      if (canGoBack) {
+        goBack();
+      } else if (hasFallback) {
+        navigate(fallback);
+      }
+    };
 
-  return (
-    <Link
-      ref={ref}
-      tag={NavLink}
-      to={history.at(-1) ?? ''}
-      onClick={handleClick}
-      disabled={disabled || !canGoBack}
-      aria-disabled={disabled || !canGoBack}
-      startIcon={<ArrowLeft />}
-    >
-      {formatMessage({
-        id: 'global.back',
-        defaultMessage: 'Back',
-      })}
-    </Link>
-  );
-});
+    // The link destination from the history. Undefined if there is only 1 location in the history.
+    const historyTo = canGoBack ? history.at(-1) : undefined;
+    // If no link destination from the history, use the fallback.
+    const toWithFallback = historyTo ?? fallback;
+
+    return (
+      <Link
+        ref={ref}
+        tag={NavLink}
+        to={toWithFallback}
+        onClick={handleClick}
+        disabled={shouldBeDisabled}
+        aria-disabled={shouldBeDisabled}
+        startIcon={<ArrowLeft />}
+      >
+        {formatMessage({
+          id: 'global.back',
+          defaultMessage: 'Back',
+        })}
+      </Link>
+    );
+  }
+);
 
 export { BackButton, HistoryProvider, useHistory };
 export type { BackButtonProps, HistoryProviderProps, HistoryContextValue, HistoryState };

packages/core/admin/admin/src/features/tests/BackButton.test.tsx

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { render as renderRTL, screen, waitFor } from '@tests/utils';
 import { NavLink, useLocation } from 'react-router-dom';
 
-import { BackButton, HistoryProvider } from '../BackButton';
+import { BackButton, type BackButtonProps, HistoryProvider } from '../BackButton';
 
 const LocationDisplay = () => {
   const location = useLocation();
@@ -19,8 +19,8 @@ const RandomNavLink = () => {
   return <NavLink to={to}>Navigate</NavLink>;
 };
 
-const render = () =>
-  renderRTL(<BackButton />, {
+const render = (props: BackButtonProps = {}) =>
+  renderRTL(<BackButton {...props} />, {
     renderOptions: {
       wrapper({ children }) {
         return (
@@ -35,12 +35,18 @@ const render = () =>
   });
 
 describe('BackButton', () => {
-  it('should be disabled if there is no history', () => {
+  it('should be disabled if there is no history and no fallback', () => {
     render();
 
     expect(screen.getByRole('link', { name: 'Back' })).toHaveAttribute('aria-disabled', 'true');
   });
 
+  it('should be enabled if there is a fallback', () => {
+    render({ fallback: '..' });
+
+    expect(screen.getByRole('link', { name: 'Back' })).toHaveAttribute('aria-disabled', 'false');
+  });
+
   it('should be enabled if there is history', async () => {
     const { user } = render();
 

packages/core/admin/admin/src/pages/Settings/pages/Roles/CreatePage.tsx

@@ -220,7 +220,7 @@ const CreatePage = () => {
                   id: 'Settings.roles.create.description',
                   defaultMessage: 'Define the rights given to the role',
                 })}
-                navigationAction={<BackButton />}
+                navigationAction={<BackButton fallback="../roles" />}
               />
               <Layouts.Content>
                 <Flex direction="column" alignItems="stretch" gap={6}>

packages/core/admin/admin/src/pages/Settings/pages/Roles/EditPage.tsx

@@ -211,7 +211,7 @@ const EditPage = () => {
                 id: 'Settings.roles.create.description',
                 defaultMessage: 'Define the rights given to the role',
               })}
-              navigationAction={<BackButton />}
+              navigationAction={<BackButton fallback="../roles" />}
             />
             <Layouts.Content>
               <Flex direction="column" alignItems="stretch" gap={6}>

packages/core/admin/admin/src/pages/Settings/pages/Users/EditPage.tsx

@@ -205,7 +205,7 @@ const EditPage = () => {
                     name: getDisplayName(initialData),
                   }
                 )}
-                navigationAction={<BackButton />}
+                navigationAction={<BackButton fallback="../users" />}
               />
               <Layouts.Content>
                 {user?.registrationToken && (

packages/core/admin/admin/src/pages/Settings/pages/Webhooks/components/WebhookForm.tsx

@@ -125,7 +125,7 @@ const WebhookForm = ({
                   })
                 : data?.name
             }
-            navigationAction={<BackButton />}
+            navigationAction={<BackButton fallback="../webhooks" />}
           />
           <Layouts.Content>
             <Flex direction="column" alignItems="stretch" gap={4}>

packages/core/content-manager/admin/src/pages/EditView/components/Header.tsx

@@ -19,7 +19,7 @@ import {
 } from '@strapi/design-system';
 import { ListPlus, Pencil, Trash, WarningCircle } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { useMatch, useNavigate } from 'react-router-dom';
+import { useMatch, useNavigate, useParams } from 'react-router-dom';
 
 import { RelativeTime } from '../../../components/RelativeTime';
 import {
@@ -30,7 +30,7 @@ import {
   UPDATED_AT_ATTRIBUTE_NAME,
   UPDATED_BY_ATTRIBUTE_NAME,
 } from '../../../constants/attributes';
-import { SINGLE_TYPES } from '../../../constants/collections';
+import { COLLECTION_TYPES, SINGLE_TYPES } from '../../../constants/collections';
 import { useDocumentRBAC } from '../../../features/DocumentRBAC';
 import { useDoc } from '../../../hooks/useDocument';
 import { useDocumentActions } from '../../../hooks/useDocumentActions';
@@ -55,6 +55,7 @@ interface HeaderProps {
 const Header = ({ isCreating, status, title: documentTitle = 'Untitled' }: HeaderProps) => {
   const { formatMessage } = useIntl();
   const isCloning = useMatch(CLONE_PATH) !== null;
+  const params = useParams<{ collectionType: string; slug: string }>();
 
   const title = isCreating
     ? formatMessage({
@@ -65,7 +66,13 @@ const Header = ({ isCreating, status, title: documentTitle = 'Untitled' }: Heade
 
   return (
     <Flex direction="column" alignItems="flex-start" paddingTop={6} paddingBottom={4} gap={2}>
-      <BackButton />
+      <BackButton
+        fallback={
+          params.collectionType === SINGLE_TYPES
+            ? undefined
+            : `../${COLLECTION_TYPES}/${params.slug}`
+        }
+      />
       <Flex width="100%" justifyContent="space-between" gap="80px" alignItems="flex-start">
         <Typography variant="alpha" tag="h1">
           {title}

packages/core/content-manager/admin/src/pages/ListConfiguration/components/Header.tsx

@@ -1,7 +1,9 @@
 import { useForm, BackButton, Layouts } from '@strapi/admin/strapi-admin';
 import { Button } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
+import { useParams } from 'react-router-dom';
 
+import { COLLECTION_TYPES } from '../../../constants/collections';
 import { capitalise } from '../../../utils/strings';
 import { getTranslation } from '../../../utils/translations';
 
@@ -13,13 +15,14 @@ interface HeaderProps {
 
 const Header = ({ name }: HeaderProps) => {
   const { formatMessage } = useIntl();
+  const params = useParams<{ slug: string }>();
 
   const modified = useForm('Header', (state) => state.modified);
   const isSubmitting = useForm('Header', (state) => state.isSubmitting);
 
   return (
     <Layouts.Header
-      navigationAction={<BackButton />}
+      navigationAction={<BackButton fallback={`../${COLLECTION_TYPES}/${params.slug}`} />}
       primaryAction={
         <Button size="S" disabled={!modified} type="submit" loading={isSubmitting}>
           {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}

packages/core/content-releases/admin/src/pages/ReleaseDetailsPage.tsx

@@ -271,7 +271,7 @@ const ReleaseDetailsLayout = ({
             <Badge {...getBadgeProps(release.status)}>{release.status}</Badge>
           </Flex>
         }
-        navigationAction={<BackButton />}
+        navigationAction={<BackButton fallback=".." />}
         primaryAction={
           !release.releasedAt && (
             <Flex gap={2}>

packages/core/review-workflows/admin/src/routes/settings/id.tsx

@@ -347,7 +347,7 @@ const EditPage = () => {
         {({ modified, isSubmitting, values, setErrors }) => (
           <>
             <Layout.Header
-              navigationAction={<BackButton />}
+              navigationAction={<BackButton fallback=".." />}
               primaryAction={
                 canUpdate || canCreate ? (
                   <Button