Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix TabbedForm and TabbedShowLayout with react-router v7 #10469

Merged
merged 4 commits into from
Jan 24, 2025
Merged

Fix TabbedForm and TabbedShowLayout with react-router v7 #10469

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
67b2001
Fix TabbedForm and TabbedShowLayout with react-router v7
slax57 Jan 24, 2025
0d16fa0
fix encoded paths and fix test
slax57 Jan 24, 2025
a0684b3
remove console.log
slax57 Jan 24, 2025
92a6801
fix stories
slax57 Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/ra-core/src/routing/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,4 @@ export * from './useScrollToTop';
export * from './useRestoreScrollPosition';
export * from './types';
export * from './TestMemoryRouter';
export * from './useSplatPathBase';
24 changes: 24 additions & 0 deletions packages/ra-core/src/routing/useSplatPathBase.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { useLocation, useParams } from 'react-router-dom';

/**
* Utility hook to get the base path of a splat path.
* Compatible both with react-router v6 and v7.
*
* Example:
* If a splat path is defined as `/posts/:id/show/*`,
* and the current location is `/posts/12/show/3`,
* this hook will return `/posts/12/show`.
*
* Solution inspired by
* /~https://github.com/remix-run/react-router/issues/11052#issuecomment-1828470203
*/
export const useSplatPathBase = () => {
const location = useLocation();
const params = useParams();
const splatPathRelativePart = params['*'];
const splatPathBase = location.pathname.replace(
new RegExp(`/${splatPathRelativePart}$`),
''
);
return splatPathBase;
};
9 changes: 7 additions & 2 deletions packages/ra-ui-materialui/src/detail/Tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
styled,
} from '@mui/material';
import { ResponsiveStyleValue } from '@mui/system';
import { useTranslate, RaRecord } from 'ra-core';
import { useTranslate, RaRecord, useSplatPathBase } from 'ra-core';
import clsx from 'clsx';

import { Labeled } from '../Labeled';
Expand Down Expand Up @@ -76,9 +76,14 @@ export const Tab = ({
}: TabProps) => {
const translate = useTranslate();
const location = useLocation();
const splatPathBase = useSplatPathBase();
const newPathName =
value == null || value === ''
? splatPathBase
: `${splatPathBase}/${value}`;
const propsForLink = {
component: Link,
to: { ...location, pathname: value },
to: { ...location, pathname: newPathName },
};

const renderHeader = () => {
Expand Down
252 changes: 130 additions & 122 deletions packages/ra-ui-materialui/src/detail/TabbedShowLayout.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,23 @@
import * as React from 'react';
import { Divider as MuiDivider } from '@mui/material';
import {
RecordContextProvider,
ResourceContext,
useRecordContext,
WithRecord,
TestMemoryRouter,
RaRecord,
testDataProvider,
ResourceContextProvider,
} from 'ra-core';
import { Labeled } from '../Labeled';
import { TextField, NumberField } from '../field';
import { TabbedShowLayout } from './TabbedShowLayout';
import { AdminContext } from '../AdminContext';
import { Route, Routes } from 'react-router';
import { Show } from './Show';

export default { title: 'ra-ui-materialui/detail/TabbedShowLayout' };

const record = {
const data = {
id: 1,
title: 'War and Peace',
author: 'Leo Tolstoy',
Expand All @@ -22,47 +26,73 @@ const record = {
year: 1869,
};

export const Basic = () => (
<TestMemoryRouter>
<ResourceContext.Provider value="books">
<RecordContextProvider value={record}>
<TabbedShowLayout>
<TabbedShowLayout.Tab label="First">
<TextField source="id" />
<TextField source="title" />
</TabbedShowLayout.Tab>
<TabbedShowLayout.Tab label="Second">
<TextField source="author" />
<TextField source="summary" />
<NumberField source="year" />
</TabbedShowLayout.Tab>
</TabbedShowLayout>
</RecordContextProvider>
</ResourceContext.Provider>
const Wrapper = ({
children,
record = data,
}: {
children: React.ReactNode;
record?: RaRecord;
}) => (
<TestMemoryRouter
initialEntries={[`/books/${encodeURIComponent(record.id)}/show`]}
>
<AdminContext
i18nProvider={{
translate: (x, options) => options?._ ?? x,
changeLocale: () => Promise.resolve(),
getLocale: () => 'en',
}}
dataProvider={testDataProvider({
// @ts-ignore
getOne: () => Promise.resolve({ data: record }),
})}
defaultTheme="light"
>
<ResourceContextProvider value="books">
<Routes>
<Route
path="/books/:id/show/*"
element={<Show sx={{ width: 600 }}>{children}</Show>}
/>
</Routes>
</ResourceContextProvider>
</AdminContext>
</TestMemoryRouter>
);

export const Basic = () => (
<Wrapper>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to add a Wrapper to all stories to render the tabs in a nested route, otherwise the new implementation does not work.

<TabbedShowLayout>
<TabbedShowLayout.Tab label="First">
<TextField source="id" />
<TextField source="title" />
</TabbedShowLayout.Tab>
<TabbedShowLayout.Tab label="Second">
<TextField source="author" />
<TextField source="summary" />
<NumberField source="year" />
</TabbedShowLayout.Tab>
</TabbedShowLayout>
</Wrapper>
);

export const Count = () => (
<TestMemoryRouter>
<ResourceContext.Provider value="books">
<RecordContextProvider value={record}>
<TabbedShowLayout>
<TabbedShowLayout.Tab label="Main">
<TextField source="id" />
<TextField source="title" />
</TabbedShowLayout.Tab>
<TabbedShowLayout.Tab label="Details">
<TextField source="author" />
<TextField source="summary" />
<NumberField source="year" />
</TabbedShowLayout.Tab>
<TabbedShowLayout.Tab label="Reviews" count={27}>
<TextField source="reviews" />
</TabbedShowLayout.Tab>
</TabbedShowLayout>
</RecordContextProvider>
</ResourceContext.Provider>
</TestMemoryRouter>
<Wrapper>
<TabbedShowLayout>
<TabbedShowLayout.Tab label="Main">
<TextField source="id" />
<TextField source="title" />
</TabbedShowLayout.Tab>
<TabbedShowLayout.Tab label="Details">
<TextField source="author" />
<TextField source="summary" />
<NumberField source="year" />
</TabbedShowLayout.Tab>
<TabbedShowLayout.Tab label="Reviews" count={27}>
<TextField source="reviews" />
</TabbedShowLayout.Tab>
</TabbedShowLayout>
</Wrapper>
);

const BookTitle = () => {
Expand All @@ -71,98 +101,76 @@ const BookTitle = () => {
};

export const CustomChild = () => (
<TestMemoryRouter>
<ResourceContext.Provider value="books">
<RecordContextProvider value={record}>
<TabbedShowLayout>
<TabbedShowLayout.Tab label="First">
<BookTitle />
<WithRecord
render={record => <span>{record.author}</span>}
/>
</TabbedShowLayout.Tab>
</TabbedShowLayout>
</RecordContextProvider>
</ResourceContext.Provider>
</TestMemoryRouter>
<Wrapper>
<TabbedShowLayout>
<TabbedShowLayout.Tab label="First">
<BookTitle />
<WithRecord render={record => <span>{record.author}</span>} />
</TabbedShowLayout.Tab>
</TabbedShowLayout>
</Wrapper>
);

export const CustomLabel = () => (
<TestMemoryRouter>
<ResourceContext.Provider value="books">
<RecordContextProvider value={record}>
<TabbedShowLayout>
<TabbedShowLayout.Tab label="First">
<TextField label="Identifier" source="id" />
<TextField source="title" />
<Labeled label="Author name">
<TextField source="author" />
</Labeled>
<TextField label={false} source="summary" />
<NumberField source="year" />
</TabbedShowLayout.Tab>
</TabbedShowLayout>
</RecordContextProvider>
</ResourceContext.Provider>
</TestMemoryRouter>
<Wrapper>
<TabbedShowLayout>
<TabbedShowLayout.Tab label="First">
<TextField label="Identifier" source="id" />
<TextField source="title" />
<Labeled label="Author name">
<TextField source="author" />
</Labeled>
<TextField label={false} source="summary" />
<NumberField source="year" />
</TabbedShowLayout.Tab>
</TabbedShowLayout>
</Wrapper>
);

export const Spacing = () => (
<TestMemoryRouter>
<ResourceContext.Provider value="books">
<RecordContextProvider value={record}>
<TabbedShowLayout spacing={3}>
<TabbedShowLayout.Tab label="First">
<TextField source="id" />
<TextField source="title" />
<TextField source="author" />
<TextField source="summary" />
<NumberField source="year" />
</TabbedShowLayout.Tab>
</TabbedShowLayout>
</RecordContextProvider>
</ResourceContext.Provider>
</TestMemoryRouter>
<Wrapper>
<TabbedShowLayout spacing={3}>
<TabbedShowLayout.Tab label="First">
<TextField source="id" />
<TextField source="title" />
<TextField source="author" />
<TextField source="summary" />
<NumberField source="year" />
</TabbedShowLayout.Tab>
</TabbedShowLayout>
</Wrapper>
);

export const Divider = () => (
<TestMemoryRouter>
<ResourceContext.Provider value="books">
<RecordContextProvider value={record}>
<TabbedShowLayout divider={<MuiDivider />}>
<TabbedShowLayout.Tab label="First">
<TextField source="id" />
<TextField source="title" />
<TextField source="author" />
<TextField source="summary" />
<NumberField source="year" />
</TabbedShowLayout.Tab>
</TabbedShowLayout>
</RecordContextProvider>
</ResourceContext.Provider>
</TestMemoryRouter>
<Wrapper>
<TabbedShowLayout divider={<MuiDivider />}>
<TabbedShowLayout.Tab label="First">
<TextField source="id" />
<TextField source="title" />
<TextField source="author" />
<TextField source="summary" />
<NumberField source="year" />
</TabbedShowLayout.Tab>
</TabbedShowLayout>
</Wrapper>
);

export const SX = () => (
<TestMemoryRouter>
<ResourceContext.Provider value="books">
<RecordContextProvider value={record}>
<TabbedShowLayout
sx={{
margin: 2,
padding: 2,
bgcolor: 'text.disabled',
}}
>
<TabbedShowLayout.Tab label="First">
<TextField source="id" />
<TextField source="title" />
<TextField source="author" />
<TextField source="summary" />
<NumberField source="year" />
</TabbedShowLayout.Tab>
</TabbedShowLayout>
</RecordContextProvider>
</ResourceContext.Provider>
</TestMemoryRouter>
<Wrapper>
<TabbedShowLayout
sx={{
margin: 2,
padding: 2,
bgcolor: 'text.disabled',
}}
>
<TabbedShowLayout.Tab label="First">
<TextField source="id" />
<TextField source="title" />
<TextField source="author" />
<TextField source="summary" />
<NumberField source="year" />
</TabbedShowLayout.Tab>
</TabbedShowLayout>
</Wrapper>
);
12 changes: 8 additions & 4 deletions packages/ra-ui-materialui/src/form/FormTabHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { ReactElement, ReactNode } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Tab as MuiTab, TabProps as MuiTabProps } from '@mui/material';
import clsx from 'clsx';
import { useTranslate, useFormGroup } from 'ra-core';
import { useTranslate, useFormGroup, useSplatPathBase } from 'ra-core';

import { TabbedFormClasses } from './TabbedFormView';

Expand All @@ -18,12 +18,16 @@ export const FormTabHeader = ({
...rest
}: FormTabHeaderProps): ReactElement => {
const translate = useTranslate();
const location = useLocation();
const formGroup = useFormGroup(value.toString());

const location = useLocation();
const splatPathBase = useSplatPathBase();
const newPathName =
value == null || value === ''
? splatPathBase
: `${splatPathBase}/${value}`;
const propsForLink = {
component: Link,
to: { ...location, pathname: value },
to: { ...location, pathname: newPathName },
};

let tabLabel =
Expand Down
3 changes: 2 additions & 1 deletion packages/ra-ui-materialui/src/form/TabbedForm.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@ describe('<TabbedForm />', () => {

const tabs = await screen.findAllByRole('tab');
expect(tabs.length).toEqual(2);
await screen.findByLabelText('Title');
const titleInput = await screen.findByLabelText('Title');
expect(titleInput).toBeVisible();
Comment on lines +49 to +50
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Had to add this extra check because the current test did not detect the regression 😬

});

it('should set the style of an inactive Tab button with errors', async () => {
Expand Down
Loading
Loading