Merge pull request #10293 from marmelab/fix-double-decoding-ids

Fix double decoding of ids in URLs

packages/ra-core/src/controller/edit/useEditController.spec.tsx

@@ -28,6 +28,7 @@ import {
     CanAccess,
     DisableAuthentication,
 } from './useEditController.security.stories';
+import { EncodedId } from './useEditController.stories';
 
 describe('useEditController', () => {
     const defaultProps = {
@@ -55,42 +56,31 @@ describe('useEditController', () => {
         });
     });
 
-    it('should decode the id from the route params', async () => {
-        const getOne = jest
-            .fn()
-            .mockImplementationOnce(() =>
-                Promise.resolve({ data: { id: 'test?', title: 'hello' } })
-            );
-        const dataProvider = { getOne } as unknown as DataProvider;
+    it.each([
+        { id: 'test?', url: '/posts/test%3F' },
+        { id: 'test%', url: '/posts/test%25' },
+    ])(
+        'should decode the id $id from the route params',
+        async ({ id, url }) => {
+            const getOne = jest
+                .fn()
+                .mockImplementationOnce(() =>
+                    Promise.resolve({ data: { id, title: 'hello' } })
+                );
+            const dataProvider = { getOne } as unknown as DataProvider;
 
-        render(
-            <TestMemoryRouter initialEntries={['/posts/test%3F']}>
-                <CoreAdminContext dataProvider={dataProvider}>
-                    <Routes>
-                        <Route
-                            path="/posts/:id"
-                            element={
-                                <EditController resource="posts">
-                                    {({ record }) => (
-                                        <div>{record && record.title}</div>
-                                    )}
-                                </EditController>
-                            }
-                        />
-                    </Routes>
-                </CoreAdminContext>
-            </TestMemoryRouter>
-        );
-        await waitFor(() => {
-            expect(getOne).toHaveBeenCalledWith('posts', {
-                id: 'test?',
-                signal: undefined,
+            render(<EncodedId id={id} url={url} dataProvider={dataProvider} />);
+            await waitFor(() => {
+                expect(getOne).toHaveBeenCalledWith('posts', {
+                    id,
+                    signal: undefined,
+                });
             });
-        });
-        await waitFor(() => {
-            expect(screen.queryAllByText('hello')).toHaveLength(1);
-        });
-    });
+            await waitFor(() => {
+                expect(screen.queryAllByText('Title: hello')).toHaveLength(1);
+            });
+        }
+    );
 
     it('should use the id provided through props if any', async () => {
         const getOne = jest

packages/ra-core/src/controller/edit/useEditController.stories.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { Route, Routes, useLocation } from 'react-router';
+import {
+    CoreAdminContext,
+    EditController,
+    testDataProvider,
+    TestMemoryRouter,
+} from '../..';
+
+export default {
+    title: 'ra-core/controller/useEditController',
+};
+
+export const EncodedId = ({
+    id = 'test?',
+    url = '/posts/test%3F',
+    dataProvider = testDataProvider({
+        // @ts-expect-error
+        getOne: () => Promise.resolve({ data: { id, title: 'hello' } }),
+    }),
+}) => {
+    return (
+        <TestMemoryRouter initialEntries={[url]}>
+            <CoreAdminContext dataProvider={dataProvider}>
+                <Routes>
+                    <Route
+                        path="/posts/:id"
+                        element={
+                            <EditController resource="posts">
+                                {({ record }) => (
+                                    <>
+                                        <LocationInspector />
+                                        <p>Id: {record && record.id}</p>
+                                        <p>Title: {record && record.title}</p>
+                                    </>
+                                )}
+                            </EditController>
+                        }
+                    />
+                </Routes>
+            </CoreAdminContext>
+        </TestMemoryRouter>
+    );
+};
+
+export const EncodedIdWithPercentage = ({
+    id = 'test%',
+    url = '/posts/test%25',
+    dataProvider = testDataProvider({
+        // @ts-expect-error
+        getOne: () => Promise.resolve({ data: { id, title: 'hello' } }),
+    }),
+}) => {
+    return (
+        <TestMemoryRouter initialEntries={[url]}>
+            <CoreAdminContext dataProvider={dataProvider}>
+                <Routes>
+                    <Route
+                        path="/posts/:id"
+                        element={
+                            <EditController resource="posts">
+                                {({ record }) => (
+                                    <>
+                                        <LocationInspector />
+                                        <p>Id: {record && record.id}</p>
+                                        <p>Title: {record && record.title}</p>
+                                    </>
+                                )}
+                            </EditController>
+                        }
+                    />
+                </Routes>
+            </CoreAdminContext>
+        </TestMemoryRouter>
+    );
+};
+
+const LocationInspector = () => {
+    const location = useLocation();
+    return (
+        <p>
+            Location: <code>{location.pathname}</code>
+        </p>
+    );
+};

packages/ra-core/src/controller/edit/useEditController.ts

@@ -91,7 +91,7 @@ export const useEditController = <
             'useEditController requires an id prop or a route with an /:id? parameter.'
         );
     }
-    const id = propsId ?? decodeURIComponent(routeId!);
+    const id = propsId ?? routeId;
     const { meta: queryMeta, ...otherQueryOptions } = queryOptions;
     const {
         meta: mutationMeta,

packages/ra-core/src/controller/show/useShowController.spec.tsx

@@ -13,6 +13,7 @@ import {
     CanAccess,
     DisableAuthentication,
 } from './useShowController.security.stories';
+import { EncodedId } from './useShowController.stories';
 
 describe('useShowController', () => {
     const defaultProps = {
@@ -41,41 +42,30 @@ describe('useShowController', () => {
         });
     });
 
-    it('should decode the id from the route params', async () => {
-        const getOne = jest
-            .fn()
-            .mockImplementationOnce(() =>
-                Promise.resolve({ data: { id: 'test?', title: 'hello' } })
-            );
-        const dataProvider = { getOne } as unknown as DataProvider;
-        render(
-            <TestMemoryRouter initialEntries={['/posts/test%3F']}>
-                <CoreAdminContext dataProvider={dataProvider}>
-                    <Routes>
-                        <Route
-                            path="posts/:id"
-                            element={
-                                <ShowController resource="posts">
-                                    {({ record }) => (
-                                        <div>{record && record.title}</div>
-                                    )}
-                                </ShowController>
-                            }
-                        />
-                    </Routes>
-                </CoreAdminContext>
-            </TestMemoryRouter>
-        );
-        await waitFor(() => {
-            expect(getOne).toHaveBeenCalledWith('posts', {
-                id: 'test?',
-                signal: undefined,
+    it.each([
+        { id: 'test?', url: '/posts/test%3F' },
+        { id: 'test%', url: '/posts/test%25' },
+    ])(
+        'should decode the id $id from the route params',
+        async ({ id, url }) => {
+            const getOne = jest
+                .fn()
+                .mockImplementationOnce(() =>
+                    Promise.resolve({ data: { id, title: 'hello' } })
+                );
+            const dataProvider = { getOne } as unknown as DataProvider;
+            render(<EncodedId id={id} url={url} dataProvider={dataProvider} />);
+            await waitFor(() => {
+                expect(getOne).toHaveBeenCalledWith('posts', {
+                    id,
+                    signal: undefined,
+                });
             });
-        });
-        await waitFor(() => {
-            expect(screen.queryAllByText('hello')).toHaveLength(1);
-        });
-    });
+            await waitFor(() => {
+                expect(screen.queryAllByText('Title: hello')).toHaveLength(1);
+            });
+        }
+    );
 
     it('should use the id provided through props if any', async () => {
         const getOne = jest

packages/ra-core/src/controller/show/useShowController.stories.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { Route, Routes, useLocation } from 'react-router';
+import {
+    CoreAdminContext,
+    ShowController,
+    testDataProvider,
+    TestMemoryRouter,
+} from '../..';
+
+export default {
+    title: 'ra-core/controller/useShowController',
+};
+
+export const EncodedId = ({
+    id = 'test?',
+    url = '/posts/test%3F',
+    dataProvider = testDataProvider({
+        // @ts-expect-error
+        getOne: () => Promise.resolve({ data: { id, title: 'hello' } }),
+    }),
+}) => {
+    return (
+        <TestMemoryRouter initialEntries={[url]}>
+            <CoreAdminContext dataProvider={dataProvider}>
+                <Routes>
+                    <Route
+                        path="/posts/:id"
+                        element={
+                            <ShowController resource="posts">
+                                {({ record }) => (
+                                    <>
+                                        <LocationInspector />
+                                        <p>Id: {record && record.id}</p>
+                                        <p>Title: {record && record.title}</p>
+                                    </>
+                                )}
+                            </ShowController>
+                        }
+                    />
+                </Routes>
+            </CoreAdminContext>
+        </TestMemoryRouter>
+    );
+};
+
+export const EncodedIdWithPercentage = ({
+    id = 'test%',
+    url = '/posts/test%25',
+    dataProvider = testDataProvider({
+        // @ts-expect-error
+        getOne: () => Promise.resolve({ data: { id, title: 'hello' } }),
+    }),
+}) => {
+    return (
+        <TestMemoryRouter initialEntries={[url]}>
+            <CoreAdminContext dataProvider={dataProvider}>
+                <Routes>
+                    <Route
+                        path="/posts/:id"
+                        element={
+                            <ShowController resource="posts">
+                                {({ record }) => (
+                                    <>
+                                        <LocationInspector />
+                                        <p>Id: {record && record.id}</p>
+                                        <p>Title: {record && record.title}</p>
+                                    </>
+                                )}
+                            </ShowController>
+                        }
+                    />
+                </Routes>
+            </CoreAdminContext>
+        </TestMemoryRouter>
+    );
+};
+
+const LocationInspector = () => {
+    const location = useLocation();
+    return (
+        <p>
+            Location: <code>{location.pathname}</code>
+        </p>
+    );
+};

packages/ra-core/src/controller/show/useShowController.ts

@@ -86,7 +86,7 @@ export const useShowController = <RecordType extends RaRecord = any>(
             'useShowController requires an id prop or a route with an /:id? parameter.'
         );
     }
-    const id = propsId != null ? propsId : decodeURIComponent(routeId!);
+    const id = propsId != null ? propsId : routeId;
     const { meta, ...otherQueryOptions } = queryOptions;
 
     const {