feat(admin): create internal history for universal back button

.github/workflows/contributor-doc.yml

@@ -4,8 +4,6 @@ on:
   push:
     branches:
       - 'develop'
-    paths:
-      - 'docs/**'
 
   workflow_dispatch:
 

packages/core/admin/admin/src/components/Providers.tsx

@@ -15,6 +15,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
 
 import { AuthProvider } from '../features/Auth';
+import { HistoryProvider } from '../features/BackButton';
 
 import { GuidedTourProvider } from './GuidedTour/Provider';
 import { LanguageProvider, LanguageProviderProps } from './LanguageProvider';
@@ -69,36 +70,38 @@ const Providers = ({
 }: ProvidersProps) => {
   return (
     <Provider store={store}>
-      <AuthProvider>
-        <LanguageProvider messages={messages}>
-          <Theme themes={themes}>
-            <QueryClientProvider client={queryClient}>
-              <StrapiAppProvider
-                getPlugin={getPlugin}
-                getAdminInjectedComponents={getAdminInjectedComponents}
-                menu={menu}
-                plugins={plugins}
-                runHookParallel={runHookParallel}
-                runHookWaterfall={runHookWaterfall}
-                runHookSeries={runHookSeries}
-                settings={settings}
-              >
-                <LibraryProvider components={components} fields={fields}>
-                  <CustomFieldsProvider customFields={customFields}>
-                    <AutoReloadOverlayBlockerProvider>
-                      <OverlayBlockerProvider>
-                        <GuidedTourProvider>
-                          <NotificationsProvider>{children}</NotificationsProvider>
-                        </GuidedTourProvider>
-                      </OverlayBlockerProvider>
-                    </AutoReloadOverlayBlockerProvider>
-                  </CustomFieldsProvider>
-                </LibraryProvider>
-              </StrapiAppProvider>
-            </QueryClientProvider>
-          </Theme>
-        </LanguageProvider>
-      </AuthProvider>
+      <HistoryProvider>
+        <AuthProvider>
+          <LanguageProvider messages={messages}>
+            <Theme themes={themes}>
+              <QueryClientProvider client={queryClient}>
+                <StrapiAppProvider
+                  getPlugin={getPlugin}
+                  getAdminInjectedComponents={getAdminInjectedComponents}
+                  menu={menu}
+                  plugins={plugins}
+                  runHookParallel={runHookParallel}
+                  runHookWaterfall={runHookWaterfall}
+                  runHookSeries={runHookSeries}
+                  settings={settings}
+                >
+                  <LibraryProvider components={components} fields={fields}>
+                    <CustomFieldsProvider customFields={customFields}>
+                      <AutoReloadOverlayBlockerProvider>
+                        <OverlayBlockerProvider>
+                          <GuidedTourProvider>
+                            <NotificationsProvider>{children}</NotificationsProvider>
+                          </GuidedTourProvider>
+                        </OverlayBlockerProvider>
+                      </AutoReloadOverlayBlockerProvider>
+                    </CustomFieldsProvider>
+                  </LibraryProvider>
+                </StrapiAppProvider>
+              </QueryClientProvider>
+            </Theme>
+          </LanguageProvider>
+        </AuthProvider>
+      </HistoryProvider>
     </Provider>
   );
 };

packages/core/admin/admin/src/content-manager/components/ConfigurationForm/Form.tsx

@@ -12,15 +12,13 @@ import {
   Main,
   Typography,
 } from '@strapi/design-system';
-import { Link } from '@strapi/design-system/v2';
-import { ArrowLeft } from '@strapi/icons';
 import { generateNKeysBetween } from 'fractional-indexing';
 import pipe from 'lodash/fp/pipe';
 import { useIntl } from 'react-intl';
-import { NavLink } from 'react-router-dom';
 
 import { Form, FormProps, useForm } from '../../../components/Form';
 import { InputRenderer } from '../../../components/FormInputs/Renderer';
+import { BackButton } from '../../../features/BackButton';
 import { capitalise } from '../../../utils/strings';
 import { ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD } from '../../constants/attributes';
 import { getTranslation } from '../../utils/translations';
@@ -298,15 +296,7 @@ const Header = ({ name }: HeaderProps) => {
         id: getTranslation('components.SettingsViewWrapper.pluginHeader.description.edit-settings'),
         defaultMessage: 'Customize how the edit view will look like.',
       })}
-      navigationAction={
-        // @ts-expect-error – DS does not infer props from the `as` prop
-        <Link startIcon={<ArrowLeft />} as={NavLink} to="..">
-          {formatMessage({
-            id: 'global.back',
-            defaultMessage: 'Back',
-          })}
-        </Link>
-      }
+      navigationAction={<BackButton />}
       primaryAction={
         <Button disabled={!modified} loading={isSubmitting} type="submit">
           {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}

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

@@ -1,16 +1,16 @@
 import * as React from 'react';
 
 import { Flex, Icon, SingleSelect, SingleSelectOption, Typography } from '@strapi/design-system';
-import { Link } from '@strapi/design-system/v2';
 import { useNotification, useQueryParams, useStrapiApp } from '@strapi/helper-plugin';
-import { ArrowLeft, Cog, ExclamationMarkCircle, Pencil, Trash } from '@strapi/icons';
+import { Cog, ExclamationMarkCircle, Pencil, Trash } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { useMatch, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { DescriptionComponentRenderer } from '../../../../components/DescriptionComponentRenderer';
 import { useForm } from '../../../../components/Form';
 import { RelativeTime } from '../../../../components/RelativeTime';
+import { BackButton } from '../../../../features/BackButton';
 import {
   CREATED_AT_ATTRIBUTE_NAME,
   CREATED_BY_ATTRIBUTE_NAME,
@@ -57,13 +57,7 @@ const Header = ({ isCreating, status, title: documentTitle = 'Untitled' }: Heade
 
   return (
     <Flex direction="column" alignItems="flex-start" paddingTop={8} paddingBottom={4} gap={3}>
-      {/* TODO: implement back button behaviour, track issue - https://strapi-inc.atlassian.net/browse/CONTENT-2173 */}
-      <Link startIcon={<ArrowLeft />}>
-        {formatMessage({
-          id: 'global.back',
-          defaultMessage: 'Back',
-        })}
-      </Link>
+      <BackButton />
       <Flex
         width="100%"
         justifyContent="space-between"

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

@@ -1,11 +1,8 @@
 import { Button, HeaderLayout } from '@strapi/design-system';
-import { Link } from '@strapi/design-system/v2';
-import { useQueryParams } from '@strapi/helper-plugin';
-import { ArrowLeft } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { NavLink } from 'react-router-dom';
 
 import { useForm } from '../../../../components/Form';
+import { BackButton } from '../../../../features/BackButton';
 import { capitalise } from '../../../../utils/strings';
 import { getTranslation } from '../../../utils/translations';
 
@@ -15,29 +12,15 @@ interface HeaderProps {
   model: string;
 }
 
-const Header = ({ collectionType, name, model }: HeaderProps) => {
-  const [{ rawQuery }] = useQueryParams();
+const Header = ({ name }: HeaderProps) => {
   const { formatMessage } = useIntl();
 
   const modified = useForm('Header', (state) => state.modified);
   const isSubmitting = useForm('Header', (state) => state.isSubmitting);
 
   return (
     <HeaderLayout
-      navigationAction={
-        <Link
-          startIcon={<ArrowLeft />}
-          // @ts-expect-error invalid typings
-          to={{
-            pathname: `/content-manager/${collectionType}/${model}`,
-            search: rawQuery,
-          }}
-          id="go-back"
-          as={NavLink}
-        >
-          {formatMessage({ id: 'global.back', defaultMessage: 'Back' })}
-        </Link>
-      }
+      navigationAction={<BackButton />}
       primaryAction={
         <Button size="S" disabled={!modified} type="submit" loading={isSubmitting}>
           {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}

packages/core/admin/admin/src/content-manager/pages/ListConfiguration/tests/ListConfigurationPage.test.tsx

@@ -67,22 +67,6 @@ describe('Configure the List View', () => {
     expect(screen.getByRole('button', { name: 'Add a field' })).toBeInTheDocument();
   });
 
-  it('should keep plugins query params when arriving on the page and going back', async () => {
-    const { getByRole, user, findByRole, getByText } = render({
-      initialEntries: [
-        '/content-manager/collection-types/api::address.address/configurations/list?plugins[i18n][locale]=fr',
-      ],
-    });
-
-    await findByRole('heading', { name: 'Configure the view - Address' });
-
-    expect(getByText('?plugins[i18n][locale]=fr')).toBeInTheDocument();
-
-    await user.click(getByRole('link', { name: 'Back' }));
-
-    expect(getByText('?plugins[i18n][locale]=fr')).toBeInTheDocument();
-  });
-
   it('should add field', async () => {
     const { getByRole, user, findByRole } = render();
 

packages/core/admin/admin/src/content-manager/pages/ListView/ListViewPage.tsx

@@ -13,7 +13,6 @@ import {
   lightTheme,
   ButtonProps,
 } from '@strapi/design-system';
-import { Link } from '@strapi/design-system/v2';
 import {
   useFocusWhenNavigate,
   useQueryParams,
@@ -22,7 +21,7 @@ import {
   useAPIErrorHandler,
   useStrapiApp,
 } from '@strapi/helper-plugin';
-import { ArrowLeft, Plus } from '@strapi/icons';
+import { Plus } from '@strapi/icons';
 import isEqual from 'lodash/isEqual';
 import { stringify } from 'qs';
 import { Helmet } from 'react-helmet';
@@ -35,6 +34,7 @@ import { Page } from '../../../components/PageHelpers';
 import { Pagination } from '../../../components/Pagination';
 import { SearchInput } from '../../../components/SearchInput';
 import { HOOKS } from '../../../constants';
+import { BackButton } from '../../../features/BackButton';
 import { useEnterprise } from '../../../hooks/useEnterprise';
 import { COLLECTION_TYPES } from '../../constants/collections';
 import { DocumentRBAC, useDocumentRBAC } from '../../features/DocumentRBAC';
@@ -301,17 +301,7 @@ const ListViewPage = () => {
           { number: pagination?.total }
         )}
         title={contentTypeTitle}
-        navigationAction={
-          /**
-           * TODO: sort out back link behaviour, part of https://strapi-inc.atlassian.net/browse/CONTENT-2173
-           */
-          <Link startIcon={<ArrowLeft />}>
-            {formatMessage({
-              id: 'global.back',
-              defaultMessage: 'Back',
-            })}
-          </Link>
-        }
+        navigationAction={<BackButton />}
       />
       <ActionLayout
         endActions={

packages/core/admin/admin/src/core/store/configure.ts

@@ -98,5 +98,15 @@ type Store = ReturnType<typeof configureStoreImpl> & {
 
 type RootState = ReturnType<Store['getState']>;
 
+type Dispatch = Store['dispatch'];
+
 export { configureStoreImpl as configureStore };
-export type { RootState, AppState, RBACState, Store, PreloadState, ContentManagerAppState };
+export type {
+  RootState,
+  Dispatch,
+  AppState,
+  RBACState,
+  Store,
+  PreloadState,
+  ContentManagerAppState,
+};