From e0be8a75344fdeb7a6e295b527b61eba78b74842 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Kaiser Date: Tue, 28 Nov 2023 10:16:06 +0100 Subject: [PATCH 1/3] fix TabbedForm --- .../ra-ui-materialui/src/form/FormTabHeader.tsx | 5 +++-- .../src/form/TabbedForm.stories.tsx | 15 +++++++++++++++ .../ra-ui-materialui/src/form/TabbedFormView.tsx | 2 +- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/ra-ui-materialui/src/form/FormTabHeader.tsx b/packages/ra-ui-materialui/src/form/FormTabHeader.tsx index a3a04b538b5..b368ada8cee 100644 --- a/packages/ra-ui-materialui/src/form/FormTabHeader.tsx +++ b/packages/ra-ui-materialui/src/form/FormTabHeader.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { ReactElement, ReactNode } from 'react'; import { isElement } from 'react-is'; import PropTypes from 'prop-types'; -import { Link, useLocation } from 'react-router-dom'; +import { Link, useLocation, useResolvedPath } from 'react-router-dom'; import { Tab as MuiTab, TabProps as MuiTabProps } from '@mui/material'; import clsx from 'clsx'; import { useTranslate, useFormGroup } from 'ra-core'; @@ -22,12 +22,13 @@ export const FormTabHeader = ({ }: FormTabHeaderProps): ReactElement => { const translate = useTranslate(); const location = useLocation(); + const resolvedPath = useResolvedPath('..'); const { isSubmitted } = useFormState(); const formGroup = useFormGroup(value.toString()); const propsForLink = { component: Link, - to: { ...location, pathname: value }, + to: { ...location, pathname: `${resolvedPath.pathname}${value}` }, }; let tabLabel = isElement(label) ? label : translate(label, { _: label }); diff --git a/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx b/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx index 95085cb09c9..e595886c45a 100644 --- a/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx +++ b/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx @@ -104,3 +104,18 @@ export const Count = () => ( ); + +export const WithPath = () => ( + + + + + + + + + + + + +); diff --git a/packages/ra-ui-materialui/src/form/TabbedFormView.tsx b/packages/ra-ui-materialui/src/form/TabbedFormView.tsx index ff1cb381e88..c76f36a86d6 100644 --- a/packages/ra-ui-materialui/src/form/TabbedFormView.tsx +++ b/packages/ra-ui-materialui/src/form/TabbedFormView.tsx @@ -36,7 +36,7 @@ export const TabbedFormView = (props: TabbedFormViewProps): ReactElement => { ...rest } = props; const location = useLocation(); - const resolvedPath = useResolvedPath(''); + const resolvedPath = useResolvedPath('..'); const resource = useResourceContext(props); const [tabValue, setTabValue] = useState(0); From 7cee8b7b025bd53f114174df9faafe4799edeec6 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Kaiser Date: Tue, 28 Nov 2023 10:21:57 +0100 Subject: [PATCH 2/3] fix TabbedShowLayout --- packages/ra-ui-materialui/src/detail/Tab.tsx | 5 +++-- .../src/detail/TabbedShowLayout.stories.tsx | 20 +++++++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/packages/ra-ui-materialui/src/detail/Tab.tsx b/packages/ra-ui-materialui/src/detail/Tab.tsx index d24ece1ca1e..be5574471c8 100644 --- a/packages/ra-ui-materialui/src/detail/Tab.tsx +++ b/packages/ra-ui-materialui/src/detail/Tab.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { isValidElement, ReactElement, ReactNode } from 'react'; import PropTypes from 'prop-types'; -import { Link, useLocation } from 'react-router-dom'; +import { Link, useLocation, useResolvedPath } from 'react-router-dom'; import { Tab as MuiTab, TabProps as MuiTabProps, Stack } from '@mui/material'; import { ResponsiveStyleValue } from '@mui/system'; import { useTranslate, RaRecord } from 'ra-core'; @@ -71,9 +71,10 @@ export const Tab = ({ }: TabProps) => { const translate = useTranslate(); const location = useLocation(); + const resolvedPath = useResolvedPath('..'); const propsForLink = { component: Link, - to: { ...location, pathname: value }, + to: { ...location, pathname: `${resolvedPath.pathname}${value}` }, }; const renderHeader = () => { diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.stories.tsx b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.stories.tsx index bcef7257a6c..8c2bec76cdb 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.stories.tsx +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.stories.tsx @@ -166,3 +166,23 @@ export const SX = () => ( ); + +export const WithPath = () => ( + + + + + + + + + + + + + + + + + +); From 7b42421433b6f63ea40dbd9561b852b2e5f0f063 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Kaiser Date: Tue, 28 Nov 2023 10:51:29 +0100 Subject: [PATCH 3/3] fix code and stories --- packages/ra-ui-materialui/src/detail/Tab.tsx | 2 +- .../src/detail/TabbedShowLayout.stories.tsx | 282 +++++++++--------- .../src/form/FormTabHeader.tsx | 2 +- .../src/form/TabbedForm.stories.tsx | 22 +- .../src/form/TabbedFormView.tsx | 2 +- 5 files changed, 160 insertions(+), 150 deletions(-) diff --git a/packages/ra-ui-materialui/src/detail/Tab.tsx b/packages/ra-ui-materialui/src/detail/Tab.tsx index be5574471c8..0f231a3c474 100644 --- a/packages/ra-ui-materialui/src/detail/Tab.tsx +++ b/packages/ra-ui-materialui/src/detail/Tab.tsx @@ -74,7 +74,7 @@ export const Tab = ({ const resolvedPath = useResolvedPath('..'); const propsForLink = { component: Link, - to: { ...location, pathname: `${resolvedPath.pathname}${value}` }, + to: { ...location, pathname: `${resolvedPath.pathname}/${value}` }, }; const renderHeader = () => { diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.stories.tsx b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.stories.tsx index 8c2bec76cdb..2fbad8cdd19 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.stories.tsx +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.stories.tsx @@ -1,14 +1,16 @@ -import * as React from 'react'; -import { MemoryRouter } from 'react-router-dom'; import { Divider as MuiDivider } from '@mui/material'; import { - RecordContextProvider, - ResourceContext, - useRecordContext, + ResourceContextProvider, WithRecord, + testDataProvider, + useRecordContext, } from 'ra-core'; +import * as React from 'react'; +import { Navigate, Route, Routes } from 'react-router-dom'; +import { AdminContext } from '../AdminContext'; import { Labeled } from '../Labeled'; -import { TextField, NumberField } from '../field'; +import { Show } from '../detail'; +import { NumberField, TextField } from '../field'; import { TabbedShowLayout } from './TabbedShowLayout'; export default { title: 'ra-ui-materialui/detail/TabbedShowLayout' }; @@ -22,47 +24,69 @@ const record = { year: 1869, }; +const Wrapper = ({ children }) => ( + options?._ ?? x, + changeLocale: () => Promise.resolve(), + getLocale: () => 'en', + }} + dataProvider={testDataProvider({ + getOne: () => Promise.resolve({ data: record }), + })} + > + + + + {children} + + + } + /> + } + /> + + +); + export const Basic = () => ( - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + ); export const Count = () => ( - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + ); const BookTitle = () => { @@ -71,118 +95,92 @@ const BookTitle = () => { }; export const CustomChild = () => ( - - - - - - - {record.author}} - /> - - - - - + + + + + {record.author}} /> + + + ); export const CustomLabel = () => ( - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + ); export const Spacing = () => ( - - - - - - - - - - - - - - - + + + + + + + + + + + ); export const Divider = () => ( - - - - }> - - - - - - - - - - - + + }> + + + + + + + + + ); export const SX = () => ( - - - - - - - - - - - - - - - + + + + + + + + + + + ); export const WithPath = () => ( - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + ); diff --git a/packages/ra-ui-materialui/src/form/FormTabHeader.tsx b/packages/ra-ui-materialui/src/form/FormTabHeader.tsx index b368ada8cee..2d72f9f1229 100644 --- a/packages/ra-ui-materialui/src/form/FormTabHeader.tsx +++ b/packages/ra-ui-materialui/src/form/FormTabHeader.tsx @@ -28,7 +28,7 @@ export const FormTabHeader = ({ const propsForLink = { component: Link, - to: { ...location, pathname: `${resolvedPath.pathname}${value}` }, + to: { ...location, pathname: `${resolvedPath.pathname}/${value}` }, }; let tabLabel = isElement(label) ? label : translate(label, { _: label }); diff --git a/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx b/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx index e595886c45a..e68dd98056a 100644 --- a/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx +++ b/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx @@ -6,6 +6,7 @@ import { Edit } from '../detail'; import { NumberInput, TextInput } from '../input'; import { TabbedForm } from './TabbedForm'; import { Stack } from '@mui/material'; +import { Navigate, Route, Routes } from 'react-router-dom'; export default { title: 'ra-ui-materialui/forms/TabbedForm' }; @@ -29,11 +30,22 @@ const Wrapper = ({ children }) => ( getOne: () => Promise.resolve({ data }), })} > - - - {children} - - + + + + {children} + + + } + /> + } + /> + ); diff --git a/packages/ra-ui-materialui/src/form/TabbedFormView.tsx b/packages/ra-ui-materialui/src/form/TabbedFormView.tsx index c76f36a86d6..15e2e72fa8c 100644 --- a/packages/ra-ui-materialui/src/form/TabbedFormView.tsx +++ b/packages/ra-ui-materialui/src/form/TabbedFormView.tsx @@ -36,7 +36,7 @@ export const TabbedFormView = (props: TabbedFormViewProps): ReactElement => { ...rest } = props; const location = useLocation(); - const resolvedPath = useResolvedPath('..'); + const resolvedPath = useResolvedPath('.'); const resource = useResourceContext(props); const [tabValue, setTabValue] = useState(0);