SimpleList: Add support for custom url

marmelab · Sep 27, 2021 · ff523b1 · ff523b1
1 parent 73d779e
commit ff523b1
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 1 deletion.
diff --git a/packages/ra-ui-materialui/src/list/SimpleList.spec.tsx b/packages/ra-ui-materialui/src/list/SimpleList.spec.tsx
@@ -49,4 +49,90 @@ describe('<SimpleList />', () => {
             ).not.toBeNull();
         });
     });
+
+    it.each([
+        [
+            'edit',
+            'edit',
+            ['http://localhost/posts/1', 'http://localhost/posts/2'],
+        ],
+        [
+            'show',
+            'show',
+            ['http://localhost/posts/1/show', 'http://localhost/posts/2/show'],
+        ],
+        [
+            'custom',
+            (record, id) => `/posts/${id}/custom`,
+            [
+                'http://localhost/posts/1/custom',
+                'http://localhost/posts/2/custom',
+            ],
+        ],
+    ])(
+        'should render %s links for each item',
+        async (_, link, expectedUrls) => {
+            const { getByText } = renderWithRouter(
+                <ListContext.Provider
+                    value={{
+                        loaded: true,
+                        loading: false,
+                        ids: [1, 2],
+                        data: {
+                            1: { id: 1, title: 'foo' },
+                            2: { id: 2, title: 'bar' },
+                        },
+                        total: 2,
+                        resource: 'posts',
+                        basePath: '/posts',
+                    }}
+                >
+                    <SimpleList
+                        linkType={link}
+                        primaryText={record => record.id.toString()}
+                        secondaryText={<TextField source="title" />}
+                    />
+                </ListContext.Provider>
+            );
+
+            await waitFor(() => {
+                expect(getByText('1').closest('a').href).toEqual(
+                    expectedUrls[0]
+                );
+                expect(getByText('2').closest('a').href).toEqual(
+                    expectedUrls[1]
+                );
+            });
+        }
+    );
+
+    it('should not render links if linkType is false', async () => {
+        const { getByText } = renderWithRouter(
+            <ListContext.Provider
+                value={{
+                    loaded: true,
+                    loading: false,
+                    ids: [1, 2],
+                    data: {
+                        1: { id: 1, title: 'foo' },
+                        2: { id: 2, title: 'bar' },
+                    },
+                    total: 2,
+                    resource: 'posts',
+                    basePath: '/posts',
+                }}
+            >
+                <SimpleList
+                    linkType={false}
+                    primaryText={record => record.id.toString()}
+                    secondaryText={<TextField source="title" />}
+                />
+            </ListContext.Provider>
+        );
+
+        await waitFor(() => {
+            expect(getByText('1').closest('a')).toBeNull();
+            expect(getByText('2').closest('a')).toBeNull();
+        });
+    });
 });
diff --git a/packages/ra-ui-materialui/src/list/SimpleList.tsx b/packages/ra-ui-materialui/src/list/SimpleList.tsx
@@ -131,7 +131,8 @@ const SimpleList = <RecordType extends Record = Record>(
                                 record={data[id]}
                             >
                                 <ListItem
-                                    button={!!linkType as any}
+                                    // Ensure we don't have li items inside our own LI at L126
+                                    component="div"
                                     style={
                                         rowStyle
                                             ? rowStyle(data[id], rowIndex)
@@ -287,6 +288,10 @@ const LinkOrNot = (props: LinkOrNotProps) => {
         >
             {children}
         </Link>
+    ) : link !== false ? (
+        <Link to={link} className={classes.link}>
+            {children}
+        </Link>
     ) : (
         <span>{children}</span>
     );