fix(ra-ui-materialui): Fix <TabbedFormView/> to support string ids with spaces

packages/ra-ui-materialui/src/form/TabbedForm.spec.tsx

@@ -20,7 +20,7 @@ import { AdminContext } from '../AdminContext';
 import { TabbedForm } from './TabbedForm';
 import { TabbedFormClasses } from './TabbedFormView';
 import { TextInput } from '../input';
-import { EncodedPaths } from './TabbedForm.stories';
+import { IDWithSpaces, EncodedPaths } from './TabbedForm.stories';
 
 describe('<TabbedForm />', () => {
     it('should display the tabs', () => {
@@ -49,6 +49,14 @@ describe('<TabbedForm />', () => {
         await screen.findByLabelText('Title');
     });
 
+    it('should display the tab contents correctly with IDs containing spaces', async () => {
+        render(<IDWithSpaces />);
+
+        const tabs = await screen.findAllByRole('tab');
+        expect(tabs.length).toEqual(2);
+        await screen.findByLabelText('Title');
+    });
+
     it('should set the style of an inactive Tab button with errors', async () => {
         render(
             <TestMemoryRouter initialEntries={['/1']}>

packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx

@@ -184,3 +184,26 @@ export const EncodedPaths = () => (
         </TabbedForm>
     </Wrapper>
 );
+
+const dataWithSpacesInId = {
+    id: '1 prod resource1',
+    title: 'War and Peace',
+    author: 'Leo Tolstoy',
+    bio: 'Leo Tolstoy (1828-1910) was a Russian writer who is regarded as one of the greatest authors of all time. He received nominations for the Nobel Prize in Literature every year from 1902 to 1906 and for the Nobel Peace Prize in 1901, 1902, and 1909.',
+    year: 1869,
+};
+
+export const IDWithSpaces = () => (
+    <Wrapper record={dataWithSpacesInId}>
+        <TabbedForm>
+            <TabbedForm.Tab label="main">
+                <TextInput source="title" />
+                <TextInput source="author" />
+                <NumberInput source="year" />
+            </TabbedForm.Tab>
+            <TabbedForm.Tab label="details">
+                <TextInput multiline source="bio" />
+            </TabbedForm.Tab>
+        </TabbedForm>
+    </Wrapper>
+);

packages/ra-ui-materialui/src/form/TabbedFormView.tsx

@@ -105,10 +105,13 @@ export const TabbedFormView = (props: TabbedFormViewProps): ReactElement => {
 };
 
 /**
- * Returns the pathname with each segment decoded
+ * Returns the pathname with each segment decoded and spaces removed
  */
 const getDecodedPathname = (pathname: string) =>
-    pathname.split('/').map(decodeURIComponent).join('/');
+    pathname
+        .split('/')
+        .map(segment => decodeURIComponent(segment).replace(/\s+/g, ' '))
+        .join('/');
 
 const DefaultTabs = <TabbedFormTabs />;
 const DefaultComponent = ({ children }) => (