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

strapi · Mar 12, 2024 · 1513658 · 1513658
1 parent 020096d
commit 1513658
Show file tree

Hide file tree

Showing 25 changed files with 320 additions and 225 deletions.
diff --git a/.github/workflows/contributor-doc.yml b/.github/workflows/contributor-doc.yml
@@ -4,8 +4,6 @@ on:
   push:
     branches:
       - 'develop'
-    paths:
-      - 'docs/**'
 
   workflow_dispatch:
 

diff --git a/packages/core/admin/admin/src/components/Providers.tsx b/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>
   );
 };

diff --git a/packages/core/admin/admin/src/content-manager/components/ConfigurationForm/Form.tsx b/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';
@@ -285,15 +283,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' })}

diff --git a/packages/core/admin/admin/src/content-manager/pages/EditView/components/Header.tsx b/packages/core/admin/admin/src/content-manager/pages/EditView/components/Header.tsx
@@ -8,16 +8,16 @@ import {
   Status,
   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 { capitalise } from '../../../../utils/strings';
 import {
   CREATED_AT_ATTRIBUTE_NAME,
@@ -67,13 +67,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"

diff --git a/...es/core/admin/admin/src/content-manager/pages/ListConfiguration/ListConfigurationPage.tsx b/...es/core/admin/admin/src/content-manager/pages/ListConfiguration/ListConfigurationPage.tsx
@@ -35,7 +35,7 @@ const ListConfiguration = () => {
   const { isLoading: isLoadingLayout, list, edit } = useDocLayout();
 
   const [updateContentTypeConfiguration] = useUpdateContentTypeConfigurationMutation();
-  const handleSubmit: FormProps<FormData>['onSubmit'] = async (data, event) => {
+  const handleSubmit: FormProps<FormData>['onSubmit'] = async (data) => {
     try {
       trackUsage('willSaveContentTypeLayout');
 

diff --git a/packages/core/admin/admin/src/content-manager/pages/ListConfiguration/components/Header.tsx b/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' })}

diff --git a/packages/core/admin/admin/src/content-manager/pages/ListView/ListViewPage.tsx b/packages/core/admin/admin/src/content-manager/pages/ListView/ListViewPage.tsx
@@ -14,7 +14,6 @@ import {
   lightTheme,
   ButtonProps,
 } from '@strapi/design-system';
-import { Link } from '@strapi/design-system/v2';
 import {
   useFocusWhenNavigate,
   useQueryParams,
@@ -23,7 +22,7 @@ import {
   useAPIErrorHandler,
   useStrapiApp,
 } from '@strapi/helper-plugin';
-import { ArrowLeft, Plus } from '@strapi/icons';
+import { Plus } from '@strapi/icons';
 import { stringify } from 'qs';
 import { useIntl } from 'react-intl';
 import { useNavigate, Link as ReactRouterLink } from 'react-router-dom';
@@ -34,6 +33,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 { capitalise } from '../../../utils/strings';
 import { COLLECTION_TYPES } from '../../constants/collections';
@@ -284,17 +284,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={

diff --git a/packages/core/admin/admin/src/core/store/configure.ts b/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,
+};
diff --git a/packages/core/admin/admin/src/core/store/middleware.ts b/packages/core/admin/admin/src/core/store/middleware.ts
@@ -0,0 +1,9 @@
+import { createListenerMiddleware, type TypedStartListening } from '@reduxjs/toolkit';
+
+import { RootState, Dispatch } from './configure';
+
+export const listenerMiddleware = createListenerMiddleware();
+
+export type AppStartListening = TypedStartListening<RootState, Dispatch>;
+
+export const startTypedListening = listenerMiddleware.startListening as AppStartListening;